/*
  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 ────────────────────────────────────────────────────────────────── */
/* overflow-x: clip contains the ::before bloom's -4% side-bleed at the hero box so it
   can't push document width (16px scroll at 390px / 31px at 768px); clip (not hidden)
   keeps overflow-y visible so the bloom still bleeds DOWN into the arc, and creates no
   scroll container. */
.hero { max-width: var(--container); margin-inline: auto; padding: clamp(2rem, 1rem + 6vw, 5rem) var(--gutter) var(--sp-7); position: relative; isolation: isolate; overflow-x: clip; }
/* v5 "forward" depth — a restrained warm bloom behind the hero + an EARNED glow on the
   live day-counter. Adds dimension/premium-feel without touching the palette or contrast. */
.hero::before { content: ""; position: absolute; z-index: -1; inset: -6% -4% auto -4%; height: 130%; pointer-events: none;
  background: radial-gradient(54% 46% at 67% 30%, var(--ember-wash), transparent 72%); }
.hero-daycount .hd-num { text-shadow: 0 0 24px var(--ember-soft); }
.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); }
/* The central day-of-experiment counter (the review's "central number"). */
.hero-daycount { margin: var(--sp-3) 0 var(--sp-2); display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.hero-daycount .hd-num { font-size: var(--fs-data-xl); line-height: 1; color: var(--ember); font-variant-numeric: tabular-nums; }
.hero-daycount .hd-cap { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.hero-day { color: var(--ink-muted); margin: var(--sp-2) 0 0; padding-left: var(--sp-2); border-left: 2px solid var(--ember); }
/* P2.1 — the live proof line paired with genesis, up in the hero. */
.hero-proof { color: var(--ember); font-family: var(--font-mono); font-size: var(--fs-small); margin: var(--sp-1) 0 0; padding-left: var(--sp-2); border-left: 2px solid 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); stroke-width: 1.5; }
.constellation .node circle { fill: var(--surface-raised); stroke: var(--ink-faint); stroke-width: 1; transition: r var(--dur) var(--ease-out); }
/* Earned glow — only the pillars that are UP get the warm halo (design system §12:
   glow is reserved for "this is up", never decorative). Filters don't affect layout. */
.constellation .node.up circle { stroke: var(--ember); stroke-width: 1.5; fill: color-mix(in oklch, var(--ember) 18%, var(--surface)); filter: drop-shadow(0 0 8px var(--ember-soft)); }
.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); }
/* Reserve space for async-injected containers so filling them doesn't shove content
   down (cuts cumulative layout shift on the home). */
