/* ==========================================================================
   THE VISSION — house stylesheet
   Written by hand, not generated. Edit this file; the build never touches it.
   ========================================================================== */

/* --------------------------------------------------------------- fonts ---- */
/* Self-hosted. A reader used to load these from fonts.googleapis.com on every visit — a
   third-party request this site's own privacy page claimed didn't happen. It was wrong, so
   the fonts moved here instead of the wording moving to excuse it. Files are the Latin/
   Latin-Extended subset only (the site is English), variable across their weight axis, under
   the SIL Open Font License — see assets/fonts/OFL-*.txt for the licences as shipped by the
   Inter and Newsreader projects. Regenerate via the commands in ARCHITECTURE.md if a font
   version ever needs updating. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2-variations'), url('../fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/newsreader-variable.woff2') format('woff2-variations'), url('../fonts/newsreader-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-italic-variable.woff2') format('woff2-variations'), url('../fonts/newsreader-italic-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------- tokens ---- */

:root {
  --bg:          #fbfaf8;
  --surface:     #ffffff;
  --surface-2:   #f4f1eb;
  --surface-3:   #ece7df;

  --ink:         #15120f;
  --ink-2:       #3b3630;
  --muted:       #6f6860;
  --faint:       #9b938a;

  --rule:        #e2ddd4;
  --rule-strong: #c7c0b4;

  --accent:      #c8102e;
  --accent-soft: #fdeced;

  --serif: "Newsreader", "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --maxw: 1260px;
  --gut: clamp(16px, 4vw, 40px);

  --shadow-sm: 0 1px 2px rgb(20 18 15 / 6%), 0 2px 8px rgb(20 18 15 / 4%);
  --shadow-md: 0 2px 6px rgb(20 18 15 / 8%), 0 12px 32px rgb(20 18 15 / 8%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0c0b0a;
    --surface:     #141211;
    --surface-2:   #1b1917;
    --surface-3:   #262220;

    --ink:         #f5f1ea;
    --ink-2:       #d5cec4;
    --muted:       #9a928a;
    --faint:       #6d665f;

    --rule:        #2a2623;
    --rule-strong: #3e3833;

    --accent:      #ff5f4d;
    --accent-soft: #2a1512;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 2px 6px rgb(0 0 0 / 45%), 0 14px 36px rgb(0 0 0 / 40%);
  }
}

:root[data-theme="dark"] {
  --bg:          #0c0b0a;
  --surface:     #141211;
  --surface-2:   #1b1917;
  --surface-3:   #262220;

  --ink:         #f5f1ea;
  --ink-2:       #d5cec4;
  --muted:       #9a928a;
  --faint:       #6d665f;

  --rule:        #2a2623;
  --rule-strong: #3e3833;

  --accent:      #ff5f4d;
  --accent-soft: #2a1512;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 45%), 0 14px 36px rgb(0 0 0 / 40%);
}

/* --------------------------------------------------------------- reset ---- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums;
  font-optical-sizing: auto;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.1; letter-spacing: -0.018em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--bg); padding: 10px 16px;
  font-family: var(--sans); font-size: .82rem;
}
.skip:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------ utilities --- */

.eyebrow,
.kicker {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
  /* Falls back to the house accent when no beat colour is supplied (e.g. the briefing
     rail, which mixes beats and would look arbitrary tinted to any one of them). */
  color: var(--beat-accent, var(--accent));
  font-variant-numeric: normal;
}

/* A thin, beat-coloured rule above every cover image — the same section-colour-coding real
   wires use, so a reader scanning the page learns to recognise a beat before reading its
   label. Border, not background, so it reads as a stripe rather than tinting the art. */
.card__cover, .row__cover, .lead__cover {
  border-top: 3px solid var(--beat-accent, transparent);
  /* render.mjs sets width="1200" height="675" on these <img> tags on purpose — attributes,
     not CSS, are what stop the browser reserving the wrong box and causing layout shift before
     the SVG loads. But an explicit HTML height attribute wins over `aspect-ratio` unless CSS
     height is also given a value; with height left at its default `auto` here, every cover
     rendered at a literal 675px tall regardless of how narrow the box actually was — a portrait
     image in a landscape slot on every row list, entity page and beat section on the site. */
  height: auto;
}

