@import url('tokens.css');

/* ============================================================
   Deck v3 — fixed 1920x1080 stage, scaled to the viewport.
   Slides are designed in px against that frame, so nothing
   can overflow. On narrow screens the deck degrades to a
   readable scrolling document (see the media query at end).
   signal (blue)  = structure, navigation, the agent's voice
   ember (amber)  = emphasis, quotation, the human's voice

   TYPE: five steps, and nothing else. Every size in this file
   is one of the five tokens below. Do not write a raw px
   font-size. If a block does not fit, cut words — never step
   the type down.
   ============================================================ */

:root {
  /* The floor is 36px. On a 2 m projection of this stage that is a
     37.5 mm glyph; the back of a small room, at 8 m, needs 32 mm.
     The old 26px furniture measured 27 mm and failed in the room. */
  --t-hero:      112px;  /* one statement per section slide */
  --t-quote:      76px;  /* the dominant quotation on a quote slide */
  --t-statement:  56px;  /* supporting quotes, card headings */
  --t-body:       44px;  /* all reading text */
  --t-label:      36px;  /* the floor: every mono label and citation */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

body.deck-mode { overflow: hidden; }

a { color: var(--signal); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ---------- stage + scaling ---------- */
.viewport {
  position: fixed; inset: 0;
  overflow: hidden;
}
/* The stage is a fixed 1920x1080 frame scaled to fit the window.
 * It is centred by absolute positioning, NOT by grid/flex centring:
 * a grid item larger than its container overflows asymmetrically before
 * the scale is applied, which clipped the right edge on non-16:9 windows. */
.stage {
  width: 1920px; height: 1080px;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  background:
    radial-gradient(1100px 700px at 82% 10%, rgba(121,184,255,.05), transparent 65%),
    radial-gradient(900px 700px at 8% 95%, rgba(240,168,74,.04), transparent 60%),
    var(--ink-0);
}

/* ---------- slides ---------- */
.slide {
  position: absolute; inset: 0;
  padding: 96px 120px 120px;
  display: none;
  flex-direction: column;
}
.slide.current { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .slide.current { animation: slidein .35s ease both; }
  @keyframes slidein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- chrome ---------- */
.chrome {
  position: absolute; left: 120px; right: 120px; top: 40px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase; pointer-events: none;
  z-index: 5;
}
.chrome .counter b { color: var(--paper); font-weight: 600; }

.rail {
  position: absolute; left: 120px; right: 120px; bottom: 44px;
  display: flex; gap: 6px; z-index: 5;
}
.rail span {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--wire); cursor: pointer;
}
.rail span.done { background: color-mix(in srgb, var(--signal) 45%, var(--wire)); }
.rail span.now  { background: var(--ember); }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal); margin-bottom: 32px;
}
.eyebrow .dim { color: var(--muted); font-weight: 400; }

h1 {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-hero); line-height: 1.04; letter-spacing: -.01em;
  max-width: 1400px; text-wrap: balance;
}
.lede {
  font-size: var(--t-body); line-height: 1.4; font-weight: 300;
  color: var(--paper); max-width: 1620px;
}
.lede b, p b { font-weight: 600; }
.muted { color: var(--muted); }
.em { color: var(--ember); }

/* ---------- quotes: wide, never a ribbon ---------- */
blockquote {
  border-left: 4px solid var(--ember);
  padding: 8px 0 8px 40px;
  max-width: 1620px;               /* px on purpose — never ch */
}
blockquote p {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-statement); line-height: 1.26; letter-spacing: -.005em;
  color: var(--paper);
}
/* Highlight works anywhere, not only inside a quotation: the card
   quotes on the agent/workflow slide use it too. */
.hl { color: var(--ember); }
/* A citation is furniture, so it sits on the floor step. It is never
   smaller than any other label on the slide. */
blockquote cite, .cite-line {
  display: block; margin-top: 20px;
  font-family: var(--mono); font-style: normal;
  font-size: var(--t-label); letter-spacing: .02em; color: var(--muted);
}
.cite-line { margin-top: 32px; }
blockquote cite a, .cite-line a { color: var(--muted); }
blockquote.q-xl { max-width: 1700px; }
blockquote.q-xl p { font-size: var(--t-quote); line-height: 1.2; }
blockquote.q-sm p { font-size: var(--t-body); line-height: 1.36; }

