/* ALIVE, BUT NOT WELL — V2
   Direction: the page is a patient monitor at 3am. Warm near-black, ivory type,
   one vital red kept scarce enough to still mean something. Tokens: tokens.css
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--color-field);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: var(--text-base);
  /* light type on a dark field reads lighter than it is — extra leading */
  line-height: 1.72;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

::selection { background: var(--color-pulse); color: var(--color-field); }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--space-sm); top: -100px; z-index: 200;
  background: var(--color-pulse); color: var(--color-field);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md);
  font-weight: 700; text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip:focus { top: var(--space-sm); }

/* ── Shared type ────────────────────────────────────────────────────────── */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  /* Condensed gothics stack tighter than a normal-width face — 1.02 leaves a
     gap that reads as a mistake at this size. */
  line-height: 0.92;
  letter-spacing: 0.002em;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
/* The accent word was an italic serif. With no italic in a condensed gothic,
   weight carries it instead — 500 against 800 is a bigger jump on this face
   than the old roman/italic contrast was, and it reads as broadcast titling
   rather than book typography. */
.display em { font-style: normal; font-weight: 800; color: var(--color-pulse); }

.eyebrow {
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-pulse);
}

.lede {
  font-size: var(--text-xl);
  line-height: 1.5;
  color: var(--color-ivory);
  font-weight: 400;
  max-width: 62ch;
}

p { max-width: var(--measure); }

/* Running copy gets `pretty`, not `balance`. They solve different problems:
   `balance` evens out a 2–4 line heading and is capped at a handful of lines,
   so it does nothing for a paragraph. `pretty` runs the whole block and is what
   kills the one-word last line — which matters a lot more here now that
   Jonathan's 8.4 copy runs to five and six sentences a paragraph.
   https://developer.chrome.com/blog/css-text-wrap-pretty
   Unsupported browsers ignore it and wrap as they always did. */
p, li, dd, dt, figcaption, blockquote, .lede { text-wrap: pretty; }

.secHead { max-width: 60ch; margin-bottom: var(--space-2xl); }
.secHead .display { margin-bottom: var(--space-md); }
.secHead .eyebrow { margin-bottom: var(--space-sm); }
.secHead > p { color: var(--color-ivory-soft); }

section { padding-block: var(--space-section); }
section > * { padding-inline: var(--edge); }
.secHead, section > p, section > ol, section > ul { margin-inline: auto; max-width: var(--maxw); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 14px var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--text-sm);
  letter-spacing: 0.01em;
  text-decoration: none;
  /* Not `nowrap`. The real English labels are short enough to sit on one line
     anyway, but a German or Spanish translation set to nowrap doesn't wrap —
     it overflows and gets clipped by the root's overflow-x. Wrapping is the
     graceful failure; clipping is a broken button. */
  text-wrap: balance;
  max-width: 100%;
  /* German compounds ("Benachrichtigungseinstellungen") are a single
     unbreakable token — wrapping can't help, so the word itself has to break
     or it sets a min-content width that blows out the whole card. */
  overflow-wrap: anywhere;
  min-width: 0;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn__glyph { width: 20px; height: 20px; flex: none; }

.btn--pulse { background: var(--color-pulse); color: #051d09; }
.btn--pulse:hover { background: var(--color-pulse-bright); transform: translateY(-1px); }
.btn--pulse:active { transform: translateY(0); background: var(--color-pulse-deep); color: var(--color-ivory); }

.btn--ghost { border-color: var(--color-line); color: var(--color-ivory); background: transparent; }
.btn--ghost:hover { border-color: var(--color-ivory-soft); background: var(--color-field-2); transform: translateY(-1px); }
.btn--ghost:active { transform: translateY(0); background: var(--color-field-3); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}
.btn.is-nudge { animation: nudge 560ms var(--ease-in-out); }

.chip {
  display: inline-block;
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  color: var(--color-ivory-faint);
}
.chip--wait { color: var(--color-pulse); border-color: color-mix(in oklab, var(--color-pulse) 45%, transparent); }

/* ── Reveal ─────────────────────────────────────────────────────────────── */

.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: opacity 140ms linear; }
}

/* ── Nav: floating pill ─────────────────────────────────────────────────── */

.pill {
  position: fixed; z-index: 90;
  top: var(--space-sm); left: 50%; translate: -50% 0;
  width: min(calc(100% - 2 * var(--space-sm)), 1080px);
  display: flex; align-items: center; gap: var(--space-md);
  padding: 9px 10px 9px var(--space-md);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--color-field) 78%, transparent);
  transition: background var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pill { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
}
.pill.is-stuck {
  background: color-mix(in oklab, var(--color-field) 93%, transparent);
  border-color: var(--color-line);
  box-shadow: var(--shadow-panel);
}
.pill__mark {
  display: flex; align-items: center; gap: var(--space-2xs);
  text-decoration: none; font-weight: 700; font-size: var(--text-sm);
  white-space: nowrap; letter-spacing: -0.01em;
  /* The text is only 27px tall. Padding out to a 44px hit area with matching
     negative margin buys the touch target without moving anything. */
  padding-block: 9px; margin-block: -9px;
}
.pill__beat {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--color-pulse);
}
@keyframes beat { 0%, 72%, 100% { opacity: 1; transform: scale(1); } 84% { opacity: 0.45; transform: scale(0.7); } }
.pill__beat { animation: beat 1.9s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .pill__beat { animation: none; } }