.meta {
  font-family: var(--sans);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: normal;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--rule-strong);
  margin-right: 10px;
  vertical-align: middle;
}

.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------- top bar ---- */

.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--muted);
  font-variant-numeric: normal;
}
.topbar__in {
  display: flex; align-items: center; gap: 16px;
  /* min-height, not height: a fixed height on a row that can wrap is what caused four items
     to overlap into an illegible stack on a narrow phone — the row was clipped to 40px no
     matter how much content it actually held once it wrapped. */
  min-height: 40px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.topbar__date { text-transform: uppercase; font-weight: 550; letter-spacing: .1em; }
.topbar__spacer { margin-left: auto; }
@media (max-width: 700px) {
  /* Edition number and the relative "updated" stamp are both shown again, more fully, a
     few lines down — the edition number in the masthead area, the absolute publish time in
     the byline under the lead. Dropping them here is the actual fix: four items competing
     for one 320px-wide row is what wrapped into the overlapping mess in the first place, not
     a spacing tweak on top of the same four items. */
  .topbar__in { flex-wrap: nowrap; gap: 10px; }
  .topbar__edition-number, .topbar .live { display: none; }
}

.live {
  display: inline-flex; align-items: center; gap: 7px;
  text-transform: uppercase; font-weight: 600; letter-spacing: .12em;
  color: var(--ink-2);
}
.live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

.themetoggle {
  appearance: none; background: none; border: 1px solid var(--rule);
  color: var(--muted); cursor: pointer;
  font: inherit; font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s;
}
.themetoggle:hover { color: var(--ink); border-color: var(--rule-strong); background: var(--surface-2); }
@media (max-width: 700px) {
  /* 29px tall before — under the 44px minimum, and it sits in the corner where a thumb is
     least accurate. Padding grows rather than font size, so the bar's height is unchanged. */
  .themetoggle { padding: 11px 14px; }
}

/* ------------------------------------------------------------ masthead ---- */

.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  padding: clamp(22px, 5vw, 46px) 0 clamp(18px, 3.5vw, 30px);
}
.masthead__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  line-height: .92;
  letter-spacing: -0.035em;
  text-decoration: none;
  display: inline-block;
  color: var(--ink);
}
.masthead__title em { font-style: normal; color: var(--accent); }
.masthead__rule {
  width: min(100%, 720px);
  margin: 16px auto 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 3px double var(--rule-strong);
  height: 5px;
}
.masthead__tagline {
  font-family: var(--sans);
  font-size: .715rem;
  font-weight: 550;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
  font-variant-numeric: normal;
}

/* One sentence telling a first-time reader what this is. It was previously only in the
   footer, which a new visitor reaches last if at all. */
.masthead__note {
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 54ch;
  margin: 14px auto 0;
}

/* The three tiers, in descending order of how much checking stands behind them. */
.tiers { margin: 34px 0 8px; }
.tiers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.tiers__item {
  background: var(--surface);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tiers__name {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.tiers__name:hover { color: var(--accent); }
.tiers__name.is-here { color: var(--muted); }
.tiers__you {
  font-size: .62rem;
  font-weight: 550;
  letter-spacing: .1em;
  color: var(--faint);
  margin-left: 6px;
}
.tiers__count {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tiers__blurb {
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 700px) {
  /* The tier names are links to the Digest and Wire, and at 20px tall they were the smallest
     tap targets on the page — on the one component whose whole job is orienting a new
     reader. Padding, not font size, so the type scale is unchanged. */
  .tiers__name { display: inline-block; padding: 10px 0; }
  .tiers__item { padding: 14px 18px 18px; gap: 4px; }
}

/* Replaces the block-per-empty-beat the front page used to print. */
.emptybeats {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--muted);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* A beat whose only coverage today is the lead or a brief — already shown above — gets this
   one-line pointer in place of an empty section or a card duplicating what's already on the
   page. */
.section__pointer {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--muted);
}
.section__pointer a { color: inherit; }

/* --------------------------------------------------------------- nav ------ */

.beatnav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.beatnav__in {
  display: flex; align-items: center; gap: 4px;
  height: 46px;
  overflow-x: auto;
  scrollbar-width: none;
}
.beatnav__in::-webkit-scrollbar { display: none; }
.beatnav a {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 560;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding: 6px 12px; border-radius: 4px;
  white-space: nowrap;
  transition: color .15s, background .15s;
  font-variant-numeric: normal;
}
.beatnav a:hover { color: var(--ink); background: var(--surface-2); }
.beatnav a[aria-current="page"] { color: var(--accent); }
.beatnav__sep { flex: 1 1 auto; min-width: 8px; }
.beatnav a.is-quiet { color: var(--faint); }

/* On a phone this nav is roughly three screens wide and scrolls sideways, so anything past
   the first few beats is invisible unless you happen to try swiping a bar that doesn't look
   swipeable. The fade is the affordance: a gradient at the right edge that only appears
   while there is more to scroll to, which is what tells a thumb the row continues.
   Targets also grow to 44px, the minimum comfortable tap size — they were 31px. */
@media (max-width: 700px) {
  .beatnav__in {
    height: 52px;
    gap: 2px;
    /* Room for the fade so the last item never sits underneath it. */
    padding-right: 28px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .beatnav a {
    padding: 13px 12px;
    scroll-snap-align: start;
  }
  .beatnav {
    position: relative;
  }
  .beatnav::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 32px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface));
  }
  /* The separator pushes secondary links to the far right on desktop. On a phone that just
     adds dead scroll distance between the beats and Search, so it collapses. */
  .beatnav__sep { flex: 0 0 10px; min-width: 10px; }
}

