/* ═══════════════════════════════════════════════════════════════════════════
   MANYFOLD — "Mono & Aurora", the app's palette ported to the web.

   Monochrome chrome, one metal. The whole UI is pure black rising through neutral
   greys, with white as the only accent (actions, links, the spine). The single
   chromatic moment is GOLD (--taken) — the classic black-and-gold luxury pairing —
   reserved for the lit path, emphasised words, and the featured tier. This mirrors
   `app/lib/core/theme/tokens.dart` (Mf.*); typography is Raleway everywhere, exactly
   like the app's single-face system.

   Motion is intentionally restrained: subtle scroll reveals and a scroll-progress
   rule only. The decorative loops (constellation, camera dolly, typing, beam/drift/
   equaliser) were removed in favour of a calmer, more premium read.

   COLOR IS INFORMATION. The branch-state tokens still carry meaning:
     --brand    the one thread / accent (white)
     --taken    the path the reader TOOK — the lit path (gold)
     --untaken  the paths they didn't (mid grey)
     --distant  branches further out in the dark (dim grey)

   Every value is verified against WCAG AA on --canvas: text 4.5:1, non-text 3:1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  /* "Mono & Aurora" — the site now mirrors the app (app/lib/core/theme/tokens.dart).
     Pure black canvas rising through neutral greys; the entire chrome is monochrome.
     Restraint IS the premium look — black + white + one metal (gold) is the classic
     luxury pairing, so the single chromatic moment on the whole site is --taken (gold),
     reserved for the lit path, emphasised words, and the featured tier. Set --taken to
     #ffffff to go 100% grayscale. */
  --canvas: #000000;       /* Mf.ink900 — true black (OLED) */
  --surface: #0d0d0d;      /* Mf.ink800 */
  --surface-2: #141414;    /* Mf.ink750 */
  --surface-3: #1a1a1a;    /* Mf.ink700 */
  --glass: rgba(13, 13, 13, 0.72);
  --line: rgba(255, 255, 255, 0.10);
  --line-lit: rgba(255, 255, 255, 0.22);

  --brand: #ffffff;        /* Mf.accentBright — the mono accent (actions, links, spine) */
  --brand-bright: #ffffff;
  --taken: #fbbf24;        /* Mf.goldBright — the one luxury metal; the lit path */
  --untaken: #8a8a8a;      /* mid grey — recessive, the roads not walked */
  --distant: #5a5a5a;      /* dim grey — branches receding into the dark */

  --text: #ffffff;         /* Mf.text */
  --text-soft: #b8b8b8;    /* Mf.textSoft */
  --text-mute: #949494;    /* Mf.textMute */
  --ok: #8fd08a;           /* Mf.positiveBright — semantic, kept */
  --err: #f5978a;          /* Mf.dangerBright — semantic, kept */

  /* ONE face everywhere, exactly like the app (Raleway; the app collapsed its old
     three-face system into a single sans). No serif display, no variable optical axis. */
  --display: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --body: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Raleway', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-axes: normal; /* Raleway has no opsz axis; keeps existing var() calls as no-ops */

  --maxw: 40rem;
  --pad: 1.25rem;
  --gutter: 20px;
  --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* The site is dark-only. Declaring it makes the UA render form controls, scrollbars,
   autofill highlights and the caret in dark chrome — without this they arrive in light
   chrome against a #000000 page. */
:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip, NOT hidden — hidden re-parents view() timelines */
}
::selection { background: var(--brand); color: var(--canvas); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--taken); outline-offset: 3px; border-radius: 4px; }
/* Skip link — off-screen until focused, then pinned top-left. Uses a translate rather
   than display:none so it stays in the tab order. */
.skip-link {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 1000;
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: var(--brand); color: #fff; font-weight: 600; text-decoration: none;
  transform: translateY(-200%); transition: transform 160ms ease;
}
.skip-link:focus-visible { transform: translateY(0); }
/* The skip target itself must not draw a focus ring — it receives focus
   programmatically, not by tabbing. */
main:focus { outline: none; }
img, svg, canvas { max-width: 100%; }

