/* Plain Stories companion site: an editorial long-read. Cream paper and espresso ink, one amber (the logo's), and the
   video's own typefaces (video-styleguide.md §5.1): Archivo Narrow Bold for display, IBM Plex Sans for every sentence,
   IBM Plex Mono for anything copied or matched (times, codes, dates, counts). */
@font-face { font-family: "Archivo Narrow"; src: url(/fonts/ArchivoNarrow-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(/fonts/IBMPlexSans-normal-400-600.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(/fonts/IBMPlexSans-italic-400-600.woff2) format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/IBMPlexMono-normal-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/IBMPlexMono-normal-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #F5F1E8; --bg-2: #EDE7DA; --ink: #1B1916; --ink-2: #3A3630; --muted: #6B655B;
  --hair: rgb(27 25 22 / 0.09); --hair-2: rgb(27 25 22 / 0.16);
  --shell: rgb(27 25 22 / 0.035); --core: #FBF9F4; --core-hi: rgb(255 255 255 / 0.85);
  --brand: #F5B335; --accent: #8A5A00; --mark-bg: rgb(245 179 53 / 0.42);
  --band: #1B1814; --on-band: #F1EBDF; --on-band-2: #A9A196;
  --glass: rgb(245 241 232 / 0.72);
  --sheet: #E6DFD1;
  --shadow: 0 1px 1px rgb(27 25 22 / 0.04), 0 14px 32px -14px rgb(27 25 22 / 0.14), 0 48px 96px -48px rgb(27 25 22 / 0.2);
  --shadow-low: 0 1px 1px rgb(27 25 22 / 0.04), 0 8px 20px -12px rgb(27 25 22 / 0.12);
  --display: "Archivo Narrow", "Arial Narrow", sans-serif;
  --serif: "IBM Plex Sans", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --r: 1.75rem; --pad: 0.375rem;
  --wrap: 82rem; --gutter: clamp(1rem, 4vw, 3rem);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #13110E; --bg-2: #191612; --ink: #F1EBDF; --ink-2: #D6CFC2; --muted: #A39B8E;
  --hair: rgb(241 235 223 / 0.09); --hair-2: rgb(241 235 223 / 0.16);
  --shell: rgb(241 235 223 / 0.035); --core: #1D1A16; --core-hi: rgb(255 255 255 / 0.06);
  --accent: #F5B335; --mark-bg: rgb(245 179 53 / 0.3);
  --band: #0C0B09; --glass: rgb(19 17 14 / 0.7); --sheet: #2A2620;
  --shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 14px 32px -14px rgb(0 0 0 / 0.55), 0 48px 96px -48px rgb(0 0 0 / 0.6);
  --shadow-low: 0 1px 1px rgb(0 0 0 / 0.3), 0 8px 20px -12px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #13110E; --bg-2: #191612; --ink: #F1EBDF; --ink-2: #D6CFC2; --muted: #A39B8E;
    --hair: rgb(241 235 223 / 0.09); --hair-2: rgb(241 235 223 / 0.16);
    --shell: rgb(241 235 223 / 0.035); --core: #1D1A16; --core-hi: rgb(255 255 255 / 0.06);
    --accent: #F5B335; --mark-bg: rgb(245 179 53 / 0.3);
    --band: #0C0B09; --glass: rgb(19 17 14 / 0.7); --sheet: #2A2620;
    --shadow: 0 1px 1px rgb(0 0 0 / 0.3), 0 14px 32px -14px rgb(0 0 0 / 0.55), 0 48px 96px -48px rgb(0 0 0 / 0.6);
    --shadow-low: 0 1px 1px rgb(0 0 0 / 0.3), 0 8px 20px -12px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
/* hidden always wins: components that set display (the menu, buttons) must still disappear when hidden. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; --dock-top: 4.5rem; scroll-padding-top: calc(var(--dock-top) + var(--dock-h, 0px) + 1rem); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Film grain: one fixed layer, never on a scrolling element. */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
::selection { background: var(--brand); color: #1B1916; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--hair-2); transition: text-decoration-color 300ms var(--spring), color 300ms var(--spring); }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { --wrap: 46rem; }
.m, .t, .ids { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--brand); color: #1B1916; padding: 0.5rem 0.875rem; border-radius: 999px; z-index: 60; }
.skip:focus { top: 1rem; }

/* ---------- The logo: amber square 0.54 em, centred on the capitals, then the wordmark ---------- */
.mark { font: 700 1.25rem/1 "Archivo Narrow", var(--sans); letter-spacing: -0.01em; white-space: nowrap; }
.mark .sq { display: inline-block; width: 0.54em; height: 0.54em; background: var(--brand); margin-right: 0.3em; vertical-align: 0.074em; }
.mark.big { font-size: 1.75rem; }

/* ---------- Type ---------- */
/* The series marker: the logo's amber square, then the series name. It lives in meta lines under titles. */
.ser { display: inline-flex; align-items: center; gap: 0.5em; font: 500 0.875rem/1.3 var(--sans); color: var(--ink); white-space: nowrap; }
.ser .sq { width: 0.6em; height: 0.6em; background: var(--brand); flex: none; }
:is(.s-meta, .ep-meta, .src-meta) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 1rem; }
.card-h { font: 400 clamp(1.375rem, 2vw, 1.75rem)/1.1 var(--display); margin-bottom: 1rem; }
.band-h { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--display); color: var(--muted); margin-bottom: 1.25rem; }
.c-ser { margin-bottom: 1rem; }
.display { font: 400 clamp(3.25rem, 7.6vw, 7.25rem)/0.94 var(--display); letter-spacing: -0.025em; }
.h1 { font: 400 clamp(2.75rem, 6vw, 5.5rem)/0.98 var(--display); letter-spacing: -0.02em; max-width: 16ch; }
.h2 { font: 400 clamp(2.25rem, 4.2vw, 3.75rem)/1 var(--display); letter-spacing: -0.015em; }
:is(.display, .h1, .h2) em { font-style: italic; color: var(--ink-2); }
.lead { font: 400 clamp(1.125rem, 1.6vw, 1.3125rem)/1.55 var(--sans); color: var(--muted); max-width: 38em; margin-top: 1.75rem; }

/* ---------- Buttons: pills with the arrow in its own circle ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.875rem; padding: 0.375rem 0.375rem 0.375rem 1.375rem; border-radius: 999px; font: 500 0.9375rem/1 var(--sans); text-decoration: none; border: 0; cursor: pointer;
  transition: transform 500ms var(--spring), background-color 500ms var(--spring), box-shadow 500ms var(--spring); }
.btn .btn-ic { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; transition: transform 500ms var(--spring); }
.btn .btn-ic svg { width: 1.125rem; height: 1.125rem; }
.btn:hover .btn-ic { transform: translate(2px, -1px) scale(1.06); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary .btn-ic { background: rgb(255 255 255 / 0.12); }
:root[data-theme="dark"] .btn.primary .btn-ic { background: rgb(0 0 0 / 0.1); }
.btn.ghost { color: var(--ink); background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn.ghost .btn-ic { background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair); }
.btn.ghost:hover { background: var(--core); }
.btn.small { font-size: 0.8125rem; padding-left: 1rem; gap: 0.625rem; }
.btn.small .btn-ic { width: 1.75rem; height: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

/* ---------- The double bezel: a hairline tray, and the object sitting in it ---------- */
.shell { display: block; padding: var(--pad); border-radius: var(--r); background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair); }
.shell > .core { border-radius: calc(var(--r) - var(--pad)); background: var(--core); box-shadow: inset 0 1px 0 var(--core-hi), var(--shadow); padding: clamp(1.5rem, 3vw, 2.5rem); height: 100%; }

/* ---------- The floating nav island ---------- */
.nav { position: fixed; top: max(1rem, env(safe-area-inset-top)); left: 0; right: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
.nav-pill { pointer-events: auto; display: flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.375rem 0.375rem 1.25rem; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--hair), var(--shadow-low); }
.nav .home { text-decoration: none; margin-right: 1.25rem; }
.native-nav { display: none; }
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.125rem; }
.nav ul a { display: block; padding: 0.625rem 0.875rem; border-radius: 999px; font: 500 0.875rem/1 var(--sans); text-decoration: none; color: var(--muted); transition: color 400ms var(--spring), background-color 400ms var(--spring); }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--ink); background: var(--shell); }
.theme, .burger { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); cursor: pointer; transition: transform 400ms var(--spring); }
.theme { margin-left: 0.375rem; }
.theme:active, .burger:active { transform: scale(0.94); }
.theme svg { width: 1.125rem; height: 1.125rem; }
.theme[data-to="light"] .moon, .theme[data-to="dark"] .sun { display: none; }
.burger { position: relative; margin-left: 0.25rem; }
.burger span:not(.vh) { position: absolute; left: 50%; top: 50%; width: 1rem; height: 1.25px; background: currentColor; border-radius: 1px; transition: transform 500ms var(--spring); }
.burger span:nth-child(1) { transform: translate(-50%, -3.5px); }
.burger span:nth-child(2) { transform: translate(-50%, 3.5px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 35; display: grid; align-content: center; padding: 6rem var(--gutter) 3rem; background: var(--glass); backdrop-filter: blur(40px) saturate(1.3); -webkit-backdrop-filter: blur(40px) saturate(1.3); opacity: 0; transition: opacity 500ms var(--spring); }
.menu.open { opacity: 1; }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.menu a { display: block; font: 400 clamp(2.5rem, 11vw, 3.5rem)/1.1 var(--display); text-decoration: none; transform: translateY(3rem); opacity: 0; transition: transform 700ms var(--spring), opacity 700ms var(--spring); transition-delay: calc(80ms + var(--i) * 60ms); }
.menu.open a { transform: none; opacity: 1; }

/* ---------- Scroll entries: heavy fade-up, visible without JS ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(2.5rem); filter: blur(8px); transition: opacity 900ms var(--spring), transform 900ms var(--spring), filter 900ms var(--spring); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .menu a { transform: none; transition: opacity 200ms linear; }
}

/* ---------- Sections ---------- */
main { padding-top: 6rem; }
.section { padding-block: clamp(6rem, 12vw, 10rem); }
.section.tight { padding-block: clamp(2rem, 5vw, 4rem) clamp(6rem, 12vw, 10rem); }
.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-more { margin-top: 3rem; }

/* ---------- Home: the editorial split ---------- */
.hero { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3rem 2rem; align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero-words { grid-column: 1 / span 7; }
.hero .display { font-size: clamp(3rem, 6vw, 5.4rem); }
.hero-objects { grid-column: 8 / -1; }
/* The cascade: the latest episode as three objects on the table, at slight angles. */
.cascade { position: relative; height: clamp(30rem, 44vw, 38rem); }
.cascade > * { position: absolute; transition: transform 900ms var(--spring); }
.cascade > figure { margin: 0; }
.c-doc { width: 92%; top: 0; right: 0; transform: rotate(3deg); --r: 1.25rem; }
.c-doc .core { padding: 0.75rem; }
.c-doc figcaption { font-size: 0.6875rem; color: var(--muted); padding: 0.625rem 0.25rem 0.125rem; }
.cascade:has(.c-house) { height: clamp(39rem, 49vw, 44rem); }
.c-house { width: 94%; top: 0; right: 0; transform: rotate(2deg); --r: 1.25rem; }
.c-house .core { padding: 1.125rem 1.25rem; overflow: hidden; }
.house-kicker { font: 500 0.75rem/1.4 var(--sans); color: var(--muted); }
.house-scene { display: block; width: 100%; height: auto; margin-block: 0.375rem -0.25rem; overflow: visible; }
.house-scene path { stroke-linecap: round; stroke-linejoin: round; }
.house-sun { fill: var(--brand); opacity: 0.22; }
.house-ground { fill: none; stroke: var(--hair-2); stroke-width: 2; }
.house-walk { fill: var(--mark-bg); stroke: none; }
.house-wall { fill: var(--bg); stroke: var(--ink-2); stroke-width: 2; }
.house-side { fill: var(--shell); stroke: var(--ink-2); stroke-width: 2; }
.house-roof { fill: var(--mark-bg); stroke: var(--ink-2); stroke-width: 2.5; }
.house-roof-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.house-window { fill: var(--mark-bg); stroke: var(--ink-2); stroke-width: 2; }
.house-door { fill: var(--shell); stroke: var(--ink-2); stroke-width: 2; }
.house-porch { fill: var(--core); stroke: var(--ink-2); stroke-width: 2; }
.house-detail { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.house-plant { fill: none; stroke: var(--accent); stroke-width: 4; }
.house-prices { display: grid; grid-template-columns: minmax(0, 1fr) 1rem minmax(0, 1fr); align-items: center; gap: 0.5rem; padding-block: 0.75rem 0.875rem; border-bottom: 1px solid var(--hair); }
.house-prices p { min-width: 0; }
.house-prices p > span { display: block; font: 400 0.6875rem/1.45 var(--sans); color: var(--muted); }
.house-prices strong { display: block; margin-top: 0.25rem; font: 700 clamp(1.25rem, 2vw, 1.75rem)/1.05 var(--display); letter-spacing: -0.02em; white-space: nowrap; }
.house-then { color: var(--accent); }
.house-then svg { display: block; width: 1rem; transform: rotate(45deg); }
.c-house figcaption { padding-top: 0.75rem; font: 400 0.6875rem/1.55 var(--sans); color: var(--muted); }
.c-house figcaption a { color: var(--accent); }
.cascade:has(.c-house) .c-stat { top: 53%; }
.c-stat { width: 50%; left: 0; top: 33%; transform: rotate(-2.5deg); }
.stat-n { font: 400 clamp(3.5rem, 6vw, 5.25rem)/0.9 var(--display); letter-spacing: -0.02em; }
.stat-l { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.4; }
.stat-c { margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted); }
.stat-s { margin-top: 1rem; font-size: 0.6875rem; color: var(--muted); }
.c-ep { width: 54%; right: 0; bottom: 0; transform: rotate(1deg); text-decoration: none; }
.c-ep .core { position: relative; }
.c-core { font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.08 var(--display); }
.c-title { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); }
.c-ep .btn-ic { position: absolute; right: 1rem; bottom: 1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--ink); color: var(--bg); transition: transform 500ms var(--spring); }
.c-ep .btn-ic svg { width: 1.125rem; }
.cascade:hover .c-doc { transform: rotate(4deg) translateY(-0.5rem); }
.cascade:hover .c-house { transform: rotate(3deg) translateY(-0.375rem); }
.cascade:hover .c-stat { transform: rotate(-3.5deg) translateX(-0.5rem); }
.c-ep:hover .btn-ic { transform: translate(2px, -1px) scale(1.06); }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(12rem, auto); gap: 1.25rem; }
.bento .big { grid-column: 1 / span 8; grid-row: span 2; }
.b-take, .b-count { grid-column: 9 / -1; }
.b-take p { font: 400 1.25rem/1.4 var(--serif); }
.count-n { font: 400 4.5rem/0.9 var(--display); }
.b-count p:not(.count-n) { margin: 0.5rem 0 1.25rem; color: var(--muted); }