/* -------------------------------------------------------- editor's note --- */

.editorsnote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: clamp(16px, 4vw, 48px);
  align-items: start;
  padding: clamp(24px, 4vw, 42px) 0;
  border-bottom: 1px solid var(--rule);
}
.editorsnote__label {
  font-family: var(--sans);
  font-size: .68rem; font-weight: 650;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  padding-top: 6px;
  font-variant-numeric: normal;
}
.editorsnote__title {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.22;
  margin-bottom: 10px;
}
.editorsnote__body { color: var(--ink-2); font-size: 1.03rem; line-height: 1.65; }
@media (max-width: 760px) { .editorsnote { grid-template-columns: 1fr; gap: 12px; } }

/* ------------------------------------------------------------- lead ------- */

.lead {
  display: grid;
  grid-template-columns: minmax(0, 1.68fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  padding: clamp(26px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 940px) { .lead { grid-template-columns: 1fr; } }

.lead__cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--surface-3);
  border-radius: 3px;
  margin-bottom: 20px;
}
.lead__title {
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  line-height: 1.045;
  letter-spacing: -0.028em;
  margin: 10px 0 14px;
}
.lead__title a { text-decoration: none; }
.lead__title a:hover { color: var(--accent); }
.lead__deck {
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 20px;
  max-width: 62ch;
}

/* ---------------------------------------------------------- key points ---- */

