/* ==========================================================================
   Alberta Aboriginal Head Start Association
   Design tokens + fixed-background shell + translucent navigation
   ========================================================================== */

:root {
  /* --- Brand (sampled from AHS_Logo_Final.pdf) --- */
  --gold:        #FBC707;
  --gold-deep:   #E0A800;
  --red:         #D91920;
  /* The filled call-to-action. Was brand gold; the client asked for the
     buttons to match the deep reds the rest of the site now uses. */
  --btn-red:     #8A2018;
  --btn-red-deep:#5E150F;
  --btn-red-lit: #A02A1F;
  --ink:         #231F20;

  /* --- Night sky (sampled from the aurora photograph) --- */
  --navy-900:    #05091A;
  --navy-800:    #0B1430;
  --navy-700:    #16224A;
  --aurora:      #4FE3B0;   /* the green curtain */
  --aurora-dim:  #2FA37F;
  --ember:       #E87A2B;   /* the sunset band on the horizon */

  /* --- Neutrals --- */
  /* Matched to the hero artwork, not chosen freely. The cream shoreline is
     painted into page-scene-*.webp and encodes as #F8F3E9; the token used to be
     #F7F3EA, so every page put a 1-unit step where the wave met the section
     below it. A one-unit step between two large flat fields is exactly the case
     the eye picks up, and it read as a visible seam across the full width. If
     the artwork is ever re-exported, sample its bottom row and match this. */
  --cream:       #F8F3E9;
  --cream-soft:  rgba(247, 243, 234, 0.74);
  --hairline:    rgba(247, 243, 234, 0.14);

  /* --- The nav's see-through-ness ---------------------------------------
     1.00 = solid, 0 = invisible. This is the base value; the bar layers a
     gradient on top so its bottom edge fades into the photo.

     At 0.75 over a night sky the bar just looked black — there was nothing
     bright behind it to show through. 0.38 + the blur below actually reads
     as glass. Raise it toward 0.75 if you want it heavier.
     -------------------------------------------------------------------- */
  --nav-alpha:   0.38;

  /* --- Type --- */
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Metrics ---
     The mark is a wide 2.67:1 strip of five blocks, so it needs real height
     before the inner symbols (inukshuk, feather, drum) become legible.
     That's what drives the bar height — not the other way around. */
  --nav-h:   120px;
  /* --nav-h is a per-breakpoint MIN height for the bar. The nav's real height is
     fluid (the logo scales with vw, the links can wrap), so it is often taller.
     nav.js measures it into --nav-actual; this fallback keeps pre-JS renders
     sane. The header artwork reaches up by the measured value, not the guess. */
  --nav-actual: var(--nav-h);
  --mark-h:  78px;
  --gutter:  clamp(1.25rem, 4vw, 3rem);

  /* Half the gap between sections. Every section pays this top and bottom, so
     the visible gap between any two is twice this value. Everything that sits
     between sections uses the same token, or the rhythm drifts. */
  --section-gap: clamp(2.5rem, 6vh, 4.5rem);
  --measure: 68ch;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Keeps a short phrase whole — an en dash is a break opportunity, so
   "ages 3-5" was stranding the 5 on its own line. */
.nowrap { white-space: nowrap; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--cream);
  background-color: var(--navy-900); /* shows while the photo loads */
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------------------
   THE FIXED BACKGROUND

   Deliberately NOT `background-attachment: fixed` — that is broken on iOS
   Safari and janky on Android. A fixed-position layer behind the content
   does the same job and works everywhere.
   -------------------------------------------------------------------------- */
.backdrop {
  /* Was position:fixed (a pinned parallax layer). Now it's an absolute banner
     the height of the first screen, so it scrolls away with the page and the
     solid-colour sections below rise over it — no fixed background. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: -2;
  background-image: url("../img/bg-mobile.webp");
  background-size: cover;
  background-position: 62% 30%; /* favours the child on the right; a touch lower
                                   anchor lifts her up in the frame while still
                                   leaving headroom above her flower */
  background-repeat: no-repeat;
  /* Lift the photograph so the classroom and the child read brighter and the
     hero doesn't feel heavy/dark. The overlay below still keeps the copy area
     dark enough for white text. */
  filter: brightness(1.22) saturate(1.05);
}

@media (min-width: 800px) {
  .backdrop { background-image: url("../img/bg-1920.webp"); }
}
@media (min-width: 1800px) {
  .backdrop { background-image: url("../img/bg-desktop.webp"); }
}

/* A light scrim to keep the hero text off a busy sky. It used to ramp to 82%
   black at the bottom — directly over the two children — back when body copy
   sat straight on the photo. The content lives on cream cards now, so the
   scrim can be far gentler and let the foreground read. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The hero is now a photograph with the child on the right and the headline
     copy on the left. A horizontal ramp keeps the left side dark enough for
     white text to read while letting the child stay clear on the right; a
     gentle top-and-bottom wash steadies the nav bar and the lower CTA line. */
  /* Warm charcoal-brown, sampled from the classroom rather than the old cold
     navy — the left reads as a soft warm shadow, not a cold void. A radial pool
     anchored behind the copy feathers the darkening out in every direction, so
     it reads as pooled light rather than a hard-edged panel with a vertical
     seam down the middle of the frame. */
  /* The photograph itself was lifted (it was a dim classroom), so the hero reads
     lighter everywhere — including the right side, which the scrim barely touched.
     The pool keeps its original density because it is now working against a
     brighter plate and still has to carry white and gold copy at AA. */
  background:
    radial-gradient(
      128% 125% at 16% 44%,
      rgba(28, 19, 12, 0.86) 0%,
      rgba(28, 19, 12, 0.76) 28%,
      rgba(28, 19, 12, 0.42) 46%,
      rgba(28, 19, 12, 0.14) 58%,
      rgba(28, 19, 12, 0.02) 70%,
      rgba(28, 19, 12, 0.00) 80%
    ),
    linear-gradient(
      to bottom,
      rgba(28, 19, 12, 0.10) 0%,
      rgba(28, 19, 12, 0.00) 22%,
      rgba(28, 19, 12, 0.00) 82%,
      rgba(28, 19, 12, 0.03) 100%
    );
}

/* Below 1200px the copy stacks over the full width (the two-column hero only
   forms on wide screens), so the horizontal ramp can't carry it — the breakpoint
   moved up from 799px because 800-1199px was failing contrast on the radial.
   Deepen to an even veil the child still shows
   through. Deepened again when the photograph was lifted: with a brighter plate
   underneath, the old 0.55 veil dropped the lede to 2.5:1. Measured, not guessed. */
@media (max-width: 1199px) {
  .backdrop::after {
    background:
      linear-gradient(
        to bottom,
        rgba(28, 19, 12, 0.72) 0%,
        rgba(28, 19, 12, 0.67) 45%,
        rgba(28, 19, 12, 0.77) 100%
      );
  }
}

/* The photographic hero is the homepage's alone. On every other page the same
   full-bleed layer stays, but as a flat brand-navy band behind the page title —
   no photo, no scrim — so the child's portrait doesn't repeat as a banner site
   wide. The cream body still rises over it below the title. */
/* Inner pages: the flat top band is the sky of the illustrated scene, so the
   area behind the nav and above the title matches the artwork seamlessly. The
   scene itself (moon, trees, waves, cream ground) is painted by
   .page-head--aurora::before, pinned to the header's own bottom. */
.page-inner .backdrop {
  background-image: none;
  background-color: #89827F;   /* sampled average of the scene photo */
}
.page-inner .backdrop::after { display: none; }

/* The illustrated header scene. A full-bleed layer anchored to the bottom of
   the page title band: the cream ground of the artwork lands exactly where the
   cream page content begins, so the wave IS the transition (the old white SVG
   divider is retired below). Anchored to the header's own bottom via the
   section's position:relative, it stays aligned no matter how tall the title
   block is on a given page. Sits behind the title (z-index below the text) and
   above the flat backdrop. */
.page-inner .page-head--aurora::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  top: calc(-1 * var(--nav-actual));   /* reach up behind the nav so the sky is one piece */
  bottom: -1px;                    /* tuck the artwork's cream edge under the content */
  z-index: -1;
  pointer-events: none;
  background-color: #89827F;
  background-image: url("../img/page-scene-1920.jpg");
  background-image: url("../img/page-scene-1920.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  /* cover, not `100% auto`. Tying the height to the width left the top of this
     layer uncovered whenever the header was taller than the picture is wide --
     14px at 1920, but 360px on a phone. The old scene got away with it because
     its sky was a flat colour that matched the band exactly; a photograph shows
     the join as a hard line. `cover` fills the box at every size, and anchoring
     to the bottom keeps the cream shoreline on the header's bottom edge, which
     is what makes the wave read as the transition into the page. */
  background-size: cover;
}
/* The scene is painted at the full window width, so on a window (or a HiDPI
   screen) wider than the file the browser has to stretch it, and stretching is
   what softens the wave -- measured, edge contrast drops ~25% at 1.33x. Serve a
   2880px cut to anything that would otherwise upscale; it is the same artwork
   resampled with its band edges re-steepened, so the browser shrinks it instead
   of stretching it. Narrow, low-density screens keep the 1920 file (30KB vs
   55KB) because there they are already downscaling, which is sharp. */
@media (min-width: 1200px), (min-width: 700px) and (min-resolution: 1.5dppx) {
  .page-inner .page-head--aurora::before {
    background-image: url("../img/page-scene-2880.jpg");
    background-image: url("../img/page-scene-2880.webp");
  }
}
/* Phones, portrait. The header box here is taller than it is wide (about
   0.8:1), so `cover` had to blow the 3:1 panorama up 2.3x -- worse than any
   desktop -- and threw away three quarters of its width doing it. This is a
   portrait crop of the same scene, which covers that box at roughly 1:1. */
@media (max-width: 479px) {
  .page-inner .page-head--aurora::before {
    background-image: url("../img/page-scene-tall.jpg");
    background-image: url("../img/page-scene-tall.webp");
  }
}
/* Scrim. The old scene was a dark night sky, so cream type sat on it unaided.
   The photograph is bright — measured, the title was around 1.6:1 over the lit
   hills — so a warm shadow is laid over the picture, heaviest across the title
   band and gone before the artwork's cream shoreline begins.

   TWO layers, and both have to clear that shoreline. The linear one stops at
   73%. The radial one is the trap: its reach is measured from its own centre,
   so `62% at 50% 44%` fading out by 80% reached 44 + 0.8x62 = 93.6% of the
   header — past the shoreline, which starts at 84% in the middle of the wave
   where it rides highest. It tinted the top of the cream wave grey, worst dead
   centre, and no amount of matching the cream below would have fixed it. At a
   40% radius it is gone by 76%. Change this and re-measure the shoreline. */
.page-inner .page-head--aurora::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  top: calc(-1 * var(--nav-actual));
  bottom: -1px;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom,
      rgba(24, 13, 5, 0.64) 0%,
      rgba(24, 13, 5, 0.58) 16%,
      rgba(24, 13, 5, 0.38) 34%,
      rgba(24, 13, 5, 0.24) 48%,
      rgba(24, 13, 5, 0.12) 60%,
      rgba(24, 13, 5, 0.00) 73%),
    radial-gradient(120% 40% at 50% 44%,
      rgba(24, 13, 5, 0.18) 0%,
      rgba(24, 13, 5, 0.08) 55%,
      rgba(24, 13, 5, 0.00) 80%);
}

/* The artwork carries its own cream shoreline now, so the plain white wave that
   used to bridge the navy band and the page is no longer needed on inner pages. */
.page-inner .page-head--aurora .hero-divider { display: none; }

/* Lifts the header copy above the photo (::before) and its scrim (::after),
   both of which sit at or below z-index 0. */
.page-inner .page-head--aurora > * { position: relative; z-index: 1; }

/* Size the header to the scene so the title rests on the night sky and the
   moon, trees and waves sit in the band below it. The header is given the
   scene's own proportions (~42vw tall at full width) with a floor for narrow
   screens; the lower reserve (padding-bottom) keeps the centred title clear of
   the wave zone that rises from the bottom edge. */
.page-inner .page-head--aurora {
  /* Nudge the title block down into the sky. Adding to the top and taking the
     same amount off the bottom keeps the header's height — and therefore the
     artwork's crop — exactly as it was, so only the copy moves. */
  /* Scaled: on a phone the sub wraps to three lines and a full 2rem drop puts
     the last line on the wave crest, so the nudge eases in with width. */
  --head-shift: clamp(0.4rem, 2vw, 2rem);
  min-height: max(15rem, 23vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(clamp(2rem, 4vh, 3.25rem) + var(--head-shift));
  padding-bottom: calc(clamp(5.5rem, 12.5vw, 14rem) - var(--head-shift));
  color: var(--cream);
}
/* The illustrated header flows straight into the page: the artwork ends in its
   cream shoreline, so the first band of content sits close beneath it rather
   than after a full section's worth of empty cream. */
.page-inner .lightbg--cream > .section:first-child,
.page-inner .lightbg--cream > .feature-band:first-child,
.page-inner .lightbg--cream > .wrap:first-child {
  padding-top: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* The Board and Leadership pages paint their own cream background (.dir) instead
   of sitting inside .lightbg--cream, so the rule above never reached them and
   they opened ~50px lower under the scene than every other inner page. Give
   .dir the same first-band top gap, and drop .dir__intro's own top padding when
   it is the leading block so the two don't stack. */
/* Leadership/Board open a little higher than the other inner pages: their intro
   is a centred title block rather than a card, so it can sit closer to the wave. */
.page-inner .dir { padding-top: clamp(1rem, 1.3vw, 1.25rem); }
.page-inner .dir__inner > .dir__intro:first-child { padding-top: 0; }

/* Two adjacent .section siblings each pay a full --section-gap, so the break
   between them came to ~108px - half again the gap either one asks for. Halve
   the second one's share. Scoped to .page-inner so the homepage bands, which
   are deliberately wider apart, are untouched. */
.page-inner .lightbg--cream > .section + .section { padding-top: clamp(0.75rem, 1.5vw, 1.375rem); }

/* A .glance band pays a 64px margin either side, but ~44px of that is runway for
   its own wave, which is absolutely positioned OUTSIDE the band — so the margin
   stays. What is free is the neighbouring sections' own padding, which was
   stacking a further 60px on top. Trim that side only. */
.page-inner .lightbg--cream > .glance + .section { padding-top: clamp(1.25rem, 2.5vw, 2.25rem); }
.page-inner .lightbg--cream > .section:has(+ .glance) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-inner .page-head--aurora .h-xl,
.page-inner .page-head--aurora .eyebrow,
.page-inner .page-head--aurora .sub { color: var(--cream); }
/* A soft shadow under the header copy. The scrim alone would have to be much
   heavier to carry the few words that cross the sun, and that would flatten the
   photograph everywhere else; a halo lifts only the pixels that need it. */
.page-inner .page-head--aurora .h-xl,
.page-inner .page-head--aurora .eyebrow,
.page-inner .page-head--aurora .sub {
  text-shadow: 0 1px 16px rgba(24, 13, 5, 0.58), 0 1px 4px rgba(24, 13, 5, 0.42);
}

/* Over the scene, the glassy bar is tinted in the scene's own sky hue (not the
   near-black brand navy) and loses its pale hairline, so the top of the page
   reads as one continuous night sky rather than a darker strip above the art.
   The solid fill that rises on scroll (.nav::before) is untouched, so once cream
   content is behind the bar it still goes solid navy. */
.page-inner .nav {
  /* Fully see-through over the scene (like the homepage nav over the hero photo).
     The blur+saturate frosting that reads invisibly over a photo turned the strip
     behind the bar into a lighter rectangle over the near-flat night sky, so its
     lower edge looked like a seam. The sky behind is dark enough for the light
     links without any frosting. The solid fill still rises on scroll (.nav::before)
     once cream content is behind the bar. */
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Homepage only: warm the glassy nav tint to match the warm photo hero, so the
   top edge doesn't read cooler than the image. The solid layer that fades in on
   scroll (.nav::before) stays navy, matching the cream content below. */
.page-home .nav {
  background: linear-gradient(
    to bottom,
    rgba(28, 19, 12, 0.52) 0%,
    rgba(28, 19, 12, 0.40) 100%
  );
}

/* --------------------------------------------------------------------------
   NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--nav-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem var(--gutter);
  padding-inline: var(--gutter);
  padding-block: 0.7rem;

  /* A semi-opaque tint (no backdrop blur — the blur is the single biggest
     scroll cost, and it re-computed every frame because the bar is sticky).
     The tint alone carries link legibility over the hero photo; the solid fill
     still rises on scroll (.nav::before) as content passes behind the bar. */
  /* Deep brand red rather than navy, and still see-through: the alphas are
     unchanged, so the photo reads through the bar exactly as it did. */
  background: linear-gradient(
    to bottom,
    rgba(94, 21, 15, 0.34) 0%,
    rgba(94, 21, 15, 0.26) 100%
  );
  border-bottom: 1px solid rgba(247, 243, 234, 0.10);
}

/* Browsers without backdrop-filter (older Firefox) get a solid bar rather
   than unreadable text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(5, 9, 26, 0.94); }
}

/* --- Brand lockup: blocks mark + real text -------------------------------- */
.nav__brand {
  display: flex;
  align-items: center;     /* wordmark stays centred against the mark */
  gap: 1.1rem;
  flex-shrink: 0;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.nav__mark {
  height: var(--mark-h);
  width: auto;
  flex-shrink: 0;
}

.nav__wordmark {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav__name {
  max-width: 24ch;              /* wraps to two tidy lines instead of one long one */
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-wrap: balance;
}

.nav__tagline {
  margin-top: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--aurora);
  white-space: nowrap;
}

.nav__brand:hover .nav__name,
.nav__brand:focus-visible .nav__name { color: var(--gold); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--cream);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  /* The bar is deliberately thin now, so on a bright header photo the tint
     alone no longer carries the links — measured 4.1:1 over the sunset scene.
     A tight dark shadow does the work the opacity used to, without putting the
     colour back. */
  text-shadow: 0 1px 3px rgba(20, 4, 2, 0.98), 0 0 12px rgba(20, 4, 2, 0.82);
  transition: color 160ms ease;
}

/* Underline indicator removed — the active/hover state is shown by the gold
   text colour alone. */
.nav__link::after { content: none; }

.nav__link:hover,
.nav__link:focus-visible,
.nav__link.is-active { color: var(--gold); }

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-active::after { transform: scaleX(1); }

/* Apply — the one loud element on the bar */
.nav__cta {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-900);        /* 11.9:1 against the gold — well past AA */
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--gold-deep);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background: #FFD534;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(251, 199, 7, 0.32), 0 2px 0 var(--gold-deep);
}

.nav__cta:active { transform: translateY(1px); box-shadow: 0 0 0 var(--gold-deep); }

/* The in-menu Apply only appears inside the mobile slide-in panel. */
.nav__cta--in-menu { display: none; }

/* Hamburger (mobile only) */
.nav__toggle {
  display: none;
  align-self: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: var(--cream);
}

.nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 220ms ease, opacity 160ms ease;
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Keyboard focus — visible on every interactive element */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link for screen readers / keyboard users */
.skip {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  z-index: 200;
  padding: 0.7rem 1.2rem;
  background: var(--gold);
  color: var(--navy-900);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 160ms ease;
}
.skip:focus { top: 0; }

/* --- Mobile nav ----------------------------------------------------------- */
@media (max-width: 1079px) {
  .nav__toggle { display: block; margin-left: auto; }

  .nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    display: grid;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;

    /* The bar itself is deliberately thin, but this panel covers the page:
       at the same opacity the hero text read straight through the menu
       items. An overlay you choose from has to be legible. */
    background: rgba(94, 21, 15, 0.97);
    border-bottom: 1px solid var(--hairline);

    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  }

  .nav__menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    padding: 1rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--hairline);
  }

  /* Stacked links: the gold rule becomes a left-edge bar */
  .nav__link::after {
    left: -12px;
    right: auto;
    top: 50%;
    bottom: auto;
    width: 3px;
    height: 22px;
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
  }
  .nav__link:hover::after,
  .nav__link:focus-visible::after,
  .nav__link.is-active::after { transform: translateY(-50%) scaleY(1); }

  /* On phones the top-row Apply is dropped (it crowded the hamburger); the
     Apply pill lives at the foot of the slide-in menu instead. */
  .nav__cta--top { display: none; }
  .nav__cta--in-menu {
    display: inline-block;
    margin-top: 1.25rem;
    text-align: center;
    padding-block: 0.9rem;
  }
}

/* Tight phones: keep the mark, drop the tagline, shrink the name */
@media (max-width: 560px) {
  :root { --nav-h: 84px; --mark-h: 50px; }
  .nav__name    { font-size: 0.92rem; max-width: 16ch; }
  .nav__tagline { display: none; }
}

/* Medium widths (1080–1749px): full menu on its own row beneath the logo, with
   Apply kept up on the logo row. 11 items won't fit beside logo + Apply here. */
@media (min-width: 1080px) and (max-width: 1919px) {
  :root { --nav-h: 150px; }

  .nav__cta--top { order: 1; margin-left: auto; }   /* pushed to the top-right corner */
  .nav__menu {
    order: 2;
    flex-basis: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;                        /* menu sits under Apply */
    padding-top: 0.1rem;
  }
  .nav__links {
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(0.4rem, 1vw, 1.2rem);
  }
  .nav__link {
    font-size: clamp(0.68rem, 0.2rem + 0.62vw, 0.95rem);
    letter-spacing: 0.01em;
    padding: 0.3rem 0;
  }
}

/* Wide screens (1920px+): single row — logo, then the menu right-aligned next
   to Apply, with the empty space sitting between the logo and the menu. */
@media (min-width: 1920px) {
  :root { --nav-h: 112px; }

  .nav { flex-wrap: nowrap; align-items: flex-end; }
  /* Apply sits up in the top-right corner; the menu then runs full-width to the
     right so the last item (Contact Us) lands directly beneath it. */
  .nav__cta--top {
    position: absolute;
    top: 0.7rem;
    right: var(--gutter);
    padding: 0.5rem 1.15rem;      /* smaller pill */
    font-size: 0.85rem;
  }
  .nav__menu {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    align-self: flex-end;
    transform: translateY(6px);    /* drop the glyphs onto the tagline baseline */
  }
  .nav__links {
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: clamp(0.8rem, 1vw, 1.5rem);
  }
  .nav__link {
    font-size: clamp(0.78rem, 0.65rem + 0.2vw, 0.9rem);
    letter-spacing: 0.005em;
    padding: 0.3rem 0;
  }
}

/* ==========================================================================
   PAGE CONTENT
   Text sits on frosted navy panels so it is always legible; the aurora shows
   through the gaps between them.
   ========================================================================== */

.wrap {
  width: min(1120px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-gap); }

/* --- Type scale ----------------------------------------------------------- */
.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aurora);
}

.h-xl, .h-lg, .h-sm {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.h-xl { margin: 0 0 1.25rem; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.h-lg { margin: 0 0 1.25rem; font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
.h-sm { margin: 2rem 0 1rem; font-size: clamp(1.1rem, 2vw, 1.35rem); }

.sub {
  max-width: 62ch;
  margin: -0.4rem 0 2rem;
  color: var(--cream-soft);
  text-wrap: pretty;
}
.sub--wide { max-width: 70ch; }

.lede {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.62;
}

.note {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--cream-soft);
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  /* Fill the first fold, but stop growing past ~62rem so on tall monitors the
     copy isn't stranded in the middle of a giant box with huge empty bands
     above and below — the next section peeks up instead, cueing the scroll. */
  min-height: min(calc(100svh - var(--nav-h)), 62rem);
  /* Full-bleed (with the page gutter) so the copy's left edge lines up with the
     logo and nav — one shared left margin across the header and hero. */
  width: 100%;
  display: grid;
  align-content: center;
  justify-items: start;      /* copy sits in a left column; the photo's child
                                stays clear on the right half */
  /* Heavier bottom padding than top lifts the whole vertically-centred block
     up the screen — right on laptop-height viewports. On tall monitors that
     same lift opens a big empty band in the lower-left, so above ~940px tall
     the padding evens out and the block re-centres (see media query below). */
  /* Sit the copy a little below centre, robustly across real viewport heights
     (a 1920×1080 monitor gives the browser only ~900px after OS/browser chrome).
     Heavier top than bottom biases it downward; the vh terms stay small on
     short laptops so the block never overflows. */
  padding-block: clamp(1.5rem, 4.5vh, 4.5rem) clamp(1.75rem, 3.5vh, 4rem);
  /* Push the copy in from the gutter toward the child so it doesn't sit stranded
     at the far-left edge with a wide gap to her. Scales with the viewport. */
  padding-inline-start: calc(var(--gutter) + clamp(0px, 13vw, 300px));
  text-align: left;
  --hero-col: 40rem;
}
.hero > * { max-width: var(--hero-col); }

/* Large monitors (>1920px): the copy hits its size + shift caps at ~1920 and
   then stops, so on a 2560 screen it looks small and the child drifts away to
   the right. Above 1920 let the headline, lede and the rightward shift keep
   growing (continuous at 1920 so the ≤1920 look is unchanged) so the copy fills
   the frame and stays near her. */
@media (min-width: 1920px) {
  .hero {
    padding-inline-start: calc(var(--gutter) + clamp(250px, calc(250px + (100vw - 1920px) * 0.52), 780px));
  }
  .hero__title { font-size: clamp(3.5rem, calc(3.5rem + (100vw - 1920px) * 0.022), 4.7rem); }
  .hero__lede  { font-size: clamp(1.3rem, calc(1.3rem + (100vw - 1920px) * 0.004), 1.55rem); }
  .hero { --hero-col: clamp(40rem, calc(40rem + (100vw - 1920px) * 0.02), 52rem); }
}


/* The shade pool that used to sit here has been removed. Its radial gradient
   had a 70% radius inside a bounded box, so at the element's left and right
   edges it was still ~12% opaque and then stopped dead — a visible vertical
   seam either side of the hero. It existed to lift a dim grey lede off the
   photograph; that text is now full cream and clears AA unaided, so the pool
   was adding an artefact for no remaining benefit. */

.hero > * { position: relative; }

.hero .eyebrow {
  /* Brighter mint than the brand --aurora, with a soft shadow, so this small
     label actually reads over the warm photo instead of sinking into it. A
     touch larger and wider-tracked so it frames the headline. */
  color: #8FF0CC;
  text-shadow: 0 1px 10px rgba(20, 12, 6, 0.6);
  font-size: clamp(0.82rem, 0.76rem + 0.24vw, 0.95rem);
  letter-spacing: 0.2em;
  margin-bottom: 1.1rem;
}

.hero__title {
  margin: 0 0 1.5rem;
  max-width: 22ch;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  /* Smaller, calmer headline — the copy now sits closer to the child so it no
     longer needs to stretch across the frame to fill the space. */
  font-size: clamp(2.1rem, 3.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  /* Optical alignment: nudge the serif capital's stem out a hair so it lines up
     with the lede and eyebrow beneath it rather than sitting a touch inside. */
  text-indent: -0.02em;
  text-shadow: 0 2px 24px rgba(5, 9, 26, 0.9), 0 1px 3px rgba(5, 9, 26, 0.55);
}
.hero__title em { font-style: normal; color: var(--gold); }

.hero__lede {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: var(--cream);            /* 4.53:1 on the brightest aurora, unaided */
  text-shadow: 0 1px 3px rgba(5, 9, 26, 0.9), 0 2px 22px rgba(5, 9, 26, 0.85);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.85rem;
  margin-top: 2.25rem;
}
.panel .hero__actions { justify-content: flex-start; }

.page-head {
  /* No bottom padding. The section below already pays --section-gap on its
     top, which alone is the right distance here. A page title and the content
     directly beneath it are one unit — giving that boundary the SAME gap used
     between independent sections made the heading look detached from the thing
     it introduces. Proximity is what signals they belong together. */
  padding-block: clamp(3rem, 9vh, 5.5rem) 0;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.btn--primary {
  background: var(--btn-red);
  /* cream, not the near-black the gold button used: 8.2:1 on this red, and the
     dark text that worked on gold drops to 1.8:1 here. */
  color: var(--cream);
  box-shadow: 0 2px 0 var(--btn-red-deep);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--btn-red-lit);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(138, 32, 24, 0.32), 0 2px 0 var(--btn-red-deep);
}

.btn--ghost {
  background: rgba(247, 243, 234, 0.06);
  border-color: rgba(247, 243, 234, 0.28);
  color: var(--cream);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: rgba(247, 243, 234, 0.14);
  border-color: var(--cream);
  transform: translateY(-1px);
}

/* --- Panels --------------------------------------------------------------- */
.panel {
  padding: clamp(1.6rem, 3.5vw, 3rem);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: rgba(11, 20, 48, 0.82);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

.panel p { max-width: var(--measure); color: var(--cream-soft); }
.panel p:last-child { margin-bottom: 0; }
/* Only for panels stacked in normal flow. Inside a grid, adjacent siblings sit
   in separate cells, and this margin would push the second one down inside its
   own cell — which is exactly what knocked Mission and Vision out of line. */
.panel + .panel { margin-top: 1.25rem; }
.ltp__pair .panel + .panel,
.ltp__grid .panel + .panel,
.cards .panel + .panel,
.media .panel + .panel { margin-top: 0; }

.panel--cta { text-align: left; border-color: rgba(251, 199, 7, 0.28); }

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; } }

.quote-panel .signoff {
  margin-top: 1.5rem;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--gold);
}
.byline { font-size: 0.9rem; letter-spacing: 0.02em; }

/* --- Card grid ------------------------------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.card {
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: rgba(11, 20, 48, 0.8);
  transition: border-color 180ms ease, transform 180ms ease;
}
.card:hover { border-color: rgba(251, 199, 7, 0.4); transform: translateY(-2px); }

.card__icon { display: block; font-size: 1.7rem; line-height: 1; margin-bottom: 0.8rem; }

.card h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.25;
}
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--gold); }

.card p, .card address {
  margin: 0;
  font-size: 0.95rem;
  font-style: normal;
  color: var(--cream-soft);
}
.card a { color: var(--aurora); }

/* --- Numbered steps ------------------------------------------------------- */
/* Numbers are used here because enrollment genuinely is a sequence — step 4
   cannot happen before step 2. They carry information, not decoration. */
.steps {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: 0 16px 16px 0;
  background: rgba(11, 20, 48, 0.8);
}

.step__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-900);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
}

