/* ============================================================
   Sydney Bats — Ku-ring-gai Bat Conservation Society
   2026 redesign · "Australian bush" theme
   Wordmark green + gum-blossom orange on white.

   The greens and orange below are sampled from the sydneybats
   wordmark itself (the "SYDNEY BATS" masthead), so the site and
   the logo share one palette. Background is white by KBCS
   preference; --bg-2 is the only off-white, for alternating bands.

   Layout: fixed horizontal nav bar; dropdowns (≥1100px) → drawer (<1100).

   Legacy colour variables (--rust, --amber*, --olive*, --bark,
   --dusk, --parchment, --muted, --rule…) are kept as ALIASES mapped
   to the new palette so inline styles in migrated pages re-theme
   automatically. Do not delete them.
   ============================================================ */

/* One neutral family for everything. The site previously paired the Fraunces display
   serif with DM Sans; the committee asked for something more neutral, so headings and
   body now share Inter — a plain, widely-read grotesque with no stylistic tell. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  /* Wordmark greens — sampled from the "SYDNEY BATS" lettering */
  --green-900: #1f2a05;
  --green-800: #2e3d06;   /* rail background */
  --green-700: #394b03;   /* sampled: deepest lettering */
  --green-600: #4a5c14;
  --green-500: #576122;   /* sampled: mid lettering */
  --green-400: #777840;   /* sampled: lightest lettering */
  --green-300: #a3a877;

  /* Surfaces — white ground, one warm off-white for alternating bands */
  --bg:         #ffffff;   /* body background */
  --bg-2:       #f7f6f2;   /* alt sections */
  --paper:      #ffffff;   /* cards */
  --sand:       #ece7d9;   /* decorative bands */

  /* Gum-blossom orange — sampled from the wordmark's blossoms, lifted in
     saturation so it carries enough contrast for buttons and links on white */
  --orange:     #c2701c;   /* primary accent / donate */
  --orange-600: #a85f14;
  --orange-700: #8a4d10;
  --orange-100: #f8e8d5;
  --orange-50:  #fdf5ec;
  --ochre:      #c89351;   /* sampled as-is — decorative only */

  /* Warm ember — used sparingly (urgent alerts). Pushed red-ward so it stays
     distinguishable from the orange accent. */
  --ember:      #b5432a;
  --ember-100:  #f9e2db;

  /* Ink / text */
  --ink:        #1e2410;   /* headings */
  --body:       #333a26;   /* body copy */
  --muted-2:    #5f6653;   /* secondary */
  --line:       #e4e2d8;   /* borders on white */
  --line-2:     #d5d2c4;

  /* Warm light tints for text on the dark green nav bar */
  --bar-text:    rgba(246, 243, 230, 0.82);
  --bar-text-hi: #f7f4e7;
  --bar-line:    rgba(246, 243, 230, 0.12);

  /* ── Legacy aliases (mapped to new palette) ── */
  --rust:        #a85f14;
  --rust-mid:    #c2701c;
  --rust-light:  #d08a3c;
  --rust-pale:   #f8e8d5;
  --amber:       #b07a23;
  --amber-mid:   #c89351;
  --amber-pale:  #f7ecd4;
  --olive:       #4a5c14;
  --olive-mid:   #576122;
  --olive-light: #a3a877;
  --olive-pale:  #eef0e4;
  --parchment:   #f7f6f2;
  --white:       #ffffff;
  --bark:        #1e2410;
  --dusk:        #1f2a05;
  --body-text:   #333a26;
  --muted:       #5f6653;
  --rule:        #e4e2d8;

  /* Typography */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --topbar-h:  72px;
  --max:       1180px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(31,42,5,.08), 0 1px 2px rgba(31,42,5,.05);
  --shadow-md: 0 12px 32px rgba(31,42,5,.10);
  --shadow-lg: 0 26px 64px rgba(31,42,5,.18);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── Reset / base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--orange-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--orange-700); }

ul { list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.12;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

::selection { background: var(--orange-100); color: var(--green-900); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: fixed;
  top: -120px;
  left: 1rem;
  z-index: 4000;
  background: var(--green-800);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ============================================================
   SITE NAV  (shared look — horizontal bar / drawer switched below)
   ============================================================ */
/* The bar starts transparent over a dark hero photo and solidifies on the first pixel of
   scroll (main.js toggles .scrolled). Pages without a dark hero — the homepage's light
   split hero, donate, join — get body.nav-solid so the bar is always solid (light nav text
   would be invisible on those light heroes). Modelled on the Paddy Pallin Foundation bar. */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  color: var(--bar-text);
  border-bottom: none;
  z-index: 1000;
  transition: background .35s ease, box-shadow .35s ease;
}
/* Scrolled over a hero: a frosted, ~20% see-through green rather than a solid block, so
   the photo still shows faintly through the bar. The blur keeps the nav text legible. */
.site-nav.scrolled {
  background: linear-gradient(180deg, rgba(46,61,6,.70) 0%, rgba(31,42,5,.72) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
}
/* Always-solid pages and the open mobile drawer stay fully opaque. */
body.nav-solid .site-nav,
body.nav-open .site-nav {
  background: linear-gradient(180deg, var(--green-800) 0%, var(--green-900) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 2px 16px rgba(0,0,0,.22);
}
body.nav-open .site-nav { box-shadow: none; }

.nav-bar {
  max-width: var(--max);
  margin: 0 auto;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0 max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-left)) 0 max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-right));
}

/* Brand */
.nav-brand {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; flex-shrink: 0;
}
.nav-logo { width: 104px; height: auto; }
/* Hidden in the bar at every width. With seven sections plus the actions there is
   no room for it on one line — it wrapped to three lines and collided with the
   menu. The full society name is in the footer on every page. */
.nav-brand-sub { display: none; }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px; height: 18px;
  padding: 0; border: 0; background: none; cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block; height: 2.5px; width: 100%;
  background: var(--bar-text-hi); border-radius: 3px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.75px) rotate(-45deg); }

/* Menu shell */
.nav-list { display: flex; }
.nav-item { position: relative; }