.keypoints {
  list-style: none;
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  margin: 0 0 22px;
  display: grid;
  gap: 10px;
  max-width: 64ch;
}
.keypoints li {
  font-size: .99rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---------------------------------------------------------- briefing ------ */

.briefing {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 3px;
  padding: 20px 20px 8px;
  align-self: start;
  position: sticky;
  top: 62px;
}
@media (max-width: 940px) { .briefing { position: static; } }
.briefing__head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 9px; margin-bottom: 4px;
}
.briefing__title {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  font-variant-numeric: normal;
}
.briefing__count {
  font-family: var(--mono); font-size: .68rem; color: var(--faint);
}
.briefing ol { list-style: none; counter-reset: brief; }
.briefing li {
  counter-increment: brief;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.briefing li:last-child { border-bottom: 0; }
.briefing li::before {
  content: counter(brief, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--accent);
  padding-top: 3px;
  font-variant-numeric: normal;
}
.briefing h3 { font-size: .97rem; line-height: 1.3; letter-spacing: -0.01em; }
.briefing h3 a { text-decoration: none; }
.briefing h3 a:hover { color: var(--accent); }
.briefing p { font-size: .855rem; color: var(--muted); line-height: 1.48; margin-top: 5px; }

/* ------------------------------------------------------------ sections ---- */

/* One rule per section boundary, not two. This used to be a light 1px --rule closing every
   section plus a bold 2px --ink rule opening the next one's heading, stacked right against
   each other — in dark mode --ink is near-white, so a reader saw a dim line immediately
   followed by a bright one at every section change. section__head's bold rule is now the only
   divider; section itself carries no border and lets padding alone create the gap. */
.section {
  padding: clamp(22px, 3.4vw, 38px) 0;
  scroll-margin-top: 58px;
}

.section__head {
  display: flex; align-items: baseline; gap: 14px;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  margin-bottom: 22px;
}
.section__title {
  font-size: 1.32rem;
  letter-spacing: -0.015em;
}
.section__blurb {
  font-family: var(--sans); font-size: .78rem; color: var(--muted);
  font-variant-numeric: normal;
}
.section__count {
  margin-left: auto;
  font-family: var(--mono); font-size: .7rem; color: var(--faint);
  white-space: nowrap;
}
@media (max-width: 620px) { .section__blurb { display: none; } }

/* --------------------------------------------------------------- cards ---- */

.cards {
  display: grid;
  /* Capped at 400px, not 1fr — a beat with a single story (most editions run several beats
     light) used to stretch that one card across the section's full width, cover art and all,
     which read as far more empty space than a single story deserves. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 400px));
  gap: clamp(20px, 3vw, 34px);
}
.card { display: flex; flex-direction: column; min-width: 0; }
.card__cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--surface-3);
  border-radius: 3px;
  margin-bottom: 14px;
  transition: opacity .2s;
}
.card:hover .card__cover { opacity: .9; }
.card__title {
  font-size: 1.22rem;
  line-height: 1.19;
  margin: 8px 0 8px;
}
.card__title a { text-decoration: none; }
.card__title a:hover { color: var(--accent); }
.card__deck {
  font-size: .93rem; line-height: 1.5; color: var(--muted);
  margin-bottom: 12px;
}
.card__meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); }

/* --------------------------------------------------------------- rows ----- */

.rows { display: grid; gap: 0; }
.row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.row:first-child { padding-top: 0; }
.row:last-child { border-bottom: 0; padding-bottom: 0; }
.row__cover {
  /* Cover art is generated at 1200x675 — 16:9. This was 4:3, a narrower box than the art was
     drawn for, so every row-list thumbnail (archive, entity pages, beat overflow lists) cropped
     more aggressively than the lead/card views and read as a taller, heavier picture than the
     rest of the site used. */
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--surface-3);
  border-radius: 3px;
}
.row__title { font-size: 1.14rem; line-height: 1.22; margin: 6px 0 7px; }
.row__title a { text-decoration: none; }
.row__title a:hover { color: var(--accent); }
.row__deck { font-size: .92rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
@media (max-width: 560px) {
  .row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .row__deck { display: none; }
}

/* ------------------------------------------------------------- sources ---- */

.sources { display: flex; flex-wrap: wrap; gap: 8px; }
.source {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: .755rem;
  font-weight: 520;
  color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s;
  font-variant-numeric: normal;
  max-width: 100%;
}
.source:hover { border-color: var(--rule-strong); background: var(--surface-2); color: var(--ink); }
.source__mark {
  flex: none;
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: .58rem; font-weight: 700; letter-spacing: .02em;
}
.source__tier {
  font-family: var(--mono);
  font-size: .62rem;
  color: var(--faint);
}
.source--t1 .source__mark { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------- signals -- */

.signals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0 0;
}
.signal { background: var(--surface); padding: 18px 20px; }
.signal__n {
  font-family: var(--serif);
  font-size: 2.1rem; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.signal__l {
  font-family: var(--sans);
  font-size: .68rem; font-weight: 550;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); margin-top: 8px;
  font-variant-numeric: normal;
}

/* ------------------------------------------------------------- article ---- */

.article { padding: clamp(26px, 4vw, 44px) 0 0; }
.article__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: clamp(24px, 5vw, 60px);
  align-items: start;
}
@media (max-width: 900px) { .article__grid { grid-template-columns: 1fr; } }

.crumbs {
  font-family: var(--sans); font-size: .7rem; font-weight: 550;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
  font-variant-numeric: normal;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--faint); margin: 0 8px; }

