/*
 * unclebill.online — site stylesheet
 * Shared design system for all pages.
 *
 * Structure:
 *   :root                    — design tokens (colours, max-width)
 *   body, ::before           — base type, paper grain
 *   .ack-bar                 — Acknowledgement of Country stripe
 *   .mast                    — masthead
 *   .mast-nav                — primary navigation
 *   .hero                    — home-page hero (index.html only)
 *   .pillars / .pillar       — three-column work summary
 *   .status                  — "launching soon" pulsed indicator
 *   .contact-block           — email link wrapper
 *   .article                 — longread article (about.html, future yarns)
 *   .placeholder             — coming-soon pages (yarning-circles, events, yarns, get-involved)
 *   .signup                  — email capture form
 *   .legal                   — privacy policy and similar text-heavy pages
 *   footer / .footer-links   — shared footer with privacy policy link
 *   @media (max-width: 860px) — responsive breakpoint
 */

:root {
  --bg: #f4ede2;           /* warm ochre paper */
  --bg-deep: #ebe1d0;
  --ink: #1a1410;          /* near-black with warmth */
  --ink-soft: #3a2f26;
  --ink-mute: #6b5d50;
  --ochre: #c8881f;        /* flag yellow, dialled back */
  --earth: #8b2f1a;        /* flag red, dialled back — colour of Selwyn Range / Mitakoodi Country */
  --river-blue: #4D6290;   /* Cloncurry River — deep still water, indigo with warmth */
  --rule: #c9b99f;         /* neutral structural border — form inputs, panel edges */
  --rule-warm: #d4b8af;    /* dusty earth-red, low effective saturation — editorial section dividers */
  --accent: #6b7d5a;       /* coolibah / river-gum green — Uncle Bill's people are the River people */
  --terracotta: #e8c4a8;   /* terracotta dust — pale warm earth, the palette's light warm note */
  --mulla: #9a6b94;        /* mulla mulla lilac — Ptilotus exaltatus, flowering after rain on Cloncurry country */
  --max-w: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Subtle paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(139, 47, 26, 0.04) 0, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200, 136, 31, 0.05) 0, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Acknowledgement bar ---------- */
.ack-bar {
  position: relative;
  z-index: 2;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 12px 24px;
  text-align: center;
  font-weight: 300;
  line-height: 1.55;
}
.ack-bar strong { color: var(--ochre); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.ack-bar strong:first-of-type { margin-right: 10px; }
.ack-bar-inner {
  display: inline-block;
  max-width: var(--max-w);
  text-align: center;
}
/* On wide viewports, keep the closing clause together so "Sovereignty never ceded" doesn't orphan */
@media (min-width: 900px) {
  .ack-bar-nowrap { white-space: nowrap; }
}

/* ---------- Masthead ---------- */
.mast {
  position: relative;
  z-index: 2;
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ---------- Country bar — decorative band beneath the masthead.
   Six joined hard-edge segments using the full Country palette
   (terracotta dust · ink · ochre · earth-red · ochre · coolibah green).
   Replaces the previous hairline below .mast. ---------- */
/* Country bar: the seven-colour chord repeats at a fixed rhythm instead
   of stretching. One full chord up to 900px (unchanged on phones); two
   chords on ordinary desktops; three on very wide monitors. Segment
   width stays near the flyer scale (~65-140px) at every size, so the
   whole colour combination lands in a single glance. Markup unchanged;
   the child divs are retired below.
   Order 8 (27 July 2026): mulla mulla lilac joins the palette as the
   seventh Country colour, so the repeated yellow ochre is retired and
   every stripe is now unique. The sequence was chosen for boundary
   contrast: adjacent pairs differ strongly in lightness, blue and green
   are held apart, and the lilac is lit by terracotta on one side and
   given a firm warm edge by earth red on the other. Depth 6px to 7px. */
.country-bar {
  height: 8px;   /* eight colours, eight pixels, since 5 August 2026;
                    seven-at-seven before copper green joined. */
  width: 100%;
  /* Eight colours since 5 August 2026: copper green joined the palette
     (malachite and chrysocolla in the copper-bearing rock of Pimurra).
     This order was solved for maximum adjacent distinctness: every seam
     measures CIEDE2000 39.8 or better, including the wrap where the bar
     repeats. Do not reorder casually; the sequence is load-bearing. */
  background-image: linear-gradient(90deg,
    #6b7d5a 0 12.5%,      /* coolibah green */
    #9a6b94 0 25%,        /* mulla mulla lilac */
    #1a1410 0 37.5%,      /* deep ink */
    #c8881f 0 50%,        /* yellow ochre */
    #4d6290 0 62.5%,      /* Cloncurry River blue */
    #e8c4a8 0 75%,        /* terracotta dust */
    #3f716b 0 87.5%,      /* copper green */
    #8b2f1a 0 100%);      /* earth red */
  background-size: 100% 100%;
  background-repeat: repeat-x;
}
.country-bar > div { display: none; }
@media (min-width: 901px)  { .country-bar { background-size: 50% 100%; } }
@media (min-width: 1401px) { .country-bar { background-size: calc(100% / 3) 100%; } }
@media (min-width: 2000px) { .country-bar { background-size: 25% 100%; } }
/* Footer variant: same 8-segment bar, sits as a full-width row inside the
   footer flexbox between the copyright/flag rows and the link row.
   Mirrors the top bar (under the mast) so the page reads as framed. */
.country-bar--footer {
  flex-basis: 100%;
  margin-top: 12px;
}
.mast-mark {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-align: center;
}
.mast-mark a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mast-silhouette {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}
.mast-wordmark {
  display: inline-block;
}

/* Home-page tagline under the silhouette+wordmark cluster — appears only on index.html */
.mast-tagline {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink-mute);
  margin-top: 4px;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: center;
}
.mast-meta {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

/* ---------- Primary nav ---------- */
.mast-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
  align-items: baseline;
}
.mast-nav a {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.mast-nav a:hover,
.mast-nav a:focus-visible {
  color: var(--earth);
  border-bottom-color: var(--earth);
  outline: none;
}
.mast-nav a[aria-current="page"] {
  color: var(--earth);
  border-bottom-color: var(--ochre);
}

/* ---------- Hamburger toggle (mobile only) ---------- */
.mast-nav-toggle {
  display: none; /* hidden on desktop */
  background: transparent;
  border: none;
  padding: 8px;
  margin: -8px; /* hit area expanded beyond visual */
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
}
.mast-nav-toggle:focus-visible {
  outline: 2px solid var(--earth);
  outline-offset: 2px;
  border-radius: 2px;
}
.mast-nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink-soft);
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}
.mast-nav-toggle[aria-expanded="true"] .mast-nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mast-nav-toggle[aria-expanded="true"] .mast-nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.mast-nav-toggle[aria-expanded="true"] .mast-nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 36px 32px 32px;
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1.15fr;
  gap: 56px;
  align-items: start;
}

.portrait-wrap {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s forwards;
}
.portrait {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(26, 20, 16, 0.15));
}
.portrait-caption {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--ochre);
  line-height: 1.5;
}

.hero-text {
  opacity: 0;
  transform: translateY(20px);
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s forwards;
}

/* Kicker with flanking rules.
   display: flex, not inline-flex. An inline-flex box shrinks to its
   contents and sits wherever the line begins, so it only appears
   centred when its parent happens to carry text-align: center. That
   held on the head blocks but not on the contact page, where the
   kicker shares a container with the form and so sat hard left.
   Block-level flex fills the width and centres its own contents, so
   the kicker is centred wherever it is placed. */
.kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--earth);
  font-weight: 600;
  margin-bottom: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.kicker::before,
.kicker::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--earth);
  display: inline-block;
}

h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 28px;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
h1 em {
  font-style: italic;
  color: var(--earth);
  font-weight: 400;
}

.standfirst {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: 26px;
}
.standfirst strong {
  font-weight: 500;
  color: var(--ink);
}

/* ----------------------------------------------------------
   "Read his story" call-to-action box — design element below standfirst.
   Pale earth-red wash on the cream page bg, earth-red left border bar,
   padded interior, lead-in sentence + Learn more link stacked inside.
   Extends to fill available column width so the sentence sits on one line. */
