/* ─────────────────────────────────────────────────────────────────────────────
   THE PARALLAX — house style sheet.
   Set in Playfair Display (display), Newsreader (text), Archivo (furniture),
   IBM Plex Mono (documents). One plate of ink on newsprint.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* paper & ink */
  --paper:        #f3efe4;
  --paper-2:      #ece7d8;
  --paper-3:      #e3ddcb;
  --plate:        #ebe5d5;
  --ink:          #16120e;
  --ink-2:        #443c33;
  --ink-3:        #6d6355;
  --ink-4:        #7a7060;
  --rule:         #cfc7b2;
  --rule-strong:  #6d6355;

  --accent:       #9b2c22;   /* oxblood — reporting accents, the plate's red */
  --accent-ink:   #7d2018;
  --opinion:      #2c3d6b;   /* indigo — argument */
  --opinion-tint: #eae7db;
  --verify:       #2f6152;   /* accepted documents */
  --contest:      #9a6a12;   /* contested */
  --reject:       #7a2f2f;

  --love:         #2f6152;
  --hate:         #9b2c22;
  --unsure:       #8f8677;

  /* type */
  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --text:    "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --furn:    "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-base: 19px;
  --lh: 1.62;
  --measure: 34rem;

  --shadow-1: 0 1px 2px rgba(22,18,14,.06), 0 4px 14px rgba(22,18,14,.05);
  --shadow-2: 0 2px 6px rgba(22,18,14,.09), 0 18px 46px rgba(22,18,14,.10);
  --gap: clamp(1.1rem, 2.2vw, 2rem);
  --wrap: 1320px;
}

html[data-theme="night"] {
  --paper:        #14120f;
  --paper-2:      #1b1814;
  --paper-3:      #23201a;
  --plate:        #1d1a15;
  --ink:          #ece6d8;
  --ink-2:        #c4bcab;
  --ink-3:        #9c9384;
  --ink-4:        #a39a88;
  --rule:         #3a352c;
  --rule-strong:  #6e6656;
  --accent:       #d9705f;
  --accent-ink:   #e8907f;
  --opinion:      #8fa6dd;
  --opinion-tint: #1c1b20;
  --verify:       #6fae97;
  --contest:      #cfa14e;
  --love:         #6fae97;
  --hate:         #d9705f;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,.5), 0 20px 50px rgba(0,0,0,.45);
}
html[data-type="large"] { font-size: 112.5%; --fs-base: 21.5px; --lh: 1.68; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-base)/var(--lh) var(--text);
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* faint newsprint tooth */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,100,70,.030) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 70%, rgba(120,100,70,.024) 0 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
}
html[data-theme="night"] body { background-image: none; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}
img, svg { max-width: 100%; display: block; }
hr { border: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--ink); color: var(--paper); padding: .6rem 1rem; font: 600 .85rem var(--furn); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.4rem); }
.doc-width { max-width: 74ch; }

/* ── satire bar ───────────────────────────────────────────────────────────── */
.satire-bar {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--accent); color: #fff;
  padding: .5rem clamp(1rem, 3vw, 2.4rem);
  font: 500 .78rem/1.4 var(--furn);
  letter-spacing: .012em;
  position: relative; z-index: 30;
}
html[data-theme="night"] .satire-bar { background: #6d1c15; color: #ffe9e4; }
.satire-flag {
  font: 800 .68rem var(--furn); letter-spacing: .18em;
  border: 1.5px solid currentColor; padding: .16rem .5rem; border-radius: 2px; flex: none;
}
.satire-text strong { font-weight: 700; }
.satire-more { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; white-space: nowrap; }
.satire-more:hover { opacity: .82; }

/* ── masthead ─────────────────────────────────────────────────────────────── */
.masthead-bar {
  border-bottom: 2.5px solid var(--ink);
  background: var(--paper);
  position: relative; z-index: 20;
}
.masthead-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(.9rem, 2.4vw, 1.7rem) clamp(1rem, 3vw, 2.4rem) clamp(.7rem, 1.6vw, 1.1rem);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
}
.masthead-rail { font: 400 .69rem/1.55 var(--furn); color: var(--ink-3); letter-spacing: .045em; text-transform: uppercase; }
.masthead-rail--right { text-align: right; }
.rail-latin { font-family: var(--mono); letter-spacing: .16em; color: var(--ink-4); font-size: .62rem; }
.rail-tools { display: flex; gap: .4rem; justify-content: flex-end; margin-top: .45rem; }
.tool {
  background: transparent; border: 1px solid var(--rule); color: var(--ink-2);
  font: 500 .78rem var(--furn); width: 2rem; height: 1.7rem; border-radius: 2px; cursor: pointer;
  display: grid; place-items: center; transition: background .15s, border-color .15s;
}
.tool:hover { background: var(--paper-3); border-color: var(--ink-3); }
.tool sup { font-size: .58em; }

.nameplate-wrap { text-align: center; }
.nameplate {
  display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 1.6vw, 1.2rem);
}
.nameplate-word {
  font: 900 clamp(2.3rem, 7.2vw, 5.4rem)/0.9 var(--display);
  letter-spacing: -.008em; text-transform: uppercase;
  font-feature-settings: "lnum" 1;
}
.nameplate-orn { color: var(--accent); font-size: clamp(.75rem, 1.7vw, 1.15rem); transform: translateY(-.15em); }
/* The mark inherits ink from currentColor so it inverts with the night theme,
   and takes its ground from --paper so the eye is always cut, never painted. */
.np-mark { width: clamp(1.5rem, 3vw, 2.5rem); height: auto; color: var(--ink); flex: 0 0 auto; display: block; }
.motto {
  font: 500 .7rem var(--furn); letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-3); margin-top: .55rem;
}