/* ---------- Episode cards ---------- */
.ep-card .core { display: flex; flex-direction: column; gap: 0; }
.ep-core { font: 400 clamp(2rem, 3.6vw, 3.25rem)/1.02 var(--display); letter-spacing: -0.015em; max-width: 18ch; }
.ep-core a { text-decoration: none; }
.ep-core a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.ep-title { margin-top: 1.25rem; font-weight: 500; }
.ep-dek { margin-top: 0.75rem; color: var(--muted); max-width: 40em; }
.ep-meta { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--muted); }
.contact-card h2 + p, .ep-card .ep-core { margin-top: 0; }
.ep-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: auto; padding-top: 2rem; }
.ep-list { display: grid; gap: 1.5rem; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.story-grid .ep-core { font-size: clamp(2rem, 3vw, 3rem); max-width: 22ch; }
.ep-thesis { color: var(--ink-2); font-weight: 400; }
.story-discovery { padding-block: 2rem clamp(4rem, 8vw, 6rem); }
.method-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; align-items: start; }
.method-summary p { font-size: 1.125rem; max-width: 38em; color: var(--ink-2); }
.method-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.about-details { margin-top: 1.5rem; border-top: 1px solid var(--hair-2); }
.about-details > summary { padding-block: 1rem; cursor: pointer; color: var(--accent); font-size: 1rem; }
.about-details .method { margin-block: 1rem; }

