/* conv. — editorial, paper-and-ink, data-forward */
:root {
  color-scheme: light dark;
  --paper: #f6f3ec;
  --paper-2: #efeadf;
  --ink: #17130d;
  --ink-soft: #4c463b;
  --dim: #8a8375;
  --line: #ddd6c8;
  --accent: #bf3a1b;
  --accent-soft: rgba(191, 58, 27, 0.12);
  --pulse-bg: #17130d;
  --pulse-fg: #f6f3ec;
  --pulse-line: rgba(246, 243, 236, 0.16);
  --analysis-bg: #e8e2f2;
  --analysis-fg: #5b4a8a;
  --tag-l: 36%;
  --tag-s: 58%;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Spline Sans', -apple-system, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;

  /* Nine sizes, no more. Every rule below picks one of these. */
  --t-micro: 0.6875rem;
  --t-label: 0.75rem;
  --t-small: 0.8125rem;
  --t-base: 0.9375rem;
  --t-mid: 1.0625rem;
  --t-lg: 1.3125rem;
  --t-quote: 1.45rem;
  --t-display: clamp(2.4rem, 4.4vw, 3.6rem);
  --t-mast: clamp(3.5rem, 9vw, 7rem);

  /* Display weights. Dark theme sheds ~40 to hold the same colour. */
  --w-mast: 900;
  --w-display: 700;
}

/* Deliberate dark theme — warm black, not inverted light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161310;
    --paper-2: #201c17;
    --ink: #ece7db;
    --ink-soft: #b9b2a2;
    --dim: #7d766a;
    --line: #322d26;
    --accent: #ff6a3c;
    --accent-soft: rgba(255, 106, 60, 0.13);
    --pulse-bg: #0e0c09;
    --pulse-fg: #ece7db;
    --pulse-line: rgba(236, 231, 219, 0.14);
    --analysis-bg: #292338;
    --analysis-fg: #b3a3e0;
    --tag-l: 68%;
    --tag-s: 55%;
    --w-mast: 860;
    --w-display: 660;
  }
  :root:not([data-theme="light"]) body { -webkit-font-smoothing: antialiased; }
}
:root[data-theme="dark"] {
    --paper: #161310;
    --paper-2: #201c17;
    --ink: #ece7db;
    --ink-soft: #b9b2a2;
    --dim: #7d766a;
    --line: #322d26;
    --accent: #ff6a3c;
    --accent-soft: rgba(255, 106, 60, 0.13);
    --pulse-bg: #0e0c09;
    --pulse-fg: #ece7db;
    --pulse-line: rgba(236, 231, 219, 0.14);
    --analysis-bg: #292338;
    --analysis-fg: #b3a3e0;
    --tag-l: 68%;
    --tag-s: 55%;
    --w-mast: 860;
    --w-display: 660;
}
:root[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: auto;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.dim { color: var(--dim); }

/* ── Two mono roles, and only two ─────────── */
.mono, .rail-head, .topics a, .thread-link, .page-link, .back-link, .coverage-more a {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.07em;
}
.stat, .chip, .chip-count, .coverage-meta, .tl-kind, .topic-tag, .life, .chart-tick,
.pulse-label, .pulse-peak, .pulse-anchors, .rail-note, .rail-count,
.tl-when, .tl-quote figcaption, .voice-meta, .tt-day span {
  font-family: var(--mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}

/* ── Masthead ─────────────────────────────── */
.masthead { border-bottom: 2px solid var(--ink); padding: 18px 0 0; }
.masthead-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; color: var(--dim); }
.nameplate { display: grid; grid-template-columns: auto 1fr; align-items: last baseline; column-gap: 28px; }
.wordmark {
  font-family: var(--serif); font-size: var(--t-mast);
  font-variation-settings: 'opsz' 144, 'wght' var(--w-mast);
  letter-spacing: -0.045em; line-height: 0.86; text-wrap: balance;
}
.wordmark .mark { color: var(--accent); }
.wordmark.small { font-size: 1.5rem; font-variation-settings: 'opsz' 48, 'wght' 800; letter-spacing: -0.03em; line-height: 1; }
.tagline {
  justify-self: end; text-align: right; max-width: 22ch; margin: 0 0 4px;
  font-family: var(--serif); font-style: italic; font-size: var(--t-label);
  font-variation-settings: 'opsz' 72, 'WONK' 1; color: var(--ink-soft);
}
.topics { display: flex; gap: 2px; flex-wrap: wrap; margin: 12px -12px 0; }
.topics a {
  text-transform: uppercase; padding: 8px 12px;
  border-bottom: 3px solid transparent; margin-bottom: -2px; color: var(--ink-soft);
}
.topics a.active, .topics a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.masthead.compact { padding: 12px 0; border-bottom-width: 1px; }
.masthead.compact .wrap { display: flex; justify-content: space-between; align-items: baseline; }
.back-link { color: var(--dim); text-transform: uppercase; }
.back-link:hover { color: var(--accent); }

