/* Hallmark · macrostructure: Deck (16:9 landscape) · tone: luxury-editorial · anchor hue: gold
 * Every slide is one 16:9 box. Type is sized in em off the box, so a slide fills the
 * frame identically at any screen size — no dead margin, no overflow, no reflow.
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #221f1c; }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, figure { margin: 0; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ── the frame ──────────────────────────────────────── */
.deck {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.slide {
  --w: min(100vw, 177.78vh);
  /* Absolute lengths, NOT em: furniture below is set at its own font-size, and an
     em there would resolve against that, not the slide. That is what threw the
     kicker to 76px and the footer to 68px while the heading sat at 72px. */
  --pad: calc(var(--w) * 0.05);
  --pad-top: calc(var(--w) * 0.042);
  --pad-bot: calc(var(--w) * 0.034);
  --furniture-top: calc(var(--w) * 0.024);
  --furniture-bot: calc(var(--w) * 0.022);
  width: var(--w); height: calc(var(--w) * 0.5625);
  font-size: calc(var(--w) / 100);   /* 1em = 1% of slide width */
  position: absolute; inset: auto;
  background: var(--color-paper); color: var(--color-ink);
  padding: var(--pad-top) var(--pad) var(--pad-bot);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 260ms var(--ease-out);
  overflow: hidden;
}
.slide.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.slide.dark { background: var(--color-night); color: var(--color-night-ink); }

/* ── slide furniture ────────────────────────────────── */
.s-kicker {
  font-family: var(--font-mono); font-size: 1.05em; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-ink-3);
  position: absolute; top: var(--furniture-top); left: var(--pad);
}
.dark .s-kicker { color: var(--color-night-ink-2); }
.s-num {
  font-family: var(--font-mono); font-size: 1.05em; letter-spacing: 0.12em;
  color: var(--color-ink-3); position: absolute; top: var(--furniture-top); right: var(--pad);
}
.dark .s-num { color: var(--color-night-ink-2); }
.s-foot {
  font-family: var(--font-mono); font-size: 0.95em; letter-spacing: 0.06em;
  color: var(--color-ink-3); position: absolute;
  bottom: var(--furniture-bot); left: var(--pad); right: var(--pad);
  display: flex; justify-content: space-between; gap: 2em;
}
.dark .s-foot { color: var(--color-night-ink-2); }

h2.s-h {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 5.6em; line-height: 0.88; letter-spacing: -0.005em;
  margin-bottom: 0.5em;
}
h2.s-h.tight { margin-bottom: 0.32em; }
.s-sub {
  font-size: 1.55em; line-height: 1.45; color: var(--color-ink-2); max-width: 44ch;
}
.dark .s-sub { color: var(--color-night-ink-2); }
.rule { height: 0.25em; background: var(--color-ink); margin-bottom: 1.6em; }
.dark .rule { background: var(--color-night-ink); }
.rule-thin { height: 1px; background: var(--color-rule); }
.dark .rule-thin { background: var(--color-night-rule); }
.gold { color: var(--color-gold); }
.dark .gold { color: var(--color-gold-bright); }

.body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.cols { display: grid; gap: 3em; }
.c-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
.c-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: center; }

/* ── cover ──────────────────────────────────────────── */
.cover { justify-content: center; }
.cover { padding-top: var(--pad-top); }
.cover h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 13em; line-height: 0.82; letter-spacing: -0.012em;
}
.cover .sub2 {
  font-family: var(--font-display); text-transform: uppercase; font-size: 4.4em;
  line-height: 0.9; color: var(--color-gold-bright); margin-top: 0.08em;
}
.cover-meta {
  display: flex; gap: 4em; margin-top: 3em;
  font-family: var(--font-mono); font-size: 1.05em; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-night-ink-2);
}
.cover-meta b { display: block; color: var(--color-night-ink); font-weight: 400; margin-top: 0.4em; }