.standfirst-cta {
  margin: 0 0 32px;
  max-width: 70ch;
  background: #e9dace;            /* earth-red ~10% mix with cream page bg */
  border-left: 3px solid var(--earth);
  border-radius: 0 4px 4px 0;
  padding: 16px 20px 18px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.standfirst-cta br {
  /* Gap between the lead-in sentence and the link */
  display: block;
  content: "";
  margin-top: 14px;
}
.standfirst-link {
  color: var(--earth);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.18s ease;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.standfirst-link-text {
  border-bottom: 1px solid var(--earth);
  padding-bottom: 1px;
  transition: border-color 0.18s ease;
}
.standfirst-link:hover,
.standfirst-link:focus-visible {
  color: var(--accent);
}
.standfirst-link:hover .standfirst-link-text,
.standfirst-link:focus-visible .standfirst-link-text {
  border-bottom-color: var(--accent);
}
.standfirst-link-arrow {
  transition: transform 0.2s ease;
  display: inline-block;
}
.standfirst-link:hover .standfirst-link-arrow,
.standfirst-link:focus-visible .standfirst-link-arrow {
  transform: translateX(3px);
}

/* Pillars row */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-warm);
  border-bottom: 1px solid var(--rule-warm);
  margin-bottom: 24px;
}
.pillar {
  padding: 22px 20px 22px 0;
  border-right: 1px solid var(--rule);
}
.pillar:last-child { border-right: none; padding-right: 0; }
.pillar:not(:first-child) { padding-left: 20px; }

.pillar-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--ochre);
  display: block;
  margin-bottom: 4px;
}
.pillar-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.pillar-body {
  font-size: 0.85rem;
  color: var(--ink-mute);
  line-height: 1.45;
}

/* Status line */
.status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 16px;
}
.status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}
.status .dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.8); opacity: 0; }
}

.contact-block {
  padding-top: 8px;
}
.contact-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 10px;
}
.contact-line {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.contact-line a {
  color: var(--earth);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
  cursor: pointer;
}
.contact-line a:hover { border-color: var(--earth); }

/* ---------- Article (longread bio + future Yarns) ---------- */
.article {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}
.article-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s forwards;
}
.article-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--earth);
  font-weight: 600;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.article-kicker::before,
.article-kicker::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--earth);
  display: inline-block;
}
.article h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 22px;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

/* Report page headings.
   Report titles are sentences, not labels, so they run longer than
   the headings on other pages. Two adjustments keep them on one
   line without shrinking them below the rest of the site:
     - the same 3.4rem ceiling already used by .shine-head and
       .resources-head, so report headings match the tuned pages
       rather than sitting at the larger .article default
     - a wider measure for the head block only. The lede keeps its
       own 42em measure, so reading width is unaffected.
   text-wrap: balance is the safety net: where a title is long
   enough to wrap anyway, on a phone or in future, it splits into
   even lines instead of stranding a single word. */
.report .article-head {
  max-width: 920px;
}
.report .article-head h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  text-wrap: balance;
}
.article-byline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.article-source {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}

/* Hero portrait at top of article */
.article-hero {
  max-width: 720px;
  margin: 0 auto 56px;
  opacity: 0;
  transform: translateY(20px);
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s forwards;
}
/* Hero photographs are capped by HEIGHT, not width. A 720px-wide rule
   treats a 2:3 portrait and a near-square the same, and they are not:
   Uncle-Bill-The-Man is 1024x1536, so at 480px wide it stood 720px tall,
   while the near-square hero beside it stood 526px. Same rule, 194px
   apart, and the taller one fell below the fold.
   Capping height gives every hero the same vertical presence and lets
   the width follow the picture. Landscape heroes are unaffected, since
   they never reach the cap. */
.article-hero img {
  width: auto;
  max-width: 100%;
  max-height: var(--hero-max-h, 520px);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 16px 32px rgba(26, 20, 16, 0.18));
}
@media (max-width: 700px) {
  .article-hero img { max-height: 62vh; }
}
.article-hero figcaption {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--ochre);
  line-height: 1.5;
  max-width: 540px;
}

/* Reading column */
.article-body {
  max-width: 680px;
  margin: 0 auto;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 14, "SOFT" 50;
}
.article-body p {
  margin-bottom: 1.4em;
}
.article-body p:first-of-type::first-letter {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 4.4em;
  float: left;
  line-height: 0.88;
  margin: 0.08em 0.12em -0.1em 0;
  color: var(--earth);
  font-variation-settings: "opsz" 144, "SOFT" 0;
}

/* In-text figures (photos within or beside the reading column) */
.article-body figure {
  margin: 56px auto;
  max-width: 1180px;
}
.article-body figure img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(26, 20, 16, 0.15));
}
.article-body figure.fig-narrow {
  max-width: 720px;
}
.article-body figure.fig-wide {
  /* full editorial container width */
  max-width: 1180px;
}
.article-body figcaption {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--ochre);
  max-width: 540px;
}
.article-body figcaption .credit {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  opacity: 0.8;
}

/* Section ornament between major thematic shifts */
.article-body .ornament {
  text-align: center;
  font-family: 'Fraunces', serif;
  color: var(--ochre);
  font-size: 1.4rem;
  letter-spacing: 1.2em;
  margin: 56px 0 56px 1.2em; /* offset for letter-spacing */
  opacity: 0.7;
}

/* Closing tail line (single line, e.g., congregation note) */
.article-tail {
  max-width: 680px;
  margin: 64px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--rule-warm);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mute);
  line-height: 1.5;
  text-align: center;
}

/* End-of-article ornament: silhouette flanked by hairlines (editorial close mark) */
.article-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 72px auto 40px;
  max-width: 360px;
  clear: both;  /* dismiss any float inheritance from the dropcap above */
}
.article-end-rule {
  flex: 1 1 0;
  min-width: 40px;
  height: 1px;
  background: var(--rule);
  display: block;
}
.article-end-mark {
  width: 32px;
  height: 32px;
  display: block;
  flex: 0 0 32px;
}

/* ---------- Placeholder pages (coming-soon) ---------- */
.placeholder {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 32px 80px;
  text-align: center;
}
.placeholder-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 32px;
}
.placeholder-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}
.placeholder-status .dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: pulse 2.4s ease-in-out infinite;
}
.placeholder h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 28px;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.placeholder h1 em {
  font-style: italic;
  color: var(--earth);
}
.placeholder-lede {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 auto 24px;
  max-width: 56ch;
}
.placeholder-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 auto 40px;
  max-width: 56ch;
  text-align: left;
}
.placeholder-body p {
  margin-bottom: 1em;
}

/* ---------- Resources page ---------- */
.resources {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 32px 64px;
}
.resources-head {
  text-align: center;
  margin-bottom: 56px;
}
.resources-head .kicker {
  margin-bottom: 20px;
}
.resources-head h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.resources-head h1 em {
  font-style: italic;
  color: var(--earth);
}
.resources-lede {
  font-family: 'Fraunces', serif;
  font-size: 1.28rem;
  line-height: 1.6;
  letter-spacing: 0.012em;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto;
}
.resources-section {
  margin-top: 56px;
  padding-top: 0;
  border-top: 1px solid var(--rule-warm);
}
.resources-section:first-of-type {
  margin-top: 32px;
  padding-top: 0;
  border-top: none;
}

/* ====================================================================
   "Where to watch" navigation note — between jump-to and first accordion
   ==================================================================== */
.watch-note {
  max-width: 720px;
  margin: 0 auto 20px;
  padding: 0 24px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-mute);
  text-align: center;
}
.watch-note a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--earth);
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.watch-note a:hover,
.watch-note a:focus-visible {
  color: var(--earth);
}

/* ====================================================================
   ACCORDION SECTIONS — collapsible <details>/<summary> structure
   Each section has thumbnail + title + sub-line + chevron in the head
   ==================================================================== */
.resources-accordion {
  width: 100%;
}
.resources-accordion[open] {
  /* When open, no special change needed — body just appears */
}
.resources-accordion-head {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 28px;
  cursor: pointer;
  background: var(--bg);
  list-style: none;
  transition: background 220ms ease;
}
.resources-accordion-head::-webkit-details-marker {
  display: none;
}
.resources-accordion-head:focus-visible {
  outline: 2px solid var(--earth);
  outline-offset: 2px;
}

/* ---- Per-section accordion tints (derived from Country Colours) ---- */
/* Closed (rest):  base cream + 14% target colour */
/* Open:           base cream + 16% target colour */
/* Hover (closed): base cream + 18% target colour */
/* Allyship intentionally uses a neutral warm taupe (outside the Country
   palette) — allyship is the outsider's relationship to country, so its
   visual register is set apart from the place-derived colours. */

#understand-country .resources-accordion-head        { background: #d9d3bf; }
#understand-country .resources-accordion-head:hover  { background: #d4cfbb; }
#understand-country .resources-accordion[open] .resources-accordion-head { background: #d7d1bd; }

#learn-history .resources-accordion-head        { background: #dec8b7; }
#learn-history .resources-accordion-head:hover  { background: #dac1af; }
#learn-history .resources-accordion[open] .resources-accordion-head { background: #dcc5b3; }