.step h3 {
  margin: 0.35rem 0 0.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
}
.step p { margin: 0; color: var(--cream-soft); }

/* --- People --------------------------------------------------------------- */
.people {
  display: grid;
  /* One column on phones; steps up below. The office team is nine people, so
     three across lands exactly three full rows with nothing stranded. */
  grid-template-columns: 1fr;
  gap: 0.9rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(247, 243, 234, 0.04);
}

/* Initials, not photos — the source site does the same for most staff, and it
   avoids 20 headshot requests before launch. Swap in <img> when you have them. */
.person__badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold), #E08A00);
  color: var(--navy-900);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.person h3 { margin: 0; font-size: 0.98rem; font-weight: 700; }
.person p  { margin: 0; font-size: 0.85rem; color: var(--cream-soft); }
.person a  { color: var(--aurora); }

/* --- Person + bio disclosure ---------------------------------------------
   Board and leadership pages. The icon beside the name IS the <summary>, so
   the bio opens with no JavaScript and is keyboard-operable for free. Bios
   start collapsed, which keeps a 12-person board scannable. */
.people--bios { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.person--bio { align-items: flex-start; }
.person--bio .person__photo,
.person--bio .person__badge { margin-top: 0.15rem; }
.person__body { flex: 1; min-width: 0; }

.bio__toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;          /* Firefox */
  border-radius: 8px;
}
.bio__toggle::-webkit-details-marker { display: none; }
.bio__toggle:focus-visible { outline: 2px solid var(--aurora); outline-offset: 3px; }

/* Phrasing content only — <summary> cannot legally contain <h3>/<p>. */
.bio__name { flex: 1; min-width: 0; }
.bio__name-main { display: block; font-size: 0.98rem; font-weight: 700; }
.bio__role { display: block; font-size: 0.85rem; color: var(--cream-soft); }

.bio__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--aurora);
  transition: transform 0.18s ease, color 0.18s ease;
}
.bio__icon svg { width: 20px; height: 20px; }
.bio__toggle:hover .bio__icon { color: var(--gold); }
.bio[open] .bio__icon { transform: rotate(180deg); }

.bio__text {
  margin: 0.7rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--cream-soft);
}
/* A bio passed as several paragraphs. */
.bio__text p { margin: 0 0 0.7rem; }
.bio__text p:last-child { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .bio__icon { transition: none; }
}

/* --- Facts strip ---------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 1px;
  margin: 2rem 0 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  background: var(--hairline);
}
.facts > div { padding: 1.15rem 1.25rem; background: rgba(11, 20, 48, 0.86); }
.facts dt { font-weight: 700; font-size: 0.98rem; color: var(--gold); }
.facts dd { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--cream-soft); }
.facts a  { color: inherit; }

/* --- Staff rows ----------------------------------------------------------- */
.staff { margin: 1rem 0 0; padding: 0; }
.staff > div {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 640px) { .staff > div { grid-template-columns: 190px 1fr; } }
.staff dt { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aurora); }
.staff dd { margin: 0; color: var(--cream); }

/* --- Ticks ---------------------------------------------------------------- */
.ticks { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.ticks li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--cream-soft);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--gold);
}



/* --- Pull quote ----------------------------------------------------------- */
.pull {
  margin: 0;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid rgba(79, 227, 176, 0.28);
  border-radius: 18px;
  background: rgba(11, 20, 48, 0.78);
}
.pull p {
  margin: 0;
  max-width: 70ch;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  text-wrap: pretty;
}

/* --- Misc ----------------------------------------------------------------- */
.alert {
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: rgba(251, 199, 7, 0.09);
  color: var(--cream) !important;
}

.jump { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.jump a {
  padding: 0.5rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--cream);
  font-size: 0.9rem;
  text-decoration: none;
}
.jump a:hover { border-color: var(--gold); color: var(--gold); }

.contact-line { margin: 1.25rem 0; }
.contact-line address { font-style: normal; margin-bottom: 0.35rem; }
.contact-line a { color: var(--aurora); }

.linklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.linklist a { font-size: 0.93rem; color: var(--aurora); }

.funder h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
}

a { color: var(--aurora); }
a:hover { color: var(--gold); }

/* --- Forms ---------------------------------------------------------------- */
.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.1rem;
  margin-top: 1.75rem;
}
.field--wide { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.field label span { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(247, 243, 234, 0.2);
  border-radius: 10px;
  background: rgba(5, 9, 26, 0.55);
  color: var(--cream);
  font: inherit;
  /* 16px exactly, not 0.98rem. Safari on iOS zooms the whole page in when a
     field it is focusing measures under 16px, and 0.98rem came out at 15.68px
     \u2014 so every tap on every field jumped the layout and left the visitor
     pinched in. 1rem is the floor; anything below it has to be a deliberate
     choice on a control nobody types into. */
  font-size: 1rem;
}
.field textarea { resize: vertical; }

/* Checkboxes and radios come out 13x13 at the browser's default size, which is
   a third of the 44px a finger needs. The control is scaled up and the row it
   sits in is given the full height, so the label is part of the target. */
.field input[type="checkbox"],
.field input[type="radio"],
.check input[type="checkbox"],
.check input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
  min-height: 0;
  flex: 0 0 auto;
  accent-color: var(--gold);
  cursor: pointer;
}
/* The label is the rest of the target, so the whole row is tappable. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: transparent;
}

.field select option { background: var(--navy-800); color: var(--cream); }

/* --- Footer --------------------------------------------------------------- */
.footer {
  /* No margin-top. The preceding section already pays --section-gap on its
     bottom; adding 3rem here made the footer gap 11.5rem against 9rem
     everywhere else — the single largest break on the page. */
  margin-top: 0;
  padding-block: var(--section-gap) 2rem;
  background: rgba(5, 9, 26, 0.92);

  /* NO border-top and NO backdrop-filter here.

     border-top drew a 1px --hairline line across the full width — the sharp
     line visible at the top of the footer.

     backdrop-filter drew the other half of the problem: it blurs the
     photograph inside the footer's box but not above it, so the image visibly
     changed at that same edge. This rule was overridden by a later
     `backdrop-filter: none` until that declaration was removed, at which point
     the blur came back without anything else changing. Both are gone at source
     now rather than being cancelled downstream. */
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 2rem;
  align-items: start;
}
@media (min-width: 900px) {
  /* The Head Office column has to hold "Edmonton, AB T5G 0L8" whole: at 1.1fr
     it measured 146px against the 154px that line needs, so the postal code
     dropped to a second line. */
  .footer__grid { grid-template-columns: 1.45fr 1fr 1fr 1.35fr; }
}

/* A wider container just for the footer, so the info columns and the land
   acknowledgement can sit side by side without cramping. */
.footer__wide {
  width: min(1340px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The info columns (left) and the acknowledgement (right), side by side. */
.footer__main {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}
@media (min-width: 900px) {
  .footer__main { grid-template-columns: 1.65fr 1fr; }
}

/* Acknowledgement in its side-by-side placement: a vertical divider on its
   left, filling the height of the columns, text centred within. */
.footer__main .acknowledge {
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.footer__main .acknowledge p { max-width: none; margin-inline: 0; }
@media (min-width: 900px) {
  .footer__main .acknowledge {
    border-left: 1px solid var(--hairline);
    padding-left: clamp(1.75rem, 3vw, 3rem);
  }
}
@media (max-width: 899px) {
  .footer__main .acknowledge {
    border-top: 2px solid var(--hairline);
    padding-top: clamp(1.5rem, 4vw, 2rem);
  }
}

.footer__mark { height: 46px; width: auto; margin-bottom: 1rem; }
.footer__blurb { margin: 0 0 1rem; max-width: 40ch; font-size: 0.92rem; color: var(--cream-soft); }
.footer__social { font-size: 0.9rem; }

.footer__head {
  margin: 0 0 0.9rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.footer__list a { font-size: 0.93rem; color: var(--cream-soft); text-decoration: none; }
.footer__list a:hover { color: var(--gold); text-decoration: underline; }

.footer__address {
  margin: 0 0 0.75rem;
  font-style: normal;
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--cream-soft);
}

/* Land acknowledgement — given room to breathe rather than buried in fine print. */
.acknowledge {
  margin-top: 3rem;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--hairline);
}
.acknowledge p {
  max-width: 82ch;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--cream-soft);
  text-wrap: pretty;
}
.acknowledge__word {
  margin-top: 0.9rem !important;
  font-family: var(--display);
  font-size: 1.15rem !important;
  font-weight: 600;
  color: var(--gold) !important;
}

.footer__legal {
  margin: 2rem 0 0;
  font-size: 0.85rem;
  /* Was rgba(85,80,75,0.7), which composited to 3.35:1 — a fail. It had been
     written against the earlier, lighter ink palette and never revisited. */
  color: var(--ink-body);
}

/* --------------------------------------------------------------------------
   Respect people who've asked their OS to reduce motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   IMAGERY
   Every <img> carries width/height so the browser reserves the space before
   the file arrives — no layout jumping as the page loads.
   ========================================================================== */

.shot {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: rgba(11, 20, 48, 0.6);
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
}

.shot figcaption {
  padding: 0.75rem 1.1rem;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--cream-soft);
  background: rgba(5, 9, 26, 0.55);
}

.shot--wide { max-width: 760px; margin-inline: auto; }

/* Image beside a block of text; stacks on narrow screens */
.media {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 880px) {
  .media { grid-template-columns: 0.85fr 1.15fr; gap: 1.75rem; }
}

/* Executive Director's portrait, floated into the welcome message */
.portrait {
  float: right;
  width: 132px;
  height: 132px;
  margin: 0 0 1rem 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(251, 199, 7, 0.5);
  shape-outside: circle(50%);   /* text hugs the curve, not the box */
}
@media (max-width: 560px) {
  .portrait { float: none; margin: 0 0 1.25rem; }
}

/* Staff portraits reuse the initials-badge slot, so markup stays identical */
.person__photo {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(251, 199, 7, 0.45);
}

.site-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

/* Funder logos arrive on white backgrounds. A light plate keeps them from
   floating awkwardly on the navy. */
/* Constrained by HEIGHT, not width. These logos have wildly different aspect
   ratios — a 5:1 wordmark beside a circular crest — and capping them to the
   same WIDTH would make the square one look several times larger. Equal height
   is what actually reads as equal.

   The white plate is deliberate. The PHAC logo contains the Canadian flag,
   whose centre band is white and connects to the outer background, so the
   white cannot be keyed out — and rendering the flag with a transparent stripe
   through it would be a brand-usage violation as well as a visual mess. Every
   funder sits on the same plate so they match. */
.funder__logo {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 72px;
  height: auto;
  margin: 0 auto 1.1rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: #FFFFFF;
  box-sizing: content-box;
}

/* The painting is 3:4 portrait — a tall artwork. Cap its height so it doesn't
   tower over the text beside it, and don't crop it: it's someone's painting. */
.shot--art img { max-height: 560px; object-fit: contain; background: rgba(5, 9, 26, 0.35); }

/* ==========================================================================
   LIGHT SURFACES

   Cards and panels flip to cream. That means everything *inside* them has to
   flip too — the aurora green and gold that read beautifully on navy are
   nearly invisible on cream. These overrides handle the whole cascade.

   Section headings, eyebrows and the hero stay light: they sit directly on
   the photograph, not on a card.
   ========================================================================== */

:root {
  --surface:      #F7F3EA;   /* the card itself */
  --surface-edge: rgba(35, 31, 32, 0.12);
  --ink-strong:   #201D1E;   /* headings   — 15.4:1 on cream */
  --ink-body:     #443F3B;   /* darkened so cards can be see-through */
  --ink-link:     #8A2018;   /* deep red. Was #08553F spruce green; the
                                client asked for text in blacks, browns and
                                deep reds. 8.2:1 on the cream page. */
  --ink-accent:   #6E4D00;   /* brand gold, darkened for translucency        */
}

/* --- The surfaces --------------------------------------------------------- */
.panel,
.card,
.step,
.pull,
.person,
.facts > div,
.shot figcaption {
  background: var(--surface);
  border-color: var(--surface-edge);
  color: var(--ink-body);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.panel { box-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.75); }
.card  { box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.6); }

.card:hover { border-color: var(--ink-accent); }

/* --- Text inside them ----------------------------------------------------- */
.panel h1, .panel h2, .panel h3,
.card h3, .step h3, .person h3,
.funder h3 { color: var(--ink-strong); }

.panel p, .card p, .step p, .person p,
.panel address, .card address,
.contact-line address,
.footer__blurb + *,
.pull p { color: var(--ink-body); }

.panel .lede { color: var(--ink-strong); }

.panel .eyebrow,
.card .eyebrow { color: var(--ink-link); }

.panel a:not(.btn), .card a:not(.btn), .step a:not(.btn), .person a:not(.btn),
.pull a:not(.btn), .linklist a:not(.btn), .contact-line a:not(.btn) { color: var(--ink-link); }

.panel a:not(.btn):hover, .card a:not(.btn):hover, .linklist a:not(.btn):hover,
.contact-line a:not(.btn):hover { color: var(--ink-accent); }

.card h3 a { color: var(--ink-strong); }
.card h3 a:hover { color: var(--ink-link); }

.panel .note,
.lightbg .note { color: var(--ink-body); }

/* --- Components that carried colour ---------------------------------------- */
.step { border-left-color: var(--ink-accent); }

/* The gold number badge keeps working: navy text on gold is 11.9:1 either way */
.step__num { background: var(--gold); color: var(--navy-900); }

.ticks li { color: var(--ink-body); }
.ticks li::before { background: var(--ink-accent); }

.spice li {
  border-color: rgba(169, 121, 0, 0.35);
  background: rgba(251, 199, 7, 0.14);
  color: var(--ink-strong);
}
.spice span { color: var(--ink-accent); }

.pull { border-color: rgba(11, 107, 82, 0.3); }
.pull p { color: var(--ink-strong); }

.facts { background: var(--surface-edge); border-color: var(--surface-edge); }
.facts dt { color: var(--ink-strong); }
.facts dd { color: var(--ink-body); }
.facts a  { color: var(--ink-link); }

.staff > div { border-top-color: var(--surface-edge); }
.staff dt { color: var(--ink-link); }
.staff dd { color: var(--ink-strong); }

.split { border-top-color: var(--surface-edge); }

.person { background: rgba(35, 31, 32, 0.04); }
.person__badge { background: linear-gradient(140deg, var(--gold), #E08A00); color: var(--navy-900); }
.person__photo { border-color: rgba(35, 31, 32, 0.15); }

.quote-panel .signoff { color: var(--ink-accent); }
.byline { color: var(--ink-strong); }

.alert {
  border-left-color: var(--ink-accent);
  background: rgba(251, 199, 7, 0.16);
  color: var(--ink-strong) !important;
}

.panel--cta { border-color: rgba(169, 121, 0, 0.35); }

/* Funder logos come on white, so they no longer need a plate behind them */


.shot figcaption { color: var(--ink-body); }

/* --- Buttons on cream ----------------------------------------------------- */
/* The ghost button was built for a dark backdrop — on cream it vanished. */
.panel .btn--ghost,
.card .btn--ghost {
  background: transparent;
  border-color: rgba(35, 31, 32, 0.3);
  color: var(--ink-strong);
}
.panel .btn--ghost:hover,
.panel .btn--ghost:focus-visible {
  background: rgba(35, 31, 32, 0.06);
  border-color: var(--ink-strong);
}

/* --- Forms on cream ------------------------------------------------------- */
/* Applies to fields inside a cream .panel and to the Apply form, which now
   sits directly on the cream page with no card around it. */
.panel .field label,
.lightbg .field label { color: var(--ink-strong); }
.panel .field label span,
.lightbg .field label span { color: var(--red); }

.panel .field input,
.panel .field select,
.panel .field textarea,
.lightbg .field input,
.lightbg .field select,
.lightbg .field textarea {
  background: #FFFFFF;
  border-color: rgba(35, 31, 32, 0.22);
  color: var(--ink-strong);
}

.panel .field input::placeholder,
.panel .field textarea::placeholder,
.lightbg .field input::placeholder,
.lightbg .field textarea::placeholder { color: rgba(85, 80, 75, 0.6); }

.panel .field input:focus,
.panel .field select:focus,
.panel .field textarea:focus,
.lightbg .field input:focus,
.lightbg .field select:focus,
.lightbg .field textarea:focus {
  outline-color: var(--ink-link);
  border-color: transparent;
}

.panel .field select option,
.lightbg .field select option { background: #FFFFFF; color: var(--ink-strong); }

/* ==========================================================================
   FOOTER — cream, to match the cards

   Bonus: the logo's black block outlines are invisible on navy but read
   properly on cream, so the mark finally looks like itself down here.
   ========================================================================== */

.footer {
  background: var(--surface);
  color: var(--ink-body);
}

.footer__head { color: var(--ink-accent); }

.footer__blurb,
.footer__address { color: var(--ink-body); }

.footer__list a,
.footer__social {
  color: var(--ink-body);
  text-decoration: none;
}
.footer__list a:hover,
.footer__social:hover {
  color: var(--ink-link);
  text-decoration: underline;
}

.acknowledge {
  border-top-color: var(--surface-edge);
}
.acknowledge p { color: var(--ink-body); }
.acknowledge__word { color: var(--ink-accent) !important; }

.footer__legal { color: var(--ink-body); opacity: 0.85; }

/* The nav is still dark glass over the photo, and the footer is now a solid
   cream block. Without this the page ended on an abrupt hard edge; a short
   fade lets the aurora dissolve into the footer instead. */



/* Phone number in the hero. Many families served by this program would sooner
   call than fill in a form, and the office is staffed 8:15–4:15. It shouldn't
   take three scrolls to find the number. */
.hero__call {
  margin: 1.6rem 0 0;
  font-size: 1.02rem;
  color: var(--cream-soft);
  text-shadow: 0 1px 14px rgba(5, 9, 26, 0.95);
}

.hero__call a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(251, 199, 7, 0.4);
  padding-bottom: 1px;
  white-space: nowrap;
}
.hero__call a:hover,
.hero__call a:focus-visible { border-bottom-color: var(--gold); }

.hero__hours {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.86rem;
  color: rgba(247, 243, 234, 0.62);
}
@media (min-width: 620px) {
  .hero__hours { display: inline; margin-top: 0; }
  .hero__hours::before { content: " · "; }
}

/* ==========================================================================
   PRINT

   Real scenario: a Family Support Worker prints the Locations page for a
   parent who has no printer at home. Without this it prints a night sky, a
   nav bar, and an aurora gradient — wasting a cartridge and producing
   something nobody can read.

   Print gets black text on white paper, and URLs spelled out, because a
   printed hyperlink is useless.
   ========================================================================== */

@media print {
  /* Everything decorative goes */
  .backdrop,
  .nav__toggle,
  .nav__menu,
  .skip,
  .footer::before,
  .jump,
  .hero__actions,
  .btn,
  .card__icon,
  .step__num,
  .person__badge {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  /* Keep the logo, drop the sticky bar */
  .nav {
    position: static !important;
    min-height: auto !important;
    padding: 0 0 12pt !important;
    background: none !important;
    border-bottom: 1pt solid #000 !important;
    backdrop-filter: none !important;
  }
  .nav__mark { height: 44pt !important; }
  .nav__name, .nav__tagline { color: #000 !important; }

  /* Flatten every panel — no shadows, no rounded corners, no fills */
  .panel, .card, .step, .pull, .person, .facts > div,
  .footer, .shot, .shot figcaption {
    background: #fff !important;
    color: #000 !important;
    border: 1pt solid #999 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .panel h2, .panel h3, .card h3, .step h3,
  .h-xl, .h-lg, .h-sm, .eyebrow, .sub, .note,
  .panel p, .card p, .step p, .facts dt, .facts dd,
  .footer__head, .footer__list a, .acknowledge p, .acknowledge__word {
    color: #000 !important;
    text-shadow: none !important;
  }

  .hero { min-height: auto !important; padding: 12pt 0 !important; }
  .hero__title { font-size: 22pt !important; }

  /* A printed hyperlink is useless unless you can read the address */
  a[href^="http"]::after  { content: " (" attr(href) ")"; font-size: 9pt; }
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  a[href^="tel:"]::after  { content: ""; }   /* the number is already the text */
  a[href^="#"]::after,
  a[href$=".html"]::after { content: ""; }   /* internal links: no point */

  /* Don't split a site's address away from its heading */
  .card, .step, .person, .panel { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Forms don't print usefully */
  .form { display: none !important; }
}

/* ==========================================================================
   FIXES
   ========================================================================== */

/* --- 1. The painting was burying the homepage on mobile -------------------
   It's 750x1000 — tall — and sits first in the DOM. Once the grid collapses
   to one column on a phone, a parent scrolled past the hero straight into a
   full-height painting, with the mission statement pushed a screen and a half
   further down.

   `order` moves it below the text on narrow screens WITHOUT touching the
   source order, so the reading order stays correct for screen readers. It
   also gets a height cap so it can't dominate the fold. */
@media (max-width: 879px) {
  .media { display: flex; flex-direction: column; }
  .media .panel { order: 1; }
  .media .shot--art { order: 2; }
  .shot--art img { max-height: 420px; }
}

/* --- 4. <address> replaced by .addr in the site cards --------------------- */
.addr {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-body);
}
.panel .addr, .card .addr { color: var(--ink-body); }

/* --- 5. Mobile menu: dim and seal the page behind it ---------------------- */
.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: 90;                 /* under the nav (100), over everything else */
  background: rgba(5, 9, 26, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}
.nav__scrim.is-open { opacity: 1; visibility: visible; }

@media (min-width: 901px) {
  .nav__scrim { display: none; }
}

/* Stop the page scrolling behind an open menu */
body.menu-open { overflow: hidden; }

/* --- Hero proof points ----------------------------------------------------
   The answers to the four questions a parent is silently asking, placed where
   they'll actually be seen. Deliberately plain: no icons, no cards, nothing to
   decode. Just the facts, above the fold. */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem 1.4rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--hero-col);
}

/* Facts, not buttons. No pill, no fill, no border — just text with a gold tick
   in front, so nothing here competes with the two real buttons below. */
.hero__proof li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cream);
  /* was nowrap, which was safe for four short items; the longer ones added
     since would push past the viewport on a phone instead of wrapping */
  white-space: normal;
  text-shadow: 0 1px 8px rgba(5, 9, 26, 0.9);
}

.hero__proof li::before {
  content: "";
  position: absolute;
  left: 0;
  /* pinned to the first line, not the middle of the box: the longer items now
     wrap, and a centred marker floated between their two lines */
  top: 0.58em;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--gold);
  transform: rotate(45deg);   /* small gold diamond tick */
}

/* The cost point still gets the spotlight — but through colour, not a box. */
.hero__proof li:first-child {
  color: var(--gold);
  font-weight: 700;
}

@media (max-width: 480px) {
  .hero__proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    width: fit-content;
    text-align: left;
  }
  .hero__proof li { font-size: 0.95rem; }
}

/* --- Photo benefit cards --------------------------------------------------
   The "Why choose us" cards now lead with a photo instead of an emoji. Image
   spans the full card width at the top; text sits below with the usual padding.
   The base .card padding is removed so the photo can go edge-to-edge. */