.pill__nav { display: flex; gap: var(--space-md); margin-left: auto; }
.pill__nav a {
  text-decoration: none; font-size: var(--text-sm); color: var(--color-ivory-soft);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.pill__nav a:hover { color: var(--color-ivory); }
.pill__cta {
  padding: 9px var(--space-sm); border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pill__cta:hover { background: var(--color-pulse); border-color: var(--color-pulse); color: #051d09; }

.pill__toggle {
  display: none; margin-left: auto;
  width: 48px; height: 48px; border-radius: 50%;
  background: transparent; border: 1px solid var(--color-line);
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.pill__toggle span[aria-hidden] { display: block; width: 16px; height: 1.5px; background: var(--color-ivory); }

.drawer {
  position: fixed; inset: 0; z-index: 120;
  background: var(--color-field);
  display: grid; place-items: center;
  padding: var(--space-xl);
}
.drawer[hidden] { display: none; }
.drawer nav { display: grid; gap: var(--space-md); text-align: center; }
.drawer nav a {
  font-family: var(--font-display); font-size: var(--text-2xl);
  text-decoration: none; line-height: 1.1;
}
.drawer nav a:hover { color: var(--color-pulse); }
.drawer__close {
  position: absolute; top: var(--space-md); right: var(--space-md);
  width: 46px; height: 46px; border-radius: 50%; font-size: 26px; line-height: 1;
  background: var(--color-field-2); border: 1px solid var(--color-line); cursor: pointer;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* 88svh, not 100svh. Jonathan removed the "Scroll Down" cue, so the top edge of
   the next section has to do that job — at a full viewport height there is
   nothing below the fold to suggest the page continues. */
.hero {
  position: relative;
  min-height: 88svh;
  display: grid; align-content: center;
  padding-block: calc(var(--space-3xl) + 40px) var(--space-3xl);
  overflow: hidden;
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--color-grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-fine) 1px, transparent 1px),
    linear-gradient(var(--color-grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-bold) 1px, transparent 1px);
  background-size: 13px 13px, 13px 13px, 65px 65px, 65px 65px;
  /* let the grid fall away at the edges so it reads as a screen, not wallpaper */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 42%, #000 30%, transparent 78%);
  opacity: 0.85;
}
.hero__inner {
  position: relative;
  width: min(100%, var(--maxw));
  margin-inline: auto; padding-inline: var(--edge);
  display: grid; justify-items: center; text-align: center;
  gap: var(--space-md);
}
/* Two stacked lines on desktop, at a size that reads as a credit rather than
   fine print. The interpunct is gone — the line break does that job. */
.eyebrow--hero {
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: var(--text-sm);
  letter-spacing: 0.26em;
  /* the tracking adds a trailing space; nudge the optical centre back */
  text-indent: 0.26em;
}
.eyebrow--hero .eyebrow__co { color: var(--color-ivory-faint); }

/* The show's name. Biggest type on the page — it is the thing being promoted,
   and the trace above it is the announcement, not the subject. */
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 1.6rem + 6.4vw, 7.6rem);
  line-height: 0.86;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: var(--color-ivory);
  text-wrap: balance;
  margin-block: var(--space-2xs) var(--space-3xs, 4px);
}

.monitor { position: relative; width: 100%; margin-block: var(--space-xs) var(--space-sm); }

/* The SVG is empty until JS fills it, and an empty viewBox still reserves its
   aspect ratio — which would leave a tall gap under the fallback. Hide it
   until there is something in it. */
.monitor__svg { display: none; width: 100%; height: auto; overflow: visible; }
.monitor.is-live .monitor__svg { display: block; }

/* No-JS / pre-build headline. Set to read as the same object the trace draws,
   so the hero is never an empty box. */
.monitor__fallback {
  max-width: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 1.4rem + 8vw, 9rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-pulse);
  text-align: center;
  padding-block: clamp(var(--space-lg), 6vw, var(--space-3xl));
  border-block: 1px solid color-mix(in oklab, var(--color-pulse) 40%, transparent);
}
@supports not (color: color-mix(in oklab, red 50%, transparent)) {
  .monitor__fallback { border-block-color: var(--color-pulse-deep); }
}

/* CRT scanlines over the trace only — cheap, static, and it does more to sell
   "this is a screen" than any amount of extra glow would. */
.monitor::after {
  content: ""; position: absolute; inset: -6% -2%;
  pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    oklch(0 0 0 / 0.22) 0 1px,
    transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.5;
}
@supports not (color: oklch(0 0 0)) {
  .monitor::after {
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
  }
}

.ekg__carrier, .ekg__letter {
  stroke: var(--color-pulse);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 7px color-mix(in oklab, var(--color-pulse) 55%, transparent));
}
.ekg__carrier { stroke-width: 2; opacity: 0.62; }
.ekg__letter  { stroke-width: 3.4; }

/* The hot dash riding just behind the sweep head. Near-white core with a wide
   bloom — this is the bit that reads as "burned in" rather than "faded in". */
.ekg__hot {
  stroke: color-mix(in oklab, var(--color-pulse-bright) 35%, white);
  stroke-width: 4.6;
  opacity: 0;
  filter: drop-shadow(0 0 5px var(--color-pulse-bright))
          drop-shadow(0 0 17px var(--color-pulse))
          drop-shadow(0 0 34px var(--color-pulse-deep));
}
.ekg__carrier.ekg__hot { stroke-width: 3; }

.ekg__head {
  fill: #fff;
  filter: drop-shadow(0 0 6px var(--color-pulse-bright))
          drop-shadow(0 0 20px var(--color-pulse))
          drop-shadow(0 0 44px var(--color-pulse-deep));
}
/* Once the words are complete they sit at full brightness — a real trace holds
   until the phosphor gives out, it doesn't dim politely. */
.monitor.is-complete .ekg__letter:not(.ekg__hot) {
  stroke: var(--color-pulse-bright);
  transition: stroke 900ms var(--ease-out);
}
.monitor.is-complete .ekg__carrier:not(.ekg__hot) {
  opacity: 0.78;
  transition: opacity 900ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .ekg__hot, .ekg__head { display: none; }
}

.monitor__hud {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-ivory-faint);
}
.hud__bpm b { color: var(--color-pulse); font-weight: 500; font-variant-numeric: tabular-nums; }
.hud__state { color: var(--color-slate); }

.hero__mail {
  font-family: var(--font-telemetry); font-size: var(--text-micro);
  letter-spacing: 0.08em;
}
/* The 44px hit box on this link is 24px taller than the text, so it eats the
   flow gap above it. With the footnote paragraph gone (8.4) the link sits
   directly under the newsletter button and their *touch targets* ended up 0–4px
   apart in landscape — mis-tap range, even though it looks fine. */