#first-nations-voices .resources-accordion-head        { background: #e6d5b7; }
#first-nations-voices .resources-accordion-head:hover  { background: #e5d1b0; }
#first-nations-voices .resources-accordion[open] .resources-accordion-head { background: #e5d3b4; }

#allyship .resources-accordion-head        { background: #e2d7c6; }
#allyship .resources-accordion-head:hover  { background: #dfd4c3; }
#allyship .resources-accordion[open] .resources-accordion-head { background: #e0d6c5; }

/* Watch (V) returns to the green tint of Country (I) — closing the loop:
   the curated films are largely about Country, told on screen.
   The page begins and ends in the same colour. */
#watch .resources-accordion-head        { background: #d9d3bf; }
#watch .resources-accordion-head:hover  { background: #d4cfbb; }
#watch .resources-accordion[open] .resources-accordion-head { background: #d7d1bd; }
.resources-accordion-thumb {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border: 2px solid var(--earth);
  flex-shrink: 0;
  display: block;
}
.resources-accordion-titles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.resources-accordion-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.resources-accordion-sub {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-mute);
}
.resources-accordion-chevron {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--earth);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--earth);
  border-radius: 50%;
  transition: transform 240ms ease, background 240ms ease, color 240ms ease;
}
.resources-accordion[open] .resources-accordion-chevron {
  transform: rotate(45deg);
  background: var(--earth);
  color: var(--bg);
}
.resources-accordion-body {
  padding: 24px 28px 32px;
}

@media (max-width: 720px) {
  .resources-accordion-head {
    gap: 14px;
    padding: 16px 18px;
  }
  .resources-accordion-thumb {
    width: 64px;
    height: 64px;
  }
  .resources-accordion-title {
    font-size: 1.05rem;
  }
  .resources-accordion-sub {
    font-size: 0.85rem;
  }
  .resources-accordion-chevron {
    width: 26px;
    height: 26px;
    font-size: 1.3rem;
  }
  .resources-accordion-body {
    padding: 18px 18px 28px;
  }
}

/* ====================================================================
   RESOURCE FIGURE — wide-format image inside a resource entry
   (currently used for Dundalli sketch + plaque composite)
   ==================================================================== */
.resource--with-figure {
  /* container; figure flows above text */
}
.resource-figure {
  margin: 0 0 18px;
  max-width: 560px;
}
.resource-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule-warm);
}
.resource-figure figcaption {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--rule-warm);
}

.resources-section-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
}
.resources-section-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--earth);
  margin-right: 10px;
}

/* ====================================================================
   JUMP-TO STRIP — visual table of contents at top of Resources
   Squares for content sections; bordered portrait-row for Shine destination
   ==================================================================== */
.resources-jumpto {
  max-width: 1080px;
  margin: 28px auto 24px;
  padding: 0 24px;
}
.resources-jumpto-list {
  list-style: none;
  margin: 0;
  padding: 24px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  border-bottom: 1px solid var(--rule-warm);
}
.resources-jumpto-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 220ms ease;
}
.resources-jumpto-item a:hover,
.resources-jumpto-item a:focus-visible {
  transform: translateY(-2px);
  outline: none;
}
.resources-jumpto-thumb {
  display: block;
  overflow: hidden;
  background: var(--bg-deep);
  position: relative;
}
.resources-jumpto-thumb--square {
  width: clamp(96px, 12vw, 140px);
  height: clamp(96px, 12vw, 140px);
  border: 2px solid var(--earth);
}
.resources-jumpto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%);
  transition: filter 280ms ease, transform 320ms ease;
}
.resources-jumpto-item a:hover .resources-jumpto-thumb img,
.resources-jumpto-item a:focus-visible .resources-jumpto-thumb img {
  filter: grayscale(0%);
  transform: scale(1.04);
}
.resources-jumpto-label {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}
.resources-jumpto-item a:hover .resources-jumpto-label,
.resources-jumpto-item a:focus-visible .resources-jumpto-label {
  color: var(--earth);
}

/* Shine destination: 5 portraits in a bordered container, sized to balance against larger squares */
.resources-jumpto-item--shine a {
  gap: 10px;
}
.resources-jumpto-portraits {
  display: flex;
  align-items: center;
  gap: 2px;
  height: clamp(96px, 12vw, 140px);
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--earth);
  box-shadow: 0 2px 8px rgba(139, 47, 26, 0.08);
  transition: box-shadow 240ms ease, transform 240ms ease;
}
.resources-jumpto-item--shine a:hover .resources-jumpto-portraits,
.resources-jumpto-item--shine a:focus-visible .resources-jumpto-portraits {
  box-shadow: 0 4px 14px rgba(139, 47, 26, 0.18);
}
.resources-jumpto-portrait {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--earth);
  background: var(--bg-deep);
  filter: grayscale(15%);
  transition: filter 280ms ease;
}
.resources-jumpto-item--shine a:hover .resources-jumpto-portrait,
.resources-jumpto-item--shine a:focus-visible .resources-jumpto-portrait {
  filter: grayscale(0%);
}
.resources-jumpto-label--shine {
  color: var(--earth);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .resources-jumpto-portrait {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 720px) {
  .resources-jumpto-list {
    gap: 18px;
    padding: 18px 0;
  }
  .resources-jumpto-thumb--square {
    width: 76px;
    height: 76px;
  }
  .resources-jumpto-portraits {
    height: 76px;
    gap: 3px;
    padding: 4px 6px;
  }
  .resources-jumpto-portrait {
    width: 50px;
    height: 50px;
  }
  .resources-jumpto-item--shine {
    width: 100%;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--rule-warm);
  }
  .resources-jumpto-label {
    font-size: 0.68rem;
  }
}

/* ====================================================================
   CULTURAL ADVISORY — top-of-page warning, larger and more visible
   Banner treatment: silhouette centred above text, text centred below
   ==================================================================== */
.cultural-advisory {
  max-width: 760px;
  margin: 24px auto 32px;
  padding: 22px 28px;
  background: var(--bg-deep);
  border-top: 2px solid var(--earth);
  border-bottom: 2px solid var(--earth);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.cultural-advisory-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}
.cultural-advisory p {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
@media (max-width: 720px) {
  .cultural-advisory {
    padding: 18px 20px;
    gap: 10px;
    margin: 18px 16px 24px;
  }
  .cultural-advisory-mark {
    width: 28px;
    height: 28px;
  }
  .cultural-advisory p {
    font-size: 0.92rem;
  }
}

/* ====================================================================
   BACK-TO-TOP BUTTON — appears on scroll past 600px
   ==================================================================== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--earth);
  color: var(--bg);
  border-radius: 50%;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 2px 12px rgba(26, 20, 16, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 240ms ease, visibility 240ms ease, transform 240ms ease, background 200ms ease;
  z-index: 50;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--ink);
  color: var(--bg);
  outline: none;
}
@media (max-width: 720px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

.resources-section-intro {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-bottom: 30px;
  max-width: 62ch;
}
.resources-subsection-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--earth);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 34px;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-warm);
}
.resources-subsection-title:first-of-type {
  margin-top: 10px;
}
.resources-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.resource {
  margin-bottom: 32px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--rule);
}
.resource:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.resource-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.14rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.resource-title a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--earth);
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.resource-title a:hover,
.resource-title a:focus-visible {
  color: var(--earth);
}
.resource-desc {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.resource-note {
  font-family: 'Fraunces', serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--rule-warm);
}
.resource-note em {
  font-style: italic;
}
.resource-note a,
.resource-desc a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--earth);
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.resource-note a:hover,
.resource-note a:focus-visible,
.resource-desc a:hover,
.resource-desc a:focus-visible {
  color: var(--earth);
}

/* ====================================================================
   WATCH LINKS — for Section V video entries: Trailer · Watch on platform
   ==================================================================== */
.resource-watch-links {
  font-family: 'Fraunces', serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.resource-watch-links a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--earth);
  padding-bottom: 1px;
  transition: color 0.2s ease;
  font-weight: 500;
}
.resource-watch-links a:hover,
.resource-watch-links a:focus-visible {
  color: var(--earth);
}
.watch-link-sep {
  color: var(--rule-warm);
  margin: 0 8px;
  font-weight: 700;
}

/* ====================================================================
   SHINE INVITATION — editorial module on Resources & Yarning Circles
   promoting the "These Shine" page
   ==================================================================== */
