/* ==========================================================================
   WhoGaveTheOrder.in — design system
   Editorial / investigative / civic. Public archive x newsroom x evidence room.
   No party colours, no outrage aesthetics, no stock imagery, no dependencies.
   Mobile-first: base rules are phone rules; media queries add width.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Paper and ink.
     A softer, cooler ground than pure black on white. The ink is a blue-black
     rather than a true black, which reads as considered rather than severe while
     keeping well clear of contrast minimums. */
  --paper:        #f8f9fa;
  --paper-2:      #ffffff;
  --paper-3:      #eef2f5;
  --ink:          #16232e;
  --ink-2:        #3d4c58;
  --ink-3:        #64737f;
  --ink-4:        #93a1ab;
  --rule:         #dde4ea;
  --rule-strong:  #b3c2ce;

  /* --- Brand: blue, yellow, light grey ---------------------------------- *
     The blue leads, the yellow is used sparingly for emphasis, and the grey
     carries surfaces. These are deliberately kept out of the evidence-state
     range below: a brand colour that reads as a status label would break the
     one thing this interface has to get right. Yellow in particular never fills
     a large area, because REPORTED is amber and the two must not blur.

     The values are pitched to be seen. An earlier pass held the blue at a tint
     so pale that on most screens it read as grey, which is a colour scheme
     nobody notices — worse than no colour at all. */
  --brand-blue:        #3d8dc4;   /* the signature blue: marks, rules, borders */
  --brand-blue-ink:    #10527d;   /* text-safe on light ground */
  --brand-blue-soft:   #d8e9f6;   /* tinted surface */
  --brand-blue-line:   #5aa0d0;
  --brand-yellow:      #f5c518;
  --brand-yellow-ink:  #6b5000;
  --brand-yellow-soft: #fdf0c8;
  --brand-grey:        #eef2f5;

  /* The UNKNOWN block inverts with the scheme, so its kicker needs a yellow
     that sits on whichever ground the block is showing. */
  --gap-kicker:        var(--brand-yellow);

  /* Evidence states — restrained accents, never decorative */
  --verified-fg:      #0f5132;  --verified-bg:      #e6f2ea;  --verified-br:      #a9cfba;
  --corroborated-fg:  #0b4f6c;  --corroborated-bg:  #e2eff5;  --corroborated-br:  #a4c9d9;
  --reported-fg:      #7c5300;  --reported-bg:      #fbf1dc;  --reported-br:      #dfc9a0;
  --disputed-fg:      #7a2e0e;  --disputed-bg:      #fae7de;  --disputed-br:      #e0b7a4;
  --unverified-fg:    #4b5563;  --unverified-bg:    #eeeeec;  --unverified-br:    #cfcfca;
  --unknown-fg:       #fcfcfa;  --unknown-bg:       #101012;  --unknown-br:       #101012;

  /* Interface accent, drawn from the brand rather than a separate navy. */
  --accent:       var(--brand-blue-ink);
  --accent-soft:  var(--brand-blue-soft);
  --focus:        var(--brand-blue-ink);

  /* Type */
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 66ch;
  --shell:   1140px;
  --radius:  3px;   /* archival, not app-like */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #0f1720;
    --paper-2:     #16202b;
    --paper-3:     #1c2833;
    --ink:         #eef3f7;
    --ink-2:       #c6d2dc;
    --ink-3:       #93a1ab;
    --ink-4:       #6b7a86;
    --rule:        #263340;
    --rule-strong: #3d4d5c;

    --brand-blue:        #6cb2e0;
    --brand-blue-ink:    #a8d4f0;
    --brand-blue-soft:   #17303f;
    --brand-blue-line:   #4a89b8;
    --brand-yellow:      #f2c94c;
    --brand-yellow-ink:  #f5da8f;
    --brand-yellow-soft: #2f2814;
    --brand-grey:        #1c2833;

    /* The block is light-on-dark-page here, so the kicker takes a dark amber. */
    --gap-kicker:        #7a5b00;

    --verified-fg:     #79d3a3;  --verified-bg:     #10261c;  --verified-br:     #2c5a41;
    --corroborated-fg: #7cc4e6;  --corroborated-bg: #0e2430;  --corroborated-br: #285b73;
    --reported-fg:     #e8bd6a;  --reported-bg:     #2a2113;  --reported-br:     #6b5426;
    --disputed-fg:     #ef9d78;  --disputed-bg:     #2c1710;  --disputed-br:     #713923;
    --unverified-fg:   #a8a8ae;  --unverified-bg:   #212126;  --unverified-br:   #3b3b42;
    --unknown-fg:      #101012;  --unknown-bg:      #f2f1ee;  --unknown-br:      #f2f1ee;

    --accent:      var(--brand-blue-ink);
    --accent-soft: var(--brand-blue-soft);
    --focus:       var(--brand-blue-ink);
  }
}

/* --- Reset ---------------------------------------------------------------- */

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

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

/* --- Typography ----------------------------------------------------------- */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }

