/* The Window Standard — site styles.
   Brand kit tokens verbatim (brand-kit/brand-kit.md). Sans-led: the standards-cover
   grotesque (Archivo) carries the masthead, headlines, kickers, tables and UI; the
   body serif (Source Serif 4) keeps long explainers warm. Indigo is the brand ink,
   madder is the rationed warning ink, gold is graphic-only (its text cut is
   --gold-deep). Category carries colour; nothing is decorated. No texture, no
   gradients: a civic record shows its sources, not its wallpaper. */

/* Self-hosted webfonts — no third-party request on any reader pageview
   (.jez/scripts/build-webfonts.sh; variable TTFs pinned + subset, SIL OFL). */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-italic.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 200 900; font-style: italic; font-display: swap;
}

:root {
  /* palette — OKLCH is the source of truth, hex is the computed sRGB fallback */
  --ink:   oklch(24.5% 0.014 80);  /* #242019  warm near-black; text and rules */
  --paper: oklch(97.7% 0.009 90);  /* #faf7f1  calico canvas white; page ground */
  --shade: oklch(24% 0.022 275);   /* #1c1f2a  charcoal-indigo dark-theme ground */
  --slat:  oklch(92.5% 0.006 250); /* #e3e7ea  cool light slat grey; record surfaces */

  --indigo:       oklch(40% 0.088 265);  /* #304577 */
  --indigo-deep:  oklch(33% 0.075 266);  /* #23335c */
  --indigo-light: oklch(80% 0.058 262);  /* #aabfe4 */
  --indigo-tint:  oklch(94% 0.016 262);  /* #e5ebf6 */
  --madder:       oklch(45% 0.115 18);   /* #8a353c */
  --madder-deep:  oklch(38% 0.098 18);   /* #6d282e */
  --madder-light: oklch(79% 0.072 20);   /* #e5a9a7 */
  --madder-tint:  oklch(94.5% 0.024 20); /* #fde7e6 */
  --gold:         oklch(72% 0.145 85);   /* #ce9c0f — GRAPHIC colour only, never text */
  --gold-deep:    oklch(50.5% 0.102 80); /* #835d07 — the gold TEXT cut */
  --gold-light:   oklch(85% 0.130 88);   /* #f1c961 */
  --gold-tint:    oklch(95% 0.045 92);   /* #f9eecd */

  /* type */
  --font-masthead: "Archivo", "Helvetica Neue", Arial, sans-serif; /* nameplate, headlines, UI */
  --font-body:     "Source Serif 4", Georgia, serif;               /* body text */

  /* category scope — rules is the default (indigo, the brand ink).
     data-cat on a card, an article header, a section or the <body> retunes it.
     --cat = marks/rules/bars; --cat-text = kicker/text cut (differs for gold);
     --cat-light = the same ink on dark surfaces; --cat-tint = flat wash. */
  --cat:       var(--indigo);
  --cat-text:  var(--indigo);
  --cat-deep:  var(--indigo-deep);
  --cat-light: var(--indigo-light);
  --cat-tint:  var(--indigo-tint);

  /* derived furniture (ink at reduced alpha for hairlines; never new hues) */
  --hairline:      color-mix(in srgb, var(--ink) 26%, transparent);
  --hairline-soft: color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-soft:      color-mix(in srgb, var(--ink) 72%, var(--paper));
  --ground: var(--paper);
  --field:  #fff;                 /* form inputs */
  --link:       var(--indigo);
  --link-hover: var(--indigo-deep);
}