.shine-invitation {
  max-width: var(--max-w);
  margin: 64px auto 56px;
  padding: 0 32px;
}
.shine-invitation-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 48px 36px;
  background: var(--bg-deep);
  border-top: 2px solid var(--earth);
  border-bottom: 2px solid var(--earth);
  text-align: center;
  position: relative;
}
.shine-invitation-mark {
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto 14px;
}
.shine-invitation-lyric {
  margin: 0 0 14px;
  padding: 0;
  border: none;
}
.shine-invitation-lyric p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 8px;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}
.shine-invitation-lyric footer {
  /* Override global page-footer rule: this sits inside the blockquote */
  display: block;
  position: static;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  flex: none;
  justify-content: initial;
  gap: 0;
  flex-wrap: initial;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  line-height: 1.4;
}
.shine-invitation-heading {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.1rem);
  color: var(--ink);
  margin: 18px 0 18px;
  line-height: 1.1;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.shine-invitation-heading em {
  font-style: italic;
  color: var(--earth);
}
.shine-invitation-portraits {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto 14px;
  flex-wrap: wrap;
  max-width: 580px;
}
.shine-invitation-portrait {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--earth);
  background: var(--bg);
  filter: grayscale(20%);
  transition: filter 280ms ease, transform 280ms ease;
}
.shine-invitation:hover .shine-invitation-portrait {
  filter: grayscale(0%);
}
.shine-invitation-advisory {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.shine-invitation-prose {
  max-width: 520px;
  margin: 0 auto 32px;
}
.shine-invitation-prose p {
  font-family: 'Fraunces', serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.shine-invitation-prose p:last-child {
  margin-bottom: 0;
}

/* ====================================================================
   ELDER QUOTE — reusable callout for setting forth Elder voices
   .elder-quote                — base (any voice)
   .elder-quote--bill          — adds Uncle Bill silhouette mark
   .elder-quote--left          — left-aligned text instead of centered
   ==================================================================== */
.elder-quote {
  margin: 28px auto 28px;
  max-width: 540px;
  padding: 26px 32px 22px;
  background: var(--bg);
  border-left: 3px solid var(--earth);
  box-shadow: 0 2px 10px rgba(26, 20, 16, 0.06);
  text-align: center;
}
.elder-quote blockquote {
  margin: 0;
  padding: 0;
  border: none;
}
.elder-quote blockquote p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 18px;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}
.elder-quote blockquote p:last-child {
  margin-bottom: 18px;
}
.elder-quote figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Fraunces', serif;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--earth);
  font-weight: 500;
}
.elder-quote-mark {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}
.elder-quote-name {
  letter-spacing: 0.08em;
}

/* Variant: silhouette only appears for bill-attributed quotes */
.elder-quote:not(.elder-quote--bill) .elder-quote-mark {
  display: none;
}

/* Variant: left-aligned text for longer or more substantive quotes */
.elder-quote--left {
  text-align: left;
}
.elder-quote--left figcaption {
  justify-content: flex-start;
}

@media (max-width: 720px) {
  .elder-quote {
    padding: 22px 24px 18px;
    margin: 22px auto;
  }
  .elder-quote blockquote p {
    font-size: 1rem;
  }
  .elder-quote figcaption {
    font-size: 0.85rem;
  }
}

.shine-invitation-cta {
  margin: 0;
}
.shine-invitation-button {
  display: inline-block;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--earth);
  padding: 14px 32px;
  text-decoration: none;
  border: 2px solid var(--earth);
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.shine-invitation-button:hover,
.shine-invitation-button:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .shine-invitation-inner {
    padding: 36px 24px 32px;
  }
  .shine-invitation-portrait {
    width: 62px;
    height: 62px;
  }
  .shine-invitation-portraits {
    gap: 8px;
  }
  .shine-invitation-lyric p {
    font-size: 1.15rem;
  }
}

/* ---------- Email capture form ---------- */
.signup {
  max-width: 520px;
  margin: 48px auto 0;
  padding: 32px;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  text-align: left;
}
.signup-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.signup-intro {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 22px;
}
.signup label.field-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: 8px;
}
.signup input[type="email"],
.signup input[type="text"],
.signup textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color 0.2s;
}
.signup textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  margin-bottom: 6px;
}
.signup input[type="email"]:focus,
.signup input[type="text"]:focus,
.signup textarea:focus {
  outline: none;
  border-color: var(--earth);
}
.signup .field-label + textarea {
  margin-top: 0;
}
/* Spacing between the message field-label and the field above */
.signup-checks + .field-label {
  display: block;
  margin-top: 18px;
}
.signup-honeypot {
  /* Hidden bot trap — must be visually hidden but not display:none */
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.signup-checks {
  margin: 18px 0 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.signup-checks label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.45;
  cursor: pointer;
}
.signup-checks input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--earth);
  flex-shrink: 0;
}
.signup button {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--bg);
  background: var(--ink);
  border: none;
  padding: 14px 24px;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
}
.signup button:hover,
.signup button:focus-visible {
  background: var(--earth);
  outline: none;
}
.signup button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.signup-privacy {
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.5;
  margin-top: 16px;
}
.signup-privacy a {
  color: var(--earth);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.signup-privacy a:hover { border-bottom-color: var(--earth); }
.signup-message {
  margin-top: 16px;
  padding: 12px 16px;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  line-height: 1.5;
  display: none;
}
.signup-message.is-success {
  display: block;
  background: rgba(31, 77, 58, 0.08);
  color: var(--accent);
  border-left: 3px solid var(--accent);
}
.signup-message.is-error {
  display: block;
  background: rgba(139, 47, 26, 0.08);
  color: var(--earth);
  border-left: 3px solid var(--earth);
}
.signup-thanks {
  display: none;
  text-align: center;
  padding: 32px 0 24px;
}
.signup-thanks.is-visible { display: block; }
.signup-thanks-silhouette {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  opacity: 0.9;
}
.signup-thanks-title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.signup-thanks-body {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
}

/* ---------- Privacy page (text-heavy, narrower than article) ---------- */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}
.legal h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 16px;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.legal h1 em {
  font-style: italic;
  color: var(--earth);
}
.legal-meta {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mute);
  font-weight: 400;
  text-align: center;
  margin-bottom: 36px;
  letter-spacing: 0;
  text-transform: none;
}
.legal h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--ink);
  margin: 36px 0 14px;
  letter-spacing: -0.01em;
}
.legal p, .legal li {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 1em;
}
.legal ul {
  margin: 0 0 1.2em 1.2em;
  padding: 0;
}
.legal a {
  color: var(--earth);
  text-decoration: none;
  border-bottom: 1px solid var(--earth);
}
.legal a:hover { border-bottom-width: 2px; }

/* ====================================================================
   COLOURS FROM COUNTRY — small editorial documentation page
   showing the place-derivation of each core colour
   ==================================================================== */
.colours-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}
.colours-head {
  margin-bottom: 56px;
  text-align: center;
}
.colours-head .kicker {
  font-family: 'Fraunces', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--earth);
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.colours-head .kicker::before,
.colours-head .kicker::after {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--rule-warm);
}
.colours-head h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 22px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.colours-head h1 em {
  font-style: italic;
  color: var(--earth);
}
.colours-lede {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto;
}
.colours-stack {
  margin: 0;
}
.colour-entry {
  margin-bottom: 64px;
  padding-bottom: 0;
}
.colour-entry:last-child {
  margin-bottom: 0;
}
.colour-image {
  margin: 0 0 0;
  padding: 0;
}
.colour-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-deep);
}
.colour-swatch {
  height: 28px;
  width: 100%;
  display: block;
  margin-top: 6px;
  border: 1px solid var(--rule-warm);
  box-sizing: border-box;
}
.colour-caption {
  font-family: 'Fraunces', serif;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 18px 0 6px;
}
.colour-caption strong {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--ink);
  font-style: normal;
}
.colour-hex {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin: 0;
  text-transform: uppercase;
  font-weight: 500;
}
.colours-coda {
  margin: 64px auto 0;
  max-width: 56ch;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
  padding-top: 36px;
  border-top: 1px solid var(--rule-warm);
}

@media (max-width: 720px) {
  .colours-page {
    padding: 36px 20px 56px;
  }
  .colours-head {
    margin-bottom: 40px;
  }
  .colours-lede {
    font-size: 1.05rem;
  }
  .colour-entry {
    margin-bottom: 48px;
  }
  .colour-caption {
    font-size: 0.98rem;
  }
}