.hero__mail { margin-top: var(--space-md); }
.hero__mail a { color: var(--color-ivory-soft); text-underline-offset: 4px;
  display: inline-block; padding-block: 12px; margin-block: -12px; }
.hero__mail a:hover { color: var(--color-pulse); }
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center;
  margin-top: var(--space-2xs);
}
/* ── Coming soon ────────────────────────────────────────────────────────────
   ▸ JONATHAN 8.4. This section replaces the Status / Seeking / Target /
   Premiere strip he asked to delete, and carries his Coming Soon copy in full.
   Two columns: the title holds still on the left while the copy runs past it.
   Five paragraphs in one full-width column is a wall — the standing heading
   gives the eye somewhere to come back to, and it keeps the measure honest. */

.statement {
  width: min(100%, var(--maxw)); margin-inline: auto;
  padding-inline: var(--edge);
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
  align-items: start;
}
.statement > * { padding-inline: 0; }
/* Clears the floating pill. Only sticks on screens tall enough to hold the
   heading — see the responsive block. */
.statement__head { position: sticky; top: 104px; }
.statement__head .eyebrow { margin-bottom: var(--space-sm); }
.statement__head .display { margin: 0; }

.statement__body { display: grid; gap: var(--space-md); max-width: 64ch; }
.statement__body > p { color: var(--color-ivory-soft); max-width: none; }
.statement__body .lede { color: var(--color-ivory); max-width: none; }
.statement__body em { font-style: italic; color: var(--color-ivory); }

.statement__close {
  margin-top: var(--space-2xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line-soft);
  font-size: var(--text-lg) !important;
  line-height: 1.45;
  color: var(--color-ivory) !important;
  text-wrap: balance;
}
.statement__cs {
  font-family: var(--font-telemetry); font-size: var(--text-micro);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-pulse) !important;
}

/* ── Premise ────────────────────────────────────────────────────────────── */

.premise {
  width: min(100%, var(--maxw)); margin-inline: auto;
  padding-inline: var(--edge);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
  align-items: center;
}
.premise > * { padding-inline: 0; }

/* ▸ JONATHAN 8.4 rejected the corridor photograph and its caption; 8.6 he sent
   the DNA frame that is here now.

   No border, no panel, no radius — unlike every other image on this page. That
   is not an oversight. grade_mood.py clips this frame's black point until its
   background lands on --color-field itself, so the picture has no visible
   edge: the strand floats on the page the way the hero trace does. A border
   would draw a box around nothing. If the frame is ever re-graded with a lower
   black point, the edge comes back and this rule has to come back with it. */
.premise__art { position: relative; }
.premise__art img { width: 100%; }
.premise__body { display: grid; gap: var(--space-md); }
.premise__body > p:not(.lede) { color: var(--color-ivory-soft); }
.premise__body .display { margin-block: var(--space-2xs) var(--space-2xs); }

/* ── Watch ──────────────────────────────────────────────────────────────── */

/* ▸ JONATHAN 8.4 grew the pilot breakdown from three slots to six, which is too
   many to stack in a column beside the channel card — it made an 800px list
   next to a 300px box. The card is a full-width band now and the six segments
   run as a grid underneath, which is also how they actually relate: one
   channel, six things in it. */
.channel {
  position: relative; overflow: hidden;
  width: min(100%, var(--maxw)); margin-inline: auto;
  background: var(--color-field-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: grid; gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  align-items: center;
}
/* min-width:0 on both, or a long word inside sets the track's min-content
   width and the card grows past its container instead of wrapping. */
.channel { min-width: 0; }
.channel__body { display: grid; gap: var(--space-sm); justify-items: start; min-width: 0; }
.channel__body > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.channel__body h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; font-weight: 600; }
.channel__body p { color: var(--color-ivory-soft); font-size: var(--text-sm); }
.channel__meter { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.channel__meter span {
  flex: 1; background: var(--color-pulse-deep); border-radius: 1px;
  transform-origin: bottom; height: 100%;
  animation: meter 1.5s var(--ease-in-out) infinite alternate;
}
.channel__meter span:nth-child(2n)   { animation-duration: 1.9s; }
.channel__meter span:nth-child(3n)   { animation-duration: 1.2s; }
.channel__meter span:nth-child(4n)   { animation-duration: 2.3s; }
.channel__meter span:nth-child(odd)  { animation-delay: -0.4s; }
.channel__meter span:nth-child(5n)   { animation-delay: -0.9s; }
@keyframes meter { from { transform: scaleY(0.14); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .channel__meter span { animation: none; transform: scaleY(0.4); } }

.watch__sub {
  width: min(100%, var(--maxw)); margin-inline: auto;
  margin-top: var(--space-2xl); margin-bottom: var(--space-sm);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-2xl); line-height: 1.1;
}

.reels {
  list-style: none;
  /* `padding: 0` also clears the page inset that `section > *` supplies, so it
     has to be put back or the segments sit flush to the screen edge. */
  padding: 0; padding-inline: var(--edge);
  width: min(100%, var(--maxw)); margin-inline: auto;
  display: grid; gap: 0 var(--space-xl);
  /* 300, not 250. Six items at 250 fit four across on a 1440 screen, which
     leaves 05 and 06 stranded on a row of their own next to two empty cells;
     at 300 it resolves to a clean 3x2, then 2x3 on a tablet. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.reel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* The middle row takes the slack so the chips sit on one line across the row
     instead of trailing whatever length each description happens to be. */
  grid-template-rows: auto 1fr auto;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-md) 0;
  border-top: var(--rule);
}
.reel__slot {
  grid-row: 1 / span 3;
  font-family: var(--font-telemetry); font-size: var(--text-sm);
  color: var(--color-pulse); letter-spacing: 0.06em;
  line-height: 1.35;
}
.reel h4 { font-size: var(--text-lg); font-weight: 600; line-height: 1.25; }
.reel p { color: var(--color-ivory-soft); font-size: var(--text-sm); }
.reel .chip { justify-self: start; }

/* ── The series ─────────────────────────────────────────────────────────── */