.display {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 11vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.kicker {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede { font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 0.9rem; }
.prose ul, .prose ol { margin: 0.75rem 0 0.75rem 1.15rem; }
.prose li { margin-bottom: 0.35rem; }
.prose h3 { font-size: 1.25rem; margin: 1.9rem 0 0.55rem; }
.small { font-size: 0.8125rem; color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; }
.muted { color: var(--ink-3); }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

/* --- Layout --------------------------------------------------------------- */

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 1.15rem; }
.shell--narrow { max-width: 800px; }
main { flex: 1; }

section { padding: 2.5rem 0; }
section + section { border-top: 1px solid var(--rule); }
@media (min-width: 800px) { section { padding: 3.5rem 0; } }

.section-head { margin-bottom: 1.75rem; }
/* The scale was flat: section headings, card headings and body text sat within
   a few pixels of each other, so a long page read as one continuous texture
   with no shape to scan. The top of the scale moves up and the bottom stays
   put, which widens the steps without shrinking anything anyone has to read. */
.section-head h2 { font-size: clamp(1.55rem, 5vw, 2.5rem); margin-top: 0.35rem; letter-spacing: -0.02em; }
.section-head p { margin-top: 0.6rem; }

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.grid { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px) and (max-width: 979px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }

/* --- Site chrome ---------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead__bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.7rem 0;
}
/* Below ~400px the wordmark and the persistent CTA cannot share a row without
   colliding, so the wordmark takes its own line rather than being covered. */
@media (max-width: 419px) {
  .wordmark { flex: 1 0 100%; }
  .masthead__tools { width: 100%; justify-content: space-between; }
}
/* The wordmark stays on one line at every width. On the narrowest phones it
   sheds the ".in" rather than wrapping into a three-line block. */
.wordmark {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(0.72rem, 3.1vw, 1rem);
  text-transform: uppercase; letter-spacing: 0.01em; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  white-space: nowrap; min-width: 0;
}
@media (max-width: 419px) { .wordmark span.dot { display: none; } }
@media (min-width: 900px) { .wordmark { gap: 0.4rem; } }
.wordmark span.dot { color: var(--ink-4); font-weight: 400; }
.masthead__tools { display: flex; align-items: center; gap: 0.5rem; }

.nav-toggle {
  background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 0.35rem 0.6rem; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav {
  display: none;
  border-top: 1px solid var(--rule);
  padding: 0.5rem 0 0.85rem;
}
.nav[data-open="true"] { display: block; }
.nav ul { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; }
.nav a {
  display: block; padding: 0.5rem 0; text-decoration: none;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-2);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }

@media (min-width: 900px) {
  .nav { display: block; border-top: 0; padding: 0; }
  .nav ul { flex-direction: row; gap: 1.1rem; align-items: center; }
  .nav a { padding: 0.15rem 0; font-size: 0.6875rem; }
  .masthead__bar { padding: 0.85rem 0; }
}

.cta-persistent {
  display: inline-block; text-decoration: none;
  background: var(--ink); color: var(--paper);
  padding: 0.45rem 0.6rem; border-radius: var(--radius);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 560px) { .cta-persistent { padding: 0.45rem 0.75rem; font-size: 0.6875rem; letter-spacing: 0.09em; } }
.cta-persistent:hover { background: var(--accent); color: var(--paper); }

.notice-bar {
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
  font-size: 0.75rem; color: var(--ink-2);
  padding: 0.45rem 0;
}
.notice-bar strong { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.6875rem; }

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 2.5rem;
  font-size: 0.8125rem; color: var(--ink-3);
}
.site-footer h4 { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.3rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__legal { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.75rem 1.1rem; border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper); text-decoration: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--small { padding: 0.45rem 0.7rem; font-size: 0.6875rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Evidence-state chips (the brand's core visual grammar) ---------------- */

.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--unverified-br);
  background: var(--unverified-bg); color: var(--unverified-fg);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
}
.chip--verified     { background: var(--verified-bg);     color: var(--verified-fg);     border-color: var(--verified-br); }
.chip--corroborated { background: var(--corroborated-bg); color: var(--corroborated-fg); border-color: var(--corroborated-br); }
.chip--reported     { background: var(--reported-bg);     color: var(--reported-fg);     border-color: var(--reported-br); }
.chip--disputed     { background: var(--disputed-bg);     color: var(--disputed-fg);     border-color: var(--disputed-br); }
.chip--unverified   { background: var(--unverified-bg);   color: var(--unverified-fg);   border-color: var(--unverified-br); }
.chip--unknown      { background: var(--unknown-bg);      color: var(--unknown-fg);      border-color: var(--unknown-br); }
.chip--plain        { background: transparent; color: var(--ink-3); border-color: var(--rule-strong); }
.chip--sample       { background: repeating-linear-gradient(45deg, var(--paper-3), var(--paper-3) 6px, var(--paper-2) 6px, var(--paper-2) 12px); color: var(--ink-2); border-color: var(--rule-strong); }

/* Status chips hold two or three words and must never break mid-label. The
   plain and sample chips carry arbitrary text — an office name, an evidence
   title, a channel description — so they wrap instead of pushing the page out. */
.chip--plain, .chip--sample {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}

/* Answer states for questions */
.chip--answered           { background: var(--verified-bg);   color: var(--verified-fg);   border-color: var(--verified-br); }
.chip--partially_answered { background: var(--reported-bg);   color: var(--reported-fg);   border-color: var(--reported-br); }
.chip--unanswered         { background: var(--unknown-bg);    color: var(--unknown-fg);    border-color: var(--unknown-br); }

.chip-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.chip-legend > div { flex: 1 1 210px; }
.chip-legend p { margin-top: 0.3rem; font-size: 0.8125rem; color: var(--ink-3); }

/* --- Cards and records ---------------------------------------------------- */

.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem;
  display: block;
  text-decoration: none;
  color: inherit;
}
a.card { transition: border-color 0.15s, transform 0.15s; }
a.card:hover { border-color: var(--rule-strong); }
.card h3 { font-size: 1.125rem; margin: 0.4rem 0 0.4rem; }
.card p { font-size: 0.875rem; color: var(--ink-2); }
.card__meta { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); }

