/* PlainRecord — a monochrome newspaper page.

   No accent hue: emphasis comes from weight, scale, hairlines and the
   inverted black bars. Where colour used to carry meaning (revised tags,
   our-error revisions, stale sources) the meaning is now carried by a black
   outline or fill plus the label text, which is what the copy already says.

   Three families, self-hosted below so that reading a page makes no request
   to any third party: Prata for display, Lora for prose, Work Sans for the
   uppercase furniture. Nothing here needs JavaScript; the ticker is the only
   moving part and it stops for prefers-reduced-motion. */

:root {
  --paper:        #f7f6f4;  /* page background */
  --paper-raised: #ffffff;  /* masthead row background */
  --ink:          #0b0b0b;  /* body text, rules, black bars */
  --ink-body:     #3a3936;  /* summaries, standfirsts, secondary prose */
  --ink-soft:     #565450;  /* meta, labels, captions */
  --ink-invert:   #ffffff;  /* text on black */
  --ink-invert-soft: #d6d4cf; /* body text on black */
  --rule:         #dcdad5;  /* hairlines */
  --rule-dark:    #2a2a2a;  /* hairlines on black */
  --measure:      46em;     /* prose measure */
  --container:    1240px;
  --gutter:       40px;

  --display: "Prata", "Iowan Old Style", Palatino, Georgia, serif;
  --serif:   "Lora", Georgia, "Times New Roman", serif;
  --sans:    "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
             Roboto, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light;
}

/* ---------- fonts ----------
   Latin and latin-ext subsets only, taken from Google Fonts and served from
   this origin. Lora and Work Sans are variable fonts, so one file covers the
   whole 400–600 range. See web/static/fonts/OFL.txt. */

@font-face {
  font-family: "Prata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/prata-latin.b4419348ab41.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/lora-latin.662c56ecd8de.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/lora-latin-ext.d551ed729291.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora-italic-latin.1b001151dec8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lora-italic-latin-ext.976f138e48c2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/work-sans-latin.4890688e6436.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/work-sans-latin-ext.1f8c41030121.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a {
  color: var(--ink);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--ink-soft); }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--ink);
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .7rem 1.1rem; z-index: 10; text-decoration: none;
}
.skip:focus { left: 0; }

/* Shared furniture: the uppercase sans label used for kickers, meta lines,
   section titles, table headers and pagination. */
.kicker, .meta, .section__title, .section__more, .pager,
table.data th, details > summary {
  font-family: var(--sans);
  text-transform: uppercase;
}

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

.masthead {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--rule);
}
.masthead__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.masthead__note {
  margin: 0;
  font-family: var(--sans);
  font-size: 10px; line-height: 1.5;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.masthead__brand { text-align: center; }
.masthead__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase;
}
.masthead__title a { color: var(--ink); text-decoration: none; }
.masthead__tagline {
  margin: 8px 0 0;
  font-family: var(--serif); font-style: italic;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.masthead__links {
  display: flex; gap: 10px;
  justify-content: flex-end; align-items: center;
  flex-wrap: wrap;
}

/* ---------- pills ---------- */

.pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px; line-height: 1.2;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 9px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.pill:hover { background: var(--ink); color: var(--ink-invert); }
.pill--quiet { border-color: var(--rule); color: var(--ink-soft); }
.pill--quiet:hover { background: none; border-color: var(--ink); color: var(--ink); }
.pill--small { font-size: 10.5px; padding: 9px 16px; }

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

.nav {
  background: var(--ink);
  color: var(--ink-invert);
}
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0 30px;
}
.nav a {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-invert);
  text-decoration: none;
  padding: 14px 0;
  opacity: .72;
  transition: opacity 120ms;
}
.nav a:hover { color: var(--ink-invert); opacity: .6; }
.nav a[aria-current="page"] {
  opacity: 1;
  box-shadow: inset 0 -1px 0 0 var(--ink-invert);
}

/* ---------- ticker ----------
   Decorative and duplicative of /corrections/, so it is aria-hidden and the
   corrections page remains the accessible route to the same information. */

.ticker {
  background: var(--ink);
  color: var(--ink-invert);
  border-top: 1px solid var(--rule-dark);
  overflow: hidden;
}
.ticker__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}
.ticker__label {
  margin: 0;
  padding: 9px 22px 9px var(--gutter);
  font-family: var(--serif); font-style: italic;
  font-size: 13px;
  border-right: 1px solid var(--rule-dark);
  white-space: nowrap;
  display: flex; align-items: center;
}
.ticker__viewport {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex; align-items: center;
}
.ticker__items {
  display: flex; gap: 56px;
  white-space: nowrap;
  padding-left: 24px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .10em; text-transform: uppercase;
  animation: pr-ticker 46s linear infinite;
}