/* ── §SHELL ──────────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 2 * var(--pad), var(--maxw)); margin-inline: auto; }
.band { padding-block: 4.5rem; position: relative; }
.eyebrow {
  font: 600 0.72rem/1 var(--body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-bright);
}
h1, h2 {
  font-family: var(--display);
  font-variation-settings: var(--display-axes);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-weight: 700;
}
h1 { font-size: clamp(2.4rem, 10vw, 4.6rem); margin: 0.9rem 0 1.1rem; }
h1 em, h2 em { font-style: italic; color: var(--taken); text-shadow: 0 0 30px rgba(251, 191, 36, 0.35); }
h2 { font-size: clamp(1.75rem, 6.4vw, 2.8rem); line-height: 1.15; margin-bottom: 0.6rem; }
.band-lede { color: var(--text-mute); margin-bottom: 2.2rem; max-width: 36rem; }
.lede { color: var(--text-soft); font-size: 1.1rem; max-width: 34rem; }
.spark-word { color: var(--brand-bright); font-weight: 600; }

/* ── §SPINE — the signature thread, lit path pinned to scroll ────────────── */
.spine {
  position: fixed; left: 0; top: 0;
  width: var(--gutter); height: 100vh; height: 100svh;
  z-index: 5; pointer-events: none; overflow: visible;
}
.spine svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spine .rail { fill: none; stroke: var(--line); stroke-width: 1.5; }
.spine .fork-cyan { fill: none; stroke: var(--untaken); stroke-width: 1.2; opacity: 0.35; }
.spine .fork-orchid { fill: none; stroke: var(--distant); stroke-width: 1.2; opacity: 0.28; }
.spine .lit {
  fill: none; stroke: var(--taken); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; /* rests drawn — no-JS safe */
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.55));
}

/* ── §NAV ────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem var(--pad) 0.8rem calc(var(--pad) + 0.5rem);
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.nav.stuck { border-bottom-color: var(--line); }
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-variation-settings: var(--display-axes);
  font-size: 1.2rem; font-weight: 700; text-decoration: none;
}
/* ── §MARK — the 3D quarter-fold logo (endless; seam = the folded original) ──
   Four aurora quadrants hinged on two creases. The folded square opens a flap into a
   rectangle (right column, --h / rotateY), opens again into a square twice the size
   (bottom row, --v / rotateX), then folds by half twice back to the original — real 3D
   with crease seams and fold-shading. Footprint is fixed at 2·--q so the nav never
   reflows. Reduced-motion (and browsers without @property) rest on the folded original. */
@property --h { syntax: '<angle>'; inherits: true; initial-value: -180deg; }
@property --v { syntax: '<angle>'; inherits: true; initial-value: 180deg; }
.mf3d {
  --q: 11px;
  display: inline-grid; place-items: center; flex: none;
  /* Fixed to the big diamond's bounding (2·q·√2) so the nav never reflows as it folds. */
  width: 32px; height: 32px;
  perspective: 260px;
}
.mf-fold {
  position: relative; width: calc(var(--q) * 2); height: calc(var(--q) * 2);
  transform-style: preserve-3d;
  /* rotateZ(45°) turns the folding square into the diamond mark. The trailing translate
     (applied first, in local space) recenters the visible content: folded content is
     anchored top-left, so it's shifted by +q/2 to sit centred, then the shift eases to 0
     as it opens — the mark grows symmetrically from the centre and returns there. */
  transform: rotateZ(45deg) rotateX(9deg) rotateY(-11deg)
    translate(calc(var(--q) / 2), calc(var(--q) / 2));
  animation: mf-quarter 7s ease-in-out infinite;
}
.mf-q {
  position: absolute; width: var(--q); height: var(--q); overflow: hidden;
  background: currentColor; /* mono — inherits the nav ink */
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.4);
}
.mf-q .sh { position: absolute; inset: 0; background: #000; opacity: 0; }
.mf-lower { filter: brightness(0.62); }
.mf-tl { left: 0; top: 0; }
.mf-tr { left: var(--q); top: 0; transform-origin: left center; transform: rotateY(var(--h)); }
.mf-bottom {
  position: absolute; left: 0; top: var(--q);
  width: calc(var(--q) * 2); height: var(--q);
  transform-origin: top center; transform: rotateX(var(--v)); transform-style: preserve-3d;
}
.mf-bl { left: 0; top: 0; }
.mf-br { left: var(--q); top: 0; transform-origin: left center; transform: rotateY(var(--h)); }
.mf-tr .sh, .mf-br .sh { animation: mf-shade-h 7s ease-in-out infinite; }
.mf-bottom .sh { animation: mf-shade-v 7s ease-in-out infinite; }
@keyframes mf-quarter {
  0%, 6%   { --h: -180deg; --v: 180deg; transform: rotateZ(45deg) rotateX(9deg) rotateY(-11deg) translate(calc(var(--q) / 2), calc(var(--q) / 2)); }
  28%, 36% { --h: 0deg;    --v: 180deg; transform: rotateZ(45deg) rotateX(9deg) rotateY(-11deg) translate(0, calc(var(--q) / 2)); }
  58%, 72% { --h: 0deg;    --v: 0deg;   transform: rotateZ(45deg) rotateX(9deg) rotateY(-11deg) translate(0, 0); }
  84%      { --h: 0deg;    --v: 180deg; transform: rotateZ(45deg) rotateX(9deg) rotateY(-11deg) translate(0, calc(var(--q) / 2)); }
  100%     { --h: -180deg; --v: 180deg; transform: rotateZ(45deg) rotateX(9deg) rotateY(-11deg) translate(calc(var(--q) / 2), calc(var(--q) / 2)); }
}
@keyframes mf-shade-h { 0%, 6% { opacity: 0.55; } 28% { opacity: 0; } 84% { opacity: 0; } 100% { opacity: 0.55; } }
@keyframes mf-shade-v { 0%, 36% { opacity: 0.5; } 58% { opacity: 0; } 72% { opacity: 0; } 84% { opacity: 0.5; } 100% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) {
  .mf-fold, .mf-tr .sh, .mf-br .sh, .mf-bottom .sh { animation: none; }
  .mf-fold { --h: -180deg; --v: 180deg; }
}
.nav-links { display: none; }
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand), var(--untaken) 60%, var(--taken));
}