/* ---------- Footer (extended) ---------- */
footer {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 40px auto 0;
  padding: 28px 32px 40px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.6;
}
footer p { max-width: 60ch; }
footer strong { color: var(--ink-soft); font-weight: 500; }
.copyright-mark { color: var(--earth); }
.footer-links {
  flex-basis: 100%;
  margin-top: 12px;
  padding-top: 10px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.footer-links a {
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.footer-links a:hover {
  color: var(--earth);
  border-bottom-color: var(--earth);
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ====================================================================
   THESE SHINE — First Nations Australians of distinction
   Layout register: editorial, biographical, restrained.
   Each person treated as a person to be read about, not a tile.
   ==================================================================== */
.shine {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 32px 80px;
}

/* ---- Header ---- */
.shine-head {
  text-align: center;
  margin-bottom: 56px;
}
.shine-head .kicker {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--earth);
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.shine-head .kicker::before,
.shine-head .kicker::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--earth);
  opacity: 0.7;
}
.shine-head h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 32px;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.shine-head h1 em {
  font-style: italic;
  color: var(--earth);
}

/* Lyric — set as a small editorial epigraph */
.shine-head-lyric {
  margin: 0 auto 36px;
  max-width: 44ch;
}
.shine-head-lyric p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.shine-head-lyric footer {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  /* Reset global footer rule that adds border-top, margins, padding */
  border: none;
  margin: 0;
  padding: 0;
  display: block;
  max-width: none;
  background: none;
}

/* Category jump pills. Same treatment as the calendar page's jump
   nav, wrapping to as many rows as it needs. .is-target is set by
   the page script to mark the category currently open. */
.shine-jumpnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 680px;
  margin: 26px auto 0;
}
/* A zero-height full-width flex item forces a row break, so the nine
   pills sit 4 then 5 rather than wrapping wherever they happen to
   run out of room. Measured, the two rows come to about 456px and
   576px. It is switched off on narrow screens, where natural
   wrapping is the only sensible behaviour. */
/* Beyond Categories sits below the pills rather than among them.
   It is a coda, not a ninth category, and it leaves the other eight
   to fall into two even rows of four. Set quieter than a pill, but
   given a line of its own, which is more emphasis than a pill and
   not less. */
.shine-jumpnav-coda {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mute);
  text-align: center;
  margin: 12px auto 0;
}
.shine-jumpnav-coda a {
  color: var(--earth);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-style: italic;
}
.shine-jumpnav-coda a:hover,
.shine-jumpnav-coda a:focus-visible { color: var(--accent); }

.shine-jumpnav-break {
  flex: 0 0 100%;
  height: 0;
  margin: 0;
}

.shine-jumpnav a {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--earth);
  background: var(--bg-deep);
  border: 1px solid var(--rule-warm);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.shine-jumpnav a:hover,
.shine-jumpnav a:focus-visible,
.shine-jumpnav a.is-target {
  background: var(--earth);
  color: var(--bg);
  border-color: var(--earth);
}

/* Uncle Bill quote — card-on-paper treatment */
.shine-head-prose {
  background: #fdfaf3;
  border-left: 3px solid var(--earth);
  border-radius: 2px;
  padding: 28px 32px;
  margin: 0 auto 36px;
  /* 68ch, not 56ch. At the narrower measure this quote ran to seven
     lines and pushed the categories well down the page. Still inside
     the comfortable range for a short passage. */
  max-width: 68ch;
  text-align: left;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -16px rgba(60,40,20,0.18);
}
.shine-head-quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.shine-head-sign {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--earth);
  font-weight: 600;
  margin: 0;
  text-align: right;
}

/* Advisory — standard cultural-advisory bar */
.shine-head-advisory {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto;
  padding: 16px 24px;
  border-top: 1px solid var(--rule-warm);
  border-bottom: 1px solid var(--rule-warm);
  text-align: center;
}
.shine-head-advisory strong {
  font-style: normal;
  font-weight: 600;
  color: var(--earth);
  letter-spacing: 0.04em;
}

/* ---- Body container ---- */
.shine-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ====================================================================
   CATEGORY ACCORDION — collapsible <details>/<summary>
   Mirrors the Resources accordion pattern but lighter (no thumbnail,
   reduced padding). Per-family background tinting.
   ==================================================================== */
.shine-cat {
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow 220ms ease;
}
.shine-cat[open] {
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 32px -22px rgba(60,40,20,0.15);
}
.shine-cat-summary {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
  transition: background 220ms ease;
}
.shine-cat-summary::-webkit-details-marker {
  display: none;
}
.shine-cat-summary:focus-visible {
  outline: 2px solid var(--earth);
  outline-offset: 2px;
}

/* Per-family tints — closed (rest), hover (closed), and open
   Four-family rotation cycles through earth → ochre → green → terracotta
   so no two adjacent categories share a tint. Earth bookends the page. */

/* EARTH family — iron-rich red of the Selwyn Range
   Categories: Historians & Scholars, Screen Artists, Beyond Categories */
