/*
  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); }
.doors a[aria-current="page"] { color: var(--ember); border-bottom: 1px solid var(--ember); padding-bottom: 1px; cursor: default; }
.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-for {
  margin-top: var(--sp-4); max-width: 46ch; color: var(--ink-muted);
  padding-left: var(--sp-3); border-left: 2px solid var(--ember-line);
}
.hero-for em { font-style: normal; color: var(--ember); }
.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:active { border-color: var(--ember); opacity: 0.8; }
.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: clamp(96px, 38vw, 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); }

/* ── PG-03 — per-dispatch subscribe foot + "start from the beginning" ──────── */
.dx-subscribe {
  margin-top: var(--sp-7); padding: var(--sp-5);
  border: var(--border-hair); border-top: 2px solid var(--ember);
  border-radius: var(--radius); background: var(--ember-wash);
  max-width: var(--measure);
}
.dx-sub-h { font-family: var(--font-serif); font-size: var(--fs-body-lg); margin: 0; color: var(--ink); }
.dx-sub-p { margin: var(--sp-2) 0 var(--sp-4); color: var(--ink-muted); }
.dx-sub-cta { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; margin: 0; }
.dx-sub-btn {
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em;
  color: var(--ember); text-decoration: none;
  border: 1px solid var(--ember-line); border-radius: var(--radius-xs);
  padding: var(--sp-2) var(--sp-4); transition: background var(--dur-fast);
}
.dx-sub-btn:hover { background: color-mix(in oklch, var(--ember) 14%, transparent); }
.dx-sub-rss { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--ink-muted); text-decoration: none; }
.dx-sub-rss:hover { color: var(--ember); text-decoration: underline; }
.dx-startfirst {
  display: inline-block; margin-top: var(--sp-4);
  appearance: none; background: transparent; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--ink-muted);
}
.dx-startfirst:hover { color: var(--ember); text-decoration: underline; }
.dx-sub-btn:focus-visible, .dx-sub-rss:focus-visible, .dx-startfirst: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); }
/* Pending Matthew-response placeholder — honest "not yet" state, visually de-emphasised. */
.dx-read .voice.voice-pending .what { color: var(--ink-faint); font-style: italic; }
/* Podcast "next episode pending" notice — surfaces a skipped/held week instead of silence. */
.dx-read .panel-pending { border: var(--border-hair); border-radius: var(--radius-2, 8px); padding: var(--sp-3); margin-bottom: var(--sp-4); background: var(--surface-2, rgba(255,255,255,0.02)); }
.dx-read .panel-pending .dx-prose { margin: var(--sp-1) 0 0; color: var(--ink-muted); }

/* 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; }
}

/* Chronicle audio (the AI-voiced podcast) */
.dx-listen { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; flex-wrap: wrap; }
.dx-listen audio { height: 36px; max-width: 100%; }