/* ── §BUTTONS + COMING SOON ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border: 0; border-radius: 999px;
  font: 600 1rem var(--body); text-decoration: none; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn-tide { background: linear-gradient(120deg, var(--brand), var(--untaken)); color: var(--canvas); }
.btn-tide:hover { transform: translateY(-2px); box-shadow: 0 10px 34px -10px rgba(255, 255, 255, 0.8); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-lit); }
.btn-ghost:hover { border-color: var(--text-mute); }
.nav .btn { padding: 0.5rem 1rem; font-size: 0.88rem; }

.soon {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1.6rem; border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.08);
  font: 600 0.9rem var(--body); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--taken);
}
.soon::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--taken); box-shadow: 0 0 10px 2px rgba(251, 191, 36, 0.7);
}

/* ── §HERO ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: 3.5rem 3rem; overflow: clip; }
.hero-canvas { display: none; } /* constellation removed; element kept in markup, hidden */
.hero .wrap { position: relative; z-index: 1; }
.play-note { margin-top: 1rem; font-size: 0.84rem; color: var(--text-mute); }

.counts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem;
  margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  max-width: 28rem;
}
.count .num {
  font: 700 1.7rem/1 var(--display); font-variation-settings: var(--display-axes);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--taken), var(--untaken) 60%, var(--brand-bright));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.count .label {
  margin-top: 0.3rem; font-size: 0.72rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-mute); line-height: 1.3;
}

/* hero cover art composition */
.hero-art { display: none; }
.cover-stack { position: relative; width: min(80%, 300px); aspect-ratio: 2 / 3; transform: rotate(3deg); }
.cover-stack::before {
  content: ''; position: absolute; inset: -2px; border-radius: 22px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.45));
  filter: blur(16px); opacity: 0.5;
}
.cover-stack .cover-art {
  position: relative; width: 100%; height: 100%;
  border-radius: 18px; border: 1px solid var(--line-lit);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 1); display: block;
  /* No background-image here on purpose — it is set only inside the >=1100px block
     below, alongside the rule that makes .hero-art visible. Declaring it here would
     make phones download the file for a hidden element, which is the bug this fixes. */
  background-size: cover; background-position: center;
}
.cover-tag {
  position: absolute; background: rgba(20, 20, 20, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.9);
}
.cover-tag.title { left: -16%; bottom: 9%; transform: rotate(-6deg); border-radius: 12px; padding: 0.6rem 0.9rem; }
.cover-tag.title .k { font: 600 0.62rem var(--mono); letter-spacing: 0.1em; color: var(--taken); }
.cover-tag.title .t {
  margin-top: 0.15rem; font-family: var(--display); font-variation-settings: var(--display-axes);
  font-style: italic; font-size: 0.9rem;
}
.cover-tag.chip {
  right: -12%; top: 6%; transform: rotate(5deg); border-radius: 999px;
  padding: 0.35rem 0.8rem; font: 600 0.66rem var(--mono);
  letter-spacing: 0.08em; color: var(--brand-bright);
}
.scroll-hint {
  margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute);
}
.scroll-hint::after {
  content: ''; width: 1px; height: 22px;
  background: linear-gradient(var(--text-mute), transparent);
  opacity: 0.6;
}