.nav-link {
  display: flex; align-items: center;
  color: var(--bar-text);
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-link:hover { color: var(--bar-text-hi); }
.nav-link.active { color: var(--bar-text-hi); font-weight: 600; }

/* Disclosure chevron — present at both sizes so children stay keyboard-reachable */
.nav-expand {
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.nav-expand::after {
  content: '';
  width: .42rem; height: .42rem;
  border-right: 2px solid rgba(246,243,230,.6);
  border-bottom: 2px solid rgba(246,243,230,.6);
  transform: rotate(45deg) translate(-1px,-1px);
  transition: transform .22s var(--ease), border-color .2s;
}
.nav-expand:hover::after { border-color: var(--bar-text-hi); }
.nav-expand[aria-expanded="true"]::after {
  transform: rotate(225deg) translate(-1px,-1px);
  border-color: var(--orange);
}

/* Donate / join */
.btn-donate {
  display: block;
  text-align: center;
  background: var(--orange);
  color: #fff;
  padding: .72rem 1.2rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .01em;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 6px 18px rgba(194,112,28,.32);
}
.btn-donate:hover { background: var(--orange-600); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(194,112,28,.42); }

.btn-join {
  display: block;
  text-align: center;
  background: transparent;
  color: var(--bar-text-hi);
  border: 1.5px solid rgba(246,243,230,.34);
  padding: .62rem 1.2rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .92rem;
  transition: background .2s, border-color .2s;
}
.btn-join:hover { background: rgba(246,243,230,.1); color: var(--bar-text-hi); border-color: rgba(246,243,230,.6); }

/* ============================================================
   DESKTOP  (≥1100) — horizontal bar with dropdowns
   ------------------------------------------------------------
   1100 rather than 1024: the seven sections plus the brand and the
   actions need about that much room on one line. Below it they wrap,
   so the drawer takes over instead.
   ============================================================ */
@media (min-width: 1100px) {
  .nav-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    justify-content: flex-end;
    min-width: 0;
  }

  /* flex:1 + justify center makes the section links sit centred in the space between
     the brand and the Join/Donate actions, rather than bunched at the right. */
  .nav-list { flex: 1 1 auto; align-items: center; justify-content: center; gap: .25rem; }

  .nav-item { display: flex; align-items: center; }
  .nav-item.has-sub > .nav-link { padding-right: .3rem; }

  .nav-link {
    padding: .5rem .72rem;
    font-size: 1.05rem;
    border-radius: var(--radius-sm);
    border-bottom: 2px solid transparent;
  }
  .nav-link:hover { background: rgba(246,243,230,.08); }
  .nav-link.active { border-bottom-color: var(--orange); }

  .nav-expand { width: 22px; height: 32px; }

  /* Dropdown panel. top:100% keeps it flush against the item so there is no
     dead gap for the pointer to cross — a gap makes hover menus flicker shut. */
  .nav-sub {
    position: absolute;
    top: 100%; left: 0;
    display: none;
    min-width: 240px;
    padding: .4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1100;
  }
  .nav-item.has-sub:hover > .nav-sub,
  .nav-item.has-sub:focus-within > .nav-sub,
  .nav-item.has-sub.open > .nav-sub { display: block; }

  .nav-sub a {
    display: block;
    padding: .5rem .75rem;
    font-size: .9rem;
    color: var(--body);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
  }
  .nav-sub a:hover { background: var(--orange-50); color: var(--orange-700); }
  .nav-sub a.active { background: var(--orange-50); color: var(--orange-700); font-weight: 600; }

  .nav-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
  /* Slightly tighter than the homepage CTAs so the two pills sit comfortably in the
     72px bar, but the same shape, fill and border — .btn-primary / .btn-secondary. */
  .nav-actions .btn-primary,
  .nav-actions .btn-secondary {
    padding: .55rem 1.2rem;
    font-size: .96rem;
    white-space: nowrap;
  }
  .nav-actions .btn-primary { box-shadow: 0 6px 16px rgba(194,112,28,.3); }

  /* The bar duplicates Donate for the mobile top row — hide that copy here. */
  .nav-bar-actions { display: none; }
}

@media (min-width: 1500px) {
  .nav-logo { width: 116px; }
  .nav-link { font-size: 1rem; padding: .5rem .8rem; }
}

/* ============================================================
   MOBILE / TABLET  (<1100) — top bar + full-screen drawer
   ============================================================ */
/* 1099.98 rather than 1099: on a display with fractional scaling (1.5x is the Windows
   150% default) the viewport width lands between the two integers, so `max-width:1099px`
   and `min-width:1100px` were BOTH false and the nav fell through to its base styles
   with no drawer and no dropdowns. The .98 closes that gap. */
@media (max-width: 1099.98px) {
  .nav-bar { justify-content: space-between; }
  .nav-logo { width: 100px; }
  .nav-brand-sub { display: none; }

  .nav-bar-actions { display: flex; align-items: center; gap: .9rem; }
  .btn-donate--top { padding: .5rem 1.05rem; font-size: .9rem; box-shadow: none; }
  /* Keep Donate off the hamburger — a little breathing room on the right. */
  .btn-donate--top { margin-right: .35rem; }

  /* Become a member joins the top row on tablet, where there is room; hidden on a phone
     so Donate + the hamburger are not crowded. Same outlined-pill style as elsewhere.
     Scoped to .nav-bar-actions so it outranks .btn-secondary's own display rule. */
  .nav-bar-actions .btn-join--top { display: none; }
  @media (min-width: 620px) {
    .nav-bar-actions .btn-join--top {
      display: inline-block;
      padding: .48rem 1.05rem;
      font-size: .9rem;
    }
  }

  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    top: var(--topbar-h); left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, var(--green-800), var(--green-900));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1rem max(1.1rem, env(safe-area-inset-right)) calc(1.4rem + env(safe-area-inset-bottom)) max(1.1rem, env(safe-area-inset-left));
    transform: translateY(-110%);
    transition: transform .34s var(--ease);
    visibility: hidden;
  }
  .nav-menu.open { transform: translateY(0); visibility: visible; }

  .nav-list { flex-direction: column; gap: 1px; }
  .nav-item { flex-wrap: wrap; display: flex; align-items: stretch; }

  .nav-link {
    flex: 1 1 auto;
    font-size: 1.08rem;
    padding: .85rem .9rem;
    border-bottom: 1px solid var(--bar-line);
    border-left: 3px solid transparent;
  }
  .nav-link.active { background: rgba(246,243,230,.08); border-left-color: var(--orange); }

  .nav-expand { width: 52px; border-bottom: 1px solid var(--bar-line); }

  /* Accordion rather than dropdown: full width, pushed inline below its section. */
  .nav-sub {
    display: none;
    flex: 1 0 100%;
    margin: 2px 0 6px .9rem;
    padding-left: .9rem;
    border-left: 1px solid var(--bar-line);
  }
  .nav-item.open > .nav-sub { display: block; }
  .nav-sub a {
    display: block;
    padding: .6rem .8rem;
    font-size: .98rem;
    color: rgba(246,243,230,.62);
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
  }
  .nav-sub a:hover { color: var(--bar-text-hi); background: rgba(246,243,230,.06); }
  .nav-sub a.active { color: var(--orange); font-weight: 600; }

  /* In the drawer the two CTAs stack full-width. Same .btn-primary / .btn-secondary
     styles as everywhere else — just made block so they fill the drawer. */
  .nav-actions { display: flex; flex-direction: column; gap: .65rem; margin: 1.1rem 0 .4rem; }
  .nav-actions .btn-primary,
  .nav-actions .btn-secondary {
    display: block;
    width: 100%;
    text-align: center;
    padding: .72rem 1.2rem;
    font-size: 1rem;
  }

  body.nav-open { overflow: hidden; }
}

/* ============================================================
   APP MAIN / shared layout
   ============================================================ */
/* The nav is fixed at every width now (it used to be a fixed left rail on
   desktop, which pushed content with margin-left). One rule replaces both. */
/* Default: no top offset — the hero sits under the transparent fixed bar (its own top
   padding clears the bar; see the photo-hero rule). Pages with a solid bar (nav-solid)
   re-add the offset so their content starts below the bar. */
.app-main { min-width: 0; padding-top: 0; }
body.nav-solid .app-main { padding-top: var(--topbar-h); }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  width: 100%;
  min-width: 0;
}

.section { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.section > .container { }

.section-alt { background: var(--bg-2); }
.section-warm { background: var(--orange-50); }
.section-bark, .section-bark-dark { background: var(--green-900); color: rgba(246,243,230,.85); }
.section-bark h1, .section-bark h2, .section-bark h3, .section-bark h4,
.section-bark-dark h1, .section-bark-dark h2, .section-bark-dark h3, .section-bark-dark h4 { color: #fff; }

.section-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--orange-600);
  margin-bottom: .7rem;
}
.section-bark .section-label, .section-bark-dark .section-label { color: var(--green-300); }

.section-title {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  color: var(--ink);
  margin-bottom: .6rem;
  letter-spacing: -0.02em;
}
.section-subtitle {
  color: var(--muted-2);
  font-size: 1.05rem;
  max-width: 56ch;
  margin-bottom: 2.5rem;
}

/* Decorative divider (legacy .dusk-divider) */
.dusk-divider { height: 5px; background: linear-gradient(90deg, var(--orange), var(--green-500), var(--orange)); }

/* Keep .bat-bg / .leaf-bg classes harmless + subtle on dark */
.bat-bg, .leaf-bg { position: relative; }
.section-bark.bat-bg::before, .section-bark-dark.bat-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle at 18% 22%, rgba(255,255,255,.05), transparent 42%),
                    radial-gradient(circle at 82% 78%, rgba(194,112,28,.10), transparent 45%);
}

