/* The Current: site styles. Tokens verbatim from brand-kit/brand-kit.md
   (build-logo.py holds the OKLCH source of truth; the hex here are its computed sRGB
   fallbacks). Frost ground, granite ink, pasture olive lead, river slate support, the
   filament rationed to the energy dot. Alegreya + Manrope, self-hosted subsets.
   No gradients, no shadows, no texture. */

/* ── Fonts (same-origin subsets, SIL OFL; licences in /assets/fonts/) ─────── */
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/assets/fonts/alegreya-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --frost:          #f5f4f7;  /* oklch(96.8% 0.005 300) page ground */
  --frost-haze:     #eae9ed;  /* oklch(93.5% 0.006 300) reference surfaces */
  --granite:        #211d1a;  /* oklch(23.5% 0.008 70) ink, the line, dark ground */
  --granite-raised: #302d2a;  /* oklch(30.0% 0.008 70) dark cards and panels */
  --olive:          #5d5d17;  /* oklch(46.5% 0.090 110) primary */
  --olive-deep:     #48460d;  /* oklch(38.5% 0.075 108) */
  --olive-light:    #bfc573;  /* oklch(80.0% 0.105 112) */
  --olive-tint:     #ecedd8;  /* oklch(94.0% 0.028 110) */
  --slate:          #546671;  /* oklch(50.0% 0.028 232) support */
  --slate-deep:     #3f5059;  /* oklch(42.0% 0.026 232) */
  --slate-light:    #a6b9c4;  /* oklch(77.5% 0.026 232) */
  --slate-tint:     #e3ebef;  /* oklch(93.5% 0.010 232) */
  --filament:       #fadf7a;  /* oklch(90.5% 0.125 95) a light source, never text or fill */

  --font-serif: "Alegreya", Georgia, "Times New Roman", serif;
  --font-sans:  "Manrope", Arial, sans-serif;

  /* roles, light theme */
  --bg:       var(--frost);
  --surface:  var(--frost-haze);
  --ink:      var(--granite);
  --muted:    var(--slate);          /* captions, label duty: 5.45 on frost */
  --link:     var(--olive);
  --link-hover: var(--olive-deep);
  --rule:     var(--slate);          /* structural rules */
  --hair:     var(--slate-light);    /* quiet hairlines */
  --river:    var(--slate);
  --circuit:  var(--olive);
  --bezel:    var(--granite);
  --btn-bg:   var(--olive);
  --btn-ink:  var(--frost);
  --foot-bg:  var(--granite);

  /* category inks (brand-kit.md map) */
  --cat-councils:                 var(--olive);
  --cat-energy-and-the-rez:       var(--granite);
  --cat-water:                    var(--slate);
  --cat-health:                   var(--olive-deep);
  --cat-development-and-planning: var(--granite);
  --cat-university-and-economy:   var(--olive-deep);

  color-scheme: light dark;
}

/* Dark theme: the negative of the page, not a new palette. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:       var(--granite);
    --surface:  var(--granite-raised);
    --ink:      var(--frost);
    --muted:    var(--slate-light);
    --link:     var(--olive-light);
    --link-hover: var(--olive-tint);
    --rule:     var(--slate-light);
    --hair:     var(--slate-deep);
    --river:    var(--slate-light);
    --circuit:  var(--olive-light);
    --bezel:    var(--frost);
    --btn-bg:   var(--olive-light);
    --btn-ink:  var(--granite);
    --foot-bg:  var(--granite-raised);

    --cat-councils:                 var(--olive-light);
    --cat-energy-and-the-rez:       var(--frost);
    --cat-water:                    var(--slate-light);
    --cat-health:                   var(--olive-tint);
    --cat-development-and-planning: var(--frost);
    --cat-university-and-economy:   var(--olive-tint);
  }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.1875rem;               /* 19px: Alegreya runs small */
  line-height: 1.55;
  overflow-wrap: break-word;
}
@media (min-width: 760px) { body { font-size: 1.25rem; } }   /* 20px */
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--link); outline-offset: 2px;
}
table, .data, .figures, .chip { font-variant-numeric: tabular-nums lining-nums; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 760px) { .wrap { padding: 0 2rem; } }
.skip {
  position: absolute; left: -999px; top: 0; z-index: 10;
  background: var(--bg); color: var(--ink); padding: .5rem 1rem; font-family: var(--font-sans);
}
.skip:focus { left: 0; }

