/* =====================================================================
   Marked For Life Ministries  |  "The front wall"  |  site.css
   ---------------------------------------------------------------------
   One token file drives everything. Cascade order is fixed with @layer.
   Naming: BEM-ish, block__element, block--modifier. Mobile first; layout
   changes at 720px and 1024px only. Motion: transform + opacity only.
   ===================================================================== */
@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------- 1. RESET */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100dvh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, video, svg { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  h1, h2, h3, h4 { overflow-wrap: anywhere; }
  p, li, dd, dt, figcaption { overflow-wrap: anywhere; }
  a { color: inherit; }
  dialog { border: 0; padding: 0; max-width: none; max-height: none; }
  :focus:not(:focus-visible) { outline: none; }
}

/* --------------------------------------------------------- 2. TOKENS */
@layer tokens {
  :root {
    /* Color, taken from the building and the shirt. Six values. */
    --navy:     oklch(27% 0.055 268);   /* #1B2740  the wall            */
    --navy-2:   oklch(33% 0.06 268);    /* #263657  menu ground, cards  */
    --royal:    oklch(52% 0.2 265);     /* #2B5FD9  the shirt           */
    --red:      oklch(55% 0.21 22);     /* #D12A3C  Hope Line only      */
    --kraft:    oklch(79% 0.07 80);     /* #D9B98A  the cardboard       */
    --white:    #ffffff;
    --chalk:    oklch(96% 0.006 260);   /* #F1F3F6  alt light surface   */

    --ink:          var(--navy);
    --ink-muted:    oklch(45% 0.035 268);   /* #4F5A73 */
    --on-navy:      var(--white);
    --on-navy-muted: oklch(84% 0.025 268);  /* #C4CCDE */
    --line:         color-mix(in oklch, var(--navy) 14%, transparent);
    --line-on-navy: color-mix(in oklch, var(--white) 18%, transparent);

    /* Type. Two families, extreme contrast. Both SIL OFL, self-hosted. */
    --font-display: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
    --font-body: "Atkinson Hyperlegible Next", "Atkinson Fallback", system-ui, sans-serif;

    --step--1: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
    --step-0:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
    --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
    --step-3:  clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
    --step-4:  clamp(2.4rem, 1.8rem + 3vw, 4rem);
    --step-5:  clamp(2.9rem, 2rem + 4.8vw, 6.2rem);

    /* Space */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
    --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
    --section: clamp(3.5rem, 3rem + 4vw, 7rem);
    --gutter: clamp(1rem, 0.5rem + 3vw, 3rem);
    --measure: 68ch;
    --wide: 1360px;

    /* Edges. Zero radius everywhere. The badge is the one exception. */
    --r-badge: 6px;

    /* Motion. Three curves. Never the default ease. */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --t-micro: 120ms; --t-std: 260ms; --t-large: 520ms;

    --header-h: 64px;
    --callbar-h: 60px;
  }
}

/* ----------------------------------------------------------- 3. BASE */
@layer base {
  @font-face {
    font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url(../fonts/bricolage-opsz.woff2) format("woff2-variations");
  }
  @font-face {
    font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url(../fonts/atkinson-wght.woff2) format("woff2-variations");
  }
  @font-face {
    font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 200 800; font-display: swap;
    src: url(../fonts/atkinson-wght-italic.woff2) format("woff2-variations");
  }
  /* Metric-matched fallback so the swap does not reflow. */
  @font-face {
    font-family: "Atkinson Fallback"; src: local("Arial"), local("Helvetica");
    size-adjust: 98%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
  }

  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: var(--font-body); font-size: var(--step-0); color: var(--ink);
    background: var(--white); text-rendering: optimizeLegibility;
  }
  body.has-callbar { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom)); }
  @media (min-width: 1024px) { body.has-callbar { padding-bottom: 0; } }

  h1, h2, h3, .display {
    font-family: var(--font-display); font-weight: 800; line-height: 0.98;
    letter-spacing: -0.03em; text-wrap: balance; font-variation-settings: "opsz" 96;
  }
  h1 { font-size: var(--step-5); }
  .hero--split h1 { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); }
  .hero--split h1.h1--phone { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
  h4 { font-size: var(--step-1); font-weight: 700; line-height: 1.2; }
  p  { text-wrap: pretty; max-width: var(--measure); }
  .lede { font-size: var(--step-1); line-height: 1.4; color: var(--ink-muted); max-width: 42ch; }
  [data-theme="navy"] .lede, .on-navy .lede { color: var(--on-navy-muted); }
  strong, b { font-weight: 700; }
  small { font-size: var(--step--1); }
  address { font-style: normal; }
  hr { border: 0; border-top: 1px solid var(--line); }

  a:not([class]) { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; transition: color var(--t-micro) var(--ease-out); }
  a:not([class]):hover { color: var(--royal); }

  :focus-visible {
    outline: 3px solid var(--royal); outline-offset: 3px;
    animation: focus-in var(--t-micro) var(--ease-out);
  }
  [data-theme="navy"] :focus-visible, .on-navy :focus-visible { outline-color: var(--kraft); }
  @keyframes focus-in { from { outline-offset: 0; } to { outline-offset: 3px; } }

  ::selection { background: var(--kraft); color: var(--navy); }

  /* Cross-document view transitions: enhancement only. */
  @view-transition { navigation: auto; }
  .header { view-transition-name: site-header; }
  @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
}