/* ── nav ──────────────────────────────────────────────────────────────────── */
.nav {
  border-top: 1px solid var(--rule); background: var(--paper);
  display: flex; align-items: center; gap: 1rem;
  max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.4rem);
}
.nav-list {
  display: flex; align-items: center; gap: clamp(.45rem, 1.15vw, 1.05rem);
  list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.nav-list::-webkit-scrollbar { display: none; }
.nav-list > li > a, .nav-more summary {
  display: block; padding: .68rem 0; white-space: nowrap;
  font: 600 .715rem var(--furn); letter-spacing: .055em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 2.5px solid transparent; transition: color .15s, border-color .15s;
}
.nav-list > li > a:hover, .nav-more summary:hover { color: var(--accent); }
.nav-list > li > a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.nav-more { position: static; }
.nav-more summary { cursor: pointer; list-style: none; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary::after { content: " ▾"; font-size: .72em; }
.nav-more-panel {
  position: absolute; right: 0; top: 100%; z-index: 40;
  background: var(--paper); border: 1px solid var(--rule-strong); box-shadow: var(--shadow-2);
  min-width: 15rem; padding: .5rem 0; columns: 1;
}
.nav-more-panel a {
  display: block; padding: .42rem 1.1rem; font: 500 .82rem var(--furn); color: var(--ink-2);
}
.nav-more-panel a:hover { background: var(--paper-3); color: var(--accent); }
/* The search collapses to a glyph so that no desk is ever pushed off the bar.
   It expands on focus-within, which keeps it usable by keyboard alone. */
.nav-search { display: flex; align-items: center; flex: none; margin-left: .6rem; }
.nav-search input {
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font: 400 .76rem var(--furn); padding: .32rem 0; width: 0; opacity: 0;
  border-radius: 2px 0 0 2px; border-right: 0; transition: width .22s ease, opacity .18s ease, padding .22s ease;
}
.nav-search:focus-within input, .nav-search:hover input { width: 10.5rem; opacity: 1; padding: .32rem .55rem; }
.nav-search input::placeholder { color: var(--ink-4); }
.nav-search button {
  border: 1px solid var(--rule); background: var(--paper-3); color: var(--ink-2);
  font: 600 .82rem var(--furn); padding: .3rem .5rem; cursor: pointer; border-radius: 2px; line-height: 1;
}
.nav-search button:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) { .nav-search { display: none; } }

/* ── rules & heads ────────────────────────────────────────────────────────── */
.rule { border-top: 1px solid var(--rule); margin: clamp(1.6rem, 3vw, 2.6rem) 0; }
.rule--heavy { border-top: 3px double var(--rule-strong); }
.hair { border-top: 1px solid var(--rule); margin: 1.35rem 0; }
.dinkus { text-align: center; margin: 1.9rem 0; height: 1rem; position: relative; }
.dinkus::after { content: "✻ ✻ ✻"; color: var(--ink-4); font-size: .8rem; letter-spacing: .5em; }

.section-head {
  font: 700 clamp(1.05rem,1.6vw,1.28rem) var(--furn); letter-spacing: .11em; text-transform: uppercase;
  margin: 2.2rem 0 1.1rem; display: flex; align-items: center; gap: 1rem; color: var(--ink);
}
.section-head::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.section-head--alt span, .section-head--op span { color: var(--accent); }
.section-head--op span { color: var(--opinion); }
.section-note { font: 400 .92rem/1.55 var(--text); color: var(--ink-3); max-width: 62ch; margin: -.4rem 0 1.3rem; font-style: italic; }

.page-head { padding: clamp(1.8rem,4vw,3.2rem) 0 1.3rem; border-bottom: 3px double var(--rule-strong); margin-bottom: clamp(1.4rem,3vw,2.4rem); }
.page-title { font: 800 clamp(2.1rem, 5.4vw, 3.7rem)/1.02 var(--display); margin: 0 0 .5rem; letter-spacing: -.015em; }
.page-standfirst { font: 400 clamp(1rem,1.5vw,1.16rem)/1.55 var(--text); color: var(--ink-2); max-width: 66ch; margin: 0; }
.page-standfirst-rule { font: 600 .72rem var(--furn); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: .8rem; }

/* ── labels ───────────────────────────────────────────────────────────────── */
.label {
  font: 700 .625rem var(--furn); letter-spacing: .155em; text-transform: uppercase;
  padding: .18rem .44rem; border-radius: 2px; margin-right: .55rem; white-space: nowrap;
  display: inline-block; vertical-align: baseline;
}
.label--report    { background: var(--accent); color: #fff; }
.label--interpret { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.label--argue     { background: var(--opinion); color: #fff; }
.label--reply     { background: var(--verify); color: #fff; }
html[data-theme="night"] .label--report { color: #1a0d0b; }
html[data-theme="night"] .label--argue  { color: #101420; }

.desk { font: 600 .68rem var(--furn); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.desk:hover { color: var(--accent); }
.series-tag { font: 500 .66rem var(--furn); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border-left: 1px solid var(--rule); padding-left: .55rem; margin-left: .35rem; }

.byline { font: 500 .78rem var(--furn); color: var(--ink-2); }
.byline a { border-bottom: 1px solid transparent; }
.byline a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.byline-role { display: block; font-weight: 400; font-size: .72rem; color: var(--ink-4); }
.dot { color: var(--ink-4); margin: 0 .18rem; }

/* ── engraving plates ─────────────────────────────────────────────────────── */
.engraving { width: 100%; height: 100%; display: block; background: var(--plate); }
.art-cap, figcaption {
  font: 400 .76rem/1.5 var(--furn); color: var(--ink-3); margin-top: .55rem;
}
.credit { color: var(--ink-4); font-style: italic; }

/* ── front page ───────────────────────────────────────────────────────────── */
.front { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.lead-block { display: grid; grid-template-columns: minmax(0, 2.35fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); }
/* minmax(0,1fr), not 1fr. A bare `1fr` track keeps `min-width: auto`, so it
   refuses to shrink below its content's min-content width — and the lead figure's
   min-content is 444px, which pushed the whole front page 70px wider than a
   390px phone. */
@media (max-width: 940px) { .lead-block { grid-template-columns: minmax(0, 1fr); } }
.lead-art { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.lead-art .engraving { position: absolute; inset: 0; }
.lead-art:not(.lead-art--figure) figcaption { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  background: linear-gradient(transparent, rgba(12,9,6,.78)); color: #f3efe4;
  padding: 2.6rem .95rem .7rem; margin: 0; font-size: .78rem; }
.lead-art:not(.lead-art--figure) figcaption .credit { color: rgba(243,239,228,.72); }
/* The hed sits above the picture. A tall lead diagram used to push the
   headline off the first screen entirely, which is the one thing a front
   page must never do. */
.lead-head { margin-bottom: clamp(.9rem, 1.6vw, 1.3rem); }
.lead-kicker { display: flex; align-items: baseline; gap: .1rem; margin: 0 0 .6rem; }
.lead-text { margin-top: .85rem; }
/* The lead runs its opening on the front page. Two columns on a wide screen,
   the way a broadsheet lead has always been set. */
.lead-open { margin-top: 1.1rem; }
.lead-open p { margin: 0 0 .85rem; font: 400 1.02rem/1.62 var(--text); color: var(--ink); }
.lead-open p:first-of-type::first-letter { float: left; font: 700 3.1rem/.82 var(--display); padding: .1rem .5rem .1rem 0; color: var(--accent); }
.lead-more { margin: .3rem 0 0; font: 600 .92rem var(--furn); }
.lead-more a { color: var(--accent); }
@media (min-width: 1100px) { .lead-open { column-count: 2; column-gap: 2.2rem; column-rule: 1px solid var(--rule); } .lead-more { column-span: all; padding-top: .5rem; } }
/* The opening exists to fill the column beside a tall rail. Below 940px the
   rail stacks underneath, there is no column to fill, and eight paragraphs of
   lead text push the second headline off the phone entirely — 11 headlines in
   the first two screens became 3. So on a phone the lead gives its hed, dek and
   picture, and the next headline follows. */
@media (max-width: 940px) { .lead-open { display: none; } }
.lead-title { font: 800 var(--hed-1)/1.03 var(--display); margin: 0 0 .7rem; letter-spacing: -.018em; }
.lead-title a { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .28s ease; }
.lead-title a:hover { background-size: 100% 2px; }
.lead-dek { font: 400 clamp(1.05rem,1.7vw,1.32rem)/1.5 var(--text); color: var(--ink-2); margin: 0 0 .9rem; max-width: 46ch; }
.lead-meta { font: 500 .82rem var(--furn); color: var(--ink-3); }
.lead-docs { font: 400 .78rem var(--furn); color: var(--ink-3); margin-top: .7rem; }

.shoulder { border-left: 1px solid var(--rule); padding-left: clamp(1rem, 2vw, 1.8rem); }
@media (max-width: 940px) { .shoulder { border-left: 0; padding-left: 0; border-top: 3px double var(--rule-strong); padding-top: 1.4rem; } }

.newswire { margin-top: 1.6rem; border-top: 3px double var(--rule-strong); padding-top: .9rem; }
.rail-head { font: 700 .74rem var(--furn); letter-spacing: .17em; text-transform: uppercase; margin: 0 0 .8rem; color: var(--ink); }
.rail-flag { display: block; font: 400 .64rem var(--furn); letter-spacing: .06em; text-transform: none; color: var(--opinion); font-style: italic; margin-top: .15rem; }
.brief-list { list-style: none; margin: 0; padding: 0; }
.brief { padding: .55rem 0; border-bottom: 1px dotted var(--rule); font: 400 .95rem/1.42 var(--text); }
.brief:last-child { border-bottom: 0; }
.brief a { font-weight: 500; }
.brief a:hover { color: var(--accent); }
.brief-desk { display: block; font: 500 .62rem var(--furn); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-top: .15rem; }

.tier-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.2rem, 2.4vw, 2.2rem); }
@media (max-width: 900px) { .tier-3 { grid-template-columns: 1fr; } }

.front-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: clamp(1.6rem, 3.4vw, 3rem); }
@media (max-width: 1000px) { .front-grid { grid-template-columns: minmax(0, 1fr); } }
.front-rail { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1001px) { .front-rail { border-left: 1px solid var(--rule); padding-left: clamp(1rem, 2vw, 1.9rem); } }

/* ── the headline ladder ──────────────────────────────────────────────────────
   Five rungs, largest first, each step under 1.9x the one below it. Measured
   against the Guardian's front page, which runs 42/28/24/20; ours ran 64/20/24
   /23 — a shout, then a plateau, with the second-most-important story on the
   page set smaller than rows halfway down it. Change a number here and
   `npm run verify` re-measures the rendered ladder and fails on a cliff. */
:root {
  --hed-1: clamp(2.4rem, 4.6vw, 4rem);      /* the lead, once per front      */
  --hed-2: clamp(1.55rem, 2.55vw, 2.15rem); /* second lead, shoulder, desk xl */
  --hed-3: clamp(1.26rem, 1.95vw, 1.7rem);  /* feature cards                 */
  --hed-4: clamp(1.12rem, 1.7vw, 1.44rem);  /* the river                     */
  --hed-5: clamp(1rem, 1.5vw, 1.24rem);     /* small cards, rails            */
}

/* ── cards ────────────────────────────────────────────────────────────────── */
.card { display: flex; flex-direction: column; gap: .75rem; }
.card-art { display: block; aspect-ratio: 5/3; overflow: hidden; }
.card--xl .card-art { aspect-ratio: 24/8; margin-top: 1rem; }
.card-kicker { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem; }
.card-title { margin: 0; font: 700 var(--hed-3)/1.16 var(--display); letter-spacing: -.008em; }
.card--xl .card-title { font-size: var(--hed-2); line-height: 1.06; letter-spacing: -.018em; }
.card--s .card-title { font-size: var(--hed-5); }
/* The shoulder sits beside the lead. It is the second thing read on the page
   and was, until now, set in the smallest type in the design. */
/* On a phone the shoulder stacks under the lead, and it stacked news last:
   two fat cards, then the accountability ledger, then The Wire — eight
   headline-only briefs — at 1872px. The Guardian's phone front runs five
   headlines inside its first 1182px by putting a dense headline-only run
   straight after the lead. So on a phone The Wire comes up and the ledger
   goes below it, and the second shoulder card drops its dek: 114px of the
   card's 212px was dek, twice the height of the headline it explained. */
@media (max-width: 940px) {
  .shoulder { display: flex; flex-direction: column; }
  .shoulder > .card { order: 0; }
  .shoulder > .hair { order: 0; }
  .shoulder > .newswire { order: 1; }
  .shoulder > .edition-box { order: 2; }
  .shoulder > .openfile-rail { order: 3; }
}
@media (max-width: 760px) {
  .shoulder > .card ~ .card .card-dek { display: none; }
}

/* On a phone the lead figure runs 334px — 40px of label, 198px of chart, and
   69px of caption and credit that the story's own page repeats word for word.
   The chart stays: it is the reason to look. The duplicate prose goes, because
   it is sitting between headline one and headline two and it is already
   somewhere else. */
@media (max-width: 760px) {
  .lead-art--figure .figure-foot { display: none; }
}

.shoulder .card--s .card-title,
.shoulder .card-title { font-size: var(--hed-2); line-height: 1.08; letter-spacing: -.018em; }
.tier-3 .card-title { font-size: var(--hed-3); }
.card-title a:hover { color: var(--accent); }
.card-dek { margin: 0; font: 400 .95rem/1.5 var(--text); color: var(--ink-2); }
.card--xl .card-dek { font-size: 1.12rem; max-width: 58ch; }
.card-meta { font: 500 .76rem var(--furn); color: var(--ink-3); }
.card.is-opinion .card-title { font-family: var(--furn); font-weight: 700; letter-spacing: -.012em; }

.row { display: flex; flex-direction: column; gap: .4rem; }
.row-kicker { display: flex; align-items: baseline; gap: .1rem; }
.row-title { margin: 0; font: 700 var(--hed-4)/1.2 var(--display); letter-spacing: -.008em; }
.row-title a:hover { color: var(--accent); }
.row-dek { margin: 0; font: 400 .95rem/1.5 var(--text); color: var(--ink-2); max-width: 68ch; }
.row-meta { font: 500 .76rem var(--furn); color: var(--ink-3); }
.more-link { font: 600 .82rem var(--furn); margin-top: 1.4rem; }
.more-link a, .rail-more { color: var(--accent); border-bottom: 1px solid currentColor; }
.rail-more { display: inline-block; margin-top: .8rem; font: 600 .74rem var(--furn); }

.null-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(1.2rem,2.4vw,2rem); }

/* ── rail boxes ───────────────────────────────────────────────────────────── */
.rail-box { border-top: 3px double var(--rule-strong); padding-top: .9rem; }
.rail-box--opinion { background: var(--opinion-tint); padding: .9rem 1rem 1.1rem; border-top-color: var(--opinion); }
.rail-box--vault { font-family: var(--mono); }
.rail-box--flag { background: var(--paper-3); padding: .9rem 1rem 1.1rem; font-size: .88rem; }
.rail-box--flag p { margin: 0; color: var(--ink-2); }
.rail-box--flag a { border-bottom: 1px solid var(--accent); color: var(--accent); }

.rank-list { list-style: none; counter-reset: r; margin: 0; padding: 0; }
.rank-list li { counter-increment: r; display: grid; grid-template-columns: 1.7rem 1fr; gap: .5rem; padding: .55rem 0; border-bottom: 1px dotted var(--rule); }
.rank-list li::before { content: counter(r); font: 700 1.05rem var(--display); color: var(--accent); line-height: 1.25; }
.rank-list li:last-child { border-bottom: 0; }
.rank-list a { font: 500 .93rem/1.35 var(--text); }
.rank-list a:hover { color: var(--accent); }
.rank-meta { display: block; font: 400 .68rem var(--furn); color: var(--ink-4); letter-spacing: .04em; margin-top: .12rem; }
.rank-list--wide li { grid-template-columns: 2rem 1fr; }

.rail-op { padding: .6rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.rail-op:last-of-type { border-bottom: 0; }
.rail-op-title { display: block; font: 700 1.02rem/1.25 var(--furn); letter-spacing: -.01em; margin: .25rem 0 .2rem; }
.rail-op-title:hover { color: var(--opinion); }
.rail-op-by { font: 500 .72rem var(--furn); color: var(--ink-3); }

.vault-list { list-style: none; margin: 0; padding: 0; }
.vault-list li { padding: .5rem 0; border-bottom: 1px dotted var(--rule); font: 400 .82rem/1.4 var(--mono); }
.vault-code { color: var(--accent); font-weight: 600; }
.vault-list a:hover { color: var(--accent); }

.corr-list { list-style: none; margin: 0; padding: 0; font: 400 .85rem/1.45 var(--text); }
.corr-list li { padding: .5rem 0; border-bottom: 1px dotted var(--rule); color: var(--ink-2); }
.corr-date { font: 600 .66rem var(--furn); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-right: .35rem; }

.sky { font: 400 .88rem var(--text); }
.sky-row { display: flex; justify-content: space-between; gap: 1rem; padding: .38rem 0; border-bottom: 1px dotted var(--rule); }
.sky-row strong { font-family: var(--mono); font-size: .84rem; }
.sky-fine { font: 400 .72rem/1.45 var(--furn); color: var(--ink-4); margin: .7rem 0 0; }
.sky-fine a { border-bottom: 1px solid var(--rule); }
.sky-layout { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(0,1fr); gap: 2.4rem; }
@media (max-width: 900px) { .sky-layout { grid-template-columns: 1fr; } }

/* ── the promise block ────────────────────────────────────────────────────── */
.promise { background: var(--paper-2); border: 1px solid var(--rule); padding: clamp(1.4rem,3vw,2.4rem); margin-bottom: 3rem; }
.promise h2 { font: 800 clamp(1.4rem,2.4vw,1.9rem)/1.1 var(--display); margin: 0 0 1.2rem; }
.promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem,1fr)); gap: 1.4rem 2rem; }
.promise h4 { font: 700 .74rem var(--furn); letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin: 0 0 .4rem; }
.promise p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--ink-2); }
.promise a { border-bottom: 1px solid var(--accent); }

/* ── article ──────────────────────────────────────────────────────────────── */
.article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(1.6rem, 4vw, 3.6rem); padding-top: clamp(1.4rem,3vw,2.6rem); align-items: start; }
@media (max-width: 1040px) { .article-wrap { grid-template-columns: minmax(0, 1fr); } .art-rail { border-top: 3px double var(--rule-strong); padding-top: 1.4rem; } }
.article { max-width: 46rem; margin: 0 auto; width: 100%; }

.argument-strip {
  grid-column: 1 / -1;
  background: var(--opinion); color: #fff; padding: .7rem 1.1rem; margin-bottom: 1.4rem;
  font: 500 .84rem/1.45 var(--furn); border-radius: 2px;
}
html[data-theme="night"] .argument-strip { color: #0f1320; }
.argument-strip strong { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.art-kicker { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem; margin-bottom: .9rem; }
.art-title { font: 800 clamp(2.1rem, 4.4vw, 3.4rem)/1.04 var(--display); margin: 0 0 .8rem; letter-spacing: -.02em; }
.stance-argue .art-title { font-family: var(--furn); font-weight: 800; letter-spacing: -.03em; line-height: 1.06; }
.art-dek { font: 400 clamp(1.1rem,1.7vw,1.35rem)/1.48 var(--text); color: var(--ink-2); margin: 0 0 1.4rem; max-width: 44ch; }
.stance-argue .art-dek { font-family: var(--furn); font-size: 1.08rem; }

.art-byline { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.4rem; flex-wrap: wrap; padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.art-by-people { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.by-person { display: flex; align-items: center; gap: .65rem; }
.by-portrait { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 1px solid var(--rule); flex: none; }
.by-portrait .portrait { width: 100%; height: 100%; }
.by-name { display: block; font: 600 .95rem var(--furn); }
.by-person:hover .by-name { color: var(--accent); }
.by-role { display: block; font: 400 .72rem var(--furn); color: var(--ink-3); }
.art-stamps { font: 400 .74rem/1.6 var(--furn); color: var(--ink-3); text-align: right; }
.art-stamps > * { display: block; }
.art-stamps .updated { color: var(--accent); font-weight: 500; }
@media (max-width: 620px) { .art-stamps { text-align: left; } }

.kind-rule { font: 400 .8rem/1.5 var(--furn); color: var(--ink-3); border-left: 2px solid var(--accent); padding-left: .8rem; margin: 1rem 0 0; font-style: italic; }
.stance-argue .kind-rule { border-left-color: var(--opinion); }

.art-figure { margin: 1.8rem 0; }
.art-figure .engraving { aspect-ratio: 100/54; }

/* body typography */
.art-body, .prose { font-size: 1.045rem; }
.art-body p, .prose p { margin: 0 0 1.15rem; max-width: var(--measure); }
.art-body p.lede::first-letter, .dateline-line::first-letter {
  float: left; font: 900 3.9rem/0.78 var(--display); color: var(--accent);
  padding: .16rem .55rem .1rem 0; margin-top: .1rem;
}
.dateline { font: 700 .8rem var(--furn); letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.dateline-line { margin: 0 0 1.15rem; max-width: var(--measure); }
.art-body a, .prose a { border-bottom: 1px solid var(--rule-strong); }
.art-body a:hover, .prose a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.crosshead { font: 700 1.28rem/1.25 var(--display); margin: 2rem 0 .8rem; letter-spacing: -.01em; max-width: var(--measure); }
h3.crosshead { font-size: 1.12rem; }
.prose ul, .prose ol, .art-body ul, .art-body ol { max-width: var(--measure); padding-left: 1.3rem; margin: 0 0 1.2rem; }
.prose li, .art-body li { margin-bottom: .45rem; }
blockquote { margin: 1.4rem 0; padding-left: 1.2rem; border-left: 3px solid var(--rule-strong); color: var(--ink-2); font-style: italic; max-width: var(--measure); }
blockquote p { margin-bottom: .7rem; }
code { font: .86em var(--mono); background: var(--paper-3); padding: .08em .32em; border-radius: 2px; }

.docref { font: 600 .92em var(--mono); color: var(--accent); border-bottom: 1px dotted var(--accent) !important; letter-spacing: -.01em; }
.docref:hover { background: rgba(155,44,34,.09); }

.pullquote { margin: 2rem 0; padding: 1.2rem 0; border-top: 3px double var(--rule-strong); border-bottom: 3px double var(--rule-strong); max-width: var(--measure); }
.pullquote p { font: 500 clamp(1.3rem,2.2vw,1.7rem)/1.28 var(--display); margin: 0 0 .5rem; letter-spacing: -.012em; }
.pullquote cite { font: 500 .78rem var(--furn); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-style: normal; }

.sidebar-box, .timeline, .editors-note, .caution, .doc-excerpt, .data-table {
  margin: 1.9rem 0; max-width: var(--measure); background: var(--paper-2);
  border: 1px solid var(--rule); padding: 1.1rem 1.25rem;
}
.sidebar-box h4, .timeline h4, .editors-note h4 {
  font: 700 .7rem var(--furn); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 .7rem;
}
.sidebar-box p, .timeline p, .editors-note p { font-size: .93rem; }
.editors-note { border-left: 3px solid var(--accent); background: var(--paper-3); }
.caution { border-left: 3px solid var(--contest); background: var(--paper-3); font-size: .9rem; }
.caution p:last-child { margin-bottom: 0; }

.timeline ol { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; padding: .42rem 0; border-bottom: 1px dotted var(--rule); font-size: .9rem; }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { font: 600 .72rem var(--furn); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); padding-top: .18rem; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: .1rem; } }

.doc-excerpt { background: var(--paper-3); border-left: 3px solid var(--ink-3); font-family: var(--mono); }
.doc-excerpt figcaption { font: 600 .68rem var(--furn); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem; }
.doc-stamp { background: var(--ink); color: var(--paper); padding: .1rem .38rem; border-radius: 2px; margin-right: .4rem; }
.doc-body { font-size: .85rem; line-height: 1.6; }
.doc-body p { max-width: none; }

.data-table { padding: 0; background: transparent; border: 0; }
.data-table figcaption { font: 600 .7rem var(--furn); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; }
table { width: 100%; border-collapse: collapse; font: 400 .88rem var(--furn); }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1.5px solid var(--rule-strong); }
tbody tr:hover { background: var(--paper-2); }

/* ── sources & method ─────────────────────────────────────────────────────── */
.method, .reply-box, .corr-box, .verdict, .comments { max-width: 46rem; margin: 2.6rem 0; }
.method { background: var(--paper-2); border: 1px solid var(--rule-strong); padding: clamp(1.2rem,2.4vw,1.8rem); }
.method-head, .reply-head, .corr-head {
  font: 700 .82rem var(--furn); letter-spacing: .18em; text-transform: uppercase;
  margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1.5px solid var(--rule-strong);
}
.method h3 { font: 700 .7rem var(--furn); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 1.3rem 0 .55rem; }
.method h3:first-of-type { margin-top: 0; }
.method-note { font-size: .92rem; color: var(--ink-2); }
.method-note p { max-width: none; margin-bottom: .8rem; }
.source-list { margin: 0; padding-left: 1.3rem; font-size: .9rem; }
.source-list li { margin-bottom: .6rem; line-height: 1.5; }
.src-name { font-weight: 600; }
.src-title { color: var(--ink-2); }
.src-how, .src-when, .src-note { display: block; font: 400 .8rem var(--furn); color: var(--ink-3); }
.src-note { font-style: italic; }
.doc-list, .unverified-list { margin: 0; padding-left: 1.3rem; font-size: .9rem; }
.doc-list li, .unverified-list li { margin-bottom: .45rem; }
.unverified-list { color: var(--ink-2); }
.doc-status { font: 600 .6rem var(--furn); letter-spacing: .12em; text-transform: uppercase; padding: .1rem .35rem; border-radius: 2px; margin-left: .3rem; }
.doc-status--accepted { background: var(--verify); color: #fff; }
.doc-status--contested { background: var(--contest); color: #fff; }
.doc-status--rejected { background: var(--reject); color: #fff; }
.disclosure { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px dotted var(--rule-strong); font: 400 .86rem/1.5 var(--furn); color: var(--ink-2); }

.reply-box { background: var(--paper-3); border-left: 4px solid var(--verify); padding: clamp(1.2rem,2.4vw,1.8rem); }
.reply-proc { font: 400 .88rem/1.55 var(--furn); color: var(--ink-2); margin: 0 0 1rem; }
.reply-statement { border-left: 0; padding: 1rem 1.2rem; background: var(--paper); font-style: normal; margin: 0; }
.reply-statement p { max-width: none; }
.reply-note { font: 400 .78rem var(--furn); color: var(--ink-3); font-style: italic; margin: .8rem 0 0; }
.reply-entry { padding: 1.2rem 0; border-bottom: 1px solid var(--rule); }
.reply-entry h3 { font: 700 1.15rem var(--display); margin: 0 0 .3rem; }
.reply-sub { font: 500 .84rem var(--furn); color: var(--ink-2); margin: 0 0 .7rem; }

.corr-box { background: var(--paper-3); border-left: 4px solid var(--accent); padding: clamp(1.1rem,2.2vw,1.6rem); }
.corr-box ol { margin: 0; padding-left: 1.2rem; font-size: .93rem; }
.corr-box li { margin-bottom: .8rem; }
.corr-cause { font: 400 .84rem/1.5 var(--furn); color: var(--ink-2); margin-top: .3rem; }
.corr-sev { font: 700 .6rem var(--furn); letter-spacing: .12em; text-transform: uppercase; padding: .12rem .4rem; border-radius: 2px; margin-right: .4rem; }
.corr-sev--correction { background: var(--accent); color: #fff; }
.corr-sev--clarification { background: var(--contest); color: #fff; }
.corr-sev--retraction { background: var(--ink); color: var(--paper); }
.corr-sev--editors-note { background: var(--verify); color: #fff; }

/* ── verdict widget ───────────────────────────────────────────────────────── */
.verdict { border-top: 3px double var(--rule-strong); border-bottom: 3px double var(--rule-strong); padding: 1.5rem 0; }
.verdict h2 { font: 800 1.5rem var(--display); margin: 0 0 .4rem; }
.verdict-note { font: 400 .86rem/1.5 var(--furn); color: var(--ink-3); margin: 0 0 1.1rem; }
.verdict-note a { border-bottom: 1px solid var(--rule-strong); }
.verdict-buttons { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.vbtn {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--rule-strong); color: var(--ink);
  font: 600 .86rem var(--furn); padding: .55rem .95rem; border-radius: 3px;
  transition: transform .12s ease, background .15s, border-color .15s, color .15s;
}
.vbtn:hover { transform: translateY(-1px); }
.vbtn--love:hover, .vbtn--love.is-on { background: var(--love); border-color: var(--love); color: #fff; }
.vbtn--hate:hover, .vbtn--hate.is-on { background: var(--hate); border-color: var(--hate); color: #fff; }
.vbtn--unsure:hover, .vbtn--unsure.is-on { background: var(--unsure); border-color: var(--unsure); color: #fff; }
.vico { font-size: 1.05em; }
.vcount { font-family: var(--mono); font-size: .78em; opacity: .85; }
.vbar { display: flex; height: 12px; border: 1px solid var(--rule-strong); overflow: hidden; border-radius: 2px; }
.vseg--love { background: var(--love); }
.vseg--unsure { background: var(--unsure); }
.vseg--hate { background: var(--hate); }
.vbar-legend { font: 400 .76rem var(--furn); color: var(--ink-3); margin-top: .45rem; }

/* ── comments ─────────────────────────────────────────────────────────────── */
.comments h2 { font: 800 1.5rem var(--display); margin: 0 0 .4rem; display: flex; align-items: baseline; gap: .6rem; }
.cmt-count { font: 600 .8rem var(--furn); color: var(--paper); background: var(--ink); padding: .1rem .5rem; border-radius: 10px; }
.cmt-note { font: 400 .86rem/1.5 var(--furn); color: var(--ink-3); margin: 0 0 1.4rem; }
.cmt-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.cmt { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.cmt--staff { background: var(--paper-2); padding: 1rem 1.1rem; border-left: 3px solid var(--accent); }
.cmt-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.cmt-name { font: 700 .92rem var(--furn); }
.cmt-badge { font: 700 .6rem var(--furn); letter-spacing: .12em; text-transform: uppercase; background: var(--accent); color: #fff; padding: .1rem .38rem; border-radius: 2px; }
.cmt-loc, .cmt-time { font: 400 .74rem var(--furn); color: var(--ink-4); }
.cmt-body { font-size: .96rem; }
.cmt-body p { margin: 0 0 .6rem; max-width: none; }
.cmt-body p:last-child { margin-bottom: 0; }
.cmt-body p.lede::first-letter { float: none; font: inherit; color: inherit; padding: 0; margin: 0; }
.cmt-empty { color: var(--ink-3); font-style: italic; padding: 1rem 0; }

.cmt-form { background: var(--paper-2); border: 1px solid var(--rule); padding: 1.3rem; }
.cmt-form h3 { font: 700 .8rem var(--furn); letter-spacing: .15em; text-transform: uppercase; margin: 0 0 1rem; }
.cmt-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .9rem; }
@media (max-width: 560px) { .cmt-fields { grid-template-columns: 1fr; } }
.cmt-form label { display: block; font: 600 .74rem var(--furn); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cmt-form input, .cmt-form textarea {
  display: block; width: 100%; margin-top: .3rem; background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-strong); padding: .55rem .7rem; font: 400 .95rem var(--text); border-radius: 2px;
}
.cmt-form textarea { resize: vertical; font-family: var(--text); }
.cmt-body-label { margin-bottom: 1rem; }
.cmt-form button {
  background: var(--ink); color: var(--paper); border: 0; padding: .62rem 1.3rem;
  font: 600 .84rem var(--furn); letter-spacing: .05em; cursor: pointer; border-radius: 2px;
}
.cmt-form button:hover { background: var(--accent); }
.cmt-status { font: 500 .82rem var(--furn); margin-left: .8rem; color: var(--accent); }

/* ── article rail ─────────────────────────────────────────────────────────── */
.art-rail { font-size: .93rem; }
.rail-sticky { position: sticky; top: 1.2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.rail-author { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .8rem; }
.rail-portrait { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 1px solid var(--rule); flex: none; }
.rail-portrait .portrait { width: 100%; height: 100%; }
.rail-author-name { font: 700 1rem var(--furn); display: block; }
.rail-author-name:hover { color: var(--accent); }
.rail-author-role { font: 500 .74rem var(--furn); color: var(--ink-2); }
.rail-author-beat { font: 400 .72rem var(--furn); color: var(--ink-4); margin-top: .15rem; }
.rail-author-disc, .rail-author-rec { font: 400 .78rem/1.45 var(--furn); color: var(--ink-3); margin: .5rem 0 0; }
.rail-author-rec a { color: var(--accent); border-bottom: 1px solid currentColor; }
.rel-list { list-style: none; margin: 0; padding: 0; }
.rel-list li { padding: .55rem 0; border-bottom: 1px dotted var(--rule); }
.rel-list li:last-child { border-bottom: 0; }
.rel-list a { font: 500 .93rem/1.35 var(--text); }
.rel-list a:hover { color: var(--accent); }
.rel-desk { display: block; font: 500 .64rem var(--furn); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-top: .15rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { font: 500 .72rem var(--furn); background: var(--paper-3); border: 1px solid var(--rule); padding: .2rem .5rem; border-radius: 2px; color: var(--ink-2); }
.tag:hover { border-color: var(--accent); color: var(--accent); }

/* ── opinion page ─────────────────────────────────────────────────────────── */
.page-opinion { --accent: var(--opinion); }
.wall-note { background: var(--opinion-tint); border-left: 4px solid var(--opinion); padding: 1.2rem 1.4rem; margin-bottom: 2rem; max-width: 72ch; }
.wall-note h2 { font: 700 .78rem var(--furn); letter-spacing: .17em; text-transform: uppercase; margin: 0 0 .6rem; color: var(--opinion); }
.wall-note p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.wall-note a { border-bottom: 1px solid var(--opinion); }
.op-block { margin-bottom: 2.4rem; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem,1fr)); gap: 1.6rem 2rem; }
.col-card { display: flex; gap: 1rem; align-items: flex-start; }
.col-portrait { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; border: 1px solid var(--rule); flex: none; }
.col-portrait .portrait { width: 100%; height: 100%; }
.col-name { font: 700 .66rem var(--furn); letter-spacing: .17em; text-transform: uppercase; color: var(--opinion); margin-bottom: .25rem; }
.col-card h3 { margin: 0 0 .35rem; font: 700 1.18rem/1.22 var(--furn); letter-spacing: -.015em; }
.col-card h3 a:hover { color: var(--opinion); }
.col-dek { margin: 0 0 .35rem; font-size: .9rem; color: var(--ink-2); }
.col-by { font: 500 .74rem var(--furn); color: var(--ink-3); }

/* ── comics ───────────────────────────────────────────────────────────────── */
.comic { margin: 0 0 2.8rem; }
.comic-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; border: 2px solid var(--ink); }
.panel { border-right: 1px solid var(--ink); display: flex; flex-direction: column; }
.panel:last-child { border-right: 0; }
.panel-art { aspect-ratio: 5/4; overflow: hidden; border-bottom: 1px solid var(--ink); }
.panel-cap { padding: .7rem .8rem; font: 400 .84rem/1.4 var(--furn); color: var(--ink-2); flex: 1; background: var(--paper-2); }
.comic figcaption { margin-top: .6rem; }
.comic-title { font: 700 .9rem var(--furn); color: var(--ink); }
.comics-page { max-width: 60rem; }

/* ── puzzles / horoscopes ─────────────────────────────────────────────────── */
.puzzle { border-top: 3px double var(--rule-strong); padding-top: 1.4rem; margin-bottom: 2.6rem; }
.puzzle h2 { font: 800 1.6rem var(--display); margin: 0 0 .3rem; }
.puzzle-dek { font: 400 .95rem var(--text); color: var(--ink-2); margin: 0 0 1rem; }
.horo-intro { max-width: 68ch; }
.horo-fine { font: 400 .8rem var(--furn); color: var(--ink-4); }
.horo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem,1fr)); gap: 1.6rem 2.2rem; }
.horo { border-top: 1px solid var(--rule); padding-top: .9rem; }
.horo h3 { font: 700 1.15rem var(--display); margin: 0 0 .5rem; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.horo-range { font: 400 .68rem var(--furn); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.horo p { font-size: .93rem; margin: 0 0 .5rem; }
.horo-luck { font: 500 .8rem var(--furn); color: var(--accent); }

/* ── masthead page ────────────────────────────────────────────────────────── */
.mast-intro { max-width: 70ch; margin-bottom: 2rem; }
.mast-group { margin-bottom: 2.6rem; }
.mast-group h2 { font: 700 .82rem var(--furn); letter-spacing: .18em; text-transform: uppercase; padding-bottom: .6rem; border-bottom: 1.5px solid var(--rule-strong); margin: 0 0 1.4rem; }
.mast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem,1fr)); gap: 1.6rem 2rem; }
.mast-card { display: flex; gap: 1rem; align-items: flex-start; }
.mast-portrait { width: 72px; height: 72px; border-radius: 2px; overflow: hidden; border: 1px solid var(--rule); flex: none; }
.mast-portrait .portrait { width: 100%; height: 100%; }
.mast-card h3 { margin: 0 0 .15rem; font: 700 1.08rem var(--display); }
.mast-card h3 a:hover { color: var(--accent); }
.mast-role { font: 600 .76rem var(--furn); color: var(--ink-2); margin: 0 0 .2rem; }
.mast-beat { font: 400 .78rem/1.4 var(--furn); color: var(--ink-3); margin: 0 0 .35rem; }
.mast-contact { margin: 0; font: 400 .74rem var(--mono); }
.mast-contact a { color: var(--accent); }
.mast-rec { font: 400 .7rem var(--furn); color: var(--ink-4); margin: .25rem 0 0; }
.mast-trust { background: var(--paper-2); border: 1px solid var(--rule); padding: 1.4rem; max-width: 70ch; }
.mast-trust h2 { font: 700 1.2rem var(--display); margin: 0 0 .6rem; }
.mast-trust p { margin: 0; font-size: .95rem; }
.mast-trust a { border-bottom: 1px solid var(--accent); }

/* ── author page ──────────────────────────────────────────────────────────── */
.author-head { display: flex; gap: 1.8rem; align-items: center; padding: clamp(1.6rem,3.4vw,2.8rem) 0 1.4rem; border-bottom: 3px double var(--rule-strong); flex-wrap: wrap; }
.author-portrait { width: 116px; height: 116px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--rule-strong); flex: none; }
.author-portrait .portrait { width: 100%; height: 100%; }
.author-id h1 { font: 800 clamp(1.9rem,3.6vw,2.9rem)/1.05 var(--display); margin: 0 0 .3rem; }
.author-role { font: 600 .95rem var(--furn); color: var(--accent); margin: 0 0 .2rem; }
.author-beat { font: 400 .9rem var(--furn); color: var(--ink-2); margin: 0 0 .35rem; }
.author-contact { font: 400 .8rem var(--mono); color: var(--ink-3); margin: 0; }
.author-contact a { color: var(--accent); }
.author-grid { display: grid; grid-template-columns: minmax(0,2.3fr) minmax(0,1fr); gap: clamp(1.6rem,3.4vw,3rem); padding-top: 1.8rem; }
@media (max-width: 940px) { .author-grid { grid-template-columns: 1fr; } }
.author-rail { display: flex; flex-direction: column; gap: 1.5rem; }
.author-bio { max-width: 66ch; }
.author-disclosure { background: var(--paper-2); border-left: 3px solid var(--accent); padding: 1rem 1.2rem; margin: 1.6rem 0; max-width: 66ch; }
.author-disclosure h2 { font: 700 .72rem var(--furn); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .5rem; }
.author-disclosure p { margin: 0; font-size: .92rem; }
.stat-dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem .8rem; margin: 0 0 .8rem; font: 400 .86rem var(--furn); }
.stat-dl dt { color: var(--ink-3); }
.stat-dl dd { margin: 0; font-family: var(--mono); font-weight: 600; text-align: right; }
.rail-fine { font: 400 .76rem/1.45 var(--furn); color: var(--ink-4); font-style: italic; margin: 0; }
.mini-list { list-style: none; margin: 0; padding: 0; font: 400 .84rem var(--furn); }
.mini-list li { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dotted var(--rule); }

/* ── vault ────────────────────────────────────────────────────────────────── */
.vault-intro { max-width: 70ch; }
.vault-sec { margin-bottom: 2.6rem; }
.vault-table { font-family: var(--furn); }
.vault-table td:first-child { font-family: var(--mono); white-space: nowrap; }
.vault-class { font: 400 .68rem var(--mono); color: var(--ink-4); letter-spacing: .06em; text-transform: uppercase; margin-top: .15rem; }
.vault-intake { background: var(--paper-2); border: 1px solid var(--rule); padding: 1.4rem; max-width: 72ch; }
.vault-intake h2 { font: 700 1.2rem var(--display); margin: 0 0 .6rem; }
.vault-intake p { margin: 0; font-size: .95rem; }

.doc-sheet { max-width: 54rem; margin: clamp(1.6rem,3vw,2.6rem) auto; background: var(--paper-2); border: 1px solid var(--rule-strong); padding: clamp(1.4rem,3vw,2.6rem); box-shadow: var(--shadow-1); }
.doc-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .8rem; border-bottom: 2px solid var(--ink); margin-bottom: 1.2rem; flex-wrap: wrap; }
.doc-code { font: 700 1.1rem var(--mono); letter-spacing: .06em; }
.doc-classification { font: 700 .72rem var(--mono); letter-spacing: .2em; text-transform: uppercase; border: 2px solid var(--accent); color: var(--accent); padding: .2rem .6rem; transform: rotate(-1.5deg); }
.doc-title { font: 800 clamp(1.5rem,2.8vw,2.2rem)/1.15 var(--display); margin: 0 0 1.2rem; }
.doc-facts { display: grid; grid-template-columns: 9rem 1fr; gap: .4rem 1rem; font: 400 .88rem var(--furn); margin: 0 0 1.8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.doc-facts dt { font-weight: 600; color: var(--ink-3); text-transform: uppercase; font-size: .7rem; letter-spacing: .1em; padding-top: .18rem; }
.doc-facts dd { margin: 0; }
.doc-sheet h2 { font: 700 .78rem var(--furn); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 1.6rem 0 .7rem; }
.doc-type { font: 400 .82rem/1.7 var(--mono); background: var(--paper); border: 1px solid var(--rule); padding: 1.1rem; white-space: pre-wrap; overflow-x: auto; }
.doc-fine { font: 400 .76rem var(--furn); color: var(--ink-4); font-style: italic; }
.doc-custody { font: 400 .85rem var(--furn); color: var(--ink-2); }
.doc-fiction { margin-top: 2rem; padding-top: 1rem; border-top: 1px dotted var(--rule-strong); font: 400 .8rem var(--furn); color: var(--ink-3); }
.doc-fiction a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* ── corrections page ─────────────────────────────────────────────────────── */
.corr-intro { max-width: 70ch; }
.corr-key { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 2rem; }
.corr-key-item { display: flex; align-items: center; gap: .4rem; background: var(--paper-2); border: 1px solid var(--rule); padding: .4rem .7rem; }
.corr-key-n { font: 700 1rem var(--mono); }
.corr-archive { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.corr-entry { padding: 1.3rem 0; border-bottom: 1px solid var(--rule); }
.corr-entry-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.corr-entry-head time { font: 500 .76rem var(--furn); color: var(--ink-3); }
.corr-entry h3 { font: 700 1.15rem/1.3 var(--display); margin: 0 0 .45rem; }
.corr-entry h3 a:hover { color: var(--accent); }
.corr-text { margin: 0 0 .5rem; font-size: .97rem; }

/* ── standards / ownership ────────────────────────────────────────────────── */
.standards h2 { font: 800 1.5rem/1.2 var(--display); margin: 2.2rem 0 .7rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.standards h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.revenue { margin: 2.4rem 0; }
.rev-row { margin-bottom: 1.5rem; }
.rev-label { display: flex; justify-content: space-between; gap: 1rem; font: 600 .92rem var(--furn); margin-bottom: .35rem; }
.rev-pct { font-family: var(--mono); color: var(--accent); }
.rev-bar { height: 14px; background: var(--paper-3); border: 1px solid var(--rule); }
.rev-bar span { display: block; height: 100%; background: var(--accent); }
.rev-note { font: 400 .84rem/1.5 var(--furn); color: var(--ink-3); margin: .4rem 0 0; }
.conflict-box { background: var(--paper-3); border: 2px solid var(--accent); padding: clamp(1.2rem,2.6vw,1.9rem); margin: 2rem 0; max-width: 72ch; }
.conflict-box h2 { font: 800 1.35rem var(--display); margin: 0 0 .7rem; color: var(--accent); }
.conflict-box p { margin: 0; font-size: .97rem; line-height: 1.62; }

/* ── about page ───────────────────────────────────────────────────────────── */
.big-disclaimer { border: 3px solid var(--accent); padding: clamp(1.4rem,3.4vw,2.6rem); margin: clamp(1.6rem,3vw,2.6rem) 0 2.6rem; background: var(--paper-2); }
.bd-flag { font: 800 .74rem var(--furn); letter-spacing: .24em; text-transform: uppercase; color: #fff; background: var(--accent); display: inline-block; padding: .3rem .7rem; margin-bottom: 1.1rem; }
.big-disclaimer h1 { font: 800 clamp(1.9rem,4.2vw,2.9rem)/1.08 var(--display); margin: 0 0 1rem; }
.bd-lead { font: 400 1.1rem/1.55 var(--text); margin: 0 0 1.2rem; }
.bd-list { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.bd-list li { margin-bottom: .55rem; font-size: .97rem; line-height: 1.55; }
.bd-foot { font: 500 .95rem var(--furn); color: var(--ink-2); margin: 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.about-page .prose h2 { font: 800 1.5rem var(--display); margin: 2rem 0 .7rem; }

/* ── newsroom metrics ─────────────────────────────────────────────────────── */
.metrics-intro { max-width: 70ch; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 2rem 0; }
.kpi { background: var(--paper); padding: 1.1rem 1rem; }
.kpi-n { font: 800 1.9rem var(--display); color: var(--accent); line-height: 1.05; font-variant-numeric: lining-nums; }
.kpi-k { font: 500 .74rem/1.35 var(--furn); color: var(--ink-3); margin-top: .3rem; }
.metric-block { margin: 2.6rem 0; }
.split-bar { display: flex; height: 34px; border: 1px solid var(--rule-strong); overflow: hidden; }
.split { display: grid; place-items: center; font: 700 .74rem var(--furn); letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; }
.split--report { background: var(--accent); }
.split--argue { background: var(--opinion); }
.bar-chart { display: flex; flex-direction: column; gap: .5rem; }
.bar-row { display: grid; grid-template-columns: 11rem 1fr 7rem; gap: .8rem; align-items: center; font: 500 .84rem var(--furn); }
.bar-label { color: var(--ink-2); }
.bar-label:hover { color: var(--accent); }
.bar-track { height: 14px; background: var(--paper-3); border: 1px solid var(--rule); }
.bar-track span { display: block; height: 100%; background: var(--ink-3); }
.bar-val { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); text-align: right; }
@media (max-width: 640px) { .bar-row { grid-template-columns: 8rem 1fr; } .bar-val { display: none; } }
.plain-table { max-width: 46rem; }

/* ── misc ─────────────────────────────────────────────────────────────────── */
.pager { display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; border-top: 1px solid var(--rule); font: 600 .85rem var(--furn); margin-top: 2rem; }
.pager a { color: var(--accent); }
.pager-mid { color: var(--ink-3); font-weight: 400; }
.empty { color: var(--ink-3); font-style: italic; }
.search-form { display: flex; gap: .6rem; margin-bottom: 2rem; }
.search-form input { flex: 1; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); font: 400 1rem var(--text); padding: .65rem .8rem; }
.search-form button { background: var(--ink); color: var(--paper); border: 0; padding: .65rem 1.4rem; font: 600 .85rem var(--furn); cursor: pointer; }
.nf { padding: 4rem 0; }
.nf h1 { font: 800 clamp(1.9rem,4vw,2.8rem) var(--display); margin: 0 0 1rem; }
.btn { display: inline-block; background: var(--ink); color: var(--paper); padding: .7rem 1.4rem; font: 600 .85rem var(--furn); border-radius: 2px; margin-top: 1rem; }
.btn:hover { background: var(--accent); }
.sec-lead { margin-bottom: 1rem; }
.arch-year { margin-bottom: 2.4rem; }
.section-note-block { max-width: 70ch; margin-bottom: 1.8rem; font-style: italic; color: var(--ink-2); }

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot { border-top: 3px double var(--rule-strong); margin-top: 4rem; background: var(--paper-2); }
.foot-top { max-width: var(--wrap); margin: 0 auto; padding: clamp(2rem,4vw,3rem) clamp(1rem,3vw,2.4rem); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2.4fr); gap: clamp(1.6rem,3vw,3rem); }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr; } }
.foot-nameplate { font: 900 2rem var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.foot-motto { font: 500 .74rem var(--furn); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: .4rem 0 .3rem; }
.foot-latin { font: 400 .72rem var(--mono); letter-spacing: .1em; color: var(--ink-4); margin: 0; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem,1fr)); gap: 1.6rem; }
.foot-col h4 { font: 700 .68rem var(--furn); letter-spacing: .17em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem; }
.foot-col a { display: block; font: 400 .85rem/1.75 var(--furn); color: var(--ink-2); }
.foot-col a:hover { color: var(--accent); }
.foot-legal { border-top: 1px solid var(--rule); }
.foot-legal p { max-width: var(--wrap); margin: 0 auto; padding: 1.2rem clamp(1rem,3vw,2.4rem); font: 400 .8rem/1.6 var(--furn); color: var(--ink-3); }
.foot-legal strong { color: var(--accent); letter-spacing: .06em; }
.foot-legal a { border-bottom: 1px solid var(--rule-strong); }
.foot-copy { border-top: 1px solid var(--rule); color: var(--ink-4) !important; }

/* print — because it is a newspaper */
@media print {
  .satire-bar, .nav, .art-rail, .verdict, .cmt-form, .foot-cols, .rail-tools { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .article { max-width: none; }
  .art-title { font-size: 26pt; }
}

/* ── the comparative check ────────────────────────────────────────────────── */
.coverage { background: var(--paper-3); border: 1px solid var(--rule-strong); padding: clamp(1.2rem,2.4vw,1.8rem); }
.coverage-head { font: 700 .82rem var(--furn); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 .6rem; padding-bottom: .6rem; border-bottom: 1.5px solid var(--rule-strong); }
.coverage-note { font: 400 .86rem/1.55 var(--furn); color: var(--ink-2); margin: 0 0 1.2rem; }
.coverage-note a { border-bottom: 1px solid var(--accent); color: var(--accent); }
.coverage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.cov { background: var(--paper); border-left: 3px solid var(--rule-strong); padding: .9rem 1.1rem; }
.cov--us { border-left-color: var(--accent); background: var(--paper-2); }
.cov-outlet { font: 700 .72rem var(--furn); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.cov--us .cov-outlet { color: var(--accent); }
.cov-us-flag { font-weight: 500; letter-spacing: .05em; text-transform: none; font-style: italic; color: var(--ink-4); }
.cov-headline { font: 700 1.06rem/1.28 var(--display); margin: .3rem 0 .45rem; }
.cov-angle { font: 400 .89rem/1.5 var(--text); color: var(--ink-2); margin: 0 0 .7rem; }
.cov-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.4rem; }
@media (max-width: 620px) { .cov-cols { grid-template-columns: 1fr; } }
.cov-cols h4 { font: 700 .63rem var(--furn); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 .25rem; }
.cov-cols p { font: 400 .86rem/1.5 var(--furn); color: var(--ink-2); margin: 0; max-width: none; }
.compare-index { margin-top: 2.6rem; }

/* ── external assessments ─────────────────────────────────────────────────── */
.assess-list { display: flex; flex-direction: column; gap: 1.6rem; margin: 2rem 0 2.6rem; }
.assess { border: 1px solid var(--rule-strong); background: var(--paper-2); padding: clamp(1.1rem,2.4vw,1.6rem); }
.assess--bad { border-color: var(--accent); border-width: 2px; }
.assess-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.assess-head h2 { font: 800 1.28rem/1.2 var(--display); margin: 0 0 .2rem; }
.assess-kind { font: 500 .74rem var(--furn); color: var(--ink-3); margin: 0; }
.assess-badge { font: 700 .62rem var(--furn); letter-spacing: .13em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 2px; white-space: nowrap; }
.assess-badge--acc { background: var(--verify); color: #fff; }
.assess-badge--bad { background: var(--accent); color: #fff; }
.assess-badge--mix { background: var(--contest); color: #fff; }
.assess-score { font: 600 1.02rem var(--mono); color: var(--accent); margin-bottom: .15rem; }
.assess-band { font: 400 .84rem var(--furn); color: var(--ink-3); margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dotted var(--rule-strong); }
.assess-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; margin-bottom: 1rem; }
@media (max-width: 680px) { .assess-grid { grid-template-columns: 1fr; } }
.assess-grid h3, .assess-ours h3 { font: 700 .64rem var(--furn); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 .3rem; }
.assess-grid p, .assess-ours p { font: 400 .89rem/1.55 var(--furn); color: var(--ink-2); margin: 0 0 .4rem; max-width: none; }
.assess-quote { border-left: 3px solid var(--ink-3); margin: 0 0 1rem; padding: .2rem 0 .2rem 1rem; font: italic 400 .95rem/1.6 var(--text); color: var(--ink); }
.assess-ours { background: var(--paper-3); padding: .8rem 1rem; border-left: 3px solid var(--accent); }
.assess-ours a { color: var(--accent); border-bottom: 1px solid currentColor; font-weight: 600; }

/* ── small screens ────────────────────────────────────────────────────────── */
/* The three-column masthead is a broadsheet conceit and does not survive a
   phone: below 760px the rails stack under the nameplate and the reading
   tools move to a row of their own. */
@media (max-width: 760px) {
  .masthead-inner {
    grid-template-columns: 1fr;
    gap: .5rem;
    padding-bottom: .9rem;
  }
  .masthead-rail { text-align: center; font-size: .64rem; }
  .masthead-rail--right { text-align: center; order: 3; }
  .masthead-rail--left { order: 2; }
  .nameplate-wrap { order: 1; }
  .rail-tools { justify-content: center; margin-top: .6rem; }
  .rail-latin { display: none; }
  /* On a phone the price and page count are pure decoration and cost the
     reader 40px of the first screen. The tools stay. */
  .masthead-rail--right .rail-line { display: none; }
  .nav { padding-right: 0; }
  .nav-list { padding-right: 1rem; }
  .nav-list::after { content: ""; flex: 0 0 .5rem; }
}
@media (max-width: 560px) {
  :root { --gap: 1rem; }
  .satire-bar { font-size: .72rem; gap: .5rem; padding: .45rem 1rem; }
  .satire-more { margin-left: 0; width: 100%; }
  .art-byline { flex-direction: column; gap: .8rem; }
  .verdict-buttons .vbtn { flex: 1 1 8rem; justify-content: center; }
  .doc-facts { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .doc-facts dt { padding-top: .5rem; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .comic-strip { grid-template-columns: 1fr 1fr; }
  .panel:nth-child(2n) { border-right: 0; }
  .panel:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .assess-head { flex-direction: column; }
  table { font-size: .8rem; }
  .data-table, .vault-table { overflow-x: auto; display: block; }
}
/* Any wide block inside prose scrolls itself rather than the page. */
.prose table, .art-body table, .doc-type, .vault-table { max-width: 100%; }
.data-table { overflow-x: auto; }

/* ── desk fronts ──────────────────────────────────────────────────────────── */
.desk-head { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: clamp(1.2rem,3vw,3rem); align-items: end;
  padding: clamp(1.6rem,3.6vw,3rem) 0 1.2rem; border-bottom: 3px double var(--rule-strong); }
@media (max-width: 860px) { .desk-head { grid-template-columns: 1fr; align-items: start; gap: 1rem; } }
.desk-eyebrow { font: 600 .64rem var(--furn); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.desk-title { font: 800 clamp(2.4rem,6vw,4.4rem)/0.98 var(--display); margin: 0 0 .5rem; letter-spacing: -.022em; }
.desk-standfirst { font: 600 .74rem var(--furn); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.desk-blurb { font: 400 1rem/1.6 var(--text); color: var(--ink-2); margin: 0; max-width: 46ch; padding-bottom: .3rem; }

.desk-bar { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: clamp(1.2rem,3vw,3rem);
  padding: 1.1rem 0 1.3rem; border-bottom: 1px solid var(--rule); margin-bottom: clamp(1.4rem,3vw,2.2rem); }
@media (max-width: 860px) { .desk-bar { grid-template-columns: 1fr; gap: 1.2rem; } }
.desk-bar-label { display: block; font: 700 .62rem var(--furn); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .6rem; }
.desk-bar-people { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; align-items: flex-start; }
.desk-bar-people > .desk-bar-label { flex: 0 0 100%; }
.desk-person { display: flex; align-items: center; gap: .55rem; }
.desk-portrait { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 1px solid var(--rule); flex: none; }
.desk-portrait .portrait { width: 100%; height: 100%; }
.desk-person-name { display: block; font: 600 .84rem var(--furn); }
.desk-person:hover .desk-person-name { color: var(--accent); }
.desk-person-n { display: block; font: 400 .68rem var(--furn); color: var(--ink-4); }
.desk-bar-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem 1rem; margin: 0; align-content: start; }
.desk-bar-stats dt { font: 600 .6rem var(--furn); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.desk-bar-stats dd { margin: 0; font: 700 1.15rem var(--display); color: var(--ink); font-variant-numeric: lining-nums; }
@media (max-width: 480px) { .desk-bar-stats { grid-template-columns: repeat(2, 1fr); } }

.sec-grid-2 { display: grid; grid-template-columns: minmax(0,2.3fr) minmax(0,1fr); gap: clamp(1.6rem,3.4vw,3rem); }
@media (max-width: 1000px) { .sec-grid-2 { grid-template-columns: 1fr; } }
.sec-rail { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1001px) { .sec-rail { border-left: 1px solid var(--rule); padding-left: clamp(1rem,2vw,1.9rem); } }

/* ── inside today's paper ─────────────────────────────────────────────────── */
.inside { border-top: 3px double var(--rule-strong); border-bottom: 3px double var(--rule-strong);
  margin: clamp(1.6rem,3vw,2.4rem) 0; padding: 1.1rem 0 1.3rem; }
.inside-head { font: 700 .78rem var(--furn); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .9rem; }
.inside-head em { font-family: var(--display); font-style: italic; letter-spacing: 0; text-transform: none; font-size: 1.15em; }
.inside-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem clamp(1.2rem,2.6vw,2.4rem); }
.inside-item { display: grid; grid-template-columns: 8.5rem 1fr; gap: .7rem; align-items: baseline;
  padding: .38rem 0; border-bottom: 1px dotted var(--rule); }
.inside-desk { font: 700 .62rem var(--furn); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.inside-item--op .inside-desk { color: var(--opinion); }
.inside-line { font: 400 .89rem/1.35 var(--text); color: var(--ink-2); }
.inside-line:hover { color: var(--accent); }
@media (max-width: 560px) { .inside-item { grid-template-columns: 1fr; gap: .1rem; } }

/* ── the live cryptogram ──────────────────────────────────────────────────── */
.puzzle--live { border-top-width: 3px; }
.cryptogram { margin: 1.4rem 0; }
.cg-grid { display: flex; flex-wrap: wrap; gap: .5rem 1.05rem; margin-bottom: 1.1rem; }
.cg-word { display: flex; gap: .18rem; }
.cg-cell { display: flex; flex-direction: column; align-items: center; gap: .18rem; }
.cg-in {
  width: 1.55rem; height: 1.9rem; text-align: center; text-transform: uppercase;
  font: 600 1rem var(--mono); color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: 2px; padding: 0;
}
.cg-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--paper-2); }
.cg-key { font: 500 .6rem var(--mono); color: var(--ink-4); letter-spacing: .04em; }
.cg-punc { align-self: flex-start; font: 600 1rem var(--mono); color: var(--ink-3); padding-top: .35rem; }
.cg-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cg-bar button {
  background: var(--paper-3); border: 1px solid var(--rule-strong); color: var(--ink);
  font: 600 .78rem var(--furn); padding: .42rem .85rem; border-radius: 2px; cursor: pointer;
}
.cg-bar button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cg-status { font: 400 .8rem var(--furn); color: var(--ink-3); }
.cryptogram.is-solved .cg-in { border-color: var(--love); background: color-mix(in srgb, var(--love) 12%, var(--paper)); }
.cryptogram.is-solved .cg-status { color: var(--love); font-weight: 600; }
.puzzle-hint { margin-top: 1rem; font-size: .9rem; }
.puzzle-hint summary { cursor: pointer; font: 600 .78rem var(--furn); letter-spacing: .06em; color: var(--accent); }
.puzzle-hint p { margin: .6rem 0 0; color: var(--ink-2); max-width: 62ch; }

/* The page head already rules off; the first puzzle must not rule again. */
.puzzle:first-of-type { border-top: 0; padding-top: 0; }

/* ── who catches our mistakes ─────────────────────────────────────────────── */
.catch-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: clamp(1.2rem,3vw,2.4rem); align-items: start; }
@media (max-width: 720px) { .catch-grid { grid-template-columns: 1fr; } }
.catch-big { border: 2px solid var(--accent); padding: 1.2rem 1.3rem; text-align: center; }
.catch-n { font: 800 clamp(3rem,7vw,4.4rem)/1 var(--display); color: var(--accent); font-variant-numeric: lining-nums; }
.catch-k { font: 600 .78rem/1.4 var(--furn); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: .5rem; }
.catch-k span { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--ink-4); font-size: .92em; }

/* ── the board's votes & thirty years of income ───────────────────────────── */
.votes { margin: 2.4rem 0; }
.vote-table { max-width: none; }
.vote-year { font: 700 1rem var(--mono); }
.vote-margin { font-family: var(--mono); white-space: nowrap; }
.vote-note { font-size: .86rem; color: var(--ink-2); }
.vote--future { opacity: .62; }
.vote--future td { font-style: italic; }

.hist-chart { display: flex; gap: clamp(.4rem,1.4vw,1.1rem); align-items: flex-end; height: 190px; margin: 1.4rem 0 .8rem; }
.hist-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.hist-stack { display: flex; flex-direction: column-reverse; width: 100%; height: 150px; border: 1px solid var(--rule-strong); }
.hist-seg { display: block; width: 100%; }
.hist-seg--subs  { background: var(--ink-3); }
.hist-seg--mer   { background: var(--accent); }
.hist-seg--arch  { background: var(--verify); }
.hist-seg--class { background: var(--contest); }
.hist-year { font: 500 .68rem var(--furn); color: var(--ink-3); margin-top: .35rem; }
.hist-val { font: 700 .72rem var(--mono); color: var(--accent); }
.hist-key { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font: 400 .76rem var(--furn); color: var(--ink-3); margin-bottom: .9rem; }
.hist-key i { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -1px; }
.hist-note { font: 400 .93rem/1.6 var(--text); color: var(--ink-2); max-width: 68ch; }

/* ── horoscopes ───────────────────────────────────────────────────────────── */
.horo-top { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: clamp(1.4rem,3vw,2.8rem); align-items: start; margin-bottom: 2rem; }
@media (max-width: 860px) { .horo-top { grid-template-columns: 1fr; } }
.horo-ephem { background: var(--paper-2); border: 1px solid var(--rule); padding: 1.1rem 1.2rem; }
.horo-ephem dl { margin: 0 0 .8rem; font: 400 .84rem var(--furn); }
.horo-ephem dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .34rem 0; border-bottom: 1px dotted var(--rule); }
.horo-ephem dt { color: var(--ink-3); }
.horo-ephem dd { margin: 0; font-family: var(--mono); font-weight: 600; }
.horo-birthday { border-top: 3px double var(--rule-strong); border-bottom: 3px double var(--rule-strong); padding: 1.2rem 0 1.3rem; margin-bottom: 2rem; }
.horo-birthday h2 { font: 800 1.4rem var(--display); margin: 0 0 .5rem; }
.horo-birthday p { font: 400 1.08rem/1.55 var(--text); margin: 0 0 .5rem; max-width: 64ch; }
.horo-glyph { color: var(--accent); margin-right: .45rem; font-size: 1.1em; }
.horo-actual { font: 400 .74rem/1.4 var(--furn); color: var(--ink-4); border-top: 1px dotted var(--rule); padding-top: .4rem; margin: .5rem 0 0; }
.horo-actual strong { color: var(--ink-3); }

/* ── typographic refinement ───────────────────────────────────────────────── */
/* Balanced headline wrapping, no orphans in body copy, hanging punctuation,
   and figures that behave: old-style in prose, lining in anything tabular. */
.lead-title, .art-title, .card-title, .row-title, .page-title, .desk-title,
.section-head, .cov-headline, .doc-title, .col-card h3, .promise h2, .horo h3 {
  text-wrap: balance;
}
.art-body p, .prose p, .card-dek, .row-dek, .lead-dek, .art-dek { text-wrap: pretty; }
.art-body, .prose { hanging-punctuation: first last; }
.art-body, .prose, .card-dek, .row-dek, .brief, .rank-list a, .rel-list a {
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "calt" 1;
}
table, .kpi-n, .catch-n, .stat-dl dd, .desk-bar-stats dd, .doc-facts dd,
.vault-list, .cg-in, .assess-score, .hist-val, .vote-year {
  font-variant-numeric: lining-nums tabular-nums;
}
.dateline, .desk, .label, .rail-head, .section-head, .motto, .masthead-rail {
  font-feature-settings: "kern" 1, "liga" 1, "lnum" 1;
}
/* The drop cap sits on the baseline of line three rather than floating. */
.art-body p.lede::first-letter, .dateline-line::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}
@supports not (initial-letter: 3) {
  .art-body p.lede::first-letter, .dateline-line::first-letter {
    float: left; font-size: 3.9rem; line-height: .78; padding: .16rem .55rem .1rem 0;
  }
}
.pullquote p { text-wrap: balance; }
.art-title, .lead-title, .desk-title, .page-title { font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; }

/* The rank list is a two-column grid (numeral, content). Without this the meta
   line becomes a third grid item and drops into the numeral column. */
.rank-list li > a { grid-column: 2; }
.rank-list .rank-meta { grid-column: 2; }
/* Eight KPIs should fill two clean rows, not seven and an orphan. */
.kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .kpi-grid { grid-template-columns: 1fr; } }

.horo h3 { align-items: baseline; }
.horo-name { display: inline-flex; align-items: baseline; }
.horo-glyph { font-family: var(--text); font-variant-emoji: text; }

/* ── threaded letters ─────────────────────────────────────────────────────── */
.cmt-replies { list-style: none; margin: .9rem 0 0 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--rule); }
.cmt-replies .cmt { padding: .8rem 0 .2rem; border-bottom: 0; }
.cmt-replies .cmt--staff { background: transparent; border-left: 0; padding-left: 0; }
.cmt--changed { border-left: 3px solid var(--verify); padding-left: 1rem; }
.cmt-badge--changed { background: var(--verify); }

.lang-hits { margin-top: 1.4rem; }
.lang-hits h3 { font: 700 .7rem var(--furn); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .6rem; }
.lang-hits ul { list-style: none; margin: 0 0 .9rem; padding: 0; font: 400 .88rem/1.7 var(--furn); }
.lang-hits li { padding: .22rem 0; border-bottom: 1px dotted var(--rule); }
.lang-zone { font-size: .74em; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-left: .4rem; }

/* Wide tables scroll inside themselves; the page never scrolls sideways. */
@media (max-width: 760px) {
  .plain-table, .vault-table, .vote-table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; max-width: 100%;
  }
  .plain-table td, .vault-table td, .vote-table td { white-space: normal; min-width: 6rem; }
  .vote-note { min-width: 16rem; }
}

/* ── figures: the diagram, not the mood ───────────────────────────────────── */
.figure {
  --bg: var(--paper-2);
  --fg: var(--ink);
  --warn: var(--contest);
  margin: 2.4rem 0;
  max-width: min(46rem, 100%);
  min-width: 0;
}
.figure-frame {
  max-width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  padding: clamp(.9rem, 2vw, 1.5rem);
  overflow-x: auto;
}
.figure-svg { width: 100%; height: auto; min-width: 30rem; display: block; }
.figure-head {
  font: 600 .8rem/1.4 var(--furn); color: var(--ink); margin: 0 0 .55rem;
  padding-bottom: .5rem; border-bottom: 1.5px solid var(--rule-strong);
}
.figure-kicker {
  font-weight: 800; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-right: .5rem;
}
.figure-foot { font: 400 .78rem/1.5 var(--furn); color: var(--ink-3); margin-top: .55rem; }

/* SVG text classes — set here so both themes inherit the ink tokens */
.figure-svg .f-lab   { font: 600 15px var(--furn); fill: var(--ink); }
.figure-svg .f-lab--grade { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.figure-svg .f-note  { font: 400 12.5px var(--furn); fill: var(--ink-3); }
.figure-svg .f-num   { font: 600 13px var(--mono); fill: var(--ink-3); }
.figure-svg .f-num--val { fill: var(--ink); }
.figure-svg .f-flag  { font: 800 11px var(--furn); letter-spacing: .12em; fill: var(--accent); }
.figure-svg .f-flag--disputed { fill: var(--contest); }
.figure-svg .f-node  { font: 600 13.5px var(--furn); fill: var(--ink); }
.figure-svg .f-node--core { font-weight: 800; fill: var(--accent); }
.figure-svg .f-edge  { font: 500 11px var(--furn); fill: var(--ink-4); }
.figure-svg .f-when  { font: 700 13px var(--mono); fill: var(--accent); }
.figure-svg .f-what  { font: 500 15px var(--furn); fill: var(--ink); }
.figure-svg .f-what--mark { font-weight: 800; }
@media (max-width: 620px) { .figure-svg { min-width: 26rem; } }

/* A scroll container only contains its content if its ancestors are allowed to
   shrink below their min-content width. Without these, a wide diagram pushes
   the whole article — and therefore the page — sideways on a phone. */
.article, .art-body, .article-wrap > * { min-width: 0; }
.art-body > * { max-width: 100%; }
.figure-svg .f-num--in { fill: var(--paper); font-weight: 700; }

/* A diagram in the lead slot is the picture, so it drops the frame chrome and
   fills the well the engraving would have occupied. */
.lead-art--figure { aspect-ratio: auto; background: var(--paper-2); border: 1px solid var(--rule-strong); }
.lead-art--figure .figure { margin: 0; max-width: none; }
.lead-art--figure .figure-frame { border: 0; background: transparent; padding: clamp(.8rem,1.6vw,1.3rem); }
.lead-art--figure .figure-head { padding: clamp(.8rem,1.6vw,1.3rem) clamp(.8rem,1.6vw,1.3rem) .5rem; margin: 0; }
.lead-art--figure .figure-foot { padding: 0 clamp(.8rem,1.6vw,1.3rem) clamp(.8rem,1.6vw,1.3rem); margin: 0; }
.lead-art--figure .figure-svg { min-width: 0; }
/* …but not on a phone, where `min-width: 0` was the whole bug.
   It exists so the lead diagram fits the lead slot on a desktop front, where
   the slot is already ~1000px and the figure is legible anyway. On a 390px
   screen it squeezed a 1060-unit viewBox into 330px — a 0.31 scale — rendering
   11-15px labels at an effective 3.4-4.7px. Every other figure on the site has
   a legibility floor and scrolls inside its frame; the one figure every visitor
   sees first was the only one exempt.

   60rem holds the scale at 0.91, so an 11px label lands at 10px and the reader
   pans about two screens. A first attempt at 26rem only reached 4.3px and also
   broke the page, because the grid track it sits in was a bare `1fr` and could
   not shrink; that is fixed above with minmax(0,1fr), which is why this one
   scrolls inside the frame instead. */
@media (max-width: 620px) { .lead-art--figure .figure-svg { min-width: 60rem; } }


/* ── The archive, as an index ─────────────────────────────────────────────── */
.arch-jump { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: 0 0 2rem; }
.arch-jump a {
  display: inline-flex; align-items: baseline; gap: .35rem;
  font: 600 .74rem var(--furn); letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: .32rem .6rem; border-radius: 2px; color: var(--ink-2);
}
.arch-jump a:hover { border-color: var(--accent); color: var(--accent); }
.arch-n { font: 500 .72rem var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.arch-desk { margin-bottom: 2.4rem; scroll-margin-top: 1.5rem; }
.arch-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(1.6rem, 4vw, 3.2rem); }
.arch-line {
  break-inside: avoid; padding: .5rem 0; border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
}
.arch-line > a { font: 600 1.02rem/1.28 var(--text); color: var(--ink); flex: 1 1 auto; }
.arch-line > a:hover { color: var(--accent); }
.arch-meta {
  flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: .4rem;
  font: 500 .72rem var(--furn); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.arch-meta .label { font-size: .6rem; padding: .1rem .3rem; }
@media (max-width: 760px) { .arch-list { columns: 1; } }

/* ── Letters page: the letters themselves ─────────────────────────────────── */
.ltr-block { margin-bottom: 2.6rem; }
.ltr { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--rule); }
.ltr--changed { border-left: 3px solid var(--accent); padding-left: 1.1rem; }
.ltr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; margin-bottom: .35rem; }
.ltr-name { font: 700 .95rem var(--furn); letter-spacing: .01em; }
.ltr-where { font: 500 .76rem var(--furn); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.ltr-when { margin-left: auto; font: 500 .74rem var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ltr-flag {
  font: 700 .66rem var(--furn); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .5rem;
}
.ltr-body p { font: 400 1.02rem/1.6 var(--text); margin: 0 0 .6rem; }
.ltr-re { font: 500 .78rem var(--furn); color: var(--ink-3); margin: .4rem 0 0; }
.ltr-reply {
  margin: .9rem 0 0 0; padding: .85rem 1rem; background: var(--paper-2);
  border-left: 2px solid var(--rule-strong);
}
.ltr-reply .ltr-body p { font-size: .96rem; margin-bottom: .4rem; }
@media (max-width: 560px) { .ltr-when { margin-left: 0; flex-basis: 100%; } }

/* ── Right of reply: an index, then ten thousand words ────────────────────── */
.reply-lede { font: 400 1rem/1.55 var(--text); color: var(--ink-2); margin: 0 0 1.2rem; max-width: 60ch; }
.reply-index { list-style: none; margin: 0 0 2.4rem; padding: 0; columns: 2; column-gap: clamp(1.4rem,3vw,2.6rem); }
.reply-index li { break-inside: avoid; padding: .42rem 0; border-bottom: 1px solid var(--rule); }
.reply-index a { font: 600 .94rem/1.3 var(--text); color: var(--ink); }
.reply-index a:hover { color: var(--accent); }
.reply-index-on { display: block; font: 400 .76rem/1.35 var(--furn); color: var(--ink-3); }
.reply-entry { scroll-margin-top: 1.5rem; }
.reply-top { margin: .2rem 0 2rem; }
.reply-top a { font: 500 .74rem var(--furn); color: var(--ink-3); letter-spacing: .04em; }
.reply-top a:hover { color: var(--accent); }
@media (max-width: 760px) { .reply-index { columns: 1; } }

/* ── The acrostic ─────────────────────────────────────────────────────────── */
.acrostic { margin: 1rem 0 0; }
.ac-list { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.ac-row {
  display: grid; grid-template-columns: 1.6rem 1fr auto 1.2rem;
  align-items: baseline; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--rule);
}
.ac-n { font: 500 .78rem var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ac-clue { font: 400 .96rem/1.4 var(--text); }
.ac-len { font: 500 .78rem var(--mono); color: var(--ink-3); }
.ac-in {
  font: 600 .92rem var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .45rem; border: 1px solid var(--rule-strong); background: var(--paper);
  color: var(--ink); border-radius: 2px; min-width: 6.5rem;
}
.ac-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ac-in.is-full { border-color: var(--accent); }
.ac-init { display: none; }
.ac-readout { margin: 0 0 1rem; }
.ac-readout-label {
  display: block; font: 600 .68rem var(--furn); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .4rem;
}
.ac-readout-cells { display: flex; flex-wrap: wrap; gap: .28rem; }
.ac-cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 2rem; border: 1px solid var(--rule-strong);
  background: var(--paper-2); font: 700 1rem var(--mono); color: var(--ink-3);
}
.ac-cell.is-set { color: var(--ink); background: var(--paper); border-color: var(--ink-3); }
.acrostic.is-solved .ac-cell { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) {
  .ac-row { grid-template-columns: 1.4rem 1fr; }
  .ac-in { grid-column: 2; min-width: 0; width: 100%; }
}

/* ── The Open File ────────────────────────────────────────────────────────── */
.of-block { margin-bottom: 2.4rem; }
.of-list { list-style: none; margin: 0; padding: 0; }
.of-row { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.of-row--kept { opacity: .72; }
.of-when { font: 600 .76rem var(--furn); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); padding-top: .1rem; }
.of-row--kept .of-when { color: var(--ink-3); }
.of-owed { font: 400 1.02rem/1.5 var(--text); margin: 0 0 .3rem; }
.of-from { font: 400 .8rem var(--furn); color: var(--ink-3); margin: 0; }
.openfile-rail { margin-top: 1.6rem; padding-top: 1rem; border-top: 2px solid var(--ink); }
.of-mini { list-style: none; margin: .6rem 0 .4rem; padding: 0; }
.of-mini li { padding: .45rem 0; border-bottom: 1px solid var(--rule); }
.of-mini a { display: block; font: 500 .88rem/1.35 var(--text); color: var(--ink); }
.of-mini a:hover { color: var(--accent); }
.of-mini-when { display: block; font: 500 .7rem var(--furn); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; }
@media (max-width: 620px) { .of-row { grid-template-columns: 1fr; gap: .2rem; } }

/* ── Two strips ───────────────────────────────────────────────────────────── */
.strip-block { margin-bottom: 3rem; }
.strip-standfirst { font: 400 1rem/1.55 var(--text); color: var(--ink-2); max-width: 62ch; margin: 0 0 1.4rem; }
/* A pocket cartoon is one panel and should not stretch to the full measure. */
.comic-strip:has(> .panel:only-child) { max-width: 34rem; grid-template-columns: 1fr; }
.comic-strip > .panel:only-child .panel-cap { font-size: .95rem; line-height: 1.45; }
/* A pocket cartoon is a wide, short panel, not a square one. */
.comic-strip:has(> .panel:only-child) .panel-art { aspect-ratio: 16/7; }
.pocket-front { margin: 1.6rem 0 0; }
.pocket-front .comic { margin-bottom: 1rem; }

/* ── the vault's own label ─────────────────────────────────────────────────
   Set into the sheet head beside the reference number, not floated under the
   page, so that a screenshot cropped to the document still carries it. A
   reader asked for this in the letters column and was right. */
.doc-invented {
  flex-basis: 100%;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid currentColor;
  font-family: var(--mono, ui-monospace, "IBM Plex Mono", monospace);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

/* ── very wide screens ────────────────────────────────────────────────────────
   The paper was capped at 1320px, which on a 1600px+ monitor rendered it as a
   narrow strip in a field of empty paper. A broadsheet given more room does not
   set longer lines — it sets MORE COLUMNS. So everything below only widens the
   canvas and splits the extra space into columns; no measure gets longer.

   Deliberately starts at 1600px so that the 390 / 768 / 1440 measurements the
   verify script takes are untouched by any of it. */
@media (min-width: 1600px) {
  :root { --wrap: 1560px; }
  /* The lead's opening goes to three columns instead of two. */
  .lead-open { column-count: 3; column-gap: 1.9rem; }
}
/* No fourth card, at any width. Tried at 1600 and again at 1900 and it shrank
   the art both times — the extra column always eats more width than the wider
   canvas adds. Three cards that grow with the screen beat four that shrink.
   Measured: 391px at 1440, 471px at 1600, 508px at 1920. */
@media (min-width: 1900px) {
  :root { --wrap: 1720px; }
}
/* An ultra-wide monitor was still showing a third of the window as empty paper.
   The canvas widens again; the measure does not, because the extra space keeps
   going into columns. */
@media (min-width: 2300px) {
  :root { --wrap: 1980px; }
  .lead-open { column-count: 4; }
}

/* ── river rows carry a plate ─────────────────────────────────────────────────
   The front page measured 6.2% picture by area. A broadsheet river is a list,
   not a feed, so the plate is small and sits to the side rather than on top —
   the headline still leads the row. Below 620px it is dropped entirely, because
   on a phone the thumbnail costs a headline and headline density is the thing
   the phone front is checked for. */
.row--art { display: grid; grid-template-columns: minmax(0,1fr) 132px; gap: clamp(.9rem, 2vw, 1.5rem); align-items: start; }
.row-thumb { display: block; border: 1px solid var(--rule); background: var(--plate); overflow: hidden; aspect-ratio: 4/3; }
.row-thumb .engraving { width: 100%; height: 100%; }
.row-thumb:hover { border-color: var(--accent); }
@media (min-width: 1600px) { .row--art { grid-template-columns: minmax(0,1fr) 176px; } }
@media (max-width: 620px) { .row--art { grid-template-columns: 1fr; } .row-thumb { display: none; } }

/* ── section front: lead beside a shoulder ────────────────────────────────────
   A desk front used to open with one full-width XL card 670px tall, so a reader
   who clicked into a desk saw exactly one story before the fold and had nothing
   to choose between. Same shape as the front page now: the lead keeps its size,
   two more headlines sit beside it. */
.sec-top { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(1.2rem, 2.6vw, 2.2rem); align-items: start; }
.sec-shoulder { display: flex; flex-direction: column; gap: 1.1rem; border-left: 1px solid var(--rule); padding-left: clamp(.9rem, 1.8vw, 1.6rem); }
@media (max-width: 940px) {
  .sec-top { grid-template-columns: 1fr; }
  .sec-shoulder { border-left: 0; padding-left: 0; border-top: 3px double var(--rule-strong); padding-top: 1.2rem; }
}

/* ── touch targets ────────────────────────────────────────────────────────────
   Measured on a 390px screen: the masthead tools were 32x27px and the desk
   kicker link 12px tall. Both are standalone controls, not prose, so the 44px
   guidance applies to them — inline links inside a sentence are exempt and are
   deliberately left alone here, because padding those would wreck the setting.

   The kicker gets its hit area from a pseudo-element rather than from padding,
   so nothing on the page moves: the phone front is checked for headline density
   and any vertical growth here would cost a headline. */
/* Both conditions on purpose. `pointer: coarse` is the semantically correct
   test and catches a touch laptop at full width — but a headless browser at a
   390px viewport still reports `fine`, so a rule written on it alone cannot be
   verified here, and an unverifiable fix is not a fix. The width clause is what
   makes it observable. */
@media (pointer: coarse), (max-width: 620px) {
  .tool { min-width: 44px; min-height: 44px; }
  .desk { position: relative; }
  .desk::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 44px; min-width: 44px;
  }
}

/* ── the day's edition, beside the lead ─────────────────────────────────────
   Dated, timed, complete: the answer to "did the desk file today?" read off
   the front page rather than out of a log. */
.edition-box { margin-top: 1.6rem; border-top: 3px double var(--rule-strong); padding-top: .9rem; }
.edition-date { margin: -.35rem 0 .55rem; font: 500 .76rem var(--furn); color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; }
.edition-date time { display: block; font: 700 1.02rem/1.25 var(--display); color: var(--ink); letter-spacing: 0; text-transform: none; margin-bottom: .18rem; }
.brief--edition .brief-desk time { font-family: var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.more-link--small { font-size: .8rem; margin-top: .55rem; }

/* ── /dashboard ────────────────────────────────────────────────────────────── */
.dash-ranges { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
.dash-range { font: 600 .72rem var(--furn); letter-spacing: .08em; text-transform: uppercase; padding: .38rem .7rem; border: 1px solid var(--rule-strong); color: var(--ink-2); border-radius: 2px; }
.dash-range:hover { color: var(--accent); border-color: var(--accent); }
.dash-range.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dash-h3 { font: 700 .78rem var(--furn); letter-spacing: .16em; text-transform: uppercase; margin: 1.8rem 0 .7rem; color: var(--ink); }
.kpi-sub { font: 400 .7rem/1.35 var(--furn); color: var(--ink-4); margin-top: .22rem; }
.kpi-sub.is-up { color: var(--love); }
.kpi-sub.is-down { color: var(--hate); }
.kpi--alert .kpi-n { color: var(--hate); }
.kpi-grid + .cal-chart { margin-top: -1rem; }
.cal-chart { border: 1px solid var(--rule); background: var(--paper-2); padding: .6rem .8rem .2rem; }
.cal-chart svg { width: 100%; height: auto; display: block; }
.chart-legend { font: 400 .74rem/1.5 var(--furn); color: var(--ink-3); margin: .5rem 0 0; }
.chart-legend .sw { display: inline-block; width: .7rem; height: .7rem; vertical-align: -1px; margin-right: .3rem; }
.table-scroll { overflow-x: auto; }
.ed-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ed-table th { text-align: left; font: 700 .64rem var(--furn); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: .4rem .6rem .4rem 0; border-bottom: 1px solid var(--rule-strong); }
.ed-table td { padding: .6rem .6rem .5rem 0; border-bottom: 1px dotted var(--rule); vertical-align: top; }
.ed-table tr.is-today td { background: var(--paper-2); }
.ed-day { white-space: nowrap; font: 600 .84rem/1.3 var(--furn); color: var(--ink); }
.ed-day small { display: block; font-weight: 400; font-size: .68rem; color: var(--ink-4); }
.ed-n { font: 800 1.35rem/1 var(--display); color: var(--accent); text-align: center; width: 3rem; font-variant-numeric: lining-nums; }
.ed-n.is-zero { color: var(--hate); opacity: .6; }
.ed-story { display: block; font: 500 .93rem/1.35 var(--text); }
.ed-story:hover { color: var(--accent); }
.ed-story-meta { display: block; font: 400 .68rem/1.4 var(--furn); color: var(--ink-4); letter-spacing: .04em; margin: .1rem 0 .45rem; }
.ed-stories .ed-story-meta:last-child { margin-bottom: 0; }
.ed-empty { font-style: italic; color: var(--hate); }
.dash-empty { font-style: italic; color: var(--ink-3); font-size: .92rem; }
.plain-table--wide { max-width: none; }
.plain-table td.num, .plain-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.4rem, 3vw, 2.6rem); }
@media (max-width: 860px) { .dash-two { grid-template-columns: minmax(0, 1fr); } }

/* ── sharing ───────────────────────────────────────────────────────────────── */
.share { margin: 1.2rem 0 0; }
.share--compact { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 0; }
.share:not(.share--compact) { border-top: 3px double var(--rule-strong); padding-top: .9rem; margin-top: 2.2rem; }
.share-label { font: 700 .62rem var(--furn); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.share-head { font: 700 .78rem var(--furn); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .7rem; color: var(--ink); }
.share-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.share-btn { display: inline-block; font: 600 .72rem/1.2 var(--furn); letter-spacing: .06em; padding: .42rem .72rem; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink-2); background: transparent; cursor: pointer; text-decoration: none; }
.share-btn:hover { color: var(--accent); border-color: var(--accent); }
.share-btn--native { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.share-btn--native:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
@media (max-width: 760px) { .share-btn { padding: .62rem .85rem; font-size: .76rem; } }

/* ── the theories ──────────────────────────────────────────────────────────── */
.topic-tag { font: 700 .64rem var(--furn); letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-right: .6rem; white-space: nowrap; }
.topic-tag::after { content: "·"; color: var(--ink-4); margin-left: .6rem; }
.topic-tag:hover { text-decoration: underline; }
.topics-strip { display: flex; align-items: baseline; gap: .2rem 1.1rem; flex-wrap: wrap; padding: .55rem 0 .7rem; border-bottom: 1px solid var(--rule); margin-bottom: clamp(1rem, 2vw, 1.6rem); font: 600 .74rem var(--furn); letter-spacing: .08em; text-transform: uppercase; }
.topics-label { color: var(--ink-4); letter-spacing: .16em; font-size: .66rem; }
.topics-strip a { color: var(--ink-2); white-space: nowrap; }
.topics-strip a:hover { color: var(--accent); }
.topics-strip .topics-all { color: var(--accent); }
@media (max-width: 940px) { .topics-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .6rem; } .topics-strip::-webkit-scrollbar { display: none; } }
.since-strip { margin: -.4rem 0 1.2rem; font: 400 .88rem/1.5 var(--text); color: var(--ink-2); font-style: italic; }
.since-strip strong { color: var(--accent); font-style: normal; }
a.is-new::before { content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--accent); margin-right: .35em; vertical-align: .1em; }
.hub-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: -.6rem 0 1.8rem; font: 500 .8rem var(--furn); color: var(--ink-3); }
.hub-stats strong { font: 800 1.15rem var(--display); color: var(--accent); font-variant-numeric: lining-nums; margin-right: .15rem; }
.hub-grid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: clamp(1.6rem, 3.4vw, 3rem); }
@media (max-width: 1000px) { .hub-grid { grid-template-columns: minmax(0, 1fr); } }
.hub-rail { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1001px) { .hub-rail { border-left: 1px solid var(--rule); padding-left: clamp(1rem, 2vw, 1.9rem); } }
.hub-card { border: 1px solid var(--rule-strong); border-left: 6px solid var(--accent); background: var(--paper-2); padding: 1.1rem 1.3rem; margin: 0 0 1.8rem; }
.hub-card-kicker { font: 700 .62rem var(--furn); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.hub-card-title { font: 800 1.5rem/1.15 var(--display); margin: .25rem 0 .4rem; }
.hub-card-blurb { margin: 0 0 .5rem; font: 400 .98rem/1.5 var(--text); color: var(--ink-2); }
.hub-card-meta { margin: 0; font: 500 .78rem var(--furn); color: var(--ink-3); }
.hub-card-meta a { color: var(--accent); }
.did-you-mean { font: 400 1rem/1.5 var(--text); color: var(--ink-2); margin: -.6rem 0 1.4rem; }
.did-you-mean a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.tag--topic { background: var(--accent); color: var(--paper); border-color: var(--accent); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .66rem; }
.tag--topic:hover { color: var(--paper); background: var(--accent-ink); }
.topics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.topic-card { background: var(--paper); padding: 1.3rem 1.3rem 1.2rem; }
.topic-card-title { font: 800 1.35rem/1.15 var(--display); margin: 0 0 .5rem; }
.topic-card-title a:hover { color: var(--accent); }
.topic-card-blurb { margin: 0 0 .7rem; font: 400 .95rem/1.5 var(--text); color: var(--ink-2); }
.topic-card-meta { margin: 0; font: 500 .74rem var(--furn); color: var(--ink-3); letter-spacing: .03em; }
.rel-list--wide li { padding: .5rem 0; }
/* ── editions ──────────────────────────────────────────────────────────────── */
.ed-nav { display: flex; justify-content: space-between; gap: 1rem; font: 600 .8rem var(--furn); margin: -.6rem 0 1.6rem; padding-bottom: .8rem; border-bottom: 1px solid var(--rule); }
.ed-nav a { color: var(--accent); }
.ed-filed { margin: -.4rem 0 0; font: 500 .72rem var(--furn); color: var(--ink-4); letter-spacing: .04em; }
.ed-filed a { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: .66rem; font-weight: 700; }
.ed-days { list-style: none; margin: 0 0 1.6rem; padding: 0; columns: 2; column-gap: 2.4rem; }
@media (max-width: 640px) { .ed-days { columns: 1; } }
.ed-days li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dotted var(--rule); break-inside: avoid; font: 500 .92rem var(--text); }
.ed-days-n { font: 500 .72rem var(--furn); color: var(--ink-4); white-space: nowrap; }

/* ── nav: the More sheet was clipped by the scrolling desk strip ──────────── */
.nav { position: relative; }
@media (max-width: 900px) {
  .nav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3.2rem; pointer-events: none; background: linear-gradient(90deg, rgba(243,239,228,0), var(--paper) 70%); }
  html[data-theme="night"] .nav::after { background: linear-gradient(90deg, rgba(20,18,15,0), var(--paper) 70%); }
}
.nav-more-search { display: none; }
@media (max-width: 900px) {
  .nav-more-search { display: flex; gap: .4rem; padding: .6rem .7rem; border-bottom: 1px solid var(--rule); }
  .nav-more-search input { flex: 1; min-width: 0; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); font: 400 .95rem var(--text); padding: .5rem .6rem; }
  .nav-more-search button { background: var(--ink); color: var(--paper); border: 0; padding: .5rem .8rem; font: 600 .78rem var(--furn); }
}
.front-standfirst { margin: 0 0 .6rem; font: 400 .95rem/1.5 var(--text); font-style: italic; color: var(--ink-2); }
.front-standfirst a { font-style: normal; font: 600 .74rem var(--furn); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-left: .4rem; white-space: nowrap; }
.rail-explain { margin: -.5rem 0 .7rem; font: 400 .78rem/1.45 var(--text); font-style: italic; color: var(--ink-3); }
.read-next { border-top: 3px double var(--rule-strong); border-bottom: 1px solid var(--rule); padding: .9rem 0 1rem; margin: 1.8rem 0 .4rem; display: flex; flex-direction: column; gap: .45rem; }
.read-next-label { font: 700 .66rem var(--furn); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.read-next-link { font: 600 1.02rem/1.35 var(--display); color: var(--ink); }
.read-next-link:hover { color: var(--accent); }
.read-next .tag--topic { align-self: flex-start; margin-top: .3rem; }

/* On a phone the orientation line costs two lines above the lead and pushed the front to its headline floor; the About link lives in the More sheet and the footer there. */
@media (max-width: 940px) { .front-standfirst { display: none; } }

/* ── start here ────────────────────────────────────────────────────────────── */
.topics-start { color: var(--accent) !important; border: 1px solid var(--accent); padding: .18rem .5rem; border-radius: 2px; margin-right: .3rem; }
.start-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.start-item { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; padding: 1rem 0; border-bottom: 1px dotted var(--rule); }
.start-n { font: 800 1.6rem/1 var(--display); color: var(--accent); font-variant-numeric: lining-nums; }
.start-kicker { display: flex; align-items: baseline; gap: .1rem; margin-bottom: .2rem; }
.start-title { font: 700 1.25rem/1.2 var(--display); color: var(--ink); }
.start-title:hover { color: var(--accent); }
.start-why { margin: .35rem 0 0; font: 400 .95rem/1.5 var(--text); color: var(--ink-2); font-style: italic; }
.start-item--page .start-title { font-family: var(--furn); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }

/* The hidden native Share button was drawn anyway: .share-btn's display beat the attribute. */
.share-btn[hidden] { display: none !important; }
/* The filed-at line on an edition page sat on top of the byline. */
.ed-filed { margin-top: .35rem; }
/* On a phone the theories, search and Start Here were all behind a swipe. The
   tools row under the masthead now carries them; on desktop the nav has them. */
.tool--link { display: none; }
@media (max-width: 900px) {
  .tool--link { display: inline-flex; align-items: center; height: 44px; padding: 0 .75rem; font: 700 .66rem var(--furn); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--ink-2); white-space: nowrap; }
  .tool--link:hover { color: var(--accent); border-color: var(--accent); }
}

