/*
  story.css — Door 2: The Story (/)
  ----------------------------------------------------------------------------
  The default door for anyone who discovers or is sent the link.
  Job: "What's the honest arc of this transformation?" — and leave them wanting
  to follow. Editorial scale (the Dispatch register): large expressive Fraunces,
  scrollytelling, the relational CONSTELLATION as the hero visual.
  Honesty markers are first-class. Reachability is the tone. All tokens from
  tokens.css; scroll-driven motion has a static prefers-reduced-motion fallback.
*/

body { overflow-x: hidden; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.skip { position: absolute; left: 0; top: -3rem; z-index: var(--z-overlay);
  background: var(--surface); color: var(--ink); padding: var(--sp-2) var(--sp-4);
  border: var(--border-hair); border-radius: var(--radius-sm); transition: top var(--dur-fast); }
.skip:focus { top: var(--sp-2); left: var(--sp-2); }

.story-top {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--gutter);
  background: color-mix(in oklch, var(--page) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-hair);
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
.brand-mark { width: 11px; height: 11px; border-radius: 2px; background: var(--ember); box-shadow: 0 0 0 3px var(--ember-wash); }
.brand-name { font-family: var(--font-mono); font-size: var(--fs-small); }
.doors { display: flex; align-items: center; gap: var(--sp-4); }
.doors a { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; }
.doors a:hover { color: var(--ember); }
.theme-toggle { appearance: none; cursor: pointer; background: transparent; border: var(--border-hair); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; }
.theme-dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--ink) 0 50%, transparent 50% 100%); border: 1px solid var(--ink-muted); }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero { max-width: var(--container); margin-inline: auto; padding: clamp(2rem, 1rem + 6vw, 5rem) var(--gutter) var(--sp-7); }
.hero-grid { display: grid; gap: clamp(1.5rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }

.kicker { color: var(--ember); }
.hero-h {
  font-family: var(--font-serif); font-weight: var(--weight-med);
  font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.015em;
  margin-top: var(--sp-3); max-width: 16ch;
}
.hero-h em { font-style: italic; color: var(--ink); }
.hero-elena {
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-quote);
  line-height: 1.45; color: var(--ink-muted); margin-top: var(--sp-5); max-width: 40ch;
}
.hero-sub { margin-top: var(--sp-4); color: var(--ink-muted); max-width: 46ch; }
.hero-cta { margin-top: var(--sp-5); }
.cta {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: 0.04em; color: var(--ember); text-decoration: none;
  border-bottom: 1px solid var(--ember-line); padding-bottom: 2px;
}
.cta:hover { border-color: var(--ember); }
.cta-quiet { color: var(--ink-faint); border-color: var(--rule); }
.cta-quiet:hover { color: var(--ink-muted); }

/* The constellation (relational canvas) */
.constellation { display: grid; gap: var(--sp-3); }
.constellation svg { width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.constellation .edge { stroke: var(--rule); stroke-width: 1; fill: none; }
.constellation .edge.live { stroke: var(--ember-line); }
.constellation .node circle { fill: var(--surface-raised); stroke: var(--ink-faint); stroke-width: 1; transition: r var(--dur) var(--ease-out); }
.constellation .node.up circle { stroke: var(--ember); fill: color-mix(in oklch, var(--ember) 12%, var(--surface)); }
.constellation .node text { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-muted); text-anchor: middle; }
.constellation .node .score { fill: var(--ink); font-size: 11px; }
.constellation figcaption { color: var(--ink-faint); max-width: 38ch; }
/* pillars are links into their Evidence pages */
.constellation a { cursor: pointer; }
.constellation a .node circle { transition: r var(--dur-fast), stroke var(--dur-fast); }
.constellation a:hover .node circle, .constellation a:focus-visible .node circle { stroke: var(--ember); stroke-width: 1.5; }
.constellation a:focus-visible { outline: none; }
.constellation a:hover .node text { fill: var(--ink); }

/* per-beat "go deeper" link into the rest of the site */
.beat-deeper { margin-top: var(--sp-5); }

.scroll-rule { display: grid; place-items: center; margin-top: var(--sp-6); }
.scroll-rule span { display: block; width: 1px; height: 46px; background: linear-gradient(var(--tick), transparent); }

/* ── THE ARC ─────────────────────────────────────────────────────────────── */
.arc { max-width: var(--container-read); margin-inline: auto; padding: 0 var(--gutter); }
.beat { padding: clamp(3rem, 2rem + 6vw, 7rem) 0; border-top: var(--border-hair); }
.beat:first-child { border-top: 0; }
.beat-kicker { color: var(--ink-faint); }
.beat-h { font-family: var(--font-serif); font-weight: var(--weight-med); font-size: var(--fs-h1); line-height: 1.1; margin-top: var(--sp-3); max-width: 22ch; }