.article__title {
  font-size: clamp(1.95rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 12px 0 16px;
  max-width: 22ch;
}
.article__deck {
  font-size: clamp(1.08rem, 1.8vw, 1.32rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: 22px;
}
.article__byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 26px;
}
.byline__name {
  font-family: var(--sans); font-size: .78rem; font-weight: 650;
  letter-spacing: .04em; color: var(--ink);
  font-variant-numeric: normal;
}
.article__cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 3px; background: var(--surface-3);
  margin-bottom: 10px;
  border-top: 3px solid var(--beat-accent, transparent);
}
.article__caption {
  font-family: var(--sans); font-size: .7rem; color: var(--faint);
  margin-bottom: 30px; line-height: 1.5;
  font-variant-numeric: normal;
}

.prose { max-width: 68ch; }
.prose p { font-size: 1.075rem; line-height: 1.72; margin-bottom: 1.25em; color: var(--ink); }
.prose p:first-of-type::first-letter {
  float: left;
  font-size: 3.5em;
  line-height: .82;
  padding: .05em .09em 0 0;
  font-weight: 600;
  color: var(--accent);
}

.callout {
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  margin: 34px 0;
  max-width: 68ch;
}
.callout__label {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
  font-variant-numeric: normal;
}
.callout p { font-size: 1.06rem; line-height: 1.65; color: var(--ink-2); }

.rail { position: sticky; top: 62px; display: grid; gap: 26px; }
@media (max-width: 900px) { .rail { position: static; } }
.rail__block { border-top: 2px solid var(--ink); padding-top: 12px; }
.rail__title {
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px;
  font-variant-numeric: normal;
}
.rail__list { list-style: none; display: grid; gap: 14px; }
.rail__list a { text-decoration: none; font-size: .94rem; line-height: 1.3; font-weight: 500; display: block; }
.rail__list a:hover { color: var(--accent); }
.rail__list .k {
  font-family: var(--sans); font-size: .63rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 4px;
  font-variant-numeric: normal;
}

.sourcelist { list-style: none; display: grid; gap: 12px; margin-top: 4px; }
.sourcelist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; }
.sourcelist a { text-decoration: none; font-size: .92rem; line-height: 1.35; font-weight: 500; }
.sourcelist a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.sourcelist .pub {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  font-variant-numeric: normal;
}

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); z-index: 60;
  transition: width .1s linear;
}

/* ------------------------------------------------------------- archive ---- */

/* ------------------------------------------------ topic of the week ------- */

.totw__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 30px;
}
.totw__name { font-family: var(--serif); font-size: 1.9rem; line-height: 1.15; margin-bottom: 10px; }
.totw__name a { text-decoration: none; color: var(--ink); }
.totw__name a:hover { color: var(--accent); }
.totw__why { font-family: var(--sans); font-size: .86rem; line-height: 1.55; color: var(--muted); }
.totw__all {
  display: inline-block; margin-top: 14px;
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
}
.totw__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px; align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
}
.totw__row:first-child { border-top: 0; }
.totw__date { font-family: var(--mono); font-size: .72rem; color: var(--faint); white-space: nowrap; }
.totw__headline { font-family: var(--serif); font-size: 1.02rem; line-height: 1.35; color: var(--ink); }
.totw__row:hover .totw__headline { color: var(--accent); }
@media (max-width: 760px) {
  .totw__grid { grid-template-columns: 1fr; gap: 20px; }
  .totw__name { font-size: 1.6rem; }
  .totw__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
}

/* How an edition was produced, stated on the edition. Autonomous is the accent colour
   because it is the claim the paper is actually making; the fallback modes are muted but
   never hidden — that distinction is the honest part. */
.editionmode {
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px dotted var(--rule-strong);
  cursor: help;
}
.editionmode--schedule { color: var(--accent); border-bottom-color: var(--accent); }

.search-input {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.3rem;
  padding: 14px 4px;
  background: transparent;
  color: var(--ink);
  border: none;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
}
.search-input::placeholder { color: var(--faint); font-style: italic; }
.search-input:focus { outline: none; border-bottom-color: var(--accent); }
.search-status {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--muted);
  margin: 12px 0 4px;
}