/* ============================================================
   HERO (homepage) — bright split
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  align-items: stretch;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  /* Fill exactly one screen below the fixed bar so the first thing seen is the photo,
     the headline and the two buttons — no scrolling needed. svh (small viewport height)
     is used so the buttons stay visible on mobile even with the browser chrome showing;
     the vh line above is the fallback for browsers without svh. */
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h));
}
.hero-inner, .hero-copy {
  padding: clamp(2.25rem, 5vw, 4.75rem) clamp(1.25rem, 4vw, 3.75rem);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 640px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--orange-700);
  background: var(--orange-100);
  padding: .4rem .85rem; border-radius: var(--radius-pill);
  width: fit-content; margin-bottom: 1.4rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--green-900);
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.hero h1 em { font-style: italic; color: var(--orange-600); }
.hero p, .hero-lead {
  font-size: 1.12rem;
  color: var(--body);
  max-width: 46ch;
  margin-bottom: 2rem;
}
.hero-ctas { display: flex; gap: .85rem; flex-wrap: wrap; }

/* ── Full-bleed photo hero (homepage) ────────────────────────
   The photo fills the whole intro screen behind the transparent bar; the copy overlays
   the left over a dark gradient. One background image, cover-positioned on the bat. */
.hero.hero--photo {
  display: flex;
  align-items: center;
  grid-template-columns: none;
  background: var(--green-900);
  border-bottom: none;
  position: relative;
  overflow: hidden;
  /* The source photo is 2:1 (width:height). Capping height at exactly one screen (below)
     crops it hard on short/landscape windows, where the viewport is much wider than 2:1 —
     background-cover then zooms in and throws away most of the top and bottom of the shot.
     Letting the section grow a bit taller than one screen (up to 20%) on those windows keeps
     more of the photo in frame; min() stops it growing past what the 2:1 ratio actually needs,
     and the outer max() means normal (taller-than-wide) viewports are completely unaffected. */
  min-height: max(calc(100vh - var(--topbar-h)), min(50vw, calc((100vh - var(--topbar-h)) * 1.2)));
  min-height: max(calc(100svh - var(--topbar-h)), min(50vw, calc((100svh - var(--topbar-h)) * 1.2)));
}
.hero.hero--photo::before {          /* the photo */
  content: ''; position: absolute; inset: 0; z-index: 0;
  /* Biased toward the top: the bat's raised wingtip is the top of the shot, and the water
     below it has plenty of room to give up before the wing needs to. */
  background: var(--bg-image) center 22% / cover no-repeat;
}
.hero.hero--photo::after {           /* dark gradient — strongest on the left for the text */
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg,
    rgba(18,26,4,.90) 0%, rgba(18,26,4,.72) 34%, rgba(18,26,4,.30) 66%, rgba(18,26,4,.08) 100%);
}
.hero.hero--photo .hero-copy {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--topbar-h) + clamp(1.5rem, 4vh, 3rem)) clamp(1.25rem, 4vw, 2rem) clamp(2rem, 5vh, 3.5rem);
}
.hero.hero--photo .hero-copy > * { max-width: 600px; }
.hero.hero--photo h1 { color: #fff; }
.hero.hero--photo .hero-lead { color: rgba(255,255,255,.92); max-width: 44ch; }
.hero.hero--photo .hero-credit {
  position: absolute; z-index: 1;
  right: clamp(.6rem, 1.5vw, 1rem); bottom: clamp(.5rem, 1.5vw, .75rem);
  margin: 0;
  font-size: .56rem; color: rgba(255,255,255,.4);
}
.hero.hero--photo .hero-credit a { color: rgba(255,255,255,.5); font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }

.hero-media { position: relative; min-height: 320px; background: var(--green-800); }

/* Short desktop windows (e.g. a 1366x768 laptop at 125–150% scaling): tighten the hero
   copy so the headline, lead and both buttons still fit in one screen without scrolling. */
@media (min-width: 981px) and (max-height: 760px) {
  .hero-inner, .hero-copy { padding-top: clamp(1rem, 3vh, 2.25rem); padding-bottom: clamp(1rem, 3vh, 2.25rem); }
  .hero h1 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: .9rem; }
  .hero p, .hero-lead { margin-bottom: 1.35rem; }
}
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media figcaption {
  position: absolute; right: .85rem; bottom: .7rem;
  font-size: .68rem; color: #fff;
  background: rgba(31,42,5,.55); backdrop-filter: blur(4px);
  padding: .25rem .6rem; border-radius: var(--radius-pill);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: .85rem 1.7rem;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 22px rgba(194,112,28,.32);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-primary:hover { background: var(--orange-600); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(194,112,28,.42); }

.btn-secondary, .btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--green-700);
  border: 1.6px solid var(--green-500);
  padding: .8rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: .95rem;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-secondary:hover, .btn-outline:hover { background: var(--green-700); color: #fff; border-color: var(--green-700); }

.section-bark .btn-secondary, .section-bark-dark .btn-secondary,
.site-nav .btn-secondary,
.hero--photo .btn-secondary {
  color: #fff; border-color: rgba(255,255,255,.7);
}
.section-bark .btn-secondary:hover,
.site-nav .btn-secondary:hover,
.hero--photo .btn-secondary:hover { background: #fff; color: var(--green-900); border-color: #fff; }

.btn-white {
  display: inline-block; background: #fff; color: var(--green-700);
  padding: .7rem 1.4rem; border-radius: var(--radius-pill);
  font-weight: 700; font-size: .9rem; flex-shrink: 0;
  transition: transform .15s, box-shadow .2s;
}
.btn-white:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--green-800); }

.btn-ghost-light {
  display: inline-block; margin-top: 1rem;
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  padding: .55rem 1.15rem; border-radius: var(--radius-pill);
  font-size: .85rem; font-weight: 600;
  transition: background .2s, border-color .2s;
}
.btn-ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
/* Near-white hero band. KBCS asked for a white ground rather than cream, so this is
   a whisper of tone (white -> --bg-2) instead of the old cream-to-sand wash. --sand
   is still used behind photo cards, where a warm placeholder tone is fine. */
.page-hero {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.page-hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  position: relative; z-index: 1;
}
.page-hero h1 {
  font-size: clamp(1.85rem, 4vw, 3rem);
  color: var(--green-900);
  letter-spacing: -0.02em;
}
.page-hero p { color: var(--body); font-size: 1.05rem; max-width: 60ch; margin-top: .5rem; }

/* Photo hero. Two ways in: a page can opt in per-page with .page-hero--photo and its own
   --bg-image, OR a page in one of the five menu sections gets it automatically — the base
   layout sets --section-hero and adds .has-section-hero, so the whole section (landing +
   subpages) shares one header image. --bg-image wins when a page sets its own. */
.page-hero--photo,
.has-section-hero .page-hero {
  background: var(--green-900);
  border-bottom: none;
  /* Top padding includes the bar height, because the photo sits UNDER the transparent
     fixed bar — the heading and breadcrumb must start below it. */
  padding: calc(var(--topbar-h) + clamp(1.5rem, 4vw, 3rem)) 0 clamp(3rem, 7vw, 5.5rem);
}
.page-hero--photo::before,
.has-section-hero .page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--bg-image, var(--section-hero)) center/cover no-repeat;
  opacity: .82;
}
.page-hero--photo::after,
.has-section-hero .page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(31,42,5,.86) 0%, rgba(31,42,5,.62) 45%, rgba(31,42,5,.28) 100%);
}
.page-hero--photo h1,
.has-section-hero .page-hero h1 { color: #fff; }
.page-hero--photo p,
.has-section-hero .page-hero p { color: rgba(255,255,255,.9); }
.page-hero--photo .breadcrumb, .page-hero--photo .breadcrumb a,
.has-section-hero .page-hero .breadcrumb, .has-section-hero .page-hero .breadcrumb a { color: rgba(255,255,255,.8); }

.breadcrumb { font-size: .8rem; color: var(--muted-2); margin-bottom: .75rem; }
.breadcrumb a { color: var(--green-600); }
.breadcrumb a:hover { color: var(--orange-700); }
.breadcrumb span { margin: 0 .4rem; opacity: .6; }

/* ============================================================
   PAGE BODY + secondary section sidebar
   ============================================================ */
.page-body {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
  width: 100%; min-width: 0;
}

.page-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
  width: 100%; min-width: 0;
}
.page-layout > * { min-width: 0; max-width: 100%; }