.card--sample { border-style: dashed; }
.sample-ribbon {
  display: block; margin: -1.15rem -1.15rem 0.9rem;
  padding: 0.3rem 1.15rem;
  background: var(--paper-3); border-bottom: 1px dashed var(--rule-strong);
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Three-column fact frame — the defining homepage device */
.frame { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); overflow: hidden; }
.frame__col { padding: 1.25rem; border-top: 1px solid var(--rule); }
.frame__col:first-child { border-top: 0; }
.frame__col h3 { font-size: 1.0625rem; letter-spacing: 0; text-transform: uppercase; }
.frame__col > p { font-size: 0.875rem; color: var(--ink-2); margin-top: 0.4rem; }
.frame__count { font-family: var(--serif); font-size: 2.75rem; line-height: 1; display: block; margin-bottom: 0.4rem; }
.frame__list { list-style: none; margin-top: 0.85rem; font-size: 0.8125rem; }
.frame__list li { padding: 0.4rem 0; border-top: 1px dotted var(--rule); color: var(--ink-2); }
@media (min-width: 860px) {
  .frame { display: grid; grid-template-columns: repeat(3, 1fr); }
  .frame__col { border-top: 0; border-left: 1px solid var(--rule); }
  .frame__col:first-child { border-left: 0; }
}

/* The UNKNOWN block — a strong state, never an apology */
.gap-block {
  background: var(--unknown-bg); color: var(--unknown-fg);
  border-radius: var(--radius); padding: 1.25rem;
}
.gap-block .kicker { color: rgba(252, 252, 250, 0.6); }
@media (prefers-color-scheme: dark) { .gap-block .kicker { color: rgba(16,16,18,0.6); } }
.gap-block h3 { font-size: 1.25rem; margin: 0.35rem 0 0.5rem; }
.gap-block p { font-size: 0.875rem; opacity: 0.85; }
.gap-block p + p { margin-top: 0.7rem; }
.gap-block a { color: inherit; }

/* --- Distance to the order ------------------------------------------------
   A ladder, not a progress bar. Unreached rungs stay legible: they are the
   work still to do, and fading them out would hide the point of the graphic. */
.ladder-block { }
.ladder__count { font-size: 1.25rem; margin: 0.35rem 0 0.5rem; }
.ladder__rule { font-size: 0.8125rem; color: var(--ink-2); margin-bottom: 1.1rem; }
.ladder { list-style: none; margin: 0; padding: 0; position: relative; }
.ladder__rung {
  position: relative; padding: 0 0 1.1rem 2.4rem; display: block;
}
/* The spine, drawn behind the markers and stopped at the last rung. */
.ladder__rung::before {
  content: ''; position: absolute; left: 0.72rem; top: 1.5rem; bottom: -0.15rem;
  width: 2px; background: var(--rule-strong);
}
.ladder__rung:last-child { padding-bottom: 0; }
.ladder__rung:last-child::before { display: none; }
.ladder__mark {
  position: absolute; left: 0; top: 0.05rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; font-family: var(--sans);
  background: var(--paper-2); color: var(--ink-2);
  border: 2px solid var(--rule-strong);
}
.ladder__rung--reached .ladder__mark {
  background: var(--brand-blue-ink); color: #fff; border-color: var(--brand-blue-ink);
}
.ladder__rung--reached::before { background: var(--brand-blue-ink); }
.ladder__body h4 { font-size: 0.9375rem; margin: 0 0 0.2rem; }
.ladder__rung:not(.ladder__rung--reached) .ladder__body h4 { color: var(--ink-2); }
.ladder__def { font-size: 0.8125rem; color: var(--ink-2); margin: 0; }
.ladder__note {
  font-size: 0.8125rem; margin: 0.4rem 0 0; padding-left: 0.7rem;
  border-left: 3px solid var(--brand-yellow);
}
.ladder__cite { font-size: 0.8125rem; margin: 0.35rem 0 0; font-family: var(--mono); }
.ladder__next { font-size: 0.8125rem; margin-top: 1rem; color: var(--ink-2); }