/* ---------- Method ---------- */
.method { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.method li:nth-child(1) { grid-column: 1 / span 7; }
.method li:nth-child(2) { grid-column: 8 / -1; }
.method li:nth-child(3) { grid-column: 1 / span 5; }
.method li:nth-child(4) { grid-column: 6 / -1; }
.method-n { font-size: 0.75rem; color: var(--accent); margin-bottom: 2.5rem; }
.method h3 { font: 400 clamp(1.625rem, 2.4vw, 2.125rem)/1.08 var(--display); margin-bottom: 0.875rem; }
.method p:last-child { color: var(--muted); max-width: 34em; }

/* ---------- The dark band ---------- */
.band { background: var(--band); color: var(--on-band); }
.band-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem 2rem; align-items: end; }
.band-grid > div:first-child { grid-column: 1 / span 8; }
.band-actions { grid-column: 9 / -1; display: grid; gap: 0.75rem; justify-items: start; }
.band-line { font: 400 clamp(2rem, 3.8vw, 3.5rem)/1.05 var(--display); letter-spacing: -0.015em; }
.band-count { font-size: 0.8125rem; color: var(--on-band-2); margin-bottom: 0.5rem; }
.band .btn.primary { background: var(--on-band); color: #1B1916; }
.band .btn.primary .btn-ic { background: rgb(0 0 0 / 0.08); }
.band .btn.ghost { color: var(--on-band); background: rgb(241 235 223 / 0.05); box-shadow: inset 0 0 0 1px rgb(241 235 223 / 0.18); }
.band .btn.ghost .btn-ic { background: rgb(241 235 223 / 0.06); }
.band ::selection { background: var(--brand); color: #1B1916; }

/* ---------- Page heroes ---------- */
.p-hero { padding-block: clamp(4rem, 10vw, 8rem) clamp(2rem, 5vw, 4rem); }
.s-meta { margin-top: 1.75rem; font-size: 0.8125rem; color: var(--muted); }
.p-hero:has(.source-starts) { padding-block: clamp(2.5rem, 6vw, 5rem) 2.5rem; }
.p-hero:has(.source-starts) .h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); max-width: 24ch; }
.source-starts { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hair); }
.source-starts h2 { font: 500 0.875rem/1.4 var(--sans); }
.source-starts ol { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.source-starts a { font-weight: 500; text-underline-offset: 0.2em; }
.source-starts p, .source-explainer, .source-draft { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.source-starts p { margin-top: 0.5rem; }
.source-explainer, .source-draft { margin-top: 1.25rem; max-width: 68em; }

/* ---------- The story page ---------- */
.s-hero { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3rem 2.5rem; align-items: start; padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); }
.s-words { grid-column: 1 / span 7; }
.s-watch { grid-column: 8 / -1; display: grid; gap: 1.25rem; }
.core-line { font: 400 clamp(3rem, 6.4vw, 6rem)/0.95 var(--display); letter-spacing: -0.025em; }
.s-title { margin-top: 2rem; font: 600 clamp(1.25rem, 1.8vw, 1.5rem)/1.3 var(--serif); letter-spacing: -0.005em; max-width: 30em; }
.dek { margin-top: 1rem; font: 400 italic clamp(1.125rem, 1.5vw, 1.3125rem)/1.5 var(--serif); color: var(--ink-2); max-width: 36em; }
.story-hero { padding-block: clamp(2.5rem, 6vw, 5rem) 2.5rem; }
.story-hero .s-words { grid-column: 4 / 11; max-width: 44rem; }
.story-hero .core-line { font: 500 0.9375rem/1.5 var(--sans); letter-spacing: 0; color: var(--muted); max-width: 38em; }
.story-hero .s-title { margin-top: 0.875rem; font: 700 clamp(2.75rem, 5.8vw, 5.25rem)/1.02 var(--display); letter-spacing: -0.025em; max-width: 21ch; }
.story-hero .dek { font-style: normal; max-width: 36em; margin-top: 1.5rem; }
.story-hero .s-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-top: 1.5rem; }
.story-hero .s-meta a { white-space: nowrap; }
.video { --r: 1.5rem; }
.video .core { padding: 0; overflow: hidden; aspect-ratio: 16 / 9; }
.video .poster { position: relative; display: grid; place-items: center; height: 100%; text-decoration: none; color: inherit; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video .play { position: relative; display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.375rem 1.25rem 0.375rem 0.375rem; border-radius: 999px; background: var(--glass); backdrop-filter: blur(16px); font-weight: 500; }
.video .play .btn-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--ink); color: var(--bg); }
.video .play .btn-ic svg { width: 1.25rem; }
.video .pending { align-content: center; justify-items: start; gap: 0.75rem; padding: 2rem; background: var(--bg-2); }
.video .pending p:last-child { color: var(--muted); font-size: 0.9375rem; max-width: 24em; }
.chapters { list-style: none; margin: 0; padding: 0 0.5rem; font-size: 0.875rem; }
.chapters li + li { border-top: 1px solid var(--hair); }
.chapters a, .chapters > li > span { display: grid; grid-template-columns: 3.25rem 1fr; padding: 0.625rem 0; text-decoration: none; color: var(--muted); transition: color 300ms var(--spring); }
.chapters a:hover { color: var(--ink); }
.t { color: var(--accent); font-size: 0.8125rem; }
a.t { text-decoration: none; }
.draft { margin-bottom: 2rem; padding: 0.875rem 1.25rem; border-radius: 999px; background: var(--mark-bg); font-size: 0.875rem; }
.draft span { font-weight: 600; }