/* ── Pulse strip ──────────────────────────── */
.pulse { background: var(--pulse-bg); color: var(--pulse-fg); padding: 14px 0 18px; }
.pulse-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pulse-label { text-transform: uppercase; letter-spacing: 0.16em; color: var(--pulse-fg); opacity: 0.55; }
.pulse-anchors { display: flex; gap: 8px; color: var(--pulse-fg); opacity: 0.4; }
.pulse-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.pulse-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pulse-cell:hover .pulse-title { color: #fff; }
.pulse-title {
  font-size: var(--t-small); line-height: 1.3; min-height: calc(2 * 1.3em); color: var(--pulse-fg);
  opacity: 0.78; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pulse-peak { color: var(--pulse-fg); opacity: 0.42; }
.pulse .bar { fill: #ff6a3c; }
.pulse .chart-zero { stroke: var(--pulse-line); }

/* ── Charts ───────────────────────────────── */
.spark { display: block; max-width: 100%; height: auto; }
.bar { fill: var(--accent); }
.chart-zero { stroke: var(--line); stroke-width: 1; }
.chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-hit { fill: transparent; }
.chart-hit:hover { fill: var(--accent-soft); }
.chart-peak-dot { fill: var(--ink); }
.chart-figure { margin: 0; }
.chart-plot { position: relative; }
.chart-peak {
  position: absolute; transform: translateY(-100%); white-space: nowrap;
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.04em;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.activity-chart { display: block; width: 100%; height: auto; }
.chart-axis { position: relative; height: 15px; margin-top: 2px; }
.chart-tick { position: absolute; white-space: nowrap; color: var(--ink-soft); }
.chart-empty { color: var(--dim); font-style: italic; padding: 20px 0; }
.chart-section { margin: 24px 0 10px; }

/* ── Home grid ────────────────────────────── */
.home-grid { display: grid; grid-template-columns: 1fr 280px; gap: 40px; padding-top: 26px; }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
.card { padding: 20px 0; border-bottom: 1px solid var(--line); }
.card-lead { border-bottom: 2px solid var(--ink); padding-bottom: 26px; margin-bottom: 6px; }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; min-height: 1.2em; }
.card-top-left { display: flex; gap: 10px; align-items: baseline; }

.headline {
  font-family: var(--serif); font-size: var(--t-lg);
  font-variation-settings: 'opsz' 32, 'wght' 620;
  letter-spacing: -0.004em; line-height: 1.18; text-wrap: balance;
}
.card-lead .headline, .headline.xl {
  font-size: var(--t-display);
  font-variation-settings: 'opsz' 120, 'wght' var(--w-display);
  letter-spacing: -0.024em; line-height: 1.06;
}
.headline.xl { margin: 10px 0; }
.headline a:hover { color: var(--accent); }

.dek {
  color: var(--ink-soft); font-size: var(--t-base); line-height: 1.45; max-width: 58ch;
  margin-top: 8px; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-lead .dek { font-size: var(--t-mid); max-width: 48ch; line-height: 1.35; -webkit-line-clamp: 3; }
.dek.xl {
  font-size: var(--t-mid); max-width: 48ch; line-height: 1.35;
  font-family: var(--serif); font-style: italic; display: block; overflow: visible;
}
.card-activity { display: flex; align-items: center; gap: 16px; margin: 12px 0 4px; flex-wrap: wrap; }
.meta-line { display: flex; gap: 0; flex-wrap: wrap; }
.stat { color: var(--dim); }
.meta-line .stat + .stat { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); }

.life { text-transform: uppercase; color: var(--dim); }
.life-new { color: var(--accent); }
.life-dev { color: var(--ink-soft); }

/* Topic tags carry their own hue, one lightness token for both themes. */
.topic-tag {
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--tag, var(--accent)); border: 1px solid currentColor;
  padding: 1px 7px; border-radius: 10px; white-space: nowrap;
}
.topic-world { --tag: hsl(14 var(--tag-s) var(--tag-l)); }
.topic-politics { --tag: hsl(350 var(--tag-s) var(--tag-l)); }
.topic-business { --tag: hsl(38 var(--tag-s) var(--tag-l)); }
.topic-tech { --tag: hsl(205 var(--tag-s) var(--tag-l)); }
.topic-ai { --tag: hsl(262 var(--tag-s) var(--tag-l)); }
.topic-science { --tag: hsl(188 var(--tag-s) var(--tag-l)); }
.topic-health { --tag: hsl(162 var(--tag-s) var(--tag-l)); }
.topic-climate { --tag: hsl(132 var(--tag-s) var(--tag-l)); }
.topic-environment { --tag: hsl(104 var(--tag-s) var(--tag-l)); }
.topic-security { --tag: hsl(300 var(--tag-s) var(--tag-l)); }
.topic-crime { --tag: hsl(324 var(--tag-s) var(--tag-l)); }
.topic-education { --tag: hsl(228 var(--tag-s) var(--tag-l)); }
.topic-sports { --tag: hsl(76 var(--tag-s) var(--tag-l)); }
.topic-culture { --tag: hsl(286 var(--tag-s) var(--tag-l)); }

.chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.chips.compact { gap: 3px; }
.chip { color: var(--ink-soft); display: inline-flex; align-items: center; gap: 5px; }
.chip i, .chips.compact i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.chip-count { color: var(--dim); margin-left: 6px; }
.src-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-top: 6px; }

/* Pull quote on the lead card: no rule, no box — the type carries it. */
.card-quote {
  font-family: var(--serif); font-size: var(--t-quote); font-style: italic;
  font-variation-settings: 'opsz' 72, 'wght' 400, 'WONK' 1;
  line-height: 1.24; color: var(--ink); max-width: 34ch;
  text-indent: -0.42em; margin: 18px 0 14px; text-wrap: pretty;
}
.card-quote cite {
  display: block; font-family: var(--mono); font-style: normal; font-size: var(--t-micro);
  letter-spacing: 0.06em; text-indent: 0; margin-top: 10px; color: var(--ink-soft);
}
.people-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: var(--t-base); }
.person b { font-family: var(--serif); font-variation-settings: 'opsz' 24, 'wght' 620; letter-spacing: 0; }
/* Names read as names, not as links, until you reach for one. */
.person-link, .person-card b a { color: inherit; text-decoration: none; }
.person-link:hover, .person-link:focus-visible, .person-card b a:hover, .person-card b a:focus-visible {
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

.pager { display: flex; align-items: baseline; gap: 20px; padding: 26px 0 10px; border-top: 1px solid var(--line); }
.page-link { text-transform: uppercase; color: var(--accent); }
.page-link:hover { text-decoration: underline; }

/* ── Section heads ────────────────────────── */
.rail-head {
  font-family: var(--mono); font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: 0.16em; font-weight: 600; color: var(--ink); text-wrap: balance;
  border-bottom: 1px solid var(--ink); padding-bottom: 6px; margin-bottom: 14px;
}
.rail-note, .rail-count { color: var(--dim); text-transform: none; letter-spacing: 0.06em; font-weight: 500; }
.rail-count { float: right; }

/* ── Threads rail ─────────────────────────── */
.threads-rail { border-left: 1px solid var(--line); padding-left: 28px; padding-top: 20px; }
.thread-block { margin-bottom: 26px; }
.thread-title {
  font-family: var(--serif); font-size: var(--t-mid);
  font-variation-settings: 'opsz' 24, 'wght' 620; letter-spacing: 0;
  line-height: 1.2; text-wrap: balance; display: block;
}
.thread-title:hover { color: var(--accent); }
.thread-summary { font-size: var(--t-small); color: var(--dim); margin: 5px 0 9px; text-wrap: pretty; }
.thread-dateline { display: block; color: var(--dim); margin: 5px 0 9px; }
.thread-stories { list-style: none; }
.thread-stories li { font-size: var(--t-small); line-height: 1.35; padding: 5px 0; border-top: 1px dotted var(--line); }
.thread-stories a:hover { color: var(--accent); }

/* ── Imagery ──────────────────────────────────
   One picture per story and a face beside a name — no more. Frames are quiet:
   a hairline, a 3px corner, and the picture does the talking. */
.hero { margin: 0; }
/* No frame until the picture has painted. A blocked hotlink or a stalled load
   never reports an error, so the frame waits for success rather than failure. */
.hero.pending { display: none; }
.hero img {
  display: block; width: 100%; height: auto; object-fit: cover;
  border: 1px solid var(--line); border-radius: 3px; background: var(--paper-2);
}
.hero figcaption {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em;
  color: var(--dim); margin-top: 7px;
}

/* Lead card: the picture sits beside the headline, never above it, on a wide screen,
   and runs the full height of the words so the block reads as one rectangle. */
.lead-body { display: grid; grid-template-columns: 1fr minmax(0, 40%); gap: 12px 30px; align-items: stretch; }
.lead-text { min-width: 0; }
.hero-lead { display: flex; }
.hero-lead img { height: 100%; min-height: 190px; max-height: 340px; aspect-ratio: 16 / 10; }

/* Story page: a band under the dek, wide enough to read as a photograph and
   short enough that the timeline is still the point of the page. */
.hero-story { max-width: 800px; margin: 22px 0 4px; }
/* The frame publishers compose for social cards is 1200x630, and several bake a
   logo into its bottom edge. Show that frame whole: a crop that slices a
   watermark in half reads as a bug, not as a photograph. */
.hero-story img { aspect-ratio: 1200 / 630; max-height: 440px; }

.portrait {
  display: block; width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--line); background: var(--paper-2);
}
.person-card.with-portrait { display: grid; grid-template-columns: 36px 1fr; column-gap: 11px; }
.person-card.with-portrait > * { grid-column: 2; }
.person-card.with-portrait > .portrait { grid-column: 1; grid-row: 1 / span 3; margin-top: 3px; }
.person-head.with-portrait { display: grid; grid-template-columns: 72px 1fr; column-gap: 20px; align-items: start; }
.person-head > .portrait { width: 72px; height: 72px; margin-top: 6px; }