/* ── The Coaches (CC-01/02) — per-coach page in the reader pane ───────────── */
.dx-disclosure { display: block; margin-top: var(--sp-2); color: var(--ink-faint); font-style: italic; max-width: var(--measure); }
.coach-stance, .coach-progress, .coach-report, .coach-voice, .coach-rel, .coach-char, .coach-hyp {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair);
}
/* The character — personality/background that shapes the coach's prompt. */
.cc-sig { margin-top: var(--sp-3); }
.cc-sig .label, .cc-tend, .cc-focus, .cc-voice, .cc-arc { color: var(--ink-faint); }
.cc-principles { margin: var(--sp-3) 0 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.cc-principles li { font-family: var(--font-serif); color: var(--ink); line-height: var(--lh-relaxed); }
.cc-tend, .cc-focus, .cc-voice, .cc-arc { margin-top: var(--sp-2); }
.cc-catch { margin-top: var(--sp-2); font-family: var(--font-serif); font-style: italic; color: var(--ember); }
/* Working hypotheses — live bets the coach is making right now. */
.ch-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ch-list li { font-family: var(--font-serif); color: var(--ink); line-height: var(--lh-relaxed); border-left: 2px solid var(--ember-line); padding-left: var(--sp-3); }
.ch-list .label { color: var(--ember); margin-right: var(--sp-1); }
.ch-prediction { border-left-color: var(--ember); }
.cs-headline { font-family: var(--font-serif); font-size: var(--fs-h2); line-height: 1.15; margin-top: var(--sp-2); color: var(--ink); }
.cs-care, .cs-careless, .cr-edges { margin-top: var(--sp-3); color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: var(--measure); }
.cs-care .label, .cs-careless .label, .cr-edges .label { display: block; color: var(--ember); margin-bottom: 2px; }
.cs-careless { color: var(--ink-muted); }   /* the "ignoring for now" candor reads softer */
.cs-gate { display: block; margin-top: var(--sp-3); color: var(--ink-faint); }
.coach-outputs { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.coach-outputs li { margin-top: var(--sp-2); color: var(--ink); }
.coach-outputs .label { color: var(--ink-faint); margin-right: var(--sp-2); }
.cr-rate { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-data-lg); color: var(--ink); }
.cr-rate .label { font-size: var(--fs-label); color: var(--ink-faint); }
.cr-calls { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.cr-calls li { margin-top: var(--sp-2); color: var(--ink); }
.cr-calls .label { display: inline-block; min-width: 5.5em; text-transform: uppercase; }
.cr-confirmed .label { color: #22c55e; }
.cr-refuted .label { color: var(--ember); }
.cr-caveat { display: block; margin-top: var(--sp-3); color: var(--ink-faint); }
.cr-tuning { margin-top: var(--sp-3); }
.cr-tuning summary { color: var(--ember); cursor: pointer; }
.cr-tuning ul { margin-top: var(--sp-2); padding-left: var(--sp-4); color: var(--ink-muted); }
.cr-tuning .label { color: var(--ink-faint); }
.cv-example { margin-top: var(--sp-3); padding-left: var(--sp-3); border-left: 2px solid var(--ember-line); font-family: var(--font-serif); font-size: var(--fs-quote); color: var(--ink); max-width: var(--measure); }

/* ── "My Team" (CC-10) — the collective read on Matthew ───────────────────── */
.team-focus, .team-tension, .team-huddle { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.tf-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tf-list li { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); padding: var(--sp-1) var(--sp-3); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface-raised); }
.tt-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; }
.tt-list li { margin-top: var(--sp-3); color: var(--ink); line-height: var(--lh-relaxed); max-width: var(--measure); }
.tt-list .label { display: block; color: var(--ember); margin-bottom: 2px; }
.th-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-2); }
.th-btn { display: grid; gap: 2px; width: 100%; text-align: left; cursor: pointer; background: var(--surface-raised); border: var(--border-hair); border-radius: var(--radius-sm); padding: var(--sp-3); transition: border-color var(--dur-fast); }
.th-btn:hover { border-color: var(--ember); }
.th-name { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink); }
.th-head { font-family: var(--font-serif); font-size: var(--fs-body); color: var(--ink); }
.th-watch { color: var(--ink-faint); }

/* ── Coach daily-journey timeline (CC-07) ─────────────────────────────────── */
.coach-journey { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.coach-latest { margin-top: var(--sp-3); color: var(--ink); line-height: var(--lh-relaxed); max-width: var(--measure); }
.coach-latest .label { color: var(--ink-faint); margin-right: var(--sp-2); }
.cj-band { color: var(--ember); margin-top: var(--sp-4); }
.cj-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; }
.cj-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) 0; border-bottom: var(--border-hair); }
.cj-date { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cj-sum { color: var(--ink); line-height: var(--lh-relaxed); }
.cj-themes { grid-column: 2; color: var(--ink-faint); }

/* ── Coach daily reflection (CC-08) ───────────────────────────────────────── */
.coach-daily { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: 2px solid var(--ember-line); background: var(--surface-raised); border-radius: var(--radius-sm); }
.cd-text { margin-top: var(--sp-2); color: var(--ink); font-family: var(--font-serif); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); max-width: var(--measure); }