.s-body { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem; padding-bottom: clamp(4rem, 8vw, 6rem); }
.toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: 7rem; font-size: 0.875rem; }
.toc-h { font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.toc-contents > summary { font: 500 0.6875rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; cursor: pointer; }
.toc-contents > summary::marker { color: var(--accent); }
.toc ol { list-style: none; margin: 0 0 2rem; padding: 0; border-left: 1px solid var(--hair-2); }
.toc li a { display: block; padding: 0.4rem 0 0.4rem 1rem; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--muted); line-height: 1.35; transition: color 300ms var(--spring), border-color 300ms var(--spring); }
.toc li a:hover, .toc li a.on { color: var(--ink); border-left-color: var(--ink); }
.switch { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; }
.switch input { appearance: none; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--hair-2); position: relative; cursor: pointer; transition: background-color 400ms var(--spring); margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.25rem - 4px); height: calc(1.25rem - 4px); border-radius: 999px; background: var(--core); box-shadow: var(--shadow-low); transition: transform 400ms var(--spring); }
.switch input:checked { background: var(--ink); }
.switch input:checked::after { transform: translateX(1rem); }
.toc-note { margin-top: 0.625rem; font-size: 0.8125rem; color: var(--muted); max-width: 18em; }

.prose { grid-column: 4 / span 7; font: 400 1.21875rem/1.72 var(--serif); font-optical-sizing: auto; color: var(--ink); max-width: 38rem; }
.prose > p + p { margin-top: 1.35em; }
.prose h2 { font: 400 clamp(2rem, 3.4vw, 2.75rem)/1.05 var(--display); letter-spacing: -0.015em; margin: 2.75em 0 0.9em; }
.prose h2:first-child { margin-top: 0; }
.prose em { font-style: italic; }
.prose .opening { display: flow-root; }
.prose .opening::first-letter { float: left; font: 400 4.4em/0.82 var(--display); padding: 0.05em 0.1em 0 0; color: var(--ink); }
.prose, .s-words, .evidence-items > li { min-width: 0; }
.prose .story-depth { margin: 2em 0; border-block: 1px solid var(--hair-2); }
.story-depth > summary { padding: 1rem 0; font: 500 1rem/1.5 var(--sans); cursor: pointer; color: var(--accent); }
.story-depth .depth-body { padding-bottom: 1.5rem; font-size: 1.0625rem; }
.prose .depth-body h2 { font-size: 1.75rem; margin-top: 1.5rem; }
.depth-body > p + p { margin-top: 1em; }
.watch-section { margin-block: 0 clamp(3rem, 6vw, 5rem); }
.watch-details { margin-left: calc((100% + 2.5rem) / 4); max-width: 46rem; border-block: 1px solid var(--hair-2); }
.watch-details > summary { font: 500 1rem/1.5 var(--sans); padding: 1.25rem 0; cursor: pointer; }
.watch-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; padding-bottom: 1.5rem; }
.story-followup { margin-block: -1rem 3rem; }
.story-followup-inner { margin-left: calc((100% + 2.5rem) / 4); max-width: 46rem; }
.share-tools { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 2rem; }
.share-status { width: 100%; font-size: 0.875rem; color: var(--muted); }
.share-status:empty { display: none; }
.share-link { width: 100%; font-size: 0.875rem; }
.share-link input { display: block; width: 100%; margin-top: 0.5rem; padding: 0.75rem; font: inherit; border: 1px solid var(--hair-2); border-radius: 0.5rem; background: var(--core); color: var(--ink); }
.read-next .ep-core { font-size: clamp(1.75rem, 3vw, 2.5rem); max-width: 28ch; }
.read-next .ep-thesis { display: none; }
.pull { margin: 2em 0 2em; padding: 0; }
.pull p { font: 400 italic clamp(1.75rem, 3vw, 2.5rem)/1.15 var(--display); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.pull p::before { content: ""; display: block; width: 2.5rem; height: 0.375rem; background: var(--brand); margin-bottom: 1.25rem; border-radius: 999px; }
.cite { font: 400 0.625rem/1 var(--mono); vertical-align: 0.6em; margin-left: 0.15em; white-space: nowrap; }
.cite a { position: relative; display: inline-block; padding: 0.15em 0.3em; margin-left: 0.1em; border-radius: 4px; color: var(--accent); text-decoration: none; background: var(--shell); transition: background-color 300ms var(--spring); }
.cite a:hover, .cite a:focus-visible { background: var(--mark-bg); color: var(--ink); }
.cite a::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 0.5rem); width: max-content; max-width: 18rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: var(--ink); color: var(--bg); font: 400 0.75rem/1.4 var(--sans); white-space: normal; text-align: left;
  opacity: 0; transform: translate(-50%, 0.25rem); pointer-events: none; transition: opacity 300ms var(--spring), transform 300ms var(--spring); z-index: 5; }