.card--photo {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card__media {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(11, 20, 48, 0.4);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.card--photo:hover .card__media img { transform: scale(1.04); }

.card__body { padding: 1.35rem 1.5rem 1.5rem; }
.card__body h3 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .card__media img { transition: none; }
  .card--photo:hover .card__media img { transform: none; }
}

/* --- Site map cards -------------------------------------------------------
   OpenStreetMap embeds — no API key, no billing, no tracking. The iframe is
   lazy-loaded so three maps don't block the homepage. */
.card--map { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.map-frame {
  aspect-ratio: 4 / 3;
  background: rgba(11, 20, 48, 0.5);
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* OSM tiles are light; a touch of desaturation settles them against the
     dark page without hiding the streets. */
  filter: saturate(0.9);
}

.card--map .card__body { padding: 1.25rem 1.4rem 1.4rem; }
.card--map h3 { margin-top: 0; }

.map-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-link);
  text-decoration: none;
}
.map-link:hover { color: var(--ink-accent); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .map-frame iframe { pointer-events: auto; }  /* still usable, just no auto-anim */
}

/* ==========================================================================
   ABOUT MASTHEAD — logo left, Kihew right

   The bird was previously absolute-positioned over the panel's corner, which
   meant every size change risked it landing on the text. It's in normal flow
   now: a two-column row that collapses to a stack on narrow screens. Nothing
   can collide because nothing overlaps.
   ========================================================================== */

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.masthead__brand { min-width: 0; }

.panel__logo {
  margin: 0;
  line-height: 0;              /* kills the inline-image baseline gap */
}

.panel__logo img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
}

.masthead__bird {
  margin: 0;
  min-width: 0;
}

.masthead__bird img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(5, 9, 26, 0.28));
}

.masthead__bird figcaption {
  margin-top: 0.5rem;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink-accent);
}

/* Divider between masthead and copy. Full width now that the masthead is a
   row rather than a centred stack. */
.panel__rule {
  height: 2px;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  border: 0;
  border-radius: 2px;
  background: var(--ink-accent);
  opacity: 0.4;
}

.section--intro { padding-top: var(--section-gap); }

@media (max-width: 700px) {
  .masthead {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: center;
  }
  .panel__logo img { max-width: 260px; margin-inline: auto; }
  .masthead__bird  { max-width: 320px; margin-inline: auto; }
}

/* ==========================================================================
   SIX PROGRAM COMPONENTS

   The artwork carries this section, so there are no card frames. Each image's
   background has been flood-filled to match --surface, which means the
   illustrations blend into the panel instead of sitting in six boxes. Putting
   a border around every picture would fight the imagery and turn a rich
   section into a grid of thumbnails.
   ========================================================================== */

.components-panel { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.components {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.component { display: flex; flex-direction: column; }

.component__media {
  display: block;
  margin-bottom: 0.9rem;
}

.component__media img {
  width: 100%;
  height: auto;
  display: block;
  /* Nothing behind the image — it IS the surface. */
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.component:hover .component__media img { transform: scale(1.03); }

.component__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  line-height: 1.25;
  color: var(--ink-strong);
  text-wrap: balance;
}

/* A short gold rule ties each title back to the artwork above it. */
.component__title::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 0.65rem;
  background: var(--ink-accent);
}

.component__note {
  margin: 0.5rem 0 0;
  font-size: 0.93rem;
  color: var(--ink-body);
}

@media (prefers-reduced-motion: reduce) {
  .component__media img { transition: none; }
  .component:hover .component__media img { transform: none; }
}

/* --- Logo as page heading -------------------------------------------------
   Used on About, where the logo's own wordmark says exactly what the heading
   said. The <h1> is kept for document structure; only its contents changed.

   The logo is shown in full brand colour, which means it needs a light plate:
   its text is near-black and scores 1.1:1 against the night sky. On the cream
   plate it's 14.7:1. The plate also matches the cream panels used everywhere
   else on the site, so it reads as part of the design rather than a patch. */
/* --- Masthead inside the panel --------------------------------------------
   The logo used to sit on its own cream plate above the panel, which read as
   two disconnected boxes with a gap between them. It now lives inside the
   panel: the panel is already a cream surface, so it doubles as the plate and
   the whole thing becomes one object.

   The logo's near-black text scores 9.8:1 against the translucent panel, so
   it stays perfectly legible without the extra backing. */
.panel__logo {
  margin: 0 auto 1.5rem;
  line-height: 0;              /* kills the inline-image baseline gap */
  text-align: center;
}

.panel__logo img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-inline: auto;
}

/* Divider between the masthead and the copy below it. */
.panel__rule {
  width: min(140px, 40%);
  height: 3px;
  margin: 0 auto 2rem;
  border: 0;
  border-radius: 2px;
  background: var(--ink-accent);
  opacity: 0.55;
}



@media (max-width: 560px) {
  .panel__logo img { max-width: 260px; }
}

/* ==========================================================================
   NAV OVERFLOW FIX

   At 375px the bar used 373 of 375 available pixels — a 2px margin, which is
   luck rather than a layout. At 320px (older iPhone SE, still in use) it
   overflowed and pushed the whole site into horizontal scroll.

   The logo mark is a wide 2.67:1 strip, so its height drives its width. The
   fix is to step that height down on very narrow screens and let the wordmark
   wrap, plus allow the lockup to shrink rather than force overflow.
   ========================================================================== */

@media (max-width: 430px) {
  :root { --nav-h: 72px; --mark-h: 38px; }

  .nav__brand { gap: 0.6rem; min-width: 0; }

  /* Previously flex-shrink: 0 — it could not give way, so something had to
     overflow. Now it can compress a little under pressure. */
  .nav__mark { flex-shrink: 1; min-width: 74px; }

  .nav__name {
    font-size: 0.8rem;
    line-height: 1.15;
    max-width: 13ch;           /* wraps to two lines instead of forcing width */
  }
}

/* Last-resort guard. If a future edit makes the lockup wider again, this stops
   the entire page from scrolling sideways — the single worst mobile symptom.
   It is a safety net, not a substitute for the sizing above. */
html, body { overflow-x: clip; }

/* --- Form privacy notice --------------------------------------------------
   Sits directly above the submit button, where someone actually reads it —
   not buried in a footer link. */
.form-privacy {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--ink-link);
  border-radius: 0 8px 8px 0;
  background: rgba(11, 107, 82, 0.07);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-body);
}
.form-privacy strong { color: var(--ink-strong); }

/* Honeypot: removed from view and from the accessibility tree, but still
   submitted. Deliberately NOT display:none — some bots skip hidden fields,
   and some screen readers would announce it. Off-canvas is the reliable way. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   TRANSLUCENT SURFACES

   Cards and panels let the aurora show through. Two constraints set the
   number:

   1. Contrast. Over the darkest part of the photo, cream at 90% still gives
      5.83:1 for body text and 4.74:1 for links — both clear AA. At 86% the
      links drop to 4.35 and fail. So 0.90 is the floor, not a preference.

   2. The component illustrations had their backgrounds flood-filled to solid
      cream so they'd blend into an opaque panel. They have been regenerated
      with real alpha, otherwise they would read as opaque cream blocks
      floating on a see-through panel.

   The blur is what makes this work: it softens the photo behind the text so
   detail doesn't compete with the words.
   ========================================================================== */

/* 0.80 lets a fifth of the aurora through. It is the floor, not a taste
   call: the inks above were darkened specifically to reach it, and at 0.78
   the gold accent drops to 4.45 and fails AA. Lower this and text breaks. */
:root { --surface-alpha: 0.80; }

.panel,
.card,
.step,
.pull,
.facts > div,
.shot figcaption {
  background: rgba(247, 243, 234, var(--surface-alpha));
}

/* Nested surfaces stay opaque. Stacking two translucent layers doubles the
   darkening underneath and would push the inner one below AA. */
.panel .card,
.panel .step,
.panel .facts > div {
  /* Nested inside an already-translucent panel, so these stay closer to solid.
     Two stacked translucent layers darken twice over and would fail AA. */
  background: rgba(247, 243, 234, 0.55);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* Slightly more solid, since these sit on the busiest part of the photo. */
.person { background: rgba(247, 243, 234, 0.55); }

/* Footer: solid, with a clean edge.

   Four attempts at fading the photograph into the footer all failed, and the
   last one failed even when it was technically correct — because the fade
   itself was the problem. A soft horizontal wash across a photograph reads as
   a rendering artifact, not a decision: every other edge on this page (cards,
   panels, the nav) is crisp, so a blurry one looks broken.

   A solid footer with a definite edge is what the rest of the page already
   does. It is also the only version with nothing to go wrong: no second layer,
   no alpha compounding, no backdrop-filter boundary. */
.footer {
  background: var(--surface);
  padding-top: var(--section-gap);
}

/* No backdrop-filter support (older Firefox): fall back to solid rather than
   leaving text over an unblurred photograph. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .card, .step, .pull, .facts > div {
    background: var(--surface);
  }
}

/* ==========================================================================
   SPICE — whole-child development

   Rebuilt from the design as real HTML rather than dropped in as a picture.
   Text in an image can't be selected, searched, translated, read aloud, or
   reflowed on a phone — and it would have needed to be redrawn for every copy
   change.

   The circle fills use the design's original colours. The LABELS use darker
   variants of the same hues, because the originals fail as text: the orange
   scored 1.51:1 on the panel. Same palette, legible.
   ========================================================================== */

.spice-panel { overflow: hidden; }

.spice-head {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 820px) {
  /* Photo left, words right. The figure comes AFTER the text in the HTML so a
     screen reader hears the heading first; `order` moves it visually without
     disturbing that.

     A fixed photo column rather than a fractional one: the child is a small
     accent beside the heading, not an equal half of a two-column split, so
     the text should take whatever is left over. */
  .spice-head {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
  }
  .spice-head__photo { order: -1; justify-self: start; max-width: 240px; }
}

@media (min-width: 1040px) {
  .spice-head { grid-template-columns: 280px minmax(0, 1fr); }
  .spice-head__photo { max-width: 280px; }
}

.spice-head .sub { margin-bottom: 0; }

/* The photo is a transparent cutout, so it floats directly on the panel. A
   rounded frame would only draw a box around empty space — the shape of the
   child IS the shape. */
.spice-head__photo {
  margin: 0;
  max-width: 240px;
  justify-self: center;
}
.spice-head__photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 20px rgba(5, 9, 26, 0.22));
}

/* --- The five areas -------------------------------------------------------- */
.spice-grid {
  display: grid;
  /* auto-fit with a 170px minimum came to ~946px across five columns in a
     ~928px panel, so the fifth wrapped onto its own row. Explicit columns and
     a tighter gap keep S-P-I-C-E on one line, which matters when the initials
     are meant to be read as a word. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2rem) clamp(0.75rem, 1.5vw, 1.15rem);
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  padding: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  border-top: 1px solid var(--surface-edge);
  list-style: none;
  text-align: center;
}

.spice-item { display: flex; flex-direction: column; align-items: center; }

.spice-item__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: var(--spice-fill);
  color: #fff;                        /* the glyph */
  box-shadow: 0 0 0 3px rgba(247, 243, 234, 0.75),
              0 0 0 4px var(--spice-fill);
}
.spice-item__icon svg { width: 30px; height: 30px; }

.spice-item__name {
  margin: 0 0 0.5rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--spice-ink);
}

/* The letter that spells S-P-I-C-E */
.spice-item__initial {
  font-family: var(--display);
  font-size: 1.2em;
  font-weight: 700;
}

.spice-item__note {
  margin: 0;
  max-width: 19ch;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-body) !important;
}

/* Fill = the design's colour. Ink = a darker cut of the same hue, so the
   labels clear AA on the panel. */
.spice-item--social       { --spice-fill: #5E150F; --spice-ink: #4A1009; }
.spice-item--physical     { --spice-fill: #8A2018; --spice-ink: #6B1912; }
.spice-item--intellectual { --spice-fill: #9E4426; --spice-ink: #7C341C; }
.spice-item--cultural     { --spice-fill: #7B3F00; --spice-ink: #5F3100; }
.spice-item--emotional    { --spice-fill: #5C3A21; --spice-ink: #472C19; }

@media (min-width: 620px) {
  .spice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .spice-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .spice-item__icon { width: 54px; height: 54px; }
  .spice-item__icon svg { width: 26px; height: 26px; }
  .spice-item__note { font-size: 0.85rem; }
}

/* --- Click-to-load map placeholder ---------------------------------------- */
.map-load {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border: 1px dashed rgba(35, 31, 32, 0.28);
  border-radius: 12px;
  background: rgba(35, 31, 32, 0.04);
  color: var(--ink-body);
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.map-load:hover,
.map-load:focus-visible {
  background: rgba(35, 31, 32, 0.08);
  border-color: var(--ink-accent);
}

.map-load__pin  { font-size: 1.6rem; line-height: 1; }
.map-load__text { font-weight: 700; color: var(--ink-strong); }
.map-load__note { font-size: 0.78rem; opacity: 0.75; }

/* --- Intake deadline in the hero ------------------------------------------ */
/* No box. It was the only framed element in the hero, so it read as a banner
   pasted on rather than part of the composition. The text carries itself on
   the shade pool behind the hero, with a stronger shadow in place of a fill. */
.hero__deadline {
  margin: 1.35rem 0 0;
  max-width: 44ch;
  font-size: 0.95rem;
  color: var(--cream);
  text-shadow: 0 1px 3px rgba(5, 9, 26, 0.95), 0 2px 18px rgba(5, 9, 26, 0.9);
}
.hero__deadline strong { color: var(--gold); }

/* ==========================================================================
   VERTICAL RHYTHM AROUND SECTION HEADINGS

   A heading was sitting 20px above the grid it introduces but only 14px below
   its own eyebrow — so the two barely grouped, and the hierarchy read flat.
   A heading should sit close to its eyebrow and further from the content it
   labels, not the other way round.

   These are margin-top values on the grids themselves, so they collapse
   harmlessly against the larger margin-bottom of an intro paragraph where one
   exists — sections with a `.sub` are unaffected.
   ========================================================================== */

.cards,
.steps,
.people,
.facts {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Trailing note needs room from the grid above it too. */
.note { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* Tighten the eyebrow to its heading so they read as one unit. */
.eyebrow { margin-bottom: 0.6rem; }

/* ==========================================================================
   FOOTER REFINEMENTS
   ========================================================================== */

/* --- 5. The mark was orphaned: 46px floating above a wide gap ------------- */
.footer__mark {
  height: 58px;
  width: auto;
  margin-bottom: 1.1rem;
}

/* --- 4. Facebook now reads as a link, not as body copy -------------------
   Social is this program's main outreach channel; it shouldn't be the least
   clickable-looking element on the page. */
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(35, 31, 32, 0.22);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-strong);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.footer__social svg { width: 18px; height: 18px; flex-shrink: 0; }
.footer__social:hover,
.footer__social:focus-visible {
  border-color: var(--ink-link);
  background: rgba(8, 85, 63, 0.07);
  color: var(--ink-link);
}

/* --- 2 & 3. The land acknowledgement ------------------------------------
   It was set at 82ch, well past the 45-75ch range where the eye can find the
   start of the next line reliably — and that over-wide measure was also what
   left the right third of the footer empty.

   It also read as fine print: same size as the nav links, tucked under a
   hairline. For a Treaty 6 organisation this is a substantive statement, so
   it now gets room, a slightly larger size, and a gold rule to set it apart. */
.acknowledge {
  max-width: 90ch;
  margin-inline: auto;
  text-align: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  border-top: 2px solid rgba(110, 77, 0, 0.28);
}

.acknowledge p {
  max-width: 72ch;
  margin-inline: auto;
  font-size: 0.97rem;
  line-height: 1.8;
}

.acknowledge__word {
  margin-top: 1.1rem !important;
  font-size: 1.3rem !important;
}

/* --- 6. Back to top, and the base row ------------------------------------ */
.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--surface-edge);
}

.footer__legal { margin: 0 !important; }

/* The footer sits on near-black, so this one cannot take the deep red the rest
   of the site's links now use -- measured, it lands at 2.2:1 there. It stays
   light, matching the other footer type. */
.footer__top {
  /* 24px tall as plain text. It is the last thing on every page and often the
     one a thumb reaches for, so it gets a real target rather than a line of
     text to aim at. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}
.footer__top:hover,
.footer__top:focus-visible { color: var(--cream); text-decoration: underline; }

/* ==========================================================================
   LEARNING THROUGH PLAY

   Built from the design as real HTML: the copy stays selectable, searchable,
   translatable and reflowable, and the icons are inline SVG at a few hundred
   bytes each rather than baked into a picture.

   Heading colours are darkened cuts of the design's palette so they clear AA
   on the translucent panel — indigo 8.9:1, green 5.4:1, blue 6.2:1.
   ========================================================================== */

.ltp__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }

.ltp__ornament { display: block; color: var(--aurora); opacity: 0.85; }
.ltp__ornament svg { width: 120px; height: 20px; margin: 0 auto 1.1rem; }

.ltp__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(5, 9, 26, 0.85);
  text-wrap: balance;
}

.ltp__rule {
  display: block;
  width: 74px;
  height: 3px;
  margin: 1rem auto 1.25rem;
  border-radius: 2px;
  background: var(--aurora);
}

.ltp__lede {
  max-width: 56ch;
  margin: 0 auto;
  font-size: clamp(1rem, 0.97rem + 0.25vw, 1.14rem);
  line-height: 1.65;
  color: #F2EEE4;
  text-shadow: 0 1px 12px rgba(5, 9, 26, 0.9);
  text-wrap: pretty;
}

/* --- Painting + About, side by side --------------------------------------- */
.ltp__grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 760px) {
  /* Equal columns, matching the Mission/Vision row below. stretch, not start,
     so the painting and the About card also end level. */
  .ltp__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.ltp__art {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(247, 243, 234, 0.8);
  border: 1px solid var(--surface-edge);
}
.ltp__art picture { display: block; flex: 1; min-height: 0; }
.ltp__art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ltp__art figcaption {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-body);
}

.ltp__caption-icon { display: inline-flex; color: var(--ltp-accent, #4C1D95); }
.ltp__caption-icon svg { width: 18px; height: 18px; }

/* --- Cards ---------------------------------------------------------------- */
.ltp__card { --ltp-accent: #4C1D95; --ltp-ink: #2E1065; }
.ltp__card--mission { --ltp-accent: #166534; --ltp-ink: #14532D; }
.ltp__card--vision  { --ltp-accent: #1D4E89; --ltp-ink: #12406E; }

.ltp__card-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  color: var(--ltp-ink);
}

.ltp__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ltp-accent) 14%, transparent);
  color: var(--ltp-accent);
}
.ltp__icon svg { width: 24px; height: 24px; }

/* Browsers without color-mix get a flat tint rather than no chip at all. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .ltp__icon { background: rgba(35, 31, 32, 0.08); }
}

.ltp__underline {
  display: block;
  width: 42px;
  height: 3px;
  margin: -0.4rem 0 1rem;
  border-radius: 2px;
  background: var(--ltp-accent);
  opacity: 0.75;
}

/* --- Bulleted points ------------------------------------------------------ */
.ltp__points {
  display: grid;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--surface-edge);
  list-style: none;
}

.ltp__points li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink-strong);
}
.ltp__points li + li { border-top: 1px solid var(--surface-edge); }

.ltp__bullet {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ltp-accent) 13%, transparent);
  color: var(--ltp-accent);
}
.ltp__bullet svg { width: 18px; height: 18px; }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .ltp__bullet { background: rgba(35, 31, 32, 0.08); }
}

/* --- Mission / Vision pair ------------------------------------------------ */
.ltp__pair {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 760px) {
  .ltp__pair { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* ==========================================================================
   CULTURAL EXPERIENCES — one panel

   Was seven separate cards in a three-column grid, which left the seventh
   stranded alone on its own row and put more border on the page than content.
   One panel, two columns of rows inside, divided by hairlines rather than
   boxes.
   ========================================================================== */

.culture-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 780px) {
  .culture-list { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 2.75rem); }
}

.culture-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--surface-edge);
}

/* No rule above the items that sit in the first row. On one column that is
   just the first child; on two columns the photo occupies the whole right-hand
   side of rows 1-3, so only the first text item needs its rule removed. */
.culture-item:first-child { border-top: 0; }
@media (min-width: 780px) {
  .culture-item:nth-child(2) { border-top: 0; }
  .culture-item--photo { border-top: 0; }
}

.culture-item__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(8, 85, 63, 0.1);
  color: var(--ink-link);
}
.culture-item__icon svg { width: 22px; height: 22px; }

.culture-item h3 {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink-strong);
}

.culture-item p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-body) !important;
}

/* --- Photo in the culture grid -------------------------------------------
   Fills the empty eighth cell. It has no icon and no rule above it, so it
   reads as an image sitting in the layout rather than a broken list item. */
.culture-item--photo {
  padding: 1.15rem 0;
  border-top: 1px solid var(--surface-edge);
}

/* Explicit placement: right-hand column, spanning the first three rows. The
   seven text items then auto-flow around it and fill every remaining cell —
   three down the left, then two full rows — with nothing left stranded. */
@media (min-width: 780px) {
  .culture-item--photo {
    grid-column: 2;
    grid-row: 1 / span 3;
    padding-bottom: 0;
  }
  .culture-item--photo .shots { height: 100%; }
}

/* --- Photo carousel ------------------------------------------------------
   Replaced a single decorative feather panel. Built on scroll-snap rather
   than a slider library: with no JavaScript at all it is still a usable
   gallery you can swipe or scroll, and the arrows and dots are progressive
   enhancement that only appear once the script has run. */
.shots {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.shots__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* the dots are the position indicator */
  -ms-overflow-style: none;
}
.shots__track::-webkit-scrollbar { display: none; }
.shots__track:focus-visible { outline: 3px solid var(--ink-link); outline-offset: -3px; }
.shots__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
}
.shots__slide picture { display: block; height: 100%; }
.shots__slide img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Arrows and dots: hidden until the script adds .shots--js, so a no-script
   visitor is never shown a control that cannot do anything. */
.shots__nav,
.shots__play,
.shots__dots { display: none; }
.shots--js .shots__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.92);
  color: var(--btn-red);
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(20, 6, 3, 0.8);
  transition: background 0.18s ease, transform 0.18s ease;
}
.shots__nav svg { width: 20px; height: 20px; }
.shots__nav--prev { left: 10px; }
.shots__nav--next { right: 10px; }
.shots--js .shots__nav:hover { background: #fff; }
.shots--js .shots__nav:focus-visible {
  outline: 3px solid var(--ink-link);
  outline-offset: 2px;
}
.shots--js .shots__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
  height: 58px;
  padding-bottom: 12px;
  /* a scrim, so the dots hold up over a pale photo as well as a dark one */
  background: linear-gradient(to top, rgba(20, 6, 3, 0.45), rgba(20, 6, 3, 0));
  pointer-events: none;
}
/* A 9px dot is not a target. The button is 44px square and invisible; the dot
   the visitor sees is drawn inside it with ::before, so the design is unchanged
   and the thing you tap is the size of a fingertip. */
.shots__dot {
  pointer-events: auto;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.shots__dot::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.55);
  transition: background 0.18s ease, transform 0.18s ease;
}
.shots__dot[aria-current="true"]::before {
  background: #FFFDF8;
  transform: scale(1.35);
}
.shots__dot:focus-visible { outline: 2px solid #FFFDF8; outline-offset: 3px; }

/* Pause / play. WCAG 2.2.2 asks for a way to stop anything that moves on its
   own for more than five seconds, and hover-to-pause does not help someone on
   a touchscreen or a keyboard, so the control is always on the page. */
.shots--js .shots__play {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.92);
  color: var(--btn-red);
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(20, 6, 3, 0.8);
}
.shots__play svg { width: 15px; height: 15px; }
.shots__play:hover { background: #fff; }
.shots__play:focus-visible { outline: 3px solid var(--ink-link); outline-offset: 2px; }
/* The icon shows what the button will do: a pause bar while it is running,
   a play triangle once it is stopped. */
.shots__play .shots__play-go { display: none; }
.shots__play[aria-pressed="true"] .shots__play-pause { display: none; }
.shots__play[aria-pressed="true"] .shots__play-go { display: block; }

@media (prefers-reduced-motion: reduce) {
  .shots__track { scroll-behavior: auto; }
  .shots__nav, .shots__dot::before { transition: none; }
}

/* On one column the carousel sits last, full width, and needs no minimum. */
@media (max-width: 779px) {
  .shots__slide img { min-height: 0; aspect-ratio: 9 / 10; }
}



/* ==========================================================================
   LEADERSHIP TEAM — portrait cards

   Photo above the name rather than beside it, centred, four across. Scoped to
   .people--leads so the nine-person staff list below (which has no photos)
   keeps its own simpler layout.
   ========================================================================== */

.people--leads {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(0.9rem, 2vw, 1.35rem);
}

.people--leads .person {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 1rem;
}

.people--leads .person picture { display: block; }

.people--leads .person__photo {
  width: clamp(84px, 9vw, 104px);
  height: clamp(84px, 9vw, 104px);
  margin-bottom: 1rem;
  border-radius: 50%;
  object-fit: cover;
  /* Gold ring, with a cream gap between it and the photo so the two don't
     merge on portraits with dark edges. */
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 3px var(--surface);
}

.people--leads .person h3 {
  margin: 0 0 0.25rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink-strong);
}

.people--leads .person p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-body) !important;
}

/* ==========================================================================
   SITE BLOCKS

   Photograph one side, everything else the other, alternating down the page.
   Staff are individual rows rather than a hairline-divided list — each one
   holds together as a unit, which matters when a role like "Educational
   Assistants" wraps to two lines beside a pair of names.
   ========================================================================== */

/* --- Site pages: clean photo + details on the cream band (no boxed cards) - */
.sitex__lead {
  max-width: 640px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center;
  color: var(--ink-body); font-size: 1.06rem; line-height: 1.6;
}
.jump--center { justify-content: center; margin: 1.25rem auto clamp(2rem, 4vw, 3rem); }
/* On the cream band the pills need dark-on-light styling. */
.jump--center a { color: var(--ink-link); border-color: rgba(5, 9, 26, 0.22); }
.jump--center a:hover { border-color: var(--ink-link); color: var(--ink-link); background: rgba(5, 9, 26, 0.04); }