/* ── Story page ───────────────────────────── */
.story-page, .thread-page, .about-page { padding-top: 26px; }
.story-head { max-width: 800px; }
.story-meta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.thread-link { color: var(--accent); }
.thread-link:hover { text-decoration: underline; }

.story-cols {
  display: grid; grid-template-columns: 1fr 320px; grid-template-rows: min-content 1fr;
  gap: 0 48px; margin-top: 14px; align-items: start;
}
.story-lede { grid-column: 1; grid-row: 1; }
.story-rail { grid-column: 2; grid-row: 1 / span 2; padding-top: 4px; }
.story-main { grid-column: 1; grid-row: 2; }
.story-solo { max-width: 780px; margin-top: 14px; }

.provenance {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.04em;
  color: var(--dim); border-left: 2px solid var(--line); padding-left: 12px; margin: 18px 0;
}
.story-summary { font-size: var(--t-mid); line-height: 1.6; margin: 18px 0; max-width: 64ch; text-wrap: pretty; }
.key-points { margin: 0 0 22px 0; list-style: none; max-width: 64ch; }
.key-points li { padding: 6px 0 6px 22px; position: relative; font-size: var(--t-base); text-wrap: pretty; }
.key-points li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }

/* ── Timeline ─────────────────────────────────
   One column hung off a spine. Every beat is a block, so nothing can clip or
   collide as the column narrows: the header line wraps, the spine does not move. */
