/* The Escarpment — site styles. Tokens verbatim from brand-kit/brand-kit.md
   (PALETTE_OKLCH in .jez/scripts/build-logo.py is the single source of truth;
   hex fallbacks are its computed sRGB values). Strata palette on true-neutral
   mist; Literata + Work Sans, self-hosted subsets. No gradients, no texture. */

/* ── Fonts (same-origin subsets, SIL OFL; licences in /assets/fonts/) ─────── */
@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/fonts/literata-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Literata Display";
  src: url("/assets/fonts/literata-display-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Literata Display";
  src: url("/assets/fonts/literata-display-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/work-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/work-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --ink:  #1c1e21;  /* coal: text, rules, dark-theme ground */
  --mist: #f4f5f3;  /* page ground */
  --haze: #e9eae8;  /* reference + methodology surfaces */

  --rainforest:       #2f5227;
  --rainforest-deep:  #223d1c;
  --rainforest-light: #9ec39a;
  --rainforest-tint:  #e7f0e6;
  --sandstone:        #6f5b2c;
  --sandstone-deep:   #564520;
  --sandstone-light:  #d7c69a;
  --sandstone-tint:   #f3eee1;
  --slate:            #314555;
  --slate-deep:       #253542;
  --slate-light:      #a4bfd2;
  --slate-tint:       #e6eef4;

  --font-serif: "Literata", Georgia, serif;
  --font-disp:  "Literata Display", "Literata", Georgia, serif;
  --font-sans:  "Work Sans", system-ui, sans-serif;

  --ground: var(--mist);
  --text:   var(--ink);
  --muted:  #4a4e54;          /* coal lightened, AA+ on mist */
  --rule:   #c9cbc8;          /* hairlines */
  --link:   var(--rainforest);
  --link-hover: var(--rainforest-deep);
  --surface: var(--haze);

  /* category inks (light theme) */
  --cat-councils:            var(--rainforest);
  --cat-health:              var(--rainforest-deep);
  --cat-development-and-land: var(--sandstone);
  --cat-community-and-coast: var(--sandstone-deep);
  --cat-port-and-industry:   var(--slate);
  --cat-university:          var(--slate-deep);

  /* strata rule segments */
  --strata-1: var(--rainforest);
  --strata-2: var(--sandstone);
  --strata-3: var(--ink);
  --strata-4: var(--slate);
}

/* Dark theme: the negative of the page, not a new palette. Mist text on coal
   ground; each accent swaps to its -light cut; seam segment prints mist. */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: var(--ink);
    --text:   var(--mist);
    --muted:  #b3b6b1;
    --rule:   #3a3d41;
    --link:   var(--rainforest-light);
    --link-hover: #c2dbbf;
    --surface: #26292d;

    --cat-councils:            var(--rainforest-light);
    --cat-health:              var(--rainforest-light);
    --cat-development-and-land: var(--sandstone-light);
    --cat-community-and-coast: var(--sandstone-light);
    --cat-port-and-industry:   var(--slate-light);
    --cat-university:          var(--slate-light);

    --strata-1: var(--rainforest-light);
    --strata-2: var(--sandstone-light);
    --strata-3: var(--mist);
    --strata-4: var(--slate-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 strata rule (site furniture: level, banded, open joints — never the
      stepped device, which lives only in the lockups) ──────────────────────── */
.strata-rule { display: flex; gap: 2px; height: 6px; }
.strata-rule span:nth-child(1) { flex: 34; background: var(--strata-1); }
.strata-rule span:nth-child(2) { flex: 24; background: var(--strata-2); }
.strata-rule span:nth-child(3) { flex: 9;  background: var(--strata-3); }
.strata-rule span:nth-child(4) { flex: 19; background: var(--strata-4); }

/* ── 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.9rem; 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="development-and-land"] .site-nav a[data-nav="development-and-land"],
body[data-page="port-and-industry"] .site-nav a[data-nav="port-and-industry"],
body[data-page="health"] .site-nav a[data-nav="health"],
body[data-page="community-and-coast"] .site-nav a[data-nav="community-and-coast"] {
  color: var(--link); border-bottom: 2px solid var(--link);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-foot {
  margin-top: 4rem; background: var(--ink); color: var(--mist);
  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(--mist); text-decoration: none; }
.foot-nav a:hover { color: var(--rainforest-light); text-decoration: underline; }
.site-foot p { max-width: 46rem; margin: .5rem 0; color: #cfd2ce; }
.site-foot a { color: var(--rainforest-light); }
.site-foot .strata-rule { margin-top: 1.6rem; }
.site-foot .strata-rule span:nth-child(1) { background: var(--rainforest-light); }
.site-foot .strata-rule span:nth-child(2) { background: var(--sandstone-light); }
.site-foot .strata-rule span:nth-child(3) { background: var(--mist); }
.site-foot .strata-rule span:nth-child(4) { background: var(--slate-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="health"]              { --cat: var(--cat-health); }
[data-cat="development-and-land"] { --cat: var(--cat-development-and-land); }
[data-cat="community-and-coast"] { --cat: var(--cat-community-and-coast); }
[data-cat="port-and-industry"]   { --cat: var(--cat-port-and-industry); }
[data-cat="university"]          { --cat: var(--cat-university); }
.kicker, .card .kicker a { color: var(--cat, var(--link)); }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }

/* ── Front page ───────────────────────────────────────────────────────────── */
.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-disp); 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; }
/* 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); }

/* text-forward cards: category top rule + kicker + headline + standfirst + date */
.card { border-top: 3px solid var(--cat, var(--rule)); padding-top: .75rem; }
.card h3, .section-list .card h2 {
  font-family: var(--font-disp); 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-disp); font-weight: 700; font-size: 2.1rem;
  line-height: 1.1; margin: .1rem 0 .5rem; letter-spacing: -0.008em;
}
.section-head .explainer { margin: 0; max-width: 46rem; color: var(--muted); }
.section-hero { margin: 1.1rem 0 0; }
.section-hero img { display: block; width: 100%; height: auto; }
.section-list { display: grid; gap: 1.6rem; padding: 1.8rem 0; max-width: 46rem; }