/* ▸ JONATHAN 8.4: his Episode Format copy, replacing "the same room together".
   It is a run-of-show, so it is set as one — heading held to the left, the
   sequence running down the right. */
.format {
  width: min(100%, var(--maxw)); margin-inline: auto;
  margin-bottom: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
  gap: clamp(var(--space-md), 4vw, var(--space-2xl));
  align-items: start;
}
.format__h {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-2xl); line-height: 1.1;
}
.format__body { display: grid; gap: var(--space-md); max-width: 64ch; }
.format__body > p { color: var(--color-ivory-soft); max-width: none; }
.format__cue { color: var(--color-ivory) !important; font-weight: 600; }

.format__list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.format__list li {
  position: relative; padding-left: var(--space-md);
  font-size: var(--text-sm); color: var(--color-ivory-soft);
}
/* A rule, not a bullet glyph — the same hairline the rest of the page uses to
   mean "an item in a run". */
.format__list li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 9px; height: 1px; background: var(--color-pulse);
}
.format__list b { color: var(--color-ivory); font-weight: 600; }

.strand { width: min(100%, var(--maxw)); margin-inline: auto; margin-bottom: var(--space-3xl); }
.strand:last-child { margin-bottom: 0; }
.strand__title {
  display: flex; align-items: baseline; gap: var(--space-sm);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-2xl); line-height: 1.1;
  padding-bottom: var(--space-sm); margin-bottom: var(--space-lg);
  border-bottom: var(--rule);
}
.strand__num {
  font-family: var(--font-telemetry); font-size: var(--text-sm);
  color: var(--color-pulse); letter-spacing: 0.08em;
}
.strand__note { color: var(--color-ivory-faint); font-size: var(--text-sm); margin-top: calc(var(--space-lg) * -1 + 4px); margin-bottom: var(--space-lg); }

.people { list-style: none; padding: 0; display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
/* `align-content: start` is load-bearing. A grid item stretches to its row, and
   a two-row auto grid then shares the leftover height between the portrait row
   and the text row — so a card with a three-line logline pushed its name UP
   relative to a card with a one-line one, and the role labels across a row
   stopped lining up. Invisible while every logline was one line; obvious the
   moment Jonathan's 8.4 loglines arrived at three and five lines. */
.person { display: grid; gap: var(--space-sm); align-content: start; }

/* Circular portraits, capped. A 4:5 photo at full column width reads as a
   photo feed — one face per screen on a phone. A capped circle reads as a cast
   list, which is what this section is. The cap matters more than the grid: a
   lone portrait in a half-empty row would otherwise stretch to full width. */
.person__img, .pair__half img {
  width: 100%;
  max-width: var(--portrait);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 16%;   /* portraits carry headroom; per-photo below */
  border-radius: 50%;
  border: 1px solid var(--color-line-soft);
  filter: grayscale(0.35) contrast(1.05);
  transition: filter var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
}
.person:hover .person__img { filter: grayscale(0) contrast(1.05); transform: translateY(-3px); }
.person__img.is-pending, .pair__half img.is-pending {
  filter: none;
  object-position: center;       /* the placeholders are already square */
}

/* Framing tuned per photograph against a contact sheet — see
   preview_circles.py. A circle is unforgiving: the default centre crop clipped
   Cindy's crown, and Crescendo's desk shot needed to sit lower to find him. */
.person__img[src$="cindy.jpg"]     { object-position: center 0%; }
.person__img[src$="farmer.jpg"]    { object-position: center 6%; }
.person__img[src$="deng.jpg"]      { object-position: center 10%; }
.person__img[src$="crescendo.jpg"] { object-position: center 30%; }
.person__role {
  font-family: var(--font-telemetry); font-size: var(--text-micro);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--color-pulse);
}
.person h4, .pair__half h4 {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 600; line-height: 1.2; margin-top: 4px;
}
.person__body p:last-child { color: var(--color-ivory-soft); font-size: var(--text-sm); margin-top: 6px; }
.person__body { display: block; }

.pairs { list-style: none; padding: 0; display: grid; gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.pair__cond {
  font-family: var(--font-telemetry); font-size: var(--text-micro);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--color-ivory-faint);
  padding-bottom: var(--space-2xs); margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-line-soft);
}
.pair__two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(116px, 100%), 1fr));
  gap: var(--space-sm);
}
.pair__half > p:first-of-type { margin-top: var(--space-2xs); }
/* The description under a paired name — same register as the cast cards, so a
   pair doesn't read louder than the people around it. */
.pair__half > p:last-child:not(.person__role) {
  color: var(--color-ivory-soft);
  font-size: var(--text-sm);
  margin-top: 6px;
}

/* ── Associations, foundations, societies & funds ───────────────────────────
   ▸ JONATHAN 8.4 replaced three one-line credits with three full biographies.
   A 90-word bio next to a 158px circular portrait reads badly, and we have no
   photograph for any of the three — so this strand is a text card. That also
   means nothing here implies a headshot is missing, which is what the role
   placeholders were doing. */
.orgs {
  list-style: none; padding: 0;
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.org {
  background: var(--color-field-2);
  border: 1px solid var(--color-line-soft);
  border-left: 2px solid var(--color-pulse-deep);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: grid; gap: var(--space-3xs); align-content: start;
  min-width: 0;
}
.org > * { min-width: 0; overflow-wrap: anywhere; }
.org__name {
  font-family: var(--font-telemetry); font-size: var(--text-micro);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  color: var(--color-pulse);
}
.org h4 {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 600; line-height: 1.15; margin-top: 4px;
}
.org__title { font-size: var(--text-sm); color: var(--color-ivory); font-weight: 600; }
.org > p:not(.org__name):not(.org__title) {
  font-size: var(--text-sm); color: var(--color-ivory-soft);
  margin-top: var(--space-2xs); max-width: none;
}

/* ── Check your number ──────────────────────────────────────────────────── */

.numbers { background: var(--color-field-2); border-block: var(--rule); }
.gauge {
  width: min(100%, calc(1080px + 2 * var(--edge)));
  margin-inline: auto;
  /* Supplies the page inset itself — `section > *` can't, because the
     wrapper below resets padding and content ends up flush to the
     screen edge on a phone. */
  padding-inline: var(--edge);
}

.gauge__tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}
.gauge__tabs [role=tab] {
  padding: 10px var(--space-md);
  background: transparent; cursor: pointer;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600;
  max-width: 100%;                     /* a long translation wraps, never clips */
  color: var(--color-ivory-soft);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.gauge__tabs [role=tab]:hover { color: var(--color-ivory); border-color: var(--color-ivory-faint); }
.gauge__tabs [role=tab].is-on { background: var(--color-ivory); border-color: var(--color-ivory); color: var(--color-field); }

.gauge__stage {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-xl); align-items: start;
}