.timeline-section { margin: 34px 0; }
.spine { --pad: 22px; --dot: 7px; list-style: none; position: relative; padding-left: var(--pad); }
.spine::before { content: ''; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.spine > li { position: relative; }
/* Marker on the spine, aligned to the first line of the row it belongs to. Every row
   variant below tunes it through these variables, so nothing has to out-specify it. */
.spine > li::before {
  content: ''; position: absolute; box-sizing: border-box;
  left: calc(4.5px - var(--pad) - var(--dot) / 2);
  top: var(--dot-top, 7px);
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--dot-bg, var(--paper)); border: 1px solid var(--dot-line, var(--dim));
}

.timeline { max-width: 68ch; }
.tl-beat { padding: 3px 0 6px; }
.tl-event { --dot-bg: var(--ink); --dot-line: var(--ink); }
.tl-reaction { --dot-bg: var(--accent); --dot-line: var(--accent); }
.tl-analysis { --dot-bg: var(--analysis-fg); --dot-line: var(--analysis-fg); }

.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
.tl-when { color: var(--dim); white-space: nowrap; }
.tl-kind { text-transform: uppercase; padding: 1px 8px; border-radius: 9px; white-space: nowrap; }
.tl-kind-event { background: var(--ink); color: var(--paper); }
.tl-kind-report { background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-soft); }
.tl-kind-reaction { background: var(--accent-soft); color: var(--accent); }
.tl-kind-analysis { background: var(--analysis-bg); color: var(--analysis-fg); }
.tl-label {
  font-family: var(--serif); font-size: var(--t-mid); font-variation-settings: 'opsz' 24, 'wght' 620;
  letter-spacing: 0; line-height: 1.25; text-wrap: balance; flex: 1 1 16ch; min-width: 0;
}
.tl-detail { font-size: var(--t-small); color: var(--ink-soft); margin-top: 4px; max-width: 62ch; text-wrap: pretty; }

