/*
 * 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 */
  --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 {
  height: 4px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.country-bar > div:nth-child(1) { background: #e8c4a8; }  /* terracotta dust */
.country-bar > div:nth-child(2) { background: #1a1410; }  /* deep ink */
.country-bar > div:nth-child(3) { background: #c8881f; }  /* yellow ochre */
.country-bar > div:nth-child(4) { background: #4D6290; }  /* Cloncurry River blue */
.country-bar > div:nth-child(5) { background: #8b2f1a; }  /* earth red */
.country-bar > div:nth-child(6) { background: #c8881f; }  /* yellow ochre */
.country-bar > div:nth-child(7) { background: #6b7d5a; }  /* coolibah green */
/* Footer variant: same 7-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 {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--earth);
  font-weight: 600;
  margin-bottom: 22px;
  display: inline-flex;
  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;
}
.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;
}
.article-hero img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 32px rgba(26, 20, 16, 0.18));
}
.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: inline-flex;
  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: inline-flex;
  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;
}

/* 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;
  max-width: 56ch;
  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-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; }

}