.cite a:hover::after, .cite a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* Claim codes are off by default: the switch shows them, without waiting for a script. */
.s-body:not(:has(#cites:checked)) .cite { display: none; }

.takeaway-band { padding-block: clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--hair); }
.takeaway-text { font: 400 clamp(1.75rem, 3.2vw, 2.75rem)/1.12 var(--display); letter-spacing: -0.01em; }

/* ---------- The sources page ---------- */
/* The sources toolbar: docks under the nav. Row one finds, row two jumps (ranks, transcript, corrections, every source). */
.dock { position: sticky; top: var(--dock-top); z-index: 25; background: var(--bg); border-block: 1px solid var(--hair); }
.dock::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--dock-top); background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 300ms var(--spring); }
.dock.stuck::before { opacity: 1; }
.dock.stuck { box-shadow: 0 10px 24px -18px rgb(27 25 22 / 0.35); }
.dock-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.625rem; padding-block: 0.75rem; }
.dock-in > * { min-width: 0; }
.find-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.find-bar { flex: 1 1 22rem; display: flex; align-items: center; gap: 0.625rem; padding: 0 0.5rem 0 1rem; border-radius: 999px; background: var(--core); box-shadow: inset 0 0 0 1px var(--hair-2); transition: box-shadow 300ms var(--spring); }
.find-bar:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.find-ic svg { width: 1.125rem; height: 1.125rem; color: var(--muted); display: block; }
.find-bar input { flex: 1; min-width: 0; font: 400 1rem var(--sans); color: var(--ink); background: transparent; border: 0; padding: 0.7rem 0; outline: none; }
.find-bar input::placeholder { color: var(--muted); }
.find-key { font: 500 0.75rem/1 var(--mono); color: var(--muted); padding: 0.25rem 0.45rem; border-radius: 0.375rem; box-shadow: inset 0 0 0 1px var(--hair-2); }
.find-bar:focus-within .find-key { display: none; }
.find-res { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
.found { font-size: 0.875rem; color: var(--ink-2); }
.found b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.find-step { display: flex; align-items: center; gap: 0.25rem; }
.find-pos { font-size: 0.8125rem; color: var(--muted); min-width: 5.5ch; text-align: right; margin-right: 0.25rem; }
.step { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--ink); cursor: pointer; transition: transform 300ms var(--spring), background-color 300ms var(--spring); }
.step:hover { background: var(--core); }
.step:active { transform: scale(0.94); }
.step:disabled { opacity: 0.4; cursor: default; }
.step svg { width: 1.125rem; height: 1.125rem; }
.jump { display: flex; align-items: center; gap: 0.5rem 1rem; }
.jump > ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.jump > ol::-webkit-scrollbar { display: none; }
.jump > ol a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; border-radius: 999px; font: 500 0.875rem/1 var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 300ms var(--spring), background-color 300ms var(--spring); }
.jump > ol a:hover { color: var(--ink); background: var(--shell); }
.jump > ol a[aria-current] { color: var(--ink); background: var(--core); box-shadow: inset 0 0 0 1px var(--hair-2); }
.j-rank { font-size: 0.75rem; color: var(--accent); }
.j-n { font-size: 0.75rem; color: var(--muted); }
.jump > ol a.off { opacity: 0.4; pointer-events: none; }
.index { position: relative; flex: none; }
.index summary { list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.6rem 0.45rem 0.85rem; border-radius: 999px; font: 500 0.875rem/1 var(--sans); cursor: pointer; box-shadow: inset 0 0 0 1px var(--hair-2); white-space: nowrap; }
.index summary::-webkit-details-marker { display: none; }
.index summary svg { width: 1rem; height: 1rem; transition: transform 300ms var(--spring); }
.index[open] summary svg { transform: rotate(180deg); }
.index-panel { position: absolute; right: 0; top: calc(100% + 0.5rem); width: min(34rem, calc(100vw - 2 * var(--gutter))); max-height: min(60vh, 32rem); overflow: auto; padding: 1rem 1.25rem; border-radius: 1.25rem; background: var(--core); box-shadow: inset 0 0 0 1px var(--hair-2), var(--shadow); }
.index-h { font: 600 0.75rem/1 var(--sans); color: var(--muted); margin: 0.75rem 0 0.375rem; }
.index-h:first-child { margin-top: 0; }
.index-panel ol { list-style: none; margin: 0; padding: 0; }
.index-panel a { display: block; padding: 0.35rem 0.5rem; margin-inline: -0.5rem; border-radius: 0.5rem; font-size: 0.875rem; line-height: 1.35; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-panel a:hover { background: var(--shell); }
.index-panel .m { color: var(--accent); font-size: 0.75rem; margin-right: 0.35rem; }
.find-empty { padding: 3rem 0; display: grid; justify-items: start; gap: 1rem; }
.find-empty p { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.15 var(--display); letter-spacing: -0.02em; max-width: 30ch; }
.find-empty .q { color: var(--accent); }

.stack { padding-block: 3rem 2rem; }
.group { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--hair); }
.stack > .group:first-of-type { border-top: 0; }
.rail { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--dock-top) + var(--dock-h, 0px) + 1.5rem); }
.rail h3 { font: 400 clamp(1.75rem, 2.4vw, 2.25rem)/1.05 var(--display); }
.rail .cnt { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--accent); }
.rail p:last-child { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.papers { grid-column: 4 / -1; display: flex; flex-direction: column; gap: 2.5rem; isolation: isolate; }

/* Paper depth distinguishes source types; it does not grade a claim's accuracy. */
.paper { position: relative; }
.paper > .core { position: relative; border-radius: 1.25rem; background: var(--core); box-shadow: inset 0 1px 0 var(--core-hi), var(--shadow); padding: clamp(1.5rem, 3vw, 2.5rem); transition: background-color 400ms var(--spring), box-shadow 400ms var(--spring); }
.paper.depth-0 > .core { box-shadow: inset 0 1px 0 var(--core-hi), var(--shadow-low); }
.paper.depth-1::before, .paper.depth-2::before, .paper.depth-2::after { content: ""; position: absolute; inset: 0; border-radius: 1.25rem; background: var(--sheet); box-shadow: var(--shadow-low); z-index: -1; transition: transform 700ms var(--spring); }
/* Sheets sit as a straight stack (no rotation: on a tall card a degree of turn moves the corners by tens of pixels). */
.paper.depth-1::before, .paper.depth-2::before { transform: translate(7px, 7px); }
.paper.depth-2::after { transform: translate(14px, 14px); z-index: -2; }
.paper.depth-2:hover::after { transform: translate(18px, 17px); }
.paper header { display: grid; gap: 0.875rem; justify-items: start; }
.sid { display: flex; justify-content: space-between; width: 100%; gap: 1rem; font: 400 0.75rem var(--mono); color: var(--muted); }
.sid span { color: var(--accent); }
.paper h3 { font: 400 clamp(1.5rem, 2.2vw, 1.875rem)/1.15 var(--display); max-width: 30ch; }
.paper h4 { display: flex; justify-content: space-between; align-items: baseline; margin-top: 2rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--hair-2); font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.paper h4 .n { font-family: var(--mono); letter-spacing: 0; text-transform: none; }
.mirror-note { font-size: 0.8125rem; color: var(--muted); max-width: 40em; }
.source-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.source-type { font: 500 0.8125rem/1.4 var(--sans); color: var(--ink-2); }
.paper .none { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--muted); }