/* ── contents ───────────────────────────────────────── */
.toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4em; }
.toc li { display: flex; align-items: baseline; gap: 1em; padding: 0.85em 0; border-bottom: 1px solid var(--color-rule); }
.toc button {
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.9em;
  color: inherit; flex: 1; letter-spacing: 0.01em;
  transition: color 160ms var(--ease-out);
}
.toc button:hover { color: var(--color-gold); }
.toc .t-n { font-family: var(--font-mono); font-size: 1.05em; color: var(--color-gold); }

/* ── generic dense blocks ───────────────────────────── */
.stat { font-family: var(--font-display); font-size: 6.2em; line-height: 0.85; letter-spacing: -0.01em; }
.stat-l { font-size: 1.25em; color: var(--color-ink-2); margin-top: 0.6em; line-height: 1.4; }
.dark .stat-l { color: var(--color-night-ink-2); }

.numlist { display: grid; gap: 1.1em; }
.numlist li { display: grid; grid-template-columns: 2.6em 1fr; gap: 1.2em; align-items: start; }
.numlist .n {
  font-family: var(--font-mono); font-size: 1.1em; color: var(--color-gold);
  border: 1px solid var(--color-rule-2); border-radius: 50%;
  width: 2.6em; height: 2.6em; display: grid; place-items: center;
}
.dark .numlist .n { border-color: var(--color-night-rule); }
.numlist h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.75em; line-height: 1.05; }
.numlist p { font-size: 1.25em; color: var(--color-ink-2); line-height: 1.4; margin-top: 0.3em; }
.dark .numlist p { color: var(--color-night-ink-2); }

.bullets { display: grid; gap: 0.75em; }
.bullets li { position: relative; padding-left: 1.5em; font-size: 1.3em; line-height: 1.45; color: var(--color-ink-2); }
.dark .bullets li { color: var(--color-night-ink-2); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.42em; height: 0.42em; background: var(--color-gold); }
.bullets strong { color: var(--color-ink); font-weight: 500; }
.dark .bullets strong { color: var(--color-night-ink); }

/* ── tables (the precise money) ─────────────────────── */
table.money { font-size: 1.18em; }
table.money th {
  text-align: left; font-family: var(--font-mono); font-size: 0.82em; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-3);
  padding: 0 0 0.7em; border-bottom: 1px solid var(--color-ink);
}
.dark table.money th { color: var(--color-night-ink-2); border-bottom-color: var(--color-night-ink); }
table.money td { padding: 0.62em 0; border-bottom: 1px solid var(--color-rule); line-height: 1.35; vertical-align: top; }
.dark table.money td { border-bottom-color: var(--color-night-rule); }
table.money td.amt, table.money th.amt { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
table.money tr.total td { border-bottom: 0; border-top: 2px solid var(--color-ink); padding-top: 0.8em; font-weight: 500; }
.dark table.money tr.total td { border-top-color: var(--color-gold-bright); }
table.money tr.total td.amt { font-family: var(--font-display); font-size: 1.7em; color: var(--color-gold); }
.dark table.money tr.total td.amt { color: var(--color-gold-bright); }

/* ── price hero ─────────────────────────────────────── */
.bignum { font-family: var(--font-display); font-size: 15em; line-height: 0.8; letter-spacing: -0.015em; }
.bignum .cur { font-size: 0.42em; vertical-align: 0.55em; margin-right: 0.08em; color: var(--color-gold-bright); }
.chipset { display: flex; flex-wrap: wrap; gap: 0.5em; }
.chipset li {
  border: 1px solid var(--color-night-rule); padding: 0.5em 0.85em;
  font-family: var(--font-mono); font-size: 1.02em; color: var(--color-night-ink-2);
}

/* ── milestones ─────────────────────────────────────── */
.miles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4em; }
.miles li { border-top: 2px solid var(--color-ink); padding-top: 1em; }
.dark .miles li { border-top-color: var(--color-gold-bright); }
.miles .pct { font-family: var(--font-display); font-size: 4.2em; line-height: 0.9; color: var(--color-gold); }
.dark .miles .pct { color: var(--color-gold-bright); }
.miles h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.6em; margin: 0.4em 0 0.35em; }
.miles p { font-size: 1.12em; line-height: 1.4; color: var(--color-ink-2); }
.dark .miles p { color: var(--color-night-ink-2); }
.miles .amt { font-family: var(--font-mono); font-size: 1.1em; margin-top: 0.5em; color: var(--color-ink); }
.dark .miles .amt { color: var(--color-night-ink); }