.archive__row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 24px; align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.archive__date {
  font-family: var(--mono); font-size: .78rem; color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.archive__body { display: flex; flex-direction: column; gap: 8px; }
.archive__title { font-size: 1.1rem; line-height: 1.3; }
.archive__title--none { color: var(--faint); font-style: italic; font-size: 1rem; }
.archive__n { font-family: var(--mono); font-size: .72rem; color: var(--faint); white-space: nowrap; }
.archive__tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.archive__tier {
  font-family: var(--mono); font-size: .7rem; white-space: nowrap;
  padding: 3px 9px; border-radius: 3px; border: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
}
.archive__tier:hover { background: var(--surface-2); }
.archive__tier--missing { color: var(--faint); border-style: dashed; }
@media (max-width: 620px) {
  .archive__row { grid-template-columns: 1fr; gap: 6px; }
}

/* A search result carries a tier chip .archive__row's own 2-column grid has no room for —
   a 3rd column, not a modified .archive__row (that grid is shared with archive.html and
   topics.html, which do not have a chip to place). */
.archive__row--search {
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
}
.result-kind {
  display: inline-block;
  font-family: var(--sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px;
  font-variant-numeric: normal;
  white-space: nowrap;
}
.result-kind--story { background: var(--accent-soft); color: var(--accent); }
.result-kind--digest { background: var(--surface-3); color: var(--muted); }
.result-kind--wire { background: var(--surface-2); color: var(--faint); }
.result-beat {
  display: block;
  font-family: var(--sans); font-size: .68rem; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em; margin-top: 3px;
}
@media (max-width: 620px) {
  .archive__row--search { grid-template-columns: 1fr; gap: 6px; }
}

/* ----------------------------------------------------------- hackathons --- */

.hack {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.hack:last-of-type { border-bottom: 0; }
.hack__when {
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}
.hack__date {
  display: block;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
.hack__label {
  display: block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.hack__name { font-size: 1.22rem; line-height: 1.24; }
.hack__name a { text-decoration: none; }
.hack__name a:hover { color: var(--accent); }
.hack__org {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--muted);
  margin: 6px 0 10px;
  font-variant-numeric: normal;
}
.hack__elig {
  margin-top: 10px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
}
@media (max-width: 560px) {
  .hack { grid-template-columns: 1fr; gap: 10px; }
}

/* -------------------------------------------------------------- digest ---- */
/* Deliberately plainer than the edited paper's cards: no cover art, dense list rows, a
   visible confidence badge. Nothing here should look like it was written — it wasn't. */

.digest-list { display: grid; gap: 0; }
.digest-item {
  padding: 18px 0 18px 14px;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--beat-accent, var(--rule-strong));
}
.digest-item:last-child { border-bottom: 0; }
.digest-item__badge {
  display: inline-block;
  font-family: var(--sans); font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px;
  margin-bottom: 9px;
  font-variant-numeric: normal;
}
.digest-item__badge--confirmed { background: var(--accent-soft); color: var(--accent); }
.digest-item__badge--single { background: var(--surface-3); color: var(--muted); }
.digest-item__title { font-size: 1.08rem; line-height: 1.32; margin-bottom: 6px; }
.digest-item__title a { text-decoration: none; }
.digest-item__title a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.digest-item__sources {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px;
}
.digest-item__reportedby {
  font-family: var(--sans); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  font-variant-numeric: normal;
}

/* ---------------------------------------------------------------- wire ---- */
/* Visually subordinate to edited copy on purpose: monospaced, denser, no cover art.
   A reader must never mistake a raw feed headline for something the paper stands behind. */

.wire__warning {
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--muted);
  background: var(--surface-2);
  border-left: 2px solid var(--rule-strong);
  padding: 11px 14px;
  margin-bottom: 20px;
  max-width: 78ch;
  font-variant-numeric: normal;
}
.wire__warning strong { color: var(--ink-2); }

.wire {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 0 34px;
}
.wire__item { border-bottom: 1px solid var(--rule); }
.wire__link {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px 0;
  text-decoration: none;
}
.wire__link:hover .wire__title { color: var(--accent); }
/* Desktop shows the whole wire, so the expand control is inert and hidden. It is not
   display:none on the input, because a focusable control that vanishes entirely is a
   keyboard trap on the pages where it does apply. */
.wire__toggleinput { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wire__toggle { display: none; }

@media (max-width: 700px) {
  /* 12px padding gave a ~40px row. Bumped so each headline is a comfortable target, since
     the wire is a long list of links and mis-taps are most likely exactly here. */
  .wire__link { padding: 15px 0; }

  /* Show twelve, then stop. The rest are one tap away rather than forty scrolls. */
  .wire__item:nth-child(n + 13) { display: none; }
  .wire__toggleinput:checked ~ .wire .wire__item { display: block; }
  .wire__toggleinput:checked ~ .wire__toggle { display: none; }

  .wire__toggle {
    display: block;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    font-family: var(--sans);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .wire__toggle:active { background: var(--surface-2); }
  /* Keyboard users get a visible ring on the label, since the real input is off-screen. */
  .wire__toggleinput:focus-visible ~ .wire__toggle {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}
.wire__mark {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--muted);
  font-family: var(--sans);
  font-size: .55rem; font-weight: 700;
  margin-top: 2px;
}
.wire__body { min-width: 0; }
.wire__title {
  display: block;
  font-size: .93rem;
  line-height: 1.36;
  color: var(--ink-2);
  font-weight: 500;
}
.wire__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: normal;
}
.wire__stamp {
  margin-top: 18px;
  font-family: var(--sans);
  font-size: .7rem;
  color: var(--faint);
  font-variant-numeric: normal;
}

.staleness {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  padding: 14px 16px;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-2);
  font-variant-numeric: normal;
}
.staleness strong { color: var(--accent); }

/* -------------------------------------------------------------- footer ---- */

.footer {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  margin-top: 60px;
  padding: 46px 0 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rule);
}
.footer__mark { font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 12px; }
.footer__mark em { font-style: normal; color: var(--accent); }
.footer__community { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 20px; }
/* No opacity here: a value below 1 creates a stacking context, which isolates the mark's
   mix-blend-mode from the footer behind it and leaves the logo's white ground visible as a
   slab. Fade the mark itself instead, further down. */
.footer__communitymark { display: block; color: var(--ink); }
.footer__communitymark svg,
.footer__communitymark img { width: 118px; height: auto; display: block; }

/* The community mark is black line art on an opaque white ground, with no alpha channel to
   hide. Rather than pretend otherwise, it is presented on a white badge in both themes — the
   art keeps the contrast it was drawn for, and the panel reads as deliberate.
   mix-blend-mode was tried first and does not work here: the footer's own stacking context
   isolates the blend, so the white ground stays visible as a slab either way. */
.footer__communitymark.is-raster {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  width: max-content;
  box-shadow: 0 1px 2px rgb(0 0 0 / 18%);
}
.footer p {
  font-family: var(--sans); font-size: .82rem; line-height: 1.6; color: var(--muted);
  max-width: 46ch;
  font-variant-numeric: normal;
}
.footer h4 {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 14px;
  font-variant-numeric: normal;
}
.footer ul { list-style: none; display: grid; gap: 9px; }
.footer li a {
  font-family: var(--sans); font-size: .84rem; color: var(--muted); text-decoration: none;
  font-variant-numeric: normal;
}
.footer li a:hover { color: var(--ink); }
@media (max-width: 700px) {
  /* Footer links were 16px tall in a dense 9px-gap list — the hardest thing on the page to
     tap accurately, and the footer is where the section and legal links live. Making each
     one a block with vertical padding turns the whole row into the target rather than just
     the glyphs; the visible gap is reduced to compensate so the footer doesn't get taller. */
  .footer ul { gap: 0; }
  .footer li a { display: block; padding: 11px 0; }
}
.footer__base {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  padding-top: 24px;
  font-family: var(--sans); font-size: .72rem; color: var(--faint);
  font-variant-numeric: normal;
}

/* --------------------------------------------------------------- misc ----- */

.empty {
  padding: 80px 0; text-align: center; color: var(--muted);
  font-family: var(--sans); font-size: .95rem;
  font-variant-numeric: normal;
}

.tag {
  display: inline-block;
  font-family: var(--sans); font-size: .64rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent);
  font-variant-numeric: normal;
}
.tag--low { background: var(--surface-3); color: var(--muted); }