[data-bind="weightchart"] { display: block; min-height: 150px; }
[data-bind="wall"] { display: block; min-height: 116px; }
.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 { position: relative; 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), filter 0.14s var(--ease-out), transform 0.14s var(--ease-out); transform-origin: bottom; cursor: crosshair; }
.wave .bar:hover { filter: brightness(1.28); transform: scaleY(1.05); }
/* cursor-following readout for the interactive waveform */
.wave-tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: var(--surface-raised); border: var(--border-hair); border-radius: var(--radius-xs); padding: 2px 8px; color: var(--ink); box-shadow: var(--shadow-soft); z-index: 2; }
.wave-tip[hidden] { display: none; }
.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); }
/* P1.2 — Third Wall teaser line on Home (full exchange lives in Coaching). */
.wall-teaser { margin: var(--sp-3) 0 0; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.5; }
.wall-teaser a, .dx-teaser .dx-foot a, .dx-read.dx-teaser a { color: var(--ember); }
/* P1.1/P1.3 — dispatches teaser on Home (full reader lives in Story). */
.dx-read.dx-teaser { border-left: 2px solid var(--ember-line); padding-left: var(--sp-5); }
/* P2.3 — Story promotes Matthew's voice + the timeline as first-class cards. */
.story-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-5); }
.story-feat { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: var(--honest-border); border-radius: var(--radius-sm); text-decoration: none; transition: border-color 0.15s; }
.story-feat:hover { border-color: var(--ember-line); }
.sf-kick { color: var(--ember); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.sf-title { font-family: var(--font-serif, Fraunces), serif; font-size: var(--fs-h4, 1.1rem); color: var(--ink); line-height: 1.25; }
.story-feat .sf-sub { color: var(--ink-muted); }
@media (max-width: 640px) { .story-features { grid-template-columns: 1fr; } }
/* P2.4 — Coaching: readable disagreement cards (positions head-to-head + the integrator's call). */
.tt-card { list-style: none; border: var(--honest-border); border-radius: var(--radius-sm); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.tt-topic { margin: 0 0 var(--sp-3); font-family: var(--font-serif, Fraunces), serif; font-size: var(--fs-h4, 1.05rem); }
.tt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.tt-who { color: var(--ember); text-transform: uppercase; letter-spacing: var(--tracking-label); display: block; margin-bottom: var(--sp-1); }
.tt-text { margin: 0; color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.5; }
.tt-call { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.5; }
.tt-call-k { color: var(--ember); text-transform: uppercase; letter-spacing: var(--tracking-label); display: block; margin-bottom: var(--sp-1); }
@media (max-width: 640px) { .tt-cols { grid-template-columns: 1fr; } }

/* 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); } }
/* Coaching on mobile: the rail becomes a horizontal chip strip so the READ sits near the
   top, not ~2 screens below an 8-coach vertical list (COACHING_SECTION_REVIEW mobile fix). */
@media (max-width: 759px) {
  [data-door="coaching"] .dx-list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  [data-door="coaching"] .dx-item { width: auto; white-space: nowrap; }
  [data-door="coaching"] .dx-item-sub { display: none; }
}
.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; }
/* P3.1 — the reply slot as first-class HELD SPACE (waiting, not absent). A dashed ember frame
   reads as reserved-and-open; the lead is present, the sub muted. Inviting, never a nag. */
.dx-read .voice.voice-pending { border-top: none; border: 1px dashed var(--ember-line); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); background: var(--ember-wash); }
.voice-pending .pending-lead { font-family: var(--voice-human-font); font-style: italic; font-size: var(--fs-quote); line-height: 1.45; color: var(--ink); margin: 0; }
.voice-pending .pending-sub { color: var(--ink-muted); margin: var(--sp-2) 0 0; line-height: 1.5; }
/* 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); }
/* underlined so the link is distinguishable without relying on colour (WCAG 1.4.1) */
.dx-lede a { color: var(--ember); text-decoration: underline; text-underline-offset: 0.15em; }
.dx-lede a:hover { text-decoration-thickness: 2px; }
.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; }

/* ── The serial journey timeline (the "walk backwards" spine) ──────────────── */
.tl-recap { margin: var(--sp-5) 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--border-hair);
  border-radius: var(--radius); background: color-mix(in oklch, var(--ember) 5%, var(--surface)); }
.tl-recap-k { color: var(--ink-faint); margin: 0; }
.tl-recap-h { font-family: var(--font-mono); font-size: 1.05rem; color: var(--ink); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.tl-recap-em { color: var(--ember); }
.tl-recap-s { color: var(--ink-muted); font-size: var(--fs-small); margin: var(--sp-1) 0 0; }
.tl-recap-s a, .tl-x { color: var(--ember); }
/* Phase 3 — Elena's "previously on" cold-open (richer than the stat aside) */
.tl-recap-elena { border-left: 3px solid var(--ember); }
.tl-recap-story { color: var(--ink); font-size: 1.02rem; line-height: 1.6; margin: var(--sp-2) 0 0; }
.tl-recap-beats { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-1); }
.tl-recap-beat { color: var(--ink-muted); font-size: var(--fs-small); line-height: 1.5; }
.tl-recap-beat-k { color: var(--ink-faint); margin-right: var(--sp-1); }
.tl-recap-beat-k a { color: var(--ember); }
.tl-recap-now { color: var(--ink); font-size: var(--fs-small); margin: var(--sp-3) 0 0; font-style: italic; }
.tl-recap-by { color: var(--ink-faint); margin: var(--sp-3) 0 0; text-align: right; }
/* The quiet stretch (2026-06-30) — when the owner's own logging goes quiet, or he
   returns. Sits below the recap; honest, never alarmist. Accent warms with a real
   lull (dark), reads neutral-warm on a return. No red. */
.tl-quiet { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--border-hair);
  border-left: 3px solid color-mix(in oklch, var(--ember) 40%, var(--rule));
  border-radius: var(--radius); background: color-mix(in oklch, var(--ember) 4%, var(--surface)); }