/* The document page as filed, on its own white sheet; the highlight is the video's band, drawn over the clean render. */
.doc { margin: 1.75rem 0 0; }
.sheet { position: relative; background: #fff; border-radius: 0.75rem; box-shadow: inset 0 0 0 1px rgb(27 25 22 / 0.08), 0 1px 2px rgb(27 25 22 / 0.06); overflow: hidden; }
.sheet .page { position: relative; }
.sheet img { display: block; width: 100%; height: auto; }
/* The crop cuts through lines at its edges; they fade into the sheet instead of ending in half a line. */
.sheet .page { -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.hl { position: absolute; background: rgb(245 179 53 / 0.4); mix-blend-mode: multiply; border-bottom: 2px solid #8A5A00; }
.doc figcaption { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.doc figcaption .m { color: var(--accent); }

/* Figures in the long read: a filed page, a licensed photo, or a chart drawn from the episode's own data. */
.prose .fig { margin: 2.25em 0; }
.prose .fig figcaption { display: grid; gap: 0.375rem; margin-top: 0.875rem; font: 400 0.875rem/1.5 var(--sans); color: var(--ink-2); }
.prose .fig .fm { font: 400 0.75rem/1.5 var(--mono); color: var(--muted); }
.prose .fig .fm a { color: var(--accent); }
.evidence-figure { padding-block: 1.5rem; border-block: 1px solid var(--hair-2); }
.figure-title { font: 700 clamp(1.375rem, 2.8vw, 1.75rem)/1.15 var(--display); letter-spacing: -0.015em; margin-bottom: 1.25rem; }
.evidence-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.evidence-items > li { padding-left: 1rem; border-left: 2px solid var(--hair-2); }
.evidence-label { display: block; font: 500 0.75rem/1.4 var(--sans); color: var(--muted); margin-bottom: 0.5rem; }
.evidence-text { font: 400 1.0625rem/1.55 var(--sans); overflow-wrap: anywhere; }
.evidence-text .cite { white-space: normal; }
.evidence-comparison .evidence-items, .evidence-outcomes .evidence-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evidence-comparison .evidence-items > li:last-child { border-color: var(--accent); }
.evidence-comparison .evidence-text { font-size: clamp(1.125rem, 2vw, 1.375rem); }
.evidence-highlight { background: var(--mark-bg); color: inherit; padding: 0.05em 0.12em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.evidence-value { display: block; margin-bottom: 0.625rem; font: 700 clamp(1.75rem, 4vw, 2.5rem)/1.1 var(--display); letter-spacing: -0.015em; }
.evidence-value .cite { font-size: 0.625rem; }
.evidence-bars .evidence-items > li { padding-left: 0; border: 0; }
.evidence-bar { display: block; width: calc(var(--amount) * 100%); height: 0.625rem; margin-block: 0.75rem; border-radius: 2px; background: var(--mark-bg); border-right: 2px solid var(--accent); }
.evidence-timeline .evidence-items, .evidence-flow .evidence-items, .evidence-check .evidence-items { counter-reset: evidence; }
:is(.evidence-timeline, .evidence-flow, .evidence-check) .evidence-items > li { position: relative; counter-increment: evidence; padding-left: 2.75rem; border-left: 0; }
:is(.evidence-timeline, .evidence-flow, .evidence-check) .evidence-items > li::before { content: counter(evidence, decimal-leading-zero); position: absolute; left: 0; top: 0; font: 400 0.8125rem/1.4 var(--mono); color: var(--accent); }
.figure-note { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hair); font: 400 0.9375rem/1.5 var(--sans); color: var(--ink-2); }
.model-assumption { font: 400 0.9375rem/1.5 var(--sans); color: var(--ink-2); }
.model-assumption strong { font-weight: 600; }
.selection-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1.25rem; }
.selection-controls button { min-height: 2.75rem; padding: 0.625rem 1rem; border: 1px solid var(--hair-2); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 0.875rem/1.3 var(--sans); cursor: pointer; }
.selection-controls button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.selection-distribution { margin-top: 1.5rem; }
.selection-distribution svg { display: block; width: 100%; height: auto; overflow: visible; }
.selection-rejected { fill: var(--hair-2); transition: opacity 350ms var(--spring); }
.selection-accepted { fill: var(--accent); }
[data-selection="accepted"] .selection-rejected { opacity: 0.08; }
.chart-axis { fill: none; stroke: var(--muted); stroke-width: 1; }
.axis-label { fill: var(--muted); font: 400 14px var(--mono); }
.selection-axis { display: flex; justify-content: space-between; padding-inline: 5%; font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); }
.selection-axis-title, .selection-y-label { margin-top: 0.5rem; font: 400 0.8125rem/1.5 var(--sans); color: var(--muted); text-align: center; }
.selection-y-label { text-align: left; }
.selection-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1rem; font: 400 0.8125rem/1.4 var(--sans); color: var(--ink-2); }
.selection-legend span::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-right: 0.5rem; background: var(--hair-2); }
.selection-legend .legend-accepted::before { background: var(--accent); }
.selection-status { margin-top: 1rem; font: 500 0.875rem/1.5 var(--sans); }
.selection-summary { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font: 400 0.875rem/1.45 var(--sans); text-align: left; }
.selection-summary caption { text-align: left; font-weight: 500; margin-bottom: 0.75rem; }
.selection-summary th, .selection-summary td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--hair-2); vertical-align: top; }
.selection-summary th { font-weight: 500; }
.selection-summary td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.selection-summary tr > :first-child { padding-left: 0; }
.selection-summary tr > :last-child { padding-right: 0; }
.forecast-horizon { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 0; padding: 0; }
.forecast-horizon > li { padding-top: 1rem; border-top: 2px solid var(--hair-2); }
.forecast-horizon > li:last-child { border-top: 2px dashed var(--accent); }
.forecast-horizon .evidence-text { display: block; }
@media (prefers-reduced-motion: reduce) { .selection-rejected { transition: none; } }
.photo img { display: block; width: 100%; height: auto; border-radius: 0.75rem; }
.chart { padding: 1.5rem; border-radius: 1.25rem; background: var(--core); box-shadow: inset 0 0 0 1px var(--hair); }
.chart ol { list-style: none; margin: 0; padding: 0; }
.chart .rows { display: grid; gap: 1.375rem; }
.chart .bl { margin-bottom: 0.5rem; font: 400 0.8125rem/1.4 var(--mono); color: var(--muted); }
.chart .bars { display: grid; gap: 0.375rem; }
.bar { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0.625rem; font: 400 0.875rem/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: max(3px, calc(var(--v) * 1%)); border-radius: 0.375rem; background: var(--hair-2); transform-origin: left; transition: transform 900ms var(--spring) 250ms; }
.bar.top { color: var(--ink); }
.bar.top::before { background: var(--mark-bg); box-shadow: inset -2px 0 0 var(--accent); }
.bar > span { position: relative; }
.colset { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 1rem; }
.col { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font: 400 0.8125rem/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.col::before { content: ""; order: 1; width: 100%; height: max(2px, calc(var(--v) / 100 * 13rem)); border-radius: 0.375rem 0.375rem 0 0; background: var(--mark-bg); box-shadow: inset 0 2px 0 var(--accent); transform-origin: bottom; transition: transform 900ms var(--spring) 250ms; }
.col.part::before { background: repeating-linear-gradient(135deg, var(--mark-bg) 0 6px, transparent 6px 10px); }
.col .cv { order: 0; color: var(--ink); }
.col .ck { order: 2; min-height: 2.6em; text-align: center; color: var(--muted); }
.col .ck small { display: block; font-size: 0.6875rem; }
.js .chart:not(.in) :is(.bar, .col)::before { transform: scale(0, 1); }
.js .chart.cols:not(.in) .col::before { transform: scale(1, 0); }
@media (prefers-reduced-motion: reduce) { :is(.bar, .col)::before { transition: none; } .js .chart:not(.in) :is(.bar, .col)::before { transform: none; } }
@media (max-width: 48rem) { .chart { padding: 1rem; } .col::before { height: max(2px, calc(var(--v) / 100 * 10rem)); } }

.lines { list-style: none; margin: 0; padding: 0; }
.line { display: grid; grid-template-columns: 3.75rem 1fr; gap: 0.375rem 1rem; padding-block: 1.125rem; border-bottom: 1px solid var(--hair); }
.line:last-child { border-bottom: 0; padding-bottom: 0; }
.line .t { padding-top: 0.3em; }
.said { font: 400 1.125rem/1.55 var(--serif); max-width: 36em; }
.meta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; font-size: 0.8125rem; color: var(--muted); }
.meta .ids { color: var(--ink-2); font-size: 0.75rem; }
.source-context { grid-column: 2; font: 400 0.8125rem/1.6 var(--sans); color: var(--muted); }
.source-context a { text-underline-offset: 0.2em; }
.v.ok::before, .v.open::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 999px; margin-right: 0.45em; vertical-align: 0.08em; }
.v.ok::before { background: var(--ink-2); }
.v.open { color: var(--ink); font-weight: 600; }
.v.open::before { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rep { margin-left: auto; color: var(--muted); }
.more summary { list-style: none; cursor: pointer; padding: 1rem 0 0.25rem 4.75rem; font-size: 0.9375rem; font-weight: 500; color: var(--accent); border-top: 1px solid var(--hair); }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin: 0 0.6em 0.15em 0; border-right: 1.25px solid; border-bottom: 1.25px solid; transform: rotate(45deg); }
.more[open] summary { display: none; }
.more .lines { border-top: 1px solid var(--hair); }