.sitex { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 820px) {
  .sitex { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  /* Main Office details are short, so its portrait map left a tall gap beside
     them. Give the office a wider, landscape map so the two sides balance. */
  .sitex--office { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
}
.sitex--office .sitex__map { aspect-ratio: 4 / 3; }
.sitex__media { margin: 0; }
.sitex__map {
  display: block; width: 100%; aspect-ratio: 3 / 4; border: 0;
  border-radius: 16px; border-top: 5px solid var(--gold);
  box-shadow: 0 24px 50px -30px rgba(5, 9, 26, 0.40);
}
.sitex__map-link {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 0.2rem;
  color: var(--ink-link); font-weight: 600; font-size: 0.92rem; text-decoration: none;
}
.sitex__map-link:hover { text-decoration: underline; }

/* Phone numbers and email addresses are the whole point of a contact page on a
   phone, and they were rendering 17-19px tall - under even the 24px minimum,
   let alone the 44px a fingertip wants. They sit in stacked address lines, so
   they cannot simply be made 44px without pushing those lines apart; instead
   each one gets vertical padding, which grows the target while the text stays
   where it was. Measured after: 30px, with no two neighbours overlapping. */
dd > a[href^="tel:"],
dd > a[href^="mailto:"],
dt > a[href^="http"],
.site-list__meta a[href^="tel:"],
.site-list__meta a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* The padding would otherwise stack two links' targets on top of each other. */
.site-list__meta a + a,
dd > a + a { margin-top: 0.15rem; }

/* Main Office (Head Office) map — wide, to suit the full-width panel. */
.ho-map { margin: 1.75rem 0 0; }
.ho-map__frame {
  display: block; width: 100%; aspect-ratio: 2 / 1; border: 0;
  border-radius: 16px; border-top: 5px solid var(--gold);
}
@media (max-width: 640px) { .ho-map__frame { aspect-ratio: 4 / 3; } }

/* Main Office team rosters — clean columns, no cards. */
.ho-team { margin-top: clamp(2rem, 4vw, 3rem); }
.roster {
  list-style: none; margin: 0.75rem 0 1.75rem; padding: 0;
  display: grid; gap: 0 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.roster li { padding: 0.7rem 0; border-bottom: 1px solid rgba(5, 9, 26, 0.10); }
.roster__name { display: block; font-weight: 700; color: var(--ink-strong); }
.roster__role { display: block; color: var(--ink-body); font-size: 0.9rem; margin-top: 0.1rem; }
.roster__role a { color: var(--ink-link); }
/* Email on its own line under the role, so each person reads name → role → email. */
.roster__email {
  display: inline-block; margin-top: 0.25rem;
  color: var(--ink-link); font-size: 0.88rem; word-break: break-word;
}

/* Sites list — clean, no boxed cards. */
.site-list {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 1.75rem 2rem;
  grid-template-columns: repeat(4, 1fr);
  text-align: left;
}
@media (max-width: 940px) { .site-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .site-list { grid-template-columns: 1fr; } }
/* Two-up variant, e.g. the contact page's inquiry + registration rows. */
.site-list--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) { .site-list--2 { grid-template-columns: 1fr; } }
/* Three-up variant, e.g. the resources page's nine support categories.
   A roomier row gap so the categories don't crowd the row beneath them. */
.site-list--3 { grid-template-columns: repeat(3, 1fr); row-gap: clamp(2.75rem, 5vw, 3.75rem); column-gap: clamp(2rem, 4vw, 3rem); }
@media (max-width: 860px) { .site-list--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .site-list--3 { grid-template-columns: 1fr; } }
/* Flex column + auto-margin link keeps every "View" link on the same baseline,
   so the four dividers line up no matter how the copy wraps. */
.site-list__item {
  display: flex; flex-direction: column;
  padding: 0 0 1.1rem;
  border-top: 3px solid var(--gold);
  padding-top: 0.9rem;
}
/* Partner logo plate: a fixed-height box so a wide wordmark and a square crest
   land on the same footprint, keeping the title baselines aligned across the
   grid. The logo is left-aligned to sit over the card's gold rule. */
.site-list__logo {
  height: 68px; margin: 0.1rem 0 0.9rem;
  display: flex; align-items: center; justify-content: flex-start;
}
.site-list__logo img {
  max-height: 100%; max-width: 78%; width: auto; height: auto; object-fit: contain;
}
.site-list__item h3 { font-family: var(--display); font-weight: 700; margin: 0 0 0.3rem; font-size: 1.2rem; }
.site-list__item h3 a { color: var(--ink-strong); text-decoration: none; }
.site-list__item h3 a:hover { color: var(--ink-link); }
.site-list__desc { margin: 0 0 0.5rem; color: var(--ink-body); font-size: 0.95rem; }
.site-list__meta { margin: 0 0 0.7rem; color: var(--ink-body); font-size: 0.9rem; line-height: 1.5; }
.site-list__meta a { color: var(--ink-link); }
.site-list__more { margin-top: auto; color: var(--ink-link); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.site-list__more:hover { text-decoration: underline; }

.note--cream { color: var(--ink-body); text-align: center; margin-top: 1.25rem; }

/* Featured artwork (the Lavoie painting) — centred, capped so the portrait
   doesn't tower over the page. */
.art-feature { margin: 0 auto; max-width: 440px; text-align: center; }
.art-feature img {
  display: block; width: 100%; height: auto;
  border-radius: 16px; border-top: 5px solid var(--gold);
  box-shadow: 0 26px 55px -32px rgba(5, 9, 26, 0.5);
}
.art-feature figcaption {
  margin-top: 0.8rem; font-size: 0.85rem; font-style: italic; color: var(--ink-body);
}

/* Painting beside the text (Resources page). Stacks on narrow screens. */
.af-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 860px) {
  .af-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
}
.af-grid .art-feature { max-width: 400px; margin: 0 auto; }
/* The heading and eyebrow sit inside .af-text now, not directly under .section,
   so restate the cream-page ink colours here. */
.af-text .eyebrow { color: var(--ink-link); }
.af-text .h-lg { color: var(--ink-strong); }
.af-text p { color: var(--ink-body); }

/* ---- Relations & Partnerships directory ---------------------------------
   Community supports grouped by category (gold-ruled heading) and sub-group. */
.rp-cat { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.rp-cat:last-child { margin-bottom: 0; }
.rp-cat__h {
  font-family: var(--display); font-weight: 700; color: var(--ink-strong);
  font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 1.4rem;
  padding-bottom: 0.55rem; border-bottom: 2px solid var(--gold);
}
.rp-groups {
  display: grid; gap: 1.6rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.rp-sub {
  margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-link);
}
.rp-group .linklist { gap: 0.55rem; }
.rp-group .linklist a { font-size: 0.98rem; }

/* ---- Volunteer application form ------------------------------------------
   A native form on the cream page. Text inputs already inherit the light
   styling from the .lightbg .field rules; these add the section headings,
   the group labels, and the checkbox / radio lists. */
.form-lead { max-width: 60ch; margin: 0 0 1.75rem; color: var(--ink-body); }

.form .form-group { grid-column: 1 / -1; margin: 1.6rem 0 0.1rem; }
.form .form-group:first-of-type { margin-top: 0; }
.form .form-group h3 {
  font-family: var(--display); font-weight: 700; color: var(--ink-strong);
  font-size: 1.2rem; margin: 0; padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gold);
}
.form .form-group p { margin: 0.55rem 0 0; color: var(--ink-body); font-size: 0.9rem; }

/* The prompt above a checkbox / radio group — same weight as a field label. */
.field-label {
  display: block; margin-bottom: 0.55rem;
  font-size: 0.88rem; font-weight: 600; color: var(--ink-strong);
}

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.checklist--inline {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.55rem 1.5rem;
}
.checklist li { margin: 0; }
.checklist label {
  display: flex; align-items: center; gap: 0.6rem; margin: 0;
  min-height: 44px;                 /* the whole row is the target, not the box */
  font-size: 0.95rem; font-weight: 400; line-height: 1.45;
  color: var(--ink-body); cursor: pointer;
}
.checklist input {
  /* Not `width: auto`. This rule sits after the generic checkbox sizing and
     was handing the control its 13px default back, so the box came out 13
     wide by 22 tall \u2014 half a target and visibly lopsided. */
  width: 22px; height: 22px;
  margin: 0; flex: 0 0 auto;
  accent-color: var(--ink-link);
}
.checklist label span { color: var(--red); }

/* Program at a glance — a white wavy ribbon across the cream page. */
.glance {
  position: relative; background: #fff;
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.glance__wave {
  position: absolute; left: 0; width: 100%;
  height: clamp(22px, 3.5vw, 44px); display: block; fill: #fff; pointer-events: none;
}
.glance__wave--top { top: 0; transform: translateY(-99%); }
.glance__wave--bottom { bottom: 0; transform: translateY(99%) scaleY(-1); }
.glance .glance__list { max-width: 620px; margin-left: auto; margin-right: auto; }

/* "Program at a glance" with a photo beside the facts. Stacks on narrow screens. */
.glance__inner--split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 820px) {
  .glance__inner--split { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  /* CTA reverses it: text on the left, photo on the right. */
  .glance__inner--cta { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}
.glance__photo { margin: 0; }
.glance__photo img {
  display: block; width: 100%; height: auto;
  border-radius: 14px; box-shadow: 0 22px 48px -30px rgba(5, 9, 26, 0.5);
}
.glance__inner--split .aop-facts__head { text-align: left; }
.glance__inner--split .glance__list { max-width: none; margin-left: 0; margin-right: 0; }

/* A pull quote carried on the white ribbon. Centred serif, no card border. */
.glance--quote .glance__inner { max-width: 780px; margin-left: auto; margin-right: auto; }
.glance--quote blockquote { margin: 0; }
.glance--quote p {
  margin: 0; text-align: center; text-wrap: pretty;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-strong);
}
/* When a photo sits beside the quote, let the grid use the full width and
   left-align the quote so it pairs cleanly with the image. */
.glance--quote .glance__inner--split { max-width: none; }
.glance--quote .glance__inner--split p { text-align: left; }

/* "Wanting to apply?" reuses the white ribbon, but carries prose + buttons.
   It left-aligns to the same edge as the steps and form so the section lines
   up with the rest of the page. And because it sits on white rather than
   inside a .panel, the ghost button and note miss the panel's light-mode
   overrides — they'd inherit the dark-backdrop styling and vanish. Restate
   them here so everything stays legible on the ribbon. */
.glance--cta .glance__inner { text-align: left; }
.glance--cta .aop-facts__head { text-align: left; }
.glance--cta p { max-width: var(--measure); color: var(--ink-body); }
.glance--cta .hero__actions { justify-content: flex-start; }
.glance--cta .note { color: var(--ink-body); }
/* The apply CTA is the same closing-invitation band as the welcome message on
   the homepage, so it takes the same deep red and the same light type. */
.glance--cta { background: #7A2E1E; }
.glance--cta .glance__wave { fill: #7A2E1E; }
.glance--cta .aop-facts__head { color: var(--cream); }
.glance--cta p { color: rgba(247, 243, 234, 0.90); }
.glance--cta .note { color: rgba(247, 243, 234, 0.78); }
.glance--cta a:not(.btn) { color: #F0C98E; }
.glance--cta strong { color: var(--cream); }
/* the deadline callout: a pale plate would fight the red, so it becomes an
   inset panel a shade darker with a sand rule down its edge */
/* !important only because the light-background .alert rule above carries one;
   without it the callout keeps its dark ink and lands at 1.4:1 on the red. */
.glance--cta .alert {
  background: rgba(30, 10, 6, 0.28);
  border-left-color: #F0C98E;
  color: var(--cream) !important;
}
.glance--cta .btn--primary {
  background: var(--cream);
  color: var(--btn-red);
  box-shadow: 0 2px 0 rgba(30, 10, 6, 0.35);
}
.glance--cta .btn--primary:hover,
.glance--cta .btn--primary:focus-visible {
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(30, 10, 6, 0.35), 0 2px 0 rgba(30, 10, 6, 0.35);
}
.glance--cta .btn--ghost {
  background: transparent;
  border-color: rgba(247, 243, 234, 0.55);
  color: var(--cream);
}
.glance--cta .btn--ghost:hover,
.glance--cta .btn--ghost:focus-visible {
  background: rgba(247, 243, 234, 0.12);
  border-color: var(--cream);
}

/* Program-at-a-glance facts on the What We Offer page. */
.aop-facts { max-width: 720px; margin: clamp(0.5rem, 2vw, 1.5rem) auto clamp(2.5rem, 5vw, 4rem); }
.aop-facts__head {
  font-family: var(--display); font-weight: 700; text-align: center;
  color: var(--ink-strong); font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 0.6rem;
}
.aop-sites { margin: 0 auto clamp(2.5rem, 5vw, 4rem); }

/* ---- Our Program Models page -------------------------------------------- */
.pm { max-width: 780px; margin: 0 auto; --pmg: 3.6rem; }
@media (max-width: 520px) { .pm { --pmg: 3.1rem; } }
/* Icons hang in a left gutter so every heading, paragraph and list in a block
   shares one left edge. */
.pm__block { margin-bottom: clamp(3rem, 6vw, 5rem); padding-left: var(--pmg); }
.pm .pm__h3, .pm .dir__h2 { margin-left: calc(-1 * var(--pmg)); }
.pm__block:last-child { margin-bottom: 0; }
/* .pm is capped at 780px — a reading measure set when every block here was a
   single column of prose. The SPICE block now shares that width with a photo,
   which squeezed its text to ~366px. Let this one block run wider, to the RIGHT
   only, so its left edge still lines up with every other block on the page.
   The pull-out is phased in with the viewport rather than switched on at a
   breakpoint: a flat -160px reached the window edge at ~1100px, where .pm only
   has ~116px of slack beside it. */
.pm__block--wide {
  margin-right: calc(-1 * clamp(0px, (100vw - 1040px) * 0.5, 160px));
}
.pm__block > :first-child { margin-top: 0; }
.pm p { color: var(--ink-body); line-height: 1.65; margin: 0 0 1rem; }
.pm__h3 {
  font-family: var(--display); font-weight: 700; color: var(--ink-strong);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 0.7rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.pm .dir__h2 { display: flex; align-items: center; gap: 0.8rem;
  /* the shared .dir__h2 pays 0.2rem, which left a 34px heading 3px above its
     own paragraph; scoped here so the other pages using it are untouched */
  margin-bottom: 0.9rem; }
.pm__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; border: 1.5px solid rgba(5, 9, 26, 0.08);
  box-shadow: 0 8px 18px -12px rgba(5, 9, 26, 0.45);
  color: #7A2E1E;
}
.pm__icon svg { width: 44px; height: 44px; }
@media (max-width: 520px) {
  .pm__icon { width: 54px; height: 54px; }
  .pm__icon svg { width: 36px; height: 36px; }
}
.pm__sub { font-weight: 700; color: var(--ink-strong); margin: 0.5rem 0 0.5rem; }
.pm__note { font-size: 0.98rem; }
.pm__note a { color: var(--ink-link); font-weight: 600; }

.pm__list { margin: 0.4rem 0 1rem; padding-left: 1.25rem; color: var(--ink-body); line-height: 1.6; }
.pm__list li { margin-bottom: 0.5rem; }
.pm__list li::marker { color: var(--gold); }

/* Program components — clean two-column list, dot markers (no pills). */
.pm__components {
  list-style: none; margin: 0.4rem 0 0.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.55rem 1.75rem;
}
.pm__components li { position: relative; padding-left: 1.35rem; color: var(--ink-body); font-weight: 600; }
.pm__components li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
}

/* Classes */
.pm__classes { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.pm__classes li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem;
  padding: 0.85rem 1.1rem; background: #fff; border: 1px solid rgba(5, 9, 26, 0.08);
  border-radius: 12px; border-left: 4px solid var(--gold);
}
.pm__classes strong { font-family: var(--display); color: var(--ink-strong); font-size: 1.08rem; }
.pm__classes span { color: var(--ink-body); }
.sitex__body > :first-child { margin-top: 0; }
.sitex__desc { color: var(--ink-body); margin: 0.2rem 0 1rem; font-size: 1.05rem; }
.sitex__contact { margin: 0 0 1.6rem; line-height: 1.7; }
.sitex__contact .addr { margin: 0 0 0.25rem; }
.sitex__contact a { color: var(--ink-link); font-weight: 600; }
.sitex__cline { margin: 0; }
.sitex__staff-head {
  font-family: var(--display); font-weight: 700;
  color: var(--ink-strong); font-size: 1.15rem; margin: 0 0 0.3rem;
}
.sitex__staff { margin: 0; }

/* A site's team photograph, under its staff list. Matches the map beside it:
   same corner radius, same gold top edge, same lifted shadow. */
/* Spans both columns on its own row. Hung off the details column it left the
   map column ~360px short, which is what made the block look lopsided; full
   width also gives a group photo the room to be legible. */
.sitex__team { grid-column: 1 / -1; margin: 0.5rem 0 0; }

/* The full-staff photograph on the Contact page — same treatment as a site's
   team photo so the two read as one family of images. */
.staffshot { margin: 0; }
.staffshot img {
  display: block; width: 100%; height: auto;
  border-radius: 16px; border-top: 5px solid var(--gold);
  box-shadow: 0 24px 50px -30px rgba(5, 9, 26, 0.40);
}
.staffshot__cap {
  margin: 0.6rem 0 0; color: var(--ink-body);
  font-size: 0.92rem; font-style: italic; text-align: center;
}
.sitex__team img {
  display: block; width: 100%; height: auto;
  border-radius: 16px; border-top: 5px solid var(--gold);
  box-shadow: 0 24px 50px -30px rgba(5, 9, 26, 0.40);
}
.sitex__team-cap {
  margin: 0.6rem 0 0; color: var(--ink-body);
  font-size: 0.92rem; font-style: italic;
}
.sitex__row {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.4rem 1.25rem; align-items: baseline;
  padding: 0.7rem 0; border-bottom: 1px solid rgba(5, 9, 26, 0.10);
}
.sitex__row:first-child { border-top: 1px solid rgba(5, 9, 26, 0.10); }
.sitex__row dt {
  margin: 0; color: var(--ink-link); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.sitex__row dd { margin: 0; color: var(--ink-strong); font-weight: 600; }
@media (max-width: 560px) {
  .sitex__row { grid-template-columns: 1fr; gap: 0.1rem; }
}

.site-block { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 880px) {
  .site-block {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  /* Photo right on alternating blocks. Body stays first in the DOM either way,
     so the reading order never changes. */
  .site-block--flip .site-block__media { order: 2; }
  .site-block--flip .site-block__body  { order: 1; }
}

.site-block__body > :first-child { margin-top: 0; }
.site-block__desc { margin-bottom: 1.1rem; }

.site-block__media picture { display: block; }

.site-block__media .site-photo {
  display: block;
  width: 100%;
  height: auto;
  /* 3:4, matching the photographs. A 16/9 crop cut a horizontal band out of
     the middle of each portrait. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 14px;
  /* Gold bar across the top, tying the photo to the site palette. */
  border-top: 5px solid var(--gold);
  margin: 0;
}

/* --- Staff rows ----------------------------------------------------------- */
.staff-list {
  display: grid;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.staff-row {
  display: grid;
  grid-template-columns: auto minmax(0, 11rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: rgba(247, 243, 234, 0.55);
}

.staff-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-accent);
  flex-shrink: 0;
}

.staff-row__role {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-link);
  line-height: 1.3;
}

.staff-row__name {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--ink-strong);
}

@media (max-width: 560px) {
  .staff-row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.2rem;
  }
  .staff-row__name { grid-column: 2; }
}




/* Office and culture team lists: three across from tablet up. */
@media (min-width: 640px) {
  .people:not(.people--leads) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .people:not(.people--leads) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Narrower cards, so give the badge and text a little less room to sprawl. */
@media (min-width: 640px) {
  .people:not(.people--leads) .person { gap: 0.75rem; padding: 0.9rem 1rem; }
  .people:not(.people--leads) .person h3 { font-size: 0.98rem; }
  .people:not(.people--leads) .person p  { font-size: 0.86rem; }
}


/* --- Address as a maps link ----------------------------------------------
   Replaces the embedded map. An embed needs coordinates, which had to be
   estimated and came out over a kilometre wrong; Google geocodes the address
   itself, so there is nothing to drift. It also removes the last third-party
   frame from the page. */
.addr__link {
  color: var(--ink-strong);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(8, 85, 63, 0.35);
  transition: color 150ms ease, border-color 150ms ease;
}
.addr__link:hover,
.addr__link:focus-visible {
  color: var(--ink-link);
  border-bottom-color: var(--ink-link);
}

.addr__ext {
  display: inline-block;
  margin-left: 0.15rem;
  font-size: 0.85em;
  color: var(--ink-link);
}

/* Visually hidden but read aloud — warns screen-reader users that the link
   opens a new tab, which is otherwise a silent surprise. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   NAV DROPDOWN — the "About Us" submenu
   Desktop: opens on hover or keyboard focus (pure CSS); the caret button gives
   an explicit click/keyboard control and drives aria-expanded. Mobile: the
   caret expands the list inline inside the drawer. The parent link always
   navigates to its own page.
   ========================================================================== */
.nav__item { position: relative; }
.nav__item--has-menu { display: inline-flex; align-items: center; gap: 0.1rem; }

.nav__submenu-toggle {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  cursor: pointer;
}
/* No caret on desktop — the dropdown opens on hover/focus. It stays in the
   mobile drawer, where it's the tap target that expands the submenu. */
@media (min-width: 1080px) {
  .nav__submenu-toggle { display: none; }
  .nav__item--has-menu { gap: 0; }
}
.nav__submenu-toggle:hover,
.nav__submenu-toggle:focus-visible { color: var(--gold); }
.nav__caret { display: grid; place-items: center; }
.nav__caret svg { width: 14px; height: 14px; transition: transform 200ms ease; }
.nav__item--has-menu:hover .nav__caret svg,
.nav__item--has-menu:focus-within .nav__caret svg,
.nav__item--has-menu.is-open .nav__caret svg { transform: rotate(180deg); }

.nav__submenu {
  position: absolute;
  top: 100%;
  left: -0.85rem;
  z-index: 120;
  min-width: 232px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: rgba(94, 21, 15, 0.96);   /* a dropdown over page content, same reason */
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 22px 48px -22px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 170ms ease, transform 170ms ease, visibility 170ms;
}

/* Nav items near the right edge open their menu leftwards. Culture sits second
   from the end and its widest item ("Culture Experience") pushed the panel ~68px
   past the window, which is a horizontal scrollbar on every interior page. */
.nav__item--has-menu:nth-last-child(-n+2) .nav__submenu {
  left: auto;
  right: -0.85rem;
}

/* Transparent bridge over the gap so the pointer can travel from the word down
   into the panel without ever leaving :hover. */
.nav__item--has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 232px;
  height: 0.7rem;
}

.nav__item--has-menu:hover .nav__submenu,
.nav__item--has-menu:focus-within .nav__submenu,
.nav__item--has-menu.is-open .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sublink {
  display: block;
  padding: 0.62rem 0.85rem;
  border-radius: 8px;
  color: var(--cream);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease;
}
.nav__sublink:hover,
.nav__sublink:focus-visible,
.nav__sublink.is-active {
  background: rgba(247, 243, 234, 0.08);
  color: var(--gold);
}

/* Nested group inside a dropdown (e.g. Our Sites -> Main Office + the sites). */
.nav__subgroup { list-style: none; }
.nav__sublink--head { font-weight: 700; }
/* Group heading is a non-navigating label, not a link. */
.nav__sublink--label { cursor: default; }
.nav__sublink--label:hover { background: none; color: var(--cream); }
.nav__subgroup-list { list-style: none; margin: 0.15rem 0 0.35rem; padding: 0; }
.nav__sublink--child {
  padding-left: 1.85rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(247, 243, 234, 0.82);
}
.nav__sublink--child::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 0.6rem;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--aurora);
}

@media (prefers-reduced-motion: reduce) {
  .nav__submenu { transition: none; }
  .nav__caret svg { transition: none; }
}

/* --- Mobile: submenu is an inline, tap-to-expand list in the drawer -------- */
@media (max-width: 1079px) {
  .nav__item--has-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--hairline);
  }
  .nav__item--has-menu > .nav__link { flex: 1; border-bottom: 0; }
  .nav__submenu-toggle {
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid var(--hairline);
    border-radius: 10px;
  }
  .nav__item--has-menu::after { content: none; }        /* no hover bridge on touch */

  .nav__submenu {
    position: static;
    display: none;                 /* collapsed: also out of the focus order */
    width: 100%;
    min-width: 0;
    margin: 0 0 0.35rem;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__item--has-menu.is-open .nav__submenu { display: block; }
  .nav__sublink { padding: 0.85rem 0 0.85rem 1.5rem; border-radius: 0; }
  .nav__sublink + .nav__sublink { border-top: 1px solid var(--hairline); }
  .nav__sublink--child { padding-left: 2.6rem; }
}

/* --- About Us sub-pages: keep the reading measure tidy -------------------- */
.subpage { max-width: 760px; margin-inline: auto; }

/* ==========================================================================
   FEATURE ROWS — full-width image + text, alternating sides (homepage)
   Replaces the old "Why choose" card grid. Text sits directly on the
   photograph, so it uses the light on-photo treatment (cream heading, aurora
   eyebrow) with a soft shadow for legibility, matching the hero and intro.
   ========================================================================== */
.features { display: grid; gap: clamp(2.75rem, 7vw, 5.5rem); }

.feature { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 820px) {
  .feature { grid-template-columns: 1fr 1fr; }
  /* Flip: image moves to the right, text to the left. */
  .feature--flip .feature__media { order: 2; }
}

.feature__media {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--surface-edge);
  background: rgba(247, 243, 234, 0.6);
  box-shadow: 0 26px 60px -32px rgba(0, 0, 0, 0.85);
}
.feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.feature:hover .feature__media img { transform: scale(1.03); }

.feature__text .eyebrow { color: var(--ink-link); }
.feature__text h2 {
  color: var(--ink-strong);
  text-shadow: none;
}
.feature__lede {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1rem, 0.97rem + 0.25vw, 1.14rem);
  line-height: 1.65;
  color: var(--ink-body);
  text-shadow: none;
  text-wrap: pretty;
}

.feature__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.4rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink-accent);           /* darkened gold — AA on white */
  text-decoration: none;
  text-shadow: none;
}
.feature__link svg { width: 18px; height: 18px; transition: transform 180ms ease; }
.feature__link:hover,
.feature__link:focus-visible { color: var(--ink-strong); }
.feature__link:hover svg,
.feature__link:focus-visible svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .feature__media img,
  .feature:hover .feature__media img,
  .feature__link svg { transition: none; transform: none; }
}

/* ==========================================================================
   WAVE DIVIDER — the solid content rises over the hero photo with a curved
   edge (like the reference site). The photo is now a scroll-away banner
   (see .backdrop), so below this wave everything sits on the solid --navy-900
   page colour.
   ========================================================================== */