/* ── §MANIFESTO ──────────────────────────────────────────────────────────── */
.manifesto {
  font-family: var(--display); font-variation-settings: var(--display-axes);
  font-size: clamp(1.5rem, 5.6vw, 2.3rem); line-height: 1.35;
  font-weight: 600; letter-spacing: -0.01em; max-width: 52rem;
}
.manifesto .w { color: #3a3a3a; transition: color 0.3s ease; }
.manifesto .w.lit { color: var(--text); }
.manifesto .w.accent.lit { color: var(--taken); }

/* ── §WALK — pinned stage, scroll dollies a 3D camera through the story ─────
   Base layout (below) is a plain stacked list, so no-timeline browsers and
   print get every scene. The @supports layer replaces it with the ride. */
.walk-head { text-align: center; margin-bottom: 2rem; }
.walk-camera { display: grid; gap: 1.4rem; justify-items: center; }
.wdot { display: none; }

.walk-card {
  width: min(86vw, 32rem);
  background: linear-gradient(160deg, var(--surface-2), #141414 60%, #0d0d0d);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95);
}
.walk-card.last { border-color: var(--taken); box-shadow: 0 0 60px -12px rgba(251, 191, 36, 0.35); }
.walk-card .art { height: 120px; position: relative; }
.walk-card .inner { padding: 1.5rem 1.8rem 1.8rem; }
.walk-card .scene-no {
  font: 600 0.68rem var(--mono); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brand-bright);
}
.walk-card.last .scene-no { color: var(--taken); }
.walk-card h3 {
  font: 700 1.4rem/1.2 var(--display); font-variation-settings: var(--display-axes);
  margin: 0.5rem 0 0.4rem;
}
.walk-card p { color: var(--text-soft); }

/* painted art strips — gradients only, no image payload */
.art-lamp {
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 72% 20%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 50%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(60px 60px at 50% 48%, rgba(251, 191, 36, 0.45), transparent 70%),
    linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 70%, #222222 78%, #0d0d0d 82%, #0d0d0d 100%);
}
.art-lamp::after {
  content: ''; position: absolute; left: 50%; bottom: 16%;
  width: 12px; height: 48%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.95) 0 14%, #141414 14%);
  clip-path: polygon(30% 0, 70% 0, 86% 100%, 14% 100%);
}
.art-door {
  background:
    radial-gradient(50% 70% at 50% 55%, rgba(251, 191, 36, 0.4), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 62%),
    linear-gradient(180deg, #0d0d0d, #141414 60%, #0d0d0d);
}
.art-door::after {
  content: ''; position: absolute; left: 50%; top: 54%;
  width: 36px; height: 56px; transform: translate(-50%, -50%);
  border-radius: 18px 18px 2px 2px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.85), rgba(138, 90, 8, 0.25));
  box-shadow: 0 0 30px 8px rgba(251, 191, 36, 0.35);
}
.art-fork {
  background:
    linear-gradient(115deg, transparent 47.5%, rgba(255, 255, 255, 0.55) 49%, transparent 50.5%),
    linear-gradient(65deg, transparent 47.5%, rgba(255, 255, 255, 0.55) 49%, transparent 50.5%),
    radial-gradient(90px 40px at 50% 100%, rgba(255, 255, 255, 0.5), transparent 70%),
    linear-gradient(180deg, #0d0d0d, #141414);
}
.art-fork::after {
  content: ''; position: absolute; left: 50%; bottom: 12px;
  width: 8px; height: 8px; border-radius: 50%; transform: translateX(-50%);
  background: var(--brand-bright); box-shadow: 0 0 16px 5px rgba(255, 255, 255, 0.7);
}
.art-threads {
  background:
    repeating-linear-gradient(100deg, transparent 0 26px, rgba(255, 255, 255, 0.4) 26px 27.5px, transparent 27.5px 56px, rgba(255, 255, 255, 0.35) 56px 57.5px, transparent 57.5px 88px, rgba(255, 255, 255, 0.35) 88px 89.5px),
    radial-gradient(80% 70% at 50% 110%, rgba(255, 255, 255, 0.25), transparent 70%),
    linear-gradient(180deg, #0d0d0d, #141414);
}
.art-endings {
  background:
    radial-gradient(2px 2px at 18% 42%, var(--distant), transparent),
    radial-gradient(2px 2px at 34% 66%, var(--untaken), transparent),
    radial-gradient(2.5px 2.5px at 50% 36%, var(--taken), transparent),
    radial-gradient(2px 2px at 66% 62%, var(--distant), transparent),
    radial-gradient(2px 2px at 82% 44%, var(--untaken), transparent),
    radial-gradient(1.5px 1.5px at 26% 22%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 74% 20%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(80% 60% at 50% 115%, rgba(255, 255, 255, 0.3), transparent 70%),
    linear-gradient(180deg, #0d0d0d, #1a1a1a);
}

/* ── §SPARK — console types; art the studio painted sits beside the steps ── */
.console {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; font: 0.8rem/1.75 var(--mono); overflow: hidden;
}
.console .prompt-line {
  color: var(--taken); padding-bottom: 0.7rem; margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--line); font-style: italic;
}
.console .out { color: var(--text-mute); min-height: 7.5rem; }
.console .out span { display: block; }
.console .out .done { color: var(--untaken); }
.console .caret { display: none; }

.beats { margin-top: 1.2rem; display: grid; gap: 0.4rem; list-style: none; }
.beats li {
  display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.6rem 0.9rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--glass); font-size: 0.9rem;
}
.beats .n { font: 600 0.72rem var(--mono); color: var(--brand-bright); }

.steps { display: grid; gap: 1rem; }
.step {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem;
}
.step .step-no { font: 700 1rem var(--display); color: var(--taken); }
.step h3 { font: 600 1.02rem var(--body); margin: 0.4rem 0 0.3rem; }
.step p { color: var(--text-mute); font-size: 0.93rem; }

.spark-art { display: grid; gap: 1rem; margin-top: 2rem; }
.art-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); margin: 0; }
.art-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.art-card figcaption {
  padding: 0.8rem 1rem; font-size: 0.76rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-mute); border-top: 1px solid var(--line);
}
.cast-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  padding: 1.4rem; display: flex; gap: 1.2rem; align-items: center;
}
.cast-card img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex: none; }
.cast-card .who {
  font-family: var(--display); font-variation-settings: var(--display-axes);
  font-style: italic; font-size: 1.2rem; color: var(--taken);
}
.cast-card .by {
  margin: 0.2rem 0 0.6rem; font: 500 0.7rem var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute);
}
.cast-card .excerpt { font-family: var(--display); font-style: italic; color: var(--text-soft); font-size: 0.95rem; }