/* ── Header: the nameplate is the one lit lamp on the page ────────────────── */
.site-head { border-bottom: 1px solid var(--rule); }
.masthead-row { padding: 1.6rem 1rem 1.2rem; text-align: center; }
.nameplate { display: inline-block; }
.nameplate img { display: block; height: 64px; width: auto; }
@media (min-width: 760px) { .masthead-row { padding: 2.2rem 1rem 1.6rem; } .nameplate img { height: 96px; } }

.site-nav {
  border-top: 1px solid var(--hair);
  font-family: var(--font-sans); font-weight: 700; font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 1.6rem; row-gap: 0; padding: .35rem 1rem;
}
.site-nav a {
  color: var(--ink); text-decoration: none;
  padding: .7rem 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--link); }
/* phone: one scrolling row, never a wall of wrapped caps */
@media (max-width: 759px) {
  .site-nav {
    justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; column-gap: 1.3rem; padding: 0 1rem;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; flex: none; }
}
body[data-page="home"] .site-nav a[data-nav="home"],
body[data-page="councils"] .site-nav a[data-nav="councils"],
body[data-page="energy-and-the-rez"] .site-nav a[data-nav="energy-and-the-rez"],
body[data-page="water"] .site-nav a[data-nav="water"],
body[data-page="health"] .site-nav a[data-nav="health"],
body[data-page="development-and-planning"] .site-nav a[data-nav="development-and-planning"],
body[data-page="university-and-economy"] .site-nav a[data-nav="university-and-economy"] {
  color: var(--link); border-bottom-color: var(--link);
}

/* ── The device divider: river into circuit, an unlit ring at the end ─────── */
.device { display: flex; align-items: flex-start; margin: 2.4rem 0 2rem; height: 40px; }
.device svg { display: block; height: 40px; }
.device-river { flex: 1 1 auto; width: 100%; min-width: 0; }
.device-circuit { flex: none; width: 92px; }
.device path { fill: none; stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; }
.device-river path, .device-circuit .r { stroke: var(--river); }
.device-circuit .c { stroke: var(--circuit); }
.device-circuit circle { fill: none; stroke: var(--bezel); stroke-width: 1.5; }

/* ── Kickers + category inks ──────────────────────────────────────────────── */
.kicker {
  font-family: var(--font-sans); font-weight: 700; font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .5rem;
  color: var(--cat, var(--link));
}
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
[data-cat="councils"]                 { --cat: var(--cat-councils); }
[data-cat="energy-and-the-rez"]       { --cat: var(--cat-energy-and-the-rez); }
[data-cat="water"]                    { --cat: var(--cat-water); }
[data-cat="health"]                   { --cat: var(--cat-health); }
[data-cat="development-and-planning"] { --cat: var(--cat-development-and-planning); }
[data-cat="university-and-economy"]   { --cat: var(--cat-university-and-economy); }
/* energy: the only furniture use of the filament, a 6px dot in a granite ring */
[data-cat="energy-and-the-rez"] .kicker::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--filament); border: 2px solid var(--granite);
  margin-right: .5rem; vertical-align: -1px;
}
@media (prefers-color-scheme: dark) {
  [data-cat="energy-and-the-rez"] .kicker::before {
    border-color: var(--granite); outline: 1.5px solid var(--frost);
  }
}
/* university + economy: olive-deep on an olive-tint chip (light); plain olive-tint (dark) */
[data-cat="university-and-economy"] .kicker {
  display: inline-block; background: var(--olive-tint); color: var(--olive-deep);
  padding: .15rem .45rem; border-radius: 2px;
}
@media (prefers-color-scheme: dark) {
  [data-cat="university-and-economy"] .kicker { background: none; color: var(--olive-tint); padding: 0; }
}