/* Sticky offset clears the fixed nav bar — without the extra --topbar-h the
   sidebar sticks underneath it and its first items are unreachable. */
.sidebar { position: sticky; top: calc(var(--topbar-h) + 1.5rem); min-width: 0; }

.sidebar-title {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--orange-700); font-weight: 700; margin-bottom: .75rem;
}
.sidebar-nav { border-left: 2px solid var(--line); }
.sidebar-nav li a {
  display: block; padding: .5rem .9rem; font-size: .88rem;
  color: var(--body); border-left: 2px solid transparent; margin-left: -2px;
  transition: all .18s;
}
.sidebar-nav li a:hover { color: var(--orange-700); border-left-color: var(--orange); background: var(--orange-50); }
.sidebar-nav li a.active { color: var(--orange-700); border-left-color: var(--orange); background: var(--orange-50); font-weight: 600; }

/* ── Content typography ──────────────────────────────────────── */
/* Left-aligned, NOT centred. The old fixed left rail absorbed 250px, which
   balanced this 72ch measure by accident; losing it leaves more room on the
   right. Centring the measure was tried and reverted — the page hero is a
   full-bleed band whose inner text aligns to --max, so a centred body column
   no longer shared a left edge with its own heading. Sharing that edge matters
   more than balancing the right margin, and it behaves the same on sidebar
   pages, where the content must stay hard against the sidebar. */
.content { min-width: 0; max-width: 72ch; overflow-wrap: anywhere; }
.page-body > .content { max-width: 72ch; }

.content h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  color: var(--green-800);
  margin: 2.4rem 0 .8rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--line);
}
.content > h2:first-child, .content > *:first-child { margin-top: 0; }
.content h3 { font-size: 1.18rem; color: var(--green-700); margin: 1.7rem 0 .55rem; }
.content p { margin-bottom: 1rem; font-size: 1rem; color: var(--body); }
.content ul, .content ol { margin: .6rem 0 1.25rem; }
.content ul { list-style: none; }
/* Bullet is absolutely positioned, not a flex item. A flex row here split the text and
   any inline link into separate flex items, so a list item like "…jointly with <a>Council</a>"
   pushed the link out to the side instead of letting it flow in the sentence. */
.content ul li {
  position: relative;
  padding: .3rem 0 .3rem 1.4rem;
  font-size: 1rem;
}
.content ul li::before {
  content: '';
  position: absolute;
  left: .15rem; top: .95rem;
  width: 7px; height: 7px;
  background: var(--orange); border-radius: 50%;
}
.content ol { padding-left: 1.25rem; }
.content ol li { padding: .3rem 0; }
.content a { color: var(--orange-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.content a:hover { color: var(--orange); }
.content strong { color: var(--ink); }
.content img { border-radius: var(--radius-md); }
.content blockquote {
  border-left: 4px solid var(--orange);
  background: var(--orange-50);
  padding: 1rem 1.25rem; margin: 1.5rem 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic; color: var(--green-800);
}

/* ── Callouts ────────────────────────────────────────────────── */
.callout {
  background: var(--orange-50);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.1rem 1.35rem; margin: 1.5rem 0; font-size: .96rem;
}
.callout-amber { background: var(--amber-pale); border-left-color: var(--amber-mid); }
.callout-olive, .callout-green { background: var(--olive-pale); border-left-color: var(--green-500); }

/* ── Fact cards ──────────────────────────────────────────────── */
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; }
.fact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.4rem; text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.fact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--orange-100); }
.fact-card .fact-icon { font-size: 2.2rem; margin-bottom: .65rem; display: block; }
.fact-card h4 { font-family: var(--font-sans); font-size: .98rem; font-weight: 700; color: var(--green-800); margin-bottom: .35rem; }
.fact-card p { font-size: .88rem; color: var(--muted-2); line-height: 1.55; }

/* ── News / blog cards ───────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%), 1fr)); gap: 1.5rem; min-width: 0; }
.news-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.news-card-img { height: 190px; background: linear-gradient(140deg, var(--bg-2), var(--sand)); position: relative; overflow: hidden; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; }
.img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--green-300); }
.news-card-body { padding: 1.3rem; flex: 1; display: flex; flex-direction: column; }
.news-card-meta { display: flex; align-items: center; gap: .55rem; font-size: .74rem; color: var(--muted-2); margin-bottom: .55rem; }
.cat-badge { background: var(--orange-100); color: var(--orange-700); padding: .15rem .6rem; border-radius: var(--radius-pill); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
.news-card h3 { font-size: 1.12rem; color: var(--green-800); margin-bottom: .5rem; line-height: 1.25; }
.news-card p { font-size: .9rem; color: var(--muted-2); flex: 1; }
.read-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 1rem; font-size: .85rem; font-weight: 700; color: var(--orange-700); transition: gap .2s, color .2s; }
.read-more:hover { gap: 9px; color: var(--orange); }

/* ── Mission / two-col ───────────────────────────────────────── */
.mission-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.mission-aims { list-style: none; }
.mission-aims li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid var(--line);
  font-size: .96rem; color: var(--body);
}
.mission-aims li::before { content: ''; width: 8px; height: 8px; background: var(--orange); border-radius: 50%; flex-shrink: 0; margin-top: .5rem; }

/* ── Feature split (new helper) ─────────────────────────────── */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.feature-split img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }
.feature-split.reverse > *:first-child { order: 2; }