/* Empty-state — used everywhere the record is genuinely bare */
.empty {
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  padding: 1.15rem; background: var(--paper-2);
}
.empty h4 { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.4rem; }
.empty p { font-size: 0.875rem; color: var(--ink-2); max-width: var(--measure); }

/* --- Definition / metadata tables ---------------------------------------- */

.meta-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.meta-table th, .meta-table td { text-align: left; vertical-align: top; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.meta-table th {
  width: 34%; font-family: var(--sans); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
}
.meta-table td { color: var(--ink-2); }
@media (max-width: 560px) {
  .meta-table th, .meta-table td { display: block; width: 100%; border-bottom: 0; padding: 0.15rem 0; }
  .meta-table tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Timeline ------------------------------------------------------------- */

.timeline { list-style: none; border-left: 2px solid var(--rule-strong); margin-left: 0.35rem; }
.timeline li { position: relative; padding: 0 0 1.35rem 1.15rem; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 0.5rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule-strong);
}
.timeline li[data-state="VERIFIED"]::before { border-color: var(--verified-fg); background: var(--verified-fg); }
.timeline li[data-state="UNKNOWN"]::before { border-color: var(--ink); background: var(--paper); }
.timeline__time { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }
.timeline__title { font-family: var(--serif); font-size: 1rem; font-weight: 700; margin: 0.15rem 0 0.25rem; }
.timeline p { font-size: 0.875rem; color: var(--ink-2); }

/* --- Chain of command ----------------------------------------------------- */

.chain { list-style: none; }
.chain__level { margin-bottom: 0.5rem; }
.chain__rung {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin: 1.1rem 0 0.5rem;
}
.chain__rung::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.chain__arrow { text-align: center; color: var(--ink-4); font-size: 1.1rem; line-height: 1; margin: 0.15rem 0; }

.node {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); overflow: hidden;
}
.node + .node { margin-top: 0.6rem; }
.node__head {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 0.95rem 1.05rem; background: none; border: 0; cursor: pointer; text-align: left;
}
.node__head:hover { background: var(--paper-3); }
.node__title { display: block; font-family: var(--serif); font-size: 1rem; font-weight: 700; }
.node__sub { display: block; font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.15rem; }
.node__chips { margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.node__toggle { font-family: var(--mono); font-size: 1rem; color: var(--ink-3); flex: none; }
.node__body { padding: 0 1.05rem 1.05rem; border-top: 1px dotted var(--rule); }
.node__body[hidden] { display: none; }
.node__body h4 {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  margin: 1rem 0 0.35rem;
}
.node__body p, .node__body li { font-size: 0.875rem; color: var(--ink-2); }
.node__body ul { list-style: none; }
.node__body ul li { padding-left: 0.9rem; position: relative; margin-bottom: 0.25rem; }
.node__body ul li::before { content: "—"; position: absolute; left: 0; color: var(--ink-4); }

/* The two claims that must never be conflated */
.authority-split { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
@media (min-width: 640px) { .authority-split { grid-template-columns: 1fr 1fr; } }
.authority-split > div { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.75rem; background: var(--paper); }
.authority-split h5 {
  font-family: var(--sans); font-size: 0.625rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.4rem;
}
.authority-split p { font-size: 0.8125rem; }

/* --- Questions ------------------------------------------------------------ */

.question {
  border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius); background: var(--paper-2); padding: 0.95rem 1.05rem;
}
.question + .question { margin-top: 0.55rem; }
.question[data-state="UNANSWERED"] { border-left-color: var(--ink); }
.question[data-state="ANSWERED"] { border-left-color: var(--verified-fg); }
.question[data-state="PARTIALLY_ANSWERED"] { border-left-color: var(--reported-fg); }
.question[data-state="DISPUTED"] { border-left-color: var(--disputed-fg); }
.question__q { font-family: var(--serif); font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.question__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.question__note { font-size: 0.8125rem; color: var(--ink-3); margin-top: 0.5rem; }

/* --- Compare: our evidence / govt response / unanswered ------------------- */

.compare { display: grid; gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.compare__col { padding: 1.1rem; border-top: 1px solid var(--rule); }
.compare__col:first-child { border-top: 0; }
.compare__col h4 { font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.55rem; }
.compare__col p, .compare__col li { font-size: 0.875rem; color: var(--ink-2); }
@media (min-width: 900px) {
  .compare { grid-template-columns: repeat(3, 1fr); }
  .compare__col { border-top: 0; border-left: 1px solid var(--rule); }
  .compare__col:first-child { border-left: 0; }
}

blockquote.official {
  border-left: 3px solid var(--rule-strong); padding-left: 0.9rem;
  font-family: var(--serif); font-size: 0.9375rem; color: var(--ink);
}
blockquote.official cite { display: block; margin-top: 0.4rem; font-family: var(--sans); font-size: 0.75rem; font-style: normal; color: var(--ink-3); }

/* --- Filters and search --------------------------------------------------- */

.toolbar { display: grid; gap: 0.6rem; }
@media (min-width: 760px) { .toolbar { grid-template-columns: 1fr auto; align-items: center; } }

.field { display: block; }
.field > span {
  display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.3rem;
}
.field input[type="text"], .field input[type="search"], .field input[type="date"],
.field input[type="email"], .field input[type="url"], .field select, .field textarea {
  width: 100%; padding: 0.6rem 0.7rem;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-size: 0.9375rem;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 1px; }
.field__hint { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.25rem; }

.filter-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.filter-chip {
  border: 1px solid var(--rule-strong); background: var(--paper-2); color: var(--ink-2);
  border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.filter-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.result-count { font-size: 0.8125rem; color: var(--ink-3); }

/* --- Map ------------------------------------------------------------------ */

#incident-map { height: 380px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-3); }
.map-fallback { padding: 1.15rem; }
.leaflet-container { font: inherit !important; background: var(--paper-3) !important; }
.map-pin {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper-2); border: 2px solid var(--ink); color: var(--ink);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
}
.map-pin[data-state="UNDER_INVESTIGATION"] { border-style: dashed; }

/* --- Process / workflow strip -------------------------------------------- */

.workflow { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.workflow__step {
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 0.4rem 0.65rem; background: var(--paper-2);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.workflow__arrow { color: var(--ink-4); }

/* --- Inline explainers ---------------------------------------------------- *
   Progressive disclosure. Quiet when closed so a fluent reader is not nagged;
   plainly available when a first-time reader needs it. */

.explainer {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.explainer + * { margin-top: 1rem; }
.explainer summary {
  cursor: pointer;
  padding: 0.6rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-2);
  list-style: none;
  display: flex; align-items: center; gap: 0.5rem;
}
.explainer summary::-webkit-details-marker { display: none; }
.explainer summary::before {
  content: "?";
  flex: none;
  display: grid; place-items: center;
  width: 1.15rem; height: 1.15rem;
  border: 1px solid var(--rule-strong); border-radius: 50%;
  font-family: var(--serif); font-size: 0.75rem; color: var(--ink-3);
}
.explainer summary:hover { color: var(--ink); }
.explainer[open] summary { border-bottom: 1px dotted var(--rule); }
.explainer[open] summary::before { content: "\2212"; }
.explainer__body { padding: 0.85rem; }
.explainer__body p { font-size: 0.875rem; color: var(--ink-2); }
.explainer__body .chip-legend p { margin-top: 0.25rem; }

/* --- Entry-point picker (homepage) --------------------------------------- */

.entry { display: grid; gap: 0.6rem; }
@media (min-width: 760px) { .entry { grid-template-columns: repeat(3, 1fr); } }
.entry a {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); padding: 1rem 1.1rem;
  transition: border-color 0.15s, background 0.15s;
}
.entry a:hover { border-color: var(--ink); background: var(--paper-3); }
.entry h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.entry p { font-size: 0.8125rem; color: var(--ink-3); }
.entry .entry__go {
  display: inline-block; margin-top: 0.6rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent);
}

/* --- Misc ----------------------------------------------------------------- */

.hero { padding: 2.75rem 0 2.25rem; }
@media (min-width: 800px) { .hero { padding: 4.5rem 0 3.5rem; } }
.hero__claim { margin-top: 1.25rem; max-width: 30ch; font-family: var(--serif); font-size: clamp(1.15rem, 4.2vw, 1.6rem); line-height: 1.3; }
.hero__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }

.crumb { font-size: 0.75rem; color: var(--ink-3); padding-top: 1.25rem; }
.crumb a { color: var(--ink-3); }

.section-number {
  font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-4);
  letter-spacing: 0.08em;
}

.count-strip { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.count-strip div { min-width: 90px; }
.count-strip b { display: block; font-family: var(--serif); font-size: 1.85rem; line-height: 1; }
.count-strip span { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }

.callout {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: var(--radius); padding: 1rem 1.1rem;
}
.callout p { font-size: 0.875rem; color: var(--ink-2); }
.callout p + p { margin-top: 0.5rem; }

.form-status { margin-top: 0.9rem; font-size: 0.875rem; }
.form-status[data-tone="ok"] { color: var(--verified-fg); }
.form-status[data-tone="error"] { color: var(--disputed-fg); }

.hp { position: absolute; left: -9999px; }

.pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; }

@media print {
  .masthead, .site-footer, .nav-toggle, .cta-persistent, .notice-bar { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .node, .question { break-inside: avoid; }
}

/* --- Hero facts ----------------------------------------------------------- *
   The front page states what the archive holds, in sourced lines, rather than
   describing its own methodology. */

.hero__list { list-style: none; margin-top: 1.5rem; max-width: 44ch; }
.hero__list li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline;
}
/* At width the list stops being a narrow column of type against an empty half
   and becomes what it actually is: a register, one claim per row with its state
   in a column of its own. The state chips line up, so they can be compared down
   the page instead of being hunted for at the end of each sentence. */
@media (min-width: 860px) {
  .hero__list { max-width: none; }
  .hero__list li {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.85rem 0;
  }
  .hero__list li > .chip { flex: none; }
  .hero__fact { flex: 1 1 auto; }
}
.hero__list li:last-child { border-bottom: 1px solid var(--rule); }
.hero__fact {
  font-family: var(--serif);
  font-size: clamp(1rem, 3.6vw, 1.25rem);
  line-height: 1.35;
}

/* --- Hero: what this is, and the three numbers --------------------------- *
   Modelled on the clarity of a good public registry: say what the site is in
   one line, then show the counts that matter before any explanation. */

.hero__what {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: clamp(1rem, 3.4vw, 1.1875rem);
  line-height: 1.45;
  color: var(--ink-2);
}
.hero__what strong { color: var(--ink); }

/* --- Hero layout ---------------------------------------------------------- *
   Below 960px the hero is one column, as it always was. Above it, the claim
   takes the left and the three counts take the right: the page had a narrow
   column of type against an empty half-page, which reads as unfinished rather
   than as space, and these three numbers are the strongest thing the front page
   has to say. They are given their own column rather than a wider row so the
   zero keeps a line to itself. */

@media (min-width: 960px) {
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
    gap: 3.5rem;
    align-items: start;
  }
  .hero__grid .stat-row {
    margin-top: 0.5rem;
    padding-top: 1.25rem;
    flex-direction: column;
    gap: 1.5rem;
  }
  .hero__grid .stat { width: 100%; }
  /* A rule down the left of the column, so the counts read as a panel attached
     to the claim rather than as three orphaned figures. */
  .hero__grid .stat-row {
    border-top: 0;
    border-left: 3px solid var(--brand-blue-ink);
    padding-left: 1.5rem;
  }
}