/* ── Front page ───────────────────────────────────────────────────────────── */
.front-intro { padding: 2rem 0 0; }
.front-intro h1 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 2.2rem; line-height: 1.08; letter-spacing: -0.01em;
  margin: 0 0 1.2rem; text-wrap: balance;
}
.front-copy p { margin: 0 0 1rem; max-width: 36rem; }
.front-copy .lede { font-size: 1.12em; line-height: 1.45; }
.front-head .status {
  font-family: var(--font-sans); font-weight: 500; font-size: .85rem; line-height: 1.5;
  color: var(--muted); border-left: 2px solid var(--circuit); padding-left: .8rem; margin: 0 0 1.4rem; max-width: 30rem;
}
@media (min-width: 900px) { .front-head .status { margin: 2rem 0 0; } }
@media (min-width: 900px) {
  .front-intro {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 3rem; padding-top: 3rem; align-items: start;
  }
  .front-intro h1 { font-size: 3.4375rem; margin: 0; }   /* 55px display */
  .front-copy { border-left: 1px solid var(--hair); padding-left: 2rem; padding-top: .4rem; }
}

.row-head {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.75rem; line-height: 1.15;
  margin: 0 0 1.2rem;
}

.section-index { padding: 0 0 1rem; }
.sx-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.2rem; }
@media (min-width: 640px) { .sx-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .sx-grid { grid-template-columns: 1fr 1fr 1fr; } }
.sx { border-top: 2px solid var(--cat, var(--rule)); padding: .9rem 0 1.6rem; }
.sx h3 {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; line-height: 1.18;
  margin: 0 0 .4rem;
}
.sx h3 a { color: var(--ink); text-decoration: none; }
.sx h3 a:hover { color: var(--link); text-decoration: underline; }
.sx p:last-child { margin: 0; font-size: .92em; line-height: 1.45; }

.council-roll { border-top: 1px solid var(--rule); padding: 1.6rem 0 1rem; margin-top: 1rem; }
.roll {
  list-style: none; margin: 0; padding: 0; counter-reset: roll;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem;
}
@media (min-width: 760px) { .roll { grid-template-columns: repeat(3, 1fr); } }
.roll li {
  counter-increment: roll; display: flex; align-items: baseline; gap: .6rem;
  border-bottom: 1px solid var(--hair); padding: .55rem 0;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; line-height: 1.25;
}
.roll li::before {
  content: counter(roll); font-family: var(--font-sans); font-weight: 700; font-size: .72rem;
  color: var(--muted); font-variant-numeric: tabular-nums lining-nums; min-width: 1ch;
}

.front-tip {
  margin-top: 2.4rem; padding: 1.6rem 0 0; border-top: 1px solid var(--rule);
  max-width: 40rem;
}
.front-tip h2 { font-family: var(--font-serif); font-weight: 700; font-size: 1.75rem; line-height: 1.15; margin: 0 0 .6rem; }
.front-tip p { margin: 0 0 1rem; }
.go {
  display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: .9rem;
  letter-spacing: .04em; text-decoration: none;
  background: var(--btn-bg); color: var(--btn-ink); border-radius: 2px; padding: .75rem 1.3rem;
}
.go:hover { background: var(--link-hover); color: var(--btn-ink); }
@media (prefers-color-scheme: dark) { .go:hover { color: var(--granite); } }

/* ── Section fronts ───────────────────────────────────────────────────────── */
.crumbs { font-family: var(--font-sans); font-size: .8rem; color: var(--muted); padding: 1.2rem 0 0; margin: 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--link); }
.section-head { padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--rule); }
.section-head h1 {
  font-family: var(--font-serif); font-weight: 700; font-size: 2.5rem; line-height: 1.05;
  letter-spacing: -0.01em; margin: .1rem 0 .8rem;
}
@media (min-width: 760px) { .section-head h1 { font-size: 3.4375rem; } }
.section-head .explainer { margin: 0; max-width: 40rem; }
.section-head .explainer strong { font-weight: 700; }
.section-list { display: grid; gap: 1.6rem; padding: 1.8rem 0 0; max-width: 46rem; }
.empty-note {
  font-family: var(--font-sans); font-weight: 500; font-size: .9rem; line-height: 1.55;
  color: var(--muted); margin: 0;
  border-left: 2px solid var(--cat, var(--rule)); padding: .2rem 0 .2rem .9rem;
}
.section-tip { font-family: var(--font-sans); font-size: .9rem; margin: 0; color: var(--muted); }

/* cards (styled ahead of the first story; unused in the shell) */
.card { border-top: 2px solid var(--cat, var(--rule)); padding-top: .8rem; }
.card h2, .card h3 { font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; line-height: 1.2; margin: 0 0 .45rem; }
.card h2 a, .card h3 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { color: var(--link); text-decoration: underline; }
.card .standfirst { margin: 0 0 .5rem; font-size: .95em; }
.dateline { font-family: var(--font-sans); font-size: .8rem; color: var(--muted); margin: 0; }