/* ── 8 Sep 2026: the calmer paper ──────────────────────────────────────────── */
.masthead-inner { padding-top: clamp(.7rem, 1.8vw, 1.2rem); padding-bottom: clamp(.5rem, 1.2vw, .8rem); }
.nameplate-word { font-size: clamp(2.1rem, 6.4vw, 4.6rem); }
.motto { margin-top: .4rem; }
.nav-search input { width: 12rem; opacity: 1; padding: .32rem .55rem; }
.nav-start { color: var(--accent) !important; }
.nav-more-panel { min-width: 15rem; }
@media (min-width: 901px) { .nav-more-panel { display: grid; grid-template-columns: repeat(3, minmax(11rem, 1fr)); gap: 0 1rem; padding: .6rem .5rem .8rem; min-width: 40rem; } }
.nav-group h4 { margin: .5rem 1.1rem .2rem; font: 700 .62rem var(--furn); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.nav-group a { padding: .34rem 1.1rem; }
.section-head .section-more { order: 2; margin-left: .9rem; font: 600 .72rem var(--furn); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.section-head::after { order: 1; }
.theories { margin: clamp(2rem, 4vw, 3rem) 0; }
.theories-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 900px) { .theories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .theories-grid { grid-template-columns: minmax(0, 1fr); } }
.card--theory { background: var(--paper); padding: 1.2rem 1.25rem 1.3rem; gap: .5rem; }
.card--theory .card-title { font-size: var(--hed-3); }
.card--theory .card-dek { font-size: .92rem; }
.theory-n { font: 700 .64rem var(--furn); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.theory-top { margin: .35rem 0 0; font: 400 .88rem/1.4 var(--text); color: var(--ink-2); border-top: 1px dotted var(--rule); padding-top: .55rem; }
.theory-top-label { font: 700 .6rem var(--furn); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-right: .3rem; }
.theory-top a { font-weight: 500; }
.theory-top a:hover { color: var(--accent); }
.front-grid { margin-top: .4rem; }
.subscribe { border-top: 3px double var(--rule-strong); padding-top: .9rem; }
.subscribe--compact { background: var(--paper-2); border: 1px solid var(--rule); border-top: 3px double var(--rule-strong); padding: .9rem 1rem 1rem; margin: 1.6rem 0 0; }
.subscribe-lead { margin: -.3rem 0 .7rem; font: 400 .92rem/1.5 var(--text); color: var(--ink-2); }
.subscribe-form { display: flex; gap: .4rem; flex-wrap: wrap; }
.subscribe-form input { flex: 1 1 11rem; min-width: 0; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); font: 400 .95rem var(--text); padding: .55rem .7rem; border-radius: 2px; }
.subscribe-form button { background: var(--ink); color: var(--paper); border: 0; padding: .58rem .95rem; font: 600 .78rem var(--furn); letter-spacing: .04em; border-radius: 2px; cursor: pointer; white-space: nowrap; }
.subscribe-form button:hover { background: var(--accent); }
.subscribe-status { margin: .5rem 0 0; font: 400 .85rem/1.45 var(--text); color: var(--ink-2); font-style: italic; }
.subscribe.is-done .subscribe-status { color: var(--love); font-weight: 600; font-style: normal; }
.subscribe-done { font: 600 1.05rem/1.5 var(--text); color: var(--love); }
.subscribe-err { font: 500 1rem/1.5 var(--text); color: var(--hate); }
.article .subscribe--compact { max-width: var(--measure); margin-top: 1.2rem; }

/* ── after the QA read (8 Sep 2026) ────────────────────────────────────────── */
/* A1: a hidden subscribe form is hidden. */
.subscribe-form[hidden] { display: none !important; }
/* A2: the A+ tool reaches the story, not just the furniture around it. */
/* A+ scales the root, so every rem on the page grows with it — the story, its
   headings, the boxes around it and the rail alike. */
/* A3: a fixed-width figure on a 356px phone showed six cut-off labels under the
   lead. The front shows the story's plate there instead; the figure stays on
   the story page with a hint that it scrolls. */
.lead-art--plate { display: none; }
@media (max-width: 760px) {
  .lead-art--figure { display: none; }
  .lead-art--plate { display: block; }
  .figure-head::after { content: " · swipe to see all"; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-4); }
}
/* B5: More sits outside the scrolling strip, so it is always on screen. */
.nav-more { flex: none; margin-left: .4rem; }
@media (max-width: 900px) { .nav::after { right: 4.6rem; } .nav-more summary { padding-left: .5rem; } }
/* B7: labels under ten pixels on a phone. */
@media (max-width: 760px) {
  .nav-group h4, .share-label, .topic-tag, .theory-n, .figure-kicker, .rail-line { font-size: .7rem; }
  .desk { font-size: .7rem; }
}