.screen {
  position: relative; overflow: hidden;
  background: var(--color-field);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid; gap: var(--space-sm);
  color: var(--color-pulse);
  min-height: 300px;
  align-content: space-between;
  transition: border-color var(--dur-mid) var(--ease-out);
}
.screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--color-grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-fine) 1px, transparent 1px);
  background-size: 15px 15px;
}
.screen[data-state="warn"] { color: var(--color-focus); }
.screen[data-state="bad"]  { color: var(--color-pulse-bright); border-color: color-mix(in oklab, var(--color-pulse) 60%, transparent); }

.screen__trace { position: relative; width: 100%; height: 110px; }
.screen__trace path { filter: drop-shadow(0 0 6px currentColor); }
.screen[data-state="bad"] .screen__trace { animation: crisis 1.1s steps(2, end) infinite; }
@keyframes crisis { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
@media (prefers-reduced-motion: reduce) { .screen[data-state="bad"] .screen__trace { animation: none; } }

.screen__read { position: relative; display: flex; align-items: baseline; gap: var(--space-2xs); flex-wrap: wrap; }
.screen__big {
  font-family: var(--font-telemetry); font-weight: 500;
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.9rem);
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: currentColor;
}
.screen__unit {
  font-family: var(--font-telemetry); font-size: var(--text-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-ivory-faint);
}
.screen__verdict {
  position: relative;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-ivory);
}
@keyframes swap { 0% { opacity: 0.25; } 55% { opacity: 1; } 70% { opacity: 0.6; } 100% { opacity: 1; } }
.screen.is-swap .screen__read, .screen.is-swap .screen__trace, .screen.is-swap .screen__verdict {
  animation: swap 380ms var(--ease-out);
}

.panel { display: grid; gap: var(--space-lg); align-content: start; }
/* `display: grid` outranks the hidden attribute's UA `display: none`, so
   without this every tab panel renders at once. */
.panel[hidden] { display: none; }
.switch { display: grid; gap: var(--space-2xs); justify-items: start; }
.switch__label {
  font-family: var(--font-telemetry); font-size: var(--text-micro);
  letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; color: var(--color-ivory-faint);
}
.switch__track {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--color-field); border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
}
.switch__opt {
  padding: 11px var(--space-md); min-height: 44px; border: none; border-radius: var(--radius-pill);
  background: transparent; cursor: pointer; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ivory-soft);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.switch__opt:hover { color: var(--color-ivory); background: var(--color-field-3); }
.switch__opt.is-on { background: var(--color-pulse); color: #051d09; }

.facts { display: grid; gap: var(--space-sm); }
.facts dt { font-weight: 700; font-size: var(--text-sm); }
.facts dt span { color: var(--color-ivory-faint); font-weight: 400; }
.facts dd { color: var(--color-ivory-soft); font-size: var(--text-sm); }

.scale { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); }
.scale--four { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.scale__step {
  display: grid; gap: 2px; cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-field);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.scale__step:hover { border-color: var(--color-ivory-faint); background: var(--color-field-3); }
.scale__step.is-on { border-color: var(--color-pulse); background: var(--color-pulse-wash); }
.scale__step b { font-family: var(--font-telemetry); font-size: var(--text-lg); font-weight: 500; }
.scale__step span { font-size: var(--text-xs); color: var(--color-ivory-faint); letter-spacing: 0.05em; }

.gauge__band { color: var(--color-ivory-soft); font-size: var(--text-sm); }
.gauge__band b { color: var(--color-ivory); font-family: var(--font-telemetry); font-weight: 500; }
.gauge__disclaimer {
  margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: var(--rule);
  font-size: var(--text-xs); color: var(--color-ivory-faint); max-width: none;
}

/* ── Daily ──────────────────────────────────────────────────────────────── */

.daily__bar {
  width: min(100%, var(--maxw)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md);
  padding-bottom: var(--space-md); margin-bottom: var(--space-lg);
  border-bottom: var(--rule);
}
.daily__barLabel {
  font-family: var(--font-telemetry); font-size: var(--text-micro);
  letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; color: var(--color-ivory-faint);
}
.lang { display: inline-flex; padding: 4px; gap: 4px; background: var(--color-field-2); border: 1px solid var(--color-line); border-radius: var(--radius-pill); }
.lang__opt {
  padding: 11px var(--space-sm); min-height: 44px; border: none; border-radius: var(--radius-pill);
  background: transparent; cursor: pointer; white-space: nowrap;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-ivory-soft);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang__opt:hover { color: var(--color-ivory); background: var(--color-field-3); }
.lang__opt.is-on { background: var(--color-slate); color: var(--color-field); }
.daily__barNote { font-size: var(--text-sm); color: var(--color-ivory-faint); }

.week {
  list-style: none; padding: 0; padding-inline: var(--edge);
  width: min(100%, var(--maxw)); margin-inline: auto;
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.day {
  padding: var(--space-md);
  background: var(--color-field-2);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
  display: grid; gap: 6px; align-content: start;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.day:hover { border-color: var(--color-line); transform: translateY(-2px); }
.day--wide { grid-column: span 2; background: var(--color-field-3); }
/* The wide card's lighter surface drops the red label to 4.02:1. Only this
   one card needs the brighter red to clear 4.5:1. */
.day--wide .day__d { color: var(--color-pulse-bright); }
.day__d {
  font-family: var(--font-telemetry); font-size: var(--text-micro);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--color-pulse);
}
.day h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.2; }
.day p { font-size: var(--text-sm); color: var(--color-ivory-soft); }
.daily__foot {
  width: min(100%, var(--maxw)); margin: var(--space-md) auto 0;
  font-family: var(--font-telemetry); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ivory-faint);
}