/* ── §MAP — the branch constellation ─────────────────────────────────────── */
.map { position: relative; padding-block: 1.5rem; }
.map::before {
  content: ''; position: absolute; inset: -4% 0;
  background: radial-gradient(85% 55% at 50% 42%, rgba(255, 255, 255, 0.14), transparent 72%);
  pointer-events: none;
}
.map svg { position: relative; width: min(100%, 26rem); height: auto; margin-inline: auto; display: block; }
.map .star { fill: var(--text); opacity: 0.22; }
.map .branch {
  fill: none; stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round;
}
.map .b-trunk { stroke: var(--brand); opacity: 0.9; }
.map .b-cyan { stroke: var(--untaken); opacity: 0.42; }
.map .b-orchid { stroke: var(--distant); opacity: 0.38; }
.map .b-lit {
  stroke: var(--taken); stroke-width: 1.9;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.75));
}
.map .node { fill: var(--canvas); stroke: var(--brand-bright); stroke-width: 1.1; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7)); }
.map .node-rejoin { stroke: var(--untaken); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)); }
.map .node-end { fill: var(--distant); stroke: none; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); }
.map .node-lit { fill: var(--taken); stroke: none; filter: drop-shadow(0 0 7px rgba(251, 191, 36, 0.95)); }
.map .node-secret { fill: var(--untaken); stroke: none; filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.95)); }
.map text { font: 500 8px var(--mono); fill: var(--text-mute); letter-spacing: 0.14em; }
.map-key {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.2rem;
  margin-top: 1.4rem; font: 500 0.72rem var(--mono); color: var(--text-mute);
}
.map-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.map-key i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.k-lit { color: var(--taken); }
.k-cyan { color: var(--untaken); }
.k-orchid { color: var(--distant); }
.map-notes { display: grid; gap: 0.9rem; margin-top: 1.6rem; }
.map-note h4 { font: 600 0.98rem var(--body); margin-bottom: 0.2rem; }
.map-note p { color: var(--text-mute); font-size: 0.9rem; }

/* ── §READER — the phone, tilted by your scroll ──────────────────────────── */
.reader-grid { display: grid; gap: 2rem; }
.phone-stage { perspective: 1200px; display: grid; place-items: center; }
.phone {
  width: min(100%, 17rem); aspect-ratio: 9 / 18; border-radius: 30px;
  border: 1px solid var(--line-lit);
  background: linear-gradient(170deg, #141414, var(--canvas));
  padding: 1.1rem 1rem; display: flex; flex-direction: column;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 1), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform-style: preserve-3d;
}
.phone .bar { width: 34%; height: 4px; border-radius: 999px; background: var(--line-lit); margin: 0 auto 1rem; flex: none; }
.phone .thumb { height: 76px; border-radius: 12px; margin-bottom: 0.9rem; flex: none; position: relative; overflow: hidden; }
.phone .thumb::after { transform: translate(-50%, -50%) scale(0.68); }
.phone .page {
  font-family: var(--display); font-variation-settings: var(--display-axes);
  font-size: 0.86rem; line-height: 1.6; color: var(--text-soft); flex: 1;
}
.phone .choices { display: grid; gap: 0.5rem; margin-top: auto; }