/* ── figures ────────────────────────────────────────── */
.shot-frame { border: 1px solid var(--color-rule-2); overflow: hidden; }
.dark .shot-frame { border-color: var(--color-night-rule); }
.shot-frame img { width: 100%; }
.shot-frame[hidden] { display: none; }
figcaption { font-family: var(--font-mono); font-size: 0.95em; color: var(--color-ink-3); margin-top: 0.7em; }
.dark figcaption { color: var(--color-night-ink-2); }

/* ── interactive bits kept from the page ────────────── */
.tabs-d { display: grid; gap: 0; border-top: 2px solid var(--color-ink); margin-bottom: 1.4em; }
.dark .tabs-d { border-top-color: var(--color-night-ink); }
.tab-d {
  text-align: left; border: 0; border-bottom: 1px solid var(--color-rule);
  border-left: 2px solid transparent; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 1.05em; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink-3); padding: 0.85em 0 0.85em 0.7em;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.dark .tab-d { color: var(--color-night-ink-2); border-bottom-color: var(--color-night-rule); }
.tab-d:hover { color: var(--color-ink); }
.dark .tab-d:hover { color: var(--color-night-ink); }
.tab-d.is-on { color: var(--color-ink); border-left-color: var(--color-gold); }
.dark .tab-d.is-on { color: var(--color-night-ink); border-left-color: var(--color-gold-bright); }
.tabpane[hidden] { display: none; }
.tabpane h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 2.1em; margin-bottom: 0.5em; }

.toggle-d {
  position: relative; display: inline-flex; padding: 0.22em;
  border: 1px solid var(--color-ink); background: var(--color-paper-2); margin-bottom: 1.6em;
}
.toggle-d button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 1.02em; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink-2); padding: 0.75em 1.5em; transition: color 200ms var(--ease-out);
}
.toggle-d button.is-on { color: var(--color-paper); }
.toggle-d .thumb {
  position: absolute; z-index: 0; inset: 0.22em auto 0.22em 0.22em; width: calc(50% - 0.22em);
  background: var(--color-ink); transition: transform 420ms var(--ease-in-out), background-color 420ms var(--ease-out);
}
.toggle-d.is-desk .thumb { transform: translateX(100%); background: var(--color-gold); }
.ledger-d li {
  padding: 0.7em 0 0.7em 0.9em; border-bottom: 1px solid var(--color-rule);
  border-left: 2px solid transparent; font-size: 1.28em;
}
.ledger-d .li-today { border-left-color: var(--color-flag); }
.ledger-d .li-desk { border-left-color: var(--color-ok); }
.stage-d[data-mode="today"] .li-desk, .stage-d[data-mode="desk"] .li-today { display: none; }

.walk-d { display: grid; gap: 0; border-top: 2px solid var(--color-ink); }
.dark .walk-d { border-top-color: var(--color-night-ink); }
.step-d {
  display: flex; gap: 0.9em; align-items: baseline; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--color-rule); background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 1.2em; color: var(--color-ink-3);
  padding: 0.75em 0.5em; transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.step-d:hover { color: var(--color-ink); background: var(--color-paper-2); }
.step-d.is-on { color: var(--color-ink); background: var(--color-paper-3); }
.step-d.is-done { color: var(--color-gold); }
.step-d .sn { font-family: var(--font-mono); font-size: 0.9em; }
.walkline { font-family: var(--font-display); text-transform: uppercase; font-size: 2.9em; line-height: 1.02; }
.walkwho { font-family: var(--font-mono); font-size: 1em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-3); margin-top: 1em; }