.tl-quiet[data-cls="dark"] { border-left-color: var(--ember); }
.tl-quiet-k { color: var(--ink-faint); margin: 0; }
.tl-quiet-line { color: var(--ink); font-size: 1.02rem; line-height: 1.6; margin: var(--sp-2) 0 0; font-style: italic; }
.tl { list-style: none; margin: var(--sp-4) 0 0; padding-left: var(--sp-5); border-left: var(--border-hair); display: grid; gap: 0; }
.tl-month { margin: var(--sp-4) 0 var(--sp-1); }
.tl-month:first-child { margin-top: 0; }
.tl-month .label { color: var(--ink-faint); }
.tl-item { position: relative; padding: var(--sp-3) 0; border-top: var(--border-hair); }
.tl-month + .tl-item { border-top: 0; }
.tl-dot { position: absolute; left: calc(-1 * var(--sp-5) - 4px); top: calc(var(--sp-3) + 7px); width: 8px; height: 8px;
  border-radius: 50%; background: var(--ink-faint); box-shadow: 0 0 0 3px var(--page); transition: transform var(--dur-fast) var(--ease-out); }
.tl-date { color: var(--ink-faint); display: block; }
.tl-title { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.25; margin: 1px 0 0; }
.tl-note { color: var(--ink-muted); font-size: var(--fs-body); line-height: var(--lh-relaxed); margin-top: 2px; }
.tl-x { display: inline-block; margin-top: var(--sp-1); font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: 0.03em; text-decoration: none; border-bottom: 1px solid var(--ember-line); }
.tl-x:hover { border-color: var(--ember); }
/* event-type dot colours — ember for the "up"/milestone moments, muted for the rest */
.tl-lv .tl-dot, .tl-ms .tl-dot, .tl-wt .tl-dot { background: var(--ember); }
.tl-item:hover .tl-dot { transform: scale(1.18); }

/* "Previously" rail in the chronicle reader — step back through the serial. */
.dx-prev { margin: var(--sp-3) 0 var(--sp-4); padding-left: var(--sp-3); border-left: 2px solid var(--ember-line); }
.dx-prev-k { color: var(--ink-faint); margin: 0 0 var(--sp-1); }
.dx-prev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dx-prevlink { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); background: transparent;
  border: 0; padding: 2px 0; cursor: pointer; text-align: left; }
.dx-prev-lbl { color: var(--ember); flex: none; }
.dx-prev-t { font-family: var(--font-serif); color: var(--ink-muted); font-size: 1rem; }
.dx-prevlink:hover .dx-prev-t { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* Coach "how this read evolved" trail — dated commentary, newest-first. */
.ce-trail { list-style: none; margin: 0; padding-left: var(--sp-4); border-left: var(--border-hair); display: grid; gap: var(--sp-3); }
.ce-item { position: relative; }
.ce-item::before { content: ""; position: absolute; left: calc(-1 * var(--sp-4) - 4px); top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.ce-date { color: var(--ink-faint); display: block; }
.ce-say { color: var(--ink-muted); margin: 1px 0 0; line-height: var(--lh-relaxed); }
.ce-themes { color: var(--ink-faint); margin: 2px 0 0; }
/* Cross-pillar link (podcast → the week's chronicle). */
.dx-xlink { margin: var(--sp-3) 0; }
.dx-xlink a { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--ember-line); }
.dx-xlink a:hover { border-color: var(--ember); }

/* ── 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); }
/* the evolution — the serial gold; marked with an ember rule, not faint */
.cs-evolve { margin-top: var(--sp-3); padding-left: var(--sp-3); border-left: 2px solid var(--ember);
  color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-relaxed); max-width: var(--measure); }
.cs-evolve .label { display: block; color: var(--ember); margin-bottom: 2px; }
.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 (v5 Coherence, 2026-06-27) ──────────────
   The site's body voice is SANS everywhere (Data, Story prose). Coach pages had
   been forced to SERIF wholesale (2026-06-14), which made them read as a different
   design and left sans .dx-prose fallbacks alternating mid-page — the "fonts all
   over the place under each coach" report. Align coach NARRATIVE to the sans body;
   SERIF is reserved for genuine voice moments (the daily-reflection callout, the
   philosophy/voice pull-quotes — handled by their own rules below). Labels, dates,
   rates, chips, names stay mono (machine & data). */