/* ── 9 Sep 2026, the punch list: fix first ─────────────────────────────────── */
/* 5: a document is quoted line for line */
.doc-body p { margin: 0 0 .2rem; }
.doc-body p.doc-gap { height: .55rem; margin: 0; }
/* 4: the answer, the following day, upside down */
.puzzle-hold { font: italic 400 1rem/1.5 var(--text); color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: .8rem; }
.puzzle-answer { margin: 1.6rem 0 0; border-top: 3px double var(--rule-strong); padding-top: .8rem; }
.puzzle-answer summary { cursor: pointer; font: 700 .78rem var(--furn); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.puzzle-upright { display: block; margin: .7rem 0 .4rem; font: 500 .8rem var(--furn); color: var(--ink-3); cursor: pointer; }
.puzzle-answer-body { transform: rotate(180deg); }
.puzzle-answer:has(.puzzle-upright input:checked) .puzzle-answer-body { transform: none; }
@media (prefers-reduced-motion: no-preference) { .puzzle-answer-body { transition: transform .35s ease; } }
/* 6: a cartoon's page shows the cartoon */
.art-figure--comic .comic-strip { border: 2px solid var(--ink); }
.comic-script { max-width: var(--measure); margin: 0 0 1.2rem; }
.comic-script summary { cursor: pointer; font: 700 .74rem var(--furn); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.comic-script p { font: 400 .95rem/1.55 var(--mono); color: var(--ink-2); }

/* ── 9 Sep 2026, the punch list: medium ────────────────────────────────────── */
/* 12: a figure on a phone is wide enough to read, and scrolls */
@media (max-width: 760px) { .figure-svg { min-width: 56rem; } }
/* 18: the board's votes stack on a phone */
@media (max-width: 600px) {
  .vote-table thead { display: none; }
  .vote-table, .vote-table tbody { display: block; }
  .vote-table tr { display: grid; grid-template-columns: auto auto 1fr; gap: .15rem .7rem; padding: .7rem 0; border-bottom: 1px dotted var(--rule); }
  .vote-table td { display: block; border: 0; padding: 0; }
  .vote-table .vote-note { grid-column: 1 / -1; }
}

/* ── 9 Sep 2026, the punch list: low ───────────────────────────────────────── */
/* 35: eleven cards, no painted empty twelfth */
.topics-grid { background: transparent; border: 0; gap: 1px; }
.topic-card { box-shadow: 0 0 0 1px var(--rule); }
/* 29: who caught it */
.corr-found { font: 600 .66rem var(--furn); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-left: .6rem; }
/* 24: the paper's post */
.mast-address { font: 500 .8rem var(--furn); color: var(--ink-3); margin: -.6rem 0 1.6rem; }

/* A kicker's parts may wrap. One row's kicker — kind, theory, desk — could not
   shrink below its own words, and a bare grid track let it push the desk
   page 20px wider than a phone. */
.row-kicker, .lead-kicker, .art-kicker { flex-wrap: wrap; }
.sec-grid-2 { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .sec-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.sec-main, .front-main, .hub-main { min-width: 0; }

/* ── 9 Sep 2026, the punch list: enhancements ──────────────────────────────── */
/* 41: plates as files */
.row-thumb img.plate { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--plate); }
html[data-theme="night"] img.plate { filter: invert(.92) hue-rotate(180deg); }
.reply-fold { margin: .4rem 0 .6rem; }
.reply-fold summary { cursor: pointer; font: 600 .78rem var(--furn); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.arch-jump { position: sticky; top: 0; z-index: 4; background: var(--paper); padding: .6rem 0; border-bottom: 1px solid var(--rule); }
/* 42: a table that scrolls sideways says so */
.table-wrap { position: relative; }
.table-wrap .table-scroll { overflow-x: auto; }
.table-wrap.can-scroll::after { content: "swipe →"; position: absolute; right: 0; top: -1.3rem; font: 600 .62rem var(--furn); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.table-wrap.can-scroll { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
/* 43: on a phone the More sheet rises from the bottom, and closes */
.nav-more-close { display: none; }
@media (max-width: 900px) {
  .nav-more-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 80vh; overflow-y: auto; min-width: 0; border-radius: 6px 6px 0 0; border-top: 3px double var(--rule-strong); padding-bottom: 1.2rem; }
  .nav-more-close { display: block; width: 100%; text-align: right; background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: .7rem 1rem; font: 700 .72rem var(--furn); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
}
/* 44: the apparatus folds on a phone */
.apparatus { border-top: 3px double var(--rule-strong); margin: 1.6rem 0; }
.apparatus > summary { cursor: pointer; padding: .8rem 0; font: 800 1.05rem var(--display); }
.apparatus > summary::marker { color: var(--accent); }
.apparatus[open] > summary { border-bottom: 1px solid var(--rule); margin-bottom: .6rem; }
.apparatus .method, .apparatus .coverage { border-top: 0; margin-top: 0; }
/* 46: the share heading balances */
.share-head { text-wrap: balance; }
/* 48: labels under ten pixels on a phone */
@media (max-width: 760px) { .label, .hub-card-kicker, .corr-sev, .brief-desk, .arch-meta .label { font-size: .7rem; } }
/* 42: the wrapper is the thing that scrolls, so the hint can see it */
.table-wrap .table-scroll > table { display: table; overflow: visible; width: max-content; min-width: 100%; max-width: none; }

/* comic panels are plate files too */
.panel-art img.plate { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--plate); }