/* A line someone actually said, inside the beat it belongs to. */
.tl-quote { margin: 11px 0 3px; padding: 1px 0 1px 14px; border-left: 2px solid var(--accent); max-width: 54ch; }
.tl-quote p {
  font-family: var(--serif); font-style: italic; font-size: var(--t-base); line-height: 1.4;
  font-variation-settings: 'opsz' 48, 'WONK' 1; text-indent: -0.4em; text-wrap: pretty;
}
.tl-quote figcaption { color: var(--dim); margin-top: 6px; }
.tl-quote figcaption b { color: var(--ink-soft); font-weight: 500; }
.tl-quote a { color: var(--accent); }
.tl-quote a:hover { text-decoration: underline; }

/* A quiet stretch breaks the spine rather than drawing through it. */
.tl-break { display: flex; align-items: center; margin: 24px 0; }
.spine > li.tl-break::before {
  left: calc(-4px - var(--pad)); top: -10px; bottom: -10px;
  width: 17px; height: auto; border: 0; border-radius: 0; background: var(--paper);
}
.tl-break span {
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim);
  font-family: var(--mono); font-size: var(--t-micro); padding-right: 10px;
}
.tl-break::after { content: ''; flex: 1; border-top: 1px dashed var(--line); }

/* Quotes */
.quotes-section { margin: 34px 0; }
.quote-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.quote { border-top: 1px solid var(--ink); padding: 16px 0 0; }
.quote p {
  font-family: var(--serif); font-style: italic; font-size: var(--t-mid); line-height: 1.4;
  font-variation-settings: 'opsz' 72, 'WONK' 1; text-indent: -0.42em; text-wrap: pretty;
}
.quote-big p { font-size: var(--t-quote); line-height: 1.24; }
.quote cite { display: block; font-family: var(--mono); font-style: normal; font-size: var(--t-micro); letter-spacing: 0.05em; margin-top: 12px; color: var(--ink-soft); }