.wave-top {
  position: relative;
  z-index: 2;
  /* Pull the whole wave up by its own height so its crest cuts into the bottom
     of the photo and the section below starts flush where the hero ended. */
  margin-top: calc(-1 * clamp(55px, 9vw, 130px));
  line-height: 0;
  pointer-events: none;
}
.wave-top svg {
  display: block;
  width: 100%;
  height: clamp(55px, 9vw, 130px);
}
.wave-top path { fill: #fff; }

/* The homepage content below the hero sits on a solid WHITE block that rises
   over the photo. Scoped to the homepage so the inner pages (whose headings sit
   directly on the dark background) are untouched. */
.lightbg { position: relative; z-index: 1; background: #fff; }
/* Homepage runs its light area in cream so it reads as one surface with the
   journey band (no white gap under the hero). */
.lightbg--cream { background: var(--cream); }

/* Executive-Director band: a slightly deeper cream, set off from the journey
   above by a wave. The wave is a cream shape with a wavy lower edge covering
   the band's top, so the journey cream flows into it and the deeper cream
   shows below the crest. */
.ed-band {
  position: relative;
  /* Deep red, matching the belief band on About Our Program. Everything in
     here flips to light type; the CTA button inverts to cream so it still
     reads as the primary action against the red. */
  background: #7A2E1E;
  /* Extra bottom room so the footer skyline drops well clear of the byline. */
  padding-block: clamp(3.75rem, 8vw, 6.5rem) clamp(5.5rem, 10vw, 9rem);
}
.ed-band__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(30px, 4vw, 56px);
  line-height: 0;
  pointer-events: none;
}
.ed-band__wave svg { display: block; width: 100%; height: 100%; }
.ed-band__wave path { fill: var(--cream); }

/* Culture's closing "Culture team" block, given the same deep-red band
   treatment as the welcome message on the homepage and the apply CTA. It was a
   plain centred section on the cream page; the wrapper and the wave make it
   full-bleed, and everything inside flips to light type. */
.team-band {
  position: relative;
  background: #7A2E1E;
  padding-block: clamp(3.25rem, 6vw, 5rem) clamp(6rem, 12vw, 9rem);
}
.team-band__wave {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: clamp(30px, 4vw, 56px);
  line-height: 0;
  pointer-events: none;
}
.team-band__wave svg { display: block; width: 100%; height: 100%; }
.team-band__wave path { fill: var(--cream); }

/* When the white quote ribbon runs straight into this band, the ribbon's
   bottom margin let a strip of the cream page show through between them, and
   the wave above was painting cream over that white edge — two seams where
   there should be none. Butt the ribbon against the band (its own bottom wave
   is dropped in the markup) and carry the white up through this wave instead,
   so white flows directly into red. */
.glance--flush { margin-bottom: 0; }
.glance--flush + .team-band .team-band__wave path { fill: #fff; }
.team-band .eyebrow { color: #F0C98E; }
.team-band h2,
.team-band .person h3 { color: var(--cream); }
.team-band .person p { color: rgba(247, 243, 234, 0.88); }
/* The card plate is a 55% cream wash for the cream page it used to sit on; on
   red that leaves cream type at 2.1:1. Invert it to an inset darker panel. */
.team-band .person {
  background: rgba(30, 10, 6, 0.30);
  border-color: rgba(247, 243, 234, 0.22);
}
.team-band .note { color: rgba(247, 243, 234, 0.78); }
.team-band a:not(.btn) { color: #F0C98E; }
/* the initials discs were gold with near-black type; cream reads better here
   and keeps the band to two colours */
.team-band .person__badge {
  background: var(--cream);
  color: var(--btn-red);
}

/* The Culture team cards carry expandable bios. The shared .bio rules were
   written for the dark navy pages, so retint them for the red band: the chevron
   was aurora green (off-palette since the colour pass) and .bio__text's 74%
   cream drops to 4.2:1 on #7A2E1E. */
.team-band .bio__name-main { color: var(--cream); }
.team-band .bio__role { color: rgba(247, 243, 234, 0.82); }
.team-band .bio__icon { color: #F0C98E; }
.team-band .bio__toggle:hover .bio__icon { color: var(--cream); }
.team-band .bio__toggle:focus-visible { outline-color: #F0C98E; }
.team-band .bio__text {
  color: rgba(247, 243, 234, 0.90);
  border-top-color: rgba(247, 243, 234, 0.26);
}
/* One card per row rather than the usual three-up grid. A five-paragraph bio
   inside a 240px grid column is a 35-line ribbon of text; full-width rows let it
   open at a readable measure, and the closed rows still read as a short list. */
.team-band .people {
  grid-template-columns: 1fr;
  max-width: 780px;
  align-items: start;
}
.team-band .bio__text { max-width: 64ch; }


/* Generic wave at the top of a band: a shape in the colour of the section
   above, with a wavy lower edge, so one band flows into the next. */
.band-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(26px, 3.5vw, 48px);
  line-height: 0;
  pointer-events: none;
}
.band-wave svg { display: block; width: 100%; height: 100%; }
.band-wave path { fill: #fff; }   /* the white "Six components" band above */

/* ==========================================================================
   ABOUT OUR PROGRAM — poster layout (intro / photo / cards + footer band)
   ========================================================================== */
.aop { position: relative; background: var(--cream); overflow: hidden; }
.aop__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  /* Match the first-band top gap used on every other inner page, so the cards
     sit the same distance under the scene as other pages' opening content. */
  padding-top: clamp(1.25rem, 2.5vw, 2.25rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 720px) {
  /* Intro + feather on top, cards in a full-width row underneath. */
  .aop__inner { grid-template-columns: 1fr 1fr; }
  .aop__cards { grid-column: 1 / -1; }
}

/* Intro */
.aop__eyebrow {
  margin: 0 0 1.1rem;
  color: #7A2E1E;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.92rem);
}
.aop__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink-strong);
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem);
  line-height: 1.02;
}
.aop__script {
  font-family: "Caveat", cursive;
  font-weight: 700;
  color: #7A2E1E;
  font-size: 1.5em;
  line-height: 0.85;
}
.aop__squiggle {
  display: block;
  width: 104px; height: 12px;
  margin: 0.55rem 0 1.7rem;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 12'%3E%3Cpath d='M2 7 Q 15 0 28 7 T 54 7 T 80 7 T 102 6' fill='none' stroke='%234FB0A5' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.aop__intro p { color: var(--ink-body); font-size: clamp(1rem, 0.97rem + 0.2vw, 1.12rem); line-height: 1.65; max-width: 42ch; }

/* Photo — cutout on white blends into the section. Spans the full row so it
   sits centred above the cards now that the intro copy lives in the header. */
.aop__photo { margin: 0 auto; max-width: 340px; grid-column: 1 / -1; }
.aop__photo img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
  .aop__photo { margin-top: clamp(-1rem, -1.5vw, 0rem); }
}

/* Cards in a row: icon on top, title, then text. */
.aop__cards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  align-items: stretch;
}
.aop-card {
  position: relative;
  /* a column so the three cards, stretched to a common height by the grid,
     all end with the same padding under their last line */
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 22px;
  padding: 0 0 1.5rem;
  overflow: hidden;   /* keeps the full-bleed banner inside the rounded corners */
  box-shadow: 0 22px 44px -26px rgba(50, 30, 70, 0.38);
  border-top: 4px solid var(--c);
}
.aop-card__body { padding: 0 1.4rem; }
/* Was a feather glyph on a small cream disc, then a photograph inside it. Now a
   full-bleed banner across the top of the card, its lower edge cut by the same
   wave used on the home page cards and the header shoreline. At 78px across, a
   photograph of a room full of people was unreadable; this gives it about
   twenty times the area. */
.aop-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  /* the title was sitting 6px under the photo; let the two breathe */
  margin: 0 0 clamp(1rem, 1.8vw, 1.35rem);
  overflow: hidden;
}
.aop-card__media picture { display: block; width: 100%; height: 100%; }
.aop-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sits over the foot of the photo in the card's own colour. Overhangs by a
   pixel each side: at fractional card widths a 100%-wide wave leaves a hairline
   of photo down the edge. */
.aop-card__wave {
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: calc(100% + 2px);
  height: clamp(18px, 2vw, 26px);
  display: block;
  fill: #fff;
  pointer-events: none;
}
.aop-card__body h3 { margin: 0 0 0.5rem; font-family: var(--display); font-weight: 700; font-size: 1.08rem; line-height: 1.2; color: #2B1D14; }
.aop-card__body p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-body); }
.aop-card--purple { --c: #7A2E1E; }   /* was purple #7E5AA6 */
.aop-card--green  { --c: #9E4426; }   /* was green  #6E8B57 */
.aop-card--gold   { --c: #C1962F; }
.aop-card--coral  { --c: #DB7857; }

/* Footer belief band */
.aop__foot {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  /* Was #6B4A93 purple, the last of the off-palette colours on this page. This
     is the same red as the site's eyebrows, so the band belongs to the rest of
     the design; white on it is 9.4:1, and it still reads as its own block
     against the near-black footer directly beneath. */
  background: #7A2E1E;
  color: #fff;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(6rem, 10vw, 8rem);
}
.aop__foot-wave {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: clamp(28px, 4vw, 58px);
  transform: translateY(-99%);
  fill: #7A2E1E;
  display: block;
}
.aop__foot-scene {
  position: absolute;
  right: 0; bottom: 0;
  width: min(56%, 760px);
  opacity: 0.15;
  pointer-events: none;
}
.aop__foot-scene svg { display: block; width: 100%; height: auto; fill: #fff; }
.aop__foot-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.85rem; }
.aop__foot-inner p { margin: 0 auto; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.22rem); font-weight: 600; line-height: 1.5; max-width: 46ch; }
.aop__foot-heart { color: #F0C98E; }   /* warm sand, was pink #EBC2DA */

/* Four program photos under the closing line. The source collages are 320px
   square, so the tile is capped at 200px: any larger and a 2x screen is
   upscaling them. Two-up on phones, four-up from 620px. */
.aop__foot-photos {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.6vw, 1rem);
  width: 100%;
  max-width: 440px;
}
@media (min-width: 620px) {
  .aop__foot-photos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 880px;
  }
}
.aop__foot-photos img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 16px 34px -20px rgba(20, 6, 3, 0.75);
}
/* Match the hero's aurora ribbon to whatever it resolves into: white on the
   inner pages, cream on the homepage where the journey band sits below. */
.hero .hero-divider__resolve { fill: var(--cream); }

/* ==========================================================================
   FOOTER — inverted to a solid dark block with light text (was cream).
   Comes last so it overrides the earlier light-theme footer rules.
   ========================================================================== */
.footer {
  background: var(--navy-900);
  color: var(--cream-soft);
  border-top: 1px solid rgba(247, 243, 234, 0.10);
}
.footer__head { color: var(--gold); }
.footer__blurb,
.footer__address,
.footer__list a,
.footer__social,
.acknowledge p,
.footer__legal { color: var(--cream-soft); }
.footer__list a:hover,
.footer__social:hover { color: var(--gold); }
.acknowledge { border-top-color: var(--hairline); }
.acknowledge__word { color: var(--gold) !important; }

/* ==========================================================================
   FEATURE COLOUR BANDS — each subject gets its own full-width colour row.
   All tints are light because the feature text is dark ink.
   ========================================================================== */
.feature-band { padding-block: clamp(3rem, 7vw, 5rem); position: relative; }
.feature-band--1 { background: #ffffff; }                 /* white */
/* Richer tints, with a soft aurora/gold wash in one corner so the bands don't
   read as flat blocks. */
.feature-band--2 {
  background-color: #efe1c4;                               /* deeper sand */
  background-image: radial-gradient(130% 90% at 100% 0%, rgba(251, 199, 7, 0.12), transparent 62%);
}
.feature-band--3 {
  background-color: #d9ece0;                               /* deeper spruce */
  background-image: radial-gradient(130% 90% at 0% 100%, rgba(79, 227, 176, 0.18), transparent 62%);
}

/* ---- Feature section "pop" enhancements -------------------------------- */
/* Photos: an offset accent panel behind each image for depth. */
.feature__media {
  position: relative;
  border: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.feature__media img { border-radius: 20px; position: relative; z-index: 1;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.8); }
.feature__media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  transform: translate(-16px, 16px);
  z-index: 0;
}
.feature--flip .feature__media::before { transform: translate(16px, 16px); }
.feature-band--1 .feature__media::before { background: var(--gold); }
.feature-band--2 .feature__media::before { background: #0b6b4e; }
.feature-band--3 .feature__media::before { background: var(--gold); }

/* Headings: brighter eyebrow + a short accent rule under the title. */
.feature__text .eyebrow { color: var(--ink-link); font-weight: 700; letter-spacing: 0.15em; }
.feature__text h2::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-top: 0.85rem;
  border-radius: 4px;
  background: var(--gold);
}
.feature-band--2 .feature__text h2::after { background: #0b6b4e; }

/* CTAs: solid pill buttons instead of quiet text links. */
.feature__link {
  margin-top: 1.6rem;
  padding: 0.72rem 1.5rem;
  border-radius: 999px;
  background: var(--ink-link);
  color: var(--cream);
  font-size: 1rem;
  box-shadow: 0 12px 26px -14px rgba(8, 85, 63, 0.75);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.feature__link:hover,
.feature__link:focus-visible {
  background: #0a6b4e;
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px rgba(8, 85, 63, 0.85);
}

/* The wave that hands off from the hero photo is filled to match band 1. */
.wave-top path { fill: #ffffff; }

/* ==========================================================================
   HOMEPAGE JOURNEY — "Every step for your child": a winding trail linking three
   ringed, numbered photos, intro copy on the left. Cream backdrop.
   ========================================================================== */
.journey {
  position: relative;
  background: var(--cream);
  /* Tighter than before — the section was carrying too much empty cream. */
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}
/* Wider than the standard wrap so the three cards become the focus and don't
   float in big side margins. */
.journey__inner { display: block; width: min(1460px, 100%); }

/* ---- Centered header over the three cards ---- */
.journey__head {
  max-width: 640px;
  margin: 0 auto clamp(2rem, 3.5vw, 3rem);
  text-align: center;
}

.journey__eyebrow {
  margin: 0;
  color: #9E4426;                 /* terracotta */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.9rem);
}
.journey__flourish { display: block; margin: 0.7rem auto 1rem; }
.journey__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  color: #2B1D14;                 /* dark brown */
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.journey__rule {
  display: block;
  width: 84px;
  height: 4px;
  margin: 1rem auto;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 12px, transparent 12px 20px);
}
.journey__lede {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--ink-body);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.18rem);
  line-height: 1.65;
}

/* ---- Three cards in a row ---- */
.jrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
  align-items: stretch;
}
@media (max-width: 860px) {
  .jrow { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}

.jcard {
  position: relative;                /* anchors the stretched link + hover */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #FFFDF8;
  border: 1px solid rgba(35, 31, 32, 0.09);
  border-radius: 22px;
  padding: 0 0 clamp(1.9rem, 2.6vw, 2.9rem);
  overflow: hidden;   /* keeps the full-bleed banner inside the rounded corners */
  box-shadow: 0 28px 56px -34px rgba(0, 0, 0, 0.5);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.jcard--1 { --accent: #8A2018; }
.jcard--2 { --accent: #6E4D00; }
.jcard--3 { --accent: #9E4426; }

/* The whole card is clickable: the link's stretched pseudo covers the card.
   Hover/focus lift it a touch with a deeper shadow. */
.jcard:hover,
.jcard:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 42px 74px -34px rgba(0, 0, 0, 0.55);
}

/* The photo is a full-bleed banner across the top of the card, its lower edge
   cut by the same wave that runs through the header shoreline, the white ribbon
   on Culture and the red closing bands. It replaced a circular crop, which threw
   away the corners of what are all wide group scenes. */
.jcard__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 0.5rem;
  overflow: hidden;   /* clips the hover scale */
}
.jcard__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.jcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
/* Sits over the foot of the photo in the card's own colour, so the image
   dissolves into the card rather than stopping at a hard line. */
.jcard__wave {
  position: absolute;
  /* overhangs by a pixel on every side: at fractional card widths a 100%-wide
     wave leaves a hairline of photo showing down the card's edge */
  left: -1px;
  bottom: -1px;
  width: calc(100% + 2px);
  height: clamp(22px, 2.4vw, 34px);
  display: block;
  fill: #FFFDF8;
  pointer-events: none;
}
.jcard:hover .jcard__media img,
.jcard:focus-within .jcard__media img { transform: scale(1.03); }

.jcard__num {
  position: absolute;
  top: auto;
  bottom: 8px;
  right: clamp(0.9rem, 1.6vw, 1.2rem);
  width: clamp(38px, 3.4vw, 48px);
  z-index: 1;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 0.72rem + 0.75vw, 1.3rem);
  box-shadow: 0 0 0 5px rgba(255, 253, 248, 0.92);   /* halo lifts it off the photo */
}
.jcard__title,
.jcard p,
.jcard__link { padding-inline: clamp(1.6rem, 2.2vw, 2.5rem); }

.jcard__title {
  margin: 0 0 0.55rem;
  font-family: var(--body);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: clamp(1.14rem, 1.05rem + 0.32vw, 1.28rem);   /* ~18–20px */
  line-height: 1.22;
}
.jcard p {
  margin: 0;
  color: var(--ink-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.06rem);        /* ~16–17px */
  line-height: 1.65;
}
.jcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: auto;
  padding-top: 1.15rem;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--accent);
  text-decoration: none;
}
/* Stretch the link across the whole card so any click on the card follows it. */
.jcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.jcard__link:hover,
.jcard:hover .jcard__link { text-decoration: underline; }
.jcard__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.jcard__arrow { transition: transform 0.28s ease; }
.jcard:hover .jcard__arrow,
.jcard:focus-within .jcard__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .jcard, .jcard__media img, .jcard__arrow { transition: none; }
  .jcard:hover, .jcard:focus-within { transform: none; }
  .jcard:hover .jcard__media img { transform: none; }
}

/* ==========================================================================
   WHY CHOOSE US — two-per-row grid of image-above-text tiles.
   ========================================================================== */
.wcu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.25rem);
}
@media (min-width: 760px) {
  .wcu-grid { grid-template-columns: 1fr 1fr; }
}
.wcu-tile { display: flex; flex-direction: column; }

/* Icon plate. Replaced the 16:10 motif photos, which read as too illustrative
   for the rest of the site. One small line mark per tile, nothing more.
   NOTE the stroke colour: brand gold on cream is 1.4:1 — invisible. Gold tiles
   use --ink-accent (that gold darkened to pass AA); the plate behind it keeps
   the gold present without relying on it to carry the shape. */
.wcu-tile__icon {
  display: grid;
  place-items: center;
  width: clamp(70px, 8vw, 84px);
  aspect-ratio: 1;
  margin: 0 0 clamp(1rem, 2vw, 1.35rem);
  border-radius: 16px;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wcu-tile__icon svg { width: 66%; height: 66%; }
.wcu-tile:hover .wcu-tile__icon { transform: translateY(-2px); }

.wcu-tile--gold .wcu-tile__icon {
  background: rgba(251, 199, 7, 0.18);
  border: 1px solid rgba(143, 101, 0, 0.28);
  color: var(--ink-accent);
}
.wcu-tile--spruce .wcu-tile__icon {
  background: rgba(122, 46, 30, 0.10);
  border: 1px solid rgba(122, 46, 30, 0.30);
  color: #7A2E1E;
}
.wcu-tile__text .eyebrow { color: var(--ink-link); font-weight: 700; letter-spacing: 0.15em; }
.wcu-tile__text h2 { color: var(--ink-strong); margin: 0.35rem 0 0; }
.wcu-tile__text h2::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-top: 0.85rem;
  border-radius: 4px;
  background: var(--gold);
}
.wcu-tile--spruce .wcu-tile__text h2::after { background: #7A2E1E; }
.wcu-tile__body {
  margin: 1rem 0 0;
  max-width: 46ch;
  line-height: 1.65;
  color: var(--ink-body);
  text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
  .wcu-tile__icon,
  .wcu-tile:hover .wcu-tile__icon { transition: none; transform: none; }
}

/* ==========================================================================
   LAND SILHOUETTE DIVIDER (.scene) — teepees, evergreens and a campfire on a
   horizon, marking the transition between two colour bands. The horizon splits
   sky (--sky, the band above) from ground (--ground, the band below); the
   silhouettes stand on it.
   ========================================================================== */
.scene {
  position: relative;
  height: clamp(104px, 13vw, 168px);
  background: linear-gradient(to bottom, var(--sky) 0 62%, var(--ground) 62% 100%);
  overflow: hidden;
}
.scene__art {
  position: absolute;
  left: 50%;
  bottom: 38%;                 /* feet rest on the horizon line (62% from top) */
  transform: translateX(-50%);
  width: min(720px, 90%);
  height: auto;
}

/* --- White land silhouettes along the bottom of the hero photo ------------- */
.hero-sil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.hero-sil svg {
  display: block;
  width: min(1120px, 96%);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(5, 9, 26, 0.45));
}

/* Aurora-ribbon divider at the base of the hero — glowing bands over the photo
   that resolve into the white content below. Stretches full width. */
.hero .hero-divider {
  position: absolute;
  /* The hero is a centred max-width column, but the photo behind it is full
     width — so break the divider out of the column to span the whole viewport,
     otherwise it only covers the middle. */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  /* Sit a touch below the hero's bottom edge so the ribbon rides lower on the
     photo; the white fill just spills onto the (white) content below. */
  bottom: clamp(-34px, -2.2vw, -18px);
  height: clamp(64px, 8vw, 110px);
  z-index: 2;
  pointer-events: none;
}
.hero .hero-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Same aurora ribbon at the base of an inner-page header, where the aurora
   backdrop hands off to the first white section. */
/* Room below the intro so the ribbon sits under the text, never over it. */
.page-head--aurora { position: relative; padding-bottom: clamp(5rem, 8vw, 7rem); }
.page-head--aurora .hero-divider {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  bottom: clamp(-46px, -3.4vw, -26px);
  height: clamp(64px, 8vw, 110px);
  z-index: 2;
  pointer-events: none;
}
.page-head--aurora .hero-divider svg { display: block; width: 100%; height: 100%; }

/* Section headings that sit directly on the white .lightbg (not inside a cream
   panel) — e.g. the Funders and Partners headers on About — need dark ink. */
.lightbg { color: var(--ink-body); }
.lightbg > .section > .eyebrow,
.lightbg .section > .eyebrow { color: var(--ink-link); }
.lightbg .section > .h-lg,
.lightbg .section > h2,
.lightbg .section > .h-xl { color: var(--ink-strong); }
.lightbg .section > .sub { color: var(--ink-body); }

/* --- About: links to Vision / Mission / Values / History ------------------
   These four pages are deliberately not in the About AHS dropdown, so this
   block is their only nav path. Light surface — uses the --ink-* palette. */
.about-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.about-links a {
  display: block;
  height: 100%;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(8, 85, 63, 0.22);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.about-links a:hover,
.about-links a:focus-visible {
  border-color: var(--ink-link);
  transform: translateY(-2px);
}
.about-links a:focus-visible { outline: 2px solid var(--ink-link); outline-offset: 3px; }

.about-links__title {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-strong);
}
.about-links__desc {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-body);
}

@media (prefers-reduced-motion: reduce) {
  .about-links a { transition: none; }
  .about-links a:hover,
  .about-links a:focus-visible { transform: none; }
}

/* Kihew the eagle, centred beneath the About intro on the light background. */
.about-bird { margin: 0 auto clamp(2rem, 4vw, 3rem); max-width: 620px; text-align: center; }
.about-bird img { width: 100%; height: auto; }
.about-bird figcaption {
  margin-top: 0.4rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-body);
}

/* Eagle beside the "About Aboriginal Head Start" intro, over the aurora sky. */
.about-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 860px) {
  .about-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.about-hero__text > .eyebrow:first-child { margin-top: 0; }
.about-hero__bird { margin: 0; position: relative; }
/* A soft dark halo settles the eagle against the busy aurora behind it. */
.about-hero__bird::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: 0;
  background: radial-gradient(ellipse 62% 58% at 50% 46%,
              rgba(5, 9, 26, 0.72) 0%,
              rgba(5, 9, 26, 0.5) 42%,
              rgba(5, 9, 26, 0) 74%);
  pointer-events: none;
}
.about-hero__bird picture,
.about-hero__bird figcaption { position: relative; z-index: 1; }
.about-hero__bird img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}
.about-hero__bird figcaption {
  margin-top: 0.4rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(247, 243, 234, 0.9);
  text-align: center;
}

/* Eagle beside the "Six program components" blurb. Stacks on narrow screens. */
.about-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
@media (min-width: 780px) {
  .about-intro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.about-intro .about-bird { margin: 0; max-width: 520px; }
.about-intro__text > .eyebrow:first-child { margin-top: 0; }

/* ==========================================================================
   SPICE fan + commitments timeline (About), two columns.
   ========================================================================== */
.spice-commit { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 980px) {
  .spice-commit {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

/* Pull-quote */
.spice-quote {
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  max-width: 460px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--surface-edge);
  border-radius: 26px 26px 26px 6px;
  padding: 1.1rem 1.35rem 1.2rem;
}
.spice-quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
  line-height: 1.4;
  color: var(--ink-strong);
}
.spice-quote__heart { display: block; margin-top: 0.35rem; text-align: center; color: #C0392B; font-size: 1.2rem; }

/* SPICE fan */
.spice-fan__label {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--ink-link);
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
}
/* The label is a <p> inside .pm, and `.pm p { margin: 0 0 1rem }` carries a
   class AND an element type, so it outranks the single class above and wiped
   the top margin out — the label ended up nearer the paragraph it follows than
   the list it introduces. Restate it at matching specificity. */
.pm .spice-fan__label { margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; }
/* SPICE items as horizontal rows: colour badge + name + description. */
.spice-rows { list-style: none; margin: clamp(1rem, 2vw, 1.5rem) 0 0; padding: 0; display: grid; gap: clamp(0.9rem, 2vw, 1.3rem); }
.spice-row { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: center; }
.spice-row__icon {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 9px 20px -12px rgba(0, 0, 0, 0.55);
}
.spice-row__icon svg { width: 28px; height: 28px; }
.spice-row__name { margin: 0 0 0.3rem; font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--c); }
/* The leading letter is the acronym: size it up so S-P-I-C-E reads down
   the column at a glance rather than hiding inside the word. */
.spice-row__name b { font-weight: 700; font-size: 1.24em; line-height: 1; }
.spice-row__note { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-body); }

/* The SPICE list with a photograph beside it. One column on narrow screens,
   with the photo after the list so the reading order is unchanged. */
.spice-split {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
.spice-split__photo { margin: 0; }
.spice-split__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 22px 48px -30px rgba(5, 9, 26, 0.55);
}
/* On one column the photo would run the full width of the text column and
   dwarf the list; keep it to a sensible width and centre it. */
@media (max-width: 879px) {
  .spice-split__photo { width: min(100%, 340px); margin-inline: auto; }
}
/* Two columns, with the photo run to the full height of the list beside it.
   These rules have to come AFTER the base ones above, not before: they carry
   the same specificity, so source order is what decides, and an earlier
   height:100% simply loses to the later height:auto. */