.choice {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(13, 13, 13, 0.6); font-size: 0.8rem; position: relative; overflow: hidden;
}
.choice .fill {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: rgba(251, 191, 36, 0.12);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.choice.filled .fill { transform: scaleX(var(--pct, 0)); }
.choice span { position: relative; }
.choice .pct { color: var(--text-mute); font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 0.72rem; }
.choice.hot { border-color: var(--taken); }
.choice.hot .pct { color: var(--taken); }

.ticks { list-style: none; display: grid; gap: 0.6rem; margin-top: 1.4rem; }
.ticks li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; color: var(--text-soft); font-size: 0.94rem; }
.ticks li::before { content: '◆'; color: var(--brand-bright); font-size: 0.7rem; line-height: 1.9; }

/* ── §IMMERSIVE — narrated stage; voices, backdrops, equalizer ───────────── */
.voice-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 2rem; }
.voice-chips .lbl { font: 600 0.7rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.voice {
  display: inline-flex; align-items: baseline; padding: 0.45rem 1rem;
  border-radius: 999px; cursor: pointer; font: 0.85rem var(--body);
  border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: var(--text-mute);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.voice b { font-weight: 600; }
.voice small { opacity: 0.65; font-size: 0.78rem; }
.voice.on { border-color: var(--taken); background: rgba(251, 191, 36, 0.12); color: var(--text); }

.cinema { position: relative; }
.cinema-stage {
  position: static; min-height: 60svh; height: auto;
  border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden; display: grid;
}
.cinema-track { height: auto; }
.backdrop {
  grid-area: 1 / 1; position: relative; overflow: hidden;
  opacity: 0; transform: scale(1.06);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.backdrop.on { opacity: 1; transform: none; }

.bd-1 {
  background:
    radial-gradient(1.5px 1.5px at 22% 14%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 68% 9%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 84% 22%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2px 2px at 57% 18%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(70px 70px at 50% 30%, rgba(251, 191, 36, 0.5), transparent 70%),
    radial-gradient(80% 30% at 50% 62%, rgba(251, 191, 36, 0.22), transparent 70%),
    linear-gradient(180deg, #0d0d0d 0%, #0d0d0d 50%, #222222 56%, #0d0d0d 58%, #000000 100%);
}
.bd-1::before {
  content: ''; position: absolute; left: 50%; bottom: 70%;
  width: 260%; height: 46%;
  transform: translateX(-50%) rotate(-40deg); transform-origin: 50% 100%;
  background: conic-gradient(from -9deg at 50% 100%, rgba(255, 255, 255, 0.32) 0deg, rgba(255, 255, 255, 0.1) 11deg, transparent 19deg);
  filter: blur(5px);
}
.bd-1::after {
  content: ''; position: absolute; left: 50%; bottom: 44%;
  width: 16px; height: 26%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.95) 0 12%, #141414 12%);
  clip-path: polygon(30% 0, 70% 0, 86% 100%, 14% 100%);
}

.bd-2 {
  background:
    radial-gradient(60% 42% at 50% 50%, rgba(251, 191, 36, 0.45), transparent 70%),
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.3), transparent 62%),
    linear-gradient(180deg, #0d0d0d 0%, #141414 60%, #0d0d0d 100%);
}
.bd-2::before {
  content: ''; position: absolute; inset: -20%;
  background:
    repeating-linear-gradient(72deg, transparent 0 22px, rgba(255, 255, 255, 0.07) 22px 26px),
    repeating-linear-gradient(-58deg, transparent 0 30px, rgba(255, 255, 255, 0.05) 30px 34px);
}
.bd-2::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 22%; height: 30%; transform: translate(-50%, -50%);
  border-radius: 40% 40% 3px 3px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.85), rgba(138, 90, 8, 0.25));
  box-shadow: 0 0 50px 14px rgba(251, 191, 36, 0.35);
}