.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topic {
  display: inline-block;
  font-family: var(--sans); font-size: .74rem; font-weight: 550;
  padding: 5px 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color .15s, color .15s;
  font-variant-numeric: normal;
}
.topic:hover { border-color: var(--accent); color: var(--accent); }

/* --- continuity: threads, open questions, corrections ---------------------- */

/* A story's place in a continuing one. Deliberately quieter than .callout — this is
   orientation, not argument, and it sits below the piece rather than interrupting it. */
.thread { border-top: 2px solid var(--ink); padding-top: 14px; margin: 34px 0; max-width: 68ch; }
.thread__label {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px; font-variant-numeric: normal;
}
.thread__label a { color: inherit; }
.thread__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.thread__item {
  display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: baseline;
  padding: 9px 0 9px 14px; border-left: 2px solid var(--rule);
}
.thread__item.is-here { border-left-color: var(--accent); background: var(--surface-2); }
.thread__date {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); font-variant-numeric: normal;
}
.thread__title { font-family: var(--serif); font-size: 1rem; line-height: 1.45; color: var(--ink); }
.thread__item.is-here .thread__title { font-weight: 600; }
a.thread__title { text-decoration: none; }
a.thread__title:hover { color: var(--accent); }
@media (max-width: 620px) {
  .thread__item { grid-template-columns: 1fr; gap: 3px; }
}