@media (min-width: 880px) {
  .spice-split { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
  .spice-split__photo { align-self: stretch; }
  .spice-split__photo picture { display: block; height: 100%; }
  .spice-split__photo img {
    height: 100%;
    object-fit: cover;
    /* the child sits right of centre and the sun flare is off to the left */
    object-position: 58% 32%;
  }
}


/* Commitments timeline */
.commit-head { display: flex; align-items: center; gap: 0.75rem; }
.commit-head__icon {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #7A2E1E; color: #fff;
  display: grid; place-items: center;
}
.commit-head__icon svg { width: 28px; height: 28px; }
.commit-head .h-lg { margin: 0; }
.commit-intro { margin: 0.85rem 0 clamp(1.5rem, 3vw, 2rem); color: var(--ink-body); max-width: 52ch; }
.commit-timeline { list-style: none; margin: 0; padding: 0; }
.ct-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  padding-bottom: clamp(1.1rem, 2vw, 1.6rem);
}
.ct-item__icon {
  position: relative;
  z-index: 1;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #F0E7D3;
  border: 1px solid var(--surface-edge);
  color: var(--ink-link);
  display: grid; place-items: center;
}
.ct-item__icon svg { width: 24px; height: 24px; }
.ct-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px; top: 48px; bottom: -2px;
  border-left: 2px dotted rgba(35, 31, 32, 0.28);
}
.ct-item__body h3 { margin: 0.25rem 0 0.2rem; font-family: var(--display); font-weight: 600; font-size: 1.06rem; color: var(--ink-strong); }
.ct-item__body p { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--ink-body); }

/* ==========================================================================
   SIX PROGRAM COMPONENTS — circular wheel (desktop) + stacked list (mobile)
   ========================================================================== */
.wheel { display: none; }
.components-stack {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 620px) {
  .components-stack { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 940px) {
  .components-stack { display: none; }
  .wheel {
    display: grid;
    grid-template-columns: minmax(150px, 0.85fr) minmax(0, 2.5fr) minmax(150px, 0.85fr);
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
    margin-top: clamp(1rem, 2vw, 2rem);
  }
}
.wheel__stage { min-width: 0; }
.wheel__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Segment label (icon + title + description), rendered inside the SVG. */
.wseg {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-family: var(--body);
  line-height: 1.14;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 0 4px;
}
.wseg__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.wseg__icon svg { width: 21px; height: 21px; }
.wseg__t { margin: 0 0 5px; font-family: var(--display); font-weight: 600; font-size: 21px; }
.wseg__d { margin: 0; font-size: 18px; line-height: 1.32; }

/* Central hub text. */
.hub {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--display);
  color: var(--ink-strong);
  line-height: 1.16;
}
.hub span { font-size: 31px; }
.hub strong { font-size: 35px; font-weight: 600; font-style: italic; color: #C0392B; }
.hub__heart { color: #C0392B; font-size: 27px; margin-top: 2px; }

/* Flanking value labels. */
.wheel__col--l { text-align: right; }
.wheel__col--l .wside { flex-direction: row-reverse; }
.wside { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: clamp(1.5rem, 4vh, 2.75rem); }
.wside:last-child { margin-bottom: 0; }
.wside__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-edge);
  display: grid; place-items: center;
  color: var(--ink-link);
}
.wside__icon svg { width: 22px; height: 22px; }
.wside h3 { margin: 0 0 0.2rem; font-family: var(--display); font-weight: 600; font-size: 1.06rem; color: var(--ink-strong); }
.wside p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ink-body); }

/* Mobile stacked cards. */
.cstack { border: 1px solid var(--surface-edge); border-radius: 16px; overflow: hidden; background: #fff; }
.cstack__icon { display: none; }
.cstack picture { display: block; }
.cstack img { width: 100%; height: auto; display: block; background: var(--c); }
.cstack > div { padding: 1rem 1.15rem 1.15rem; }
.cstack h3 { margin: 0 0 0.35rem; font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--c); }
.cstack p { margin: 0; color: var(--ink-body); line-height: 1.55; }

/* ==========================================================================
   ABOUT — full-width flowing bands (matches the homepage rhythm) instead of
   boxed cream panels. Reuses .feature-band--1/2/3 for the backgrounds; these
   rules just set the dark-ink text colours on them.
   ========================================================================== */
.about-band .eyebrow { color: var(--ink-link); font-weight: 700; letter-spacing: 0.15em; }
.about-band h2,
.about-band .h-lg { color: var(--ink-strong); }
.about-band .sub { color: var(--ink-body); }
.about-band > .wrap > .h-lg { margin-top: 0.35rem; }

/* Funders: clean logo + text rows, divided by a hairline — no boxes. */
.funder-flow { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.75rem, 5vw, 4rem); }
.funder-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem clamp(2.5rem, 4vw, 3.75rem); align-items: start; }
@media (min-width: 720px) {
  .funder-row { grid-template-columns: 220px minmax(0, 1fr); }
}
.funder-row + .funder-row {
  border-top: 1px solid var(--surface-edge);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.funder-row__logo { display: flex; }
.funder-row h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  color: var(--ink-strong);
}
.funder-row p { margin: 0 0 0.8rem; color: var(--ink-body); max-width: 60ch; }
.funder-row p:last-child { margin-bottom: 0; }
.funder-row .funder__logo { margin: 0; max-height: 64px; }

/* Partners: a plain directory of names + blurbs, hairline-topped, no card boxes. */
.partner-list {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3rem);
}
.partner-list__item { padding-top: 1rem; border-top: 2px solid var(--gold); }
.partner-list__item h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink-strong);
}
.partner-list__item h3 a { color: var(--ink-link); text-decoration: none; }
.partner-list__item h3 a:hover,
.partner-list__item h3 a:focus-visible { text-decoration: underline; }
.partner-list__item p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-body); }

/* The last light section before the footer gets extra bottom room so the
   navy skyline drops clear of its content (matches the homepage ED band).
   Declared here, after .section/.feature-band, so it wins the cascade. */
.pre-footer { padding-bottom: clamp(6rem, 12vw, 9rem); }

/* "View this site →" link on the locations overview cards. */
.card__more { font-weight: 700; display: inline-block; margin-top: 0.35rem; }

/* Footer skyline: the navy shapes sit on the footer's top edge and rise up
   into the lighter section above, so the footer reads as a paper-cut horizon.
   The footer is lifted above the white content (z-index) so the shapes show. */
.footer { position: relative; z-index: 2; }
/* The skyline rises out of the footer's top edge into the content above it —
   navy shapes on a transparent band, no white bar. It sits over whatever
   content precedes the footer: on the bright pages (home, about, why-choose-us)
   it reads as dark shapes against the light section; on the darker inner pages
   it blends into the navy, the same way the homepage originally did. */