/* ── CTAs ───────────────────────────────────────────── */
.btn-d {
  display: inline-flex; align-items: center; gap: 0.6em;
  border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-paper);
  padding: 0.85em 1.5em; font-family: var(--font-sans); font-weight: 500; font-size: 1.15em;
  text-decoration: none; cursor: pointer;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.btn-d:hover { background: var(--color-gold); border-color: var(--color-gold); }
.dark .btn-d { background: var(--color-gold-bright); border-color: var(--color-gold-bright); color: var(--color-night); }
.dark .btn-d:hover { background: var(--color-night-ink); border-color: var(--color-night-ink); }
.btn-d .arw { transition: transform 180ms var(--ease-out); }
.btn-d:hover .arw { transform: translateX(0.2em); }
.btn-quiet-d { background: none; color: inherit; }
.btn-quiet-d:hover { background: none; border-color: var(--color-gold); color: var(--color-gold); }
.cta-note-d {
  font-family: var(--font-mono); font-size: 1em; line-height: 1.6; color: var(--color-gold-bright);
  border-left: 2px solid var(--color-gold-bright); padding-left: 0.9em; margin-top: 1.2em; max-width: 46ch;
}
.cta-note-d[hidden] { display: none; }
.creds-d { display: flex; gap: 3em; margin-top: 1.6em; font-family: var(--font-mono); font-size: 1.05em; }
.creds-d dt { color: var(--color-night-ink-2); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85em; margin-bottom: 0.35em; }
.creds-d dd { color: var(--color-gold-bright); line-height: 1.6; }
.creds-d.flash { animation: cflash 1500ms var(--ease-out); }
@keyframes cflash { 0%,100% { background: transparent; } 20% { background: rgba(201,163,78,0.16); } }

/* ── chrome ─────────────────────────────────────────── */
.chrome {
  position: fixed; bottom: 0; left: 0; right: 0; height: 3.2rem; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  color: #b5ab9c; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  background: linear-gradient(to top, rgba(10,9,8,0.92), transparent);
  opacity: 0; transition: opacity 240ms var(--ease-out);
}
.chrome:hover, .chrome.show { opacity: 1; }
.chrome button {
  border: 1px solid #3d3833; background: rgba(0,0,0,0.4); color: #f2eee7;
  width: 2rem; height: 2rem; cursor: pointer; font-size: 0.85rem;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.chrome button:hover { border-color: var(--color-gold-bright); background: rgba(201,163,78,0.15); }
.chrome button:disabled { opacity: 0.3; cursor: default; }
.chrome .count { min-width: 5rem; text-align: center; }
.chrome .hint { opacity: 0.6; }
:where(button, a):focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 2px; }

.progress-d { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 21; background: transparent; }
.progress-d span { display: block; height: 100%; background: var(--color-gold-bright); transition: width 260ms var(--ease-out); }

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