/* The unresolved claim. Accent-bordered because it is a promise the paper is making to
   come back, and it should read as a commitment rather than a disclaimer. */
.openq {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 16px 18px; margin: 34px 0; max-width: 68ch; border-radius: 0 4px 4px 0;
}
.openq.is-answered { border-left-color: var(--rule-strong); background: var(--surface-2); }
.openq__label {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px; font-variant-numeric: normal;
}
.openq.is-answered .openq__label { color: var(--muted); }
.openq__q { font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; color: var(--ink); margin: 0; }
.openq__pending, .openq__a {
  font-family: var(--sans); font-size: .85rem; line-height: 1.6;
  color: var(--ink-2); margin: 10px 0 0;
}
.openq__stamp {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin-right: 6px; font-variant-numeric: normal;
}
.openq__link, .openq__pending a { color: var(--accent); }

/* The ledger page. */
.openq-row { border-top: 1px solid var(--rule); padding: 20px 0; }
.openq-row__meta {
  display: flex; gap: 12px; align-items: center; margin-bottom: 8px;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; font-variant-numeric: normal;
}
.openq-row__meta a { color: var(--faint); text-decoration: none; }
.openq-row__meta a:hover { color: var(--accent); }
.openq-row__badge {
  padding: 3px 9px; border-radius: 999px; font-weight: 650;
  background: var(--accent-soft); color: var(--accent); border: 1px solid currentColor;
}
.openq-row__badge.is-closed { background: var(--surface-2); color: var(--muted); border-color: var(--rule-strong); }
.openq-row__q { font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; margin: 0 0 6px; }
.openq-row__from, .openq-row__a {
  font-family: var(--sans); font-size: .85rem; line-height: 1.6; color: var(--muted); margin: 0;
}
.openq-row__a { color: var(--ink-2); margin-top: 8px; }
.openq-row__from a, .openq-row__a a { color: var(--accent); text-decoration: none; }
.openq-row__from a:hover, .openq-row__a a:hover { text-decoration: underline; }

/* Corrections. Never hidden, never styled as an afterthought — the point of publishing
   one is that a reader who saw the original can find out it changed. */
.correction {
  border-left: 3px solid var(--accent); background: var(--surface-2);
  padding: 14px 16px; margin: 26px 0; max-width: 68ch; border-radius: 0 4px 4px 0;
}
.correction__label {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 7px; font-variant-numeric: normal;
}
.correction__body {
  font-family: var(--sans); font-size: .86rem; line-height: 1.62; color: var(--ink-2); margin: 0 0 6px;
}
.correction__body:last-child { margin-bottom: 0; }
.correction__body time { color: var(--faint); }

.correction-row { border-top: 1px solid var(--rule); padding: 20px 0; }
.correction-row__meta {
  display: flex; gap: 8px; align-items: center; margin-bottom: 7px;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); font-variant-numeric: normal;
}
.correction-row__meta a { color: var(--faint); text-decoration: none; }
.correction-row__meta a:hover { color: var(--accent); }
.correction-row__title { font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; margin: 0 0 7px; }
.correction-row__title a { text-decoration: none; }
.correction-row__title a:hover { color: var(--accent); }
.correction-row__body {
  font-family: var(--sans); font-size: .86rem; line-height: 1.62; color: var(--ink-2); margin: 0;
}

@media print {
  .topbar, .beatnav, .themetoggle, .progress, .footer { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .lead, .section { border: 0; }
  /* A correction is part of the record; it must survive being printed. */
  .correction, .openq { border-left-width: 2px; background: none; }
}