/* ── Principles ─────────────────────────────────────────────────────────── */

.principles { position: relative; }
.principles__art {
  width: min(100%, var(--maxw)); margin-inline: auto;
  margin-bottom: var(--space-2xl); padding-inline: var(--edge);
}
.principles__art img {
  width: 100%; height: clamp(200px, 30vw, 380px); object-fit: cover;
  object-position: center 42%;
  border-radius: var(--radius-lg); border: 1px solid var(--color-line-soft);
}
.tenets {
  list-style: none; padding: 0; padding-inline: var(--edge);
  width: min(100%, var(--maxw)); margin-inline: auto;
  display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  counter-reset: tenet;
}
.tenet { padding-top: var(--space-md); border-top: 1px solid var(--color-pulse); counter-increment: tenet; }
.tenet::before {
  content: counter(tenet, decimal-leading-zero);
  display: block; margin-bottom: var(--space-sm);
  font-family: var(--font-telemetry); font-size: var(--text-sm);
  color: var(--color-pulse); letter-spacing: 0.08em;
}
.tenet h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.15; margin-bottom: var(--space-2xs); }
.tenet p { color: var(--color-ivory-soft); font-size: var(--text-sm); }
/* Two of the three now run to two paragraphs (his 8.4 wording). */
.tenet p + p { margin-top: var(--space-sm); }

/* ── Jonathan's letter — the one light panel ────────────────────────────── */

.letter { padding-inline: var(--edge); }
.letter > * { padding-inline: 0; }
.letter__sheet {
  width: min(100%, 1080px); margin-inline: auto;
  background: var(--color-paper); color: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-xl), 5vw, var(--space-3xl));
  box-shadow: var(--shadow-lift);
}
.letter__eyebrow {
  font-family: var(--font-telemetry); font-size: var(--text-xs);
  letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500;
  color: var(--color-pulse-deep); margin-bottom: var(--space-sm);
}
.letter__h {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -0.018em;
  margin-bottom: var(--space-lg);
}
.letter__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-lg) var(--space-xl);
}
.letter__cols > div { display: grid; gap: var(--space-md); align-content: start; }
.letter__cols p { color: var(--color-ink-soft); max-width: 60ch; }
.letter__lede { font-size: var(--text-lg); line-height: 1.55; color: var(--color-ink) !important; }
.letter__close { color: var(--color-ink) !important; font-weight: 500; }
/* His one-line beats — "And that is not all." / "Not bad." / "That promise
   became Alive, But Not Well." Folded into the paragraph above they read as
   sentence fragments; set as beats they read the way he wrote them. */
.letter__beat {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xl); line-height: 1.05; letter-spacing: -0.005em;
  color: var(--color-ink) !important;
}
.letter__beat em { font-style: normal; color: var(--color-pulse-deep); }

.letter__sig {
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: 1px solid color-mix(in oklab, var(--color-ink) 18%, transparent);
  display: grid; gap: var(--space-2xs); justify-items: start;
}
.letter__sig img { width: clamp(180px, 26vw, 260px); height: auto; }
/* Signature failed to load — promote the name so the sign-off still reads as
   a sign-off rather than a stray caption. */
.letter__sig.is-sigless figcaption {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-ink);
  line-height: 1.05;
}
.letter__sig.is-sigless figcaption span {
  font-family: var(--font-telemetry);
  font-size: var(--text-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: var(--space-2xs);
}
.letter__sig figcaption {
  font-family: var(--font-telemetry); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-soft);
  display: grid; gap: 2px;
}
.letter__sig figcaption span { color: color-mix(in oklab, var(--color-ink) 55%, transparent); }

/* ── Notify ─────────────────────────────────────────────────────────────── */

.notify { border-top: var(--rule); }
.notify__inner {
  width: min(100%, calc(760px + 2 * var(--edge))); margin-inline: auto;
  padding-inline: var(--edge);
  display: grid; gap: var(--space-md); justify-items: center; text-align: center;
}
.notify .display { text-align: center; }
.notify__inner > p { color: var(--color-ivory-soft); }

.notify__form {
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  align-items: end; justify-content: center;
  width: 100%; margin-top: var(--space-sm);
}
.field { display: grid; gap: 6px; text-align: left; flex: 1 1 240px; min-width: 0; }
.field--who { flex: 0 1 210px; }
.field label {
  font-family: var(--font-telemetry); font-size: var(--text-micro);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--color-ivory-faint);
}
.field input, .field select {
  width: 100%; padding: 13px var(--space-sm);
  background: var(--color-field-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field input::placeholder { color: var(--color-ivory-faint); }
.field input:hover, .field select:hover { border-color: var(--color-ivory-faint); }
.field input:focus, .field select:focus { background: var(--color-field-3); }
.field input[aria-invalid="true"] { border-color: var(--color-pulse); }
.field__err { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-ivory-faint); text-align: center; margin-inline: auto; }
.field__err.is-bad { color: var(--color-pulse); }
.notify__form .btn { flex: 0 0 auto; padding-block: 14px; }
.notify__alt { font-size: var(--text-sm); color: var(--color-ivory-faint); }
/* Inline mail links sit at ~20px tall. Padded to a 44px thumb target, with the
   margin pulled back so the line box doesn't grow. */
.notify__alt a {
  color: var(--color-ivory); text-underline-offset: 3px;
  display: inline-block; padding-block: 12px; margin-block: -12px;
}

/* ── Disclaimer ─────────────────────────────────────────────────────────────
   Deliberately legible: 16px, real leading, ivory-soft on the raised panel, not
   greyed to invisibility. A disclaimer people can't read is a weak disclaimer —
   the point is that it was genuinely presented, not that it technically exists.
   It is quieter than the page around it, not hidden by it. */
.disclaimer {
  background: var(--color-field-2);
  border-top: var(--rule);
  padding: var(--space-3xl) var(--edge) var(--space-2xl);
}
.disclaimer__inner {
  width: min(100%, 780px); margin-inline: auto;
  display: grid; gap: var(--space-md);
}
.disclaimer__h {
  font-family: var(--font-telemetry);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-pulse);
  padding-bottom: var(--space-sm);
  border-bottom: var(--rule);
}
.disclaimer p {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-ivory-soft);
  max-width: none;
}
.disclaimer strong { color: var(--color-ivory); font-weight: 600; }
.disclaimer em { font-style: italic; }

