/* ══════════════════════════════════════════════════════════════════════
   deck.css — shared visual foundation for the talk.
   One dark world (it's projected in a dark room — deliberately single-theme).
   Chapters override --accent / add a <style> block for their own personality.
   Palette + type inherited from the neural-network-machine deck for cohesion.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0e0d0b; --bg2:#161512; --panel:#14130f; --panel2:#191713;
  --rule:#2a2620; --rulesoft:#1f1c17;
  --ink:#f3ece0; --soft:#d8d0c2; --dim:#8c8579;
  --gold:#fdce23; --teal:#7dc4a3; --coral:#f47d66; --err:#d96961;
  --accent:var(--gold);                      /* chapters override this */
  --accent-ink:#0e0d0b;                       /* text that sits ON the accent */
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* design stage is a fixed 1280×720 — deck.js scales it to fit any screen */
  --stageW:1280px; --stageH:720px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:var(--mono);overflow:hidden;-webkit-font-smoothing:antialiased}

/* ── the scaled stage ── */
#stage{position:absolute;top:50%;left:50%;width:var(--stageW);height:var(--stageH);
  transform-origin:center center;background:var(--bg);overflow:hidden}
#stage::after{ /* faint vignette + accent wash, keeps flat slides from feeling empty */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb,var(--accent) 7%, transparent), transparent 55%),
    radial-gradient(90% 80% at 0% 0%, color-mix(in srgb,var(--accent) 4%, transparent), transparent 50%);}

/* ── slides ── */
.slide{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;
  padding:96px 120px;gap:24px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease}
.slide.is-active{opacity:1;visibility:visible;transform:none}
.slide[data-align="center"]{align-items:center;text-align:center}
.slide .wrap{max-width:1000px;width:100%;display:flex;flex-direction:column;gap:inherit}
.slide[data-align="center"] .wrap{align-items:center}

/* ── type primitives ── */
.eyebrow{font-size:19px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}
.eyebrow .n{color:var(--accent)}
.headline{font-family:var(--serif);font-weight:500;font-size:80px;line-height:1.04;
  letter-spacing:-.01em;text-wrap:balance;margin:0}
.headline em{font-style:italic;color:var(--accent)}
.statement{font-family:var(--serif);font-weight:500;font-size:60px;line-height:1.12;
  text-wrap:balance;margin:0}
.statement em{font-style:italic;color:var(--accent)}
.sub{font-size:26px;line-height:1.4;color:var(--soft);max-width:24ch}
.lead{font-size:24px;line-height:1.5;color:var(--soft);max-width:34ch}
.dimline{font-size:20px;color:var(--dim)}
.quote{font-family:var(--serif);font-style:italic;font-size:46px;line-height:1.28;
  text-wrap:balance;margin:0}
.quote .who{display:block;font-style:normal;font-family:var(--mono);font-size:18px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:28px}
.big{font-family:var(--serif);font-size:120px;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums}

/* stacked list, each line can be a reveal fragment */
.stack{display:flex;flex-direction:column;gap:18px;margin:0;padding:0;list-style:none}
.stack li{font-family:var(--serif);font-size:40px;line-height:1.15;color:var(--ink)}
.stack li .k{font-family:var(--mono);font-size:16px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:4px}

/* two-column split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;width:100%;align-items:center}

/* a call-to-action / hand-off link (looks interactive) */
.cta{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--mono);font-size:20px;letter-spacing:.04em;
  color:var(--accent-ink);background:var(--accent);
  padding:16px 26px;border-radius:999px;transition:transform .15s ease, filter .15s ease}
.cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cta .arw{font-size:22px}
.ghost{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:2px;transition:color .15s,border-color .15s}
.ghost:hover{color:var(--ink);border-color:var(--accent)}

/* ── reveal fragments: hidden until their step is reached ── */
[data-step]{opacity:0;transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease}
[data-step].revealed{opacity:1;transform:none}

/* ── chrome: progress + counter + hint (kept quiet) ── */
#chrome{position:absolute;left:0;right:0;bottom:0;height:70px;display:flex;
  align-items:center;justify-content:space-between;padding:0 40px;
  font-family:var(--mono);font-size:14px;color:var(--dim);z-index:5}
#chapLabel{letter-spacing:.2em;text-transform:uppercase}
#chapLabel b{color:var(--soft);font-weight:400}
#dots{display:flex;gap:9px;align-items:center}
#dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--rule);transition:background .2s, transform .2s}
#dots button.on{background:var(--accent);transform:scale(1.25)}
#dots button.seen{background:var(--dim)}
#counter{letter-spacing:.12em;font-variant-numeric:tabular-nums}
#counter .cur{color:var(--soft)}
#progress{position:absolute;top:0;left:0;height:2px;background:var(--accent);
  width:0;transition:width .35s ease;z-index:6;opacity:.8}

/* fullscreen affordance */
#fsBtn{position:absolute;top:24px;right:28px;z-index:6;background:none;border:0;
  color:var(--dim);cursor:pointer;font-family:var(--mono);font-size:13px;
  letter-spacing:.1em;opacity:.6;transition:opacity .15s}
#fsBtn:hover{opacity:1;color:var(--soft)}
#sndBtn{position:absolute;top:24px;right:96px;z-index:6;background:none;border:0;
  color:var(--dim);cursor:pointer;font-family:var(--mono);font-size:13px;
  letter-spacing:.1em;opacity:.6;transition:opacity .15s,color .15s}
#sndBtn:hover{opacity:1;color:var(--soft)}
#sndBtn.on{opacity:1;color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .slide,[data-step],#progress,.cta{transition:none}
}