.bd-3 {
  background:
    radial-gradient(2px 2px at 30% 22%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(2px 2px at 74% 14%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 56% 30%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(70% 45% at 26% 24%, rgba(255, 255, 255, 0.45), transparent 66%),
    radial-gradient(60% 40% at 82% 30%, rgba(255, 255, 255, 0.55), transparent 64%),
    linear-gradient(180deg, #0d0d0d 0%, #141414 46%, #1a1a1a 58%, #000000 100%);
}
.bd-3::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background:
    radial-gradient(3px 8px at 62% 12%, rgba(0, 0, 0, 0.95), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(13, 13, 13, 0.9) 60%);
}

.cinema-copy {
  grid-area: 1 / 1; align-self: end; padding: 1.8rem;
  background: linear-gradient(transparent, rgba(13, 13, 13, 0.92) 55%); z-index: 2;
}
.cinema-badge {
  display: inline-flex; gap: 0.6rem; align-items: center;
  font: 600 0.66rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--taken); margin-bottom: 0.7rem;
}
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq span {
  width: 3px; height: 14px; background: var(--untaken); border-radius: 2px;
}
.eq span:nth-child(1) { height: 7px; }
.eq span:nth-child(2) { height: 12px; }
.eq span:nth-child(3) { height: 5px; }
.eq span:nth-child(4) { height: 10px; }
.eq span:nth-child(5) { height: 8px; }

.cinema-lines { display: grid; margin-bottom: 1rem; }
.cinema-line {
  grid-area: 1 / 1;
  font-family: var(--display); font-variation-settings: var(--display-axes);
  font-style: italic; font-size: clamp(1rem, 3.2vw, 1.45rem); line-height: 1.5;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cinema-line.on { opacity: 1; transform: none; }
.cinema-choices { display: grid; gap: 0.5rem; max-width: 26rem; }

/* ── §FEATURES ───────────────────────────────────────────────────────────── */
.features { display: grid; gap: 0.9rem; }
.feature {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0.9rem;
  align-items: start; padding: 1.2rem; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.feature:hover { border-color: var(--line-lit); }
.feature .glyph {
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 10px; background: var(--surface-3); color: var(--taken); font-size: 1.05rem;
}
.feature h3 { font: 600 1rem var(--body); }
.feature p { color: var(--text-mute); font-size: 0.89rem; margin-top: 0.2rem; }

/* ── §PRICING ────────────────────────────────────────────────────────────── */
.tiers { display: grid; gap: 1rem; }
.tier {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); padding: 1.6rem 1.4rem; display: flex; flex-direction: column;
}
.tier.featured { border-color: var(--taken); box-shadow: 0 0 40px -14px rgba(251, 191, 36, 0.4); }
.tier-flag {
  position: absolute; top: -0.65rem; left: 1.3rem;
  background: var(--taken); color: #0a0a0a;
  font: 700 0.64rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.6rem; border-radius: 999px;
}
.tier .name { font-family: var(--display); font-variation-settings: var(--display-axes); font-size: 1.2rem; font-weight: 700; }
.tier .price { font: 700 2.2rem/1 var(--display); font-variation-settings: var(--display-axes); margin: 0.6rem 0 0.2rem; }
.tier .price small { font: 500 0.8rem var(--body); color: var(--text-mute); }
.tier .who { color: var(--text-mute); font-size: 0.88rem; margin-bottom: 1.1rem; }
.tier ul { list-style: none; display: grid; gap: 0.5rem; margin-bottom: 1.4rem; }
.tier li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; font-size: 0.9rem; color: var(--text-soft); }
.tier li::before { content: '✓'; color: var(--untaken); font-size: 0.8rem; line-height: 1.8; }
.tier .btn { margin-top: auto; width: 100%; }
.pricing-note { margin-top: 1.2rem; font-size: 0.8rem; color: var(--text-mute); text-align: center; }

/* ── §JOIN ───────────────────────────────────────────────────────────────── */
.join { text-align: center; overflow: clip; }
.join::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 60%, rgba(255, 255, 255, 0.16), transparent 70%);
  pointer-events: none;
}
.join h2 { max-width: 38rem; margin-inline: auto; }
.join .band-lede { margin-inline: auto; }

/* ── §WAITLIST FORM ──────────────────────────────────────────────────────── */
.waitlist {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
  max-width: 30rem; margin: 1.6rem auto 0;
}
.waitlist input[type='email'] {
  flex: 1; min-width: 220px;
  padding: 0.85rem 1.2rem; border-radius: 999px;
  border: 1px solid var(--line-lit); background: var(--surface-2);
  color: var(--text); font: 1rem var(--body);
}
.waitlist input[type='email']::placeholder { color: var(--text-mute); }
.waitlist input[type='email']:focus-visible { outline: 2px solid var(--taken); border-color: transparent; }
.waitlist .msg { width: 100%; font-size: 0.9rem; color: var(--text-mute); min-height: 1.4em; }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--err); }