/* ── Articles ─────────────────────────────────────────────────────────────── */
.article-head { padding: 1rem 0 0; max-width: 50rem; }
.article-head h1 {
  font-family: var(--font-disp); 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-disp); 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; }

/* 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 padding so an UNWRAPPED <table> is safe on its own. .data-table refines this;
   without it an author who writes a plain table gets columns that touch. Values are
   illawarra's own, taken from .data-table below, not copied from a sibling masthead. */
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; }
.data-table td:last-child, .data-table th:last-child { padding-right: 0; }
.table-scroll { overflow-x: auto; }

/* charts (authored inline SVG; text real, numerals tabular) */
/* On narrow screens the drawing keeps a legible min-width and scrolls sideways rather
   than shrinking its labels below readability (the sibling-masthead chart pattern). */
.chart { margin: 1.4rem 0; overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; min-width: 34rem; font-family: var(--font-sans); }
.chart .axis { fill: var(--muted); font-size: 12px; }
.chart .val { fill: var(--text); font-size: 12.5px; font-weight: 600; }
.chart .gridline { stroke: var(--rule); stroke-width: 1; }
.chart .refline { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .bar-rainforest { fill: var(--cat-councils); }
.chart .bar-sandstone { fill: var(--cat-development-and-land); }
.chart .bar-slate { fill: var(--cat-port-and-industry); }
.chart figcaption, .viz-note {
  font-family: var(--font-sans); font-size: .8rem; color: var(--muted); margin-top: .5rem;
}

/* 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; }
.note-box { border-top-color: var(--cat, var(--rule)); font-size: .95em; }
.note-box p { margin: 0 0 .6rem; }
.note-box p:last-child { margin: 0; }

.correction-line {
  max-width: 46rem; font-family: var(--font-sans); font-size: .85rem;
  color: var(--muted); margin: 1.6rem 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(--ground); 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: #e0a297; } }

/* ── Prose pages (about etc.) ─────────────────────────────────────────────── */
.prose { max-width: 46rem; padding: 1.2rem 0 0; }
.prose h1 {
  font-family: var(--font-disp); font-weight: 700; font-size: 2.1rem;
  line-height: 1.12; margin: .4rem 0 .8rem; letter-spacing: -0.008em;
}
.prose h2 { font-family: var(--font-disp); font-weight: 600; font-size: 1.35rem; margin: 1.8rem 0 .5rem; }
.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; }