/* ── Video cards ─────────────────────────────────────────────── */
.videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.video-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); overflow: hidden; }
a.video-card-link { display: block; color: inherit; transition: transform .2s var(--ease), box-shadow .2s; }
a.video-card-link:hover { color: inherit; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.video-thumb { height: 158px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; position: relative; }
.video-thumb::after { content: ''; position: absolute; inset: 0; background: rgba(31,42,5,.25); }
.video-play { width: 54px; height: 54px; background: rgba(194,112,28,.92); border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; position: relative; z-index: 1; transition: transform .2s, background .2s; }
a.video-card-link:hover .video-play { transform: scale(1.08); background: var(--orange); }
.video-card-body { padding: 1.1rem; }
.video-card h4 { font-size: 1rem; margin-bottom: .35rem; color: #fff; }
.video-card p { font-size: .84rem; color: rgba(255,255,255,.65); }

/* ── Photo gallery + lightbox ────────────────────────────────── */
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.gallery-item { margin: 0; }
.gallery-item .gallery-link { display: block; line-height: 0; }
.gallery-item img { width: 100%; height: auto; border-radius: var(--radius-md); cursor: zoom-in; transition: transform .2s var(--ease), box-shadow .2s; }
.gallery-item .gallery-link:hover img { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gallery-item figcaption { font-size: .82rem; color: var(--muted-2); margin-top: .5rem; line-height: 1.4; }
.gallery-credit { font-size: .82rem; color: var(--muted-2); margin: 1.5rem 0 0; }

.gallery-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(31,42,5,.94); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.gallery-lightbox[hidden] { display: none !important; }
.gallery-lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem; cursor: pointer; }
.gallery-lightbox-close:hover { background: var(--orange); }
.gallery-lightbox-inner { max-width: min(1200px, 96vw); max-height: 90vh; text-align: center; }
.gallery-lightbox-inner img { max-width: 100%; max-height: calc(90vh - 3rem); width: auto; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.gallery-lightbox-inner figcaption { color: rgba(255,255,255,.85); margin-top: .75rem; font-size: .95rem; }

/* ── Species cards ───────────────────────────────────────────── */
.species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1.4rem; }
.species-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.species-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.species-card-img { height: 180px; background: linear-gradient(140deg, var(--bg-2), var(--sand)); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: var(--green-300); overflow: hidden; }
.species-card-img img { width: 100%; height: 100%; object-fit: cover; }
.species-card-body { padding: 1.3rem; }
.species-card h3 { font-size: 1.1rem; color: var(--green-800); margin-bottom: .15rem; }
.species-card .sci-name { font-style: italic; font-size: .82rem; color: var(--muted-2); margin-bottom: .65rem; }
.species-card p { font-size: .9rem; color: var(--muted-2); }

/* ── Blog list ───────────────────────────────────────────────── */
.blog-list { display: flex; flex-direction: column; gap: 1.5rem; }
/* Drive feed containers hold the JS-injected news items. display:contents removes the
   wrapper from layout so those items become direct children of the surrounding .blog-list
   (flex) or .news-grid (grid) and inherit the same gap as the pre-loaded static items —
   otherwise Drive items stack flush inside the wrapper while static ones get 1.5rem. */
.drive-blog-feed, .drive-news-feed { display: contents; }
.blog-archive-heading { font-family: var(--font-display); font-size: 1.4rem; color: var(--green-800); margin: .5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.blog-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; display: flex; transition: transform .2s, box-shadow .2s; }
.blog-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Fixed-height image box so every card's image is the same size and cropped to fit
   (object-fit: cover). The card height itself stays flexible so long titles are never
   clipped; align-self:center keeps the box centred if a long-title card runs taller. */
.blog-item-img { width: 230px; height: 190px; align-self: center; flex-shrink: 0; overflow: hidden; background: linear-gradient(140deg, var(--bg-2), var(--sand)); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: var(--green-300); }
/* The Eleventy image plugin wraps every <img> in <picture>. Inside a fixed-height crop
   box, height:100% on the <img> then resolves against the auto-height <picture> and the
   image renders full size (portrait photos spilled over the card text). display:contents
   removes the <picture> from layout so the <img> sizes against the box again. margin:0
   overrides the .migrated-content img spacing on the News page. Applies to both the News
   list and the homepage news grid. */
.blog-item-img picture, .news-card-img picture { display: contents; }
.blog-item-img img { width: 100%; height: 100%; object-fit: cover; margin: 0; }
.blog-item-body { padding: 1.4rem 1.6rem; flex: 1; min-width: 0; }
.blog-meta { display: flex; align-items: center; gap: .6rem; font-size: .76rem; color: var(--muted-2); margin-bottom: .5rem; flex-wrap: wrap; }

/* Byline at the head of a single post. Scoped to .page-hero so the listing cards above
   keep their smaller, quieter treatment.

   These pages previously carried an inline `color: rgba(255,255,255,.7)` — white text on
   the light .page-hero gradient, i.e. all but invisible, which is what readers reported.
   The author name is the point of the line, so it gets the weight and the ink colour. */
.page-hero .blog-meta {
  font-size: .95rem;
  color: var(--muted-2);
  margin: 1rem 0 0;
  gap: .55rem;
}
.page-hero .blog-meta time { font-variant-numeric: tabular-nums; }
.page-hero .blog-meta-dot { color: var(--line-2); }
.page-hero .blog-meta-author { color: var(--green-700); font-weight: 600; }

/* News article pages now sit on a dark PHOTO hero (the section banner image), so the
   date/author byline must be white or it disappears over the photo — reported hard to
   read, especially on phones. Overrides the dark ink above wherever the hero is a photo
   (news articles via .has-section-hero, and any page using .page-hero--photo). */
.has-section-hero .page-hero .blog-meta,
.has-section-hero .page-hero .blog-meta time,
.page-hero--photo .blog-meta,
.page-hero--photo .blog-meta time { color: rgba(255,255,255,.92); }
.has-section-hero .page-hero .blog-meta-author,
.page-hero--photo .blog-meta-author { color: #fff; font-weight: 600; }
.has-section-hero .page-hero .blog-meta-dot,
.page-hero--photo .blog-meta-dot { color: rgba(255,255,255,.6); }
.blog-item-body h2 { font-size: 1.2rem; color: var(--green-800); margin: 0 0 .5rem; border: 0; padding: 0; }
/* Excerpt clamped to 3 lines to keep card heights close without ever clipping the title. */
.blog-item-body p { font-size: .9rem; color: var(--muted-2); margin-bottom: .75rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-item-title-link { color: inherit; }
.blog-item-title-link:hover { color: var(--orange-700); }
.doc-article-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.doc-article-body a { color: var(--orange-700); }

/* ── Bushcare / CTA banner ───────────────────────────────────── */
.bushcare-banner {
  background: linear-gradient(130deg, var(--green-700), var(--green-500));
  color: #fff; border-radius: var(--radius-lg);
  padding: 1.6rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.bushcare-banner h3 { color: #fff; margin-bottom: .25rem; font-size: 1.15rem; }
.bushcare-banner p { font-size: .92rem; color: rgba(255,255,255,.82); }

/* ── Alert banner (urgent — warm ember) ──────────────────────── */
.alert-banner {
  background: linear-gradient(135deg, #9c3d18, var(--ember));
  color: #fff; padding: 1.4rem 1.7rem; border-radius: var(--radius-md);
  display: flex; align-items: flex-start; gap: 1rem; box-shadow: var(--shadow-md);
}
.alert-banner .alert-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
.alert-banner h3 { color: #fff; margin-bottom: .35rem; font-size: 1.1rem; }
.alert-banner p { font-size: .92rem; opacity: .95; }
.alert-banner a { color: #ffe9dc; font-weight: 700; text-decoration: underline; }

/* ── Audio block ─────────────────────────────────────────────── */
.audio-block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.5rem; }
.audio-block h3 { margin-bottom: .35rem; color: var(--green-800); font-size: 1.1rem; }
.audio-block p { font-size: .9rem; color: var(--muted-2); margin-bottom: 1rem; }
.audio-block audio { width: 100%; margin-bottom: .75rem; }

/* ── Timeline ────────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--orange), var(--green-400)); }
.timeline-item { position: relative; margin-bottom: 2rem; }
.timeline-item::before { content: ''; position: absolute; left: -2rem; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--orange); }
.timeline-year { font-size: .76rem; font-weight: 700; color: var(--orange-700); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .2rem; }
.timeline-item h4 { font-size: 1.05rem; color: var(--green-800); margin-bottom: .3rem; }
.timeline-item p { font-size: .9rem; color: var(--muted-2); }

/* ── Contact ─────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.address-block { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.75rem; }
.address-block h3 { color: var(--green-800); margin-bottom: 1rem; font-size: 1.1rem; }
.address-lines { font-size: .95rem; color: var(--body); line-height: 1.9; }

.contact-form label, .wpcf7-form label { display: block; font-size: .84rem; font-weight: 700; color: var(--green-800); margin: 1.1rem 0 .3rem; }
.contact-form label:first-child { margin-top: 0; }
.contact-form input, .contact-form textarea,
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea {
  width: 100%; padding: .75rem 1rem;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--paper); font-family: var(--font-sans); font-size: 1rem; color: var(--body);
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form textarea:focus,
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100);
}
.contact-form textarea, .wpcf7-form textarea { min-height: 150px; resize: vertical; }
.btn-submit, .wpcf7-form input[type="submit"] {
  display: inline-block; background: var(--orange); color: #fff; border: 0;
  padding: .85rem 2.2rem; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: .95rem; font-weight: 700; cursor: pointer;
  margin-top: 1.25rem; min-height: 44px;
  box-shadow: 0 8px 22px rgba(194,112,28,.3); transition: background .2s, transform .15s;
}
.btn-submit:hover, .wpcf7-form input[type="submit"]:hover { background: var(--orange-600); transform: translateY(-1px); }

/* ── FAQ (details/summary) ───────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: .75rem; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 1.25rem; }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; color: var(--green-800); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.4rem; color: var(--orange); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq details p { padding: 1rem 0; font-size: .95rem; color: var(--body); margin: 0; }

/* ── Embed slot (Raisely placeholder) ────────────────────────── */
.embed-slot {
  background: var(--orange-50);
  border: 2px dashed var(--orange);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.embed-slot h3 { color: var(--green-800); font-size: 1.3rem; margin-bottom: .6rem; }
.embed-slot p { color: var(--muted-2); max-width: 52ch; margin: 0 auto 1.25rem; }
.embed-slot .embed-note { font-size: .8rem; color: var(--orange-700); margin-top: 1.25rem; font-family: var(--font-sans); }
.embed-slot code { background: var(--orange-100); padding: .15rem .45rem; border-radius: 4px; font-size: .85em; }

/* ── Raisely embed (donate + join) ────────────────────────────
   Raisely's embed.js injects an iframe and is supposed to auto-size it by postMessage.
   In practice it does not fire here, so the iframe sits at its 150px default and the
   form is unreachable. We therefore give the frame a real height ourselves and let it
   SCROLL INTERNALLY: the panel is a fixed, page-sized card and the multi-step form
   scrolls within it, so the surrounding page layout never jumps as the donor advances.

   Height is viewport-relative so the whole form is usable on a laptop without the panel
   overflowing a short screen, and is clamped so it neither shrinks below a usable form
   nor dominates a tall desktop monitor. */
/* Seamless Raisely embed — no card, no border, no shadow. The form sits directly on the
   page so there is no box and no framed empty space.

   Height: Raisely's embed.js is meant to auto-size the iframe from a `form.resized`
   postMessage, but this form theme never emits one (verified by capturing the handshake),
   so we set the height ourselves. It is fitted to the FIRST step — the amount selection,
   which is what a visitor lands on — so that step fills the frame with no trailing empty
   space. The taller later steps (details, payment) scroll within the bare iframe. There
   is no way to auto-fit a cross-origin iframe to its content from the parent, so this is
   the closest to seamless a fixed embed gets.

   Measured amount step: 527px on desktop, 644px on a phone. --raisely-h carries a small
   buffer over each. */
/* Two heights per form. --raisely-h fits the FIRST step (the amount/landing view), so on
   load there is no empty space below the form. --raisely-h-full fits the taller later
   steps (Your Details, payment). main.js swaps to the full height by adding .is-advanced
   when Raisely reports the donor has moved past the first step, so no step ever scrolls.

   If those step messages ever fail to arrive, the frame simply stays at the landing
   height and the later steps scroll — the landing still has no empty space. Measured:
   donation 527 → 685; membership 260 → 651. Heights carry a small buffer over each. */
.raisely-embed { margin: 1.25rem 0 1.5rem; --raisely-h: 560px; --raisely-h-full: 960px; }
@media (max-width: 620px) { .raisely-embed { --raisely-h: 690px; --raisely-h-full: 1040px; } }

/* Membership: a fixed $20 makes its first step much shorter (260px), so its landing
   height is smaller; the later steps are the same order as the donation form. */
.raisely-embed--compact { --raisely-h: 300px; --raisely-h-full: 940px; }
@media (max-width: 620px) { .raisely-embed--compact { --raisely-h: 380px; --raisely-h-full: 1020px; } }

/* Raisely nests wrapper divs between the container and the iframe; keep them from adding
   any height or box of their own. */
.raisely-embed > div,
.raisely-embed > div > div {
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.raisely-embed iframe {
  display: block;
  width: 100% !important;
  height: var(--raisely-h) !important;
  border: 0;
  background: transparent;
  vertical-align: top;
  transition: height .25s ease;
}
/* Grown to fit the taller later steps once the donor moves past the first step. */
.raisely-embed.is-advanced iframe { height: var(--raisely-h-full) !important; }

/* Route out if the third-party embed fails to load at all. */
.embed-fallback {
  font-size: .88rem;
  color: var(--muted-2);
  margin: -.5rem 0 2rem;
}

/* ── Newsletter list (rows) ──────────────────────────────────── */
.newsletter-list { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0 1.75rem; }
.nl-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: .8rem 1.15rem; color: var(--ink);
  transition: border-color .18s, box-shadow .18s, transform .12s;
}
.nl-item:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); transform: translateY(-1px); color: var(--ink); }
.nl-title { font-weight: 600; }
.nl-dl { font-size: .8rem; font-weight: 700; color: var(--orange-700); white-space: nowrap; }
.nl-item:hover .nl-dl { color: var(--orange); }

/* ============================================================
   MIGRATED (WordPress) content compatibility
   ============================================================ */
.migrated-content { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.migrated-content a { overflow-wrap: anywhere; word-break: break-word; }
.migrated-content figure { margin: 1.25rem 0; max-width: 100%; }
.migrated-content img { border-radius: var(--radius-md); margin: 1rem 0; }
.migrated-content .wp-caption { max-width: 100% !important; width: auto !important; margin: 1rem 0; }
.migrated-content .wp-caption-text, .migrated-content figcaption { font-size: .82rem; color: var(--muted-2); margin-top: .4rem; }
.migrated-content .map-embed { margin: 1rem 0; }
.migrated-content .map-fallback { font-size: .88rem; margin: .5rem 0 1.25rem; }
.migrated-content .wp-video, .migrated-content video, .migrated-content embed, .migrated-content object { display: block; max-width: 100%; width: 100% !important; height: auto; }
.migrated-content iframe { display: block; width: 100% !important; max-width: 100%; aspect-ratio: 16 / 9; height: auto !important; border: 0; border-radius: var(--radius-md); margin: 1rem 0; }
.migrated-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; border-collapse: collapse; margin: 1rem 0; }
.migrated-content td, .migrated-content th { border: 1px solid var(--line); padding: .55rem .7rem; }
.migrated-content th { background: var(--bg-2); text-align: left; }
.migrated-content .grid.col-620, .migrated-content .grid.col-300 { width: 100%; max-width: 100%; }

/* WordPress NextGEN galleries */
.migrated-content .ngg-galleryoverview { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .85rem; margin: 1.25rem 0 1.5rem; }
.migrated-content .ngg-gallery-thumbnail-box { margin: 0; }
.migrated-content .ngg-gallery-thumbnail a { display: block; line-height: 0; }
.migrated-content .ngg-gallery-thumbnail img { width: 100%; height: auto; margin: 0; border-radius: var(--radius-md); cursor: zoom-in; transition: transform .2s var(--ease), box-shadow .2s; }
.migrated-content .ngg-gallery-thumbnail a:hover img { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.migrated-content .ngg-clear { display: none; }

/* migrated two-col layout → readable single flow on the new grid */
.migrated-content .post-entry { display: block; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--green-900); color: rgba(246,243,230,.62); padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(246,243,230,.1); margin-bottom: 1.75rem; }
.footer-logo { display: flex; align-items: center; gap: .65rem; }
.footer-logo img { width: 88px; height: auto; }
.footer-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.footer-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--bar-text-hi); }
.footer-brand-sub { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(246,243,230,.4); margin-top: 2px; }
.footer-brand p { margin-top: .9rem; font-size: .88rem; color: rgba(246,243,230,.55); max-width: 34ch; line-height: 1.7; }
.footer-brand a { color: var(--green-300); }
.footer-col h4 { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--green-300); margin-bottom: 1rem; }
.footer-col ul li a { color: rgba(246,243,230,.6); font-size: .9rem; display: block; padding: .25rem 0; }
.footer-col ul li a:hover { color: var(--bar-text-hi); }
.footer-contact address { font-style: normal; font-size: .88rem; color: rgba(246,243,230,.6); line-height: 1.8; }
.footer-email { display: inline-block; margin-top: .6rem; color: var(--green-300); font-size: .9rem; font-weight: 600; }
.footer-social { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; color: rgba(246,243,230,.6); font-size: .88rem; transition: color .2s var(--ease); }
.footer-social:hover { color: var(--green-300); }
.footer-social svg { flex-shrink: 0; }
/* One full-width line — copyright and credits run together and wrap naturally, aligned to
   the same left margin as the acknowledgement above (no separate indent). Font scales with
   the root size like the rest of the site. */
.footer-bottom { margin: 0; font-size: .8rem; line-height: 1.6; color: rgba(246,243,230,.42); }
.footer-bottom + .footer-bottom { margin-top: .4rem; }
.footer-bottom a { color: rgba(246,243,230,.55); text-decoration: underline; text-underline-offset: 2px; transition: color .2s var(--ease); }
.footer-bottom a:hover { color: var(--bar-text-hi); }

/* ── Acknowledgement of Country ───────────────────────────────
   Sits in the bottom matter under the single grid divider — no rule of its own
   (that would double the line) and no width cap, so it runs the full width. */
.acknowledgment {
  margin: 0 0 1rem;
  font-size: .78rem;
  line-height: 1.65;
  color: rgba(246,243,230,.55);
}


/* ============================================================
   UTILITIES (legacy + new)
   ============================================================ */
.text-rust { color: var(--orange-700); }
.text-amber { color: var(--amber); }
.text-muted { color: var(--muted-2); }
.text-bark { color: var(--ink); }
.text-teal { color: var(--orange-700); }
.text-forest { color: var(--green-700); }
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.75rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.75rem; }
.fw-600 { font-weight: 600; }
.lead { font-size: 1.12rem; color: var(--body); }

/* ============================================================
   ICONOGRAPHY
   ------------------------------------------------------------
   Icons are inline SVG, sized and coloured here rather than by the glyph metrics
   of an emoji font. Emoji rendered differently on every platform (and at wildly
   different weights next to our type), which was the single biggest thing making
   the page read as unfinished.
   ============================================================ */
.fact-card .fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: var(--orange-50);
  color: var(--orange-600);
}
.fact-card .fact-icon svg { width: 1.55rem; height: 1.55rem; }
.fact-card:hover .fact-icon { background: var(--orange-100); }

.alert-banner .alert-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 1px;
  color: #fff;
}
.alert-banner .alert-icon svg { width: 100%; height: 100%; }

.video-play svg { width: 1.15rem; height: 1.15rem; margin-left: 2px; }

/* Placeholder used where a post has no thumbnail. The element is empty — the bat mark
   is a background image so the same 20-odd placeholders do not each carry inline SVG.
   Was a 🦇 emoji, which rendered as a different picture on every operating system. */
.img-placeholder {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a3a877'%3E%3Cpath d='M12 7.1c-.62 0-1.13.37-1.38.9-.74-.62-1.7-1-2.75-1-1.13 0-2.16.43-2.93 1.14l.38 1.94-3.32-.72c0 3.19 2.47 5.82 5.66 6.07l1.34 1.65 1.24-1.44h3.52l1.24 1.44 1.34-1.65c3.19-.25 5.66-2.88 5.66-6.07l-3.32.72.38-1.94c-.77-.71-1.8-1.14-2.93-1.14-1.05 0-2.01.38-2.75 1-.25-.53-.76-.9-1.38-.9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 3.2rem;
  opacity: .55;
}

/* ============================================================
   SECTION RHYTHM + LAYOUT HELPERS
   ------------------------------------------------------------
   These replace per-element inline styles that had drifted apart across pages
   (each hand-written margin was slightly different, which is what made the
   vertical spacing look accidental).
   ============================================================ */
.section--tight-bottom { padding-bottom: 0; }

.container--narrow { max-width: 760px; }
.container--centered { max-width: 720px; text-align: center; }

.section-subtitle--tight { margin-bottom: 1.5rem; }

/* One shared treatment for the "see everything" link that closes a section. */
.section-cta { margin-top: 2.25rem; text-align: center; }
.section-cta--start { text-align: left; }

.hero-ctas--centered { justify-content: center; }

/* On the dark bands, headings and subtitles need the light end of the palette.
   Previously each page set this inline, so any new section forgot to. */
.section-bark .section-title,
.section-bark-dark .section-title { color: #fff; }
.section-bark .section-subtitle,
.section-bark-dark .section-subtitle { color: rgba(246,240,226,.8); }
.container--centered .section-subtitle { margin-left: auto; margin-right: auto; }

.bat-bg-inner { position: relative; z-index: 1; }

.videos-grid { margin-top: 2rem; }

/* ── Mission block ──────────────────────────────────────────── */
.mission-block .lead { margin-bottom: 1.5rem; }
.mission-cta { margin-top: 1.75rem; }
.mission-media {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.mission-aims li a { color: var(--body); }
.mission-aims li a:hover { color: var(--orange-700); }
.bushcare-banner { margin-top: 1.5rem; }

/* ── Bats split (homepage: flying-foxes vs microbats) ───────── */
.bats-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}
.bats-col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  /* Flex column so both cards match height and the "Explore →" link sits on the same
     baseline in each, regardless of how much body text differs between them. */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bats-col .read-more { margin-top: auto; }
.bats-split { align-items: stretch; }
.bats-col-figure { margin: 0 0 1rem; }
.bats-col-figure img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.bats-col h3 { font-size: 1.4rem; color: var(--green-800); margin-bottom: .75rem; }
.bats-col h3 a { color: inherit; }
.bats-col h3 a:hover { color: var(--orange-700); }
.bats-col > p { font-size: .95rem; color: var(--muted-2); margin-bottom: 1.1rem; }

/* Bulleted list with a tick marker — used inside .bats-col. */
.tick-list { list-style: none; margin-bottom: 1.25rem; }
.tick-list li {
  position: relative;
  padding: .4rem 0 .4rem 1.6rem;
  font-size: .94rem;
  color: var(--body);
  border-bottom: 1px solid var(--line);
}
.tick-list li:last-child { border-bottom: 0; }
.tick-list li::before {
  content: '';
  position: absolute;
  left: .15rem; top: .95rem;
  width: .42rem; height: .72rem;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
}


/* ── Feature figure (large image inside a prose column) ─────── */
/* Responsive grid of .feature-figure covers -- same image+caption treatment as a
   .feature-split pair, just N-up instead of fixed 2-up. */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.75rem 1.5rem; margin: 1.5rem 0; }
.feature-figure { margin: 0 0 1.75rem; }
.feature-figure img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
/* When the cover image itself links to the source (document previews), give it the
   same hover affordance as a gallery thumbnail. */
.feature-figure > a { display: block; transition: transform .2s var(--ease), box-shadow .2s; }
.feature-figure > a:hover img { box-shadow: var(--shadow-md); }
.feature-figure > a:hover { transform: translateY(-3px); }
.feature-figure figcaption {
  font-size: .84rem;
  color: var(--muted-2);
  margin-top: .6rem;
  line-height: 1.5;
}

/* ── Species list (microbats) ───────────────────────────────
   Two columns of name + binomial that collapse to stacked rows on narrow screens.
   A table would not reflow this cleanly on a phone. */
.species-key {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--muted-2);
  margin-bottom: 1rem;
}
.species-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  margin-left: .35rem;
  border-radius: 4px;
  font-size: .66rem;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: .03em;
  vertical-align: middle;
}
.species-key .species-tag { margin-left: 0; }
.species-tag--v { background: var(--orange-100); color: var(--orange-700); }
.species-tag--e { background: var(--ember-100); color: var(--ember); }