/* Voices — the crowd, one person at a time, each linking back to where they said it. */
.voices-section { margin: 34px 0; }
.voices { list-style: none; max-width: 68ch; }
.voice { padding: 14px 0 16px; border-top: 1px dotted var(--line); }
.voice:first-child { border-top: none; padding-top: 2px; }
.voice-text { font-size: var(--t-base); line-height: 1.5; text-wrap: pretty; }
.voice-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin-top: 8px; color: var(--dim);
}
.voice-meta b { color: var(--ink-soft); font-weight: 500; }
.voice-src { display: inline-flex; align-items: baseline; gap: 6px; }
.voice-src .src-dot { margin-top: 0; align-self: center; }
.voice-link { color: var(--accent); margin-left: auto; white-space: nowrap; }
.voice-link:hover { text-decoration: underline; }

/* Thread timeline — the same spine, one story per beat. */
.thread-timeline { max-width: 760px; }
.tt-day { --dot: 9px; --dot-top: 4px; margin: 26px 0 6px; }
.tt-day:first-child { margin-top: 2px; }
.tt-day span { text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); }
.tt-story { --dot-bg: var(--accent); --dot-line: var(--accent); --dot-top: 22px; padding: 12px 0 18px; }
/* Tag and lifecycle read as one label here; the card grid spreads them, a timeline row should not. */
.tt-story .card-top { justify-content: flex-start; gap: 10px; margin-bottom: 6px; }
.tt-story .headline a:hover { color: var(--accent); }
.tt-story .card-activity { margin: 10px 0 0; gap: 14px; }
.tt-story .chips { margin-top: 0; }

/* Coverage */
.story-rail section, .coverage-section, .narrative-section { margin-bottom: 30px; }
.person-card { padding: 10px 0; border-top: 1px dotted var(--line); }
.person-card b { display: block; font-family: var(--serif); font-size: var(--t-mid); font-variation-settings: 'opsz' 24, 'wght' 620; letter-spacing: 0; }
.person-card .dim { font-size: var(--t-micro); font-family: var(--mono); letter-spacing: 0.05em; }
.person-card p { font-size: var(--t-small); color: var(--ink-soft); margin-top: 4px; text-wrap: pretty; }
.coverage { list-style: none; }
.coverage-item { display: flex; gap: 9px; padding: 8px 0; font-size: var(--t-small); line-height: 1.35; border-top: 1px dotted var(--line); }
.coverage-item a:hover { color: var(--accent); }
.coverage-meta { display: block; color: var(--dim); margin-top: 3px; }
.coverage-more { margin-top: 12px; }
.coverage-more a { color: var(--accent); text-transform: uppercase; }
.coverage-more a:hover { text-decoration: underline; }
/* Full width when coverage is the article, not the rail. */
.story-solo .coverage-item { font-size: var(--t-base); padding: 10px 0; }