/* ── print: one slide per landscape page ────────────── */
@media print {
  @page { size: 297mm 167mm; margin: 0; }
  html, body { overflow: visible; height: auto; background: #fff; }
  .chrome, .progress-d { display: none !important; }
  .deck { position: static; display: block; }
  .slide {
    /* relative, not static: the kicker / slide-number / footer are absolutely
       positioned and would otherwise anchor to the page instead of the slide. */
    position: relative; opacity: 1 !important; visibility: visible !important;
    /* Re-base --w on the page, not the screen viewport: --pad and friends are
       calc()d from it, so leaving it alone pushed the furniture off the page. */
    --w: 297mm;
    width: 297mm; height: 167mm; font-size: 2.97mm;
    break-after: page; page-break-after: always;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Keep hidden tab panes hidden when printing — revealing all three stacks
     them and overflows the page. The printed deck shows the selected tab. */
  .tabpane[hidden], .shot-frame[hidden] { display: none !important; }
}

/* ════════════════════════════════════════════════════
   MOTION — each slide plays itself in when it lands.
   Scoped to .is-on so it replays every time you return.
   ════════════════════════════════════════════════════ */
.slide .anim { opacity: 0; transform: translateY(0.9em); }
.slide.is-on .anim { animation: riseIn 520ms var(--ease-out) forwards; }
@keyframes riseIn { to { opacity: 1; transform: none; } }
.slide.is-on .anim:nth-child(1) { animation-delay: 60ms; }
.slide.is-on .anim:nth-child(2) { animation-delay: 140ms; }
.slide.is-on .anim:nth-child(3) { animation-delay: 220ms; }
.slide.is-on .anim:nth-child(4) { animation-delay: 300ms; }
.slide.is-on .anim:nth-child(5) { animation-delay: 380ms; }
.slide.is-on .anim:nth-child(6) { animation-delay: 460ms; }

/* ── diagram: four channels collapsing into one desk ── */
.chaos { width: 100%; height: 100%; }
.chaos .node {
  fill: none; stroke: var(--color-night-rule); stroke-width: 1;
}
.chaos .node-t {
  font-family: var(--font-mono); font-size: 3.2px; letter-spacing: 0.4px;
  fill: var(--color-night-ink-2); text-transform: uppercase;
}
.chaos .wire { fill: none; stroke: var(--color-flag); stroke-width: 0.7; stroke-dasharray: 2 3; opacity: 0.85; }
.chaos .hub { fill: var(--color-night-2); stroke: var(--color-flag); stroke-width: 1.2; }
.chaos .hub-t { font-family: var(--font-display); font-size: 6px; fill: var(--color-night-ink); text-anchor: middle; }
.chaos .hub-s { font-family: var(--font-mono); font-size: 3px; fill: var(--color-gold-bright); text-anchor: middle; letter-spacing: 0.3px; }
.is-on .chaos .pulse { animation: travel 2.6s linear infinite; }
.is-on .chaos .pulse-2 { animation-delay: 0.65s; }
.is-on .chaos .pulse-3 { animation-delay: 1.3s; }
.is-on .chaos .pulse-4 { animation-delay: 1.95s; }
@keyframes travel { from { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
.chaos .pulse { fill: var(--color-flag); r: 1.1; offset-rotate: 0deg; }
.is-on .chaos .hub { animation: hubPulse 2.6s var(--ease-in-out) infinite; }
@keyframes hubPulse { 0%,100% { stroke-width: 1.2; } 50% { stroke-width: 2.6; } }

/* ── diagram: the five-step pipeline ────────────────── */
.pipe { width: 100%; }
.pipe .track { stroke: var(--color-rule); stroke-width: 0.6; }
.dark .pipe .track { stroke: var(--color-night-rule); }
.pipe .fill { stroke: var(--color-gold); stroke-width: 1.4; stroke-linecap: round; transition: stroke-dashoffset 480ms var(--ease-out); }
.pipe .dot { fill: var(--color-paper); stroke: var(--color-rule-2); stroke-width: 0.7; }
.dark .pipe .dot { fill: var(--color-night); stroke: var(--color-night-rule); }
.pipe .dot.done { fill: var(--color-gold); stroke: var(--color-gold); }
.pipe .dot.now { fill: var(--color-gold); stroke: var(--color-gold); }
.is-on .pipe .dot.now { animation: dotPulse 1.6s var(--ease-in-out) infinite; }
@keyframes dotPulse { 0%,100% { r: 2.4; } 50% { r: 3.4; } }
.pipe .lbl { font-family: var(--font-mono); font-size: 2.6px; letter-spacing: 0.25px; fill: var(--color-ink-3); text-anchor: middle; }
.dark .pipe .lbl { fill: var(--color-night-ink-2); }
.pipe .lbl.on { fill: var(--color-ink); }
.dark .pipe .lbl.on { fill: var(--color-night-ink); }
.pipe .who { font-family: var(--font-mono); font-size: 2.2px; text-anchor: middle; fill: var(--color-gold); }

/* ── diagram: the timeline bar ──────────────────────── */
.gantt { width: 100%; }
.gantt .lane { fill: var(--color-paper-2); }
.gantt .bar { fill: var(--color-ink); }
.gantt .bar.alt { fill: var(--color-gold); }
.is-on .gantt .bar { transform-origin: left center; animation: grow 760ms var(--ease-out) forwards; transform: scaleX(0); }
.is-on .gantt .bar:nth-of-type(2) { animation-delay: 140ms; }
.is-on .gantt .bar:nth-of-type(3) { animation-delay: 280ms; }
.is-on .gantt .bar:nth-of-type(4) { animation-delay: 420ms; }
@keyframes grow { to { transform: scaleX(1); } }
.gantt .wk { font-family: var(--font-mono); font-size: 2.4px; fill: var(--color-ink-3); }
.gantt .ph { font-family: var(--font-display); font-size: 3.6px; fill: var(--color-ink); text-transform: uppercase; }
.gantt .ph.sm { font-size: 2.9px; }

/* ── capability tiles (icons, not bullets) ──────────── */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6em 2.4em; }
.caps li { display: grid; grid-template-columns: 3.4em 1fr; gap: 1.1em; align-items: center; }
.caps svg { width: 3.4em; height: 3.4em; stroke: var(--color-gold); fill: none; stroke-width: 1.4; }
.caps h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5em; line-height: 1.05; }
.caps p { font-size: 1.1em; color: var(--color-ink-2); line-height: 1.35; margin-top: 0.15em; }
.dark .caps p { color: var(--color-night-ink-2); }

/* ── sample gallery ─────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4em; }
.gcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.gshot {
  aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--color-night-rule);
  position: relative;
}
.gshot img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--ease-out); }
.gcard:hover .gshot img { transform: scale(1.06); }
.gcard:hover .gshot { border-color: var(--color-gold-bright); }
.gshot::after {
  content: "OPEN →"; position: absolute; inset: auto 0 0 0; padding: 0.5em 0.7em;
  font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0.1em;
  color: var(--color-night); background: var(--color-gold-bright);
  transform: translateY(100%); transition: transform 320ms var(--ease-out);
}
.gcard:hover .gshot::after { transform: none; }
.gnum { font-family: var(--font-mono); font-size: 0.95em; color: var(--color-gold-bright); margin-top: 0.7em; letter-spacing: 0.1em; }
.gcard h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.4em; line-height: 1.05; margin-top: 0.25em; }
.gcard p { font-size: 1.02em; color: var(--color-night-ink-2); line-height: 1.35; margin-top: 0.3em; }

/* ════════════════════════════════════════════════════
   Slide 03 morph — the problem resolves into the answer
   on its own, so nobody has to click to see the point.
   ════════════════════════════════════════════════════ */
.morph .m-fix { display: none; }
.morph[data-mode="fix"] .m-now { display: none; }
.morph[data-mode="fix"] .m-fix { display: block; }
.s-foot .m-now, .s-foot .m-fix { display: inline; }
.morph[data-mode="fix"] .s-foot .m-now { display: none; }
.morph:not([data-mode="fix"]) .s-foot .m-fix { display: none; }
.morph h2 .m-now, .morph h2 .m-fix,
.morph .s-kicker .m-now, .morph .s-kicker .m-fix { display: inline; }
.morph[data-mode="fix"] .s-kicker .m-now { display: none; }
.morph:not([data-mode="fix"]) .s-kicker .m-fix { display: none; }
.morph[data-mode="fix"] h2 .m-now { display: none; }
.morph:not([data-mode="fix"]) h2 .m-fix { display: none; }
.chaos .t-fix { display: none; }
.morph[data-mode="fix"] .chaos .t-now { display: none; }
.morph[data-mode="fix"] .chaos .t-fix { display: block; }
.chaos .hub-t.t-fix { font-size: 5px; }

.morph[data-mode="fix"] .wire { stroke: var(--color-gold-bright); stroke-dasharray: none; opacity: 0.55; }
.morph[data-mode="fix"] .hub { stroke: var(--color-gold-bright); }
.morph[data-mode="fix"] .pulse { fill: var(--color-gold-bright); }
.morph[data-mode="fix"] .node { opacity: 0.28; }
.chaos .wire, .chaos .hub, .chaos .node, .chaos .pulse { transition: stroke 700ms var(--ease-out), opacity 700ms var(--ease-out), fill 700ms var(--ease-out); }
.m-tag {
  font-family: var(--font-mono); font-size: 1em; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-night-ink-2); margin-bottom: 0.7em;
}
.morph-copy > div { animation: riseIn 520ms var(--ease-out) both; }

/* ── responsive: below the deck breakpoint the slides stack and scroll ── */
@media (max-width: 860px), (max-aspect-ratio: 5/6) {
  html, body { overflow: auto; height: auto; }
  .deck { position: static; display: block; }
  .slide {
    --w: 100vw;
    position: relative; width: 100%; height: auto; min-height: 60vh;
    /* Slides that change as you scroll need room to be scrolled through. */
    font-size: calc(100vw / 42);
    opacity: 1; visibility: visible; pointer-events: auto;
    padding: 3.4em var(--pad) 3.2em;
    border-bottom: 1px solid var(--color-night-rule);
  }
  .slide .s-kicker, .slide .s-num { position: static; display: inline-block; margin-bottom: 1.4em; }
  .slide .s-num { float: right; }
  .slide .s-foot { position: static; margin-top: 2.4em; flex-direction: column; gap: 0.5em; }
  .cols, .c-2, .c-3, .c-4, .c-split, .c-wide { grid-template-columns: minmax(0, 1fr) !important; }
  .caps, .toc, .gallery, .miles { grid-template-columns: minmax(0, 1fr) !important; }
  .gallery { gap: 1.8em; }
  h2.s-h { font-size: 3.6em !important; }
  .cover h1 { font-size: 7.2em; }
  .bignum { font-size: 8.6em; }
  table.money { font-size: 1.5em; }
  .chrome { display: none; }
  .slide.has-stages { min-height: 125vh; }
  .cover-meta { flex-wrap: wrap; gap: 1.6em 2.4em; }
  .cover-meta > div { flex: 1 1 42%; }
  .cover .sub2 { font-size: 3.2em; }
  .s-foot { font-size: 1.1em; }
  .slide .s-num { float: none; display: block; margin-bottom: 0.6em; }
  /* Scroll is the navigation here: each slide plays in as it arrives. */
  .slide .anim { opacity: 0; transform: translateY(0.9em); animation: none; }
  .slide.seen .anim { animation: riseIn 520ms var(--ease-out) forwards; }
}

/* ── navigation cue ─────────────────────────────────
   Tells the reader what this slide wants from them. Fades out once they
   have done it, so it never becomes furniture.
   ──────────────────────────────────────────────────── */
.s-hint {
  position: absolute; left: var(--pad); bottom: calc(var(--furniture-bot) + 2.4em);
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: 1.05em; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-gold);
  opacity: 0; transform: translateY(0.4em);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  pointer-events: none;
}
.dark .s-hint { color: var(--color-gold-bright); }
.slide.is-on .s-hint { opacity: 1; transform: none; transition-delay: 700ms; }
.slide.is-on .s-hint.done { opacity: 0; transform: translateY(-0.3em); transition-delay: 0ms; }
.s-hint::after {
  content: "↓"; display: inline-block;
  animation: nudge 1.9s var(--ease-in-out) infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.28em); } }
@media (prefers-reduced-motion: reduce) { .s-hint::after { animation: none; } }
@media print { .s-hint { display: none !important; } }

@media (max-width: 860px), (max-aspect-ratio: 5/6) {
  .s-hint { position: static; margin-top: 1.8em; opacity: 1; transform: none; }
}