.species-list { list-style: none; margin: 0 0 1.75rem; }
.species-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .6rem .2rem;
  border-bottom: 1px solid var(--line);
}
.species-list li:first-child { border-top: 1px solid var(--line); }
.species-common { font-weight: 600; color: var(--ink); }
.species-sci { color: var(--muted-2); font-size: .92rem; }

@media (max-width: 520px) {
  .species-list li { display: block; }
  .species-sci { display: block; margin-top: .15rem; }
}

/* ── Component lists inside prose ────────────────────────────
   `.content ul li` styles every list item in a prose column as a flex row with an
   orange bullet injected via ::before. The species list is a component with its own
   layout and markers, so it opts out — and needs two classes to do it, because
   `.content ul li` (0,1,2) outranks a bare `.species-list li` (0,1,1). Without this
   the species rows never stack on a phone. */
.content .species-list li::before { content: none; }

.content .species-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .6rem .2rem;
}

@media (max-width: 520px) {
  .content .species-list li { display: block; }
}

/* ============================================================
   LARGE SCREENS
   ------------------------------------------------------------
   Above ~1600px the fixed 1180px measure left the page marooned in the middle of
   the viewport. The container opens up in steps so wide monitors gain content
   width without the body text exceeding a comfortable line length (the prose
   column inside .content stays capped separately).
   ============================================================ */