/* Scroll-driven reveal — TRANSFORM ONLY. Content is never hidden (opacity stays
   1), so a first glance or a browser without scroll-timeline support always sees
   the full page; the slide is pure enhancement. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .beat { animation: beat-in linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; }
    @keyframes beat-in { from { transform: translateY(16px); } to { transform: none; } }
  }
}

/* Numbers beat */
.numbers { display: flex; gap: clamp(1.5rem, 1rem + 4vw, 4rem); flex-wrap: wrap; margin-top: var(--sp-5); }
.figure { display: grid; gap: var(--sp-1); }
.figure .num { font-family: var(--font-mono); font-weight: var(--weight-med); font-size: var(--fs-data-lg); line-height: 1; }
.figure .num.big { font-size: var(--fs-data-xl); color: var(--ember); }
.figure.is-up .num.big { color: var(--ink-muted); }   /* weight gained — honest, not celebrated */
.figure-cap { color: var(--ink-faint); }
.beat-note { margin-top: var(--sp-4); color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-small); }

/* Waveform — honest down-beats in muted ink, never alarm-red */
.waveform { margin-top: var(--sp-5); }
.wave { display: flex; align-items: flex-end; gap: 2px; height: 160px; width: 100%; }
.wave .bar { flex: 1; min-width: 2px; border-radius: 1px 1px 0 0; background: var(--ink-faint); transition: height var(--dur-slow) var(--ease-out); }
.wave .bar.up { background: var(--ember); }
.wave .bar.mid { background: var(--ink-muted); }
.wave .bar.down { background: var(--ink-faint); opacity: 0.55; box-shadow: inset 0 -2px 0 0 var(--ink-muted); }
.wave .bar.none { background: repeating-linear-gradient(45deg, var(--rule) 0 3px, transparent 3px 6px); }
.wave-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); color: var(--ink-faint); }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
.lg-up::before { background: var(--ember); } .lg-mid::before { background: var(--ink-muted); }
.lg-down::before { background: var(--ink-faint); } .lg-none::before { background: var(--rule); }

/* The Third Wall (two-voice, editorial scale) */
.beat-wall .wall { margin-top: var(--sp-5); border-left: 2px solid var(--ember-line); padding-left: var(--sp-5); }
.wall .voice { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; }
.wall .who { font-family: var(--voice-who-font); font-size: var(--voice-who-size); letter-spacing: var(--voice-who-tracking); text-transform: uppercase; color: var(--ink-faint); }
.wall .voice.machine .what { font-family: var(--voice-machine-font); font-size: 1rem; line-height: 1.6; color: var(--ink); }
.wall .voice.human { border-top: var(--honest-border); padding-top: var(--sp-3); margin-top: var(--sp-1); }
.wall .voice.human .what { font-family: var(--voice-human-font); font-style: italic; font-size: var(--fs-quote); line-height: 1.45; color: var(--ink); }
.wall-foot { margin-top: var(--sp-3); color: var(--ink-faint); }

/* Dispatches reader — chronicle · lab notes · journal (master-detail) */
.dx-tabs { display: flex; gap: var(--sp-1); margin-top: var(--sp-5); border-bottom: var(--border-hair); }
.dx-tab { appearance: none; background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  padding: var(--sp-3) var(--sp-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dx-tab:hover { color: var(--ink-muted); }
.dx-tab.is-active { color: var(--ink); border-bottom-color: var(--ember); }
.dx-layout { display: grid; gap: clamp(1.25rem, 0.6rem + 3vw, 3rem); margin-top: var(--sp-5); align-items: start; }
@media (min-width: 760px) { .dx-layout { grid-template-columns: 260px 1fr; } }
.dx-list { list-style: none; display: grid; gap: var(--sp-2); }
@media (min-width: 760px) { .dx-list { position: sticky; top: var(--sp-4); } }
.dx-item { width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: var(--border-hair);
  border-left: 2px solid transparent; border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); display: grid; gap: 2px; color: inherit; }
.dx-item:hover { border-color: var(--rule-strong); }
.dx-item.is-active { border-left-color: var(--ember); background: color-mix(in oklch, var(--ember) 7%, var(--surface)); }
.dx-item-t { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.15; }
.dx-item-d { color: var(--ink-faint); }
.dx-empty { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-small); padding: var(--sp-3) 0; }
.dx-read { min-width: 0; }
.dx-kicker { color: var(--ember); }
.dx-title { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.12; margin-top: var(--sp-2); }
.dx-stats { color: var(--ink-faint); margin-top: var(--sp-2); }
.dx-prose { margin-top: var(--sp-4); color: var(--ink); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: var(--measure); }
.dx-foot { color: var(--ink-faint); margin-top: var(--sp-4); }
.dx-readmore { margin-top: var(--sp-5); }
.dx-readmore a, .dx-readfull { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--ember); text-decoration: none; }
.dx-readfull { appearance: none; background: transparent; border: 0; cursor: pointer; padding: 0; }
.dx-readmore a:hover, .dx-readfull:hover { text-decoration: underline; }
.dx-readmore a:focus-visible, .dx-readfull:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs); }
/* full article, rendered inline in the v4 reader */
.dx-fulltext { margin-top: var(--sp-4); max-width: var(--measure); }
.dx-fulltext p { font-family: var(--font-serif); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink); margin-top: var(--sp-4); }
.dx-fulltext p:first-of-type::first-letter { font-family: var(--font-serif); font-size: 3.4em; line-height: 0.82; float: left; margin: 0.05em var(--sp-2) 0 0; color: var(--ember); }
.dx-fulltext h2, .dx-fulltext h3 { font-family: var(--font-serif); font-weight: var(--weight-med); margin-top: var(--sp-6); line-height: 1.15; }
.dx-fulltext blockquote { border-left: 2px solid var(--ember); padding-left: var(--sp-4); margin-top: var(--sp-4); color: var(--ink-muted); font-style: italic; }
.dx-fulltext a { color: var(--ember); }
.dx-fulltext em { font-style: italic; }
.dx-fulltext strong { font-weight: var(--weight-med); }
/* lab-note two-voice inside the reader (reuses the Third Wall device) */
.dx-read .voice { display: grid; gap: var(--sp-1); padding: var(--sp-3) 0; border-top: var(--border-hair); }
.dx-read .voice:first-of-type { border-top: 0; }
.dx-read .voice .who { font-family: var(--voice-who-font); font-size: var(--voice-who-size); letter-spacing: var(--voice-who-tracking); text-transform: uppercase; color: var(--ink-faint); }
.dx-read .voice.machine .what { font-family: var(--voice-machine-font); font-size: 1rem; line-height: 1.6; color: var(--ink); }
.dx-read .voice.human { border-top: var(--honest-border); }
.dx-read .voice.human .what { font-family: var(--voice-human-font); font-style: italic; font-size: var(--fs-quote); line-height: 1.45; color: var(--ink); }