/* ── Footer (no lockup: the lamp is the header's, once per surface) ─────── */
.site-foot {
  margin-top: 4rem; background: var(--foot-bg); color: var(--frost);
  font-family: var(--font-sans); font-size: .9rem; line-height: 1.6;
}
.site-foot .wrap { padding-top: 2.2rem; padding-bottom: 2.6rem; }
.foot-name { margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.foot-name a {
  color: var(--frost); text-decoration: none;
  font-family: var(--font-serif); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.005em;
}
.foot-name span {
  font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-light);
}
.foot-nav {
  display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0 0 1.2rem;
  padding: .3rem 0; border-top: 1px solid var(--slate-deep); border-bottom: 1px solid var(--slate-deep);
  font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
}
.foot-nav a { color: var(--frost); text-decoration: none; padding: .6rem 0; }
.foot-nav a:hover { color: var(--olive-light); text-decoration: underline; }
.site-foot p { max-width: 44rem; margin: .5rem 0; color: var(--frost); }
.site-foot p a { color: var(--olive-light); }
.site-foot .foot-name a { color: var(--frost); }

/* ── Ad slot: empty by default, labelled when filled ─────────────────────── */
.ad-slot { max-width: 46rem; margin: 2.4rem 0 0; }
.ad-slot:not([hidden])::before {
  content: "Advertisement"; display: block; margin-bottom: .4rem;
  font-family: var(--font-sans); font-weight: 700; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

/* ── Prose pages ──────────────────────────────────────────────────────────── */
.prose { max-width: 40rem; padding: 1.6rem 0 0; }
.prose h1 {
  font-family: var(--font-serif); font-weight: 700; font-size: 2.5rem; line-height: 1.08;
  letter-spacing: -0.01em; margin: .4rem 0 1rem;
}
@media (min-width: 760px) { .prose h1 { font-size: 2.75rem; } }
.prose h2 { font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; line-height: 1.2; margin: 2rem 0 .5rem; }
.prose p { margin: 0 0 1.05rem; }
.prose ul { margin: 0 0 1.05rem; padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }

.disclosure-banner {
  background: var(--surface); border-top: 2px solid var(--rule);
  padding: 1rem 1.2rem; margin: 1rem 0 1.2rem; font-size: .95em;
}
.disclosure-banner p { margin: 0; }
.disclosure-label {
  display: block; margin-bottom: .4rem; font-family: var(--font-sans); font-weight: 700;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* ── Story pages ───────────────────────────────────────────────────────────
   A long read: one 40rem reading column, the figures panel as the one strong
   element (a ruled "the numbers" panel, never tiles), sources and method set
   quieter than the body. No device here: the header lamp is the page's one light. */
article { padding: 0 0 1rem; }
@media (min-width: 1100px) {
  article {
    display: grid; grid-template-columns: minmax(0, 40rem) 18rem;
    column-gap: 4.5rem; align-items: start;
  }
  article > .article-head { grid-column: 1 / -1; }
  article > .figures { grid-column: 2; grid-row: 2; position: sticky; top: 1.5rem; margin-top: 2.2rem; }
  article > .article-body { grid-column: 1; grid-row: 2; }
  article > .correction-line { grid-column: 1; grid-row: 3; }
}

.article-head { padding: 1.2rem 0 1.6rem; border-bottom: 1px solid var(--rule); max-width: 52rem; }
@media (min-width: 1100px) { .article-head { max-width: none; } .article-head > * { max-width: 52rem; } }
.article-head h1 {
  font-family: var(--font-serif); font-weight: 700; font-size: 2.2rem; line-height: 1.08;
  letter-spacing: -0.01em; margin: .2rem 0 1rem; text-wrap: balance;
}
@media (min-width: 760px) { .article-head h1 { font-size: 2.75rem; } }       /* 44px h1 */
@media (min-width: 1100px) { .article-head h1 { font-size: 3.4375rem; } }    /* 55px display */
.article-head .standfirst {
  font-size: 1.15em; line-height: 1.45; margin: 0 0 1.2rem; max-width: 42rem;
}
.meta {
  font-family: var(--font-sans); font-weight: 500; font-size: .8rem; line-height: 1.5;
  color: var(--muted); margin: 0;
  display: flex; flex-wrap: wrap; gap: .25rem 1.2rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.meta > * { white-space: normal; }
.meta .byline { color: var(--ink); font-weight: 700; }
.meta a { color: var(--muted); }
.meta a:hover { color: var(--link); }

.article-body { max-width: 40rem; padding: 1.8rem 0 0; }
.article-body > p:first-child { font-size: 1.05em; }
.article-body p { margin: 0 0 1.1rem; }
.article-body h2 {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.55rem; line-height: 1.18;
  margin: 2.2rem 0 .6rem;
}
.article-body h3 {
  font-family: var(--font-sans); font-weight: 700; font-size: .95rem; line-height: 1.3;
  margin: 1.6rem 0 .4rem;
}
.article-body ul, .article-body ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.article-body li { margin-bottom: .45rem; }
.article-body em, .article-body cite { font-style: italic; }
.article-body strong { font-weight: 700; }
.article-body blockquote {
  margin: 1.4rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 2px solid var(--circuit); font-size: 1.05em;
}
.article-body blockquote p { margin: 0 0 .5rem; }
.article-body blockquote footer { font-family: var(--font-sans); font-size: .8rem; color: var(--muted); }
.article-body figure { margin: 1.6rem 0; }
.article-body figure img, .article-body figure svg { display: block; width: 100%; height: auto; }
.article-body figcaption {
  font-family: var(--font-sans); font-size: .8rem; line-height: 1.5; color: var(--muted);
  margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--hair);
}

/* tables: padded cells wherever they sit in a story, ruled like a printed table */
/* base rule for any table outside a story (the advertise reach block, 7 Oct 2026): columns must not touch */
main table th, main table td { text-align: left; padding: .45rem .7rem .45rem 0; vertical-align: top; }
.table-scroll { overflow-x: auto; margin: 1.4rem 0; -webkit-overflow-scrolling: touch; }
.article-body table, .data-table {
  width: 100%; border-collapse: collapse; margin: 1.4rem 0;
  font-family: var(--font-sans); font-size: .85rem; line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
  border-top: 2px solid var(--ink);
}
.table-scroll > table { margin: 0; }
.article-body caption, .data-table caption {
  caption-side: top; text-align: left; font-family: var(--font-sans); font-weight: 700;
  font-size: .8rem; color: var(--ink); padding: 0 0 .5rem;
}
.article-body th, .article-body td, .data-table th, .data-table td {
  text-align: left; vertical-align: top;
  padding: .5rem .9rem .5rem 0; border-bottom: 1px solid var(--hair);
}
.article-body th:last-child, .article-body td:last-child,
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.article-body thead th, .data-table thead th {
  font-weight: 700; font-size: .75rem; color: var(--slate-deep); border-bottom: 1px solid var(--rule);
}
.article-body .num, .data-table .num { text-align: right; }
@media (prefers-color-scheme: dark) {
  .article-body thead th, .data-table thead th { color: var(--slate-light); }
}

/* the numbers: a ruled panel, figure then label, read down like a newspaper box */
.figures {
  margin: 2rem 0 0; padding: 0; max-width: 40rem;
  border-top: 4px solid var(--ink); border-bottom: 2px solid var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.figures > h2 {
  font-family: var(--font-sans); font-weight: 700; font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cat, var(--ink)); margin: 0; padding: .75rem 0 .65rem;
  border-bottom: 1px solid var(--rule);
}
.figures dl { margin: 0; }
.figures .fig {
  display: grid; grid-template-columns: 7.75rem 1fr; column-gap: 1rem;
  align-items: baseline; padding: .9rem 0; border-bottom: 1px solid var(--hair);
}
.figures .fig:last-child { border-bottom: 0; }
.figures dd {
  margin: 0; grid-column: 1; grid-row: 1;
  font-family: var(--font-serif); font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -0.01em;
  color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums;
}
.figures dd .unit { font-weight: 700; font-size: .55em; margin-left: .12em; }
.figures dt {
  grid-column: 2; grid-row: 1;
  font-family: var(--font-sans); font-weight: 500; font-size: .85rem; line-height: 1.4; color: var(--ink);
}
@media (min-width: 1100px) {
  /* in the rail the figure sits above its label: a column, not a row */
  .figures .fig { grid-template-columns: 1fr; row-gap: .35rem; padding: 1rem 0 1.05rem; }
  .figures dd { grid-row: 1; font-size: 2.75rem; }
  .figures dt { grid-column: 1; grid-row: 2; }
}
.figures .figures-note {
  font-family: var(--font-sans); font-size: .75rem; line-height: 1.45; color: var(--muted);
  margin: 0; padding: .6rem 0 .7rem; border-top: 1px solid var(--hair);
}

/* sources and method: reference furniture, quieter than the body */
.sources { margin: 2.6rem 0 0; padding: 1rem 0 0; border-top: 2px solid var(--ink); max-width: 40rem; }
.sources > h2 {
  font-family: var(--font-sans); font-weight: 700; font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 .8rem;
}
.sources ol { margin: 0; padding-left: 1.4rem; font-size: .9em; line-height: 1.5; }
.sources li { margin-bottom: .6rem; padding-left: .2rem; }
.sources li::marker { font-family: var(--font-sans); font-weight: 700; font-size: .8em; color: var(--muted); }
.methodology {
  background: var(--surface); padding: 1rem 1.2rem; margin: 1.6rem 0 0; max-width: 40rem;
  font-size: .9em; line-height: 1.5;
}
.methodology h2, .methodology h3 {
  font-family: var(--font-sans); font-weight: 700; font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 .5rem;
}
.methodology p { margin: 0 0 .6rem; }
.methodology p:last-child { margin: 0; }
.methodology-block, .note-box {
  background: var(--surface); padding: 1rem 1.2rem; margin: 1.6rem 0 0; max-width: 40rem; font-size: .9em;
}

.correction-line {
  font-family: var(--font-sans); font-size: .85rem; line-height: 1.5; color: var(--muted);
  max-width: 40rem; margin: 2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--hair);
}

/* ── Forms (tips page) ────────────────────────────────────────────────────── */
.tip-form { max-width: 34rem; font-family: var(--font-sans); font-size: 1rem; }
.tip-form label { display: block; font-weight: 700; font-size: .88rem; margin: 1.1rem 0 .35rem; }
.tip-form label .opt { font-weight: 500; color: var(--muted); }
.tip-form input[type="text"], .tip-form input[type="email"], .tip-form input[type="tel"],
.tip-form textarea, .tip-form input[type="file"] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--muted); border-radius: 2px; padding: .6rem .7rem;
}
.tip-form textarea { min-height: 7.5rem; resize: vertical; }
.tip-form button {
  margin-top: 1.3rem; font-family: var(--font-sans); font-weight: 700; font-size: .95rem;
  letter-spacing: .03em; cursor: pointer; min-height: 44px;
  background: var(--btn-bg); color: var(--btn-ink); border: 0; border-radius: 2px; padding: .7rem 1.5rem;
}
.tip-form button:hover { background: var(--link-hover); }
.form-note { font-family: var(--font-sans); font-size: .9rem; color: var(--muted); }
[data-tip-success], [data-tip-error] { font-family: var(--font-sans); font-weight: 700; margin-top: 1rem; }
[data-tip-success] { color: var(--link); }
[data-tip-error] { color: var(--ink); border-left: 2px solid var(--ink); padding-left: .7rem; }

/* Front page: the Latest list, newest first, generated from the story files. */
.front-latest { margin: 2.4rem 0 1rem; }
.front-latest .section-list { padding-top: 1rem; max-width: none; }
@media (min-width: 900px) { .front-latest .section-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; } }

/* Sponsored / partner content disclosure. Contract: kernel/sponsored-content-convention.md.
   Empty by default: only a story with a real, disclosed commercial arrangement carries this,
   at the top of the body. The fleet mechanism (currentColor tints, legible in both themes),
   with this masthead's olive as the rule so the label reads as part of the page, not an ad. */
.disclosure-banner {
  border: 1px solid color-mix(in oklab, currentColor 28%, transparent);
  border-left: 4px solid var(--olive, currentColor);
  background: color-mix(in oklab, currentColor 6%, transparent);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.6rem;
  font-size: 0.85rem;
  line-height: 1.55;
}
.disclosure-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.82;
  margin-bottom: 0.4rem;
}
.disclosure-banner p { margin: 0.3rem 0; }
.disclosure-banner p:first-of-type { margin-top: 0; }
.disclosure-banner p:last-of-type { margin-bottom: 0; }