.shine-cat-earth .shine-cat-summary               { background: #ead4ca; }
.shine-cat-earth .shine-cat-summary:hover         { background: #e6cdc1; }
.shine-cat-earth[open] .shine-cat-summary         { background: #e8d1c6; }
.shine-cat-earth .shine-cat-body                  { background: #f3e6df; }

/* OCHRE family — inland sun on dry grass
   Categories: Writers, Athletes */
.shine-cat-ochre .shine-cat-summary               { background: #ecd9b4; }
.shine-cat-ochre .shine-cat-summary:hover         { background: #ebd5ab; }
.shine-cat-ochre[open] .shine-cat-summary         { background: #ecd7af; }
.shine-cat-ochre .shine-cat-body                  { background: #f3e7ce; }

/* GREEN family — coolibah and river red gum
   Categories: Musicians, Politicians */
.shine-cat-green .shine-cat-summary               { background: #d6dcc8; }
.shine-cat-green .shine-cat-summary:hover         { background: #d0d6c0; }
.shine-cat-green[open] .shine-cat-summary         { background: #d3d9c4; }
.shine-cat-green .shine-cat-body                  { background: #e3e6d6; }

/* TERRACOTTA family — earth red after wind and time, the dust note
   Categories: Painters, Leaders in Public Life & Reconciliation */
.shine-cat-terracotta .shine-cat-summary          { background: #e8c4a8; }
.shine-cat-terracotta .shine-cat-summary:hover    { background: #e2bb9c; }
.shine-cat-terracotta[open] .shine-cat-summary    { background: #e5bfa1; }
.shine-cat-terracotta .shine-cat-body             { background: #f1d4ba; }

.shine-cat-name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
  flex-shrink: 0;
  min-width: 200px;
}
.shine-cat-tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink-mute);
  flex: 1;
  min-width: 0;
}
.shine-cat-chevron {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--earth);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--earth);
  border-radius: 50%;
  transition: transform 240ms ease, background 240ms ease, color 240ms ease;
  align-self: center;
}
.shine-cat[open] .shine-cat-chevron {
  transform: rotate(45deg);
  background: var(--earth);
  color: var(--bg);
}
.shine-cat-body {
  padding: 8px 28px 36px;
}

/* ====================================================================
   PERSON CARD — biographical entry, stacked vertically
   Portrait left + body right on desktop; portrait above body on mobile.
   Each person separated by terracotta hairline.
   ==================================================================== */
.shine-person {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-top: 1px solid var(--rule-warm);
}
.shine-person:first-child {
  border-top: none;
  padding-top: 18px;
}
.shine-person-portrait {
  width: 200px;
}
.shine-person-portrait img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 2px solid var(--earth);
  background: var(--bg-deep);
}
.shine-person-body {
  min-width: 0;
}
.shine-person-name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 72, "SOFT" 50;
  margin: 0 0 6px;
}
.shine-person-dates {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--ink-mute);
  letter-spacing: 0;
}
.shine-person-nation {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-weight: 500;
  margin: 0 0 14px;
}
.shine-person-nation em {
  font-style: italic;
  color: var(--earth);
  font-weight: 500;
  letter-spacing: 0;
}
.shine-person-body p {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 0.9em;
}
.shine-person-body p:last-child {
  margin-bottom: 0;
}
.shine-person-quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 2px solid var(--earth);
  padding: 4px 0 4px 16px;
  margin: 14px 0 0;
}

/* ====================================================================
   CLOSING + IMAGE CREDITS
   ==================================================================== */
.shine-closing {
  text-align: center;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--rule-warm);
}
.shine-closing-mark {
  width: 56px;
  height: auto;
  display: inline-block;
  opacity: 0.85;
  margin-bottom: 16px;
}
.shine-closing-line {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.shine-closing-line em {
  font-style: italic;
  color: var(--earth);
}
.shine-image-credits {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-mute);
  font-style: italic;
  margin-top: 1em;
}

/* ---------- Home page: tint backgrounds on the three pillar cells ----------
   Adds palette-derived tints to each cell on .hero so the work areas read
   distinctly. Tints are chosen to sit on the cream page bg (#f4ede2):
     1 (Truth-Telling)   — earth-red, ~18% mix
     2 (Yarning Circles) — ochre, ~25% mix
     3 (Community)       — coolibah-green, ~25% mix
   The tints sit on the existing pillar structure without restructuring it.
   We equalise per-cell padding so text breathes from now-visible cell edges,
   remove borders, and use a small grid gap so the cream page background
   shows between cells as the separator. */
.hero .pillars {
  border-top: none;
  border-bottom: none;
  gap: 8px;
}
.hero .pillars > .pillar {
  padding: 22px 20px !important;
  border-right: none;
}
.hero .pillars > .pillar:nth-child(1) { background: #e1cabe; }
.hero .pillars > .pillar:nth-child(2) { background: #e9d3b1; }
.hero .pillars > .pillar:nth-child(3) { background: #d1d1c0; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 24px 24px;
  }
  .portrait-wrap {
    max-width: 360px;
    margin: 0 auto;
  }
  .pillars {
    grid-template-columns: 1fr;
  }
  .pillar {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 18px 0 !important;
  }
  .pillar:last-child { border-bottom: none; }

  /* Home page: with coloured cell backgrounds, restore horizontal padding so
     text breathes from the now-visible cell edges, and drop the inter-cell
     border that the global mobile rule adds (the colours separate the cells). */
  .hero .pillars > .pillar {
    padding: 18px 18px !important;
    border-bottom: none;
  }

  .mast {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    flex-wrap: wrap;
  }
  .mast-silhouette { width: 32px; height: 32px; }
  .mast-tagline { font-size: 0.82rem; }
  .mast-nav-toggle {
    display: flex; /* hamburger appears on mobile */
  }
  .mast-nav {
    /* Collapse by default; expand when toggle is pressed */
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .mast-nav.is-open {
    max-height: 400px; /* generous ceiling; ul height determines actual */
  }
  .mast-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 12px 0 4px;
    align-items: stretch;
  }
  .mast-nav li {
    border-top: 1px solid var(--rule);
  }
  .mast-nav a {
    display: block;
    padding: 14px 0;
    letter-spacing: 0.12em;
  }
  .mast-nav a[aria-current="page"] {
    border-bottom-color: transparent; /* no underline on mobile stacked items */
  }
  .article {
    padding: 32px 20px 56px;
  }
  .article-head { margin-bottom: 32px; }
  .article-hero { margin-bottom: 36px; }
  .article-body { font-size: 1.08rem; line-height: 1.65; }
  .article-body p:first-of-type::first-letter {
    font-size: 3.6em;
  }
  .article-body figure { margin: 36px auto; }
  .article-body figure.fig-wide,
  .article-body figure.fig-narrow { max-width: 100%; }
  .article-body .ornament { margin: 36px 0 36px 1.2em; }
  .placeholder { padding: 40px 20px 56px; }
  .placeholder-lede { font-size: 1.08rem; }
  .resources { padding: 40px 20px 56px; }
  .resources-head { margin-bottom: 40px; }
  .resources-head h1 { font-size: 2rem; }
  .resources-section { margin-top: 40px; padding-top: 32px; }
  .resources-section:first-of-type { margin-top: 48px; }
  .resources-section-title { font-size: 1.3rem; }
  .resources-lede { font-size: 1.12rem; }
  .signup { padding: 22px; margin-top: 32px; }
  .legal { padding: 32px 20px 56px; }
  footer {
    padding: 24px 24px 32px;
  }
  .footer-links { gap: 16px; }
  /* ---- Shine page ---- */
  .shine { padding: 40px 20px 56px; }
  .shine-head { margin-bottom: 40px; }
  .shine-head-lyric p { font-size: 1.18rem; }
  .shine-head-prose { padding: 22px 22px; }
  .shine-jumpnav a { font-size: 0.7rem; padding: 5px 11px; }
  .shine-jumpnav-break { display: none; }
  .shine-cat-summary {
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
    position: relative;
    padding-right: 60px;
  }
  .shine-cat-name { min-width: 0; font-size: 1.18rem; }
  .shine-cat-tagline { font-size: 0.92rem; }
  .shine-cat-chevron {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
  }
  .shine-cat-body { padding: 4px 20px 28px; }
  .shine-person {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 0;
  }
  .shine-person-portrait { width: 160px; margin: 0 auto; }
  .shine-person-name { font-size: 1.15rem; text-align: center; }
  .shine-person-nation { text-align: center; }
  .shine-person-dates { display: block; margin-top: 4px; }

}


/* ============================================================
   HEADER + MENU : PILOT v4
   ------------------------------------------------------------
   Country bar sits under the acknowledgement bar with 3px of
   clearance, so deep ink cannot merge into the black above it.

   The menu sits close to the wordmark rather than thrown to the
   far right. Items are separated by a short vertical rule
   between every pair, and none after the last.

   Each door carries its own colour from the journey sequence.
   The label takes that colour on hover, focus and while open.
   Inside a panel, the item you are pointing at fills with that
   colour and its text turns cream. Every one of the seven is at
   5:1 or better against the cream, so it works both ways round.
   ============================================================ */

/* The country bar returns to its place beneath the masthead, where it
   reads as a deliberate design element and a natural separator. It also
   ends the deep-ink question entirely: nothing dark sits above it now. */
.country-bar { margin-top: 0; }

/* ---------- Masthead spacing ----------
   Two dials, both here. --mast-indent moves the silhouette and wordmark
   in from the left edge. --mast-gap sets the distance from the wordmark
   to the first menu item. Nudge either and nothing else moves. */
:root {
  --mast-indent: 52px;
  --mast-gap: 40px;
}
.mast {
  justify-content: flex-start;
  gap: var(--mast-gap);
  padding: 20px var(--mast-indent) 16px;
  border-bottom: none;   /* the country bar below is the separator */
}

/* ---------- The menu row ---------- */
.mast-nav ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mast-nav .door {
  position: relative;
  padding: 0 10px;
}
/* 3 August 2026. Trimmed from 13px. Since this morning the row has
   gained roughly 64px: News became Newsfeed, and Calendar and Newsfeed
   both gained a caret when they gained panels. All eight doors now
   carry one. This trim and the caret margin below give back about 80px,
   which restores the headroom the row had before, and keeps the
   1040px breakpoint honest. */
.mast-nav .door:first-child { padding-left: 0; }
.mast-nav .door:last-child  { padding-right: 0; }

/* Separator: a short rule between every pair, none after the last */
.mast-nav .door + .door::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: var(--rule, #c9b99f);
}

.mast-nav .door > a {
  display: block;
  white-space: nowrap;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft, #3a2f26);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.mast-nav .door > a:hover,
.mast-nav .door > a:focus-visible,
.mast-nav .door.is-open > a {
  color: var(--door);
  border-bottom-color: var(--door);
  outline: none;
}
.mast-nav .door.is-current > a {
  color: var(--door);
  font-weight: 700;
  border-bottom-color: var(--door);
}

/* Caret: large enough to read as a caret, not as punctuation */
.door-caret {
  display: inline-block;
  margin-left: 2px;   /* was 6px; eight carets, so this is ~32px of row */
  font-size: 0.8em;
  line-height: 1;
  vertical-align: 1px;
  transition: transform 0.16s ease;
}
.door.is-open .door-caret { transform: rotate(180deg); }

/* ---------- The dropdown ---------- */
.door-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 3px;
  min-width: 236px;
  background: var(--bg, #f4ede2);
  border: 1px solid var(--rule, #c9b99f);
  border-top: 3px solid var(--door);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(26, 20, 16, 0.15);
  padding: 8px;
  z-index: 300;
  text-align: left;
}
.door.is-open .door-panel { display: block; }

.door-panel-head {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--door);
  margin: 5px 10px 9px;
}

.door-panel ul { display: block; list-style: none; margin: 0; padding: 0; }
.door-panel li { margin: 0; padding: 0; }
.door-panel li::before { content: none; }

.door-panel a {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.96rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--ink, #1a1410);
  text-decoration: none;
  padding: 9px 13px;
  border-radius: 2px;
  border-bottom: none;
  transition: background-color 0.14s ease, color 0.14s ease;
}
/* The whole row fills with the door's colour, cream text on top */
.door-panel a:hover,
.door-panel a:focus-visible {
  background: var(--door-fill, var(--door));
  color: var(--bg, #f4ede2);
  outline: none;
}

/* ---------- The journey sequence ----------
   One value per door, 5:1 or better against the cream, so it
   works as a label colour and as a background under cream text. */
.door-about    { --door: #8b2f1a; }   /* earth red */
.door-history  { --door: #1a1410; }   /* deep ink. The past, and the depth of
                                          it. Also puts the darkest value near
                                          the middle of the row, which steadies
                                          the whole sequence. */
.door-lights   { --door: #8b670b;
                 --door-fill: #be8c0f; }
                 /* Gold at hue 43. The fill is the lighter value because a
                    filled row is a large enough area to read as metal; cream
                    on it is 2.6, a deliberate departure from the 4.5 the rest
                    of the set holds. The label and borders keep the deeper
                    #8b670b at 4.5, because the door label is small uppercase
                    type in the permanent nav row. Same hue and saturation, so
                    the two read as one colour. To make the label match the
                    fill, set --door to #be8c0f and delete --door-fill. */
.door-circles  { --door: #8c3480; }   /* mulla mulla, the purple it actually is */
.door-calendar { --door: #8b2f1a; }   /* earth red. Second appearance
                                          (About carries it at position 1);
                                          five doors apart, and the copper
                                          beside it contrasts with both reds,
                                          so neither pair can be confused. */
.door-news     { --door: #5a694c; }   /* coolibah green, deepened: the value
                                          the Calendar door carried until
                                          5 August 2026, when it and Calendar
                                          exchanged colours to keep the two
                                          greens (this and copper) apart. */
.door-walking,
.door-voices   { --door: #3f716b; }   /* copper green since 5 August 2026:
                    malachite and chrysocolla, the mineral colour of the stone
                    beneath Mitakoodi Country around Pimurra. The stone beneath
                    the path, for the door that means going deeper on Country.
                    Same hex as the bar (4.77:1 on cream, no deepened variant
                    needed). Terracotta remains in the bar. Both selectors carry
                    the value so the door keeps its colour whether the markup
                    says door-voices or door-walking. */
.door-walk     { --door: #4d6290; }   /* Cloncurry River blue. Moved here from
                                          History: at 150 degrees it is the
                                          furthest hue from About, which sits
                                          immediately to its left. The colour it
                                          replaced, #6b422e, was nominally
                                          terracotta but had drifted to hue 19.7,
                                          only 8.5 degrees from earth red and at
                                          almost the same lightness. Terracotta
                                          now lives on Keep Walking at its true
                                          hue of 26.3. */

/* ---------- Narrow screens ---------- */
@media (max-width: 1180px) {
  .mast { gap: 30px; }
  .mast-nav .door { padding: 0 10px; }
  .mast-nav .door > a { font-size: 0.72rem; letter-spacing: 0.06em; }
}

@media (max-width: 1000px) {
  .mast { padding-top: 16px; gap: 0; }
  .mast-nav ul { display: block; }
  .mast-nav .door { padding: 0; }
  .mast-nav .door + .door::before { content: none; }   /* no rules when stacked */
  .mast-nav .door > a {
    font-size: 0.84rem;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft, #d8cbb8);
  }
  .mast-nav .door.is-current > a {
    border-left: 3px solid var(--door);
    padding-left: 12px;
    font-weight: 700;
  }
  .door-panel {
    position: static;
    min-width: 0;
    margin: 0 0 6px 12px;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--door);
    border-radius: 0;
    padding: 2px 0 2px 4px;
  }
  .door-panel a { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .door-caret, .door-panel a, .mast-nav .door > a { transition: none; }
}


/* ============================================================
   PAGE HEADS : one kicker treatment, one top measure
   ------------------------------------------------------------
   Two jobs, both live here so a single file controls them.

   1. THE KICKER RULES. .article-kicker and .kicker already draw
      a short rule either side of the text. .explainer-kicker did
      not, because it is defined page-locally on the two history
      pages and never picked up the flex layout the rules hang
      off. It does now. Nothing in either page needs editing:
      the local rule sets type and colour but never sets display
      or gap, so these inherit cleanly.

   2. THE TOP MEASURE. Seven page types carried six different
      top paddings: 56, 56, 64, 56, 56, 72, and a 56px margin on
      the explainer head. They now share one value, and it is
      smaller, so every page head sits higher.

   THE DIAL: --page-top. Raise it if the heads now sit too high.
   The home page is deliberately excluded; its hero is its own
   composition.
   ============================================================ */

:root {
  --page-top: 32px;
}

/* ---- 1. Every kicker gets the flanking rules ---- */
.explainer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.explainer-kicker::before,
.explainer-kicker::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--earth);
  display: inline-block;
}

/* ---- 2. One top measure across every page type ---- */
.article,
.colours-page,
.shine,
.resources,
.legal,
.placeholder {
  padding-top: var(--page-top);
}

/* The explainer head is styled page-locally, so this needs the
   extra specificity to reach it. Two classes beats one. */
main.explainer-page .explainer-head {
  margin-top: var(--page-top);
}
/* ============================================================
   NAV REPAIR : 30 July 2026
   Appended block. Nothing above this line is edited.

   Three faults are fixed here, all reproduced by measurement
   against the live site, not by eye.

   FAULT 1  The collapsed mobile menu had a hard ceiling:
            .mast-nav.is-open { max-height: 400px; overflow: hidden }
            The eight closed doors already need 407px, so the last
            door was cut before anything was even opened. An open
            Leading Lights panel needs 810px, so 172px of that
            panel and every door below it were clipped away. This
            is the iPhone symptom. The ceiling is retired: the
            collapse now works by display, which cannot clip.

   FAULT 2  Two breakpoints governed one mechanism. The hamburger
            appeared at 860px and below; the row broke into a
            stack at 1000px and below. Between 861px and 1040px
            the menu was therefore a permanently open eight-item
            column with no hamburger to close it, 815px tall,
            shoving the page down. Any window that is not
            maximised lands in that band. Both breakpoints are
            now one number, --nav-break, set at 1040px because
            the row measures 687px wide and runs out of masthead
            at 1010px.

   FAULT 3  .mast carried z-index 2, which caps everything inside
            it, panels included, at level 2 in the root stacking
            context. main.resources and footer also carry z-index
            2 and come later in the document, so they lawfully
            painted over an open panel. Reproduced on
            resources.html: a hit test at the centre of the open
            Leading Lights panel returned MAIN.resources, not the
            panel. That is the "transparent panel". The masthead
            moves to 30, which is above the page and still below
            the back-to-top button at 50.
   ============================================================ */

/* Fault 3: lift the whole masthead above page content. */
.mast {
  position: relative;
  z-index: 30;
}

/* Belt and braces: a literal colour, so the panel can never
   inherit its way to transparency if --bg is ever shadowed. */
.door-panel {
  background-color: #f4ede2;
  background-color: var(--bg, #f4ede2);
}

/* ---------- One breakpoint for the whole menu ---------- */
@media (max-width: 1040px) {

  .mast {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
  }

  .mast-nav-toggle { display: flex; }

  /* Fault 1 and 2: collapse by display, not by height.
     No ceiling, no overflow, nothing to clip. */
  .mast-nav {
    display: none;
    flex-basis: 100%;
    max-height: none;
    overflow: visible;
    transition: none;
  }
  .mast-nav.is-open {
    display: block;
    max-height: none;
    overflow: visible;
    animation: mast-nav-in 0.18s ease-out;
  }

  /* Stacked doors, for the whole band up to the breakpoint. */
  .mast-nav ul {
    display: block;
    gap: 0;
    padding: 8px 0 4px;
  }
  .mast-nav .door { padding: 0; position: relative; }
  .mast-nav .door + .door::before { content: none; }
  .mast-nav .door > a {
    display: block;
    white-space: normal;
    font-size: 0.84rem;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft, #d8cbb8);
  }
  .mast-nav .door.is-current > a {
    border-left: 3px solid var(--door);
    padding-left: 12px;
    font-weight: 700;
  }

  /* Panels sit in the flow and push the doors below them down,
     which is what a stacked menu should do. */
  .door-panel {
    display: none;
    position: static;
    min-width: 0;
    margin: 0 0 6px 12px;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--door);
    border-radius: 0;
    padding: 2px 0 2px 4px;
    z-index: auto;
  }
  .door.is-open .door-panel { display: block; }
  .door-panel a { white-space: normal; }

  /* The stacked-list hairline was reaching panel items too. */
  .door-panel li { border-top: none; }

  /* Fingers, not cursors: 44px minimum target inside panels. */
  .door-panel a { padding: 11px 13px; }
}

@keyframes mast-nav-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mast-nav.is-open { animation: none; }
}

/* ------------------------------------------------------------
   FAULT 4, found during verification of the three above.
   The panels open left-aligned to their door. The last door sits
   near the right edge, so its 236px panel ran off the page and
   dragged a horizontal scrollbar with it: 53px over at a 1041px
   window, 22px over at 1181px, measured. The last panel now
   hangs from the right edge of its door instead of the left.
   ------------------------------------------------------------ */
@media (min-width: 1041px) {
  .mast-nav .door:last-child .door-panel {
    left: auto;
    right: 3px;
  }
}

/* ============================================================
   PANEL HEAD AS A LINK : 30 July 2026
   Ships with the site-nav.php of the same date, which wraps each
   panel head in an anchor to its door's landing page.

   Why: menu.js stops the door label from navigating, because the
   label's job is to open the panel. Without this the landing pages
   behind About, History, Leading Lights, Yarning Circles and Walk
   With Us had no way in from the menu at all under a mouse. The
   head link is that way in, and it is in the keyboard order too.

   The rules below beat .door-panel a on specificity, so the head
   keeps its small uppercase treatment and does NOT take the
   full-width coloured fill that ordinary panel items take.
   ============================================================ */
.door-panel .door-panel-head { margin: 5px 10px 9px; }

.door-panel .door-panel-head a {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  color: inherit;
  background: none;
  padding: 0;
  border-radius: 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.14s ease;
}
.door-panel .door-panel-head a:hover,
.door-panel .door-panel-head a:focus-visible {
  background: none;
  color: var(--door);
  border-bottom-color: currentColor;
  outline: none;
}
.door-panel-head-arrow {
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.14s ease;
}
.door-panel .door-panel-head a:hover .door-panel-head-arrow,
.door-panel .door-panel-head a:focus-visible .door-panel-head-arrow {
  transform: translateX(2px);
}

/* Stacked menu: give the head link a finger-sized target. */
@media (max-width: 1040px) {
  .door-panel .door-panel-head { margin: 6px 10px 4px; }
  .door-panel .door-panel-head a { padding: 6px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .door-panel-head-arrow,
  .door-panel .door-panel-head a { transition: none; }
}

/* ============================================================
   PANEL HEAD LINKS : 30 July 2026
   Pairs with the site-nav.php delivered alongside this file.

   menu.js makes the door label open its panel rather than
   navigate, which is the right behaviour and the reason the
   panels are usable at all. It leaves one gap: a visitor who
   wants the landing page itself, not a section of it, has
   nowhere to click. The panel head now carries that link. On a
   phone it is the only route to those five pages, since a tap on
   the label opens the panel there too.

   The head keeps its own typography rather than taking the
   styling of an ordinary panel item, so the panel still reads as
   a heading over a list and not as a list of ten things. The
   selector carries two classes so it wins outright over
   .door-panel a, whatever order these blocks end up in.
   ============================================================ */

.door-panel .door-panel-head { margin: 5px 10px 9px; }

.door-panel .door-panel-head a {
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--door);
  background: none;
  padding: 2px 0;
  border-radius: 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color 0.14s ease;
}

/* Non-breaking space then a right arrow, drawn by the stylesheet
   so the markup stays clean and the arrow cannot be selected or
   read aloud as a word. */
.door-panel .door-panel-head a::after { content: "\00a0\2192"; }

.door-panel .door-panel-head a:hover,
.door-panel .door-panel-head a:focus-visible {
  background: none;
  color: var(--door);
  border-bottom-color: var(--door);
  outline: none;
}

@media (max-width: 1040px) {
  /* A 0.64rem uppercase line is a small target for a thumb. */
  .door-panel .door-panel-head a { padding: 8px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .door-panel .door-panel-head a { transition: none; }
}

/* ====================================================================
   CAPTION STANDARD  (ratified 14 August 2026)
   The normative treatment of a photograph's description and its
   attribution. Canonical example: Ramsay Street, Cloncurry, on
   my-history.html.

       <figcaption class="cap">
         <span class="cap-title">Ramsay Street, Cloncurry</span>
         February 1966. The shopfronts include Bakhashs, an Afghan
         family name still trading two generations after the camel
         teams.
         <em class="cap-credit">State Library of Queensland.</em>
       </figcaption>

   Title in italic on its own line, description in regular text,
   holding institution or photographer in small caps. A caption with
   no credit simply omits .cap-credit.

   Until today this lived in six copies across four pages, and it had
   already drifted: about-cherbourg.html had lost display:inline-block
   on the credit, so eleven captions there could break mid-phrase and
   strand a word. It is defined here and nowhere else. Change it here.

   The selector list carries both .cap and figcaption.cap on purpose.
   .cap serves the accordion caption spans, which are not figcaptions.
   figcaption.cap raises specificity to (0,1,1) so it ties with
   .article-body figcaption and .article-hero figcaption above, and
   this block sits last in the file, so it wins the tie on order.

   .report-figure figcaption is DELIBERATELY EXEMPT. The report pages
   run a centred italic caption under a centred photograph, decided
   for that layout and confirmed on 14 August 2026. Leave it alone.
   ==================================================================== */
.cap,
figcaption.cap {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft, #3a2f26);
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--ochre, #c8881f);
  text-align: left;
  box-sizing: border-box;
  max-width: 100%;
  text-wrap: pretty;
}
.cap-title {
  display: block;
  font-style: italic;
  color: var(--ink, #1a1410);
}
/* inline-block so the credit wraps as one unit: if it cannot fit the
   remaining line it moves whole to the next, and never breaks inside
   itself into an orphaned word. */
.cap-credit {
  display: inline-block;
  font-family: 'Source Sans 3', sans-serif;
  font-style: normal;
  font-variant-caps: small-caps;
  font-size: 0.94em;
  letter-spacing: 0.06em;
}

/* ====================================================================
   CULTURAL NOTICE AND ACCESSIBILITY — added 17 August 2026
   Four additive blocks. Nothing above this comment changes.
   Block D is cosmetic and may be deleted on its own.
   ==================================================================== */

/* ---------- A. Skip link (WCAG 2.4.1, Bypass Blocks) ----------
   Sits first in the tab order, invisible until focused. The repeated
   header puts ten focusable items ahead of the article on every page,
   and this is the standard way past them. Both
   halves of the markup live in includes/site-nav.php: the anchor
   above the ack-bar, and the empty #content target below the
   masthead. No page file needs an edit. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--bg);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 20px;
  border-bottom-right-radius: 6px;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--ochre);
  outline-offset: -3px;
}

/* The skip link's destination. Empty, programmatically focusable, and
   never outlined, since a ring around a zero-width span reads as a
   rendering fault rather than as a focus cue. The visible confirmation
   that the jump worked is the article arriving under the reading
   cursor. */
#content:focus { outline: none; }

/* ---------- B. Cultural advisory: additions only ----------
   Corrected 18 August 2026. The first version of this block created a
   second component under the site's existing .cultural-advisory name,
   and, loading later, its layout rules overrode the original centred
   banner into a left-pinned box on every page using it. The rival
   component is deleted. The site's own banner (defined higher in this
   file: silhouette mark, centred, earth rules above and below) is the
   one component, and the two rules here only extend it: link styling,
   which the original never declared, and a drop-cap guard for any
   placement inside an article body. Neither rule touches layout. */
.cultural-advisory a {
  color: var(--earth);
  text-decoration: none;
  border-bottom: 1px solid var(--earth);
}
.cultural-advisory a:hover,
.cultural-advisory a:focus-visible { border-bottom-width: 2px; }
.article-body .cultural-advisory p::first-letter {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  float: none;
  line-height: inherit;
  margin: 0;
  color: inherit;
}

/* ---------- C. Submit button hover contrast (WCAG 1.4.3) ----------
   The page-scoped forms set their hover background to the coolibah
   green, where paper-coloured label text measures 3.84 to 1 and fails
   at normal weight. This deepened green measures 5.00 to 1 and keeps
   the same hue. Element-plus-class specificity wins over the
   page-scoped rule whatever the load order. */
button.rsvp-submit:hover,
button.rsvp-submit:focus {
  background: #5b6a4c;
  border-color: #5b6a4c;
}

/* ---------- D. Prose links inside articles (cosmetic) ----------
   Unclassed anchors inside article paragraphs currently inherit the
   browser default and render in the stock blue with a stock underline,
   which sits outside the Country palette. This gives them the same
   treatment the legal pages use. Scoped to unclassed anchors that are
   direct children of a paragraph, so component links keep their own
   styling. Delete this block to restore the browser default. */
.article-body p > a:not([class]) {
  color: var(--earth);
  text-decoration: none;
  border-bottom: 1px solid var(--earth);
}
.article-body p > a:not([class]):hover,
.article-body p > a:not([class]):focus-visible { border-bottom-width: 2px; }