@media (min-width: 1500px) {
  :root { --max: 1320px; }

  /* The hero stays full-bleed while the sections below are centred in --max. Left
     unattended that reads as a mistake: the hero text ran hard against the left edge
     while a wide gap opened between it and the photo, and it did not line up with any
     content underneath. Padding the copy to the container's own left edge puts the
     headline on the same vertical line as every heading below it.

     100vw counts the scrollbar and .container centres inside the content box, so this
     lands about half a scrollbar (~8px at 1920) right of the headings below. That is
     below the visible threshold; matching it exactly would need the scrollbar width in
     CSS, which is not available without script. */
  .hero-inner, .hero-copy {
    max-width: none;
    padding-left: max(
      clamp(1.25rem, 4vw, 3.75rem),
      calc((100vw - var(--max)) / 2 + clamp(1rem, 4vw, 2rem))
    );
    padding-right: clamp(2.5rem, 4vw, 4.5rem);
  }
  .hero-copy > * { max-width: 620px; }
}

@media (min-width: 1900px) {
  :root { --max: 1440px; }
  /* Nudge the base size up so type keeps pace with the extra width rather than
     shrinking optically on a large monitor. */
  html { font-size: 17px; }
}

/* ============================================================
   RESPONSIVE — content layout
   ============================================================ */