/* Find: papers without a match flatten into the table; a sentence is marked only where its words match. */
/* During a search, sources without a match leave the page; the match you stepped to is ringed. */
.finding :is(.paper.miss, .group.miss, .line.miss) { display: none; }
.line.current { box-shadow: 0 0 0 2px var(--brand); border-radius: 0.75rem; background: var(--bg); padding-inline: 0.875rem; margin-inline: -0.875rem; }
.line.hit .said span { background: linear-gradient(transparent 58%, var(--mark-bg) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.onscreen { grid-column: 2; font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); }
.onscreen span { color: var(--ink); background: linear-gradient(transparent 58%, var(--mark-bg) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Transcript and corrections ---------- */
.script h3 { display: grid; grid-template-columns: 4rem 1fr; font: 400 1.625rem/1.15 var(--display); margin: 3rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--hair); }
.script h3 .t { padding-top: 0.45em; }
.tx { list-style: none; margin: 0; padding: 0; }
.tx li { display: grid; grid-template-columns: 4rem 1fr; padding-block: 0.4rem; }
.tx li .t { padding-top: 0.35em; }
.tx p { font: 400 1.0625rem/1.6 var(--serif); }
.refs { font: 400 0.6875rem var(--mono); white-space: nowrap; }
.refs a { color: var(--muted); text-decoration: none; }
.refs a:hover { color: var(--accent); }
.corrections { border-top: 1px solid var(--hair); }
.corrections .count { margin-top: 1rem; color: var(--accent); }
.corrections .empty { margin-top: 1.5rem; font: 400 1.75rem/1.2 var(--display); }
.corrections .how { margin-top: 1.5rem; color: var(--muted); }
.log { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.log li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.25rem 1rem; padding-block: 0.875rem; border-top: 1px solid var(--hair); }
.log time { font: 400 0.875rem var(--mono); color: var(--accent); }
.log .ids { grid-column: 2; font-size: 0.8125rem; color: var(--muted); }

/* ---------- Sources index, about, contact ---------- */
.src-list { display: grid; gap: 1.25rem; }
.src-row { text-decoration: none; }
.src-row .core { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.src-row h2 { font: 400 clamp(2rem, 3.6vw, 3rem)/1.02 var(--display); }
.src-meta { margin-top: 0.875rem; }
.src-row .m { font-size: 0.8125rem; color: var(--muted); }
.src-row .btn-ic { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--ink); color: var(--bg); transition: transform 500ms var(--spring); }
.src-row .btn-ic svg { width: 1.25rem; }
.src-row:hover .btn-ic { transform: translate(2px, -2px) scale(1.06); }
.ranks { margin: 2rem 0 0; }
.ranks div { display: grid; grid-template-columns: 15rem 1fr; gap: 0.25rem 1.5rem; padding-block: 1.125rem; border-top: 1px solid var(--hair); }
.ranks dt { font-weight: 500; }
.ranks dt .m { color: var(--accent); margin-right: 0.5rem; }
.ranks dd { margin: 0; color: var(--muted); }
.fine { margin-top: 1.5rem; color: var(--muted); max-width: 40em; }
.about { display: grid; }
.about-part { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem 2rem; padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--hair); }
.about-part:first-child { border-top: 0; }
.about-h { grid-column: 1 / span 4; }
.about-t { grid-column: 5 / -1; font: 400 1.1875rem/1.65 var(--serif); }
.about-t p { max-width: 36em; }
.about-t p + p { margin-top: 1.25em; }
.about-t .method { font: 400 1rem/1.6 var(--sans); }
.about-t .method li { grid-column: span 6 !important; }
.about-t .ranks { margin: 0; font: 400 1rem/1.6 var(--sans); }
.about-t .ranks div:first-child { border-top: 0; padding-top: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.contact-card { min-width: 0; }
.contact-card:nth-child(1) { grid-column: 1 / span 7; }
.contact-card:nth-child(2) { grid-column: 8 / -1; }
.contact-card:nth-child(3) { grid-column: 1 / -1; }
.contact-card h2 { font: 400 clamp(1.75rem, 2.8vw, 2.5rem)/1.05 var(--display); }
.contact-card p { margin: 1rem 0 1.75rem; color: var(--muted); max-width: 36em; }

/* ---------- Report form ---------- */
.err { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--mark-bg); }
.err ul { margin-bottom: 0; padding-left: 1.25rem; }
.report-state { padding: 1rem 1.25rem; background: var(--core); border-left: 3px solid var(--accent); margin-bottom: 1.5rem; font-size: 0.9375rem; }
.field-error { color: var(--ink); font-size: 0.875rem; padding-left: 0.75rem; border-left: 2px solid var(--accent); }
.policy { margin-inline: auto; }
.form .core { display: grid; gap: 0.5rem; }
.form fieldset { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.form legend, .form label:not(.choice) { font-weight: 500; font-size: 0.9375rem; }
.form legend { margin-bottom: 0.75rem; }
.form label:not(.choice) { margin-top: 1.25rem; display: block; }
.choice { display: flex; gap: 0.875rem; align-items: center; padding: 0.875rem 1.125rem; border-radius: 999px; cursor: pointer; background: var(--shell); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow 400ms var(--spring), background-color 400ms var(--spring); }
.choice:has(input:checked) { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink); }
.choice input { accent-color: var(--ink); width: 1.1rem; height: 1.1rem; margin: 0; }
.subject-note { display: none; }
fieldset:has(input[value="subject"]:checked) .subject-note { display: block; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.row label { margin-top: 0 !important; }
.form :is(input:not([type="radio"]), select, textarea) { font: 400 1rem/1.5 var(--sans); color: var(--ink); background: var(--bg); width: 100%; border: 0; border-radius: 1rem; box-shadow: inset 0 0 0 1px var(--hair-2); padding: 0.75rem 1rem; margin-top: 0.5rem; transition: box-shadow 300ms var(--spring); }
.form #claim { font-family: var(--mono); }
.form textarea { resize: vertical; }
.form :is(input, select, textarea):focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.form :is(input, textarea):user-invalid { box-shadow: inset 0 0 0 1.5px #B3261E; }
.opt { font-weight: 400; color: var(--muted); }
.hint { font-size: 0.875rem; color: var(--muted); margin-top: 0.5rem; }
.form button { justify-self: start; margin-top: 1.5rem; }
.form button:disabled { opacity: 0.5; cursor: progress; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--hair); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr); gap: 2.5rem 2rem; padding-block: clamp(4rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.foot-promise { margin-top: 1rem; font: 400 1.5rem/1.2 var(--display); max-width: 18em; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.foot-links a { text-decoration: none; color: var(--muted); }
.foot-links a:hover { color: var(--ink); }

/* ---------- Below 768px: one column, no angles, no overlaps ---------- */
@media (max-width: 48rem) {
  main { padding-top: 5rem; }
  .nav ul { display: none; }
  .nav-pill { padding-left: 1rem; }
  .nav .home { margin-right: 1rem; }
  html:not(.js) .native-nav { display: block; position: relative; }
  .native-nav > summary { font: 500 0.875rem/1 var(--sans); cursor: pointer; padding: 0.875rem; }
  .nav .native-nav ul { display: grid; position: absolute; right: 0; top: calc(100% + 0.75rem); min-width: 12rem; padding: 0.75rem; border-radius: 1rem; background: var(--core); box-shadow: var(--shadow); border: 1px solid var(--hair-2); }
  .nav .native-nav:not([open]) ul { display: none; }
  .hero-objects { display: none; }
  .hero .display { font-size: clamp(2.75rem, 11vw, 4rem); }
  .story-grid, .method-summary { grid-template-columns: 1fr; }
  .source-starts ol { grid-template-columns: 1fr; }
  .story-followup-inner { margin-left: 0; }
  .hero, .s-hero, .bento, .method, .band-grid, .s-body, .group, .about-part, .contact-grid, .foot-grid { grid-template-columns: 1fr; }
  .hero > *, .s-hero > *, .bento > *, .method li, .band-grid > *, .s-body > *, .group > *, .about-part > *, .contact-grid > *, .foot-grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hero { min-height: 0; padding-block: 2.5rem 4rem; }
  .cascade { height: auto; display: grid; gap: 1rem; }
  .cascade:has(.c-house) { height: auto; }
  .cascade > * { position: static; transform: none !important; width: 100%; }
  .c-ep .btn-ic { position: static; margin-top: 1.25rem; }
  .toc { position: static; }
  .toc ol { margin-bottom: 1.25rem; }
  .toc-contents { border-block: 1px solid var(--hair-2); margin-bottom: 1.25rem; }
  .toc-contents > summary { margin: 0; padding-block: 0.875rem; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }
  .watch-details { margin-left: 0; }
  .watch-body { grid-template-columns: 1fr; }
  .story-hero .s-title { font-size: clamp(2.75rem, 11.5vw, 4rem); }
  .story-hero { padding-bottom: 1.5rem; }
  .s-body { gap: 1.5rem; }
  .evidence-comparison .evidence-items, .evidence-outcomes .evidence-items { grid-template-columns: 1fr; }
  .forecast-horizon { grid-template-columns: 1fr; }
  .selection-summary { font-size: 0.8125rem; }
  .draft { border-radius: 1rem; }
  .rail { position: static; }
  .ix-long, .find-key { display: none; }
  .find-res:not([hidden]) { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .index-panel { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; width: auto; margin-top: 0.5rem; }
  .line { grid-template-columns: 1fr; }
  .line .t, .meta, .onscreen, .source-context { grid-column: 1; }
  .more summary { padding-left: 0; }
  .tx li, .script h3 { grid-template-columns: 3.25rem 1fr; }
  .row { grid-template-columns: 1fr; }
  .row > div + div { margin-top: 1rem; }
  .ranks div, .log li { grid-template-columns: 1fr; }
  .log .ids { grid-column: 1; }
  .src-row .core { flex-direction: column; align-items: flex-start; }
  .paper.depth-1::before, .paper.depth-2::before, .paper.depth-2::after { transform: translateY(6px) scaleX(0.97); }
  .paper.depth-2::after { transform: translateY(12px) scaleX(0.94); }
  /* A document page keeps a readable size and scrolls sideways inside its sheet. */
  .sheet { overflow-x: auto; overscroll-behavior-x: contain; }
  .doc .page { width: 210%; }
  .doc:has(.sheet)::before { content: "Swipe the document sideways to read the full width"; display: block; margin-bottom: 0.5rem; font: 400 0.75rem/1.5 var(--sans); color: var(--muted); }
  .prose { font-size: 1.125rem; }
}
@media (min-width: 48.0625rem) { .burger { display: none !important; } }

/* ---------- Display weight: Archivo Narrow exists only in Bold, and it has no italic ---------- */
:is(.display, .h1, .h2, .core-line, .prose h2, .pull p, .band-line, .takeaway-text, .c-core, .ep-core, .stat-n, .count-n, .rank-n, .method h3, .rail h3, .paper h3, .src-row h2, .contact-card h2, .card-h, .band-h, .foot-promise, .script h3, .corrections .empty, .menu a) { font-weight: 700; letter-spacing: -0.02em; }
:is(.display, .h1, .h2) em { font-style: normal; }
.pull p { font-style: normal; }
.prose { font-size: 1.125rem; line-height: 1.7; }
.said, .tx p { font-size: 1.0625rem; }
.prose .opening::first-letter { font-weight: 700; }