/* About */
.about-page { max-width: 760px; }
.about-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 20px 0 34px; }
.about-stats .stat { color: var(--dim); }
.about-stats .stat + .stat { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); }
.about-body h2 { margin-top: 34px; }
.about-body p { margin-bottom: 14px; max-width: 64ch; text-wrap: pretty; }

/* Footer */
.site-footer { border-top: 2px solid var(--ink); margin-top: 60px; padding: 18px 0 40px; }
.site-footer .wrap { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; font-size: var(--t-small); color: var(--dim); }
.footer-link { margin-left: auto; font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.footer-link:hover { color: var(--accent); }
.empty { padding: 60px 0; color: var(--dim); font-style: italic; }
.empty a { color: var(--accent); text-decoration: underline; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 960px) {
  .home-grid { grid-template-columns: 1fr; }
  /* Source order becomes lede → coverage → timeline, so the record is not buried. */
  .story-cols { grid-template-columns: 1fr; }
  .story-cols { grid-template-rows: auto; }
  .story-lede, .story-rail, .story-main { grid-column: 1; grid-row: auto; }
  .story-rail { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 10px; }
  .threads-rail { border-left: none; padding-left: 0; border-top: 1px solid var(--line); }
  .pulse-row { grid-template-columns: repeat(3, 1fr); }
  .quote-wall { grid-template-columns: 1fr; }
  .nameplate { grid-template-columns: 1fr; }
  .tagline { justify-self: start; text-align: left; margin-top: 6px; }
}
@media (max-width: 860px) {
  .card-grid { grid-template-columns: 1fr; }
}
/* Day ticks thin out rather than collide when the chart narrows. */
@media (max-width: 780px) {
  .chart-tick:nth-child(even) { display: none; }
}
@media (max-width: 480px) {
  .chart-tick { display: none; }
  .chart-tick:nth-child(4n + 1) { display: block; }
}
/* One scrolling row of topics instead of three stacked ones. The negative margin
   bleeds it to the screen edges; the padding keeps the first label on the text edge. */
@media (max-width: 700px) {
  .topics {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    margin: 10px -24px 0; padding: 0 14px;
  }
  .topics::-webkit-scrollbar { display: none; }
  .topics a { flex: 0 0 auto; padding: 7px 10px; margin-bottom: 0; border-bottom-width: 2px; }
}
/* Below this the picture beside the headline is a stamp, not a photograph, so it
   goes above the words instead. */
@media (max-width: 720px) {
  .lead-body { grid-template-columns: 1fr; }
  .hero-lead { order: -1; }
  .hero-lead img { margin-top: 0; }
  .person-head.with-portrait { grid-template-columns: 56px 1fr; column-gap: 14px; }
  .person-head > .portrait { width: 56px; height: 56px; }
}
@media (max-width: 600px) {
  .pulse-row { grid-template-columns: repeat(2, 1fr); }
  .pulse-anchors { display: none; }
  /* Room for a third line rather than cutting a headline mid-word. */
  .pulse-title { -webkit-line-clamp: 3; }
  .spine { --pad: 18px; }
  .card-activity { gap: 10px; }
  /* The permalink drops under the byline instead of squeezing it. */
  .voice-link { margin-left: 0; flex: 1 0 100%; }
  /* A long narrative name should not squeeze the topic and lifecycle onto three lines. */
  .card-top { flex-wrap: wrap; }
  .card-top .thread-link { flex: 1 0 100%; margin-top: 4px; }
  /* Names carry the card on a small screen; the roles are ink we can spend elsewhere.
     Scoped to roles inside a person — the trailing "+2" is itself a .person.dim. */
  .people-row .person .dim { display: none; }
}

/* ── Theme toggle ─────────────────────────── */
#theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
#theme-toggle:hover { transform: scale(1.08); border-color: var(--accent); color: var(--accent); }