/* ── §FOOTER ─────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 2.5rem var(--pad) 3rem; color: var(--text-mute); font-size: 0.85rem; }
.footer .wrap { display: grid; gap: 1.6rem; }
.footer .brand { color: var(--text); }
.footer .blurb { margin-top: 0.6rem; max-width: 22rem; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.foot-cols h5 {
  font: 600 0.7rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); margin-bottom: 0.6rem;
}
.foot-cols ul { list-style: none; display: grid; gap: 0.4rem; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { color: var(--text); }
.foot-base {
  border-top: 1px solid var(--line); padding-top: 1.4rem;
  display: grid; gap: 0.4rem; font-size: 0.78rem;
}

/* ── §MOTION PRIMITIVES — base state is VISIBLE; reveals layer on below ──── */
.reveal { opacity: 1; transform: none; }
.reveal.io-hidden { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.io-in { opacity: 1; transform: none; }

/* ── §SCROLL-DRIVEN LAYER ────────────────────────────────────────────────── */
@supports (animation-timeline: view()) {
  /* Restrained motion only: a gentle reveal as sections enter, plus the nav's
     scroll-progress rule. The theatrical scroll-scrubbed motion (spine draw, hero
     exit, map draw, phone tilt, the 3D walk dolly) was removed for a calmer, more
     premium read. */
  .reveal {
    animation: enter linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 28%;
  }
  @keyframes enter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }

  .nav-progress { animation: grow linear both; animation-timeline: scroll(root block); }
  @keyframes grow { to { transform: scaleX(1); } }
}

/* ── §REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal.io-hidden { opacity: 1; transform: none; }
  .spine .lit, .map .branch { stroke-dashoffset: 0; }
  .choice .fill { transform: scaleX(var(--pct, 0)); }
  .backdrop.on, .cinema-line.on { opacity: 1; transform: none; }
  .backdrop { transform: none; }
  .cinema-stage { position: static; height: auto; min-height: 60svh; }
  .cinema-track { height: auto; }
  .nav-progress { display: none; }
  .phone { transform: none; }
  .walk { height: auto !important; }
  .walk-stage { position: static !important; height: auto !important; perspective: none !important; }
  .walk-camera { position: static !important; display: grid !important; transform: none !important; }
  .walk-card { position: static !important; transform: none !important; opacity: 1 !important; filter: none !important; }
  .walk-head { position: static !important; margin-bottom: 2rem !important; }
  .wdot { display: none !important; }
}

/* ── §≥ 700px ────────────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  :root { --maxw: 62rem; --pad: 2.5rem; --gutter: 34px; }
  .nav { padding-inline: 2.5rem; }
  .nav-links { display: flex; gap: 1.6rem; font-size: 0.9rem; }
  .nav-links a { text-decoration: none; color: var(--text-mute); }
  .nav-links a:hover { color: var(--text); }
  .band { padding-block: 7rem; }
  .hero { padding-block: 5rem 4rem; }
  .counts { gap: 1.5rem; }
  .count .num { font-size: 2.3rem; }
  .steps { grid-template-columns: 1fr 1fr; }
  .spark-art { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: repeat(2, 1fr); }
  /* Four tiers: 2x2 here, one row at 1100px. A 3-col grid would orphan the last card. */
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .map-notes { grid-template-columns: repeat(3, 1fr); }
  .reader-grid { grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 3rem; }
  .console { padding: 1.5rem; font-size: 0.85rem; }
  .cinema-stage { min-height: 66svh; height: auto; }
  .cinema-copy { padding: 2rem; }
  .foot-cols { grid-template-columns: repeat(4, 1fr); }
  .footer .wrap { grid-template-columns: 1.2fr 2fr; gap: 3rem; }
  .foot-base { grid-column: 1 / -1; display: flex; justify-content: space-between; }
}

/* ── §≥ 1100px ───────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
  :root { --maxw: 68rem; --gutter: 46px; }
  .hero { padding-block: 6.5rem 5rem; }
  .hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: center; }
  .hero-art { display: grid; justify-items: center; gap: 2rem; padding: 1.5rem 0; }
  /* Only now is the art actually painted, so only now is it worth fetching. */
  .cover-stack .cover-art { background-image: url('../img/cover-keeper.jpg'); }
  .features { grid-template-columns: repeat(3, 1fr); }
  .tiers { grid-template-columns: repeat(4, 1fr); }
  .tier { padding: 1.5rem 1.15rem; }
  .spark-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: start; }
  .canvas-grid { display: grid; grid-template-columns: 1fr 26rem; column-gap: 4rem; align-items: center; }
}

/* ── §HOVER-CAPABLE ONLY ─────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .feature::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 45%);
    opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
  }
  .feature:hover::after { opacity: 1; }
  .feature:hover { transform: translateY(-3px); }
}