@keyframes pr-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__items { animation: none; }
}

/* ---------- notices ----------
   A bordered block with a black label chip. Every state the server can be in
   — demonstration data, private deployment, paused publication, withdrawn,
   historical import, corrected — uses this one treatment, and the chip always
   carries the words. */

.notice {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-start;
  border: 1px solid var(--ink);
  padding: 14px 18px;
  margin: 0 0 36px;
}
.notice > .notice__tag {
  flex: 0 0 auto;
  max-width: 21em;
  margin: 0;
  background: var(--ink); color: var(--ink-invert);
  font-family: var(--sans); font-size: 10px; font-weight: 500; line-height: 1.5;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px;
}
.notice__body { margin: 0; flex: 1 1 18em; }
.notice .notice__body p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-body); }
.notice .notice__body p:last-child { margin-bottom: 0; }

/* The quieter note: a source's coverage caveat, a stale section, a section
   with nothing in it. No box, just a rule and the sentence. */
.notice--quiet {
  display: block;
  border: 0;
  border-left: 2px solid var(--ink);
  padding: 2px 0 2px 18px;
  margin: 0 0 22px;
  max-width: 52em;
  font-size: 15px; line-height: 1.65; color: var(--ink-body);
}
.notice--quiet > p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: var(--ink-body); }
.notice--quiet > p:last-child { margin-bottom: 0; }
.notice--quiet .source-name {
  font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
}

/* ---------- page shell ---------- */

main > .wrap { padding-bottom: 80px; }
.page { padding-top: 44px; }
.page > :last-child { margin-bottom: 0; }

/* ---------- section heads ---------- */

.section { margin-bottom: 44px; }
.section:last-child { margin-bottom: 0; }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 26px;
}
.section__title {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink);
}
.section__more {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.section__more a { color: inherit; text-decoration: none; }
.section__more a:hover { color: var(--ink); }

/* A page title sitting on the same black baseline, in display type. */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
.page-head__title {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1;
}

/* ---------- home: lead story ---------- */

.lead {
  display: grid;
  gap: 48px;
  align-items: start;
  padding: 0 0 40px;
  border-bottom: 1px solid var(--rule);
}
.lead:has(.photo-slot) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.lead__kicker {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.lead__title {
  margin: 0 0 20px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.06; letter-spacing: -0.01em;
}
.lead__title a { text-decoration: none; }
.lead__summary {
  margin: 0 0 22px;
  font-size: 18px; line-height: 1.65;
  color: var(--ink-body);
  max-width: 36em;
}

/* ---------- home: two-column band ---------- */

.band {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}
.band__aside .section { margin-bottom: 0; }

.explainer {
  border: 1px solid var(--ink);
  padding: 22px;
}
.explainer h2 {
  margin: 0 0 12px;
  font-family: var(--display); font-weight: 400;
  font-size: 20px; line-height: 1.25;
}
.explainer p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--ink-body); }
.explainer p:last-child { margin-bottom: 0; }