.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-sans); }
/* genuine "voice" moments stay serif (these win by being more specific) */
.cd-text, .tl-bio, .tl-philosophy, .cv-example,
.coach-voice blockquote, .coach-char blockquote, .coach-hyp blockquote { 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: center; 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; }

/* ── Ask the board (PG-ENG-2) — a capture card under the coaching header. Submits a
   reader question to a moderation queue; the board answers a selection in the lab
   notes. Ember-accented like the dispatch subscribe card; calm, never bait. ── */
.askboard { max-width: var(--measure); margin: var(--sp-5) 0 0; padding: var(--sp-4) var(--sp-5);
  border: var(--border-hair); border-left: 3px solid var(--ember); border-radius: var(--radius); background: var(--ember-wash); }
.askboard-k { color: var(--ember); margin: 0; }
.askboard-lede { margin: var(--sp-2) 0 var(--sp-4); color: var(--ink-muted); line-height: 1.5; }
.askboard-form { display: grid; gap: var(--sp-3); }
.askboard-in { width: 100%; resize: vertical; min-height: 60px; background: var(--surface); border: var(--border-hair);
  border-radius: var(--radius-sm); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body);
  line-height: 1.5; padding: var(--sp-3) var(--sp-4); }
.askboard-in:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.askboard-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.askboard-email { flex: 1 1 180px; min-width: 0; background: var(--surface); border: var(--border-hair);
  border-radius: var(--radius-sm); color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-small); padding: var(--sp-2) var(--sp-3); }
.askboard-email:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.askboard-btn { cursor: pointer; background: var(--ember); color: var(--page); border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.04em; padding: var(--sp-2) var(--sp-5); min-height: 40px; white-space: nowrap; }
.askboard-btn:hover { filter: brightness(1.06); }
.askboard-btn:disabled { opacity: 0.55; cursor: progress; }
.askboard-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.askboard-out { margin: 0; min-height: 1.2em; color: var(--ink-muted); }
@media (max-width: 440px) { .askboard-email { flex-basis: 100%; } .askboard-btn { width: 100%; } }

/* ── Commentary-first coaching (2026-06-28 re-cut). The Read = the board's read on
   you now; By Coach = the read on top of the domain data. Reuses dx-/coach-/tt- tokens. */
.read-priority { margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--ember);
  background: var(--ember-wash); border-radius: var(--radius-sm); }
.rp-text { margin: var(--sp-2) 0 0; font-family: var(--font-serif); font-size: var(--fs-h4); line-height: var(--lh-relaxed); color: var(--ink); }
.read-digest { margin-top: var(--sp-5); }
.rd-list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.rd-card { list-style: none; }
.rd-btn { width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: var(--border-hair);
  border-left: 3px solid transparent; border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); display: grid; gap: 4px; }