.footer-sil {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.footer-sil svg {
  display: block;
  width: min(1120px, 96%);
  height: auto;
  fill: var(--navy-900);
}

/* --- Executive Director message + apply CTA, side by side, NO card boxes ----
   Open editorial columns straight on the page (dark ink on the white section),
   divided by a hairline rule instead of two boxed panels. */
.duo--open { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) {
  /* Message gets the wider column; the CTA sits beside it, vertically centred,
     with a rule between them. */
  .duo--open { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .duo--open .cta-open {
    align-self: center;
    border-left: 1px solid var(--surface-edge);
    padding-left: clamp(2rem, 4vw, 3.5rem);
  }
}
@media (max-width: 899px) {
  .duo--open .cta-open {
    border-top: 1px solid var(--surface-edge);
    padding-top: 2rem;
  }
}

/* On the red welcome band, the whole column flips to light type. Scoped to
   .ed-band so any other use of .duo--open keeps its dark-on-light treatment. */
.ed-band .duo--open .eyebrow,
.ed-band .duo--open .signoff,
.ed-band .duo--open a:not(.btn) { color: #F0C98E; }
.ed-band .duo--open h2,
.ed-band .duo--open .byline    { color: var(--cream); }
.ed-band .duo--open p          { color: rgba(247, 243, 234, 0.90); }
.ed-band .duo--open .cta-open  { border-color: rgba(247, 243, 234, 0.30); }
.ed-band .portrait             { border-color: rgba(247, 243, 234, 0.55); }
/* The primary button is deep red everywhere else; on a deep red band it has to
   invert or it disappears. Cream fill, red label: 8.2:1 either way round. */
.ed-band .btn--primary {
  background: var(--cream);
  color: var(--btn-red);
  box-shadow: 0 2px 0 rgba(30, 10, 6, 0.35);
}
.ed-band .btn--primary:hover,
.ed-band .btn--primary:focus-visible {
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(30, 10, 6, 0.35), 0 2px 0 rgba(30, 10, 6, 0.35);
}
.ed-band .duo--open .btn--ghost {
  background: transparent;
  border-color: rgba(247, 243, 234, 0.55);
  color: var(--cream);
}
.ed-band .duo--open .btn--ghost:hover,
.ed-band .duo--open .btn--ghost:focus-visible {
  background: rgba(247, 243, 234, 0.12);
  border-color: var(--cream);
}

/* Text colours (these used to come from .panel; the boxes are gone now). */
.duo--open .eyebrow { color: var(--ink-link); }
.duo--open h2 { color: var(--ink-strong); }
.duo--open p { color: var(--ink-body); }
.duo--open .signoff { color: var(--ink-accent); }
.duo--open .byline { color: var(--ink-strong); }
.duo--open a:not(.btn) { color: var(--ink-link); }

/* CTA buttons in the open (no-card) layout: left-aligned, and the ghost button
   needs the on-light treatment it used to get from .panel. */
.duo--open .hero__actions { justify-content: flex-start; }
.duo--open .btn--ghost {
  background: transparent;
  border-color: rgba(35, 31, 32, 0.3);
  color: var(--ink-strong);
}
.duo--open .btn--ghost:hover,
.duo--open .btn--ghost:focus-visible {
  background: rgba(35, 31, 32, 0.06);
  border-color: var(--ink-strong);
}

/* ==========================================================================
   FULL LOGO BADGE — the complete logo (wordmark + tagline + blocks) sits on
   its own white card, so it reads on the dark header/footer and on light pages.
   ========================================================================== */
.nav__brand { align-self: center; }
/* The client supplied this lockup with a transparent background and light
   outlines around the artwork, so it sits straight on the dark bar — no white
   card behind it. (The first version they sent was drawn on solid white and did
   need one.) The footer keeps the older white-out stacked lockup. */
.nav__logo {
  display: block;
  height: clamp(56px, 7vw, 96px);
  width: auto;
  /* The bar is deliberately see-through, so the white "urban and northern
     communities" tagline sits on whatever the header photo happens to be doing
     underneath. A tight dark shadow separates it from a bright patch without
     making the bar less transparent. It follows the artwork's own alpha, so it
     hugs the letterforms rather than boxing the image. */
  filter: drop-shadow(0 1px 2px rgba(15, 3, 2, 0.85));
}

.footer__logo {
  display: block;
  width: min(240px, 82%);
  height: auto;
  margin-bottom: 1.9rem;
}

/* ==========================================================================
   HEADER: transparent over the hero, fades to solid once content scrolls
   behind it (JS toggles .is-solid — see nav.js). The solid layer is a
   pseudo-element so the opacity can animate smoothly.
   ========================================================================== */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(94, 21, 15, 0.76) 0%, rgba(94, 21, 15, 0.70) 100%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.nav.is-solid::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nav::before { transition: none; }
}


/* ---- "What guides us": Vision / Mission / Values / Our History sections (About) ---- */
.guides{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:1.6rem; }
.guide-card{
  background:#fff; border:1px solid rgba(8,85,63,.14); border-radius:18px;
  padding:1.7rem 1.8rem; box-shadow:0 8px 22px rgba(5,9,26,.06);
}
.guide-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:rgba(79,227,176,.16); color:var(--ink-link); margin-bottom:.85rem;
}
.guide-card__icon svg{ width:25px; height:25px; }
.guide-card__title{
  font-family:var(--display); font-weight:600; color:var(--ink-link);
  font-size:1.45rem; margin:0 0 .55rem;
}
.guide-card p{ margin:0; color:var(--ink-body); line-height:1.62; }
.guide-card__soon{
  display:inline-block; margin-top:.9rem;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#6E4D00; background:rgba(251,199,7,.18); padding:.28rem .8rem; border-radius:999px;
}
@media (max-width:720px){ .guides{ grid-template-columns:1fr; } }

/* ---- "What guides us" compass hub (About) ---- */
/* The wheel was capped 200px narrower than the .wrap--wide it sits in, so it
   floated in its own band with unused room either side. Let it take the full
   wrap; everything inside the SVG (wheel, icons and the four text blocks)
   scales with the viewBox, so the whole diagram grows together. */
.guides-hub{ max-width:1360px; margin:0 auto; }
.ghead{ text-align:center; max-width:760px; margin:0 auto; }
.ghead .ghead__eye{ color:#7A2E1E; letter-spacing:.24em; font-weight:700; font-size:.9rem; text-transform:uppercase; }
.ghead h2{ font-family:var(--display); font-weight:700; color:var(--ink-strong); font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.05; margin:.4rem 0 .7rem; }
.ghead .ghead__rule{ display:inline-block; width:56px; height:4px; background:#7A2E1E; border-radius:3px; margin:0 0 .7rem; }
.ghead p{ color:var(--ink-body); font-size:1.05rem; line-height:1.5; margin:0; }
.guides-hub__svg{ width:100%; height:auto; display:block; margin-top:clamp(2rem, 5vw, 3.5rem); }
.guides-hub .hb-t{ font-family:var(--display); font-weight:700; font-size:1.7rem; line-height:1; margin-bottom:.35rem; }
.guides-hub .hb-p{ color:var(--ink-body); font-size:.98rem; line-height:1.45; margin:0; text-wrap:pretty; }
.guides-hub__stack{ display:none; }
@media (max-width:1000px){
  .guides-hub__svg{ display:none; }
  .guides-hub__stack{ display:block; margin-top:1.6rem; }
  .guides-hub__stack ul{ list-style:none; padding:0; margin:0; display:grid; gap:1.4rem; }
  .ghs-item{ display:flex; gap:1rem; align-items:flex-start; }
  .ghs-ic{ flex:0 0 52px; width:52px; height:52px; border:2px solid; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .ghs-ic svg{ width:26px; height:26px; }
  .ghs-t{ font-family:var(--display); font-size:1.25rem; margin:0 0 .25rem; }
  .ghs-p{ color:var(--ink-body); margin:0; line-height:1.5; }
}


/* ================= ABOUT PAGE UPGRADES: bands, stats, components, quote ===== */
/* Wider content on large screens so big monitors don't leave huge gutters. */
.wrap.wrap--wide { width: min(1360px, 100%); }
/* .wrap sets `width`, not `max-width`, so a bare `max-width: 1360px` here was
   inert and this band silently rendered at the default 1120px. Set `width`,
   the same way .journey__inner does on the homepage. */

/* Compass framed in a white card on the cream band. */
.guides-band { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
/* The header photo's baked-in cream shoreline already supplies most of the
   transition, so the band's own top padding piled on top of it: 71px of flat
   cream at 1100px, 95px at 2400px, against ~52px below the wheel. Pull the band
   up into the photo's own cream — cream over cream, so the seam is invisible —
   by an amount that grows with the viewport, since that is where the excess is.
   The curve's deepest point still clears the content at every width. */
.guides-band { margin-top: calc(-7px - clamp(6px, (100vw - 900px) * 0.02, 30px)); }
.guides-band .guides-hub {
  background: transparent;
  padding: 0.5rem 0 1rem;
}
.guides-band .guides-hub .hb-t { font-size: 2.05rem; }
.guides-band .guides-hub .hb-p { font-size: 1.08rem; }

/* Tighten the gap between the intro paragraph and the compass wheel; it was
   sitting ~56px below its own lead-in for no reason. The space BELOW the wheel
   is left alone on purpose: .pre-footer's bottom padding is what the footer's
   tree silhouette (~93px tall, absolutely positioned above the footer edge)
   rises into, and trimming it puts the treeline straight onto the Values text.
   Scoped to .guides-band so other pre-footer sections are untouched. */
.guides-band .guides-hub__svg { margin-top: clamp(1rem, 1.5vw, 1.375rem); }

/* Bottom half of the band's breathing room. Both this and .guides-band's
   negative margin-top are tuned together so the gap above the content (header
   photo's shoreline curve -> "WHO WE ARE") and the gap below it (lowest label
   -> footer treeline) come out equal. Neither endpoint is a box edge — the
   photo's baked-in cream intrudes from above and the treeline rises from below,
   and both intrusions change with viewport width — so each side carries a
   vw-phased correction. Measured 1001-2400px: the two gaps stay within 3px of
   each other. Re-measure both if you touch either number. */
.guides-band.pre-footer {
  padding-bottom: calc(clamp(6rem, 12vw, 9rem) + 7px - clamp(0px, (100vw - 1000px) * 0.10, 36px));
}

/* ---- Board / Leadership: light people cards, wide head, light doc panel --
   These pages were built in the site's original dark-on-aurora style. On the
   lighter, banded layout (to match the About page) the frosted cards and dark
   CTA panel read poorly, so give them light-surface equivalents. */
.ghead--wide { max-width: 820px; }

/* Frosted dark cards -> clean white cards that pop on a cream band. */
.people--light .person {
  background: #ffffff;
  border-color: rgba(5, 9, 26, 0.10);
  box-shadow: 0 12px 30px -24px rgba(5, 9, 26, 0.45);
}
.people--light .bio__name-main { color: var(--ink-strong); }
.people--light .bio__role { color: var(--ink-body); }
.people--light .bio__text {
  color: var(--ink-body);
  border-top-color: rgba(5, 9, 26, 0.12);
}
.people--light .bio__icon { color: #7A2E1E; }
.people--light .person a { color: var(--ink-link); }

/* Society documents — a light cream panel instead of the dark CTA panel. */
.lpanel {
  max-width: 760px;
  margin: 0 auto;
  background: var(--cream);
  border: 1px solid rgba(5, 9, 26, 0.08);
  border-radius: 18px;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: 0 24px 60px -36px rgba(5, 9, 26, 0.40);
  text-align: center;
}
.lpanel h2 { color: var(--ink-strong); margin-top: 0; }
.lpanel p { color: var(--ink-body); margin-left: auto; margin-right: auto; }
.lpanel code { background: rgba(5, 9, 26, 0.06); padding: 0.05em 0.35em; border-radius: 4px; }
.lpanel .hero__actions { justify-content: center; }
/* Ghost button is styled for dark backgrounds — flip it dark-on-light here. */
.lpanel .btn--ghost {
  background: transparent;
  border-color: rgba(5, 9, 26, 0.30);
  color: var(--ink-strong);
}
.lpanel .btn--ghost:hover,
.lpanel .btn--ghost:focus-visible {
  background: rgba(5, 9, 26, 0.05);
  border-color: var(--ink-strong);
}

/* ==== Board of Directors — single-card layout (mockup) ==================== */
.dir {
  /* Top gap matches --section-gap so the wave-to-content spacing is the same
     here as on the other cream pages; bottom matches .pre-footer. */
  padding: var(--section-gap) 1rem clamp(6rem, 12vw, 9rem);
  background: #F7F3EA;
}
/* Open, un-boxed layout: content sits directly on the page and breathes,
   with the ornamental dividers doing the work the card border used to. */
.dir__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 clamp(0.25rem, 2vw, 1rem);
  text-align: center;
}
.dir__intro { padding-top: clamp(1rem, 3vw, 2rem); }

/* Headings + gold rules */
.dir__eye { margin: 0; color: #7A2E1E; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.82rem; }
.dir__rule { display: inline-block; width: 54px; height: 3px; margin: 0.7rem 0; background: var(--gold); border-radius: 3px; }
.dir__h { font-family: var(--display); font-weight: 700; color: #2B1D14; font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.04; margin: 0.2rem 0 1rem; }
.dir__h2 { font-family: var(--display); font-weight: 700; color: #2B1D14; font-size: clamp(1.55rem, 3vw, 2.1rem); margin: 0 0 0.2rem; }
.dir__lead, .dir__sub { color: var(--ink-body); line-height: 1.55; margin: 0 auto; max-width: 620px; }
.dir__lead { font-size: 1.06rem; }
/* Consecutive lead paragraphs were butting together (margin 0), so a three-
   paragraph intro read as one block of centred text. Separate them. */
.dir__lead + .dir__lead { margin-top: 0.9rem; }
.dir__sub { font-size: 1rem; margin-top: 0.6rem; }

/* Ornamental dividers */
/* The ornament was paying a full 44px above AND below at desktop, which put
   ~123px of empty cream between the intro and "Meet the Team". Halved. */
.dir-div { display: block; width: min(560px, 100%); height: auto; margin: clamp(1.15rem, 2.5vw, 2.125rem) auto; }
.dir-div--thin { width: min(620px, 100%); }

/* Member cards */
.dcards {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  text-align: left;
}
.dcard {
  background: #fff; border: 1px solid rgba(5, 9, 26, 0.09); border-radius: 14px;
  box-shadow: 0 12px 30px -24px rgba(5, 9, 26, 0.45);
}
.dcard__sum {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 1.15rem 1.2rem; list-style: none; border-radius: 14px;
}
.dcard__top { display: flex; align-items: center; gap: 0.75rem; }
.dcard__avatar {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%;
  background: #EAD4A0; color: #2B1D14; display: grid; place-items: center;
}
.dcard__avatar svg { width: 38px; height: 38px; }
.dcard__avatar--photo { background: none; overflow: hidden; }
.dcard__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard__name { display: block; font-weight: 700; color: var(--ink-strong); font-size: 1.08rem; line-height: 1.2; }
.dcard__role { display: block; margin-top: 0.2rem; color: var(--ink-link); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.dcard__email { margin: 0; font-size: 0.92rem; }
.dcard__email a { color: var(--ink-link); word-break: break-word; }
.dcard__cta { color: #9B2D20; font-weight: 700; font-size: 0.9rem; }
.dcard__arw { display: inline-block; transition: transform 0.18s ease; }
.dbio[open] .dcard__arw { transform: rotate(90deg); }
.dcard__bio { margin: 0; padding: 0 1.2rem 1.15rem; color: var(--ink-body); font-size: 0.9rem; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) { .dcard__arw { transition: none; } }

/* ---- Team cards: large square photo + name plate beneath (Leadership) --- */
/* Wider inner just for the team grid, so all four fit comfortably in one row. */
.dir__inner--team { max-width: 1180px; }
.tcards {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: 1.75rem 1.4rem;
  grid-template-columns: repeat(4, 1fr);
  text-align: left;
}
@media (max-width: 900px) { .tcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tcards { grid-template-columns: 1fr; } }
.tcard { }
.tcard__sum {
  display: block; cursor: pointer; list-style: none;
  /* Holds the photo + plate together as one card and carries the shadow. */
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 45px -28px rgba(5, 9, 26, 0.55);
}
.tcard__sum::-webkit-details-marker { display: none; }
.tcard__sum:focus-visible { outline: 2px solid #8A2018; outline-offset: 4px; border-radius: 14px; }
.tcard__photo {
  display: block; position: relative; aspect-ratio: 1 / 1;
  /* Square off the bottom: the name plate now butts up underneath it and the
     pair share one rounded outline on .tcard__sum. */
  border-radius: 14px 14px 0 0; overflow: hidden;
  background: #EAD4A0; color: #2B1D14;
}
.tcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard__photo > svg { width: 40%; height: 40%; margin: 30%; }
.tcard__cap {
  /* Sits below the photo, not over it, so nothing covers the face or shirt. */
  display: block; position: relative;
  margin: 0;
  background: #fff;
  border-radius: 0 0 14px 14px; padding: 0.85rem 1rem 0.95rem;
}
.tcard__name { display: block; font-weight: 700; color: var(--ink-strong); font-size: 1.08rem; line-height: 1.2; }
.tcard__role { display: block; color: var(--ink-body); font-style: italic; font-size: 0.92rem; margin-top: 0.1rem; }
.tcard__cta { display: block; text-align: right; color: #9B2D20; font-weight: 700; font-size: 0.85rem; margin-top: 0.45rem; }
.tcard__arw { display: inline-block; transition: transform 0.18s ease; }
.tbio[open] .tcard__arw { transform: rotate(90deg); }
.tcard__bio { margin: 0.85rem 0 0; color: var(--ink-body); font-size: 0.9rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .tcard__arw { transition: none; } }

/* Welcome + stat strip. */
.statband { text-align: center; }
.statband__lead { max-width: 780px; margin: 0 auto 2.2rem; font-size: 1.18rem; line-height: 1.55; color: var(--ink-body); }
.stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.stats li { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.stats__n { font-family: var(--display); font-weight: 700; font-size: clamp(2.1rem,4vw,2.9rem); color: var(--ink-link); line-height: 1; }
.stats__l { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-body); }
@media (max-width: 720px){ .stats { grid-template-columns: repeat(2,1fr); gap: 1.6rem 1rem; } }

/* What we do: six components. */
.whatwedo__head { text-align: center; max-width: 640px; margin: 0 auto; }
.wwd-grid { list-style: none; padding: 0; margin: 2.4rem auto 0; max-width: 1080px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.8rem 2.2rem; }
.wwd { display: flex; gap: 1rem; align-items: flex-start; }
.wwd__ic { flex: 0 0 48px; width: 48px; height: 48px; border: 2px solid; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wwd__ic svg { width: 25px; height: 25px; }
.wwd__t { font-family: var(--display); font-weight: 600; font-size: 1.18rem; color: var(--ink-strong); margin: 0 0 .3rem; }
.wwd__d { color: var(--ink-body); margin: 0; line-height: 1.5; font-size: .98rem; }
@media (max-width: 860px){ .wwd-grid { grid-template-columns: 1fr; max-width: 460px; gap: 1.5rem; } }

/* Family Support (About page). Two columns rather than three: these descriptions
   are full sentences, and at 3-up each one wrapped to five cramped lines. */
.wwd-grid--wide { grid-template-columns: repeat(2, 1fr); max-width: 920px; gap: 1.9rem 2.6rem; }
@media (max-width: 860px){ .wwd-grid--wide { grid-template-columns: 1fr; max-width: 460px; } }

/* Photo in place of the icon disc (the four sacred medicines). Bigger than the
   48px icon ring — at that size a photograph is a smudge — and the coloured ring
   is kept so each medicine still carries its direction's colour from the wheel. */
.wwd__ic--photo {
  flex: 0 0 92px; width: 92px; height: 92px;
  padding: 0; overflow: hidden; border-width: 3px;
}
.wwd__ic--photo picture { display: block; width: 100%; height: 100%; }
.wwd__ic--photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
@media (max-width: 480px) { .wwd__ic--photo { flex-basis: 76px; width: 76px; height: 76px; } }

.fsw-lead { text-align: center; max-width: 760px; margin: clamp(2.2rem, 4vw, 3rem) auto 0; }
.fsw-lead h3 {
  font-family: var(--display); font-weight: 700; color: var(--ink-strong);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.15; margin: 0 0 0.4rem;
}
.fsw-lead p { color: var(--ink-body); margin: 0; font-size: 1.02rem; }

.fsw-close { max-width: 760px; margin: clamp(2.2rem, 4vw, 3rem) auto 0; text-align: center; }
.fsw-close p { color: var(--ink-body); line-height: 1.6; margin: 0; }
.fsw-call {
  /* The one line families most need to read, so it gets to stand on its own. */
  margin-top: 1.1rem !important;
  font-family: var(--display); font-weight: 700;
  color: #7A2E1E !important; font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.3;
}

/* The four sacred medicines: photo banner over a white card, with the same wave
   edge the journey and What-We-Offer cards use, so this page reads as part of the
   same site. The coloured top rule is the medicine's direction on the wheel. */
.medcards {
  list-style: none; padding: 0; max-width: 980px;
  margin: clamp(2.2rem, 4vw, 3rem) auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 2.6vw, 1.9rem);
}
@media (max-width: 760px) { .medcards { grid-template-columns: 1fr; max-width: 520px; } }
.medcard {
  display: flex; flex-direction: column;      /* equal-height cards end on equal padding */
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 22px 44px -26px rgba(50, 30, 70, 0.38);
  border-top: 4px solid var(--c);
}
.medcard__media { position: relative; display: block; line-height: 0; }
.medcard__media picture { display: block; }
.medcard__media img { width: 100%; height: clamp(168px, 17vw, 215px); object-fit: cover; display: block; }
.medcard__wave {
  position: absolute; bottom: -1px; display: block; fill: #fff; height: 34px;
  /* overhang by a pixel each side: at fractional card widths a 100%-wide wave
     leaves a hairline of photo down the card edge */
  left: -1px; width: calc(100% + 2px);
}
.medcard__body { padding: 0.35rem clamp(1.15rem, 2.2vw, 1.5rem) clamp(1.3rem, 2.4vw, 1.6rem); }
.medcard__body h3 {
  font-family: var(--display); font-weight: 700; color: var(--ink-strong);
  font-size: clamp(1.2rem, 2vw, 1.35rem); line-height: 1.2; margin: 0 0 0.45rem;
}
.medcard__body p { color: var(--ink-body); margin: 0; line-height: 1.6; font-size: 0.97rem; }

/* Medicine Wheel (Culture page). The artwork carries a lot of small type, so it
   runs as large as the band allows and links to the full-size file — at phone
   width the innermost labels are only a few pixels tall on screen. */
.medwheel { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 880px; text-align: center; }
.medwheel__zoom { display: block; border-radius: 50%; }
/* <picture> is inline by default, so a width:100% child has nothing to
   measure against and the artwork collapsed to a fraction of its size. */
.medwheel picture { display: block; }
.medwheel__zoom:focus-visible { outline: 3px solid #8A2018; outline-offset: 6px; }
.medwheel__img { width: 100%; height: auto; display: block; }
.medwheel__cap {
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  color: var(--ink-body); font-size: 0.92rem; font-style: italic;
}

/* Hairline between the two topics on the About page. */
.sp-sep {
  display: block; width: 120px; height: 1px;
  margin: clamp(3rem, 6vw, 4.5rem) auto clamp(2.4rem, 4.5vw, 3.4rem);
  background: rgba(43, 29, 20, 0.18);
}

/* A single measured column for long-form copy. Left-aligned inside a centred
   block: the Family Support intro above is short enough to centre, but these
   are full paragraphs and centred prose is hard to track line to line. */
/* Same 760px measure and same top gap as .ghead / .fsw-lead above it, so the
   two halves of this page share one rhythm rather than each having its own. */
.prose-col { max-width: 760px; margin: clamp(2.2rem, 4vw, 3rem) auto 0; text-align: left; }
.prose-col p { color: var(--ink-body); line-height: 1.65; margin: 0 0 1.05rem; }
.prose-col p:last-child { margin-bottom: 0; }
.prose-col h3 {
  font-family: var(--display); font-weight: 700; color: var(--ink-strong);
  /* Matches .fsw-lead h3 — same heading level on the same page. */
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.2;
  margin: clamp(1.9rem, 3.4vw, 2.5rem) 0 0.6rem;
}
.prose-col .ticks { margin: 0 0 1.05rem; }

/* A button that closes a .prose-col section. .hero__actions is left-aligned by
   design (it sits under left-aligned hero copy); these sit under a centred
   reading column and belong on its centre line. */
.prose-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.85rem;
  margin: clamp(1.5rem, 2.8vw, 2.1rem) 0 0;
}

/* Guiding motto. */
.quoteband { text-align: center; }
.bigquote { margin: 0 auto; max-width: 860px; }
.bigquote__mark { display: block; font-family: var(--display); font-weight: 700; font-size: 4.5rem; line-height: .6; color: var(--aurora-dim); }
.bigquote blockquote { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem,2.8vw,2.05rem); line-height: 1.32; color: var(--ink-strong); margin: .2rem 0 0; }

/* Headings on the new feature bands need dark ink (the base classes default to
   light text for dark hero sections). */
.whatwedo .eyebrow { color: var(--ink-link); }
.whatwedo .h-lg    { color: var(--ink-strong); }
.whatwedo .sub     { color: var(--ink-body); }
.statband .eyebrow, .statband .h-lg { color: var(--ink-strong); }

.page-head--center { text-align: center; }
/* Centre the intro paragraph's box too. Without this the .sub keeps its
   left-pinned box (margin-inline: 0) and only its text centres inside a 70ch
   block — which reads as shifted left under the truly-centred heading. */
.page-head--center .sub { margin-left: auto; margin-right: auto; margin-top: 2.6rem; }

/* ==========================================================================
   Indigenous Calendar
   --------------------------------------------------------------------------
   Built on the site's own tokens — Playfair for headings, Karla for body, the
   cream band, the existing .btn styles and the same focus-visible treatment
   used everywhere else. No decorative Indigenous motifs are used as ornament:
   the categories are distinguished by geometric glyphs and words, not by
   borrowed cultural imagery.

   Category colour is ALWAYS paired with a glyph and a written label, so the
   calendar stays readable for anyone who cannot distinguish the hues.
   ========================================================================== */

.cal { margin: clamp(2rem, 4vw, 3rem) 0 0; }

/* ---- category colours (each also has a glyph + label in the markup) ------ */
.cat-statutory-holiday     { --cat: #8A2018; }
.cat-government-recognized { --cat: #7A6A2E; }
.cat-national              { --cat: #9E3B2E; }
.cat-international         { --cat: #2E6E7E; }
.cat-commemorative         { --cat: #5E150F; }
.cat-awareness             { --cat: #B0583B; }
.cat-cultural              { --cat: #3F7D54; }
.cat-historical            { --cat: #6B5A48; }
.cat-month-long            { --cat: #4B2E6B; }
.cat-week-long             { --cat: #4B2E6B; }
.cat-regional              { --cat: #1F5E70; }

/* ---- search + controls bar ---------------------------------------------- */
.cal-bar {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: flex-end; justify-content: space-between;
}
.cal-bar__search { flex: 1 1 260px; min-width: 0; }
.cal-search {
  width: 100%; font: inherit; color: var(--ink-strong);
  padding: 0.7rem 0.9rem; border-radius: 12px;
  border: 1.5px solid rgba(43, 29, 20, 0.22); background: #fff;
  min-height: 44px;                      /* touch target */
}
.cal-search:focus-visible { outline: 3px solid #8A2018; outline-offset: 2px; }
.cal-count { margin: 0.45rem 0 0; font-size: 0.9rem; color: var(--ink-body); }

.cal-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.cal-nav__btn, .cal-nav__today, .cal-view, .cal-filter {
  font: inherit; cursor: pointer; background: #fff;
  border: 1.5px solid rgba(43, 29, 20, 0.22); color: var(--ink-strong);
  border-radius: 999px; min-height: 44px; padding: 0.5rem 1rem;
}
.cal-nav__btn { min-width: 44px; font-size: 1.1rem; line-height: 1; }
.cal-period {
  font-family: var(--display); font-weight: 700; color: var(--ink-strong);
  font-size: clamp(1.1rem, 2vw, 1.35rem); margin: 0; min-width: 9.5ch; text-align: center;
}
.cal-sel-month, .cal-sel-year {
  font: inherit; min-height: 44px; padding: 0.45rem 0.6rem; border-radius: 10px;
  border: 1.5px solid rgba(43, 29, 20, 0.22); background: #fff; color: var(--ink-strong);
}
.cal-views { display: flex; gap: 0.4rem; }
.cal-view.is-on, .cal-filter.is-on {
  background: #5E150F; border-color: #5E150F; color: #F7F3EA; font-weight: 700;
}
.cal-nav__btn:focus-visible, .cal-nav__today:focus-visible, .cal-view:focus-visible,
.cal-filter:focus-visible, .cal-sel-month:focus-visible, .cal-sel-year:focus-visible {
  outline: 3px solid #8A2018; outline-offset: 2px;
}

.cal-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.1rem 0 0; }
.cal-filter { font-size: 0.9rem; padding: 0.4rem 0.85rem; }

/* ---- layout: grid + aside ----------------------------------------------- */
.cal-main { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); margin-top: 1.4rem; }
@media (min-width: 900px) { .cal-main { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); } }

/* ---- month grid ---------------------------------------------------------- */
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.cal-grid th {
  font-family: var(--body); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-body); padding: 0.4rem 0;
}
.cal-grid th abbr { text-decoration: none; border: 0; }
.cal-cell { padding: 0; vertical-align: top; }
.cal-cell--empty { background: transparent; }
.cal-day {
  width: 100%; min-height: 62px; display: flex; flex-direction: column; gap: 0.2rem;
  align-items: flex-start; padding: 0.4rem 0.45rem; cursor: pointer;
  font: inherit; color: var(--ink-strong);
  background: #fff; border: 1.5px solid rgba(43, 29, 20, 0.12); border-radius: 10px;
}
.cal-day:hover { border-color: rgba(43, 29, 20, 0.34); }
.cal-day:focus-visible { outline: 3px solid #8A2018; outline-offset: 2px; }
.cal-day__num { font-weight: 700; font-size: 0.95rem; }
.cal-day.has-events { background: #FFFDF8; }
.cal-day.is-today { border-color: #8A2018; border-width: 2.5px; }
.cal-day.is-today .cal-day__num { color: #8A2018; }
.cal-day.is-selected { background: #5E150F; border-color: #5E150F; color: #F7F3EA; }
.cal-day.is-selected .cal-day__num { color: #F7F3EA; }
.cal-day__marks { display: flex; flex-wrap: wrap; gap: 2px; line-height: 1; }
.cal-mark { color: var(--cat, #5E150F); font-size: 0.8rem; }
.cal-day.is-selected .cal-mark { color: #F7C948; }

/* ---- chips (glyph + words, never colour alone) --------------------------- */
.cal-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0; }
.cal-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; font-weight: 600; line-height: 1.3;
  padding: 0.22rem 0.55rem; border-radius: 999px;
  border: 1.5px solid var(--cat, rgba(43, 29, 20, 0.3)); color: var(--cat, var(--ink-body));
  background: #fff;
}
.cal-chip--scope, .cal-chip--people {
  border-color: rgba(43, 29, 20, 0.28); color: var(--ink-body); font-weight: 500;
}
.cal-chip__g { font-size: 0.95em; }

/* ---- selected-day panel -------------------------------------------------- */
.cal-sel {
  background: #fff; border-radius: 18px; padding: clamp(1rem, 2vw, 1.35rem);
  border-top: 4px solid rgba(43, 29, 20, 0.2);
  box-shadow: 0 20px 40px -28px rgba(50, 30, 70, 0.4);
}
.cal-sel--today { border-top-color: #8A2018; }
.cal-sel__badge {
  margin: 0 0 0.3rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8A2018;
}
.cal-sel__date { font-family: var(--display); font-size: 1.15rem; margin: 0 0 0.8rem; color: var(--ink-strong); }
.cal-sel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.cal-sel__item {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: #FBF8F1; border: 1.5px solid rgba(43, 29, 20, 0.14);
  border-radius: 12px; padding: 0.7rem 0.85rem; min-height: 44px; color: var(--ink-body);
}
.cal-sel__item:hover { border-color: rgba(43, 29, 20, 0.34); }
.cal-sel__item:focus-visible { outline: 3px solid #8A2018; outline-offset: 2px; }
.cal-sel__item-name { display: block; font-weight: 700; color: var(--ink-strong); }
.cal-sel__none { margin: 0; color: var(--ink-body); }
.cal-sel__caveat { margin: 0.6rem 0 0; font-size: 0.87rem; color: var(--ink-body); opacity: 0.85; }

/* ---- upcoming ------------------------------------------------------------ */
.cal-intro { text-align: center; max-width: 760px; margin: 0 auto; }
.cal-up { list-style: none; margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0;
  display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cal-up__item {
  background: #fff; border-radius: 16px; padding: 1.1rem 1.2rem 1.25rem;
  box-shadow: 0 18px 36px -26px rgba(50, 30, 70, 0.4);
  display: flex; flex-direction: column;
}
.cal-up__when {
  margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8A2018;
}
.cal-up__name { font-family: var(--display); font-size: 1.1rem; margin: 0; color: var(--ink-strong); line-height: 1.25; }
.cal-up__desc { margin: 0.6rem 0 0.9rem; font-size: 0.92rem; color: var(--ink-body); line-height: 1.55; }
.cal-up__more, .cal-ag__more {
  margin-top: auto; align-self: flex-start; font: inherit; font-weight: 700;
  color: #9B2D20; background: none; border: 0; cursor: pointer; padding: 0.4rem 0;
  min-height: 44px;
}
.cal-up__more:focus-visible, .cal-ag__more:focus-visible { outline: 3px solid #8A2018; outline-offset: 2px; }

/* ---- year view ----------------------------------------------------------- */
.cal-year { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.cal-ymonth { background: #fff; border-radius: 14px; padding: 0.9rem 1rem 1rem;
  border-top: 3px solid rgba(43, 29, 20, 0.16); }
.cal-ymonth__h { margin: 0 0 0.5rem; }
.cal-ymonth__btn {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink-strong);
  background: none; border: 0; padding: 0.2rem 0; cursor: pointer; min-height: 32px;
}
.cal-ymonth__btn:hover { text-decoration: underline; }
.cal-ymonth__btn:focus-visible { outline: 3px solid #8A2018; outline-offset: 2px; }
.cal-ymonth__none { margin: 0; font-size: 0.85rem; color: var(--ink-body); opacity: 0.75; }
.cal-ymonth__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.cal-mini {
  width: 100%; display: flex; gap: 0.45rem; align-items: baseline; text-align: left;
  font: inherit; font-size: 0.87rem; background: none; border: 0; cursor: pointer;
  padding: 0.35rem 0.2rem; color: var(--ink-body); border-radius: 8px; min-height: 36px;
}
.cal-mini:hover { background: #FBF8F1; }
.cal-mini:focus-visible { outline: 3px solid #8A2018; outline-offset: 2px; }
.cal-mini__g { color: var(--cat, #5E150F); }
.cal-mini__d { font-weight: 700; color: var(--ink-strong); min-width: 2.6ch; }

/* ---- agenda -------------------------------------------------------------- */
.cal-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cal-ag { display: grid; grid-template-columns: 78px 1fr; gap: 1rem;
  background: #fff; border-radius: 16px; padding: 1rem 1.15rem;
  border-left: 4px solid rgba(43, 29, 20, 0.18); }
.cal-ag__when { text-align: center; }
.cal-ag__mon { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: #8A2018; }
.cal-ag__day { display: block; font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--ink-strong); line-height: 1; }
.cal-ag__yr { display: block; font-size: 0.75rem; color: var(--ink-body); }
.cal-ag__name { font-family: var(--display); font-size: 1.1rem; margin: 0; color: var(--ink-strong); line-height: 1.25; }
.cal-ag__desc { margin: 0.55rem 0 0.8rem; font-size: 0.92rem; line-height: 1.55; color: var(--ink-body); }
.cal-ag__body { display: flex; flex-direction: column; }

/* ---- legend + export ----------------------------------------------------- */
.cal-foot { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; justify-content: space-between;
  align-items: flex-start; margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(43, 29, 20, 0.14); padding-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.cal-legend__h { font-family: var(--display); font-size: 1rem; margin: 0 0 0.6rem; color: var(--ink-strong); }
.cal-legend__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.cal-legend__item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-body); }
.cal-legend__g { color: var(--cat, #5E150F); }
.cal-export { white-space: nowrap; }

/* ---- empty state --------------------------------------------------------- */
.cal-empty { text-align: center; background: #fff; border-radius: 16px; padding: clamp(1.6rem, 4vw, 2.6rem); }
.cal-empty__h { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--ink-strong); margin: 0 0 0.4rem; }
.cal-empty__p { margin: 0 0 1rem; color: var(--ink-body); }

/* ---- modal --------------------------------------------------------------- */
body.cal-locked { overflow: hidden; }
.cal-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2rem); }
.cal-modal[hidden] { display: none; }
.cal-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 8, 5, 0.62); }
.cal-modal__dialog {
  position: relative; background: #FFFDF8; border-radius: 20px;
  width: min(680px, 100%); max-height: min(86vh, 900px); overflow-y: auto;
  padding: clamp(1.4rem, 3vw, 2.1rem); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}
.cal-modal__dialog:focus-visible { outline: 3px solid #8A2018; outline-offset: 3px; }
.cal-modal__close {
  position: absolute; top: 0.6rem; right: 0.7rem; width: 44px; height: 44px;
  font-size: 1.6rem; line-height: 1; background: none; border: 0; cursor: pointer;
  color: var(--ink-strong); border-radius: 50%;
}
.cal-modal__close:hover { background: rgba(43, 29, 20, 0.08); }
.cal-modal__close:focus-visible { outline: 3px solid #8A2018; outline-offset: 2px; }
.cal-md__title { font-family: var(--display); font-weight: 700; color: var(--ink-strong);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.2; margin: 0 2.2rem 0.3rem 0; }
.cal-md__date { margin: 0; font-weight: 700; color: #8A2018; }
.cal-md__h { font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--ink-strong); margin: 0 0 0.3rem; }
.cal-md__sec, .cal-md__status { margin-top: 1.15rem; }
.cal-md__sec p, .cal-md__status p { margin: 0; color: var(--ink-body); line-height: 1.6; }
.cal-md__status { background: #F3EDE1; border-radius: 12px; padding: 0.9rem 1rem; }
.cal-md__regions { margin: 0; padding-left: 1.1rem; color: var(--ink-body); line-height: 1.6; }
.cal-md__src { color: var(--ink-link); }
.cal-md__vary { margin-top: 1.15rem; font-size: 0.88rem; font-style: italic; color: var(--ink-body); }
.cal-md__care { margin: 0.9rem 0 0; padding: 0.75rem 0.9rem; border-radius: 10px;
  background: #F6E9E4; color: #5E150F; font-size: 0.9rem; line-height: 1.5; }
.cal-md__source a { color: var(--ink-link); word-break: break-word; }
.cal-md__meta { margin: 0.35rem 0 0 !important; font-size: 0.82rem; opacity: 0.8; }
.cal-md__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem;
  border-top: 1px solid rgba(43, 29, 20, 0.14); padding-top: 1.1rem; }
.cal-act {
  font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  background: #fff; border: 1.5px solid rgba(43, 29, 20, 0.24); color: var(--ink-strong);
  border-radius: 999px; padding: 0.55rem 1rem; min-height: 44px;
  display: inline-flex; align-items: center; text-decoration: none;
}
.cal-act:hover { border-color: #8A2018; color: #8A2018; }
.cal-act:focus-visible { outline: 3px solid #8A2018; outline-offset: 2px; }

/* ---- about --------------------------------------------------------------- */
.cal-about { margin-top: clamp(2.6rem, 5vw, 4rem); text-align: center; }
.cal-about .prose-col { text-align: left; }
.cal-about .prose-col h3 { font-family: var(--display); font-weight: 700; color: var(--ink-strong);
  font-size: clamp(1.15rem, 2vw, 1.35rem); margin: clamp(1.6rem, 3vw, 2.2rem) 0 0.5rem; }

/* ---- mobile: month nav → upcoming → selected → list ---------------------- */
@media (max-width: 899px) {
  .cal-main { grid-template-columns: 1fr; }
  .cal-aside { order: -1; }              /* selected date above the grid */
  .cal-day { min-height: 54px; }
  .cal-ag { grid-template-columns: 62px 1fr; }
}
@media (max-width: 560px) {
  .cal-grid { border-spacing: 3px; }
  .cal-day { min-height: 46px; padding: 0.3rem; }
  .cal-day__num { font-size: 0.85rem; }
  .cal-period { min-width: 100%; order: -1; }
  .cal-foot { flex-direction: column; }
  .cal-export { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-day, .cal-act, .cal-filter, .cal-view { transition: none !important; }
}

/* Single point of contact for the Board — individual board emails are not
   published, so this line has to be easy to find under the cards. */
.boardcontact {
  margin: clamp(1.8rem, 3.5vw, 2.6rem) auto 0; max-width: 660px;
  background: #fff; border-radius: 14px; padding: clamp(1rem, 2vw, 1.3rem);
  text-align: center; border-top: 3px solid #8A2018;
}
.boardcontact p { margin: 0; color: var(--ink-body); line-height: 1.6; }
.boardcontact a { color: var(--ink-link); font-weight: 700; word-break: break-word; }

/* ==========================================================================
   COMMUNITY MEMORIES — the photo archive bookshelf
   --------------------------------------------------------------------------
   The wood is drawn in CSS, not photographed, so it stays sharp at any size
   and costs nothing to download. It is deliberately quiet: the albums' own
   photographs are the content, and a loud grain would compete with them.

   Browns are sampled from the site's existing warm palette (--ink-link
   #8A2018 and --ink-accent #6E4D00 sit either side of them) so the shelf
   belongs to the same family as the rest of the page.
   ========================================================================== */
.memories {
  --wood-face:  #7A5433;
  --wood-lit:   #97693F;
  --wood-dark:  #4A3220;
  --wood-back:  #35231525;
  --wood-edge:  #3A2616;
  --album-pad:  clamp(0.85rem, 2vw, 1.6rem);
  max-width: 1120px;
  margin: clamp(1.8rem, 4vw, 3rem) auto 0;
}

/* --- the unit ------------------------------------------------------------ */
.shelf-unit {
  border-radius: 10px;
  padding: clamp(0.7rem, 1.6vw, 1.1rem);
  background:
    /* the recess behind the albums, darker at the top where less light falls */
    linear-gradient(180deg, rgba(30, 19, 10, 0.34), rgba(30, 19, 10, 0.12) 38%, rgba(30, 19, 10, 0.26)),
    /* grain */
    repeating-linear-gradient(91deg,
      rgba(255, 255, 255, 0.035) 0 2px,
      rgba(0, 0, 0, 0.045) 2px 3px,
      rgba(255, 255, 255, 0) 3px 9px),
    linear-gradient(103deg, var(--wood-dark), var(--wood-face) 34%, var(--wood-lit) 58%, var(--wood-face) 76%, var(--wood-dark));
  border: 1px solid var(--wood-edge);
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 204, 0.16),
    0 30px 60px -34px rgba(38, 24, 12, 0.75);
}

.shelf { position: relative; }
.shelf + .shelf { margin-top: clamp(0.4rem, 1vw, 0.7rem); }

.shelf__row {
  /* auto-fit, not a fixed 3: the row holds however many albums memories.js put
     on this board (3, 2 or 1 by breakpoint), so a shorter final group still
     lays out evenly instead of leaving a hole. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: clamp(0.6rem, 2vw, 1.8rem);
  padding: clamp(1.3rem, 3vw, 2.4rem) var(--album-pad) 0;
}

/* The board the albums stand on: a lit top face and a darker front edge, which
   is what actually reads as depth. */
.shelf__board {
  height: clamp(13px, 1.7vw, 19px);
  border-radius: 2px;
  background:
    linear-gradient(180deg,
      var(--wood-lit) 0 34%,
      var(--wood-face) 34% 62%,
      var(--wood-dark) 62% 100%);
  box-shadow:
    0 -9px 16px -10px rgba(26, 15, 6, 0.85),   /* albums' contact shadow */
    0 5px 10px -6px rgba(26, 15, 6, 0.6);
}

.album-slot { display: flex; justify-content: center; align-items: flex-end; }

/* --- an album ------------------------------------------------------------ */
.album {
  --tilt: 0deg;
  --lift: 0px;
  --thick: 10px;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0 0 calc(var(--lift) * -1);
  background: none;
  cursor: pointer;
  width: 100%;
  max-width: 300px;
  display: block;
  transform: rotate(var(--tilt));
  transform-origin: 50% 100%;
  transition: transform 300ms cubic-bezier(.22,.61,.36,1),
              filter 300ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.album__body {
  position: relative;
  display: block;
  /* The album is a photograph now, so it carries its own spine, stitching and
     page block — the drawn ones have gone. */
}

.album__cover {
  position: relative;
  display: block;
  /* the proportion of the client's album, spine reveal included */
  aspect-ratio: 616 / 466;
  background-color: var(--cloth, #5C4029);   /* floor if the image cannot load */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 2px;
  filter: drop-shadow(5px 9px 9px rgba(20, 11, 4, 0.5));
}

/* The blind-embossed panel on the front cover: where a photograph goes.
   Measured off the supplied file — 22.2% in from the spine edge, 12.7% from the
   fore-edge, 16.5% down from the top, 18.5% up from the bottom. */
.album__window {
  position: absolute;
  left: 22.2%; right: 12.7%; top: 16.5%; bottom: 18.5%;
  overflow: hidden;
  border-radius: 1px;
}

.album__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;   /* overridden per album from the data file */
  display: block;
}
.album__img.is-failed { display: none; }

/* No photograph yet: the panel stays blank leather, which is exactly what an
   unfilled album looks like. Nothing is drawn over it. */

/* The title sits in the panel, on its own band, so it is legible over a
   photograph and over bare leather alike. */
.album__plate {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 0.45rem 0.55rem 0.5rem;
  display: flex; flex-direction: column; gap: 0.1rem;
  background: linear-gradient(180deg, rgba(20, 12, 5, 0), rgba(20, 12, 5, 0.42) 26%, rgba(20, 12, 5, 0.70) 52%, rgba(20, 12, 5, 0.90));
  text-align: center;
}
.album__cover--blank .album__plate {
  /* on bare leather the band would read as a smudge; the foil carries it */
  background: none;
}
.album__title {
  font-family: var(--display);
  font-size: clamp(0.86rem, 1.15vw, 1rem);
  line-height: 1.2;
  color: #F6E3B4;
  text-shadow: 0 1px 0 rgba(40, 22, 6, 0.9), 0 -1px 0 rgba(255, 246, 222, 0.20);
}
.album__year {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: rgba(246, 227, 180, 0.8);
}

/* --- hover / focus: the album comes forward off the shelf ---------------- */
@media (hover: hover) {
  .album:hover {
    transform: rotate(calc(var(--tilt) * 0.35)) translateY(-10px) scale(1.035);
  }
  .album:hover .album__cover {
    filter: drop-shadow(8px 15px 15px rgba(20, 11, 4, 0.55));
  }
}
.album:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
  border-radius: 4px;
  transform: rotate(calc(var(--tilt) * 0.35)) translateY(-10px) scale(1.035);
}
.album:active { transform: rotate(calc(var(--tilt) * 0.35)) translateY(-4px) scale(1.01); }

/* ==========================================================================
   Taking an album off the shelf
   --------------------------------------------------------------------------
   A copy of the album flies from its board to the centre and its cover swings
   open on the spine. Purely decorative: it never takes pointer events, the real
   album view is mounted and usable before the flight ends, and reduced motion
   skips it entirely (see memories.js).
   ========================================================================== */
.mem-fly {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  perspective: 1500px;
  perspective-origin: 0% 50%;   /* the spine, so the swing reads as a hinge */
  /* Anchored top-left, so translate + scale land exactly where they are aimed.
     With the default centre origin the scale also moves the box, and the album
     came home 107px to the side of its own slot. */
  transform-origin: 0 0;
}
.mem-fly__book {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* What the cover reveals: the album's own page, not a hole. */
.mem-fly__inside {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(105deg, #EFE7D6, #F6F1E5 38%, #E9E0CE);
  box-shadow:
    inset 14px 0 22px -14px rgba(74, 54, 30, 0.5),
    0 20px 34px -18px rgba(24, 14, 5, 0.6);
}

.mem-fly__cover {
  position: absolute;
  inset: 0;
  transform-origin: left center;    /* the spine */
  transform-style: preserve-3d;
  will-change: transform;
}
.mem-fly__face {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow: 0 18px 30px -16px rgba(22, 12, 4, 0.7);
}
/* the inside of the front cover, seen once it swings past upright */
.mem-fly__face--in {
  transform: rotateY(180deg);
  background: linear-gradient(105deg, #E9E0CE, #F4EEE1 44%, #E4DAC6);
  box-shadow: inset -14px 0 22px -14px rgba(74, 54, 30, 0.45);
}
/* the cover's photograph panel travels with it */
.mem-fly__face .album__window { position: absolute; }

@media (prefers-reduced-motion: reduce) {
  .mem-fly { display: none; }
}

/* ==========================================================================
   Open album
   ========================================================================== */
.mem-open { max-width: 1000px; margin: 0 auto; }

/* 31px tall as a plain text button, and it is the way out of an open album on
   a phone \u2014 one of the two controls that has to be easy to hit. */
.mem-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  appearance: none; background: none; border: 0; padding: 0.4rem 0;
  font-family: var(--body); font-size: 0.95rem; font-weight: 700;
  color: var(--ink-link); cursor: pointer;
}
.mem-back:hover { color: var(--ink-accent); text-decoration: underline; }
.mem-back:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.mem-back--end { display: inline-flex; margin: clamp(1.4rem, 3vw, 2.2rem) auto 0; }

.mem-open__title {
  font-family: var(--display); font-weight: 700; color: var(--ink-strong);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.05;
  margin: 0.5rem 0 0.2rem; text-align: center;
}
.mem-open__title:focus { outline: none; }
.mem-open__title:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
/* The optional line under an album's title. Set apart from the page, but not
   dressed up as a warning: it is a plain statement of what the album holds. */
.mem-open__note {
  max-width: 54ch;
  margin: 0.9rem auto 0;
  padding: 0.65rem 1rem;
  text-align: center;
  color: var(--ink-body);
  font-size: 0.92rem;
  line-height: 1.55;
  background: rgba(92, 66, 32, 0.07);
  border: 1px solid rgba(92, 66, 32, 0.18);
  border-radius: 8px;
}

.mem-open__year {
  text-align: center; margin: 0 0 0.3rem;
  color: var(--ink-body); letter-spacing: 0.08em; font-size: 0.92rem;
}

/* --- the photograph ------------------------------------------------------ */
/* The line under each shelf pointing at the other one. The archive is split
   across two pages now, so each one has to say where the rest of it is. */
.mem-crosslink {
  max-width: 62ch;
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0;
  text-align: center;
  color: var(--ink-body);
  font-size: 0.95rem;
  line-height: 1.6;
}
/* With an album open the shelf is gone and the pointer would be stranded
   under a photograph, so it goes with it. */
.memories--plate.is-album ~ .mem-crosslink { display: none; }

/* --- the open album: two pages and a leaf that turns --------------------- */
/* The left and right pages are ordinary elements. The turning leaf is a third,
   temporary sheet laid over them and removed as soon as it lands, so with the
   animation switched off the album still works: the pages simply change. */
.mem-book {
  margin-top: clamp(1.1rem, 2.4vw, 1.8rem);
  perspective: 2400px;
  perspective-origin: 50% 44%;
}

/* The cover boards the pages are bound into: the same leather the album wears
   on the shelf, so the object you picked up is the object you are reading. The
   colour underneath is the floor if the texture cannot load. */
.mem-book__boards {
  position: relative;
  padding: clamp(9px, 1.5%, 18px);
  padding-bottom: clamp(12px, 2%, 24px);
  border-radius: 10px;
  background-color: var(--cloth, #5C4029);
  /* `cover`, centred, not `100% 100%`: stretching the album photograph across a
     shape twice as wide smears the grain into horizontal streaks, and pulls the
     embossed panel's edge into view along the top rim. Centred, only the flat
     middle of the leather is sampled. */
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  box-shadow:
    0 1px 0 rgba(255, 246, 226, 0.16) inset,
    0 30px 58px -30px rgba(28, 16, 7, 0.8);
}

.mem-book__spread {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 2 / 1.06;
  transform-style: preserve-3d;
  border-radius: 3px;
  background: #F4ECDC;                    /* the block of pages underneath */
  /* the edges of the sheets below this one */
  box-shadow:
    0 0 0 1px rgba(58, 40, 18, 0.35),
    0 2px 0 rgba(224, 212, 190, 0.9),
    0 4px 0 rgba(202, 188, 162, 0.85),
    0 6px 0 rgba(178, 162, 134, 0.8),
    0 10px 18px -8px rgba(28, 16, 7, 0.55);
}

/* --- one page ------------------------------------------------------------ */
.mem-page {
  position: relative;
  box-sizing: border-box;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 2.2%, 1.5rem) clamp(0.75rem, 2.2%, 1.5rem) 1.7rem;
  background-color: #F4ECDC;              /* album paper */
}
/* The gutter: paper curving down into the binding. Each page darkens on the
   edge nearest the spine, which is the RIGHT edge of the left-hand page. */
.mem-page--left,
.mem-leaf__face--left {
  border-radius: 3px 0 0 3px;
  background-image: linear-gradient(270deg,
    rgba(66, 45, 20, 0.34), rgba(66, 45, 20, 0.12) 5%,
    rgba(66, 45, 20, 0.03) 12%, rgba(66, 45, 20, 0) 22%);
}
.mem-page--right,
.mem-leaf__face--right {
  border-radius: 0 3px 3px 0;
  background-image: linear-gradient(90deg,
    rgba(66, 45, 20, 0.34), rgba(66, 45, 20, 0.12) 5%,
    rgba(66, 45, 20, 0.03) 12%, rgba(66, 45, 20, 0) 22%);
}

.mem-book__spine {
  position: absolute;
  top: 2.5%; bottom: 2.5%; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(52, 35, 16, 0.3);
  pointer-events: none;
  z-index: 3;
}

/* The photograph, mounted on the page the way a print is: a white border, a
   shadow, and the paper showing around it whatever shape the photograph is. */
.mem-page__frame {
  position: relative;
  appearance: none; border: 0; cursor: zoom-in;
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(5px, 1.2%, 11px);
  background: #FDFBF6;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(40, 26, 10, 0.3), 0 12px 22px -14px rgba(40, 26, 10, 0.55);
}
.mem-page__frame:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.mem-page.is-blank .mem-page__frame,
.mem-leaf__face.is-blank .mem-page__frame { visibility: hidden; }

.mem-photo {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.mem-photo.is-failed { display: none; }

.mem-page__cap {
  flex: 0 0 auto;
  margin: 0.6rem auto 0;
  max-width: 46ch;
  text-align: center;
  color: #5A452C;
  font-size: 0.84rem;
  line-height: 1.45;
}
.mem-page__cap[hidden] { display: none; }

.mem-page__no {
  position: absolute;
  bottom: 0.6rem;
  font-family: var(--body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(74, 52, 26, 0.55);
}
.mem-page--left  .mem-page__no,
.mem-leaf__face--left  .mem-page__no { left: clamp(0.8rem, 2.4%, 1.5rem); }
.mem-page--right .mem-page__no,
.mem-leaf__face--right .mem-page__no { right: clamp(0.8rem, 2.4%, 1.5rem); }

/* --- the leaf ------------------------------------------------------------ */
.mem-leaf {
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 6;
}
.mem-leaf--back { left: 0; transform-origin: right center; }
.mem-leaf--single { left: 0; width: 100%; }
.mem-leaf--single.mem-leaf--back { transform-origin: right center; }

.mem-leaf__face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: clamp(0.75rem, 2.2%, 1.5rem) clamp(0.75rem, 2.2%, 1.5rem) 1.7rem;
  background-color: #F4ECDC;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.mem-leaf__face--b { transform: rotateY(180deg); }

/* The light the sheet loses as it turns away and wins back as it lands. Drawn
   inside each face rather than as a filter on the leaf: a filter creates a new
   stacking context, which flattens preserve-3d and stops the two sides hiding
   each other. Opacity is animated from the script, in step with the rotation. */
.mem-leaf__gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(28, 16, 5, 0.55), rgba(28, 16, 5, 0.22) 34%, rgba(28, 16, 5, 0.06) 72%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.10), rgba(255, 248, 232, 0) 42%);
}

/* The shadow the raised leaf throws into the gutter, on the page it has just
   uncovered. Behind the leaf, in front of the pages. */
.mem-cast {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 50%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg,
    rgba(26, 14, 4, 0.72), rgba(26, 14, 4, 0.34) 18%,
    rgba(26, 14, 4, 0.10) 44%, rgba(26, 14, 4, 0) 78%);
}
.mem-cast--back {
  left: 0;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(270deg,
    rgba(26, 14, 4, 0.72), rgba(26, 14, 4, 0.34) 18%,
    rgba(26, 14, 4, 0.10) 44%, rgba(26, 14, 4, 0) 78%);
}
@media (max-width: 700px) {
  .mem-cast, .mem-cast--back { left: 0; width: 100%; }
}

.mem-nav {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.8rem, 3vw, 2rem);
  margin-top: clamp(0.9rem, 2vw, 1.3rem);
}
.mem-nav__btn {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 0.95rem;
  color: var(--ink-link);
  padding: 0.7rem 0.6rem;                /* a real touch target */
  min-height: 44px;
}
.mem-nav__btn:hover { color: var(--ink-accent); }
.mem-nav__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.mem-nav__btn:disabled { color: rgba(92, 66, 32, 0.4); cursor: default; }
.mem-counter { margin: 0; color: var(--ink-body); font-size: 0.88rem; letter-spacing: 0.04em; }

/* --- thumbnails ---------------------------------------------------------- */
.mem-thumbs {
  list-style: none; margin: clamp(1rem, 2.4vw, 1.6rem) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 0.6rem;
}
.mem-thumb {
  appearance: none; padding: 0; border: 2px solid transparent; cursor: pointer;
  display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 7px; background: #E6DECF;
  opacity: 0.78; transition: opacity 200ms ease, border-color 200ms ease;
}
.mem-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mem-thumb img.is-failed { display: none; }
.mem-thumb:hover { opacity: 1; }
.mem-thumb.is-current { opacity: 1; border-color: var(--ink-link); }
.mem-thumb:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* --- an album with nothing in it yet ------------------------------------- */
.mem-empty {
  margin: clamp(1.6rem, 4vw, 2.6rem) auto 0;
  max-width: 560px; text-align: center;
  padding: clamp(2rem, 5vw, 3.2rem) 1.5rem;
  border: 1px dashed rgba(35, 31, 32, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.42);
}
.mem-empty__line {
  margin: 0; font-family: var(--display); font-weight: 700;
  color: var(--ink-strong); font-size: clamp(1.25rem, 2.2vw, 1.6rem);
}
.mem-empty__sub { margin: 0.5rem 0 0; color: var(--ink-body); font-size: 0.95rem; }

/* --- a photograph that would not load ------------------------------------ */
.mem-failed {
  position: absolute; inset: auto 0 0 0;
  margin: 0; padding: 0.6rem;
  text-align: center; font-size: 0.85rem;
  color: rgba(247, 243, 234, 0.82);
  background: rgba(20, 12, 5, 0.55);
}
.mem-full__body, .mem-thumb, .album__cover { position: relative; }
.mem-thumb .mem-failed {
  inset: 0; display: flex; align-items: center; justify-content: center;
  background: #D9CFBC; color: var(--ink-body);
}

.mem-note { text-align: center; color: var(--ink-body); }

/* ==========================================================================
   Full-screen photograph
   ========================================================================== */
body.mem-locked { overflow: hidden; }

.mem-full {
  position: fixed; inset: 0; z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(8, 6, 4, 0.96);
  padding: 0.6rem clamp(0.6rem, 3vw, 2.2rem) 1rem;
}
.mem-full__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 48px;
}
.mem-full__count { margin: 0; color: rgba(247, 243, 234, 0.8); font-size: 0.88rem; letter-spacing: 0.05em; }
.mem-full__close {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--cream); font-size: 2rem; line-height: 1;
  width: 48px; height: 48px; border-radius: 50%;
}
.mem-full__close:hover { background: rgba(247, 243, 234, 0.12); }
.mem-full__close:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.mem-full__body {
  display: flex; align-items: center; justify-content: center;
  min-height: 0;                    /* lets the image shrink inside the grid */
  overflow: hidden;
}
.mem-full__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 1; transition: opacity 240ms ease;
}
.mem-full__img.is-entering { opacity: 0; }
.mem-full__img.is-failed { display: none; }

.mem-full__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  appearance: none; border: 0; cursor: pointer;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(247, 243, 234, 0.1);
  color: var(--cream); font-size: 1.9rem; line-height: 1;
}
.mem-full__arrow:hover { background: rgba(247, 243, 234, 0.2); }
.mem-full__arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.mem-full__arrow--prev { left: clamp(0.4rem, 2vw, 1.6rem); }
.mem-full__arrow--next { right: clamp(0.4rem, 2vw, 1.6rem); }

.mem-full__cap {
  margin: 0.7rem auto 0; max-width: 70ch; text-align: center;
  color: rgba(247, 243, 234, 0.82); font-size: 0.92rem; line-height: 1.5;
}

/* ==========================================================================
   Deliberate layouts — not a scaled-down desktop
   ========================================================================== */

/* Tablet: two to a shelf, so each album stays big enough to read. */
@media (max-width: 900px) {
  .album { max-width: 280px; }
}

/* Narrow: one page at a time. Two pages facing each other at phone width put
   each photograph in about 150px, which is not looking at a photograph. The
   JavaScript watches the same 701px line and paints one page instead of two. */
@media (max-width: 700px) {
  .mem-book__spread { aspect-ratio: 1 / 1.12; }
  .mem-page--left { width: 100%; border-radius: 3px; background-image: none; }
  .mem-page--right { display: none; }
  .mem-book__spine { display: none; }
  .mem-leaf__face--left,
  .mem-leaf__face--right { border-radius: 3px; background-image: none; }
}

/* Phone: one album per shelf, full width, with the title at reading size.
   Two-up at this width made the covers too small to recognise. */
@media (max-width: 560px) {
  .memories { --album-pad: 0.9rem; }
  .shelf__row { padding-top: 1.4rem; }
  .album {
    /* Narrower than the shelf on purpose: an album that runs edge to edge
       hides the boards it is standing on, and the bookshelf stops reading as
       a bookshelf. */
    max-width: min(262px, 82%);
    --tilt: 0deg;                    /* tilting reads as a mistake this small */
    --lift: 0px;
    --thick: 9px;
  }
  .album__title { font-size: 1.02rem; }
  .shelf + .shelf { margin-top: 0.5rem; }
  .shelf__board { height: 15px; }

  .mem-thumbs { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
  .mem-nav { gap: 0.4rem; justify-content: space-between; }
  .mem-full__arrow { width: 46px; height: 46px; }
}

/* ==========================================================================
   Reduced motion — nothing here is needed to understand what is happening
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .album, .album__body, .mem-photo, .mem-full__img { transition: none; }
  .album:hover, .album:focus-visible {
    transform: rotate(var(--tilt));      /* stays put; the shadow still lifts */
  }
  @media (hover: hover) {
    .album:hover .album__cover { filter: drop-shadow(8px 15px 15px rgba(20, 11, 4, 0.55)); }
  }
  .mem-full__img.is-entering { opacity: 1; }
  /* No leaf is ever built when motion is reduced; this is belt and braces. */
  .mem-leaf { display: none; }
}

/* ==========================================================================
   COMMUNITY MEMORIES — the photographed shelf
   --------------------------------------------------------------------------
   The bookcase is a supplied photograph, cut into three slices so any number
   of shelves can be built from it:

       shelf-crown   frame top + the first bay + its board
       shelf-bay     one bay + its board   <- repeats vertically
       shelf-base    the last bay + the plinth

   That is what lets the same picture serve three albums to a shelf on a
   desktop, two on a tablet and one on a phone. A single fixed image of a
   whole bookcase could not.

   The CSS-drawn shelf above is left underneath as the base layer, so a failed
   or slow image degrades to wood rather than to nothing.
   ========================================================================== */
.memories--plate .shelf-unit {
  /* slice heights as a share of the image width, so they scale with it */
  /* crown = the frame top only. The LAST shelf is painted by shelf-base, which
     is the same height as a tile and sits over the final repeat — that is how
     the plinth lands under the bottom bay without adding a bay of its own. */
  --crown-h:  6.03%;
  --plinth-h: 2.95%;   /* the base slice is one bay PLUS the plinth */
  padding: var(--crown-h) 0 var(--plinth-h);
  border: 0;
  border-radius: 6px;
  /* Plain URLs first. Browsers that do not understand image-set() with type()
     — Safari before 17 — drop that declaration entirely, and the gradient
     fallback lives inside it, so without this line those visitors would get no
     bookcase at all. Modern browsers simply use the line below. */
  background-image:
    url("../img/memories/shelf-crown.jpg"),
    url("../img/memories/shelf-base.jpg"),
    url("../img/memories/shelf-bay.jpg"),
    linear-gradient(103deg, #4A3220, #7A5433 34%, #97693F 58%, #7A5433 76%, #4A3220);
  background-image:
    image-set(url("../img/memories/shelf-crown.webp") type("image/webp"),
              url("../img/memories/shelf-crown.jpg")  type("image/jpeg")),
    image-set(url("../img/memories/shelf-base.webp")  type("image/webp"),
              url("../img/memories/shelf-base.jpg")   type("image/jpeg")),
    image-set(url("../img/memories/shelf-bay.webp")   type("image/webp"),
              url("../img/memories/shelf-bay.jpg")    type("image/jpeg")),
    /* the drawn shelf stays as the bottom layer — see note above */
    linear-gradient(103deg, #4A3220, #7A5433 34%, #97693F 58%, #7A5433 76%, #4A3220);
  background-position: top center, bottom center, top center, center;
  background-repeat: no-repeat, no-repeat, repeat-y, no-repeat;
  background-size: 100% auto, 100% auto, 100% auto, auto;
  /* The repeating bay is anchored to the PADDING box, so its first tile starts
     exactly where the first shelf starts. Left at the default border box and
     centred, the repeat fell out of phase with the shelves and one bay showed
     the wrong slice of the photograph and the boards sat a crown's height
     above where the albums stand. content-box, not padding-box: the padding
     box INCLUDES the padding, so with a zero border it is the border box. */
  background-origin: border-box, border-box, content-box, border-box;
  /* Two shadows, both agreeing with the light from the upper left: a soft
     ambient one and a tighter contact shadow offset to the right. */
  box-shadow:
    0 44px 74px -40px rgba(30, 18, 8, 0.82),
    14px 18px 34px -26px rgba(30, 18, 8, 0.55);
}

/* The ground the bookcase sits on: a warm paper mat, lit from the same upper
   left as everything else, with the shadow the piece casts onto it. Deliberately
   NOT a photographed room — drawn, so it costs nothing to download, it reflows
   with the layout, and it cannot affect the contrast of any text.

   The contact shadow is the part doing the work. Without it the bookcase floats
   on the page; with it, it rests on something. */
.memories--plate {
  position: relative;
  isolation: isolate;
}
.memories--plate::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -16%; right: -16%; top: -14%; bottom: -18%;
  /* Built ONLY from gradients that end in transparent, so the ground has no
     edge of its own — it fades into the section's cream instead of sitting on
     it as a panel. The earlier version filled a rectangle and feathered it with
     a mask; the mask's radius still reached past the box, so the rectangle was
     visible at the sides. Nothing here ever reaches the element's edge.

     The paper tooth went with it: 1px stripes cannot fade, so they redrew the
     rectangle the moment the fill stopped. */
  background:
    radial-gradient(58% 50% at 32% 16%, rgba(244, 230, 205, 0.58), rgba(244, 230, 205, 0) 72%),
    radial-gradient(66% 58% at 50% 48%, rgba(219, 206, 183, 0.60), rgba(219, 206, 183, 0) 76%);
  pointer-events: none;
}

.memories--plate::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 1%; right: 1%; bottom: -2.2%;
  height: 5%;
  background: radial-gradient(56% 100% at 50% 0%, rgba(54, 33, 14, 0.40), rgba(54, 33, 14, 0) 74%);
  filter: blur(9px);
  pointer-events: none;
}
/* The mat belongs to the bookcase, not to the photographs. With an album open
   the gallery sits on the page's own cream, so nothing competes with the
   photograph. */
.memories--plate.is-album::before,
.memories--plate.is-album::after { display: none; }

/* One shelf = one tile. aspect-ratio ties its height to the image's. */
.memories--plate .shelf {
  aspect-ratio: 2240 / 485;
  position: relative;
}
.memories--plate .shelf + .shelf { margin-top: 0; }

/* The photograph already draws the board. What is left for this element is the
   contact shadow under the albums, which the photograph cannot know about. */
.memories--plate .shelf__board {
  position: absolute;
  left: 0; right: 0;
  bottom: 16.5%;                 /* the board's back edge inside the tile */
  height: 10px;
  background: none;
  border-radius: 0;
  box-shadow: 0 -9px 13px -8px rgba(22, 12, 4, 0.75);
}

/* Albums stand on the board's back edge: the top 83.5% of the tile is the bay. */
.memories--plate .shelf__row {
  position: absolute;
  left: 1.74%; right: 1.96%;     /* the cavity, inside the uprights */
  top: 0;
  height: 83.5%;
  padding: 0;
  gap: 0;
  align-items: stretch;          /* the SLOT fills the bay... */
}
.memories--plate .album-slot {
  height: 100%;
  display: flex;
  align-items: flex-end;         /* ...and the album stands at the bottom of it */
  justify-content: center;
}

/* Height-driven here, not width-driven: the bay's clear height is the limit and
   the 4:3 cover resolves its own width from it. inline-block so the button
   shrinks to the cover rather than filling the slot. */
.memories--plate .album {
  /* A shorter lift than the drawn shelf uses. The photographed bays have a
     fixed clear height, and the old 10px lift left the album 2px off the board
     above. */
  --lift-plate: 5px;
  display: inline-block;
  /* inline-block sits on the text baseline, which leaves a descender gap under
     it and floats the album a few pixels above the board. */
  vertical-align: bottom;
  height: 91%;
  width: auto;
  max-width: none;
  margin-bottom: 0;
  --lift: 0px;
}
.memories--plate .album__body { display: block; height: 100%; width: auto; }
.memories--plate .album__cover { display: block; height: 100%; width: auto; }
.memories--plate .album__body { filter: none; }

/* --------------------------------------------------------------------------
   Phone: one album to a shelf. The wide bookcase's bay is 21.65% of its width,
   which on a 350px screen is a 76px-tall shelf — far too short for an album.
   So the phone gets a NARROW cut of the same photograph: both uprights kept,
   most of the cavity taken out. Same bay height over a third of the width, so
   the bay is proportionally three times taller and the album can breathe.
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .memories--plate .album:hover {
    transform: rotate(calc(var(--tilt) * 0.35)) translateY(calc(var(--lift-plate) * -1)) scale(1.02);
  }
}
.memories--plate .album:focus-visible {
  transform: rotate(calc(var(--tilt) * 0.35)) translateY(calc(var(--lift-plate) * -1)) scale(1.02);
}

/* The bookcase photograph is sliced into a crown, a repeating bay and a base,
   each scaled to the container's width. The bay's own proportions therefore fix
   the shelf's height once its width is known — that is what keeps the drawn
   boards under the albums standing on them.

   So the wide plate cannot simply be used in a narrow column. At a 561px
   viewport it came out 121px tall and the albums shrank to 114px, a third of
   their size at 540px, and stayed small all the way to 900px: tiny albums
   marooned on a wide empty shelf across every tablet and split-screen window.
   The narrow plate now runs to 900px, and the bookcase is held at the width it
   was drawn for rather than being stretched thin. */
@media (max-width: 900px) {
  .memories--plate .shelf-unit {
    --crown-h:  20.45%;
    --plinth-h: 10.00%;
    background-image:
      image-set(url("../img/memories/shelf-n-crown.webp") type("image/webp"),
                url("../img/memories/shelf-n-crown.jpg")  type("image/jpeg")),
      image-set(url("../img/memories/shelf-n-base.webp")  type("image/webp"),
                url("../img/memories/shelf-n-base.jpg")   type("image/jpeg")),
      image-set(url("../img/memories/shelf-n-bay.webp")   type("image/webp"),
                url("../img/memories/shelf-n-bay.jpg")    type("image/jpeg")),
      linear-gradient(103deg, #4A3220, #7A5433 34%, #97693F 58%, #7A5433 76%, #4A3220);
  }
  .memories--plate .shelf { aspect-ratio: 660 / 485; }
  .memories--plate .shelf__row { left: 5.91%; right: 6.67%; }
  .memories--plate .album { height: 84%; }
  /* Hold the bookcase at the size the narrow plate was drawn for. Past this it
     would grow with the viewport until one album filled the screen. */
  .memories { max-width: 560px; }
}

/* The plate's own hover rule is more specific than the global reduced-motion
   override further up, so it has to be answered here or the album still moves
   for people who asked it not to. */
@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) {
    .memories--plate .album:hover { transform: rotate(var(--tilt)); }
  }
  .memories--plate .album:focus-visible { transform: rotate(var(--tilt)); }
}