/* the room with the blinds drawn — same palette, accents step to their -light cuts.
   Tints are re-mixed into shade (the flat light washes are a light-theme device). */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: var(--shade);
    --ink: oklch(97.7% 0.009 90);                 /* paper text on shade */
    --slat: color-mix(in srgb, #e3e7ea 14%, #1c1f2a);
    --indigo-tint: color-mix(in srgb, #aabfe4 16%, #1c1f2a);
    --madder-tint: color-mix(in srgb, #e5a9a7 14%, #1c1f2a);
    --gold-tint:   color-mix(in srgb, #f1c961 14%, #1c1f2a);
    --cat:       var(--cat-light);
    --cat-text:  var(--cat-light);
    --hairline:      color-mix(in srgb, #faf7f1 30%, transparent);
    --hairline-soft: color-mix(in srgb, #faf7f1 14%, transparent);
    --ink-soft:      color-mix(in srgb, #faf7f1 74%, #1c1f2a);
    --field: color-mix(in srgb, #faf7f1 8%, #1c1f2a);
    --link:       var(--indigo-light);
    --link-hover: color-mix(in srgb, var(--indigo-light) 80%, #faf7f1);
  }
  .light-only { display: none !important; }
}
@media (prefers-color-scheme: light) { .dark-only { display: none !important; } }

/* category scopes */
[data-cat="rules"], [data-cat="bushfire"] {
  --cat: var(--indigo); --cat-text: var(--indigo); --cat-deep: var(--indigo-deep);
  --cat-light: var(--indigo-light); --cat-tint: var(--indigo-tint);
}
[data-cat="recalls"] {
  --cat: var(--madder); --cat-text: var(--madder); --cat-deep: var(--madder-deep);
  --cat-light: var(--madder-light); --cat-tint: var(--madder-tint);
}
[data-cat="ratings"] {
  --cat: var(--gold); --cat-text: var(--gold-deep); --cat-deep: var(--gold-deep);
  --cat-light: var(--gold-light); --cat-tint: var(--gold-tint);
}
[data-cat="data"], [data-cat="industry"] {
  --cat: var(--ink); --cat-text: var(--ink); --cat-deep: var(--indigo-deep);
  --cat-light: var(--indigo-light); --cat-tint: var(--indigo-tint);
}
@media (prefers-color-scheme: dark) {
  [data-cat="rules"], [data-cat="bushfire"] { --cat: var(--indigo-light); --cat-text: var(--indigo-light); }
  [data-cat="recalls"] { --cat: var(--madder-light); --cat-text: var(--madder-light); }
  [data-cat="ratings"] { --cat: var(--gold-light); --cat-text: var(--gold-light); }
  [data-cat="data"], [data-cat="industry"] { --cat: var(--ink); --cat-text: var(--ink); }
}

/* tabular numerals are mandatory anywhere data appears — this masthead publishes
   millimetres, commencement dates and dollar thresholds. */
table, .data, .figures, .chip, .scope-chip, .stats .num { font-variant-numeric: tabular-nums lining-nums; }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
}
@media (min-width: 44rem) { body { font-size: 1.125rem; } } /* 18px */

img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--ground); padding: .5rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

.wrap { max-width: 71rem; margin: 0 auto; padding: 0 1.25rem; }

/* ── Header: the standards-cover head — heavy indigo rule over an ink hairline ── */
.site-head { border-bottom: 1px solid var(--ink); position: relative; }
.site-head::before { content: ""; display: block; height: 6px; background: var(--indigo); }
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 2rem;
  padding-top: 1.3rem; padding-bottom: 1.1rem;
}
.nameplate { display: block; line-height: 0; }
.nameplate img { height: 48px; width: auto; }
@media (max-width: 44rem) { .nameplate img { height: 40px; } }
.site-nav {
  display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; margin-left: auto;
  font-family: var(--font-masthead); font-size: .78rem; font-weight: 700;
  letter-spacing: .075em; text-transform: uppercase;
}
.site-nav a { color: var(--ink); text-decoration: none; padding: .2rem 0; }
.site-nav a:hover { color: var(--link-hover); }
body[data-page="home"]     .site-nav a[data-nav="home"],
body[data-page="rules"]    .site-nav a[data-nav="rules"],
body[data-page="recalls"]  .site-nav a[data-nav="recalls"],
body[data-page="bushfire"] .site-nav a[data-nav="bushfire"],
body[data-page="ratings"]  .site-nav a[data-nav="ratings"],
body[data-page="data"]     .site-nav a[data-nav="data"] {
  color: var(--link); border-bottom: 2px solid var(--indigo);
}
@media (prefers-color-scheme: dark) {
  body[data-page] .site-nav a { border-color: var(--indigo-light); }
}

/* ── Kickers, chips, datelines ─────────────────────────────────────────── */
.kicker {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-masthead); font-weight: 700; font-size: .75rem;
  letter-spacing: .075em; text-transform: uppercase; color: var(--cat-text);
}
.kicker::before { content: ""; width: 34px; height: 3px; background: var(--cat); flex: none; }

.chip {
  display: inline-block; font-family: var(--font-masthead); font-weight: 600;
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--cat); border-radius: 2px; padding: .12rem .5rem;
  color: var(--ink); background: transparent; text-decoration: none;
}
a.chip:hover { border-color: var(--cat-deep); color: var(--link-hover); }

/* state-scope banner: WHERE the rule binds, before anything else.
   National scope = filled indigo chip. */
.scope {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: .2rem 0 .9rem;
  font-family: var(--font-masthead); font-size: .8rem; color: var(--ink-soft);
}
.scope-chip {
  display: inline-block; font-family: var(--font-masthead); font-weight: 600;
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  border: 1px solid var(--indigo); border-radius: 2px; padding: .14rem .55rem;
  color: var(--indigo-deep); background: var(--paper);
}
.scope-chip.national { background: var(--indigo); color: var(--paper); border-color: var(--indigo); }
@media (prefers-color-scheme: dark) {
  .scope-chip { background: transparent; color: var(--indigo-light); border-color: var(--indigo-light); }
  .scope-chip.national { background: var(--indigo-light); color: var(--shade); border-color: var(--indigo-light); }
}

.dateline {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  font-family: var(--font-masthead); font-size: .8rem; color: var(--ink-soft);
}
/* "last checked against the regulation" — trust furniture, not an afterthought */
.checked {
  font-family: var(--font-masthead); font-size: .8rem; color: var(--indigo-deep);
}
@media (prefers-color-scheme: dark) { .checked { color: var(--indigo-light); } }

/* ── Article layout ────────────────────────────────────────────────────── */
.article-head { padding: 2.1rem 0 0; }
.article-head h1 {
  font-family: var(--font-masthead); font-weight: 800;
  font-size: clamp(1.8rem, 4.4vw, 2.6rem); line-height: 1.12;
  letter-spacing: -.012em; margin: .7rem 0 .8rem; max-width: 48rem;
}
.standfirst {
  font-family: var(--font-masthead); font-weight: 500;
  font-size: clamp(1.05rem, 2.3vw, 1.22rem); line-height: 1.5; max-width: 45rem;
  color: var(--ink); margin-bottom: .9rem;
}
.lead-graphic { margin: 1.2rem 0 .3rem; }
.lead-graphic img { display: block; width: 100%; height: auto; border: 0; }

.article-body { max-width: 44rem; padding: 1.2rem 0 2rem; }
.article-body > * + * { margin-top: 1.05rem; }
.article-body h2 {
  font-family: var(--font-masthead); font-weight: 700;
  font-size: 1.4rem; line-height: 1.22; margin-top: 2.1rem;
}
.article-body h3 { font-family: var(--font-masthead); font-weight: 700; font-size: 1.1rem; margin-top: 1.6rem; }
.article-body ul, .article-body ol { padding-left: 1.35rem; }
.article-body li + li { margin-top: .35rem; }

/* ── Recall callout: the ONLY madder-flooded surface; scarcity keeps it loud ── */
.recall-callout {
  background: var(--madder-tint); border-left: 3px solid var(--madder);
  padding: 1rem 1.1rem 1.05rem; margin: 1.6rem 0;
}
.recall-callout h2, .recall-callout .callout-title {
  font-family: var(--font-masthead); font-weight: 700; font-size: 1.05rem;
  color: var(--madder-deep); margin: 0 0 .5rem;
}
@media (prefers-color-scheme: dark) {
  .recall-callout h2, .recall-callout .callout-title { color: var(--madder-light); }
}
.recall-callout table { width: 100%; border-collapse: collapse; }
.recall-callout th, .recall-callout td {
  font-family: var(--font-masthead); font-size: .88rem; text-align: left; vertical-align: top;
  padding: .3rem .7rem .3rem 0; border-bottom: 1px solid var(--hairline-soft);
}
.recall-callout th { font-weight: 600; white-space: nowrap; width: 9.5rem; }
.recall-callout tr:last-child th, .recall-callout tr:last-child td { border-bottom: 0; }
@media (max-width: 30rem) { .recall-callout th { white-space: normal; width: 7rem; } }

/* A BARE <table> in an article body had no padding at all: every th/td rule here is scoped
   to .worked or .recall-callout, so columns in an unwrapped table touched. 14 existing stories
   carry one, so this was a latent defect across the masthead rather than one page's problem,
   and preflight's table-padding check asks for the mechanism rather than a per-page fix.
   Added 2026-10-01. .worked and .recall-callout override this with their own padding. */
main table { border-collapse: collapse; }
main th, main td { padding: .42rem .7rem .42rem 0; text-align: left; vertical-align: top; }
main th:last-child, main td:last-child { padding-right: 0; }
/* .table-scroll is the one class scripts/reach-figure.py emits, and every other masthead styles
   it. This one never had a table that needed it until the reach block arrived at launch on
   2026-10-02, when the classes check failed it. Behaviour only: a wide table scrolls inside
   its own box instead of pushing the page sideways on a phone. */
.table-scroll { overflow-x: auto; }

/* ── Tables: the worked record ─────────────────────────────────────────── */
.worked {
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  padding: 1rem 0 .8rem; margin: 1.6rem 0;
  overflow-x: auto; /* wide tables scroll inside the panel, never the page */
}
.worked > .worked-title {
  font-family: var(--font-masthead); font-weight: 700; font-size: .78rem;
  letter-spacing: .075em; text-transform: uppercase; margin-bottom: .6rem;
}
.worked table { width: 100%; border-collapse: collapse; }
.worked th, .worked td {
  font-family: var(--font-masthead); font-size: .87rem; line-height: 1.45;
  padding: .42rem .6rem .42rem 0; border-bottom: 1px solid var(--hairline-soft);
  text-align: left; vertical-align: top;
}
.worked thead th {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-bottom: 1px solid var(--hairline);
}
.worked td.fig, .worked th.fig { text-align: right; }
.worked td.fig:last-child, .worked th.fig:last-child { padding-right: 0; }
.worked tr.total td { border-top: 3px double var(--ink); border-bottom: 0; font-weight: 600; }
@media (max-width: 44rem) { .worked table { min-width: 30rem; } }
.table-note, .note {
  font-family: var(--font-masthead); font-size: .78rem; color: var(--ink-soft);
  line-height: 1.5; margin-top: .7rem;
}
/* status marks inside comparison tables */
td .yes { color: var(--indigo-deep); font-weight: 700; }
td .no { color: var(--madder-deep); font-weight: 700; }
td .open { color: var(--ink-soft); font-weight: 700; }
@media (prefers-color-scheme: dark) {
  td .yes { color: var(--indigo-light); } td .no { color: var(--madder-light); }
}

/* ── Methodology note: slat panel, hairline ink rules — every data story ── */
.methodology-note {
  background: var(--slat); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: .85rem 1rem; margin-top: 1rem;
  font-family: var(--font-masthead); font-size: .84rem; line-height: 1.55;
}
.methodology-note strong { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }

/* ── Charts: authored HTML/SVG, real text, category accent ─────────────── */
figure.chart { margin: 1.7rem 0; }
figure.chart figcaption {
  font-family: var(--font-masthead); font-weight: 600; font-size: .95rem; margin-bottom: .8rem;
}
figure.chart .note { margin-top: .55rem; font-weight: 400; }

/* signed bars around a zero line */
.sbars { display: grid; grid-template-columns: max-content 1fr max-content; gap: .4rem .6rem; align-items: center; }
.sbars .lbl { font-family: var(--font-masthead); font-size: .8rem; }
.sbars .val { font-family: var(--font-masthead); font-size: .8rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.sbars .track { position: relative; height: 14px; background: var(--cat-tint); }
.sbars .track::before { /* the zero line */
  content: ""; position: absolute; left: var(--zero, 20%); top: -4px; bottom: -4px;
  width: 1px; background: var(--hairline);
}
.sbars .bar { position: absolute; top: 0; height: 100%; background: var(--indigo); }
.sbars .bar.neg { right: calc(100% - var(--zero, 20%)); }
.sbars .bar.pos { left: var(--zero, 20%); }
@media (prefers-color-scheme: dark) { .sbars .bar { background: var(--indigo-light); } }

/* stat tiles (numbers that must NOT share an axis) */
.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); margin: 1.6rem 0;
}
@media (max-width: 30rem) { .stats { grid-template-columns: 1fr; } }
.stats .stat { background: var(--ground); padding: .9rem .95rem 1rem; }
.stats .num { font-family: var(--font-masthead); font-weight: 700; font-size: 1.85rem; line-height: 1.1; letter-spacing: -.01em; }
.stats .num em { font-style: normal; color: var(--cat-text); }
.stats .what { font-family: var(--font-masthead); font-size: .78rem; line-height: 1.45; margin-top: .35rem; }
.stats .who { font-family: var(--font-masthead); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: .45rem; }

/* the measured diagram (authored inline SVG) */
figure.diagram { margin: 1.7rem 0; }
figure.diagram svg { display: block; width: 100%; height: auto; }
figure.diagram figcaption {
  font-family: var(--font-masthead); font-size: .78rem; color: var(--ink-soft);
  line-height: 1.5; margin-top: .6rem;
}

/* ── Sources + corrections ─────────────────────────────────────────────── */
.sources {
  max-width: 44rem; border-top: 2px solid var(--ink); margin: 1rem 0 1.6rem; padding-top: .9rem;
}
.sources h2 {
  font-family: var(--font-masthead); font-weight: 700; font-size: .78rem;
  letter-spacing: .075em; text-transform: uppercase; margin-bottom: .55rem;
}
.sources ol { list-style: decimal; padding-left: 1.3rem; font-family: var(--font-masthead); font-size: .84rem; line-height: 1.55; }
.sources li + li { margin-top: .3rem; }
/* A methodology block placed OUTSIDE <section class="sources"> got no styling at all:
   it rendered at full body size and full container width, wider than the article
   measure. Measured on a live page 2026-08-06: 18px/1088px against the intended
   13.44px/704px. This makes the class work wherever it is placed; the more specific
   .sources .methodology rule still wins inside a sources block, so nothing there moves. */
.methodology { margin-top: .9rem; font-family: var(--font-masthead); font-size: .84rem; line-height: 1.55; max-width: var(--measure, 44rem); }
.sources .methodology { margin-top: .9rem; font-family: var(--font-masthead); font-size: .84rem; line-height: 1.55; }
.sources .methodology strong { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
.correction-line { font-family: var(--font-masthead); font-size: .8rem; color: var(--ink-soft); margin: 0 0 2.2rem; max-width: 44rem; }

/* ── Front page ────────────────────────────────────────────────────────── */
.lede { display: grid; gap: 1.6rem; padding: 2rem 0 1.8rem; border-bottom: 1px solid var(--hairline); }
@media (min-width: 52rem) { .lede { grid-template-columns: 7fr 5fr; align-items: start; } }
.lede h2 {
  font-family: var(--font-masthead); font-weight: 800;
  font-size: clamp(1.65rem, 3.6vw, 2.35rem); line-height: 1.12; letter-spacing: -.012em;
  margin: .65rem 0 .7rem;
}
.lede h2 a, .story-card h3 a, .feature h2 a { color: var(--ink); text-decoration: none; }
.lede h2 a:hover, .story-card h3 a:hover, .feature h2 a:hover { color: var(--link-hover); }
.lede .standfirst { font-size: 1.08rem; margin-bottom: .9rem; }
.lede .chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.lede-art img { display: block; width: 100%; height: auto; }

/* section head reusing the standards-cover language: heavy category rule + hairline */
.deck { padding: 1.7rem 0; border-bottom: 1px solid var(--hairline); }
.deck-head {
  font-family: var(--font-masthead); font-weight: 700; font-size: .78rem;
  letter-spacing: .075em; text-transform: uppercase;
  border-top: 4px solid var(--indigo); border-bottom: 1px solid var(--ink);
  padding: .4rem 0 .35rem; margin-bottom: 1.3rem;
}
.deck-grid { display: grid; gap: 1.7rem 2rem; }
@media (min-width: 44rem) { .deck-grid.two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 44rem) { .deck-grid.four { grid-template-columns: 1fr 1fr; } }
@media (min-width: 66rem) { .deck-grid.four { grid-template-columns: repeat(4, 1fr); } }
/* text-forward story cards: category top rule + coloured kicker + headline +
   standfirst. No thumbnails in the grid: colour differentiates, words carry. */
.story-card { border-top: 3px solid var(--cat); padding-top: .8rem; }
.story-card .kicker::before { display: none; } /* the top rule already does the dash's job */
.story-card h3 {
  font-family: var(--font-masthead); font-weight: 700;
  font-size: 1.2rem; line-height: 1.22; margin: .45rem 0 .4rem;
}
.deck-grid.four .story-card h3 { font-size: 1.04rem; }
.story-card p { font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }

.feature { max-width: 47rem; }
.feature h2 {
  font-family: var(--font-masthead); font-weight: 800;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em;
  margin: .6rem 0 .6rem;
}
.feature .standfirst { font-size: 1.02rem; max-width: 45rem; margin-bottom: 0; }

.home-cta { padding: 1.9rem 0 2.3rem; max-width: 45rem; }
.home-cta h2 { font-family: var(--font-masthead); font-weight: 700; font-size: 1.3rem; margin: .55rem 0 .4rem; }
.home-cta p { font-size: .98rem; }

/* ── Tips forms ────────────────────────────────────────────────────────── */
.tip-forms { display: grid; gap: 2.2rem; max-width: 44rem; padding-bottom: 2.4rem; }
.form-block { border-top: 2px solid var(--ink); padding-top: 1rem; }
.form-block h2 { font-family: var(--font-masthead); font-weight: 700; font-size: 1.3rem; margin-bottom: .4rem; }
.form-block > p { font-size: .98rem; margin-bottom: 1rem; }
.form-block form > div { margin-bottom: .9rem; }
.form-block label {
  display: block; font-family: var(--font-masthead); font-weight: 600; font-size: .84rem;
  margin-bottom: .3rem;
}
.form-block input[type=text], .form-block input[type=email], .form-block input[type=tel],
.form-block input[type=file], .form-block textarea {
  width: 100%; font-family: var(--font-masthead); font-size: .95rem; color: var(--ink);
  background: var(--field); border: 1px solid var(--hairline); border-radius: 2px; padding: .55rem .6rem;
}
.form-block textarea { min-height: 7.5rem; resize: vertical; }
.form-block input:focus, .form-block textarea:focus { outline: 2px solid var(--indigo); outline-offset: 1px; }
@media (prefers-color-scheme: dark) {
  .form-block input:focus, .form-block textarea:focus { outline-color: var(--indigo-light); }
}
.form-block .meta { font-family: var(--font-masthead); font-size: .76rem; color: var(--ink-soft); margin-top: .3rem; }
.hp { position: absolute; left: -9999px; }
.btn {
  font-family: var(--font-masthead); font-weight: 700; font-size: .9rem; letter-spacing: .03em;
  color: var(--paper); background: var(--indigo); border: 0; border-radius: 2px;
  padding: .6rem 1.3rem; cursor: pointer;
}
.btn:hover { background: var(--indigo-deep); }
@media (prefers-color-scheme: dark) {
  .btn { background: var(--indigo-light); color: var(--shade); }
  .btn:hover { background: #c4d4ef; }
}
.form-msg { font-family: var(--font-masthead); font-size: .9rem; margin-top: .8rem; padding: .6rem .8rem; border-radius: 2px; }
.form-msg.ok { border: 1px solid var(--indigo); }
.form-msg.err { border: 1px solid var(--madder); }

/* ── Section index pages ───────────────────────────────────────────────── */
/* breadcrumb: Front page / Section — the same quiet caps register as the kickers */
.crumbs {
  font-family: var(--font-masthead); font-weight: 600; font-size: .72rem;
  line-height: 1.4; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 16px;
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--link-hover); }
.crumbs .sep { margin: 0 6px; }

/* the section hero: ONE category strip graphic (1200x260) banded across the header,
   the same lead-art language as an article opener. Intrinsic dims + aspect-ratio
   reserved so nothing reflows while the SVG loads. Cards below stay text-forward. */
.section-art { line-height: 0; margin: 0 0 20px; }
.section-art img { width: 100%; height: auto; aspect-ratio: 1200 / 260; }

/* the section list: the front page's text-forward card language, stacked
   newest-first in one column. Grows a card at a time as scout cycles publish. */
.section-list { display: grid; gap: 30px; max-width: 48rem; padding: .4rem 0 2rem; }
.section-list .story-card h2 {
  font-family: var(--font-masthead); font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.45rem); line-height: 1.22; margin: .45rem 0 .4rem;
}
.section-list .story-card h2 a { color: var(--ink); text-decoration: none; }
.section-list .story-card h2 a:hover { color: var(--link-hover); }
.section-list .story-card .meta {
  font-family: var(--font-masthead); font-size: .8rem; color: var(--ink-soft);
  margin-top: .55em;
}

/* ── Static pages ──────────────────────────────────────────────────────── */
.page-head { padding: 2.1rem 0 .4rem; }
.page-head h1 {
  font-family: var(--font-masthead); font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.14; margin: .7rem 0 .6rem;
}
.page-head .standfirst { margin-bottom: .6rem; }
.prose { max-width: 44rem; padding: .8rem 0 2.4rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-family: var(--font-masthead); font-weight: 700; font-size: 1.36rem; margin-top: 2rem; }
.prose h3 { font-family: var(--font-masthead); font-weight: 700; font-size: 1.08rem; margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: .35rem; }

/* ── Ad slot: exists from birth, empty by default ──────────────────────── */
.ad-slot:not([hidden]):not([data-house]) {
  border: 1px solid var(--hairline); padding: 1rem; margin: 1.6rem 0;
  font-family: var(--font-masthead); font-size: .8rem;
}

/* ── Footer (shade surface: reversed nameplate, -light accents) ────────── */
.site-foot { background: var(--shade); color: #faf7f1; margin-top: 2.5rem; border-top: 6px solid var(--indigo); }
@media (prefers-color-scheme: dark) { .site-foot { border-top-color: var(--indigo-light); } }
.site-foot .wrap { padding-top: 2.2rem; padding-bottom: 2.4rem; }
.site-foot .foot-plate img { height: 44px; width: auto; }
@media (max-width: 44rem) { .site-foot .foot-plate img { height: 34px; } }
.foot-nav {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 1.4rem 0 1.1rem;
  font-family: var(--font-masthead); font-size: .8rem; font-weight: 700;
  letter-spacing: .075em; text-transform: uppercase;
}
.foot-nav a { color: #faf7f1; text-decoration: none; }
.foot-nav a:hover { color: #aabfe4; }
.site-foot p {
  font-family: var(--font-masthead); font-size: .8rem; line-height: 1.6;
  color: color-mix(in srgb, #faf7f1 78%, #1c1f2a); max-width: 47rem;
}
.site-foot p + p { margin-top: .5rem; }
.site-foot a { color: #aabfe4; }

/* ── ad slot disclosure (fleet convention, added 2026-07-30) ────────────────────
   A visible ad slot MUST carry its label. Tied to :not([hidden]) rather than to a
   [data-filled] attribute on purpose: removing `hidden` is what makes the slot
   visible, so the label cannot be separated from the thing it discloses. The
   earlier [data-filled] pattern needed someone to remember a second attribute,
   and on 2026-07-30 a render test found 12 of 14 mastheads had no label rule at
   all - an advertiser would have rendered as an unlabelled box, which breaches
   both the disclosure rail and Australian Consumer Law.

   Colour is currentColor at reduced opacity, NOT a palette variable: --muted is
   undeclared on 5 mastheads and --hairline on 5, and a hardcoded grey cannot stay
   legible against both the light and dark themes. currentColor tracks whatever the
   theme sets, so the label is guaranteed readable in both without knowing the
   palette. Do not "improve" this into var(--muted) without checking all 14. */
.ad-slot:not([hidden]):not([data-house]) {
  border: 1px solid var(--hairline, rgba(128, 128, 128, 0.32));
  padding: 16px;
}
.ad-slot:not([hidden]):not([data-house])::before {
  content: "Advertisement";
  display: block;
  font-family: var(--font-sans, var(--font-body, system-ui, sans-serif));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.72;
  margin-bottom: 0.5rem;
}

/* ── sponsored / partner content disclosure (added 2026-07-30) ──────────────────
   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.

   These 6 staged mastheads had NO disclosure-banner CSS until 2026-07-30, found by
   auditing after the ad-slot label defect. The label text is HTML, not CSS content,
   so a sponsored piece here would still have been textually disclosed - but unstyled
   and visually indistinguishable from editorial, which is not the "clear and
   prominent" the convention and the ACL expect.

   Palette-independent on purpose: token naming across the fleet is genuinely
   inconsistent (3 of these 6 declare none of --accent/--spot/--ink/--paper), and a
   hardcoded colour cannot stay legible against both the light and dark themes.
   currentColor tracks whatever the theme sets, and color-mix against it gives a tint
   that works in both directions. Restyle with this masthead's OWN tokens at launch
   if wanted - the mechanism must not wait on that. */
.disclosure-banner {
  border: 1px solid color-mix(in oklab, currentColor 28%, transparent);
  border-left: 4px solid color-mix(in oklab, currentColor 55%, transparent);
  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; }

/* Source credit line beneath a figure or table. Added 2026-07-31: three mastheads used
   .attribution and NO stylesheet in the fleet defined it, so a citation that should read
   as quiet apparatus was rendering at body size. Found by sweeping with
   scripts/preflight.py. */
.attribution {
  font-family: var(--font-sans); font-size: .78rem; line-height: 1.5;
  opacity: .78; margin: .35rem 0 0;
}

/* ── house ad: the default state of an UNSOLD slot ───────────────────────────────
   Rolled out fleet-wide 2026-08-30. Before this, the slot rendered NOTHING on this
   masthead: every story quietly declined to mention that we sell advertising, while
   /advertise/ was reachable only from the footer. That is the whole funnel on a page
   nobody visits, and the fleet has taken zero advertising enquiries to date.

   WHEN A REAL ADVERTISER LANDS: put their markup in _ad-slot.html and REMOVE
   `data-house`. That removal is the only switch and it is not optional. The
   "Advertisement" disclosure above is bound to :not([data-house]), so a paid placement
   that kept the attribute would publish WITHOUT its disclosure, which is an Australian
   Consumer Law problem rather than a cosmetic one. It fails in the safe direction:
   forget it and you get a house ad where an advert should be, wrong on sight rather
   than silently wrong. The house ad must equally never say "Advertisement" - we are not
   a paying advertiser and the label would be false.

   TOKENS ARE FALLBACK CHAINS ON PURPOSE. Every masthead has its own palette and they do
   not share names: some define --accent, some --link, some neither, and --surface and
   --muted are absent on several. var(x, var(y, z)) resolves to whichever this masthead
   actually defines, ending at --ink, which all 14 have. Hardcoding one palette here
   would render an invisible border on most of the fleet. */
.ad-slot[data-house] {
  border: 0;
  /* Each masthead's own primary, in order of what it actually defines. --grid, --tide and
     --terra are each declared by exactly ONE masthead (energy-hunter, central-coast,
     electrify), which have no --accent or --link, so without them those three fell through
     to --ink and got a dark rule instead of their brand colour. --ink ends the chain and is
     defined on all 14. */
  border-top: 3px solid var(--accent, var(--link, var(--grid, var(--tide, var(--terra, var(--ink))))));
  /* Same reasoning as the border: the fleet has no shared name for a panel ground.
     --panel, --fog, --enamel and --sandstone are each the right token on the masthead
     that declares it. hunter declares none, so its house ad is the top rule alone,
     which still reads as furniture. transparent ends the chain safely. */
  /* PREFER THE THEME-AWARE TOKEN. A masthead's dark block overrides some tokens and not
     others, and picking an un-overridden one paints a LIGHT plate on a dark page. That
     is exactly what shipped on disability 2026-08-29: --fog is a light-mode colour its
     dark block never redefines, and dark-mode-check caught it at #e6edeb, luminance
     0.834, on a 0.012 ground. --ref-ground is that masthead's theme-aware form of the
     same colour (var(--fog) in light, #1f2729 in dark), so it comes first. Check any
     token added here against the masthead's prefers-color-scheme block. */
  background: var(--surface, var(--ref-ground, var(--panel, var(--fog, var(--enamel, var(--sandstone, transparent))))));
  padding: 18px 20px 20px; margin: 2em auto 0; text-align: left;
}
.ad-slot[data-house]::before {
  content: "Advertising space"; display: block;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted, var(--ink)); margin-bottom: 8px;
}
.ad-house-head { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  font-family: var(--font-masthead, var(--font-serif, Georgia, serif)); color: var(--text, var(--ink)); }
.ad-house-body { margin: 0 0 10px; font-size: .93rem; line-height: 1.55; color: var(--muted, var(--ink)); }
.ad-house-cta  { margin: 0; font-size: .93rem; font-weight: 600; }