.stat-row {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.stat b {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1;
}
.stat span {
  display: block; margin-top: 0.2rem;
  font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-3);
}
/* The count that is zero is the point of the project, not a missing value. */
.stat--zero b { color: var(--ink); }
.stat--zero span { color: var(--ink-2); font-weight: 700; }

.hero .display { font-size: clamp(1.9rem, 8vw, 4rem); }

/* --- Language switch ------------------------------------------------------ *
   Sits in the status bar rather than the navigation: it is a property of how
   you are reading the page, not another place to go. */

.notice-bar__inner {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  align-items: baseline; justify-content: space-between;
}
.lang-switch { flex: none; font-size: 0.75rem; white-space: nowrap; }
.lang-switch a { color: var(--brand-blue-ink); }
.lang-switch__on { font-weight: 700; color: var(--ink); }

/* --- Record pages --------------------------------------------------------- *
   An evidence record had one size of heading and a run of identical cards, so
   the only hierarchy on the page came from the chips. The title now leads, the
   section headings sit clearly below it, and the finding pair is marked as the
   thing the record exists to say. */

.record__title {
  font-size: clamp(1.6rem, 5.5vw, 2.6rem);
  line-height: 1.1;
  margin: 0.8rem 0 1.25rem;
  max-width: 30ch;
}
.record__section {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--rule);
}