/* Close */
.beat-close { text-align: center; border-top: var(--border-hair); }
.close-h { font-family: var(--font-serif); font-weight: var(--weight-med); font-size: var(--fs-h1); line-height: 1.08; max-width: 20ch; margin-inline: auto; }
.close-sub { margin-top: var(--sp-4); color: var(--ink-muted); max-width: 44ch; margin-inline: auto; }
.close-cta { margin-top: var(--sp-6); display: flex; gap: var(--sp-5); justify-content: center; flex-wrap: wrap; }

.story-foot { max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-8); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; color: var(--ink-faint); border-top: var(--border-hair); }

.shimmer { color: var(--ink-faint); }
@media (prefers-reduced-motion: no-preference) { .shimmer { animation: pulse 1.6s var(--ease-inout) infinite; } @keyframes pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } } }

/* Phase 3: keyboard focus + sharper Third Wall voice separation */
.dx-tab:focus-visible, .dx-item:focus-visible, .doors a:focus-visible, .theme-toggle:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 2px; border-radius: var(--radius-xs);
}
.wall .voice.human { background: var(--ember-wash); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-2); }

/* ── /dispatches/ standalone page (Door 2's narrative sub-pages) ──────────── */
.dx-main { max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-8); }
.dx-head { max-width: var(--measure); }
.dx-h1 { font-family: var(--font-serif); font-size: var(--fs-h1); line-height: 1.06; margin-top: var(--sp-2); }
.dx-lede { margin-top: var(--sp-3); color: var(--ink-muted); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.dx-lede a { color: var(--ember); text-decoration: none; }
.dx-lede a:hover { text-decoration: underline; }
.dx-page .dx-tabs { flex-wrap: wrap; }
.dx-foot-bar { max-width: var(--container); margin-inline: auto; padding: var(--sp-6) var(--gutter) var(--sp-8); display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; color: var(--ink-faint); border-top: var(--border-hair); }
.dx-foot-bar a { color: var(--ink-faint); text-decoration: none; }
.dx-foot-bar a:hover { color: var(--ember); }
.dx-loading { color: var(--ink-faint); margin-top: var(--sp-4); }

/* Timeline view */
.dx-timeline { list-style: none; margin-top: var(--sp-5); display: grid; gap: 0; border-left: var(--border-hair); padding-left: var(--sp-5); }
.dxt-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; position: relative; padding: var(--sp-3) 0; border-top: var(--border-hair); }
.dxt-item:first-child { border-top: 0; }
.dxt-item::before { content: ""; position: absolute; left: calc(-1 * var(--sp-5) - 4px); top: calc(var(--sp-3) + 6px); width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.dxt-date { color: var(--ink-faint); }
.dxt-title { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.2; }
.dxt-note { color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); margin-top: 2px; }

/* ── Narrow-screen topbar: stop the doors nav overflowing ~375px ──────────── */
@media (max-width: 480px) {
  .story-top { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .brand-door { display: none; }   /* drop the section tag; keep wordmark + nav */
  .doors { gap: var(--sp-3); }
  .doors a { font-size: 0.625rem; letter-spacing: 0.04em; }
}
@media (max-width: 360px) {
  .brand-name, .brand-door { display: none; }   /* keep the mark; reclaim ~100px */
  .doors { gap: var(--sp-2); }
  .doors a { font-size: 0.5625rem; }
}