/* The Headland, site styles. Tokens verbatim from brand-kit/brand-kit.md
   (PALETTE_OKLCH in .jez/scripts/build-logo.py is the single source of truth;
   the OKLCH values are authoritative, the hex are its computed sRGB fallbacks,
   declared first so a browser without OKLCH keeps the hex). The headland family
   on bright sea light: a deep open-Pacific ocean-blue lead sparked by a rationed
   warm coral, Faustina + Plus Jakarta Sans, self-hosted subsets. No gradients, no
   texture. The device is the headland and horizon; site furniture uses a fine
   ocean horizon hairline and a coral spark, never the device mark (that lives
   only in the lockups). */

/* Fonts (same-origin subsets, SIL OFL; licences in /assets/fonts/) */
@font-face {
  font-family: "Faustina";
  src: url("/assets/fonts/faustina-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Faustina";
  src: url("/assets/fonts/faustina-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Faustina";
  src: url("/assets/fonts/faustina-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Faustina";
  src: url("/assets/fonts/faustina-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Tokens (the headland family on bright sea light; OKLCH source of truth in
   brand-kit.md, hex fallback declared first) */
:root {
  --sea-light:      #f6f4f0;  --sea-light:      oklch(96.8% 0.006 92);   /* bright sun-clean sea-light ground */
  --sea-light-haze: #eeece6;  --sea-light-haze: oklch(94.2% 0.008 90);   /* reference/methodology surfaces */
  --headland:       #231e19;  --headland:       oklch(24.0% 0.012 74);   /* ink: text, rules, AND the dark-theme ground */

  --ocean:            #005389;  --ocean:            oklch(42.5% 0.120 242); /* PRIMARY: links, councils */
  --ocean-deep:       #00416e;  --ocean-deep:       oklch(36.0% 0.102 243); /* hover/active, health kicker */
  --ocean-light:      #72b3dd;  --ocean-light:      oklch(74.0% 0.090 238); /* the blue on the dark theme */
  --ocean-tint:       #d7ebfa;  --ocean-tint:       oklch(93.0% 0.030 240); /* flat chart wash, light only */
  --coral:            #b83c4a;  --coral:            oklch(53.8% 0.160 18);  /* SIGNATURE: flood recovery, the spark */
  --coral-deep:       #9d2a40;  --coral-deep:       oklch(47.0% 0.150 14);  /* university + marine science + economy kicker */
  --coral-light:      #fa9390;  --coral-light:      oklch(77.0% 0.125 22);  /* the coral spark + the dark theme */
  --coral-tint:       #ffdedd;  --coral-tint:       oklch(93.0% 0.040 20);  /* flat chart wash, light only */
  --sand-deep:        #76664f;  --sand-deep:        oklch(52.0% 0.040 78);  /* horticulture + community kicker */
  --sand-light:       #d2c6b2;  --sand-light:       oklch(83.0% 0.030 80);  /* sand on the dark theme */
  --sand-tint:        #f3ece1;  --sand-tint:        oklch(94.5% 0.016 80);  /* warm surface wash, light only */
  --sea-stone:        #6e767b;  --sea-stone:        oklch(56.0% 0.013 236); /* support grey, secondary rules */
  --sea-stone-deep:   #4d575e;  --sea-stone-deep:   oklch(45.0% 0.017 236); /* the Coffs bypass + transport kicker */
  --sea-stone-light:  #b7bfc4;  --sea-stone-light:  oklch(80.0% 0.012 236); /* stone on the dark theme */
  --sea-stone-tint:   #e6ecf0;  --sea-stone-tint:   oklch(94.0% 0.008 236); /* flat chart wash, light only */

  --font-serif: "Faustina", Piazzolla, Georgia, "Times New Roman", serif;
  --font-sans:  "Plus Jakarta Sans", "Albert Sans", system-ui, sans-serif;

  --ground:  var(--sea-light);
  --text:    var(--headland);
  --muted:   #54504a;          /* warm charcoal-grey, AAA on sea light */
  --rule:    #ddd7cb;          /* warm sea-light hairlines */
  --link:    var(--ocean);
  --link-hover: var(--ocean-deep);
  --surface: var(--sea-light-haze);
  --horizon: var(--ocean);      /* the ocean horizon hairline (device furniture) */
  --spark:   var(--coral);      /* the rationed coral spark */

  /* category inks (light theme), the beat map from brand-kit.md */
  --cat-councils:           var(--ocean);
  --cat-flood-recovery:     var(--coral);
  --cat-health:             var(--ocean-deep);
  --cat-transport-bypass:   var(--sea-stone-deep);
  --cat-horticulture:       var(--sand-deep);
  --cat-university-economy: var(--coral-deep);
  --cat-community:          var(--sand-deep);
}

/* Dark theme: the negative of the page, not a new palette. Sea-light text on
   headland ground; each accent swaps to its -light cut. The device tile stays
   ocean; the coral spark stays coral-light. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:  var(--headland);
    --text:    var(--sea-light);
    --muted:   #b3aca1;
    --rule:    #3b372f;
    --link:    var(--ocean-light);
    --link-hover: #93c6e6;
    --surface: #2c281f;
    --horizon: var(--ocean-light);
    --spark:   var(--coral-light);

    --cat-councils:           var(--ocean-light);
    --cat-flood-recovery:     var(--coral-light);
    --cat-health:             var(--ocean-light);
    --cat-transport-bypass:   var(--sea-stone-light);
    --cat-horticulture:       var(--sand-light);
    --cat-university-economy: var(--coral-light);
    --cat-community:          var(--sand-light);
  }
  .light-only { display: none; }
  img.story-graphic, img.section-icon { filter: none; }
}
@media not (prefers-color-scheme: dark) {
  .dark-only { display: none; }
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.0625rem;             /* 17px */
  line-height: 1.6;
}
@media (min-width: 760px) { body { font-size: 1.1875rem; } }  /* 19px */
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
table, .data, .figures, .chip { font-variant-numeric: tabular-nums lining-nums; }

.wrap { max-width: 71rem; margin: 0 auto; padding: 0 1.25rem; }
.skip {
  position: absolute; left: -999px; top: 0; background: var(--ground);
  color: var(--text); padding: .5rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

/* The horizon rule (site furniture: a fine ocean hairline, the horizon language,
   never the device mark, which lives only in the lockups) */
.horizon-rule { height: 3px; background: var(--horizon); }

/* Header */
.site-head { border-bottom: 1px solid var(--rule); }
.masthead-row { padding: 1.4rem 0 1.1rem; text-align: center; }
.masthead-row img { height: 56px; width: auto; }
@media (max-width: 560px) { .masthead-row img { height: 44px; } }
.site-nav {
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans); font-weight: 600; font-size: .78rem;
  letter-spacing: .13em; text-transform: uppercase;
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 1.6rem; row-gap: .25rem; padding: .65rem 1rem;
}
.site-nav a { color: var(--text); text-decoration: none; padding: .15rem 0; }
.site-nav a:hover { color: var(--link); }
body[data-page="home"] .site-nav a[data-nav="home"],
body[data-page="councils"] .site-nav a[data-nav="councils"],
body[data-page="flood-recovery"] .site-nav a[data-nav="flood-recovery"],
body[data-page="health"] .site-nav a[data-nav="health"],
body[data-page="transport-bypass"] .site-nav a[data-nav="transport-bypass"],
body[data-page="horticulture"] .site-nav a[data-nav="horticulture"],
body[data-page="university-economy"] .site-nav a[data-nav="university-economy"],
body[data-page="community"] .site-nav a[data-nav="community"] {
  color: var(--link); border-bottom: 2px solid var(--link);
}

/* Footer */
.site-foot {
  margin-top: 4rem; background: var(--headland); color: var(--sea-light);
  font-family: var(--font-sans); font-size: .9rem; line-height: 1.55;
}
.site-foot .wrap { padding-top: 2.2rem; padding-bottom: 2.4rem; }
.site-foot .foot-plate img { height: 44px; width: auto; }
.foot-nav {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 1.3rem 0 1.1rem;
  font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}
.foot-nav a { color: var(--sea-light); text-decoration: none; }
.foot-nav a:hover { color: var(--coral-light); text-decoration: underline; }
.site-foot p { max-width: 46rem; margin: .5rem 0; color: #d7d1c7; }
.site-foot a { color: var(--ocean-light); }
.site-foot .horizon-rule { margin-top: 1.6rem; background: var(--ocean-light); }

/* Kickers + category colouring */
.kicker {
  font-family: var(--font-sans); font-weight: 600; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .45rem;
}
[data-cat="councils"]           { --cat: var(--cat-councils); }
[data-cat="flood-recovery"]     { --cat: var(--cat-flood-recovery); }
[data-cat="health"]             { --cat: var(--cat-health); }
[data-cat="transport-bypass"]   { --cat: var(--cat-transport-bypass); }
[data-cat="horticulture"]       { --cat: var(--cat-horticulture); }
[data-cat="university-economy"] { --cat: var(--cat-university-economy); }
[data-cat="community"]          { --cat: var(--cat-community); }
.kicker, .card .kicker a { color: var(--cat, var(--link)); }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
/* the flood-recovery kicker carries the rationed coral spark (its own signature
   colour); community shares horticulture's warm sand-deep but is set off by the
   same coral spark so the two warm-neutral beats stay legibly distinct */
[data-cat="flood-recovery"] .kicker::before,
[data-cat="community"] .kicker::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem;
  margin-right: .45rem; vertical-align: baseline; border-radius: 50%;
  background: var(--spark);
}

/* Front page */
.front-intro { padding: 2.2rem 0 1.6rem; border-bottom: 1px solid var(--rule); max-width: 50rem; }
.front-intro h1 {
  font-family: var(--font-serif); font-weight: 700; font-size: 2rem;
  line-height: 1.16; margin: 0 0 .7rem; letter-spacing: -0.006em;
}
@media (min-width: 760px) { .front-intro h1 { font-size: 2.4rem; } }
.front-intro .lede { font-size: 1.1em; margin: 0 0 1rem; }
.front-intro p { margin: 0 0 1rem; }
.front-intro p:last-child { margin: 0; }

/* more-coverage row (front page): the secondary stories under the lead */
.more-stories { padding: 1.6rem 0 0; border-top: 1px solid var(--rule); }
.more-stories .row-head {
  font-family: var(--font-sans); font-weight: 600; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 .3rem;
}
.more-stories .section-list { padding: .6rem 0 0; }

/* section directory (front page + nowhere else): honest section list, no cards */
.section-index { display: grid; gap: 1.5rem; padding: 1.9rem 0; }
@media (min-width: 640px) { .section-index { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .section-index { grid-template-columns: 1fr 1fr 1fr; } }
.section-index .sx {
  border-top: 3px solid var(--cat, var(--rule)); padding-top: .8rem;
}
.section-index .sx h2 {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem;
  line-height: 1.22; margin: 0 0 .35rem;
}
.section-index .sx h2 a { color: var(--text); text-decoration: none; }
.section-index .sx h2 a:hover { color: var(--cat, var(--link)); }
.section-index .sx p { margin: 0; font-size: .93em; color: var(--muted); }

/* Front deck / cards (used once real stories land; styled now, unused in the
   shell so the front page renders with zero stories) */
.front-lead {
  display: grid; gap: 1.6rem; padding: 2rem 0 1.8rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 860px) { .front-lead { grid-template-columns: 7fr 5fr; align-items: center; } }
.front-lead h2 {
  font-family: var(--font-serif); font-weight: 700; font-size: 2rem;
  line-height: 1.16; margin: 0 0 .7rem; letter-spacing: -0.008em;
}
@media (min-width: 860px) { .front-lead h2 { font-size: 2.45rem; } }
.front-lead h2 a { color: var(--text); text-decoration: none; }
.front-lead h2 a:hover { color: var(--link); }
.front-lead .standfirst { margin: 0 0 .8rem; font-size: 1.06em; color: var(--muted); }
/* Text column of the lead grid. min-width:0 is the point: a grid child defaults to
   min-content width, so a long unbroken headline word can push the column past its
   track and shove the art off-canvas. Shipped unstyled by this brand-kit family on 4
   mastheads; preflight's class check is what surfaced it. */
.front-lead .lead-text { min-width: 0; }
.front-lead .lead-art { order: 2; }
.front-lead .lead-art img { display: block; width: 100%; height: auto; }
@media (max-width: 859px) { .front-lead .lead-art { order: -1; } }
.front-deck { display: grid; gap: 1.5rem; padding: 1.9rem 0; }
@media (min-width: 640px) { .front-deck { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .front-deck.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.front-deck + .front-deck { border-top: 1px solid var(--rule); }
.card { border-top: 3px solid var(--cat, var(--rule)); padding-top: .75rem; }
.card h3, .section-list .card h2 {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.28rem;
  line-height: 1.24; margin: 0 0 .45rem;
}
.card h3 a, .section-list .card h2 a { color: var(--text); text-decoration: none; }
.card h3 a:hover, .section-list .card h2 a:hover { color: var(--link); }
.card .standfirst { margin: 0 0 .5rem; font-size: .93em; color: var(--muted); }
.card .dateline { margin: 0; }
.card .card-art { display: block; margin: 0 0 .7rem; }
.card .card-art img { display: block; width: 100%; height: auto; }
.dateline {
  font-family: var(--font-sans); font-size: .8rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
}

/* Section fronts */
.crumbs {
  font-family: var(--font-sans); font-size: .8rem; color: var(--muted);
  padding: 1.1rem 0 0; margin: 0;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--link); }
.section-head { padding: .9rem 0 1.4rem; border-bottom: 1px solid var(--rule); }
.section-head h1 {
  font-family: var(--font-serif); font-weight: 700; font-size: 2.1rem;
  line-height: 1.1; margin: .1rem 0 .5rem; letter-spacing: -0.006em;
}
.section-head .explainer { margin: 0 0 .8rem; max-width: 46rem; }
.section-head .explainer:last-child { margin-bottom: 0; }
.section-list { display: grid; gap: 1.6rem; padding: 1.8rem 0; max-width: 46rem; }
.empty-note {
  font-family: var(--font-sans); font-size: .9rem; color: var(--muted);
  background: var(--surface); border-top: 3px solid var(--rule);
  padding: 1.1rem 1.3rem; margin: 1.8rem 0; max-width: 46rem;
}

/* Articles (styled ahead of the first story; unused in the shell) */
.article-head { padding: 1rem 0 0; max-width: 50rem; }
.article-head h1 {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.95rem; line-height: 1.14; letter-spacing: -0.008em;
  margin: .1rem 0 .7rem;
}
@media (min-width: 760px) { .article-head h1 { font-size: 2.4rem; } }
.article-head .standfirst {
  font-size: 1.13em; line-height: 1.5; color: var(--muted); margin: 0 0 .85rem;
}
.lead-graphic { margin: 1.2rem 0 0; }
.lead-graphic img { display: block; width: 100%; height: auto; }
.article-body { max-width: 46rem; padding: .6rem 0 0; }
.article-body h2 {
  font-family: var(--font-serif); font-weight: 600; font-size: 1.4rem;
  line-height: 1.25; margin: 2rem 0 .6rem;
}
.article-body p { margin: 0 0 1.05rem; }
.article-body ul, .article-body ol { margin: 0 0 1.05rem; padding-left: 1.3rem; }
.article-body li { margin-bottom: .4rem; }
.article-body em { font-style: italic; }
.correction-line {
  max-width: 46rem; font-family: var(--font-sans); font-size: .85rem;
  color: var(--muted); margin: 1.6rem 0 0;
}

/* the checked chip: a dated link to the source a figure was verified against */
.chip {
  display: inline-block; font-family: var(--font-sans); font-weight: 600;
  font-size: .72rem; letter-spacing: .04em; text-decoration: none;
  border: 1px solid var(--cat, var(--link)); color: var(--cat, var(--link));
  border-radius: 2px; padding: .1rem .5rem;
}
.chip:hover { background: var(--surface); }

/* tables */
/* min-width is what makes .table-scroll actually work. With width:100% alone the table
   always fits its container, so overflow-x never triggers and the columns just compress
   until words break mid-word on a phone (visual-qa flagged exactly that on the Coffs
   hospital table, 2026-07-28: "Compl", "buildin", "Februa"). With a min-width the table
   overflows on narrow screens and the wrapper scrolls, which is the intended behaviour. */
/* Base safety for an unwrapped <table>: the next author will write one without
   .data-table, and with no padding adjacent columns touch. Element-only
   specificity, so every .data-table rule below still wins. */
main table { border-collapse: collapse; }
main table th, main table td { padding: .45rem .7rem .45rem 0; text-align: left; vertical-align: top; }

.data-table { width: 100%; min-width: 34rem; border-collapse: collapse; margin: 1.2rem 0; font-family: var(--font-sans); font-size: .88rem; }
.data-table caption {
  text-align: left; font-family: var(--font-sans); font-weight: 600;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding-bottom: .5rem;
}
.data-table th, .data-table td { text-align: left; padding: .45rem .7rem .45rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.data-table thead th { font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.data-table td.num, .data-table th.num { text-align: right; padding-right: 1.1rem; }
.table-scroll { overflow-x: auto; }

/* reference / methodology surfaces sit on haze */
.sources, .methodology-block, .note-box {
  background: var(--surface); padding: 1.2rem 1.4rem; margin: 2rem 0 0;
  max-width: 46rem; border-top: 3px solid var(--rule);
}
.sources h2 {
  font-family: var(--font-sans); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .7rem;
}
.sources ol { margin: 0; padding-left: 1.2rem; font-size: .92em; }
.sources li { margin-bottom: .5rem; }
.sources .methodology, .methodology-block p { font-size: .9em; margin: .9rem 0 0; }

/* Ad slot: empty by default, labelled when filled */
.ad-slot { max-width: 46rem; margin: 2rem 0 0; }

/* Forms (tips page) */
.tip-form { max-width: 34rem; font-family: var(--font-sans); }
.tip-form label { display: block; font-weight: 600; font-size: .85rem; margin: 1rem 0 .3rem; }
.tip-form label .opt { font-weight: 400; 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; color: var(--text); background: var(--ground);
  border: 1px solid var(--muted); border-radius: 2px; padding: .55rem .65rem;
}
.tip-form textarea { min-height: 7.5rem; resize: vertical; }
.tip-form button {
  margin-top: 1.2rem; font-family: var(--font-sans); font-weight: 600;
  font-size: .9rem; letter-spacing: .05em; cursor: pointer;
  background: var(--link); color: var(--sea-light); border: 0; border-radius: 2px;
  padding: .65rem 1.4rem;
}
.tip-form button:hover { background: var(--link-hover); }
.form-note { font-size: .85rem; color: var(--muted); }
[data-tip-success], [data-tip-error] {
  font-family: var(--font-sans); font-weight: 600; margin-top: 1rem;
}
[data-tip-success] { color: var(--link); }
[data-tip-error] { color: #8a2a1e; }
@media (prefers-color-scheme: dark) { [data-tip-error] { color: var(--coral-light); } }

/* Prose pages (about etc.) */
.prose { max-width: 46rem; padding: 1.2rem 0 0; }
.prose h1 {
  font-family: var(--font-serif); font-weight: 700; font-size: 2.1rem;
  line-height: 1.12; margin: .4rem 0 .8rem; letter-spacing: -0.006em;
}
.prose h2 { font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem; margin: 1.8rem 0 .5rem; }
.prose p { margin: 0 0 1.05rem; }
.prose ul { margin: 0 0 1.05rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.section-icon { width: 20px; height: 20px; vertical-align: -4px; margin-right: .45rem; }

/* ── 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; }

/* Dated update/correction note on a published story. Added 2026-08-01: this masthead had no
   update-note class, and the fleet rule is that an UNSTYLED note class is a regression, so it
   gets a real one rather than borrowing .empty-note (which is empty-state messaging for section
   lists). Built from this masthead's own tokens so it stays visually its own. */
.revision-note {
  max-width: 46rem; margin: 1.6rem 0 0;
  font-family: var(--font-sans); font-size: .86rem;
  color: color-mix(in oklab, var(--ink, currentColor) 84%, transparent);
  border-left: 3px solid var(--rule, currentColor); padding: .2rem 0 .2rem .9rem;
}

/* ── 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; }