.finding { display: grid; gap: 0; border-radius: var(--radius); overflow: hidden; }
@media (min-width: 720px) { .finding { grid-template-columns: 1fr 1fr; } }
.finding__half { padding: 1.15rem 1.25rem; background: var(--paper-2); border: 1px solid var(--rule); }
/* The two halves meet on one rule rather than sitting in separate boxes: they
   are one statement in two parts, and a gap between them reads as two facts. */
@media (min-width: 720px) {
  .finding__half--not { border-left: 0; }
}
@media (max-width: 719px) {
  .finding__half--not { border-top: 0; }
}
.finding__half--does { border-top: 4px solid var(--brand-blue-ink); }
/* Dotted, and in the colour of an absence rather than of a state: what a
   document does not establish is not a status, it is a boundary. */
.finding__half--not { border-top: 4px dotted var(--rule-strong); background: var(--paper); }
.finding__text { margin-top: 0.5rem; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.finding__half--not .finding__text { color: var(--ink-2); }

/* --- Source provenance ---------------------------------------------------- *
   Shown on a record page, where a reader is deciding whether to believe it.
   The fixity line is deliberately plain: what the archive holds, and what it
   admits it does not. */

.source-detail { list-style: none; }
.source-detail > li { padding: 0.35rem 0; }
.source-detail > li + li { border-top: 1px dotted var(--rule); }
.source-detail__fixity { color: var(--ink-3); margin-top: 0.1rem; }
.source-detail__origin { color: var(--ink-2); margin-top: 0.15rem; }

/* --- Updates -------------------------------------------------------------- *
   A notice board, not a news feed: dated, short, and each entry pointing at the
   record it concerns so a reader can check the thing itself. The date leads,
   because when a thing was done is half of what an update is saying. */

.updates { list-style: none; }
.update {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.update:first-child { border-top: 0; padding-top: 0; }
.update__date {
  font-size: 0.75rem;
  color: var(--brand-blue-ink);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.update__title { font-size: 1.125rem; margin: 0.3rem 0 0.4rem; }
.update__body { font-size: 0.9375rem; color: var(--ink-2); max-width: var(--measure); }
.update__record { margin-top: 0.5rem; font-size: 0.8125rem; }

/* --- The change log ------------------------------------------------------- *
   A list of records, not prose. The verb is what the eye scans for, so it is
   set apart from the record title rather than running into it. */

.change__list { list-style: none; margin-top: 0.85rem; }
.change__list > li {
  padding: 0.5rem 0;
  border-top: 1px dotted var(--rule);
  font-size: 0.875rem;
}
.change__verb {
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-blue-ink);
}
.change__fields { list-style: none; margin: 0.4rem 0 0 0.9rem; }
.change__fields > li { margin-bottom: 0.2rem; }
.change__more > summary {
  cursor: pointer;
  padding: 0.5rem 0;
  border-top: 1px dotted var(--rule);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-blue-ink);
}
.change__more[open] > summary { border-bottom: 0; }

/* --- The appeal block ----------------------------------------------------- *
   Sits under an RTI record once the statutory period has run. The draft is
   monospaced because it is a document to be copied out, not prose to be read,
   and it scrolls inside its own box so a long draft cannot push the register
   off the page. */

.appeal {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px dotted var(--rule);
}
.cite__text,
.appeal__draft {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand-blue);
  border-radius: var(--radius);
  padding: 0.85rem;
  max-height: 24rem;
  overflow-y: auto;
}
/* A citation is three lines, not a document — it does not need the scroll box. */
.cite__text { max-height: none; }