@media (max-width: 980px) {
  /* Stack, and keep photo + text + buttons within one screen. The image is capped so it
     never crowds the copy off the bottom; the stack is centred in the remaining height. */
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; }
  .hero-inner, .hero-copy {
    max-width: none; order: 2;
    padding: clamp(1.1rem, 4vw, 1.9rem) clamp(1.25rem, 5vw, 2rem);
  }
  .hero-media { order: 1; height: 26svh; min-height: 150px; max-height: 260px; }
  .hero-lead { font-size: .98rem; margin-bottom: 1.25rem; }
  .hero h1 { margin-bottom: .85rem; }

  /* Short phones (e.g. iPhone SE, 667 tall): shave the image and copy spacing further so
     the photo, headline and both buttons still all fit on the first screen. */
  @media (max-height: 700px) {
    .hero-media { height: 20svh; min-height: 120px; }
    .hero-copy { padding-top: .9rem; padding-bottom: .9rem; }
    .hero-lead { margin-bottom: .9rem; }
    .hero h1 { margin-bottom: .6rem; }
  }
  .mission-block { grid-template-columns: 1fr; }
  .feature-split { grid-template-columns: 1fr; }
  .feature-split.reverse > *:first-child { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-layout { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .sidebar { position: static; width: 100%; }
  .sidebar-nav { display: flex; flex-wrap: wrap; gap: .25rem; border-left: 0; }
  .sidebar-nav li a { border-left: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); margin-left: 0; padding: .4rem .85rem; }
  .sidebar-nav li a.active, .sidebar-nav li a:hover { border-color: var(--orange); }
}

@media (max-width: 640px) {
  .hero h1 { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }
  .hero-lead { font-size: .94rem; margin-bottom: 1.1rem; }
  /* On phones the copy overlays the bat. The image fills the hero height exactly (no
     vertical crop), so the face sits at a fixed ~55-65% down and can't be moved by the
     background position. Instead, fill the hero height and pin the buttons to the bottom:
     the headline + lead sit at the top, the CTAs sit low over the water, and the bat's
     face shows cleanly in the gap between them rather than under the text. */
  .hero.hero--photo { align-items: stretch; }
  .hero.hero--photo .hero-copy {
    display: flex; flex-direction: column;
    /* Height-proportional bottom padding lifts the buttons off the very bottom to sit
       just below the bat's face (which is ~66% down the hero), so the face is framed
       snugly between the lead and the CTAs instead of floating in a big empty gap. */
    padding-bottom: max(2.75rem, calc(33svh - 130px));
  }
  .hero.hero--photo .hero-ctas { margin-top: auto; }
  /* Compact CTAs kept in a row (wrapping only if the labels truly can't fit), so both
     stay above the fold. Stacking them full-width pushed the second button off screen. */
  .hero-ctas { flex-direction: row; flex-wrap: wrap; gap: .55rem; }
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary {
    text-align: center; padding: .62rem 1.1rem; font-size: .9rem;
  }
  .blog-item { flex-direction: column; height: auto; }
  .blog-item-img { width: 100%; height: 180px; }
  .news-grid, .species-grid, .facts-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .bushcare-banner { flex-direction: column; align-items: flex-start; }
  .photo-gallery { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .migrated-content .ngg-galleryoverview { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .content h2 { margin-top: 1.8rem; }
}

@media (max-width: 380px) {
  .photo-gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Nested items in the Reserve sidebar — the three monitoring detail pages sit under
   "Monitoring & research" rather than as siblings of the main sections. */
.sidebar-nav-child a { padding-left: 1.6rem; font-size: .88rem; }


/* Membership page lead-in. Sits between the hero and the embed so the form's amount
   buttons do not read as pinned to the top of the page. */
.join-intro-title { font-size: 1.4rem; color: var(--green-800); margin-bottom: .6rem; }
.join-intro { max-width: 62ch; margin-bottom: 1.75rem; }

/* ── Donate page: content + info sidebar ─────────────────────
   Mirrors the Paddy Pallin Foundation donate layout — prose on the left, a stack of
   info boxes on the right. The default .page-layout puts a 220px nav sidebar FIRST;
   this variant flips the order and widens the aside, because it carries content
   (tax status, charity registration, a contact CTA) rather than navigation. */
.page-layout--donate { grid-template-columns: minmax(0, 1fr) 300px; }

.donate-aside {
  position: sticky;
  top: calc(var(--topbar-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.info-box {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.35rem;
}
.info-box h4 {
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 700;
  color: var(--green-800);
  margin-bottom: .5rem;
}
.info-box p { font-size: .88rem; color: var(--muted-2); line-height: 1.6; margin: 0; }
.info-box p + p { margin-top: .5rem; }

/* The ACNC Registered Charity Tick. Mono-mark on a light panel — centred, capped so it
   never dominates the column. */
.info-box--badge { text-align: center; }
.charity-badge-img {
  width: 108px;
  height: auto;
  margin: 0 auto .75rem;
}
.info-box--badge p { font-size: .8rem; }

.info-box-btn { display: block; text-align: center; margin-top: .9rem; }

/* Stack the aside under the prose before the columns get too narrow to read. The
   default .page-layout breakpoint is 980px and applies to the nav variant; this
   variant needs the same treatment. */
@media (max-width: 980px) {
  .page-layout--donate { grid-template-columns: minmax(0, 1fr); }
  .donate-aside { position: static; }
}

/* ── Bat rescue: alert callout + contacts panel ── */
.callout--alert { background: var(--ember-100); border-left-color: var(--ember); }

.rescue-contacts {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}
.rescue-contacts h2 { margin-top: 0; font-size: 1.15rem; }
.rescue-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
  margin: .9rem 0;
}
.rescue-contact {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
}
.rescue-contact-name { display: block; font-weight: 600; color: var(--green-800); font-size: .9rem; text-decoration: none; }
a.rescue-contact-name:hover { color: var(--orange-700); text-decoration: underline; }
.rescue-contact-phone { display: inline-block; margin-top: .25rem; font-size: 1.2rem; font-weight: 700; color: var(--orange-700); }
.rescue-contact-phone:hover { color: var(--orange); }
.rescue-contacts-note { font-size: .86rem; color: var(--muted-2); margin: 0; }

/* Lead image at the top of a news article. Sits inside .migrated-content, so it needs
   its own sizing rather than the generic migrated img rules. */
.blog-hero-figure { margin: 0 0 1.5rem; }
.blog-hero-figure img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.blog-hero-figure figcaption {
  font-size: .82rem;
  color: var(--muted-2);
  margin-top: .55rem;
  line-height: 1.5;
}