/* ── Coach/Panel page type consistency (2026-06-14) ───────────────────────────
   Fix mixed fonts: coaches SPEAK in serif (human voice); labels, dates, rates,
   chips, names stay mono (machine & data). One rule so sections stop alternating. */
.coach-stance, .coach-progress, .coach-report, .coach-journey, .coach-rel,
.coach-daily, .team-focus, .team-tension, .team-huddle,
.coach-char, .coach-hyp, .coach-voice, .coach-more, .team-lead { font-family: var(--font-serif); }
/* The disclosed-section wrapper (F-06): coaches speak serif inside it; its summary
   stays a mono kicker like every other section header. One type system. */
.coach-more { margin-top: var(--sp-4); }
.coach-more > summary { cursor: pointer; }
.coach-char .label, .coach-hyp .label, .coach-voice .label, .coach-more .label { font-family: var(--font-mono); }
.coach-stance .label, .coach-progress .label, .coach-report .label, .coach-journey .label,
.coach-rel .label, .coach-daily .label, .team-focus .label, .team-tension .label,
.team-huddle .label, .cr-rate, .tf-list li, .th-name, .cj-date { font-family: var(--font-mono); }

/* ── The lead / Principal Investigator card — head of the team (2026-06-13) ──── */
.team-lead { margin: var(--sp-4) 0; padding: var(--sp-4); border: 1px solid var(--ember-line); border-left: 3px solid #0ea5e9; background: var(--surface-raised); border-radius: var(--radius-sm); }
.team-lead .label { font-family: var(--font-mono); }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-1); }
.tl-name { font-family: var(--font-serif); font-size: var(--fs-h4, 1.25rem); font-weight: 600; color: var(--ink); }
.tl-role { color: var(--ink-dim); }
.tl-bio { margin-top: var(--sp-2); font-family: var(--font-serif); }
.tl-philosophy { margin: var(--sp-3) 0 0; padding-left: var(--sp-3); border-left: 2px solid var(--ember-line); font-family: var(--font-serif); font-style: italic; color: var(--ink); max-width: var(--measure); }
.tl-focus { margin-top: var(--sp-3); font-family: var(--font-mono); color: var(--ink-dim); }

/* ── The Panel ledger — running bet scoreboard (2026-06-14) ──────────────────── */
.panel-ledger { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--ember-line); }
.pl-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pl-list li { font-family: var(--font-serif); color: var(--ink); line-height: var(--lh-relaxed); }
.pl-tag { font-family: var(--font-mono); font-size: var(--fs-tiny, .72rem); padding: 1px 6px; border-radius: var(--radius-sm); margin-right: var(--sp-2); white-space: nowrap; }
.pl-won .pl-tag { background: rgba(34,197,94,.15); color: #16a34a; }
.pl-lost .pl-tag { background: rgba(239,68,68,.15); color: #dc2626; }
.pl-open .pl-tag { background: rgba(234,179,8,.15); color: #b45309; }

/* Episode transcript reader — speaker-attributed turns + an in-page "chapters"
   contents (the host's questions). Reads like a script; calm, library-grade. */
.dx-transcript { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--border-hair); }
.tx-toc { margin: var(--sp-2) 0 var(--sp-4); }
.tx-toc summary { cursor: pointer; }
.tx-chapters { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.tx-chapters a { color: var(--ink-muted); text-decoration: none; }
.tx-chapters a:hover { color: var(--ember); }
.tx-body { display: flex; flex-direction: column; gap: var(--sp-3); }
.tx-turn { scroll-margin-top: var(--sp-6); }
.tx-who { display: block; color: var(--ember); margin-bottom: 2px; }
.tx-line { font-family: var(--font-serif); color: var(--ink); line-height: var(--lh-relaxed); max-width: var(--measure); margin: 0; }