/* --- Footer legal row ----------------------------------------------------- */

.footer-legal-links {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  margin-top: 0.85rem;
}
.footer-legal-links a { font-size: 0.8125rem; }
.footer-privacy {
  margin-top: 0.85rem; padding-top: 0.7rem;
  border-top: 1px dotted var(--rule);
  font-size: 0.8125rem;
}

/* ==========================================================================
   Brand application
   The palette lands on chrome and structure only. Evidence chips keep their own
   semantic colours: a reader must be able to tell VERIFIED from REPORTED at a
   glance, and a decorative colour competing with them would cost more than it
   adds.
   ========================================================================== */

/* A two-band rule across the very top: blue over yellow. Yellow is allowed
   three jobs on the page and no more — this stripe, the section mark that
   echoes it, and the rule under the zero. Everywhere else it appears only
   behind dark text, where its own contrast against the paper does not matter
   but the text's contrast against it does. */
.masthead::before {
  content: "";
  display: block;
  height: 6px;
  /* Fixed values, not tokens: this is a self-contained band, and in dark mode
     both brand tokens are light, so a tokenised version would put two pale
     bands against each other at 1.01:1 and the stripe would vanish. Deep blue
     over yellow separates on luminance (5.1:1), so it still reads for someone
     who cannot distinguish blue from yellow. */
  background: linear-gradient(to bottom, #10527d 0 55%, #f5c518 55% 100%);
}
.masthead { border-top: 0; border-bottom: 1px solid var(--brand-blue-line); }

/* The status bar carries the brand tint rather than flat grey, and closes on a
   full-weight blue rule so the top of the page is banded rather than washed. */
.notice-bar {
  background: var(--brand-blue-soft);
  border-bottom: 2px solid var(--brand-blue);
  color: var(--ink-2);
}
.notice-bar strong { color: var(--brand-blue-ink); }


/* Kickers were grey on grey. Blue gives them a job. */
.kicker { color: var(--brand-blue-ink); }

/* Links: blue, underlined on hover, as a document should be. */
a { color: var(--brand-blue-ink); }
a:hover { color: var(--ink); text-decoration-color: var(--brand-yellow); }

/* The wordmark is an anchor, but it is not a link being offered to the reader —
   it is the masthead of the publication. It stays ink, so the top of the page
   reads as a nameplate rather than as navigation. */
.wordmark, .wordmark:hover { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--brand-blue-ink); }

/* The primary action is the largest single piece of colour the interface can
   spend, so it is blue rather than near-black. Hover falls back to ink, which
   keeps the state change legible without introducing a third colour.
   --paper, not #fff: in dark mode --brand-blue-ink is a *light* blue, so a
   hardcoded white label on it would be unreadable. --paper inverts with the
   scheme and stays above 7:1 in both. */