/* --------------------------------------------------------- 4. LAYOUT */
@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
  .wrap--narrow { width: min(100% - 2 * var(--gutter), 78ch); margin-inline: auto; }
  .section { padding-block: var(--section); }
  .section--tight { padding-block: calc(var(--section) * 0.6); }
  [data-theme="navy"], .on-navy { background: var(--navy); color: var(--on-navy); }
  [data-theme="navy"], .on-navy, .hero--split, .hero--photo, .footer, .menu { --ink-muted: var(--on-navy-muted); --line: var(--line-on-navy); }
  [data-theme="chalk"] { background: var(--chalk); }
  [data-theme="royal"] { background: var(--royal); color: var(--white); }

  /* The ground: corrugated metal, the building. 6% white lines on navy. */
  .corrugated { position: relative; isolation: isolate; }
  .corrugated::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 34px, color-mix(in oklch, var(--white) 4.5%, transparent) 34px 36px);
  }

  /* Program page: sticky facts rail beside the narrative. */
  .rail-layout { display: grid; gap: var(--s-7); }
  @media (min-width: 1024px) {
    .rail-layout { grid-template-columns: minmax(280px, 3fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
    .rail { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  }
  .flow > * + * { margin-top: var(--s-5); }
  .flow > h2 + *, .flow > h3 + * { margin-top: var(--s-4); }
  .flow > * + h2 { margin-top: var(--s-8); }
  .rail-layout .flow h2 { font-size: var(--step-3); }
  .flow > * + h3 { margin-top: var(--s-7); }

  /* Full-bleed breakout inside a column */
  .breakout { width: 100vw; margin-inline: calc(50% - 50vw); }
  @media (min-width: 1024px) { .rail-layout .breakout { width: auto; margin-inline: 0; } }

  .grid-2 { display: grid; gap: var(--s-6); }
  @media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; align-items: start; } }
  .split { display: grid; gap: var(--s-6); }
  @media (min-width: 1024px) { .split { grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .split--rev > :first-child { order: 2; } }

  .rule { border-top: 1px solid var(--line); }
  .on-navy .rule, [data-theme="navy"] .rule { border-color: var(--line-on-navy); }
}

/* ----------------------------------------------------- 5. COMPONENTS */
@layer components {

  /* ---- Skip link */
  .skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--royal); color: var(--white); padding: var(--s-3) var(--s-4); font-weight: 700; text-decoration: none; }
  .skip:focus { top: var(--s-4); }

  /* ---- Buttons. Square. Compress on press. */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
    min-height: 48px; padding: 0.7em 1.25em; font-weight: 700; font-size: var(--step-0);
    line-height: 1.1; text-decoration: none; background: var(--royal); color: var(--white);
    border: 2px solid var(--royal); transition: transform var(--t-micro) var(--ease-out), background-color var(--t-micro) var(--ease-out), color var(--t-micro) var(--ease-out), border-color var(--t-micro) var(--ease-out);
    cursor: pointer; text-align: center;
  }
  .btn:hover { background: color-mix(in oklch, var(--royal) 86%, var(--navy)); border-color: color-mix(in oklch, var(--royal) 86%, var(--navy)); }
  .btn:active { transform: scale(0.97); }
  .btn svg { width: 1.15em; height: 1.15em; flex: none; }
  .btn--red { background: var(--red); border-color: var(--red); }
  .btn--red:hover { background: color-mix(in oklch, var(--red) 88%, var(--navy)); border-color: color-mix(in oklch, var(--red) 88%, var(--navy)); }
  .btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
  .btn--ghost:hover { background: var(--navy); color: var(--white); }
  .on-navy .btn--ghost, [data-theme="navy"] .btn--ghost { color: var(--white); border-color: var(--white); }
  .on-navy .btn--ghost:hover, [data-theme="navy"] .btn--ghost:hover { background: var(--white); color: var(--navy); }
  .btn--kraft { background: var(--kraft); border-color: var(--kraft); color: var(--navy); }
  .btn--kraft:hover { background: color-mix(in oklch, var(--kraft) 85%, var(--white)); border-color: color-mix(in oklch, var(--kraft) 85%, var(--white)); }
  .btn--lg { font-size: var(--step-1); padding: 0.8em 1.5em; min-height: 56px; }
  .btn--block { width: 100%; }
  .btn[aria-disabled="true"], .btn:disabled { opacity: 0.6; cursor: progress; }
  .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

  /* ---- Text link with a drawn underline (no arrows) */
  .link { font-weight: 700; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--t-std) var(--ease-out), color var(--t-micro); padding-bottom: 2px; }
  .link:hover { background-size: 0 2px; background-position: 100% 100%; color: var(--royal); }
  .on-navy .link:hover, [data-theme="navy"] .link:hover { color: var(--kraft); }

  /* ---- Header: the navy bar */
  .header { position: sticky; top: 0; z-index: 50; background: var(--navy); color: var(--white); border-bottom: 1px solid var(--line-on-navy); }
  .header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--header-h); }
  .brand { display: inline-flex; align-items: center; text-decoration: none; }
  .brand__logo { height: 44px; width: auto; }
  @media (min-width: 1100px) { .brand__logo { height: 48px; } }
  .nav { display: none; }
  .header__actions { display: flex; align-items: center; gap: var(--s-2); }
  .hopeline-pill { display: none; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.4rem 0.9rem; background: var(--red); color: var(--white); font-weight: 700; text-decoration: none; line-height: 1; transition: transform var(--t-micro) var(--ease-out); }
  .hopeline-pill:active { transform: scale(0.97); }
  .hopeline-pill svg { width: 18px; height: 18px; }
  .hopeline-pill small { display: block; font-size: 0.65rem; letter-spacing: 0.12em; opacity: 0.9; margin-top: 3px; }
  .header .btn { min-height: 44px; padding: 0.5em 1em; }
  .menu-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); }
  .menu-btn svg { width: 26px; height: 26px; }
  @media (min-width: 520px) { .hopeline-pill { display: inline-flex; } }
  @media (min-width: 1100px) {
    .nav { display: block; }
    .nav > ul { display: flex; gap: var(--s-2); list-style: none; padding: 0; }
    .nav__btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.4rem 0.8rem; font-weight: 700; color: var(--white); position: relative; }
    .nav__btn::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.4rem; height: 2px; background: var(--kraft); transform: scaleX(0); transform-origin: left; transition: transform var(--t-std) var(--ease-out); }
    .nav__btn:hover::after, .nav__btn[aria-expanded="true"]::after { transform: scaleX(1); }
    .nav__btn svg { width: 14px; height: 14px; transition: transform var(--t-std) var(--ease-spring); }
    .nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
    .menu-btn { display: none; }
  }
  /* Desktop dropdown: a full-width panel under the header. No positioning JS. */
  .sub { position: fixed; top: var(--header-h); left: 0; right: 0; width: 100%; max-width: none; margin: 0; inset-inline: 0; background: var(--white); color: var(--navy); border: 0; border-top: 3px solid var(--kraft); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -30px color-mix(in oklch, var(--navy) 60%, transparent); padding: var(--s-6) 0; z-index: 60; }
  .sub[popover]:not(:popover-open) { display: none; }
  .sub[popover] { transform-origin: top; }
  @media (prefers-reduced-motion: no-preference) { .sub[popover]:popover-open { animation: sub-in var(--t-std) var(--ease-out); } }
  @keyframes sub-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .sub__inner { display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr); gap: var(--s-7); align-items: start; }
  .sub__intro h2 { font-size: var(--step-2); }
  .sub__intro p { color: var(--ink-muted); margin-top: var(--s-2); font-size: var(--step--1); }
  .sub__intro .btn { margin-top: var(--s-4); display: inline-flex; grid-template-columns: none; padding: 0.7em 1.25em; border: 2px solid var(--navy); }
  .sub .sub__intro .btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
  .sub ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2) var(--s-4); }
  .sub ul.sub__list--2 { grid-template-columns: repeat(2, 1fr); }
  .sub a { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-3); align-items: center; padding: 0.5rem; text-decoration: none; border-left: 3px solid transparent; transition: border-color var(--t-micro), background-color var(--t-micro); }
  .sub a .pic { aspect-ratio: 1; }
  .sub a.no-pic { grid-template-columns: 1fr; padding: 0.7rem 0.85rem; }
  .sub a:hover { border-left-color: var(--royal); background: var(--chalk); }
  .sub a b { display: block; font-weight: 700; }
  .sub a span { display: block; font-size: var(--step--1); color: var(--ink-muted); }

  /* ---- The full-screen mobile menu: native dialog, opaque navy-2 */
  .menu { position: fixed; inset: 0; width: 100%; height: 100dvh; background: var(--navy-2); color: var(--white); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: max(24px, env(safe-area-inset-top) + 16px) var(--gutter) max(24px, env(safe-area-inset-bottom) + 16px); }
  .menu::backdrop { background: var(--navy-2); }
  @media (prefers-reduced-motion: no-preference) {
    .menu[open] { animation: menu-in 200ms var(--ease-out); }
  }
  @keyframes menu-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
  .menu__close { width: 48px; height: 48px; display: grid; place-items: center; color: var(--white); border: 1px solid var(--line-on-navy); }
  .menu__close svg { width: 24px; height: 24px; }
  .menu__group { border-top: 1px solid var(--line-on-navy); padding-top: var(--s-4); margin-top: var(--s-4); }
  .menu__group h2 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kraft); margin-bottom: var(--s-2); }
  .menu__links { list-style: none; padding: 0; }
  .menu__links a { display: block; min-height: 56px; padding: 0.5rem 0 0.5rem 0.6rem; margin-bottom: 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.1; text-decoration: none; color: var(--white); border-left: 3px solid transparent; transition: border-color var(--t-micro); }
  .menu__links a:hover, .menu__links a:focus-visible { border-left-color: var(--kraft); }
  .menu__links a small { display: block; margin-top: 0.15rem; font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--on-navy-muted); line-height: 1.3; }
  .menu__cta { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
  .menu__practical { margin-top: var(--s-6); border-top: 1px solid var(--line-on-navy); padding-top: var(--s-4); font-size: var(--step--1); color: var(--on-navy-muted); display: grid; gap: var(--s-2); }
  .menu__practical a { color: var(--white); }

  /* ---- Sticky call bar, mobile only, after the hero */
  .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto; background: var(--red); color: var(--white); padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: transform var(--t-std) var(--ease-out); }
  .callbar.is-visible { transform: none; }
  .callbar a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--callbar-h); font-weight: 700; text-decoration: none; color: inherit; padding-inline: 1rem; }
  .callbar a + a { border-left: 1px solid color-mix(in oklch, var(--white) 30%, transparent); }
  .callbar svg { width: 20px; height: 20px; }
  @media (min-width: 1024px) { .callbar { display: none; } }
  @media (prefers-reduced-motion: reduce) { .callbar { transition: none; } }

  /* ---- Pictures */
  .pic { position: relative; overflow: hidden; background: var(--navy-2); }
  .pic picture { height: 100%; }
  .pic img { width: 100%; height: 100%; object-fit: cover; color: var(--on-navy-muted); font-size: var(--step--1); padding: var(--s-3); }
  .pic--4x5 { aspect-ratio: 4 / 5; }
  .pic--3x4 { aspect-ratio: 3 / 4; }
  .pic--1x1 { aspect-ratio: 1; }
  .pic--3x2 { aspect-ratio: 3 / 2; }
  .pic--16x9 { aspect-ratio: 16 / 9; }
  .pic--21x9 { aspect-ratio: 21 / 9; }
  .pic--wide { aspect-ratio: 4 / 5; }
  @media (min-width: 720px) { .pic--wide { aspect-ratio: 16 / 9; } }
  @media (min-width: 1024px) { .pic--wide { aspect-ratio: 21 / 9; } }
  figure.pic { margin: 0; }
  /* hover reveal: the image scales, the frame stays put */
  a .pic img, .pic--zoom img { transition: transform var(--t-large) var(--ease-soft); }
  a:hover .pic img, .pic--zoom:hover img { transform: scale(1.04); }

  /* The name badge: the one rounded thing on the site. */
  .badge { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 2; display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.2rem 0.55rem; background: var(--white); color: var(--navy); border-radius: var(--r-badge); padding: 0.45rem 0.8rem 0.5rem 0.6rem; box-shadow: 0 2px 0 color-mix(in oklch, var(--navy) 25%, transparent); max-width: calc(100% - 2 * var(--s-4)); }
  .badge svg { width: 22px; height: 22px; grid-row: span 2; color: var(--navy); }
  .badge svg .heart { color: var(--red); }
  .badge small { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); line-height: 1; }
  .badge b { font-size: var(--step--1); font-weight: 700; line-height: 1.15; }
  .badge--static { position: static; margin-top: var(--s-3); box-shadow: none; border: 1px solid var(--line); }

  /* ---- Home hero. Phone: a photo band, then words, then the give module.
     Desktop: the photo becomes the ground behind both, under a navy overlay heavy on the left
     (where the words are) and lighter on the right. The photo is a crowd, so nothing in it
     needs protecting from the layout. */
  .hero--home { background: var(--navy); color: var(--white); position: relative; isolation: isolate; padding: 0 0 var(--s-7); }
  .hero__bg .pic { aspect-ratio: 16 / 9; }
  .hero--home .hero__body { display: grid; gap: var(--s-6); padding-top: var(--s-6); }
  .hero--home .hero__body h1 { font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.6rem); }
  .hero--home .hero__body .lede { max-width: 38ch; }
  .hero--home .give { margin-top: 0; }
  @media (min-width: 1024px) {
    .hero--home { padding: clamp(3rem, 7vw, 6rem) 0; min-height: min(88dvh, 900px); display: grid; align-items: center; }
    .hero__bg { position: absolute; inset: 0; z-index: -1; }
    .hero__bg .pic { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
    .hero__bg .pic picture { position: absolute; inset: 0; }
    .hero__bg::after { content: ""; position: absolute; inset: 0; background:
      linear-gradient(90deg, color-mix(in oklch, var(--navy) 94%, transparent) 0%, color-mix(in oklch, var(--navy) 82%, transparent) 42%, color-mix(in oklch, var(--navy) 58%, transparent) 70%, color-mix(in oklch, var(--navy) 40%, transparent) 100%),
      linear-gradient(to top, color-mix(in oklch, var(--navy) 70%, transparent), transparent 35%); }
    .hero--home .hero__body { grid-template-columns: minmax(0, 7fr) minmax(380px, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding-top: 0; }
    .hero--home .give { box-shadow: 0 40px 80px -40px color-mix(in oklch, var(--navy) 100%, transparent); padding: var(--s-5); }
  }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.arrived) .hero__bg img { animation: settle 1600ms var(--ease-soft) both; }
  }
  .hero__lines { display: block; }
  .hero__lines span { display: block; }

  /* ---- Hero variants */
  .hero { position: relative; isolation: isolate; }
  /* Split hero: text on navy, photo beside */
  .hero--split { background: var(--navy); color: var(--white); display: grid; }
  .hero--split .hero__body { padding: var(--s-7) 0 var(--s-6); }
  .hero--split .hero__pic { aspect-ratio: 4 / 3; }
  @media (min-width: 1024px) {
    .hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: clamp(560px, 82dvh, 800px); }
    .hero--split .hero__body { padding: var(--s-8) clamp(2rem, 5vw, 5rem) var(--s-8) 0; display: flex; flex-direction: column; justify-content: center; }
    .hero--split .hero__pic { aspect-ratio: auto; height: 100%; }
    .hero--split .hero__pic picture { position: absolute; inset: 0; }
    .hero--split .wrap { width: 100%; padding-left: max(var(--gutter), calc((100vw - var(--wide)) / 2)); }
  }
  /* Photo hero: full-bleed image with the headline set at the bottom on navy */
  .hero--photo { background: var(--navy); color: var(--white); }
  .hero--photo .hero__pic { aspect-ratio: 4 / 5; }
  @media (min-width: 720px) { .hero--photo .hero__pic { aspect-ratio: 16 / 9; } }
  @media (min-width: 1024px) { .hero--photo .hero__pic { aspect-ratio: 21 / 9; max-height: 640px; } }
  .hero--photo .hero__body { padding: var(--s-6) 0 var(--s-7); }
  @media (min-width: 1024px) {
    .hero--photo { display: grid; }
    .hero--photo > * { grid-area: 1 / 1; }
    .hero--photo .hero__pic { max-height: none; aspect-ratio: auto; height: clamp(480px, 40vw, 820px); }
    .hero--photo .hero__pic picture { position: absolute; inset: 0; }
    .hero--photo .hero__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklch, var(--navy) 92%, transparent) 0%, color-mix(in oklch, var(--navy) 55%, transparent) 40%, transparent 75%); }
    .hero--photo .hero__body { align-self: end; z-index: 1; padding-bottom: var(--s-8); }
  }
  /* Type hero: no image, big words on white or chalk */
  .hero--type { padding: var(--s-8) 0 var(--s-7); }
  .hero__body .lede { margin-top: var(--s-4); }
  .hero__body .btn-row { margin-top: var(--s-5); }
  .hero__kicker { font-family: var(--font-body); font-weight: 700; font-size: var(--step--1); color: var(--kraft); margin-bottom: var(--s-3); display: flex; align-items: center; gap: 0.5rem; }
  .hero__kicker::before { content: ""; width: 2rem; height: 2px; background: currentColor; }
  .hero--type .hero__kicker { color: var(--royal); }

  /* ---- Breadcrumb (real, not decorative) */
  .crumbs { font-size: var(--step--1); color: var(--on-navy-muted); margin-bottom: var(--s-3); }
  .crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .crumbs li + li::before { content: "/"; margin-right: 0.35rem; opacity: 0.6; }
  .crumbs a { color: inherit; }
  .hero--type .crumbs { color: var(--ink-muted); }

  /* ---- The board (bold move): live door status */
  .board { background: var(--white); color: var(--navy); border: 2px solid var(--navy); margin-top: var(--s-6); }
  .board__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 2px solid var(--navy); }
  .board__head h2 { font-size: var(--step-1); font-weight: 720; }
  .board__head time { font-size: var(--step--1); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
  .board__list { list-style: none; padding: 0; margin: 0; }
  .board__row { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 0.35rem 0.75rem; padding: 0.7rem 1rem; border-top: 1px solid var(--line); text-decoration: none; color: inherit; transition: background-color var(--t-micro); }
  .board__row:first-child { border-top: 0; }
  .board__row:hover { background: var(--chalk); }
  .board__dot { width: 12px; height: 12px; background: var(--ink-muted); }
  .board__row[data-state="open"] .board__dot { background: var(--royal); }
  .board__row[data-state="always"] .board__dot { background: var(--red); }
  .board__row[data-state="soon"] .board__dot { background: var(--kraft); }
  .board__name { font-weight: 700; }
  .board__name small { display: block; font-weight: 400; color: var(--ink-muted); font-size: var(--step--1); }
  .board__status { grid-column: 2; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
  @media (min-width: 480px) { .board__row { grid-template-columns: 12px 1fr auto; } .board__status { grid-column: auto; text-align: right; max-width: 20ch; } }
  .board__status b { display: block; font-weight: 700; }
  .board__row[data-state="open"] .board__status b { color: var(--royal); }
  .board__row[data-state="always"] .board__status b { color: var(--red); }
  .board--compact { margin-top: 0; border-color: var(--line-on-navy); background: transparent; color: var(--white); }
  .board--compact .board__head { border-color: var(--line-on-navy); }
  .board--compact .board__head time, .board--compact .board__name small, .board--compact .board__status { color: var(--on-navy-muted); }
  .board--compact .board__row { border-color: var(--line-on-navy); }
  .board--compact .board__row:hover { background: var(--navy-2); }
  .board--compact .board__row[data-state="open"] .board__status b { color: var(--kraft); }

  /* ---- Give module: the hero object on the homepage */
  .give { background: var(--white); color: var(--navy); border: 2px solid var(--navy); padding: var(--s-5); display: grid; gap: var(--s-4); }
  .give h2 { font-size: var(--step-2); }
  .give__sub { color: var(--ink-muted); font-size: var(--step--1); margin-top: -0.5rem; }
  .give__toggle { display: grid; grid-template-columns: 1fr 1fr; background: var(--chalk); padding: 4px; }
  .give__toggle label { position: relative; display: block; text-align: center; padding: 0.6rem; font-weight: 700; cursor: pointer; color: var(--ink-muted); transition: background-color var(--t-micro), color var(--t-micro); }
  .give__toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .give__toggle label:has(input:checked) { background: var(--navy); color: var(--white); }
  .give__toggle label:has(input:focus-visible) { outline: 3px solid var(--royal); outline-offset: 2px; }
  .give__amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
  .give__amounts label { position: relative; display: block; text-align: center; padding: 0.75rem 0.5rem; border: 2px solid var(--line); font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); cursor: pointer; transition: border-color var(--t-micro), background-color var(--t-micro), transform var(--t-micro) var(--ease-out); }
  .give__amounts input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .give__amounts label:hover { border-color: var(--navy); }
  .give__amounts label:active { transform: scale(0.97); }
  .give__amounts label:has(input:checked) { border-color: var(--royal); background: color-mix(in oklch, var(--royal) 10%, var(--white)); color: var(--royal); }
  .give__amounts label:has(input:focus-visible) { outline: 3px solid var(--royal); outline-offset: 2px; }
  .give__other { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 2px solid var(--line); }
  .give__other span { padding: 0 0.6rem 0 0.9rem; font-weight: 700; color: var(--ink-muted); }
  .give__other input { min-height: 48px; border: 0; padding: 0.6rem 0.6rem 0.6rem 0; width: 100%; background: transparent; }
  .give__other input:focus-visible { outline: 0; }
  .give__other:focus-within { border-color: var(--royal); }
  .give__impact { background: var(--chalk); border-left: 4px solid var(--royal); padding: 0.75rem 1rem; font-size: var(--step--1); min-height: 3.4em; }
  .give .btn { width: 100%; }
  .give__trust { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: center; font-size: 0.8rem; color: var(--ink-muted); }
  .give__trust span::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.35em; vertical-align: -0.1em; background: var(--royal); -webkit-mask: url("../img/mark.svg") center / contain no-repeat; mask: url("../img/mark.svg") center / contain no-repeat; }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.arrived) .hero .give > * { animation: arrive var(--t-std) var(--ease-out) both; }
    html:not(.arrived) .hero .give > *:nth-child(2) { animation-delay: 300ms; }
    html:not(.arrived) .hero .give > *:nth-child(3) { animation-delay: 360ms; }
    html:not(.arrived) .hero .give > *:nth-child(4) { animation-delay: 420ms; }
    html:not(.arrived) .hero .give > *:nth-child(5) { animation-delay: 480ms; }
    html:not(.arrived) .hero .give > *:nth-child(6) { animation-delay: 540ms; }
    html:not(.arrived) .hero .give > *:nth-child(7) { animation-delay: 600ms; }
  }

  /* ---- Facts rail */
  .rail { border-top: 3px solid var(--navy); }
  .rail dl { display: grid; gap: 0; }
  .rail__item { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .rail__item dt { font-size: var(--step--1); font-weight: 700; color: var(--ink-muted); letter-spacing: 0.02em; }
  .rail__item dd { font-size: var(--step-1); font-weight: 700; font-family: var(--font-display); }
  .rail__item dd small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); color: var(--ink-muted); margin-top: 0.15rem; }
  .rail .btn-row { margin-top: var(--s-4); }
  .rail .btn { width: 100%; }

  /* ---- Directory: the six doors as a table with photos (home) */
  .doors { list-style: none; padding: 0; border-top: 2px solid var(--navy); }
  .door { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
  .door .pic { aspect-ratio: 1; }
  .door__name, .door__desc { display: block; }
  .door__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.05; letter-spacing: -0.02em; }
  .door__desc { color: var(--ink-muted); margin-top: 0.25rem; }
  .door__fact { font-weight: 700; font-size: var(--step--1); margin-top: 0.4rem; grid-column: 2; }
  .door__fact.is-red { color: var(--red); }
  @media (min-width: 720px) {
    .door { grid-template-columns: 140px 1fr auto; }
    .door__fact { margin-top: 0; text-align: right; max-width: 22ch; grid-column: auto; }
  }
  @media (min-width: 1024px) { .door { grid-template-columns: 180px 1fr minmax(240px, 30ch); gap: var(--s-6); } }
  .door:hover .door__name { color: var(--royal); }

  /* ---- Numbers strip (own reporting, labeled by year) */
  .numbers { list-style: none; padding: 0; display: grid; gap: var(--s-5); }
  @media (min-width: 720px) { .numbers { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .numbers { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } }
  .numbers li { border-top: 2px solid var(--kraft); padding-top: var(--s-3); }
  .numbers b { display: block; font-family: var(--font-display); font-size: var(--step-4); font-weight: 720; line-height: 1; font-variant-numeric: tabular-nums; }
  .numbers span { display: block; margin-top: 0.35rem; }
  .numbers small { display: block; color: var(--on-navy-muted); margin-top: 0.25rem; }

  /* ---- Case blocks: photo + story, alternating */
  .case { display: grid; gap: var(--s-5); }
  .case + .case { margin-top: var(--section); }
  .case .pic { aspect-ratio: 4 / 5; }
  @media (min-width: 720px) { .case .pic { aspect-ratio: 3 / 2; } }
  @media (min-width: 1024px) {
    .case { grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
    .case .pic { aspect-ratio: 4 / 3; }
    .case--rev > .pic { order: 2; }
  }
  .case__body h3 { font-size: var(--step-3); }
  .case__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .on-navy .case__facts, [data-theme="navy"] .case__facts { border-color: var(--line-on-navy); }
  .case__facts dt { font-size: var(--step--1); color: var(--ink-muted); }
  .on-navy .case__facts dt, [data-theme="navy"] .case__facts dt { color: var(--on-navy-muted); }
  .case__facts dd { font-weight: 700; }

  /* ---- Lists with the mark as the bullet (the system mark) */
  .marklist { list-style: none; padding: 0; display: grid; gap: 0.6rem; max-width: var(--measure); }
  .marklist li { position: relative; padding-left: 1.75em; }
  .marklist li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: url("../img/mark.svg") center / contain no-repeat; mask: url("../img/mark.svg") center / contain no-repeat; color: var(--royal); }
  .on-navy .marklist li::before, [data-theme="navy"] .marklist li::before { color: var(--kraft); }
  .marklist--2 { max-width: none; }
  @media (min-width: 720px) { .marklist--2 { grid-template-columns: 1fr 1fr; gap: 0.6rem var(--s-6); } }

  /* ---- Divider with the mark, centered, once per page at most */
  .mark-rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4); margin-block: var(--s-7); }
  .mark-rule::before, .mark-rule::after { content: ""; height: 1px; background: var(--line); }
  .on-navy .mark-rule::before, .on-navy .mark-rule::after, [data-theme="navy"] .mark-rule::before, [data-theme="navy"] .mark-rule::after { background: var(--line-on-navy); }
  .mark-rule svg { width: 32px; height: 32px; color: var(--navy); }
  .on-navy .mark-rule svg, [data-theme="navy"] .mark-rule svg { color: var(--kraft); }
  .mark-rule svg .heart { color: var(--red); }

  /* ---- Donorbox embed (give page) */
  .donorbox { display: grid; justify-items: center; scroll-margin-top: 6rem; }
  .donorbox iframe { display: block; width: 100%; }
  .donorbox .muted { max-width: 500px; text-align: center; }

  /* ---- Step sequence (only where it is a real sequence) */
  .steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--s-6); }
  .step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); counter-increment: step; }
  .step::before { content: counter(step); font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 0.9; color: var(--royal); min-width: 2.2ch; }
  .on-navy .step::before, [data-theme="navy"] .step::before { color: var(--kraft); }
  .step h3 { font-size: var(--step-2); }
  .step h4 { font-size: var(--step-0); font-family: var(--font-display); font-weight: 700; }
  .step p { margin-top: 0.4rem; }
  .step > div { min-width: 0; }
  .step .pic { grid-column: 1 / -1; margin-top: var(--s-4); aspect-ratio: 3 / 2; }
  @media (min-width: 1024px) {
    .steps--photos .step { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .steps--photos .step .pic { grid-column: auto; margin-top: 0; aspect-ratio: 4 / 3; }
  }

  /* ---- Timeline (About) */
  .timeline { list-style: none; padding: 0; border-left: 3px solid var(--navy); margin-left: 0.5rem; }
  .timeline li { position: relative; padding: 0 0 var(--s-6) var(--s-6); }
  .timeline li::before { content: ""; position: absolute; left: -9px; top: 0.35rem; width: 15px; height: 15px; background: var(--kraft); border: 3px solid var(--navy); }
  .timeline time { display: block; font-family: var(--font-display); font-weight: 760; font-size: var(--step-3); line-height: 1; color: var(--royal); }
  .timeline h3 { margin-top: 0.4rem; }
  .timeline p { margin-top: 0.4rem; }

  /* ---- Horizontal rail (stories, gallery) */
  .rail-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-4); scrollbar-width: thin; scrollbar-color: var(--kraft) transparent; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: max(var(--gutter), calc((100vw - var(--wide)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wide)) / 2)); }
  .rail-scroll > * { scroll-snap-align: start; }
  @media (min-width: 1024px) { .rail-scroll { grid-auto-columns: 420px; } }

  /* ---- Video (lite YouTube) */
  .video { position: relative; aspect-ratio: 16 / 9; background: var(--navy-2); overflow: hidden; }
  .video img { width: 100%; height: 100%; object-fit: cover; }
  .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .video__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.75rem; color: var(--white); background: linear-gradient(to top, color-mix(in oklch, var(--navy) 80%, transparent), transparent 60%); font-weight: 700; text-shadow: 0 1px 8px color-mix(in oklch, var(--navy) 60%, transparent); }
  .video__play span { background: var(--red); padding: 0.5rem 0.9rem; }
  .video__play svg { width: 72px; height: 72px; transition: transform var(--t-std) var(--ease-spring); }
  .video__play:hover svg { transform: scale(1.08); }
  .video__play:active svg { transform: scale(0.96); }

  /* ---- Story / media cards. Not identical rounded cards: a photo with a rule beneath. */
  .story { text-decoration: none; color: inherit; display: block; }
  .story .pic { aspect-ratio: 16 / 10; }
  .story__body { border-top: 3px solid var(--navy); padding-top: var(--s-3); margin-top: var(--s-3); }
  .on-navy .story__body, [data-theme="navy"] .story__body { border-color: var(--kraft); }
  .story h3 { font-size: var(--step-1); }
  .story__meta { font-size: var(--step--1); color: var(--ink-muted); margin-top: 0.25rem; }
  .on-navy .story__meta, [data-theme="navy"] .story__meta { color: var(--on-navy-muted); }
  .story-grid { display: grid; gap: var(--s-6); }
  @media (min-width: 720px) { .story-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .story-grid--3 { grid-template-columns: repeat(3, 1fr); } }

  /* ---- Gallery mosaic: mixed aspect ratios */
  .mosaic { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
  .mosaic .pic { aspect-ratio: 1; }
  .mosaic .span-2 { grid-column: span 2; aspect-ratio: 16 / 9; }
  @media (min-width: 720px) { .mosaic { grid-template-columns: repeat(4, 1fr); } .mosaic .span-2 { aspect-ratio: 2 / 1; } .mosaic .tall { grid-row: span 2; aspect-ratio: auto; } }
  /* Phones: the half-width mosaic tiles are ~170px, so the full badge (mark + wordmark + name) covers
     the photo. Keep just the name, as a one-line strip. */
  @media (max-width: 719px) {
    .mosaic .pic:not(.span-2) .badge { left: 0; right: 0; bottom: 0; max-width: none; display: block; padding: 0.4rem 0.6rem; border-radius: 0; box-shadow: none; background: color-mix(in oklch, var(--white) 92%, transparent); }
    .mosaic .pic:not(.span-2) .badge svg, .mosaic .pic:not(.span-2) .badge small { display: none; }
    .mosaic .pic:not(.span-2) .badge b { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  }

  /* ---- Give tiers: the recommended one at full width, the others compact */
  .tiers { display: grid; gap: var(--s-4); }
  .tier { border: 2px solid var(--navy); padding: var(--s-5); display: grid; gap: var(--s-3); text-decoration: none; color: inherit; transition: background-color var(--t-micro); }
  .tier:hover { background: var(--chalk); }
  .tier__amount { font-family: var(--font-display); font-weight: 760; font-size: var(--step-4); line-height: 1; font-variant-numeric: tabular-nums; }
  .tier__amount small { font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); }
  .tier--lead { background: var(--navy); color: var(--white); border-color: var(--navy); }
  .tier--lead:hover { background: var(--navy-2); }
  .tier--lead .tier__amount { font-size: var(--step-5); color: var(--kraft); }
  .tier--lead .tier__tag { font-size: var(--step--1); font-weight: 700; color: var(--kraft); letter-spacing: 0.04em; }
  @media (min-width: 720px) {
    .tiers { grid-template-columns: 1fr 1fr; }
    .tier--lead { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-6); }
  }

  /* ---- Give module (homepage) */
  .give-inline { display: grid; gap: var(--s-4); }
  .give-inline__amounts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .give-inline__amounts a { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 8.5rem; padding: 0.7rem 0.9rem; border: 2px solid var(--white); color: var(--white); text-decoration: none; transition: background-color var(--t-micro), color var(--t-micro), transform var(--t-micro) var(--ease-out); }
  .give-inline__amounts a b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 760; line-height: 1; }
  .give-inline__amounts a small { color: var(--on-navy-muted); }
  .give-inline__amounts a:hover { background: var(--white); color: var(--navy); }
  .give-inline__amounts a:hover small { color: var(--ink-muted); }
  .give-inline__amounts a:active { transform: scale(0.97); }

  /* ---- Placeholder slot (highlighted, listed in README) */
  .placeholder { border: 2px dashed var(--red); background: color-mix(in oklch, var(--kraft) 30%, var(--white)); padding: var(--s-5); color: var(--navy); }
  .placeholder b { color: var(--red); }

  /* ---- Forms: real labels, inline feedback, physical inputs */
  .form { display: grid; gap: var(--s-4); max-width: 44rem; }
  .field { display: grid; gap: 0.35rem; }
  .field label, .fieldset legend { font-weight: 700; }
  .field .hint { font-size: var(--step--1); color: var(--ink-muted); }
  .field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; background: var(--white); border: 2px solid var(--navy); color: var(--navy); transition: border-color var(--t-micro), box-shadow var(--t-micro); }
  .field textarea { min-height: 8rem; resize: vertical; }
  .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 0; border-color: var(--royal); box-shadow: 0 0 0 3px color-mix(in oklch, var(--royal) 30%, transparent); }
  .field input:user-valid, .field textarea:user-valid { border-color: var(--royal); }
  .field input:user-invalid, .field textarea:user-invalid { border-color: var(--red); }
  .field .error { display: none; font-size: var(--step--1); color: var(--red); font-weight: 700; }
  .field:has(:user-invalid) .error { display: block; }
  .fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
  .choice { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; }
  .choice input { width: 22px; height: 22px; accent-color: var(--royal); }
  .form__status { display: none; padding: var(--s-4); border-left: 4px solid var(--royal); background: var(--chalk); font-weight: 700; }
  .form__status[data-state="success"], .form__status[data-state="error"] { display: block; }
  .form__status[data-state="error"] { border-left-color: var(--red); }
  .req { color: var(--red); }

  /* ---- Toasts */
  .toasts { position: fixed; left: 50%; bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom) + 1rem); transform: translateX(-50%); z-index: 70; display: grid; gap: 0.5rem; width: min(92vw, 420px); pointer-events: none; }
  @media (min-width: 1024px) { .toasts { bottom: 1.5rem; } }
  .toast { pointer-events: auto; background: var(--navy); color: var(--white); border-left: 4px solid var(--kraft); padding: 0.8rem 1rem; font-weight: 700; display: flex; gap: 0.6rem; align-items: center; animation: toast-in var(--t-std) var(--ease-spring); }
  .toast--error { border-left-color: var(--red); }
  .toast[data-leaving] { animation: toast-out var(--t-micro) var(--ease-out) forwards; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

  /* ---- Quote (name badge attribution) */
  .quote { border-left: 4px solid var(--kraft); padding-left: var(--s-5); }
  .quote p { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; max-width: 32ch; }
  .quote footer { margin-top: var(--s-3); font-size: var(--step--1); font-weight: 700; }
  .quote footer span { display: block; font-weight: 400; color: var(--ink-muted); }
  .on-navy .quote footer span, [data-theme="navy"] .quote footer span { color: var(--on-navy-muted); }

  /* ---- Fact table (eligibility, formats, hours) */
  .facts { width: 100%; border-collapse: collapse; }
  .facts th, .facts td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
  .facts th { font-weight: 700; color: var(--ink-muted); font-size: var(--step--1); width: 34%; padding-right: 1rem; }
  .facts td { font-weight: 700; }
  .facts td small { display: block; font-weight: 400; color: var(--ink-muted); }
  .on-navy .facts th, .on-navy .facts td small, [data-theme="navy"] .facts th { color: var(--on-navy-muted); }
  .on-navy .facts th, .on-navy .facts td, [data-theme="navy"] .facts th, [data-theme="navy"] .facts td { border-color: var(--line-on-navy); }

  /* ---- The arched slogan (hero mark; used once on the Volunteer page) */
  .arc { position: absolute; z-index: 2; pointer-events: none; width: min(88vw, 620px); left: 50%; top: 6%; transform: translateX(-50%); color: var(--white); filter: drop-shadow(0 2px 6px color-mix(in oklch, var(--navy) 60%, transparent)); }
  @media (min-width: 1024px) { .arc { left: auto; right: 4%; transform: none; width: min(40vw, 620px); top: 10%; } }
  .arc text { font-family: var(--font-body); font-weight: 800; font-size: 60px; letter-spacing: 0.06em; text-transform: uppercase; fill: currentColor; }

  /* ---- Signup band */
  .signup { display: grid; gap: var(--s-4); }
  @media (min-width: 720px) { .signup { grid-template-columns: 1fr auto; align-items: end; } }
  .signup .field input { min-width: 16rem; }
  .signup .field input { background: var(--white); border-color: var(--white); }

  /* ---- Map */
  .map { aspect-ratio: 4 / 3; background: var(--chalk); }
  .map iframe { width: 100%; height: 100%; border: 0; display: block; }

  /* ---- Footer */
  .footer { background: var(--navy); color: var(--white); padding: var(--section) 0 var(--s-6); }
  .footer__grid { display: grid; gap: var(--s-6); }
  @media (min-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.2fr 0.8fr 0.8fr 2fr; gap: var(--s-7); } }
  .footer h2 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kraft); margin-bottom: var(--s-3); }
  .footer ul { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
  .footer a { text-decoration: none; }
  .footer a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
  .footer p { color: var(--on-navy-muted); }
  .footer__brand .brand__logo { height: 56px; }
  .footer__bottom { border-top: 1px solid var(--line-on-navy); margin-top: var(--s-7); padding-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center; font-size: var(--step--1); color: var(--on-navy-muted); }
  .social { display: flex; gap: 0.5rem; }
  .social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-on-navy); color: var(--white); transition: background-color var(--t-micro), color var(--t-micro); }
  .social a:hover { background: var(--white); color: var(--navy); }
  .social svg { width: 20px; height: 20px; }

  /* ---- Arrival: one orchestrated sequence, first load only */
  @media (prefers-reduced-motion: no-preference) {
    html:not(.arrived) .hero .arrive { animation: arrive var(--t-large) var(--ease-soft) both; }
    html:not(.arrived) .hero .arrive:nth-child(2) { animation-delay: 60ms; }
    html:not(.arrived) .hero .arrive:nth-child(3) { animation-delay: 120ms; }
    html:not(.arrived) .hero .arrive:nth-child(4) { animation-delay: 180ms; }
    html:not(.arrived) .hero .arrive:nth-child(5) { animation-delay: 240ms; }
    html:not(.arrived) .hero .board .board__row { animation: arrive var(--t-std) var(--ease-out) both; }
    html:not(.arrived) .hero .board .board__row:nth-child(2) { animation-delay: 320ms; }
    html:not(.arrived) .hero .board .board__row:nth-child(3) { animation-delay: 380ms; }
    html:not(.arrived) .hero .board .board__row:nth-child(4) { animation-delay: 440ms; }
    html:not(.arrived) .hero .board .board__row:nth-child(1) { animation-delay: 260ms; }
    /* The signature: the logo arrives first, then the rest of the header */
    html:not(.arrived) .header .brand__logo { animation: arrive 500ms var(--ease-soft) both; }
  }
  @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
  /* Scroll-driven reveal: the photo inside a frame rises into place as the frame enters. Reason: the site is
     photo-led and the frames are the rhythm; a still frame arriving already-filled reads as a placeholder
     (which is what happens when an image is slow). The frame itself never moves. Progressive only. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .case .pic img, .story .pic img, .door .pic img, .mosaic .pic img, .grid-2 .pic img, .breakout .pic img {
        animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
      }
    }
  }
  @keyframes rise { from { transform: translateY(12%) scale(1.06); opacity: 0.6; } to { transform: none; opacity: 1; } }
  @keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* ------------------------------------------------------ 6. UTILITIES */
@layer utilities {
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
  .max-measure { max-width: var(--measure); }
  .muted { color: var(--ink-muted); }
  .on-navy .muted, [data-theme="navy"] .muted { color: var(--on-navy-muted); }
  .kraft { color: var(--kraft); }
  .red { color: var(--red); }
  .tabular { font-variant-numeric: tabular-nums; }
  .nowrap { white-space: nowrap; }
  .section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
  @media (min-width: 1024px) { .section-head--row { grid-template-columns: 1fr 1fr; align-items: end; } .section-head--row .lede { margin: 0; } }
  .center { text-align: center; }
}