/* The one line that has to survive skim-reading. */
.disclaimer__urgent {
  color: var(--color-ivory) !important;
  font-weight: 600;
  padding: var(--space-md);
  border: 1px solid color-mix(in oklab, var(--color-pulse) 55%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-pulse-wash);
}
@supports not (color: color-mix(in oklab, red 50%, transparent)) {
  .disclaimer__urgent { border-color: var(--color-pulse-deep); }
}
.disclaimer__meta {
  font-size: var(--text-xs) !important;
  color: var(--color-ivory-faint) !important;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-line-soft);
}

/* Same 44px thumb target as the other inline links. inline-block also stops it
   breaking across two lines, which is what made the hit box read as 279x42. */
.gauge__disclaimer a {
  color: var(--color-ivory-soft); text-underline-offset: 3px;
  display: inline-block; padding-block: 13px; margin-block: -13px;
}
.gauge__disclaimer a:hover { color: var(--color-pulse); }

/* ── Footer — statement ─────────────────────────────────────────────────── */

.foot {
  border-top: var(--rule);
  padding: var(--space-2xl) var(--edge) var(--space-xl);
}
/* ▸ JONATHAN 8.4: the real quotation, with its author. Rosalynn Carter said it
   about caregiving and founded an institute on it, so the attribution is part
   of the quote, not a footnote to it. */
.foot__quote {
  width: min(100%, var(--maxw)); margin-inline: auto;
  margin-bottom: var(--space-2xl);
}
.foot__statement {
  max-width: 34ch;
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -0.015em;
  text-wrap: pretty;
}
.foot__attr {
  margin-top: var(--space-md);
  font-family: var(--font-telemetry); font-size: var(--text-micro);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-pulse);
}
.foot__attr::before { content: "— "; }
.foot__meta {
  width: min(100%, var(--maxw)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm);
  font-family: var(--font-telemetry); font-size: var(--text-xs);
  letter-spacing: 0.08em; color: var(--color-ivory-faint);
}
.foot__meta a {
  color: var(--color-ivory-soft); text-underline-offset: 3px;
  /* Same 44px thumb target as the notify link. */
  display: inline-block; padding-block: 12px; margin-block: -12px;
}
.foot__meta a:hover { color: var(--color-pulse); }
.foot__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--color-ivory-faint); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .premise, .statement, .format, .channel, .gauge__stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .premise__art { order: 2; }
  .principles__art img { height: clamp(180px, 42vw, 300px); }
  /* A one-column statement has nothing to stick beside — sticking it would
     just pin the heading over its own copy. */
  .statement__head { position: static; }
  .statement__body, .format__body { max-width: none; }
  /* The meter is a flourish next to the copy; underneath it, it is a bar chart
     of nothing. Keep it, but let it sit tight under the text. */
  .channel { gap: var(--space-md); }
  .channel__meter { height: 28px; }
}

@media (max-width: 860px) {
  .pill__nav, .pill__cta { display: none; }
  .pill__toggle { display: flex; }
  .pill { padding-right: 6px; }
}