.btn, .cta-persistent {
  background: var(--brand-blue-ink);
  border-color: var(--brand-blue-ink);
  color: var(--paper);
}
.btn:hover, .cta-persistent:hover {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.btn--ghost { background: transparent; border-color: var(--brand-blue); color: var(--brand-blue-ink); }
.btn--ghost:hover { background: var(--brand-blue-ink); border-color: var(--brand-blue-ink); color: var(--paper); }

/* Cards tint towards the brand on hover rather than just darkening. */
a.card:hover { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.entry a:hover { border-color: var(--brand-blue); background: var(--brand-blue-soft); }
.entry .entry__go { color: var(--brand-blue-ink); }
.node__head:hover { background: var(--brand-blue-soft); }

/* A tint strong enough to see is a tint strong enough to cost contrast: --ink-3
   on --brand-blue-soft measures 3.93:1, under AA. The muted lines inside a
   hovered surface step up a level rather than the tint being weakened back to
   invisibility. */
a.card:hover .small,
a.card:hover .muted,
a.card:hover .card__meta,
.entry a:hover p,
.node__head:hover .node__sub,
.node__head:hover .node__toggle { color: var(--ink-2); }

/* Callouts and pulled quotes are marked by a bar wide enough to be a bar. At
   3px a coloured edge reads as a slightly-off border; at 5px it reads as a
   deliberate mark. */
.callout {
  border-left: 5px solid var(--brand-blue-ink);
  background: var(--brand-blue-soft);
}
blockquote.official { border-left: 4px solid var(--brand-blue); }

/* Numbered steps and section numbers in blue, so the eye can follow them. */
.section-number { color: var(--brand-blue-ink); }
.frame__count { color: var(--brand-blue-ink); }
.workflow__arrow { color: var(--brand-blue); }

/* Every section opens on a short brand mark. Sections that already carry a
   kicker have their colour from it, so the mark only applies where the heading
   stands alone — otherwise the bar would sit between the kicker and the
   heading and read as a divider rather than as a mark. */
.section-head > h2:first-child::before {
  content: "";
  display: block;
  width: 3.25rem; height: 4px;
  margin-bottom: 0.7rem;
  /* The masthead stripe in miniature, turned on its side: it is the one mark
     that repeats down the page, so it is where the yellow can recur without
     ever sitting next to a REPORTED chip and being mistaken for a state. */
  background: linear-gradient(to right,
    var(--brand-blue-ink) 0 62%, var(--brand-yellow) 62% 100%);
}

/* The counts are information; the zero is the argument. Blue on the first two
   and ink under yellow on the last keeps that order legible — .stat--zero b
   below restores the ink. */
.stat b { color: var(--brand-blue-ink); }

/* The one figure that matters most on the homepage gets the yellow rule. Used
   once, deliberately, rather than sprinkled. `.stat b` is a block, so it has to
   become inline-block for the rule to hug the digit instead of running the full
   width of the column and reading as a stray bar. */
.stat--zero b {
  display: inline-block;
  color: var(--ink);
  padding-bottom: 0.1rem;
  border-bottom: 5px solid var(--brand-yellow);
}


/* The UNKNOWN block is the site's strongest visual state and stays near-black,
   but softened to the same blue-black as the ink so it belongs to the palette.
   Its kicker is the one place yellow is asked to carry text, and it earns it:
   9.8:1 on the dark ground. */
.gap-block { background: #16232e; }
@media (prefers-color-scheme: dark) { .gap-block { background: #eef3f7; } }
.gap-block .kicker { color: var(--gap-kicker); }

/* Explainer question-mark bubble picks up the blue. */
.explainer summary::before { border-color: var(--brand-blue); color: var(--brand-blue-ink); }
.explainer { border-left: 4px solid var(--brand-blue); }

/* Timeline and chain connectors, previously grey. The rail is the spine of a
   sequence — it should be as visible as the entries hanging off it. */
.timeline { border-left-color: var(--brand-blue); }
.timeline li::before { border-color: var(--brand-blue); }
.chain__rung { color: var(--brand-blue-ink); }
.chain__rung::after { background: var(--brand-blue-line); }
.chain__arrow { color: var(--brand-blue); }

/* Footer sits on the grey surface so the page closes rather than stopping.
   Moving it off white costs contrast: --ink-3 on --paper-3 measures 4.34:1,
   under AA for body text, so the footer's own text steps up one level. The
   column headings are uppercase 11px and step up too. */
.site-footer {
  background: var(--paper-3);
  border-top: 3px solid var(--brand-blue-ink);
  color: var(--ink-2);
}
.site-footer h4 { color: var(--ink); }

/* Filter chips: selected state in blue rather than black, which was heavy. */
.filter-chip[aria-pressed="true"] {
  background: var(--brand-blue-ink); border-color: var(--brand-blue-ink); color: var(--paper);
}
.filter-chip:hover { border-color: var(--brand-blue); color: var(--brand-blue-ink); }
.filter-chip[aria-pressed="true"]:hover { color: var(--paper); }

/* Tables: banded with the brand tint rather than grey. A 55% grey band on a
   near-grey paper was invisible on anything but a calibrated screen. The row
   headings step up from --ink-3, which measures 4.23:1 on the band — they are
   11px uppercase, so they do not qualify as large text and need the full 4.5. */
.meta-table tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--brand-blue-soft) 55%, transparent); }
.meta-table th { color: var(--ink-2); }

/* Evidence and answer states are marked by a left edge. Widening it from 3px to
   4px is worth more than any change of hue: it is the difference between a
   border that happens to be coloured and a stripe that is read as one. */
.question { border-left-width: 4px; }