/* ---------- layout helpers ---------- */
.body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }

/* "you are here" strip: a row of plain labels, not a diagram */
.mini-pipe {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: var(--t-label); color: var(--muted);
}
.mini-pipe .step { padding: 8px 16px; border: 1px solid var(--wire); border-radius: 7px; }
.mini-pipe .step.here { color: var(--ember); border-color: var(--ember); font-weight: 600; }
.mini-pipe .sep { color: var(--wire); }

/* ---------- cards / lists ---------- */
.cards { display: grid; gap: 28px; }
.cards.c2 { grid-template-columns: 1fr 1fr; }
.card {
  background: var(--ink-1); border: 1px solid var(--wire); border-radius: 14px;
  padding: 44px 48px;
}
.card h3 {
  font-family: var(--mono); font-size: var(--t-statement); font-weight: 600;
  color: var(--ember); margin-bottom: 20px; line-height: 1.1;
}
.card p { font-size: var(--t-body); line-height: 1.4; color: var(--paper); font-weight: 300; }
.card p + p { margin-top: 18px; }

.biglist { list-style: none; }
.biglist li {
  display: flex; gap: 32px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid var(--wire);
  font-size: var(--t-body); font-weight: 300; line-height: 1.36;
}
.biglist li:last-child { border-bottom: 0; }
.biglist .k {
  font-family: var(--mono); font-size: var(--t-label); color: var(--signal);
  font-weight: 600; min-width: 300px; letter-spacing: .04em;
}

/* Inline code shrinks inside serif reading text only. In a mono context
   it is already mono, so shrinking it would push it under the floor. */
.lede code, .card p code, .biglist li code, p code {
  font-family: var(--mono); font-size: .85em; color: var(--ember);
  background: var(--ink-2); border-radius: 6px; padding: 2px 10px;
}
.card h3 code, .footer-note code, .mini-pipe code {
  font-family: var(--mono); font-size: 1em; color: var(--ember);
  background: var(--ink-2); border-radius: 6px; padding: 2px 10px;
}

/* ---------- footer ---------- */
/* One line. If a footer needs two, the slide is carrying too much:
   cut the words, do not shrink the type. Right bound matters — without
   it a long footer wraps against the stage edge at x=1920 instead of
   the 1800px margin every other element respects. */
.footer-note {
  position: absolute; left: 120px; right: 120px; bottom: 74px;
  font-family: var(--mono); font-size: var(--t-label); color: var(--muted);
  line-height: 1.35;
}
/* The footer is out of flow, so a centred .body would grow underneath it.
   Reserve room on exactly the slides that carry one. */
.slide:has(.footer-note) { padding-bottom: 210px; }

/* ---------- document fallback (narrow / print) ---------- */
/* The scale is five variables, so this block restates five variables
   rather than every selector. */
@media (max-width: 900px), print {
  :root {
    --t-hero:      clamp(2.2rem, 9vw, 4rem);
    --t-quote:     clamp(1.5rem, 6vw, 2.4rem);
    --t-statement: clamp(1.25rem, 5vw, 1.8rem);
    --t-body:      1.15rem;
    --t-label:     1rem;
  }
  body.deck-mode { overflow: auto; }
  .viewport { position: static; display: block; overflow: visible; }
  /* the stage is absolutely centred in deck mode; un-centre it here */
  .stage { position: static; left: auto; top: auto;
           width: auto; height: auto; transform: none !important; }
  .slide { position: static; display: flex !important; padding: 48px 24px; min-height: 0; }
  .slide:has(.footer-note) { padding-bottom: 48px; }
  .slide + .slide { border-top: 1px solid var(--wire); }
  .chrome, .rail { display: none; }
  blockquote { padding-left: 20px; }
  .cards.c2 { grid-template-columns: 1fr; }
  /* Long slash-command names and citation URLs must never force a sideways
     scroll on a phone. Let them break mid-token instead. */
  blockquote cite, .cite-line, .muted, .mini-pipe .step { overflow-wrap: anywhere; }
  .biglist .k { min-width: 0; }
  .biglist li { flex-direction: column; gap: 6px; }
  .footer-note { position: static; margin-top: 24px; }
  .mini-pipe { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}