/* ---------- home: figure grid ----------
   One-pixel gaps, with each cell drawing its own hairline ring into the gap
   it shares with its neighbour, so the rules read as a single ruled table.
   Drawing the rules per cell rather than as a bed behind the grid means a
   short last row leaves paper, not a grey slab. */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
}
.figure {
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 24px 22px 22px;
}
.figure__kicker {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.figure__value {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 42px; line-height: 1;
}
.figure__title {
  margin: 0 0 12px;
  font-family: var(--serif); font-weight: 500;
  font-size: 16px; line-height: 1.45;
}
.figure__title a { text-decoration: none; }
.figure .meta { font-size: 10px; letter-spacing: .1em; }

/* ---------- brief lists ---------- */

.briefs { list-style: none; margin: 0; padding: 0; }
.brief-item { padding: 0 0 26px; border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
.brief-item:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.brief-item__title {
  margin: 0 0 12px;
  font-family: var(--display); font-weight: 400;
  font-size: 22px; line-height: 1.25;
}
.brief-item__title a { color: var(--ink); text-decoration: none; }
.brief-item__title a:hover { color: var(--ink-soft); }
.brief-item__summary {
  margin: 0 0 14px;
  font-size: 15.5px; line-height: 1.65;
  color: var(--ink-body);
}
.brief-item__when {
  margin: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* Front page, main column: the first item is the biggest, and takes a photo
   beside it when one exists. */
.briefs--feature .brief-item { display: grid; gap: 28px; align-items: start; }
.briefs--feature .brief-item:has(.photo-slot) {
  grid-template-columns: minmax(0, 1fr) 190px;
}
.briefs--feature .brief-item:first-child .brief-item__title { font-size: 26px; line-height: 1.22; }

/* Front page, aside: headline and stamp only. */
.briefs--compact .brief-item { padding-bottom: 24px; margin-bottom: 24px; }
.briefs--compact .brief-item__title { margin-bottom: 10px; font-size: 20px; line-height: 1.28; }

/* Topic archive: a date rail down the left. */
.briefs--rail { margin-top: 28px; }
.briefs--rail .brief-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 26px 0;
  margin-bottom: 0;
}
.briefs--rail .brief-item:last-child { padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.briefs--rail .brief-item__title { margin-bottom: 10px; font-size: 24px; line-height: 1.25; }
.briefs--rail .brief-item__summary { margin-bottom: 10px; font-size: 16px; max-width: 44em; }

/* ---------- meta lines and tags ---------- */

.meta {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.meta__assembled { font-style: normal; }
/* A meta line that is a sentence rather than a label: same quiet voice, but
   uppercase tracking is for labels and makes running words hard to read. */
.meta--note {
  display: block;
  font-size: 12px;
  letter-spacing: .01em;
  text-transform: none;
}

.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px; line-height: 1.4;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 3px 9px;
}
/* Withdrawn, our error, stale: the same words, filled rather than outlined. */
.tag--solid { background: var(--ink); color: var(--ink-invert); }

/* ---------- photo slots ----------
   The service publishes no imagery, and the editorial policy forbids anything
   that implies effects a record does not establish. This is the box a picture
   would occupy if one were ever attached — always grayscale, always captioned
   with what it shows and who made it. When there is no image the slot is
   omitted server-side and the layouts above collapse to one column. */

.photo-slot {
  aspect-ratio: 4 / 3;
  width: 100%;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(135deg, #efedea 0 10px, #e7e5e1 10px 20px);
  filter: grayscale(1);
  display: flex; align-items: flex-end;
  padding: 16px;
}
.photo-slot--square { aspect-ratio: 1 / 1; padding: 12px; }
.photo-slot--wide { aspect-ratio: 21 / 9; margin-bottom: 36px; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.photo-slot figcaption, .photo-slot__caption {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .04em;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 6px 10px;
}

/* ---------- brief page ---------- */

.article__kicker {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.article__title {
  margin: 0 0 22px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.08;
  max-width: 18em;
}
.article__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 56px;
  align-items: start;
}
.article__standfirst {
  margin: 0 0 26px;
  font-size: 20px; line-height: 1.55;
  font-style: italic;
  color: var(--ink-body);
}
.article__body p { margin: 0 0 20px; font-size: 17.5px; line-height: 1.75; }
.article__body p:last-child { margin-bottom: 40px; }

/* Provenance rail. Not a byline: briefs have no author, so this carries where
   the page came from instead. */
.rail {
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  position: sticky; top: 20px;
}
.rail__label {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.rail__value { margin: 0 0 22px; font-size: 15px; line-height: 1.6; }
.rail__value.mono { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }

/* ---------- panels ---------- */

.panel {
  border-top: 1px solid var(--ink);
  padding-top: 22px;
  margin: 0 0 36px;
}
.panel:last-child { margin-bottom: 0; }
.panel--measure { max-width: var(--measure); }
.panel h2 {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.panel__note { margin: -10px 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.panel p { font-size: 16px; line-height: 1.7; color: var(--ink-body); }
.panel > p { margin: 0 0 16px; }
.panel > p:last-child { margin-bottom: 0; }
.panel__foot code { font-family: inherit; font-size: inherit; }
.panel__foot {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- label / value rows ---------- */

.kv { margin: 0 0 20px; }
.kv:last-child { margin-bottom: 0; }
.kv div {
  display: flex; gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.kv dt {
  flex: 0 0 170px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 3px;
}
.kv dd { margin: 0; flex: 1 1 auto; font-size: 15.5px; overflow-wrap: anywhere; }
.kv dd.mono, .kv dd .mono { font-family: var(--mono); font-size: 13px; }
.kv dd .meta { display: inline; font-size: 10.5px; }

/* ---------- revisions ---------- */

.revisions { list-style: none; margin: 0; padding: 0; }
.revision {
  border-left: 2px solid var(--ink);
  padding-left: 20px;
  margin: 0 0 28px;
}
.revision:last-child { margin-bottom: 0; }
.revision__head {
  margin: 0 0 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.revision__note { margin: 0 0 14px; font-size: 16px; line-height: 1.65; }
.revision__note:last-child { margin-bottom: 0; }
.revision__previous {
  border: 1px solid var(--rule);
  padding: 16px 18px;
  margin: 12px 0 0;
  color: var(--ink-body);
}
.revision__previous p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; }
.revision__previous p:last-child { margin-bottom: 0; }
.revision__previous-headline {
  font-family: var(--display);
  font-size: 17px; line-height: 1.3;
}

details > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
}
details[open] > summary { margin-bottom: 16px; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; margin-top: 16px; }
table.data { border-collapse: collapse; width: 100%; font-size: 14.5px; }
table.data th, table.data td {
  text-align: left;
  padding: 9px 12px;
  vertical-align: top;
}
table.data th:first-child, table.data td:first-child { padding-left: 0; }
table.data th:last-child, table.data td:last-child { padding-right: 0; }
table.data th {
  font-family: var(--sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
}
table.data td { border-bottom: 1px solid var(--rule); }
table.data td.origin { color: var(--ink-soft); }
table.data td.mono { font-family: var(--mono); font-size: 13px; }

/* The status table is the page, not a footnote inside one. */
table.status { font-size: 16.5px; }
table.status th { padding: 10px 12px; }
table.status td { padding: 16px 12px; }
table.status .when { font-size: 15.5px; color: var(--ink-body); }

code {
  font-family: var(--mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* ---------- prose pages ---------- */

.prose { max-width: var(--measure); }
.prose--wide { max-width: 52em; }
.prose--table { max-width: 60em; }
.prose--full { max-width: none; }
.prose h1 {
  margin: 0 0 24px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08;
}
.prose > p:first-of-type, .prose .prose__lede {
  font-size: 18px; line-height: 1.7; color: var(--ink-body);
}
.prose h2 {
  margin: 40px 0 14px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
}
.prose h3 {
  margin: 28px 0 8px;
  font-family: var(--display); font-weight: 400;
  font-size: 22px; line-height: 1.3;
}
.prose p { margin: 0 0 18px; font-size: 17px; line-height: 1.75; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; font-size: 17px; line-height: 1.75; }
.prose blockquote {
  margin: 32px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 22px; line-height: 1.45;
  color: var(--ink);
}
.prose .meta { margin-bottom: 18px; }
.prose p.status__note {
  margin: 28px 0 0;
  font-size: 16px; line-height: 1.7;
  color: var(--ink-body);
  max-width: 44em;
}
.prose + .table-scroll { margin-top: 22px; }

/* Numbered steps: "How a brief is made". */
ol.steps { list-style: none; margin: 0 0 18px; padding: 0; }
ol.steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16.5px; line-height: 1.65;
}
.steps .steps__n {
  font-family: var(--display);
  font-size: 22px; line-height: 1.2;
  color: var(--ink-soft);
}
.steps strong, ol.steps strong { font-weight: 600; }

/* Hairline-separated rows, no bullets: "What is never inferred", "Known gaps". */
ul.rows { list-style: none; margin: 0 0 18px; padding: 0; }
ul.rows li {
  padding: 14px 0;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16.5px; line-height: 1.65;
}

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

.source-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--ink);
  margin: 0;
}
.source-entry__name {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 400;
  font-size: 26px; line-height: 1.2;
}
.source-entry__counts {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.source-entry__note { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: var(--ink-body); }
.source-entry__terms { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.source-entry .kv { margin-top: 16px; }

/* ---------- corrections ---------- */

ul.revision-list { list-style: none; margin: 0; padding: 0; }
ul.revision-list li {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
ul.revision-list .revision-list__when {
  margin: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
h3.revision-list__title {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 400;
  font-size: 19px; line-height: 1.3;
}
.revision-list__title a { text-decoration: none; }
ul.revision-list .revision-list__note { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-body); }

/* The empty state is deliberately large and plain. */
p.empty-state {
  margin: 0 0 44px;
  font-family: var(--display);
  font-size: 24px; line-height: 1.3;
  color: var(--ink-soft);
}

/* ---------- pagination ---------- */

.pager {
  display: flex; gap: 16px;
  align-items: center; justify-content: space-between;
  padding-top: 20px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pager a { color: var(--ink); text-decoration: none; }
.pager a:hover { text-decoration: underline; }

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

.footer {
  background: var(--ink);
  color: var(--ink-invert);
}
.footer__row {
  max-width: var(--container);
  margin: 0 auto;
  padding: 52px var(--gutter) 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 56px;
}
.footer__wordmark {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: 22px; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase;
}
.footer__where {
  margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: 14px;
  color: #b8b6b1;
}
.footer ul {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0 0 24px; padding: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
}
.footer a { color: var(--ink-invert); text-decoration: none; transition: opacity 120ms; }
.footer a:hover { color: var(--ink-invert); opacity: .6; }
.footer p {
  margin: 0 0 12px;
  font-size: 15px; line-height: 1.7;
  color: var(--ink-invert-soft);
  max-width: 46em;
}
.footer p:last-child { margin-bottom: 0; }

/* ---------- responsive ---------- */

/* ---------- search ----------
   Two forms, one component family. The masthead carries a single field so the
   whole site is one keystroke from a search; /search/ carries the same field
   plus a section filter and explains what the ordering does and does not mean. */

.search-mini { display: flex; gap: 6px; align-items: center; }
.search-mini__label {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.search-mini__input {
  font-family: var(--sans); font-size: 13px;
  padding: 7px 10px; width: 150px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.search-mini__input::placeholder { color: var(--ink-soft); }
.search-mini__go {
  font-family: var(--sans); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 8px 12px; cursor: pointer;
  color: var(--ink-invert); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 0;
}

.search {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  padding: 22px 0; margin: 0 0 10px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.search__row { display: flex; flex-direction: column; gap: 6px; }
.search__label {
  font-family: var(--sans); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.search__input, .search__select {
  font-family: var(--serif); font-size: 16px;
  padding: 9px 12px;
  color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--ink); border-radius: 0;
}
.search__input { min-width: 320px; }
.search__select { font-family: var(--sans); font-size: 14px; }
.search__go {
  font-family: var(--sans); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 11px 20px; cursor: pointer;
  color: var(--ink-invert); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 0;
}
.prose p.search__count { font-size: 16px; color: var(--ink-body); }

/* ---------- section index and month list ---------- */

ul.rows.section-index li,
ul.rows.archive-months li {
  display: flex; justify-content: space-between; gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  font-size: 15.5px;
}
.section-index__count, .archive-months__count {
  font-family: var(--sans); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); text-align: right; flex: 0 0 auto;
}

/* Remaining sections below the figure grid: two columns of compact lists, so
   a section that exists is always visible on the front page without the
   template having to name it. */
.strips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}
.strips .section { border-top: 1px solid var(--rule); }

@media (max-width: 1100px) {
  .article__columns { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .rail {
    position: static;
    border: 1px solid var(--rule);
    padding: 22px;
  }
}

@media (max-width: 900px) {
  .lead:has(.photo-slot), .band { grid-template-columns: minmax(0, 1fr); }
  .band { gap: 40px; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .briefs--feature .brief-item:has(.photo-slot) { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .masthead__row { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .masthead__note { display: none; }
  .masthead__title { font-size: 24px; }
  .masthead__links { justify-content: center; }

  .nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav ul::-webkit-scrollbar { display: none; }
  .nav li { flex: 0 0 auto; }

  .ticker__label { padding-left: var(--gutter); }

  .figures { grid-template-columns: minmax(0, 1fr); }

  .briefs--rail .brief-item,
  .revision-list li { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .kv div { flex-direction: column; gap: 4px; }
  .kv dt { flex-basis: auto; padding-top: 0; }

  .source-entry { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .footer__row { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 480px) {
  :root { --gutter: 20px; }
  .lead__title { font-size: clamp(30px, 4.4vw, 54px); }
  .article__body p { font-size: 16.5px; }
  .steps li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 900px) {
  .strips { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .search-mini { display: none; }
  .search { flex-direction: column; align-items: stretch; }
  .search__input { min-width: 0; width: 100%; }
  .search__go { width: 100%; }
}

@media print {
  .nav, .ticker, .footer ul, .skip, .masthead__links { display: none; }
  body { background: #fff; }
  .masthead, .footer { background: none; color: var(--ink); }
  .footer p, .footer__where { color: var(--ink); }
  .rail { position: static; }
}