/* The Ophir — 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).
   Reef family on a cool quartz mineral ground; Lora + Hanken Grotesk, self-hosted
   subsets. No gradients, no texture. The device is the seam: a fine reef-red
   baseline with a rationed reef-gold gilt line threading it. */

/* ── Fonts (same-origin subsets, SIL OFL; licences in /assets/fonts/) ─────── */
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/lora-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ── Tokens (the reef family on quartz; OKLCH source of truth in brand-kit.md) ─ */
:root {
  --quartz:      #f1f3f4;  /* cool pale mineral ground */
  --quartz-haze: #e6e8ea;  /* reference/methodology surfaces */
  --basalt:      #1d1f24;  /* ink: text, rules, AND the dark-theme ground */

  --reef-red:          #8e2f2b;  /* brand ink: links, councils kicker, furniture */
  --reef-red-deep:     #72201f;  /* hover/active, shaded red kicker */
  --reef-red-light:    #e38879;  /* the red on the dark ground */
  --reef-red-tint:     #fbe8e5;  /* flat wash, light theme only */
  --reef-gold:         #d3ac41;  /* the gilt line / seam vein / fleck — never text on quartz */
  --reef-gold-deep:    #806219;  /* the one legible gold kicker (AA on quartz) */
  --reef-gold-light:   #e2c162;  /* the gold on the dark theme */
  --creek-stone:       #6d6863;
  --creek-stone-deep:  #534f4a;
  --creek-stone-light: #bcb6af;
  --creek-stone-tint:  #efeae5;

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", system-ui, sans-serif;

  --ground:  var(--quartz);
  --text:    var(--basalt);
  --muted:   #4f4b47;          /* creek-stone darkened, AAA on quartz */
  --rule:    #cdd0d2;          /* cool hairlines */
  --link:    var(--reef-red);
  --link-hover: var(--reef-red-deep);
  --surface: var(--quartz-haze);

  /* category inks (light theme) — the beat map from brand-kit.md */
  --cat-councils:                     var(--reef-red);
  --cat-energy-and-the-rez:           var(--reef-gold-deep);
  --cat-mining:                       var(--basalt);
  --cat-development-and-health:       var(--creek-stone-deep);
  --cat-university-and-economy:       var(--reef-red-deep);
  --cat-community-and-visitor-economy: var(--creek-stone);
}

/* Dark theme: the negative of the page, not a new palette. Quartz text on basalt
   ground; each accent swaps to its -light cut; the seam gold stays bright (7.7). */
@media (prefers-color-scheme: dark) {
  :root {
    --ground:  var(--basalt);
    --text:    var(--quartz);
    --muted:   #b6b1ab;
    --rule:    #3a3d43;
    --link:    var(--reef-red-light);
    --link-hover: #efa89b;
    --surface: #26282e;

    --cat-councils:                     var(--reef-red-light);
    --cat-energy-and-the-rez:           var(--reef-gold-light);
    --cat-mining:                       var(--quartz);
    --cat-development-and-health:       var(--creek-stone-light);
    --cat-university-and-economy:       var(--reef-red-light);
    --cat-community-and-visitor-economy: var(--creek-stone-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.125rem; } }  /* 18px */
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 seam rule (site furniture: a fine reef-red baseline with a rationed
      reef-gold gilt line threading it — the seam language, never the device
      mark, which lives only in the lockups) ────────────────────────────────── */
.seam-rule { position: relative; height: 3px; background: var(--reef-red); }
.seam-rule::after {
  content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px;
  background: var(--reef-gold);
}

/* ── 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.7rem; 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="energy-and-the-rez"] .site-nav a[data-nav="energy-and-the-rez"],
body[data-page="mining"] .site-nav a[data-nav="mining"],
body[data-page="development-and-health"] .site-nav a[data-nav="development-and-health"],
body[data-page="university-and-economy"] .site-nav a[data-nav="university-and-economy"],
body[data-page="community-and-visitor-economy"] .site-nav a[data-nav="community-and-visitor-economy"] {
  color: var(--link); border-bottom: 2px solid var(--link);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-foot {
  margin-top: 4rem; background: var(--basalt); color: var(--quartz);
  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(--quartz); text-decoration: none; }
.foot-nav a:hover { color: var(--reef-gold-light); text-decoration: underline; }
.site-foot p { max-width: 46rem; margin: .5rem 0; color: #cfd0d3; }
.site-foot a { color: var(--reef-red-light); }
.site-foot .seam-rule { margin-top: 1.6rem; }

/* ── 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="energy-and-the-rez"]           { --cat: var(--cat-energy-and-the-rez); }
[data-cat="mining"]                       { --cat: var(--cat-mining); }
[data-cat="development-and-health"]       { --cat: var(--cat-development-and-health); }
[data-cat="university-and-economy"]       { --cat: var(--cat-university-and-economy); }
[data-cat="community-and-visitor-economy"] { --cat: var(--cat-community-and-visitor-economy); }
.kicker, .card .kicker a { color: var(--cat, var(--link)); }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
/* the mining kicker carries its rationed gold fleck (the only gold furniture) */
[data-cat="mining"] .kicker::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem;
  margin-right: .45rem; vertical-align: baseline; background: var(--reef-gold);
}

/* ── 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. Its sibling .lead-art was styled and this was
   not, which preflight's class check flagged. */
.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; }
.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 */
/* Base cell padding for ANY table in main, so a table written without .data-table is still
   readable. Added at launch on 2026-10-02 when the generated reach-figure block became this
   masthead's first unclassed table; table-padding-check failed it because the columns touched.
   Values match .data-table below, so an unclassed table reads as this masthead's own. */
main table th, main table td { text-align: left; padding: .45rem .7rem .45rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.data-table { width: 100%; 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(--quartz); 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: #e38879; } }

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

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