@media (max-width: 560px) {
  body { line-height: 1.68; }

  /* ── Getting the primary CTA above the fold ───────────────────────────────
     On a phone the hero has to hold a headline and the CTA. At desktop spacing
     it ran to 1.3–1.9x the viewport and pushed the one conversion action
     completely off screen. Everything below buys vertical space back. Moving
     the long Coming Soon copy out of the hero and into its own section (8.4)
     is the single biggest win here — this block now has far less to fight. */
  .hero {
    min-height: auto;
    /* Just enough to clear the floating pill, not a full --space-3xl. */
    padding-block: 84px var(--space-lg);
  }
  .hero__inner { gap: var(--space-sm); }

  /* One line on phones, as asked. The full string — "A DOCUMENTARY SERIES ·
     BOGNER ENTERTAINMENT", 42 characters — cannot fit one legible line at
     320px: it needs about 10px, below the 13px floor. So the production
     company drops out here (it is still in the nav and the footer) and the
     descriptor gets the line to itself. */
  .eyebrow--hero {
    grid-auto-flow: column;
    gap: 0;
    font-size: var(--text-micro);
    letter-spacing: 0.16em;
    text-indent: 0.16em;
  }
  .eyebrow--hero .eyebrow__co { display: none; }

  .monitor { margin-block: 0; }

  /* Flavour, and it wrapped to two lines on the narrowest phones. The real
     information is the headline and the pitch. */
  .monitor__hud { gap: var(--space-2xs) var(--space-md); font-size: var(--text-micro); }

  .hero__actions { flex-direction: column; align-self: stretch; gap: var(--space-2xs); }
  .hero__actions .btn { justify-content: center; }
  .day--wide { grid-column: span 1; }
  .notify__form { flex-direction: column; align-items: stretch; }
  .notify__form .btn { justify-content: center; }
  .screen { min-height: 260px; padding: var(--space-md); }
  .letter__sheet { border-radius: var(--radius-md); }

  /* Coming soon — the eyebrow and the title stack straight onto the copy. */
  .statement { gap: var(--space-lg); }
  .statement__close { font-size: var(--text-base) !important; }

  /* The six pilot segments become a single run of rules rather than a grid of
     one-column cards — same shape as the reels list was before it grew. */
  .reels { gap: 0; }
  .channel { padding: var(--space-md); }
  .channel__body h3 { font-size: var(--text-xl); }

  /* Two paragraphs of biography inside a bordered card at 320px is a lot of
     furniture around a lot of text. Drop the box, keep the accent rule. */
  .org {
    background: transparent;
    border: none; border-left: 2px solid var(--color-pulse-deep);
    border-radius: 0;
    padding: 0 0 0 var(--space-md);
  }
  .orgs { gap: var(--space-lg); }

  /* The footer meta wraps to five rows on a phone, and each link carries a 44px
     hit box that is 24px taller than its text — so at an 8px row gap the email
     and the disclaimer link overlap each other's targets even though they look
     comfortably apart. Stack them properly instead, with enough room that the
     boxes clear. The dot separators only make sense on a single line. */
  .foot__meta {
    flex-direction: column; align-items: flex-start;
    gap: var(--space-lg);
  }
  .foot__sep { display: none; }

  /* On a phone the cast becomes a list, not a montage: a small circle beside
     the name. Two-up cards still gave each face a quarter of the screen and
     forced names to wrap; a row gives the portrait ~76px and the text the full
     remaining width. Adapt the shape, don't just shrink it. */
  .people { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .person {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
  }
  .person__img { max-width: 76px; }
  .people h4 { font-size: var(--text-lg); }
  .people .person__body p:last-child { font-size: var(--text-sm); }

  /* The pairs stay vertical and side by side — the whole point of that strand
     is seeing patient and caregiver together, so it must not become a list. */
  .pair__half { display: grid; justify-items: center; text-align: center; }
  .pair__half img { max-width: 96px; }
  .pair__half h4 { font-size: var(--text-base); }
}

/* ── Landscape phone ────────────────────────────────────────────────────────
   A 375px-tall viewport never triggers the max-width mobile rules, because the
   width is 812. The hero ran to 2.15x the viewport here — the worst case on the
   whole site. Keyed on height, not width. */
@media (max-height: 540px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 76px var(--space-lg); }
  .hero__inner { gap: var(--space-2xs); }
  .monitor { margin-block: 0; }
  /* Cap the trace so the words don't eat the whole short screen. */
  .monitor__svg { max-height: 22svh; margin-inline: auto; }
  /* On a 375px-tall screen the title's viewport-width clamp resolves to ~78px,
     which is sized for a screen that isn't this shape. Size it off height. */
  .hero__title { font-size: clamp(2rem, 11svh, 3.4rem); }
  /* One line, not two — the production company is in the footer and the nav.
     Its second line costs 25px of a 375px screen. */
  .eyebrow--hero { grid-auto-flow: column; gap: 0 var(--space-sm); }
  .eyebrow--hero .eyebrow__co { display: none; }
  .hero__actions { flex-direction: row; }
  /* Flavour. On a 375px-tall screen it is the difference between the CTA being
     visible and not. */
  .monitor__hud { display: none; }
  section { padding-block: var(--space-2xl); }
  /* The heading would stick for the whole scroll of the copy on a 375px-tall
     screen, which is most of the viewport given over to a title. */
  .statement__head { position: static; }
}

/* ── Long statements on phones ──────────────────────────────────────────────
   At 320px a line of condensed display type holds ~20 characters at full size,
   so the two big pull statements step down where the container gets narrow.
   The Carter quotation is 190 characters — four times the length of the line
   it replaced — so it steps down further than the old one did or it runs to
   nine lines on an SE. See line_probe.js for the measured counts. */
@media (max-width: 560px) {
  /* max-width was the enemy here — a 22ch measure is narrower than the phone
     itself, so it forced extra lines rather than preventing them. */
  .foot__statement { font-size: var(--text-xl); max-width: none; }
  .lede { font-size: var(--text-lg); max-width: none; }
  .notify .display { font-size: var(--text-2xl); }
}
@media (max-width: 400px) {
  /* 280px of usable width. */
  .foot__statement { font-size: var(--text-lg); }
  .lede { font-size: var(--text-base); }
}

@media (max-width: 400px) {
  /* The pill is 66px tall sitting 16px from the top, so its bottom edge is at
     82px — 76px of padding put the eyebrow underneath it. */
  .hero { padding-block: 98px var(--space-md); }
  .monitor__hud { display: none; }
  .hero__mail { order: 3; }
  /* Was 0.75rem — 12px, under the 13px floor this audience needs — because the
     old string ("A DOCUMENTARY SERIES") wouldn't fit 280px at 13px. "A
     television series" is shorter and does: 19 characters at 13px with 0.08em
     tracking is ~168px. Back on the floor. */
  .hero .eyebrow { font-size: var(--text-micro); letter-spacing: 0.08em; text-indent: 0.08em; }
}

/* ── Windows high-contrast ──────────────────────────────────────────────────
   This design carries nearly everything in colour — the red IS the meaning.
   forced-colors strips all of it, so anything that was only distinguishable by
   hue needs a border or a system colour to survive. */
@media (forced-colors: active) {
  /* The trace and the readout are the page's two pieces of real information;
     keep them legible by mapping them onto system colours rather than letting
     them flatten into the background. */
  .ekg__carrier, .ekg__letter { stroke: CanvasText; filter: none; }
  .ekg__hot { stroke: Highlight; filter: none; }
  .ekg__head { fill: Highlight; filter: none; }
  .screen__trace path { stroke: CanvasText; filter: none; }

  /* Fills disappear in forced-colors, so the on/off state of every toggle,
     tab and switch has to come from a border instead. */
  .btn, .gauge__tabs [role=tab], .switch__opt, .lang__opt, .chip, .scale__step {
    border: 1px solid CanvasText;
  }
  .gauge__tabs [role=tab][aria-selected="true"],
  .switch__opt.is-on, .lang__opt.is-on, .scale__step.is-on {
    border: 3px solid Highlight;
  }
  /* Decoration that carries no information and only adds noise here. */
  .hero__grid, .monitor::after, .screen::before, .channel__meter { display: none; }
  .pill { background: Canvas; }
}

@media print {
  .pill, .drawer, .channel__meter, .monitor::after { display: none; }
  body { background: #fff; color: #000; }
}