.rd-btn:hover { border-left-color: var(--ember); }
.rd-top { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.rd-dom { color: var(--ember); }
.rd-name { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--ink-muted); }
.rd-say { font-family: var(--font-sans); color: var(--ink); line-height: 1.5; }
.read-week { margin-top: var(--sp-5); }
.rw-list { margin: var(--sp-2) 0 0; }
.rw-dom { color: var(--ember); margin-top: var(--sp-3); text-transform: capitalize; }
.rw-note { margin: var(--sp-1) 0 0; }
/* By Coach — the read leads, the data sits right under it. */
.bc-read { margin: var(--sp-3) 0; }
.bc-analysis { margin: var(--sp-2) 0 0; }
.bc-rec { margin: var(--sp-3) 0 0; }
.bc-rec .label { color: var(--ember); display: block; margin-bottom: 2px; }
.bc-xnote, .bc-conf { color: var(--ink-faint); margin: var(--sp-2) 0 0; }
.bc-data { margin: var(--sp-4) 0; padding: var(--sp-4); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.bc-stat { margin: var(--sp-2) 0 0; }
.bc-statn { font-family: var(--font-mono); font-size: var(--fs-h3); color: var(--ink); }
.bc-delta { color: var(--ink-muted); }
.bc-spark { margin: var(--sp-2) 0 0; color: var(--ink-faint); font-size: var(--fs-tiny, 0.72rem); word-spacing: 2px; }
.bc-datalink { margin: var(--sp-3) 0 0; }
.bc-datalink a, .bc-track { color: var(--ember); }
.bc-track { display: block; margin: var(--sp-3) 0; }
.dx-item-sub { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: var(--fs-small); color: var(--ink-faint); line-height: 1.4; }
.bc-session { margin: var(--sp-4) 0; padding: var(--sp-4); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.ms-title { margin: var(--sp-2) 0 0; font-family: var(--font-serif); color: var(--ink); }
.ms-ex-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 4px; }
.ms-ex-list li { display: flex; gap: var(--sp-2); align-items: baseline; justify-content: space-between; border-bottom: var(--border-hair); padding-bottom: 4px; }
.ms-ex { font-family: var(--font-sans); color: var(--ink); }
/* Experiment-to-date arc — the board's read week by week (clickable into lab notes). */
.exp-arc { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.exp-btn { width: 100%; text-align: left; cursor: pointer; background: var(--surface); border: var(--border-hair); border-left: 3px solid var(--ember); border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); display: grid; gap: 4px; }
.exp-btn:hover { filter: brightness(1.04); }
.exp-top { display: flex; gap: var(--sp-2); align-items: baseline; justify-content: space-between; }
.exp-wkn { font-family: var(--font-serif); color: var(--ink); }
.exp-tone { color: var(--ink-muted); }
.exp-tone.tone-cautionary, .exp-tone.tone-urgent { color: var(--ember); }
.exp-date { color: var(--ink-faint); }
.exp-headline { display: block; font-family: var(--font-sans); color: var(--ink); font-size: 0.95em; margin-top: 2px; }
/* The board's cross-week arc synthesis above the week list (C-1). */
.exp-synth { margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); border-left: 2px solid var(--ember); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.exp-synth-k { color: var(--ember); margin: 0 0 var(--sp-2); }
.exp-throughline { font-family: var(--font-serif); font-size: 1.18em; line-height: 1.4; color: var(--ink); margin: 0 0 var(--sp-3); }
/* Cardio-vs-lifts + per-muscle balance on the training coach (C-2). */
.bc-modality, .bc-muscle { margin: var(--sp-4) 0; padding: var(--sp-4); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.bc-mod-h { margin: var(--sp-2) 0 var(--sp-1); color: var(--ember); }
.bc-mod-list, .bc-musc-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: 4px; }
.bc-mod-list li { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.bc-mod-t, .bc-musc-m { font-family: var(--font-sans); color: var(--ink); }
.bc-musc { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-2); align-items: baseline; border-bottom: var(--border-hair); padding-bottom: 4px; }
.bc-musc-n { font-family: var(--font-mono); }
.bc-musc.musc-over .bc-musc-s, .bc-musc.musc-high .bc-musc-s { color: var(--ember); }
.bc-musc.musc-under .bc-musc-s { color: var(--ink-faint); }
/* The Scorecard — the board's graded track record (C-3). */
.sc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); }
.sc-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border: var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.sc-n { font-family: var(--font-mono); font-size: 1.6em; line-height: 1; color: var(--ink); }
.sc-l { color: var(--ink-faint); }
.sc-note { color: var(--ink-soft); }
.sc-sub { margin-top: var(--sp-5); }
.sc-coachlist { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; gap: 4px; }
.sc-coachbtn { width: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) var(--sp-3); border: var(--border-hair); border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; text-align: left; }
.sc-coachbtn:hover { border-color: var(--ember); }
.sc-coach { font-family: var(--font-sans); color: var(--ink); }
.sc-rate { font-family: var(--font-mono); color: var(--ink); }
.sc-mix { color: var(--ink-faint); }
.sc-call { margin: var(--sp-2) 0; padding: var(--sp-3); border-left: 2px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); }
.sc-call-top { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
.sc-call-st { text-transform: uppercase; letter-spacing: 0.04em; }
.sc-call-claim { margin: 0; font-family: var(--font-serif); color: var(--ink); }
.sc-call-why { color: var(--ink-faint); margin: 4px 0 0; }
.sc-confirmed { border-left-color: var(--good, #5a8f6b); }
.sc-confirmed .sc-call-st { color: var(--good, #5a8f6b); }
.sc-refuted { border-left-color: var(--ember); }
.sc-refuted .sc-call-st { color: var(--ember); }
.sc-call-m { font-family: var(--font-mono); color: var(--ink-faint); }
@media (max-width: 560px) { .sc-tiles { grid-template-columns: repeat(2, 1fr); } }