/* ==========================================================================
   Hope Horizon EPA — Rebuild Prototype
   Design system v2 (editorial). Restraint, scale, whitespace.
   ========================================================================== */

/* Fonts loaded via non-render-blocking <link> in each page head (faster FCP/LCP than @import). */

:root {
  /* color — Hope Horizon real brand (navy / blue / orange) */
  --ink:        #16202B;   /* near-black text, faintly cool */
  --ink-soft:   #3C4858;
  --muted:      #6A7686;
  --paper:      #FFFFFF;   /* base background is now white */
  --paper-2:    #D9E7F2;   /* light-blue tinted sections (replaces beige) */
  --paper-3:    #C2D7EA;   /* placeholder fill */
  --line:       #CBDCEC;   /* hairlines, blue-grey */
  --white:      #FFFFFF;

  --navy:       #1C355E;   /* BRAND main navy (#1C355E) */
  --royal:      #345D9D;   /* BRAND main blue (#345D9D) */
  --blue-light: #5B89B4;   /* BRAND main light blue (#5B89B4) */
  --orange:     #F78D2B;   /* BRAND main orange (#F78D2B) */
  --orange-deep:#EE7623;   /* BRAND supporting high-contrast orange (#EE7623) */
  --gold:       #FFB549;   /* BRAND main gold (#FFB549) */

  /* legacy accent aliases kept so existing class hooks reskin cleanly */
  /* RETIRED 15 Jul 2026: --terra #9A4409 was a darkened burnt-orange used for
     eyebrows/links/numbers so it would pass AA on white and on the tint. Eric's
     call: it read brown and muddy. Every HH orange fails even 3:1 on white, so no
     brighter orange is available for text. Reference orgs don't do this either:
     charity: water's eyebrow on light is plain grey #515151 and their orange is a
     fill only. Text accents are now charcoal / navy / brand blue; orange is a FILL. */
  --eyebrow-ink: #393F44;  /* brand charcoal. 10.67:1 white, 8.46:1 tint */
  --link-ink:    #345D9D;  /* brand blue.     6.57:1 white, 5.21:1 tint */
  --numeral-ink: #1C355E;  /* brand navy.    12.21:1 white */
  /* FILL ONLY. Both of these are #EE7623, which is 2.90:1 on white and 2.30:1 on the
     tint: it fails AA and fails even the 3:1 large-text floor. Never set them as a
     text colour. Use --eyebrow-ink (10.67:1) or --numeral-ink (12.21:1).
     The comment that used to sit here claimed "6.55:1 on white" and was wrong: 6.55:1
     belongs to #9A4409, the darkened terra this variable used to hold. The value was
     repointed to #EE7623 and the old contrast note was left behind, so the stylesheet
     spent months vouching for contrast it no longer had, and 42 orange text instances
     shipped across 9 pages on the strength of it. */
  --terra:      #EE7623;   /* fill only, never text */nd the light-blue tint #D9E7F2 (5.20:1). Buttons/bars keep bright --orange-deep. */
  --terra-deep: #EE7623;   /* fill only, never text */
  --terra-soft: #FCE4C6;   /* soft orange wash: pills, icon chips */
  --spirit:     #345D9D;   /* secondary -> BRAND blue */
  --spirit-soft:#D9E7F2;

  --f-display: 'Fredoka', 'Trebuchet MS', Verdana, sans-serif;
  --f-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* fluid type scale */
  --step--1: clamp(0.875rem, 0.84rem + 0.16vw, 0.95rem);
  --step-0:  clamp(1.0625rem, 1.02rem + 0.22vw, 1.18rem);
  --step-1:  clamp(1.3rem, 1.18rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.55rem, 1.35rem + 0.9vw, 2.1rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.3vw, 2.7rem);
  --step-4:  clamp(2.3rem, 1.85rem + 2vw, 3.5rem);
  --hero:    clamp(2.7rem, 1.9rem + 3.6vw, 4.4rem);

  /* spacing */
  --container: 1200px;
  --narrow: 760px;
  /* Reading measure. Calibrated, not guessed: the `ch` unit is the width of
     "0", which is wider than the average glyph, so 62ch renders ~81 real
     characters. Measured in Montserrat: 54ch = ~72 chars, 46ch = ~58 chars.
     Target 66-72. Prose running the full container is the #1 readability bug. */
  /* ---- Motion system ----
     Every transition on this site was browser-default `var(--ease-out)`, which is what
     "nobody chose this" looks like. These are the only curves we use.
     --ease-out is an expressive decelerate for entrances (things arrive and settle).
     --ease-inout is symmetric for state changes (toggles, accordions). */
  --ease-out:   cubic-bezier(0.16, 1, 0.30, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;   /* hover, press: must feel instant */
  --dur-base:   240ms;   /* cards, toggles, shadows */
  --dur-slow:   420ms;   /* section reveals */
  --measure: 54ch;
  --measure-tight: 46ch;
  --section-y: clamp(3.5rem, 2.5rem + 3vw, 6rem);
  --gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(30,26,22,.05);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--link-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.2em; }

/* ---- Type ---- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.005em; color: var(--navy); text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); font-weight: 700; }
h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: 0; }
p { max-width: var(--measure); }
/* Guards above are wrapped in :where() so they contribute ZERO specificity and
   this opt-out actually wins. Without that, `.section-head p` (0,1,1) outranks
   `.eyebrow` (0,1,0) and the eyebrow keeps the narrow box.

   The measure is for PROSE only. `ch` scales with font-size, so a 12px eyebrow
   capped at 54ch gets a 432px box while its 43px h2 sibling gets 702px. Inside a
   centred block the small text then centres within its own narrow box and drifts
   left (this was the off-centre bug across 16 pages). Non-prose paragraphs opt out. */
.eyebrow, .pill, .where, .crumbs, cite, figcaption,
.stat p, .stat .n, .bigstat .n, .event-date, .ev-m, .ev-d,
.n, .label, .caption, .give-note, .footer-links li { max-width: none; }

/* ---- Prose rhythm ----
   The `* { margin: 0 }` reset above zeroes every default margin, so bare
   paragraphs collide with each other and with the heading above them.
   Restore flow spacing for prose without disturbing component layout
   (components that set their own margins keep winning on specificity). */
main p + p { margin-top: 1rem; }
.section > .container > h2 + p,
.section > .container > div > h2 + p,
.section > .container > .narrow > h2 + p,
.page-hero > .container > h1 + p,
.page-hero > .container > h2 + p { margin-top: 1.1rem; }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); font-family: var(--f-body); max-width: var(--measure-tight); }
.lead.center { margin-inline: auto; }
.measure { max-width: 60ch; }
.measure.center { margin-inline: auto; }

.eyebrow {
  font-family: var(--f-body); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--eyebrow-ink);
}
/* eyebrow on dark / photographic contexts: warm light, never the dim blue-grey */
.hero-bleed .eyebrow, .hero-bleed-copy .eyebrow,
.section--ink .eyebrow, .section--spirit .eyebrow,
.page-hero--spirit .eyebrow, .cta-band .eyebrow {
  color: var(--gold);
}

/* ---- Layout ---- */
.container { width: min(100% - 3rem, var(--container)); margin-inline: auto; }
.narrow { width: min(100% - 3rem, var(--narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
@media (max-width: 640px){
  :root { --section-y: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
  .section-head { margin-bottom: clamp(1.25rem, .9rem + 1.8vw, 1.9rem); }
  .site-header { background: #fff; }
  .hero-bleed-grid { gap: 1.4rem; padding-block: clamp(1.6rem, 1rem + 3vw, 2.6rem); }
  .hero-bleed-copy h1 { margin-bottom: .8rem; }
  .give-card { padding: 1.15rem 1.15rem; }

  /* Mobile refinements: reclaim top space, ease type rhythm */
  .nav { padding-block: .55rem; }
  .hero h1, .hero-bleed h1, .hero-bleed-copy h1 { font-size: clamp(2.35rem, 1.5rem + 5vw, 3rem); line-height: 1.1; letter-spacing: -.015em; }
  .hero .lead, .hero-bleed-copy .lead { font-size: var(--step-0); }
  .photoband .pq { font-size: clamp(1.6rem, 1.1rem + 3vw, 2.2rem); line-height: 1.22; }
  .photoband { min-height: clamp(360px, 56vh, 480px) !important; }
  h2 { font-size: clamp(1.6rem, 1.15rem + 2.2vw, 2.1rem); line-height: 1.16; }
}
.section--tint { background: var(--paper-2); }
.section--white { background: var(--white); }
.section--ink { background: var(--navy); color: var(--paper); }
.section--ink h1,.section--ink h2,.section--ink h3 { color: #fff; }
.section--spirit { background: var(--spirit); color: #fff; }
.section--spirit h2,.section--spirit h3 { color: #fff; }
.center { text-align: center; }
.section-head { max-width: var(--measure); margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem); }
.section-head.center { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: 0.9rem; }
.section-head h2 { margin-bottom: 1rem; }
.stack > * + * { margin-top: 1.1rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--f-body); font-weight: 600; font-size: var(--step--1); line-height: 1;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 1.05rem 1.7rem; border-radius: 8px;
  border: 1.5px solid transparent; cursor: pointer; transition: background .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
/* Solid CTAs use bright --orange-deep with deep-navy label text, which meets
   WCAG AA (5.26:1). Hover brightens the orange (more contrast, not less). */
.btn--primary { background: var(--orange-deep); color: #13294B; }
.btn--primary:hover { background: #F2922F; color: #13294B; }
.btn--donate { background: #C2410C; color: #fff; }
.btn--donate:hover { background: #A8370A; color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--paper-2); }
.btn--on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--on-dark:hover { background: #fff; color: var(--navy); }
.btn--sm { padding: .7rem 1.1rem; font-size: .72rem; border-radius: 8px; }
.btn--lg { padding: 1.15rem 2.2rem; font-size: var(--step-0); letter-spacing: .075em; }
.textlink { font-family: var(--f-body); font-weight: 600; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .085em; color: var(--link-ink); }
.textlink::after { content: " →"; }

/* Inline citations. .textlink above is a standalone CTA (uppercase, letter-spaced,
   trailing arrow). Used inline inside a sentence it turns every source name into a
   shouty ALL-CAPS block with an arrow mid-prose, which is what the sources list on
   epa.html was doing. Citations are prose: sentence case, underlined, no arrow. */
.cite-link { font-family: var(--f-body); font-weight: 500; color: var(--link-ink);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(52,93,157,.4); text-decoration-thickness: 1px; }
.cite-link:hover { text-decoration-color: var(--link-ink); }
.cite-link::after { content: none; }
.article-sources, .sources-list { font-size: var(--step--1); line-height: 1.75; color: var(--muted); }

/* ---- Header / nav ---- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--terra); color: #fff; font-family: var(--f-display); font-weight: 600; }
/* real brand logo (wide sunrise lockup) */
.brand-logo { height: 42px; width: auto; }
@media (max-width: 520px){ .brand-logo { height: 36px; } }
/* footer logo sits on navy, so place it on a white chip */
.footer-logo { display: inline-block; background: #fff; border-radius: 10px; padding: .55rem .7rem; margin-bottom: 1rem; }
.footer-logo img { height: 40px; width: auto; }

/* ---- Sponsors band ---- */
.sponsors .section-head { text-align: center; margin-inline: auto; }
.sponsor-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 1rem + 3vw, 3.8rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.sponsor-logo img { height: 58px; width: auto; max-width: 200px; object-fit: contain; }
.sponsor-city img { height: 78px; max-width: 78px; }
.sponsor-text { font-family: var(--f-display); font-weight: 700; font-size: var(--step-0); line-height: 1.15; color: var(--navy); text-align: center; max-width: 12ch; }
.nav-links { display: flex; align-items: center; gap: clamp(1rem,.4rem + 1.1vw,2rem); list-style: none; padding: 0; margin: 0; }
.nav-links a:not(.btn) { color: var(--ink); font-weight: 500; font-size: var(--step--1); }
.nav-links a:not(.btn):hover { color: var(--link-ink); text-decoration: none; }
.nav-links a.current { color: var(--link-ink); }
.nav-links a.btn--donate { color: #fff; }
.nav-cta { display: flex; align-items: center; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; }

/* ---- Dropdown nav ---- */
.nav-links .has-menu { position: relative; }
.menu-top { display: inline-flex; align-items: center; gap: .3em; cursor: pointer; }
.menu-top .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55; transition: transform .18s var(--ease-out); }
.nav-links .submenu { list-style: none; margin: 0; padding: .4rem; }
@media (min-width: 921px) {
  .nav-links .submenu {
    position: absolute; top: calc(100% + 10px); left: -.5rem; min-width: 236px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 16px 38px rgba(22,32,43,.16);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s var(--ease-out), transform .16s var(--ease-out), visibility .16s;
    z-index: 70;
  }
  .nav-links .has-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
  .nav-links .has-menu:hover > .submenu,
  .nav-links .has-menu:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links .submenu a:not(.btn) { display: block; padding: .52rem .7rem; border-radius: 9px; font-size: var(--step--1); font-weight: 500; color: var(--ink); white-space: nowrap; }
  .nav-links .submenu a:not(.btn):hover { background: var(--paper-2); color: var(--navy); }
  .nav-links .has-menu:hover > .menu-top .caret,
  .nav-links .has-menu:focus-within > .menu-top .caret { transform: rotate(180deg); }
}

/* Events is a direct top-level item on phones, where the menu is a stacked list
   with room for it. The desktop bar has 16px of spare width at 921px and 1024px,
   so there the calendar is reached from the Get Involved and About menus instead. */
@media (min-width: 921px) { .nav-mobile-only { display: none; } }

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav-links { position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: .5rem 1.5rem 1.2rem; display: none; max-height: calc(100vh - 100%); overflow-y: auto; }
  .nav-links.open { display: flex; }
  .nav-links > li { width: 100%; }
  .nav-links a { padding: .8rem 0; width: 100%; border-bottom: 1px solid var(--line); font-size: var(--step-0); }
  .nav-links li:last-child a { border-bottom: 0; }
  .menu-top { justify-content: space-between; }
  .nav-links .submenu { display: none; width: 100%; padding: 0 0 .3rem; }
  .nav-links .has-menu.expanded > .submenu { display: block; }
  .nav-links .submenu a { padding: .62rem 0 .62rem 1.1rem; font-size: var(--step--1); color: var(--ink-soft); }
  .nav-links .has-menu.expanded > .menu-top .caret { transform: rotate(180deg); }
}

/* ---- Hero ---- */
.hero { padding-block: clamp(3.5rem, 2rem + 7vw, 8rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,1rem + 4vw,5rem); align-items: center; }
.hero h1 { font-size: var(--hero); margin-bottom: 1.4rem; }
.hero .lead { margin-bottom: 2rem; max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-media img, .hero-media .ph { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-media img, .hero-media .ph { aspect-ratio: 16/10; }
}

/* ---- Full-bleed hero (image bg) ---- */
.hero-bleed { position: relative; min-height: 78vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero-bleed .bg { position: absolute; inset: 0; background: var(--navy); }
.hero-bleed .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .72; display: block; }
/* On phones, frame the hero background and lift it with a soft overlay */
@media (max-width: 760px){
  .hero-bleed .bg { background: var(--navy) url(../img/hh-group-outdoor-1024.webp) center/cover no-repeat; }
  .hero-bleed .bg::after { content: ""; position: absolute; inset: 0; background: rgba(10,26,56,.18); }
}
.hero-bleed .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,26,56,.32) 0%, rgba(10,26,56,.55) 48%, rgba(10,26,56,.9) 100%); }
/* Custom donation amount field (revealed by "Other") */
.give-custom { display: flex; align-items: center; gap: .45rem; margin: .1rem 0 0; }
.give-custom[hidden] { display: none; }
.give-custom-prefix { font-weight: 700; color: var(--ink); font-size: var(--step-1); }
.give-custom input { flex: 1; min-width: 0; padding: .6rem .7rem; border: 1.5px solid var(--navy); border-radius: 8px; font: inherit; color: var(--ink); }
@media (prefers-reduced-motion: reduce){
  .hero-bleed .bg { background: var(--navy) url(../img/hh-group-outdoor-1024.webp) center/cover no-repeat; }
}
.hero-bleed .container { position: relative; padding-block: clamp(2.5rem,2rem + 5vw,5.5rem); }
.hero-bleed h1 { color: #fff; font-size: var(--hero); max-width: 16ch; }
.hero-bleed .lead { color: rgba(255,255,255,.9); }

/* ---- Editorial feature row ---- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,1rem + 4vw,5rem); align-items: center; }
.feature .media img, .feature .media .ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); }
.feature--rev .copy { order: 2; }
@media (max-width: 860px){ .feature { grid-template-columns: 1fr; } .feature--rev .copy { order: 0; } }

/* full-bleed media to one viewport edge */
.bleed-right { width: calc(50vw - 1.5rem); max-width: none; }
@media (max-width: 860px){ .bleed-right { width: 100%; } }

/* ---- Oversized stat moment ---- */
.bigstat { text-align: center; padding-block: clamp(1rem,.5rem + 1vw,2rem); }
.bigstat .n { font-family: var(--f-display); font-weight: 500; font-size: clamp(4.5rem, 3rem + 11vw, 11rem); line-height: .9; letter-spacing: -0.04em; color: var(--numeral-ink); }
.bigstat .l { font-size: var(--step-1); color: var(--ink-soft); margin-top: .6rem; max-width: 30ch; margin-inline: auto; }
.section--ink .bigstat .n { color: var(--gold); }
.section--ink .bigstat .l { color: rgba(250,246,240,.8); }

/* ---- Impact stats row ---- */
.stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 0; }
.stat .num { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem,1.8rem + 2.4vw,3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--numeral-ink); }
.section--ink .stat .num { color: var(--gold); }
.stat .label { font-size: var(--step--1); color: var(--muted); margin-top: .5rem; max-width: 22ch; }
.section--ink .stat .label { color: rgba(250,246,240,.72); }
@media (max-width: 680px){ .stats { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }

/* ---- Grids ---- */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

/* mobile horizontal scroll-snap for snap grids */
@media (max-width: 620px){
  .snap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1.1rem; padding-bottom: 1rem; margin-inline: -1.5rem; padding-inline: 1.5rem; -webkit-overflow-scrolling: touch; }
  .snap > * { flex: 0 0 80%; scroll-snap-align: start; }
}

/* ---- Cards: editorial, no boxes ---- */
.card { background: transparent; border: 0; box-shadow: none; padding: 0; display: flex; flex-direction: column; }
.card-media { aspect-ratio: 3/2; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
/* Focal-point utilities. A portrait source in a landscape box crops to the
   centre by default, which decapitates the subject. Aim the crop at the face. */
.img-top { object-position: center top !important; }
.img-upper { object-position: center 28% !important; }
.img-lower { object-position: center 72% !important; }
.card-body { padding: 1.1rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.card h3 { font-size: var(--step-1); }
.card p { font-size: var(--step-0); color: var(--ink-soft); }
.card .card-link { margin-top: .3rem; font-weight: 600; font-size: var(--step--1); color: var(--link-ink); }

/* program list rows (editorial) */
.prog-list { display: grid; gap: 0; }
.prog-row { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: baseline; padding: 1.8rem 0; border-top: 1px solid var(--line); }
.prog-row:last-child { border-bottom: 1px solid var(--line); }
.prog-row .idx { font-family: var(--f-display); font-size: var(--step-1); color: var(--muted); }
.prog-row h3 { font-size: var(--step-2); }
.prog-row .desc { color: var(--ink-soft); font-size: var(--step-0); margin-top: .3rem; max-width: 60ch; }
.prog-row .go { color: var(--link-ink); font-weight: 600; font-size: var(--step--1); white-space: nowrap; }
@media (max-width: 700px){ .prog-row { grid-template-columns: 1fr; gap: .4rem; padding: 1.2rem 0; } .prog-row .go { margin-top: .6rem; } }

/* program cards (used on Our Work / Families) — light, minimal */
.prog-card { background: transparent; border: 0; border-top: 2px solid var(--navy); padding: 1.3rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.prog-card .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--terra-soft); color: var(--eyebrow-ink); margin-bottom: .4rem; }
.prog-card .ic svg { width: 22px; height: 22px; }
.prog-card h3 { font-size: var(--step-1); }
.prog-card p { font-size: var(--step-0); color: var(--ink-soft); }
.prog-card .tag { font-size: var(--step--1); color: var(--muted); }
.prog-card .card-link { margin-top: auto; font-weight: 600; font-size: var(--step--1); color: var(--link-ink); }
.prog-card.feature-panel { background: var(--navy); color: var(--paper); border: 0; border-radius: var(--radius-lg); padding: 1.8rem; }
.prog-card.feature-panel h3 { color: #fff; }
.prog-card.feature-panel p { color: rgba(250,246,240,.82); }
.prog-card.feature-panel .ic { background: rgba(255,255,255,.12); color: var(--gold); }
.prog-card.feature-panel .card-link { color: var(--gold); }
.grid-3 .feature-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 1.25rem 2.5rem; align-items: center; }
.grid-3 .feature-wide .fw-copy p { max-width: 70ch; margin-bottom: 0; }
.grid-3 .feature-wide .btn { white-space: nowrap; }
@media (max-width: 760px){ .grid-3 .feature-wide { grid-template-columns: 1fr; gap: 1rem; align-items: start; } .grid-3 .feature-wide .btn { white-space: normal; } } /* let the long CTA wrap on phones; nowrap forced +64px page overflow */

/* ---- Panel (genuinely boxed: forms, doc links) ---- */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; }

/* ---- Placeholder (intentional, not caution tape) ---- */
.ph { display: grid; place-items: center; text-align: center; background: var(--paper-3); color: var(--ink-soft); min-height: 100%; padding: 1rem; }
.ph span { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; opacity: .92; }
.section--ink .ph, .hero-bleed .ph { background: #14284a; color: rgba(255,255,255,.5); }

/* ---- Quote / pullquote ---- */
.pullquote { font-family: var(--f-display); font-weight: 500; font-size: var(--step-3); line-height: 1.2; letter-spacing: -0.02em; max-width: 20ch; }
.quote { font-family: var(--f-display); font-weight: 500; font-size: var(--step-2); line-height: 1.35; }
.quote cite { display: block; font-family: var(--f-body); font-size: var(--step--1); font-style: normal; color: var(--muted); margin-top: 1rem; }
/* Faith quote = navy band moment (Option B) */
.faith-quote { background: var(--navy); border-radius: 14px; border: 0; text-align: center; padding: clamp(2.75rem, 2rem + 3.5vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem); margin: clamp(2.75rem, 2rem + 3vw, 4.5rem) auto clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.faith-quote::before { content: "\201C"; display: block; font-family: var(--f-display); font-weight: 700; font-size: 4rem; line-height: .55; color: var(--gold); margin-bottom: 1rem; }
/* Size so each .ln fits on one line at desktop; if a line does wrap at narrow
   widths, uniform line-height keeps every gap identical (no mixed spacing). */
.faith-quote p { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, .95rem + 1.15vw, 1.75rem); line-height: 1.45; letter-spacing: -0.01em; color: #fff; margin: 0 auto; max-width: 46ch; text-wrap: balance; }
.faith-quote .ln { display: block; text-wrap: balance; }
.faith-quote .ln + .ln { margin-top: 0; }
.faith-quote cite { display: block; font-family: var(--f-body); font-size: var(--step--1); font-style: normal; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin-top: 1.75rem; }

/* Reusable pull-quote variants for other contexts */
/* A — hanging mark, left-aligned editorial */
.pq-edit { max-width: 760px; margin: clamp(2.5rem, 2rem + 3vw, 4rem) 0; border: 0; padding: 0; }
.pq-edit::before { content: "\201C"; display: block; font-family: var(--f-display); font-weight: 700; font-size: 6.5rem; line-height: .7; color: var(--terra); margin-bottom: -1rem; }
.pq-edit p { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.18; letter-spacing: -0.02em; margin: .6rem 0 0; max-width: 22ch; }
.pq-edit cite { display: block; font-family: var(--f-body); font-style: normal; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 1.3rem; padding-top: 1rem; border-top: 2px solid var(--line); max-width: 18ch; }
/* D — magazine side-rail */
.pq-rail { display: grid; grid-template-columns: auto 1fr; gap: 2.2rem; max-width: 840px; margin: clamp(2.5rem, 2rem + 3vw, 4rem) 0; align-items: start; }
.pq-rail .rail { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--eyebrow-ink); }
.pq-rail .body .lead-rule { width: 54px; height: 4px; background: var(--terra); margin: 0 0 1.3rem; }
.pq-rail .body p { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0; max-width: 24ch; }
.pq-rail .body cite { display: block; font-family: var(--f-body); font-style: normal; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 1.2rem; }

/* ---- Recipients / roster ---- */
.roster { display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; }
.roster .r { display: flex; flex-direction: column; padding: .4rem 0; }
.roster .r .nm { font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); }
.roster .r .sc { font-size: var(--step--1); color: var(--muted); }

/* ---- Donate tiers: vertical, editorial ---- */
.tier-list { display: grid; gap: 0; max-width: 760px; }
.tier-row { display: grid; grid-template-columns: minmax(120px,auto) 1fr; gap: 1.5rem; align-items: baseline; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.tier-row:last-child { border-bottom: 1px solid var(--line); }
.tier-row .amt { font-family: var(--f-display); font-weight: 500; font-size: clamp(2rem,1.4rem + 2vw,3rem); line-height: 1; letter-spacing: -0.03em; color: var(--numeral-ink); }
.tier-row .what { color: var(--ink-soft); font-size: var(--step-0); }
.tier-row .label { font-family: var(--f-display); font-weight: 600; font-size: var(--step-1); line-height: 1.1; color: var(--navy); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }

/* ---- Pill / tag ---- */
/* compact pill: align-self/width keep it from stretching inside flex columns (e.g. .card-body) */
.pill { display: inline-block; align-self: flex-start; width: fit-content; font-family: var(--f-body); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow-ink); background: var(--terra-soft); padding: .35em .85em; border-radius: var(--r-pill); }
.pill--spirit { background: var(--spirit-soft); color: var(--spirit); }
/* neutral status pill for intentional "upcoming" placeholder cards */
.pill--soon { background: var(--paper-2); color: var(--ink-soft); }

/* ---- Page hero (interior) ---- */
.page-hero { padding-block: clamp(3rem,2rem + 4vw,6rem) clamp(2rem,1.5rem + 2vw,3.5rem); }
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-hero h1 { font-size: var(--step-4); max-width: 18ch; }
.page-hero p { margin-top: 1.2rem; color: var(--ink-soft); }
.page-hero .hero-actions { margin-top: 2rem; }
.page-hero--spirit { background: var(--spirit); color: #fff; }
.page-hero--spirit h1, .page-hero--spirit .eyebrow { color: #fff; }
.page-hero--spirit p { color: rgba(255,255,255,.9); }
.page-hero--spirit .pill { background: rgba(255,255,255,.16); color: #fff; }
.hero-impact { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.hero-impact > div:first-child p { max-width: 46ch; }
.hi-rail { display: grid; gap: 0; }
.hi-stat { display: flex; align-items: baseline; gap: 1.1rem; padding: 1.05rem 0; border-top: 1px solid rgba(255,255,255,.28); }
.hi-stat:first-child { border-top: 0; padding-top: 0; }
.hi-stat .n { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1; color: var(--gold); min-width: 3.2ch; }
.hi-stat .l { font-size: var(--step-0); color: rgba(255,255,255,.92); }
@media (max-width: 820px){ .hero-impact { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---- Audience selector: typographic list ---- */
.audience-list { display: grid; gap: 0; }
.aud-row { display: grid; grid-template-columns: minmax(140px,auto) 1fr auto; gap: 1.5rem; align-items: center; padding: 1.3rem 0; border-top: 1px solid var(--line); color: var(--ink); }
.aud-row:last-child { border-bottom: 1px solid var(--line); }
.aud-row:hover { text-decoration: none; }
.aud-row:hover .who { color: var(--link-ink); }
.aud-row .who { font-family: var(--f-display); font-weight: 500; font-size: var(--step-2); transition: color .15s; }
.aud-row .what { color: var(--muted); font-size: var(--step-0); }
.aud-row .go { color: var(--link-ink); font-weight: 600; font-size: var(--step--1); white-space: nowrap; }
@media (max-width: 700px){ .aud-row { grid-template-columns: 1fr; gap: .3rem; } .aud-row .go { margin-top: .3rem; } }

/* ---- Steps ---- */
.steps { display: grid; gap: 0; counter-reset: step; }
.step-row { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; padding: 1.3rem 0; border-top: 1px solid var(--line); }
.step-row:last-child { border-bottom: 1px solid var(--line); }
.step-row::before { counter-increment: step; content: counter(step); font-family: var(--f-display); font-size: var(--step-1); color: var(--numeral-ink); width: 1.6em; }
.step-row h4 { margin-bottom: .2rem; }
.step-row p { font-size: var(--step-0); color: var(--ink-soft); margin: 0; }

/* ---- FAQ ---- */
.faq details { border-top: 1px solid var(--line); padding: 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); padding: 1.2rem 0; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--link-ink); }
.faq details[open] summary::after { content: "–"; }
.faq .faq-body { padding: 0 0 1.3rem; color: var(--ink-soft); }

/* ---- Info row ---- */
.inforow { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.inforow .ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--spirit-soft); color: var(--navy); flex: none; }
.inforow .ic svg { stroke-width: 2.1; }
.inforow .ic svg { width: 22px; height: 22px; }

/* ---- Person ---- */
.person { display: flex; gap: 1rem; align-items: center; }
.person .avatar { width: 58px; height: 58px; border-radius: 999px; background: var(--spirit-soft); color: var(--spirit); display: grid; place-items: center; font-family: var(--f-display); font-weight: 500; font-size: 1.4rem; flex: none; }
.person .name { font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); }
.person .role { font-size: var(--step--1); color: var(--muted); }

/* ---- Fact bar ---- */
.factbar { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--line); }
.factbar .fact { padding: 1.2rem 1.4rem 1.2rem 0; }
.factbar .fact .k { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.factbar .fact .v { font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); color: var(--ink); margin-top: .3rem; line-height: 1.1; }
@media (max-width: 700px){ .factbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px){ .factbar { grid-template-columns: 1fr; } }

/* ---- Team ---- */
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.2rem,1rem + 1vw,2rem) 1.5rem; }
@media (max-width: 820px){ .team-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 520px){ .team-grid { grid-template-columns: repeat(2,1fr); } }
.tcard { text-align: left; }
.tcard .avatar { width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); margin-bottom: .7rem; background: var(--paper-3); color: var(--spirit); display: grid; place-items: center; font-family: var(--f-display); font-weight: 500; font-size: 2rem; overflow: hidden; box-shadow: 0 8px 22px rgba(16,32,56,.12), 0 2px 6px rgba(16,32,56,.08); transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.tcard .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tcard:hover .avatar { box-shadow: 0 14px 32px rgba(16,32,56,.18), 0 4px 10px rgba(16,32,56,.10); transform: translateY(-2px); }
.tcard .avatar.lead { background: var(--terra-soft); color: var(--eyebrow-ink); }
.tcard .name { font-family: var(--f-display); font-weight: 500; font-size: var(--step-0); }
.tcard .role { font-size: .8rem; color: var(--muted); margin-top: .15rem; line-height: 1.3; }
.team-list { display: flex; flex-wrap: wrap; gap: .5rem .7rem; }
.team-list .chip { font-size: var(--step--1); color: var(--ink-soft); }
.team-list .chip b { color: var(--ink); font-weight: 600; }
.team-list .chip:not(:last-child)::after { content: "·"; margin-left: .7rem; color: var(--muted); }

/* ---- Timeline ---- */
/* Editorial index table: fixed year column, prose held to a readable measure,
   year baseline-aligned to the first line of text. */
.timeline { display: grid; gap: 0; border-top: 1px solid var(--line); }
.tl-item {
  display: grid;
  grid-template-columns: 9rem minmax(0, var(--measure));
  gap: clamp(1.25rem, .8rem + 1.8vw, 2.75rem);
  align-items: start;
  padding-block: clamp(1.3rem, 1.05rem + .7vw, 1.9rem);
  border-bottom: 1px solid var(--line);
}
.tl-item .yr {
  font-family: var(--f-display); font-weight: 600; color: var(--numeral-ink);
  font-size: var(--step-0); line-height: 1.7; white-space: nowrap;
}
.tl-item p { font-size: var(--step-0); line-height: 1.7; color: var(--ink-soft); margin: 0; max-width: var(--measure); }
@media (max-width: 700px){
  .tl-item { grid-template-columns: 1fr; gap: .25rem; }
  .tl-item .yr { font-size: var(--step--1); line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; }
}

/* Rail variant: a continuous line threads the eras together, with a marker per
   entry. Keeps the year column; the rail carries continuity so the per-row
   hairlines come off. Dot is centred on the rail and on the year's first line. */
.timeline--rail { border-top: 0; position: relative; padding-left: 2.5rem; }
/* The rail is drawn per item (dot -> next dot) rather than as one line on the
   container, so it terminates cleanly at the last marker instead of dangling
   past it down the height of the final paragraph. */
.timeline--rail .tl-item::after {
  content: ""; position: absolute; left: calc(-2.5rem + 5px); top: 1.35rem; bottom: -8px;
  width: 2px; background: rgba(28,53,94,.18);
}
.timeline--rail .tl-item:last-child::after { display: none; }
.timeline--rail .tl-item {
  border-bottom: 0; position: relative;
  padding-block: 0 clamp(1.7rem, 1.3rem + 1.5vw, 2.8rem);
}
.timeline--rail .tl-item:last-child { padding-bottom: 0; }
.timeline--rail .tl-item::before {
  content: ""; position: absolute; left: -2.5rem; top: .5rem;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--orange); box-shadow: 0 0 0 4px var(--paper-2);
}
/* The era the whole page is building toward. */
.timeline--rail .tl-item--now::before {
  background: var(--gold); width: 16px; height: 16px; left: calc(-2.5rem - 2px); top: .35rem;
  box-shadow: 0 0 0 4px var(--paper-2), 0 0 0 6px var(--gold);
}
.timeline--rail .tl-item--now .yr { color: var(--navy); }
@media (max-width: 700px){
  .timeline--rail { padding-left: 1.9rem; }
  .timeline--rail .tl-item::before { left: -1.9rem; }
  .timeline--rail .tl-item::after { left: calc(-1.9rem + 5px); }
  .timeline--rail .tl-item--now::before { left: calc(-1.9rem - 2px); }
  /* Tighten the heaviest components on phones: the 10-item history timeline and the justice rail. */
  .tl-item p, .jrail-p { line-height: 1.55; }
  .timeline--rail .tl-item { padding-block: 0 1.15rem; }
  .jrail-i { padding-bottom: 1.4rem; }
}

/* ---- Values ---- */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,1rem + 2vw,2.5rem) 2rem; }
@media (max-width: 820px){ .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .values { grid-template-columns: 1fr; } }
.value { border-top: 2px solid var(--navy); padding-top: 1rem; }
.value h4 { margin-bottom: .3rem; }
.value p { font-size: var(--step-0); color: var(--ink-soft); margin: 0; }

/* ---- Doc links ---- */
.doclist { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 2rem; }
@media (max-width: 560px){ .doclist { grid-template-columns: 1fr; } }
.doclink { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); font-weight: 500; font-size: var(--step-0); color: var(--ink); }
.doclink:hover { text-decoration: none; color: var(--link-ink); }
.doclink .ext { color: var(--eyebrow-ink); font-size: var(--step--1); font-weight: 600; }

/* ---- Opportunities ---- */
.opps { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 2.2rem; }
@media (max-width: 560px){ .opps { grid-template-columns: 1fr 1fr; gap: 0 1.1rem; } }
@media (max-width: 360px){ .opps { grid-template-columns: 1fr; } }
.opp { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.opp .tick { color: var(--link-ink); font-weight: 700; }
.opp .opp-t { font-weight: 600; }
.opp .opp-d { font-size: var(--step--1); color: var(--muted); }

/* ---- Partners ---- */
.partners { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; }
.partner-logo { font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); color: var(--muted); opacity: .85; }

/* ---- Events ---- */
.event-list { display: grid; gap: 1rem; }
.event-card { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.2rem 1.4rem; transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.event-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22,32,43,.08); }
.event-date { display: grid; place-items: center; min-width: 78px; padding: .6rem .5rem; border-radius: var(--radius); background: var(--navy); color: #fff; text-align: center; line-height: 1.1; }
.event-date .m { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.event-date .d { font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; }
.event-date .y { font-size: .66rem; color: rgba(255,255,255,.72); }
.event-date--tbc { background: var(--paper-2); color: var(--navy); }
.event-date--tbc .m { color: var(--eyebrow-ink); }
.event-date--tbc .d { font-size: .95rem; }
.event-body h3 { font-family: var(--f-display); color: var(--navy); font-size: var(--step-1); margin: 0 0 .25rem; line-height: 1.25; }
.event-body p { margin: 0; color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; max-width: var(--measure); }
.event-body .where { display: block; margin-top: .3rem; font-size: .8rem; color: var(--muted); }
.event-tag { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: var(--terra-soft); color: var(--eyebrow-ink); margin-bottom: .35rem; }
.event-tag--new { background: var(--gold); color: #3a2600; }
.event-card--past { background: var(--paper-2); border-color: transparent; }
.event-card--past .event-date { background: var(--royal); }
@media (max-width: 700px) {
  .event-card { grid-template-columns: auto 1fr; gap: 1rem; }
  .event-card .event-cta { grid-column: 1 / -1; margin-top: .4rem; }
}

/* ---- Honor roll (featured supporters) ---- */
.honor-roll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.honor-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.35rem; text-align: center; box-shadow: 0 1px 2px rgba(22,32,43,.05), 0 10px 24px rgba(22,32,43,.05); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.honor-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(22,32,43,.06), 0 16px 34px rgba(22,32,43,.09); }
.honor-card .mono { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto .8rem; display: grid; place-items: center; background: var(--paper-2); color: var(--royal); font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; }
.honor-card .nm { font-family: var(--f-display); font-weight: 600; font-size: var(--step-1); color: var(--navy); line-height: 1.2; }
.honor-card .tier { margin-top: .4rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--eyebrow-ink); }
.honor-card .note { margin-top: .55rem; font-size: var(--step--1); color: var(--muted); }
@media (max-width: 760px) { .honor-roll { grid-template-columns: 1fr; } }

/* ---- Trust badges ---- */
.trust-badges { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; }
.trust-badge { display: flex; align-items: center; gap: .5em; font-size: var(--step--1); font-weight: 500; color: var(--ink-soft); }
.trust-badge .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--gold); }

/* give split / two-col */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,1rem + 4vw,4rem); align-items: center; }
.two-col.top { align-items: start; }
.letter-card { margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0 0; max-width: 320px; }
.letter-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; display: block; }
.letter-card figcaption { margin-top: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.letter-card .name { font-family: var(--f-display); font-weight: 600; font-size: var(--step-1); color: var(--ink); }
.letter-card .role { font-size: var(--step--1); }
@media (max-width: 820px){ .two-col { grid-template-columns: 1fr; } }
.give-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,1rem + 4vw,4rem); align-items: center; }
@media (max-width: 820px){ .give-split { grid-template-columns: 1fr; } }
.bar { height: 12px; border-radius: 999px; background: var(--paper-3); overflow: hidden; display: flex; margin: .5rem 0; }
.bar i { display: block; height: 100%; }

/* note box */
.note-box { background: var(--spirit-soft); border-radius: var(--radius); padding: 1.1rem 1.3rem; font-size: var(--step--1); color: var(--ink-soft); }
.note-box strong { color: var(--spirit); }

/* lang toggle */
.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.lang-toggle button { border: 0; background: transparent; padding: .55em 1.1em; cursor: pointer; font-family: var(--f-body); font-weight: 600; font-size: var(--step--1); color: var(--muted); }
.lang-toggle button.active { background: var(--navy); color: #fff; }

/* featured lead story (magazine marquee) */
.story-lead { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.story-lead .media .ph, .story-lead .media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-lg); }
.story-lead .copy h2 { font-size: var(--step-4); margin: .6rem 0 1rem; }
.story-lead .copy .lead { max-width: 38ch; }
@media (max-width: 860px){ .story-lead { grid-template-columns: 1fr; gap: 1.6rem; } .story-lead .media .ph, .story-lead .media img { aspect-ratio: 16/9; } }
/* Compact modifier: a shorter story-lead for pages tight on vertical space (mobile height budgets) */
.story-lead--compact .copy h2 { font-size: var(--step-3); margin: .5rem 0 .7rem; }
@media (max-width: 860px){ .story-lead--compact { gap: 1rem; } .story-lead--compact .media .ph, .story-lead--compact .media img { aspect-ratio: 2/1; } }

/* story filter */
.filter { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.filter button { border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--f-body); font-weight: 600; font-size: var(--step-0); color: var(--muted); }
.filter button:hover { color: var(--ink); }
.filter button.active { color: var(--eyebrow-ink); }

/* article */
.article { width: min(100% - 3rem, 720px); margin-inline: auto; }
.article-meta { font-size: var(--step--1); color: var(--muted); margin-bottom: 1.6rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.article-body { font-size: var(--step-1); line-height: 1.75; }
.article-body p { max-width: none; margin-bottom: 1.3rem; }
.article-body h3 { font-size: var(--step-2); margin: 2.2rem 0 .8rem; }
.article-body blockquote { border-left: 3px solid var(--terra); padding-left: 1.5rem; margin: 1.8rem 0; font-family: var(--f-display); font-size: var(--step-2); line-height: 1.3; color: var(--ink); }
.article-body blockquote cite { display: block; font-family: var(--f-body); font-size: var(--step--1); font-style: normal; color: var(--muted); margin-top: .8rem; }
.article-lede { font-size: var(--step-2); font-family: var(--f-display); font-weight: 500; line-height: 1.3; color: var(--ink); margin-bottom: 1.8rem; }
.article-hero-img { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 2.5rem; }

/* form */
.form { display: grid; gap: 1.1rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px){ .form .row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: var(--step--1); font-weight: 600; }
.field input, .field select, .field textarea { font-family: var(--f-body); font-size: var(--step-0); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: .75em .9em; background: #fff; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--link-ink); border-color: var(--link-ink); }
.field textarea { min-height: 130px; resize: vertical; }
.map-ph { aspect-ratio: 4/3; border-radius: var(--radius-lg); }
.contact-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,1rem + 4vw,4rem); align-items: start; }
@media (max-width: 820px){ .contact-split { grid-template-columns: 1fr; } }

/* cta band */
.cta-band { background: var(--royal); color: var(--paper); border-radius: var(--radius-lg); padding: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: 1rem; }
.cta-band p { margin: 0 auto 2rem; color: rgba(250,246,240,.85); }
.cta-band .hero-actions { justify-content: center; }
/* mobile: stack action-group buttons full-width and tappable */
@media (max-width: 560px){
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* footer */
.site-footer { background: var(--navy); color: rgba(250,246,240,.78); padding-block: clamp(3rem,2rem + 3vw,4.5rem) 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }
.site-footer .fcol-title { color: #fff; font-family: var(--f-body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1rem; font-weight: 600; }
.site-footer a { color: rgba(250,246,240,.78); font-size: var(--step--1); }
.site-footer a:hover { color: #fff; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.footer-brand .brand { color: #fff; margin-bottom: 1rem; }
.footer-brand p { font-size: var(--step--1); color: rgba(250,246,240,.6); }
.footer-bottom { border-top: 1px solid rgba(250,246,240,.15); margin-top: 3rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .8rem; color: rgba(250,246,240,.74); }

/* proto banner */

/* ---- Full-bleed hero v2 + inline give widget ---- */
.hero-bleed { min-height: 88vh; display: flex; align-items: center; position: relative; overflow: hidden; color: #fff; }
.hero-bleed .bg { position: absolute; inset: 0; background: var(--navy); }
.hero-bleed .bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bleed .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,26,56,.82), rgba(10,26,56,.5) 50%, rgba(10,26,56,.18)); }
.hero-bleed-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: center; width: min(100% - 3rem, var(--container)); margin-inline: auto; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.hero-bleed-copy .eyebrow { margin-bottom: 1rem; }
.hero-bleed-copy h1 { color: #fff; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4rem); max-width: 18ch; line-height: 1.08; margin-bottom: 1.1rem; }
.hero-bleed-copy .lead { max-width: 40ch; }
.give-card { background: #fff; color: var(--ink); border-radius: 16px; padding: clamp(1.3rem, 1rem + 1vw, 1.7rem); max-width: 380px; width: 100%; margin-left: auto; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.give-toggle { display: flex; gap: 4px; background: var(--paper-2); border-radius: 10px; padding: 4px; margin-bottom: 1.1rem; }
.give-toggle button { flex: 1; border: 0; background: transparent; padding: .7em; border-radius: 8px; font-family: var(--f-body); font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); cursor: pointer; }
.give-toggle button.active { background: var(--navy); color: #fff; }
.give-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.give-amts { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.give-amts button { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: .85em .4em; font-family: var(--f-body); font-weight: 600; font-size: var(--step--1); color: var(--ink); cursor: pointer; }
.give-amts button.active { background: var(--navy); color: #fff; border-color: var(--navy); }
/* 5 presets + Other = a clean 3x2. Other used to span 2 columns, which left a
   hole in row 2 and pushed itself onto a ragged third row. */
.give-amts .give-other { color: var(--muted); }
.give-impact { font-size: var(--step--1); color: var(--ink-soft); margin: .9rem 0 1.1rem; }
.give-btn { width: 100%; justify-content: center; }
@media (max-width: 860px) {
  .hero-bleed { min-height: auto; }
  .hero-bleed-grid { grid-template-columns: 1fr; gap: 1.4rem; padding-block: clamp(1.6rem, 1rem + 3vw, 2.6rem); }
  .hero-bleed .scrim { background: linear-gradient(180deg, rgba(10,26,56,.4), rgba(10,26,56,.78)); }
  .give-card { margin-left: 0; max-width: none; }
}

/* A reviewer noted the give card covered the children's faces in the hero photo, and
   the faces are the whole point of the photo. Desktop only (mobile shows a solid navy
   hero, no photo). Two moves: shrink the card so it occupies less of the frame, and
   pull the photo's focal point left so the smiling faces sit clear of the card's
   right-hand column. It stays right-aligned and easy to find, just less dominant. */
@media (min-width: 861px) {
  .give-card { max-width: 336px; padding: 1.3rem 1.35rem; box-shadow: 0 14px 36px rgba(0,0,0,.26); }
  .hero-bleed .bg img { object-position: 30% center; }
}

/* The hero fallbacks further up belong to hero v1, but the v2 block re-declares
   .hero-bleed .bg at equal specificity below them, so they never applied and the
   phone hero fell back to flat navy. Restated here, after v2, so they win on
   source order. Same 1024w file the poster and preload use, so no extra fetch. */
@media (max-width: 760px){
  .hero-bleed .bg { background: var(--navy) url(../img/hh-group-outdoor-1024.webp) center/cover no-repeat; }
}
@media (prefers-reduced-motion: reduce){
  .hero-bleed .bg { background: var(--navy) url(../img/hh-group-outdoor-1024.webp) center/cover no-repeat; }
}

/* ---- Backward-compat shims (pages not yet migrated to v2 markup) ---- */
.hero-badge { margin-top: 1rem; font-size: var(--step--1); color: var(--muted); }
.hero-badge strong { font-family: var(--f-display); font-size: var(--step-2); color: var(--link-ink); display: block; line-height: 1; }
.audience { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem 1.2rem; }
@media (max-width:700px){ .audience { grid-template-columns: 1fr 1fr; } }
.aud { display: flex; flex-direction: column; gap: .3rem; border-top: 2px solid var(--navy); padding-top: 1rem; }
.aud:hover { text-decoration: none; }
.aud strong { font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); }
.aud span { font-size: var(--step--1); color: var(--muted); }
.aud .go { color: var(--link-ink); font-weight: 600; margin-top: .3rem; }
.tiers { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; }
@media (max-width:900px){ .tiers { grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .tiers { grid-template-columns: 1fr; } }
.tier { border-top: 2px solid var(--navy); padding-top: 1rem; }
.tier .amt { font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); color: var(--link-ink); }
.tier .what { font-size: var(--step--1); color: var(--ink-soft); margin-top: .3rem; }
/* ---- Open Door scholars ----------------------------------------------------
   Eight students from a 2.5-square-mile city are in college. That is the payoff of
   the whole organisation and it was rendering as five identical lines reading
   "Open Door Scholar", with the only varying part (the school) set smaller and
   greyer underneath, and the initial monogram hidden outright by display:none.

   So: the school leads, because the school is the achievement and the thing that
   differs. "Open Door Scholar" drops to a label. The monogram comes back as the
   visual anchor, which is also the most we can show: no student is named or
   pictured without a signed media release, and a single initial is not a name. */
.recipients { display: grid; gap: clamp(.9rem, .7rem + 1vw, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); margin-top: 1.6rem; }
/* Grid, not flex. As a flex row the school and the "Open Door Scholar" label became
   two side-by-side columns and both wrapped to three lines each: "University / of /
   Michigan" next to "Open / Door / Scholar". The monogram spans both rows so the two
   text lines stack against it. */
.recip { display: grid; grid-template-columns: auto 1fr; column-gap: .85rem;
  align-items: center; text-align: left;
  padding: .9rem 1rem; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); transition: transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) var(--ease-out); }
.recip .avatar { grid-column: 1; grid-row: 1 / span 2; }
.recip .school { grid-column: 2; grid-row: 1; }
.recip .name   { grid-column: 2; grid-row: 2; }
.recip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.recip .avatar { display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--spirit); color: #fff;   /* blue #345D9D on white text: 5.79:1 */
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.recip .school { font-family: var(--f-display); font-weight: 600;
  font-size: var(--step-0); color: var(--navy); line-height: 1.25; max-width: none; }
.recip .name { font-size: var(--step--1); color: var(--muted); max-width: none; }
.recip--more { background: transparent; border-style: dashed; }
.recip--more .avatar { background: var(--paper-3); color: var(--eyebrow-ink); }
.prog-card.feature { background: var(--navy); color: var(--paper); border: 0; border-radius: var(--radius-lg); padding: 1.8rem; }
.prog-card.feature h3 { color: #fff; }
.prog-card.feature p { color: rgba(250,246,240,.82); }
.prog-card.feature .ic { background: rgba(255,255,255,.12); color: var(--gold); }
.prog-card.feature .card-link { color: var(--gold); }
.subprog { display: grid; gap: 1rem; }
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,1rem + 4vw,4rem); align-items: center; }
.spotlight .media img, .spotlight .media .ph { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); }
@media (max-width:820px){ .spotlight { grid-template-columns: 1fr; } }
.partner-chip { font-family: var(--f-display); font-weight: 500; font-size: var(--step-1); color: var(--muted); }

/* utilities */
.text-muted { color: var(--muted); }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
/* ---- Measure guard ----
   Prose blocks that would otherwise inherit the full 1200px container.
   Applied at the system level so new pages inherit correct measure. */
:where(.section-head) p { max-width: var(--measure); }
:where(.section > .container) > p,
:where(.section > .container > .narrow) > p,
:where(.section > .container > .narrow) > ul li,
:where(.prose) p, :where(.prose) li { max-width: var(--measure); }
.section > .container > p.center, .lead.center { margin-inline: auto; }
/* Page heroes are not .section, so they need their own guard. */
:where(.page-hero > .container) > p { max-width: var(--measure-tight); }
.page-hero > .container > p.center { margin-inline: auto; }
.maxw { max-width: var(--measure); }
.maxw.center { margin-inline: auto; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }

/* ==========================================================================
   Motion + interaction layer (progressive enhancement, reduced-motion safe)
   Hidden/animated states are gated on html.js-motion so no-JS users see all.
   ========================================================================== */

/* image frames clip so inner photos can zoom without spilling */
.card-media, .feature .media, .story-lead .media, .spotlight .media, .hero-media, .zoomframe { overflow: hidden; }
.feature .media, .story-lead .media, .spotlight .media { border-radius: var(--radius-lg); }

/* always-on, GPU-cheap interactions */
.btn { transition: background .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out), transform .08s var(--ease-out), box-shadow .2s var(--ease-out); }
.btn--primary, .btn--donate { box-shadow: 0 2px 0 rgba(120,55,12,.25); }
.btn:active { transform: translateY(1px); }
.site-header { transition: box-shadow .25s var(--ease-out), background-color .25s var(--ease-out); }
.site-header.scrolled { box-shadow: 0 6px 22px rgba(16,32,56,.10); background: rgba(255,255,255,.96); }
.site-header.scrolled .nav { padding-block: .55rem; }
.brand-logo { transition: height .22s var(--ease-out); }
.site-header.scrolled .brand-logo { height: 34px; }
@media (max-width: 520px){ .site-header.scrolled .brand-logo { height: 32px; } }

@media (prefers-reduced-motion: no-preference) {
  /* soft page-load fade */
  html.js-motion body { animation: hh-pagein .6s var(--ease-out) both; }
  @keyframes hh-pagein { from { opacity: 0; } to { opacity: 1; } }

  /* scroll reveal (short + subtle; JS guarantees a full-opacity resting state) */
  html.js-motion .reveal { opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
  html.js-motion .reveal.in-view { opacity: 1; transform: none; }

  /* lazy photo fade-in */
  html.js-motion img.fade-img { opacity: 0; transition: opacity .7s var(--ease-out); }
  html.js-motion img.fade-img.loaded { opacity: 1; }

  /* hover: card lift + image zoom */
  .card, .tcard, .prog-card { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s var(--ease-out); }
  html.js-motion .card:hover, html.js-motion .tcard:hover { transform: translateY(-5px); }
  .card-media img, .feature .media img, .story-lead .media img, .spotlight .media img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
  .card:hover .card-media img, .feature .media:hover img, .story-lead .media:hover img, .spotlight .media:hover img, .zoomframe:hover img { transform: scale(1.045); }

  /* hero ken-burns (slow, subtle); parallax handled in JS on .hero-bleed .bg */
  .hero-bleed .bg img { animation: hh-kenburns 24s ease-out alternate infinite; transform-origin: 62% 38%; }
  @keyframes hh-kenburns { from { transform: scale(1.04); } to { transform: scale(1.14); } }
  .hero-bleed .bg { will-change: transform; }
}

/* ==========================================================================
   Playful child-friendly accents (restrained, reduced-motion safe)
   ========================================================================== */

/* hand-drawn squiggle under a key word */
.scribble { position: relative; display: inline-block; }
.scribble::after {
  content: ""; position: absolute; left: -3%; right: -3%; bottom: -0.16em; height: 0.32em;
  background-color: var(--scribble-color, var(--orange-deep)); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M4,10C40,2,64,14,100,9S164,3,196,10' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M4,10C40,2,64,14,100,9S164,3,196,10' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.hero-bleed .scribble, .section--ink .scribble, .section--spirit .scribble { --scribble-color: var(--gold); }

/* hand-drawn arrow pointing at a CTA */
/* hand-drawn arrows removed for cleaner alignment */

/* soft curved divider on full-bleed color bands */
.curve-top::before, .curve-bottom::after {
  content: ""; position: absolute; left: 0; right: 0; height: clamp(24px, 3.2vw, 52px);
  background-color: var(--curve-fill, var(--paper)); pointer-events: none; z-index: 2;
}
.curve-top { position: relative; }
.curve-bottom { position: relative; }
.curve-top::before { top: -1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0H1440V34C1080,84,360,84,0,34Z' fill='%23000'/%3E%3C/svg%3E") no-repeat top / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,0H1440V34C1080,84,360,84,0,34Z' fill='%23000'/%3E%3C/svg%3E") no-repeat top / 100% 100%;
}
.curve-bottom::after { bottom: -1px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,80H1440V46C1080,-4,360,-4,0,46Z' fill='%23000'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,80H1440V46C1080,-4,360,-4,0,46Z' fill='%23000'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

/* organic rounded blob behind an image accent */
.media--blob { position: relative; }
.feature .media--blob, .spotlight .media--blob, .hero-media.media--blob { overflow: visible; }
.media--blob::before {
  content: ""; position: absolute; z-index: -1; inset: auto -1.4rem -1.4rem auto; width: 62%; height: 70%;
  background: var(--terra-soft); border-radius: 64% 36% 56% 44% / 56% 48% 52% 44%; pointer-events: none;
}

/* vertical story timeline with a spine and dots (reuses .tl-item so it scroll-reveals) */
.story-line { position: relative; max-width: 720px; margin-inline: auto; padding-left: 2.4rem; border-left: 2px solid var(--paper-3); }
.story-line .tl-item { display: block; border: 0; padding: 0 0 clamp(2.2rem, 1.6rem + 2vw, 3.6rem) 0; position: relative; }
.story-line .tl-item:last-child { padding-bottom: 0; }
.story-line .tl-item::before { content: ""; position: absolute; left: calc(-2.4rem - 9px); top: .25rem; width: 16px; height: 16px; border-radius: 999px; background: var(--orange); box-shadow: 0 0 0 4px var(--paper); }
.story-line .tl-item .yr { font-family: var(--f-display); font-weight: 700; font-size: var(--step-2); color: var(--navy); line-height: 1.1; margin-bottom: .5rem; }
.story-line .tl-item p { color: var(--ink-soft); margin: 0; max-width: none; }
@media (max-width: 560px){ .story-line { padding-left: 1.6rem; } .story-line .tl-item::before { left: calc(-1.6rem - 9px); } }

/* friendly micro-interactions */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hh-wiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 70% { transform: rotate(5deg); } }
  @keyframes hh-bounce { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
  .prog-card:hover .ic, .inforow:hover .ic { animation: hh-wiggle .5s var(--ease-out); }
  .btn--primary:hover, .btn--donate:hover { animation: hh-bounce .45s var(--ease-out); }
}

/* ==========================================================================
   Rebalance: containment, tighter rhythm, contrast (v1.1)
   ========================================================================== */

/* darker muted text on light-blue tinted sections (WCAG AA) */
.section--tint { --muted: #44546A; }
.section--tint .text-muted, .section--tint .stat .label, .section--tint .aud-row .what, .section--tint .tl-item p { color: #36465A; }

/* contained stat band: left-aligned with heading, hairline dividers */
.stats { gap: 0; max-width: 1120px; margin-inline: auto; }
.stats .stat { flex: 1 1 190px; text-align: center; padding-inline: clamp(1rem, .5rem + 1.4vw, 2.4rem); }
.stats .stat .num { text-align: center; }
.stats .stat .label { margin-inline: auto; }
@media (min-width: 681px){ .stats > .stat + .stat { border-left: 1px solid var(--line); } }
.section--ink .stats > .stat + .stat { border-left-color: rgba(255,255,255,.16); }

/* compact bigstat band (70%, 93% moments) */
.section--ink:has(.bigstat) { padding-block: clamp(2.25rem, 1.75rem + 1.6vw, 3.5rem); }
.bigstat .n { font-size: clamp(3.4rem, 2.4rem + 7vw, 7.5rem); }

/* scholar roster -> contained panel, single-column hairline index (no empty cells) */
.roster { display: grid; grid-template-columns: 1fr; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: .2rem clamp(1.2rem, .9rem + 1vw, 1.8rem); }
.roster .r { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem .1rem; border-top: 1px solid var(--line); }
.roster .r:nth-child(1) { border-top: 0; }
.roster .r .nm { font-size: var(--step-0); font-weight: 700; color: var(--navy); }
.roster .r .sc { font-size: var(--step--1); color: var(--ink-soft); font-weight: 500; }
.roster .r .sc::before { content: "\2192\00a0"; color: var(--orange-deep); font-weight: 700; }

/* ---- Homepage stories supporting cards: contained white cards with imagery ---- */
.story-cards .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; box-shadow: var(--shadow-1); }
.story-cards .card .card-media { border-radius: 0; aspect-ratio: 16/10; }
.story-cards .card .card-body { padding: 1.15rem 1.35rem 1.4rem; }

/* ---- Impact section head: headline left, supporting line fills the right void ---- */
.impact-head { max-width: none; display: grid; grid-template-columns: 1.75fr 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: end; }
.impact-head h2 { margin-bottom: 0; font-size: clamp(1.7rem, 1.15rem + 1.7vw, 2.35rem); }
.impact-sub { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.5; }
@media (max-width: 760px){ .impact-head { grid-template-columns: 1fr; gap: 1rem; } }

/* ---- Family cost items: check badge to distinguish each ---- */
.cost-item { display: flex; align-items: flex-start; gap: .8rem; }
.cost-check { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--terra-soft); color: var(--eyebrow-ink); display: grid; place-items: center; font-weight: 800; font-size: .95rem; line-height: 1; margin-top: .15rem; }

/* ---- Photo avatars (real headshots) inside round/square avatar shells ---- */
.person .avatar img, .tcard .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.person .avatar:has(img), .tcard .avatar:has(img) { background: none; }

/* ---- Our Work featured robotics card: wide, two-column, fills the row ---- */
.prog-card.feature--wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 1rem + 2vw, 2.6rem); align-items: center; }
.prog-card.feature--wide .fw-main, .prog-card.feature--wide .fw-desc { display: flex; flex-direction: column; gap: .55rem; }
.prog-card.feature--wide .fw-main { align-items: flex-start; }
.prog-card.feature--wide .fw-desc .card-link { margin-top: .6rem; }
@media (max-width: 900px){ .prog-card.feature--wide { grid-column: span 2; } }
@media (max-width: 620px){ .prog-card.feature--wide { grid-column: span 1; grid-template-columns: 1fr; gap: 1rem; } }

/* ---- Stories index grid: center an orphan last row instead of a left gap ---- */
#storygrid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
#storygrid > .card { flex: 0 1 calc((100% - 2 * var(--gap)) / 3); }
@media (max-width: 900px){ #storygrid > .card { flex: 0 1 calc((100% - var(--gap)) / 2); } }
@media (max-width: 620px){ #storygrid > .card { flex: 0 1 100%; } }

/* ---- Dark-band legibility: secondary text + cards must read on navy / royal / spirit ---- */
.section--ink .text-muted, .section--spirit .text-muted,
.section--ink .card p, .section--spirit .card p,
.section--ink .tier .what, .section--spirit .tier .what { color: rgba(255,255,255,.86); }
.section--ink .trust-badge, .section--spirit .trust-badge { color: rgba(255,255,255,.92); }
.section--ink .card strong, .section--spirit .card strong { color: #fff; }
.section--ink .card, .section--spirit .card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-3); }
.section--ink .tier, .section--spirit .tier { border-top-color: rgba(255,255,255,.30); }
.section--ink .tier .amt, .section--spirit .tier .amt { color: var(--gold); }

/* ---- Nav: Get Involved is a dropdown parent; Donate remains the filled CTA ---- */

/* ---- Language switch in the header nav ---- */
.lang-nav { display: flex; align-items: center; }
.lang-nav .lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.lang-nav .lang-toggle button { min-height: 24px; /* WCAG 2.2 SC 2.5.8 floor; measured 22px at 1280/1440 */ border: 0; background: transparent; font-family: var(--f-body); font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .32rem .62rem; cursor: pointer; color: var(--muted); line-height: 1; }
.lang-nav .lang-toggle button.active { background: var(--navy); color: #fff; }

/* donor-trust fineprint under give CTAs */
.give-fineprint { margin: .7rem 0 0; text-align: center; font-size: .75rem; color: var(--muted); letter-spacing: .01em; }

/* mobile sticky dual CTA (phones only) */
.mobile-cta { display: none; }
@media (max-width: 760px){
  .mobile-cta { display: flex; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(16,32,56,.12); }
  .mobile-cta .btn { flex: 1; text-align: center; padding: .85rem .5rem; }
  body.has-mobile-cta { padding-bottom: 76px; }
}

/* homepage trust strip (donor credibility) */
.trust-strip { margin-top: clamp(1.6rem, 1rem + 2vw, 2.4rem); padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; font-size: var(--step--1); color: var(--muted); text-align: center; }
.trust-strip b { color: var(--ink-soft); font-weight: 600; }
.cta-band .cta-fineprint { color: rgba(255,255,255,.82); }

/* warm community proof toast (bottom-left, desktop) */
@media (max-width: 760px){ .proof-toast { display: none; } }
@media (prefers-reduced-motion: reduce){ .proof-toast { transition: opacity .3s var(--ease-out); transform: none; } }

/* footer social icons */
.footer-social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.footer-social a { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.10); color: #fff; transition: background .18s var(--ease-out); }
.footer-social a:hover { background: var(--orange-deep); }

/* community proof strip */
.community-strip { background: var(--navy); border-radius: var(--radius-lg); padding: clamp(1.4rem,1rem + 2vw,2rem) clamp(1.5rem,1rem + 2vw,2.6rem); color: #fff; display: flex; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap; }
.community-strip .cs-head { font-family: var(--f-display); font-weight: 600; font-size: var(--step-1); max-width: 30ch; }
.community-strip .cs-nums { display: flex; gap: 1.6rem 2rem; flex-wrap: wrap; margin-left: auto; }
.community-strip .cs-n b { font-family: var(--f-display); font-weight: 700; font-size: var(--step-2); color: var(--gold); display: block; line-height: 1; }
.community-strip .cs-n span { font-size: var(--step--1); color: rgba(255,255,255,.82); }
@media (max-width: 620px){ .community-strip .cs-nums { margin-left: 0; gap: 1.2rem 1.6rem; } }
@media (max-width: 760px){ .lang-nav { padding: .7rem 0; } }

/* ---- Two ways in: family + donor path cards ---- */
.path-cards .path-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; box-shadow: var(--shadow-1); }
.path-cards .card-media { aspect-ratio: 16/9; border-radius: 0; }
.path-cards .path-bd { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.path-cards .path-bd h3 { font-size: var(--step-2); }
.path-cards .path-bd p { color: var(--ink-soft); font-size: var(--step-0); }
.path-cards .path-bd .card-link { margin-top: .4rem; color: var(--link-ink); font-weight: 600; font-size: var(--step--1); }
.path-cards .path-card--give { background: var(--navy); border-color: var(--navy); }
.path-cards .path-card--give h3 { color: #fff; }
.path-cards .path-card--give p { color: rgba(255,255,255,.88); }
.path-cards .path-card--give .card-link { color: var(--gold); }

/* ---- The gap we close: comparison chart ---- */
.gap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.gap-src { font-size: var(--step--1); color: var(--muted); margin-top: 1.1rem; }
/* Two distinct figures, not a bar comparison. A reviewer noted the old two-bar chart
   put non-comparable metrics side by side (district proficiency vs our reading growth),
   which implies a direct comparison that is not valid. The numbers now stand as two
   separate facts in different units, 1 in 8 and 80%, so they do not read as a
   head-to-head. The district reality is muted, our result is emphasized on the tint. */
.gap-figures { display: grid; gap: 1rem; }
.gap-fig { padding: clamp(1.2rem, 1rem + 1vw, 1.7rem) clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.gap-fig--result { background: var(--paper-2); border-color: transparent; }
.gap-fig-n { font-family: var(--f-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); color: var(--numeral-ink); letter-spacing: -.02em; }
.gap-fig-n--muted { color: var(--muted); }
.gap-fig-l { margin: .55rem 0 0; color: var(--ink-soft); font-weight: 600; font-size: var(--step-0); max-width: 34ch; }

/* ---- Justice rail (/epa) ---------------------------------------------------
   Six numbered cards in a grid read as six unrelated facts. They are not: they are
   one sequence of decisions, each one following from the last, which is the actual
   argument of the page ("this has authors"). A vertical rail says that; a grid
   cannot. The numerals come from a CSS counter on a real <ol>, so the sequence is
   in the markup and not just in the styling. */
.jrail { list-style: none; margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 0; padding: 0;
  max-width: 780px; counter-reset: jr; }
.jrail-i { position: relative; counter-increment: jr;
  padding-left: clamp(3.4rem, 2rem + 5vw, 5.6rem);
  padding-bottom: clamp(1.8rem, 1.4rem + 1.6vw, 3rem); }
.jrail-i:last-child { padding-bottom: 0; }

/* The numeral. Navy on white is 12.21:1, so it can carry this much weight. */
.jrail-i::before { content: counter(jr, decimal-leading-zero);
  position: absolute; left: 0; top: -.12em;
  font-family: var(--f-display); font-weight: 700; line-height: 1;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  color: var(--navy); opacity: .22; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }

/* The rail itself, running between numerals rather than through them. */
.jrail-i::after { content: ""; position: absolute;
  left: clamp(1.15rem, .75rem + 1.1vw, 1.7rem); top: clamp(2.3rem, 1.7rem + 2.4vw, 3.4rem);
  bottom: .2rem; width: 2px; background: rgba(28,53,94,.14); }
.jrail-i:last-child::after { display: none; }

.jrail-pill { display: inline-block; font-size: var(--step--1); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--eyebrow-ink);
  margin-bottom: .35rem; max-width: none; }
.jrail-h { margin: 0 0 .45rem; max-width: 28ch; }
.jrail-p { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

@media (max-width: 620px) {
  .jrail-i { padding-left: 2.9rem; }
  .jrail-i::before { font-size: 1.65rem; opacity: .26; }
  .jrail-i::after { left: .82rem; top: 2rem; }
}

/* ---- Churrobots band -------------------------------------------------------
   Full-bleed photo with the growth figure set enormous over it. This is the one
   place on the homepage that breaks the container on purpose: EPA's only FRC team
   is the single most concrete brag the organisation has, and it was previously a
   half-width photo in the same eyebrow/h2/grid shape as everything else.

   Legibility over photography is the whole risk here, so the scrim is a solid navy
   base plus a gradient rather than a flat tint: even if the image fails to load, or
   loads a frame late, the text is never white-on-white. Type stays white and gold,
   both of which clear AA on navy (gold is 6.95:1). No orange text: every HH orange
   fails even the 3:1 large-text floor. */
.robo-band { position: relative; isolation: isolate; background: var(--navy);
  padding: clamp(3.5rem, 2.5rem + 5vw, 7rem) 0; overflow: hidden; }
.robo-bg { position: absolute; inset: 0; z-index: -2; display: block; }
.robo-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.robo-band::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(28,53,94,.94) 0%, rgba(28,53,94,.86) 45%, rgba(28,53,94,.58) 100%),
    linear-gradient(to top, rgba(28,53,94,.75) 0%, rgba(28,53,94,0) 55%); }
.robo-inner { position: relative; max-width: 1080px; }
.robo-eyebrow { color: var(--gold); max-width: none; }

/* The figure. Deliberately oversized: it is the loudest number on the page and it
   is allowed to be, because it is a real one (21 to 36 in a single year). */
.robo-figure { font-family: var(--f-display); font-weight: 700; line-height: .9;
  /* Centre, not baseline: at .48em the arrow sat on the baseline of a 9rem digit,
     which put it visually near the floor of the number rather than between the two. */
  margin: .35rem 0 .1rem; display: flex; align-items: center; gap: clamp(.4rem, 1.5vw, 1rem);
  font-size: clamp(3.4rem, 1.5rem + 11vw, 9rem); max-width: none; letter-spacing: -.02em; }
.robo-n { color: #fff; }
.robo-n--to { color: var(--gold); }
.robo-arrow { color: rgba(255,255,255,.55); font-size: .48em; line-height: 1; }
.robo-cap { color: rgba(255,255,255,.86); font-weight: 600; font-size: var(--step-0);
  margin: 0 0 clamp(1.2rem, 1rem + 1vw, 2rem); max-width: 34ch;
  /* Short caption: balance the lines so a wrap never leaves one word alone. */
  text-wrap: balance; }
/* The 34ch cap held this to ~426px inside a 1080px band, seven pixels short of
   the English line and far short of the Spanish one, so "jump" fell to its own
   line on a band with room to spare. Widened only where the container can take
   it. No nowrap, so narrow screens still wrap naturally. */
@media (min-width: 1024px) { .robo-cap { max-width: 64ch; } }
.robo-h { color: #fff; margin: 0 0 .6rem; max-width: 20ch; }
.robo-lead { color: rgba(255,255,255,.9); max-width: 52ch; }
.robo-band .btn--light { margin-top: .4rem; }
@media (max-width: 860px) {
  .robo-band::before { background:
    linear-gradient(180deg, rgba(28,53,94,.88) 0%, rgba(28,53,94,.93) 100%); }
  .robo-figure { font-size: clamp(3.2rem, 2rem + 12vw, 6rem); }
}

@media (max-width: 860px){ .gap-grid { grid-template-columns: 1fr; } }

/* ---- Whole child: pillars + woven faith line (on navy) ---- */
.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.6rem); }
.pillar { border-top: 2px solid rgba(255,255,255,.28); padding-top: 1.1rem; }
.pillar .pic { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.10); color: var(--gold); display: grid; place-items: center; margin-bottom: .9rem; }
.pillar .pic svg { width: 22px; height: 22px; }
.pillar h3 { color: #fff; font-size: var(--step-2); margin-bottom: .4rem; }
.pillar p { color: rgba(255,255,255,.84); font-size: var(--step-0); }
.woven { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); color: var(--gold); max-width: 24ch; line-height: 1.2; }
@media (max-width: 720px){ .pillars { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ---- The long walk: multi-year journey ---- */
.journey { display: grid; grid-template-columns: repeat(6,1fr); gap: clamp(1rem, .5rem + 1.4vw, 1.8rem); }
.jstep { border-top: 2px solid var(--orange); padding-top: 1rem; }
.jnum { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--terra-soft); color: var(--eyebrow-ink); font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .7rem; }
.jstage { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--link-ink); margin-bottom: .3rem; }
.jstep h3 { font-size: var(--step-0); font-weight: 600; letter-spacing: 0; margin-bottom: .4rem; }
.jstep p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.45; margin-bottom: .6rem; }
.jtag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--navy); }
.jtag--f { background: var(--terra-soft); color: var(--eyebrow-ink); }
@media (max-width: 1000px){ .journey { grid-template-columns: repeat(3,1fr); row-gap: 1.8rem; } }
@media (max-width: 620px){ .journey { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px){ .journey { grid-template-columns: 1fr; } }
/* Mobile: the six lifecycle steps become one horizontal scroll-snap strip instead of six
   stacked blocks. Placed after the grid rules above so display:flex wins on order (Trap 4/5).
   Cuts roughly 2,500px off the mobile homepage. User-driven scroll, so no reduced-motion gate needed. */
@media (max-width: 700px){
  .journey { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory;
             scroll-padding-left: .25rem; gap: 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .journey::-webkit-scrollbar { display: none; }
  .journey > .jstep { flex: 0 0 78%; scroll-snap-align: start; }
}

/* audience selector -> contained card, alternating rows, tighter */
.audience-list { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; max-width: 920px; }
.audience-list .aud-row { padding: 1rem clamp(1.1rem, .8rem + 1vw, 1.6rem); border-top: 1px solid var(--line); }
.audience-list .aud-row:first-child { border-top: 0; }
.audience-list .aud-row:last-child { border-bottom: 0; }
.audience-list .aud-row:nth-child(even) { background: var(--paper-2); }
.audience-list .aud-row .who { font-size: var(--step-1); }

/* keep heading blocks from stranding across very wide fields */
.section-head { max-width: var(--measure); }

/* ==========================================================================
   Elevation pass: tokens, depth, focus/a11y, photo treatment, signatures
   ========================================================================== */
:root {
  /* modular spacing scale */
  --space-1: .375rem; --space-2: .625rem; --space-3: 1rem; --space-4: 1.5rem;
  --space-5: 2rem; --space-6: 3rem; --space-7: 4rem; --space-8: 6rem;
  /* radius scale */
  --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-pill: 999px;
  /* elevation scale */
  --shadow-1: 0 1px 2px rgba(16,32,56,.06), 0 2px 4px rgba(16,32,56,.05);
  --shadow-2: 0 6px 18px rgba(16,32,56,.09), 0 2px 6px rgba(16,32,56,.05);
  --shadow-3: 0 22px 48px rgba(16,32,56,.18);
}

/* consistent elevation on raised surfaces */
.card-media { box-shadow: var(--shadow-2); }
.panel { box-shadow: var(--shadow-1); }
.give-card { box-shadow: var(--shadow-3); }

/* editorial feature photos: a soft, deliberate lift */
.feature .media, .feature .media img,
.story-lead .media, .spotlight .media,
.two-col .media img, .two-col figure img,
.hero-impact-media img, .letter-card img { box-shadow: var(--shadow-3); }
.media.duotone img { box-shadow: var(--shadow-3); }

/* Stories: full-archive CTA card (fills the 6th cell) */
.card--cta { background: var(--navy); color: #fff; border-radius: var(--radius-lg); justify-content: center; box-shadow: var(--shadow-2); }
.card--cta .card-body { padding: clamp(1.5rem, 1rem + 2vw, 2.2rem); }
.card--cta h3 { color: #fff; }
.card--cta p { color: rgba(255,255,255,.85); }
.card--cta .card-link { color: var(--gold); margin-top: .6rem; }
.pill--ghost { background: rgba(255,255,255,.16); color: #fff; }

/* Corporate 'ways to partner' numbered cards */
.way-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, .6rem + 1.5vw, 1.6rem); }
@media (max-width: 640px){ .way-grid { grid-template-columns: 1fr; } }
.way-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-3); padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); box-shadow: var(--shadow-1); border-top: 4px solid var(--terra); transition: box-shadow .22s var(--ease-out), transform .22s var(--ease-out); }
.way-card:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); }
.way-card .n { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1; color: var(--numeral-ink); display: block; }
.way-card .pill { margin: .7rem 0 .2rem; }
.way-card h3 { font-size: var(--step-1); margin: .35rem 0 .4rem; }
.way-card p { color: var(--ink-soft); margin: 0; }

/* About hero map (right column, vertically centered with the copy) */
.about-hero { align-items: center; }
.hero-map { margin: 0; }
.hero-map iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); display: block; background: var(--paper-2); }
.hero-map figcaption { margin-top: .7rem; font-size: var(--step--1); color: var(--muted); }
.site-header.scrolled { box-shadow: var(--shadow-2); }
.card { transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s var(--ease-out); }
.card:hover { box-shadow: var(--shadow-2); }
.btn { box-shadow: none; }
.btn--primary, .btn--donate { box-shadow: 0 2px 0 rgba(120,55,12,.22); }
.btn--primary:active, .btn--donate:active, .btn--light:active, .btn--ghost:active { transform: translateY(1px); }

/* focus-visible everywhere (a11y) */
:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 2px; border-radius: 5px; }
.btn:focus-visible, .nav-links a:focus-visible, .footer-links a:focus-visible, .card-link:focus-visible, .textlink:focus-visible, .aud-row:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.section--ink :focus-visible, .hero-bleed :focus-visible, .cta-band :focus-visible, .section--spirit :focus-visible, .give-promo :focus-visible { outline-color: var(--gold); }

/* skip-to-content */
.skip-link { position: fixed; left: 14px; top: -64px; z-index: 200; background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-1); font-weight: 600; box-shadow: var(--shadow-2); transition: top .16s var(--ease-out); }
.skip-link:focus { top: 14px; text-decoration: none; }

/* consistent photo treatment: uniform rounding + optional navy duotone */
.card-media, .feature .media, .story-lead .media, .spotlight .media, .hero-media { border-radius: var(--r-3); }
.duotone { position: relative; }
.duotone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(25,57,105,.04), rgba(25,57,105,.12)); }

/* slim sticky Give bar (desktop), slides in after the hero */
/* The give promo is a normal section now, not a fixed bar. Compact by design:
   it sits between two real sections and must not read as an interruption. */
.give-promo { background: var(--navy); }
.give-promo-inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; }
.give-promo .msg { color: #fff; font-weight: 600; font-size: var(--step-0); margin: 0;
  max-width: none; }
.give-promo .msg b { color: var(--gold); }
@media (max-width: 700px) {
  .give-promo-inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* SIGNATURE 1: full-bleed photo band with overlaid stat or pull-quote */
.photoband { position: relative; min-height: clamp(300px, 44vh, 480px); display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; }
/* <picture> wraps the <img> for next-gen sources; it must not affect layout */
picture { display: contents; }
.photoband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photoband .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,32,56,.55), rgba(16,32,56,.74)); }
.photoband .inner { position: relative; width: min(100% - 3rem, 760px); padding-block: var(--space-7); }
.photoband .pq { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3rem); line-height: 1.18; color: #fff; }
.photoband .pq .scribble { --scribble-color: var(--gold); }
.photoband cite { display: block; font-style: normal; font-size: var(--step--1); color: rgba(255,255,255,.82); margin-top: var(--space-3); text-transform: uppercase; letter-spacing: .08em; }

/* SIGNATURE 2: asymmetric feature, image bleeds to a viewport edge */
.feature-bleed { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
.feature-bleed .media { overflow: hidden; }
.feature-bleed .media img { width: 100%; aspect-ratio: 5/4; object-fit: cover; display: block; }
.feature-bleed.bleed-left .media { margin-left: calc(50% - 50vw); border-radius: 0 var(--r-3) var(--r-3) 0; }
.feature-bleed.bleed-left .media img { margin-left: auto; }
@media (max-width: 860px){
  .feature-bleed { grid-template-columns: 1fr; gap: var(--space-4); }
  .feature-bleed.bleed-left .media { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; }
}

/* SIGNATURE 3: bento grid — one material (light-blue tiles), one accent (the photo),
   one number color. Tiles fill the grid with no holes: row1 = 40[2] 100% 8, row2 = 218 photo[3]. */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.bento .tile { background: var(--paper-2); border-radius: var(--r-3); padding: clamp(1.2rem, 1rem + 1vw, 1.7rem); display: flex; flex-direction: column; justify-content: center; min-height: 138px; }
.bento .tile .n { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 1; color: var(--link-ink); }
.bento .tile .l { color: var(--ink-soft); margin-top: var(--space-2); font-size: var(--step--1); }
.bento .tile--wide { grid-column: span 2; }
.bento .tile--3 { grid-column: span 3; }
.bento .tile--photo { padding: 0; overflow: hidden; position: relative; min-height: 200px; }
.bento .tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px){ .bento { grid-template-columns: 1fr 1fr; } .bento .tile--wide { grid-column: span 1; } .bento .tile--3 { grid-column: span 2; } }
@media (max-width: 440px){ .bento { grid-template-columns: 1fr; } .bento .tile--wide, .bento .tile--3 { grid-column: auto; } }

/* recurring curved-divider motif: also apply to spirit (royal) bands */
.section--spirit.curve-top, .section--spirit.curve-bottom { position: relative; }

/* ---- Preview password gate (branded) ---- */
@keyframes hhshake { 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(5px)} 50%{transform:translateX(-7px)} }

/* ============ Article / blog template (built for scanning, no photos needed) ============ */
/* The Resources hub and the 12 category pages wrap in .wrap. This lived ONLY in
   their per-file inline <style>, so deleting that during the un-fork (Trap 4) left
   13 pages with no container: content ran flush to the viewport edge. Recovered
   verbatim from c6cd5fb. Ported here, where it belongs. */
.wrap { max-width: 900px; margin-inline: auto; padding: clamp(1.4rem, 1rem + 2vw, 2.6rem) 1.25rem clamp(3rem, 2rem + 3vw, 5rem); }

/* Hub + category page classes. These lived ONLY in the per-file inline <style>, so
   the un-fork (Trap 4) deleted them and left 13 pages unstyled: no header spacing,
   and the category article lists lost their rules entirely. Recovered from c6cd5fb.
   --terra-deep is now a fill-only token, so text accents are repointed to the
   retired-colour standard (charcoal eyebrows, blue links).
   .catgrid/.catcard are deliberately NOT ported: the rebuilt hub replaced them and
   nothing uses them any more. */
.page-eyebrow { font-family: var(--f-body); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow-ink); }
.page-title { font-family: var(--f-display); font-weight: 700; color: var(--navy); font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem); line-height: 1.1; margin: .4rem 0 .6rem; }
.page-intro { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--ink-soft); max-width: var(--measure); margin: 0 0 2.2rem; }
.postcard { border-top: 1px solid var(--line); padding: 1.2rem 0; }
.postcard h3 { font-family: var(--f-display); font-size: 1.28rem; margin: 0 0 .35rem; line-height: 1.25; }
.postcard h3 a { color: var(--navy); text-decoration: none; }
.postcard h3 a:hover { color: var(--link-ink); }
.postcard p { color: var(--ink-soft); font-size: 1rem; margin: 0 0 .5rem; line-height: 1.6; max-width: var(--measure); }
.postcard .rl { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--link-ink); text-decoration: none; }
.postcard .rl:hover { text-decoration: underline; }

.article-wrap { max-width: 760px; margin-inline: auto; padding: clamp(1.4rem,1rem + 2vw,2.6rem) 1.25rem clamp(3rem,2rem + 3vw,5rem); }
.article-eyebrow { font-family: var(--f-body); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--link-ink); }
.article-eyebrow a { color: inherit; }
.article-title { font-family: var(--f-display); font-weight: 700; color: var(--navy); font-size: clamp(2rem,1.5rem + 2.4vw,3.1rem); line-height: 1.12; letter-spacing: -.01em; margin: .5rem 0 .7rem; text-wrap: balance; }
.article-meta { font-size: var(--step--1); color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; margin-bottom: 1.6rem; }
.article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); opacity: .6; }
.article-lead { font-size: clamp(1.2rem,1.05rem + .6vw,1.4rem); line-height: 1.55; color: var(--ink); font-weight: 500; margin: 0 0 1.8rem; }

.article-body { font-size: clamp(1.06rem,1rem + .25vw,1.16rem); line-height: 1.75; color: var(--ink-soft); }
.article-body > p { margin: 0 0 1.25rem; max-width: 68ch; }
.article-body > p:first-of-type::first-letter { font-family: var(--f-display); font-weight: 700; color: var(--navy); float: left; font-size: 3.1em; line-height: .82; padding: .06em .12em 0 0; }
.article-body h2 { font-family: var(--f-display); color: var(--navy); font-size: clamp(1.5rem,1.25rem + 1vw,2rem); line-height: 1.2; margin: 2.4rem 0 .9rem; }
.article-body h3 { color: var(--navy); font-size: var(--step-1); margin: 1.8rem 0 .6rem; }
.article-body strong { color: var(--ink); }
.article-body a:not(.btn) { color: var(--link-ink); text-decoration: underline; text-underline-offset: 2px; }

/* "Short version" scan box */
.keybox { background: var(--paper-2); border-radius: var(--radius-lg); padding: 1.2rem 1.4rem; margin: 0 0 2rem; }
.keybox .k-h { font-family: var(--f-body); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); margin: 0 0 .6rem; }
.keybox ul { margin: 0; padding-left: 1.1rem; }
.keybox li { margin: .35rem 0; color: #36465A; font-size: var(--step-0); line-height: 1.5; }

/* Pull quote (breaks the column) */
.pullquote { font-family: var(--f-display); font-weight: 600; color: var(--navy); font-size: clamp(1.5rem,1.2rem + 1.4vw,2.15rem); line-height: 1.28; margin: 2.2rem 0; padding: .2rem 0 .2rem 1.3rem; border-left: 5px solid var(--orange); text-wrap: balance; }

/* Big stat callouts */
.statcallout { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 1rem; margin: 2.2rem 0; }
.statcallout .s { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 1.3rem 1.2rem; text-align: center; }
.statcallout .s .n { font-family: var(--f-display); font-weight: 700; color: var(--gold); font-size: clamp(2rem,1.5rem + 1.6vw,2.8rem); line-height: 1; }
.statcallout .s .l { display: block; margin-top: .5rem; font-size: var(--step--1); color: rgba(255,255,255,.82); line-height: 1.4; }

/* Inline mini-CTA between sections */
.inline-cta { margin: 2.2rem 0; padding: 1rem 1.2rem; background: var(--terra-soft); border-radius: var(--radius); font-size: var(--step-0); color: var(--ink); }
.inline-cta a { font-weight: 700; color: var(--link-ink); }

/* End CTA block (buttons: primary + contact + donate) */
.article-cta { margin: 2.8rem 0 0; background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: clamp(1.6rem,1.2rem + 2vw,2.6rem); text-align: center; }
.article-cta h2 { font-family: var(--f-display); color: #fff; font-size: clamp(1.6rem,1.3rem + 1.2vw,2.2rem); line-height: 1.15; margin: 0 0 .6rem; }
.article-cta p { color: rgba(255,255,255,.86); max-width: 46ch; margin: 0 auto 1.3rem; font-size: var(--step-0); line-height: 1.55; }
.article-cta .cta-btns { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

.article-sources { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); line-height: 1.5; }
.article-sources h3 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .5rem; font-weight: 700; }
.article-sources a { color: var(--muted); word-break: break-word; }
@media (max-width:600px){ .article-body > p:first-of-type::first-letter { font-size: 2.6em; } }

/* WCAG AA contrast fixes: text on blue/tinted panels */
.section--spirit .quote cite { color: rgba(255,255,255,.85); }  /* was --muted (1.42:1 on royal) */
.cta-band .eyebrow { color: #fff; }  /* was --gold (3.74:1 on royal); white passes and matches band h2 */


/* ==========================================================================
   Article components, ported out of the 253 per-file inline <style> blocks
   (Trap 4). These were the only classes the article template used that did not
   already exist here. Everything else was a duplicate of rules above.
   ========================================================================== */
.related{margin:2.6rem 0 0;padding:1.4rem 1.5rem;background:var(--paper-2);border-radius:var(--radius-lg)}
.related h2{font-family:var(--f-display);color:var(--navy);font-size:1.3rem;margin:0 0 .7rem}
.related ul{margin:0 0 .8rem;padding-left:1.1rem}
.related li{margin:.45rem 0;line-height:1.4}
.related a{color:var(--link-ink);font-weight:600}
.related .more{margin:.4rem 0 0;font-size:.9rem}
.doblock{margin:2.2rem 0;display:grid;gap:1rem}
.doblock .card{border-radius:var(--radius-lg);padding:1.2rem 1.3rem;border:1.5px solid var(--line)}
.doblock .card.do{background:#F0F7F1;border-color:#BFE0C4}
.doblock .card.dont{background:#FBF0EC;border-color:#F0CDBE}
.doblock .card.do .tag{color:#2E7D46}
.doblock .card.dont .tag{color:#B23A1E}
.doblock .card p{margin:0;color:var(--ink-soft);font-size:1.02rem;line-height:1.6}
.article-note{margin:2.2rem 0 0;font-size:.9rem;color:var(--muted);line-height:1.6;font-style:italic}
.doblock .card .tag{font-family:var(--f-body);font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;display:block;margin:0 0 .35rem}

/* ---- Give hero (widget above the fold, headline beside it) ---- */
.page-hero--give { padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.give-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.give-hero-copy h1 { max-width: 15ch; }
.give-hero-copy p { max-width: var(--measure-tight); margin-top: 1rem; }
@media (max-width: 880px){ .give-hero { grid-template-columns: 1fr; } }
/* Running total above the button (St. Jude). Empty until an amount is chosen. */
.give-total { font-family: var(--f-body); font-weight: 600; font-size: var(--step--1); color: var(--navy); text-align: center; margin: .9rem 0 .5rem; min-height: 1.2em; }
/* The value proposition, restated at the anxiety moment: right under the button. */
.give-note { font-size: var(--step--1); color: var(--ink-soft); text-align: center; margin-top: .8rem; line-height: 1.5;
  /* Line 122 opts this out of the global prose measure. It is a centered note, but it runs
     long enough to hit 84 chars/line at 768px, so cap and re-center it. */
  max-width: var(--measure); margin-left: auto; margin-right: auto; }
/* A 55% opacity button reads as broken, not as "pick an amount first". Keep it
   unclickable, make it look like a deliberate resting state. */
.give-btn.is-disabled { opacity: 1; background: var(--paper-2); color: var(--navy);
  border: 1.5px solid var(--line); box-shadow: none; pointer-events: none; }

/* ---- Volunteer intake form ---- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(.8rem, .5rem + 1vw, 1.2rem); }
@media (max-width: 560px){ .field-row { grid-template-columns: 1fr; } }
.form-thanks { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--radius); background: #EAF4EC; border: 1px solid #BFE0C4; color: #24603A; font-weight: 600; }
.form-note { margin: .2rem 0 1rem; }

/* ---- Ways to give: expandable explainers ----
   "Crypto" or "Stock gift" as a bare label assumes the donor already knows what
   it is and why it might be better for them. Native <details> so it works with
   no JS and is keyboard/screen-reader accessible for free. */
/* Single column on purpose. In a 2-up grid, opening one card leaves a hole the
   height of the expanded panel in the other column, because grid rows align to
   the tallest item. A disclosure list reads as a list. */
.ways-list { display: grid; gap: .7rem; max-width: 820px; }
.way { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); }
.way:hover { border-color: var(--light-blue); box-shadow: 0 8px 22px rgba(16,32,56,.07); }
.way[open] { border-color: var(--royal); box-shadow: 0 10px 26px rgba(16,32,56,.09); }
.way summary { cursor: pointer; list-style: none; padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.way summary::-webkit-details-marker { display: none; }
.way summary:focus-visible { outline: 3px solid var(--link-ink); outline-offset: -3px; }
.way .way-t { display: flex; flex-direction: column; gap: .15rem; }
.way .way-t h3 { font-family: var(--f-display); font-size: var(--step-1); color: var(--navy); margin: 0; line-height: 1.2; }
.way .way-sub { font-size: var(--step--1); color: var(--muted); }
/* +/- affordance: it must look openable before it is opened */
.way .way-x { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--paper-2); position: relative; transition: background .18s var(--ease-out), transform .18s var(--ease-out); }
.way .way-x::before, .way .way-x::after { content: ""; position: absolute; inset: 50% 7px auto 7px; height: 2px; background: var(--navy); transform: translateY(-1px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.way .way-x::after { transform: translateY(-1px) rotate(90deg); }
.way[open] .way-x { background: var(--navy); }
.way[open] .way-x::before, .way[open] .way-x::after { background: #fff; }
.way[open] .way-x::after { opacity: 0; }
.way-body { padding: 0 1.25rem 1.25rem; }
.way-body p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.65; margin: 0 0 .85rem; max-width: var(--measure); }
.way-body .way-note { background: var(--paper-2); border-radius: var(--radius); padding: .7rem .9rem; font-size: var(--step--1); color: var(--navy); }
/* ---- Ways to give: tiers and badges ---------------------------------------
   There were ten giving methods in one flat list with every panel collapsed, so
   roughly 600 words explaining how each one works were invisible. A donor saw ten
   bare headings and had to click ten times to learn anything, which is the opposite
   of what a page called "ways to give" is for. "Give once" also looked identical to
   "Supplies and in-kind gifts", so the two paths that cover almost everyone carried
   no more weight than the long tail.

   Three tiers now, the first two panels open so the pattern is obvious and the
   primary copy is read rather than clicked, and a badge on the six methods where
   there is a concrete reason to prefer them. */
.way-group + .way-group { margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); }
.way-group-t { font-family: var(--f-display); font-weight: 600; font-size: var(--step-1);
  color: var(--navy); margin: 0 0 .15rem; max-width: none; }
.way-group-d { font-size: var(--step--1); color: var(--muted); margin: 0 0 .8rem;
  max-width: 56ch; }
.way-group .ways-list, .way-group > .way + .way { margin-top: .7rem; }
.way-group > .way { margin-top: .7rem; }
.way-group > .way:first-of-type { margin-top: 0; }

/* Badges sit beside the heading, so the summary row needs to wrap on narrow screens
   rather than squeeze the title. */
.way .way-t { flex-wrap: wrap; align-items: baseline; }
.way-badge { display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: .2rem .5rem;
  border-radius: 999px; margin-left: .5rem; white-space: nowrap; max-width: none; }
/* All four measured on their own background, not the card's. */
.badge--best { background: var(--navy);      color: #fff; }            /* 12.21:1 */
.badge--x2   { background: var(--spirit);    color: #fff; }            /* 6.57:1  */
.badge--tax  { background: var(--paper-3);   color: var(--eyebrow-ink); }
.badge--free { background: var(--paper-2);   color: var(--numeral-ink); }

/* Deliberately NOT forcing the badge onto its own line on narrow screens. Doing that
   added roughly 30px to all ten summary rows, about 300px of page, to reposition six
   short labels. Letting the flex row wrap only where it actually needs to costs
   nothing on the eight that fit. */
@media (max-width: 520px) {
  .way-badge { font-size: .64rem; padding: .16rem .42rem; margin-left: .4rem; }
}

.ways-fineprint { margin-top: 1.4rem; font-size: var(--step--1); line-height: 1.7; color: var(--muted); max-width: var(--measure); }

/* ---- Tick list: "what partnership actually looks like" ---- */
.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.tick-list li { position: relative; padding-left: 1.9rem; color: var(--ink-soft); line-height: 1.6; max-width: var(--measure); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 1.1rem; height: .6rem; border-left: 2.5px solid var(--link-ink); border-bottom: 2.5px solid var(--link-ink); transform: rotate(-45deg); }
.tick-list li strong { color: var(--navy); }
.ways-row { text-align: center; margin-top: 1.4rem; color: var(--ink-soft); font-size: var(--step-0); }

/* ==========================================================================
   Resources hub. Was 12 identical bordered boxes each stamped "20 articles",
   which reads as a database dump: identical counts advertise uniformity, and 12
   equal boxes assert all 12 topics matter equally. Rebuilt on what the strong
   content hubs actually do, and it has to work with zero photography.
   - one featured item on a navy field (the navy IS the art direction, and it is
     the only place gold/orange are legal as text)
   - hairline index, not cards (GOV.UK: border-top 1px, padding-top 19px)
   - unequal named clusters (Understood.org) to break the grid rhythm
   - an A-Z of everything to close (Edutopia /topic-index): a library, not a menu
   ========================================================================== */
.feat { display: block; background: var(--navy); border-radius: var(--radius-lg); padding: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); margin: clamp(1.6rem, 1.2rem + 2vw, 2.4rem) 0; text-decoration: none; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.feat:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(16,32,56,.18); }
.feat-eyebrow { display: block; font-family: var(--f-body); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .7rem; }
.feat-title { display: block; font-family: var(--f-display); font-weight: 600; color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); line-height: 1.2; max-width: 22ch; }
.feat-desc { display: block; color: rgba(255,255,255,.86); margin-top: .9rem; max-width: var(--measure); line-height: 1.6; }
.feat-cta { display: inline-block; margin-top: 1.1rem; font-weight: 600; color: var(--gold); }

.idx { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.2rem); margin-top: clamp(1.8rem, 1.4rem + 2vw, 3rem); }
.idx-head h2 { font-family: var(--f-display); color: var(--navy); font-size: var(--step-2); margin: 0 0 .2rem; }
.idx-head p { color: var(--muted); margin: 0 0 .9rem; font-size: var(--step--1); }
.idx-rows { border-top: 1px solid var(--line); }
.idx-row { display: grid; grid-template-columns: minmax(0,14rem) 1fr auto; gap: 1.2rem; align-items: baseline; padding: 19px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .15s var(--ease-out); }
.idx-row:hover { background: var(--paper-2); }
.idx-row:hover .idx-name { color: var(--link-ink); }
.idx-name { font-family: var(--f-display); font-weight: 600; color: var(--navy); font-size: var(--step-1); }
.idx-desc { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; }
.idx-n { color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The count was a bare right-aligned "20", which a reviewer read as a cut-off year.
   Every category genuinely has 20 articles, so the number is right; it just needed a
   unit. The word is lighter than the digits so it reads as a label, not a title. */
.idx-u { font-size: .82em; color: var(--light); font-weight: 500; }
@media (max-width: 720px){ .idx-row { grid-template-columns: 1fr auto; } .idx-desc { grid-column: 1 / -1; } }

.az { margin-top: clamp(2.4rem, 2rem + 2vw, 3.6rem); border-top: 2px solid var(--navy); padding-top: 1.4rem; }
.az-head h2 { font-family: var(--f-display); color: var(--navy); font-size: var(--step-2); margin: 0 0 .2rem; }
.az-head p { color: var(--muted); margin: 0 0 .8rem; font-size: var(--step--1); }
.az-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.6rem; }
.az-nav a { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 6px; background: var(--paper-2); color: var(--navy); font-weight: 600; font-size: .82rem; text-decoration: none; }
.az-nav a:hover { background: var(--navy); color: #fff; }
.az-block { margin-bottom: 1.6rem; scroll-margin-top: 90px; }
.az-block h3 { font-family: var(--f-display); color: var(--navy); font-size: var(--step-1); margin: 0 0 .5rem; border-bottom: 1px solid var(--line); padding-bottom: .3rem; }
.az-block ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2.4rem; }
.az-block li { break-inside: avoid; margin-bottom: .4rem; }
.az-block a { color: var(--ink-soft); text-decoration: none; font-size: var(--step--1); line-height: 1.5; }
.az-block a:hover { color: var(--link-ink); text-decoration: underline; }
@media (max-width: 640px){ .az-block ul { columns: 1; } }

/* ---- Partner list ----
   Organization names only. Pastor names, staff contacts and phone numbers are
   internal CRM data and never belong on a public page. No hard count either:
   Josie removed the church-partner number, and a list that grows and shrinks
   should not carry a figure someone has to keep true. */
.partner-list { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); }
.partner-list li { break-inside: avoid; padding: .55rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .1rem; }
.pl-name { font-family: var(--f-body); font-weight: 600; color: var(--navy); font-size: var(--step--1); line-height: 1.35; }
.pl-city { font-size: .78rem; color: var(--muted); }
@media (max-width: 900px){ .partner-list { columns: 2; } }
@media (max-width: 560px){ .partner-list { columns: 1; } }

/* Heading levels must not skip (h2 -> h4 breaks the screen-reader outline), but
   these components were designed at the h4 size. Promoted the tags to h3 and pinned
   the visual size here so the design is unchanged. */
.value h3, .role h3, .doclink h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: 0; }
.value h3 { margin-bottom: .3rem; }


/* ---- Tap targets: 44px is the floor, 48px is comfortable ----
   Measured 45 controls under 44px at 390px, including the give toggle (144x38)
   on the page that takes the money. */
@media (max-width: 920px) {
  .give-toggle button { min-height: 48px; }
  .give-amts button   { min-height: 48px; }
  .nav-toggle         { min-width: 48px; min-height: 48px; }
  .lang-toggle a, .lang-toggle button { min-height: 44px; display: inline-grid; place-items: center; padding-inline: .9rem; }
  /* padding-block:.35rem only reached about 30px, still under the 44px target, and
     these were the last failing tap targets on every page. Using min-height with the
     list gap removed makes the row 44px while adding roughly 5px per link, so the
     footer does not grow meaningfully on pages we are also trying to shorten. */
  .footer-links       { gap: 0; }
  .footer-links a     { display: flex; align-items: center; min-height: 44px; }
}

/* ---- Type scale: h2 and h3 were 2px apart on mobile, so h3 read as a wobbly h2 ----
   A bare `h3` rule (0,0,1) loses to `.prog-row h3` (0,1,1) on specificity no matter
   how late it sits in the file. So the earlier fix only ever reached unstyled
   headings, and index.html, whose first headings are all component h3s, still
   rendered h2 29.01px against h3 25.11px: a ratio of 1.16, which is not a hierarchy.
   Every component h3 that used --step-2 is restated here. Grouped selectors keep
   their own specificity, so each one ties its original and wins on order. */
h2 { font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.35rem); }
h3,
.prog-row h3,
.article-body h3,
.pillar h3,
.path-cards .path-bd h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); }

/* .impact-head h2 set its own floor of 1.7rem, which rendered 27.2px on mobile while
   every other h2 rendered 29.01px. One h2 quietly smaller than its siblings reads as
   a mistake rather than a choice. */
.impact-head h2 { font-size: clamp(1.75rem, 1.35rem + 1.9vw, 2.35rem); }

/* ---- Buttons were 11.52px. That is too small for the element carrying the money. ---- */
.btn { font-size: .875rem; letter-spacing: .08em; }
.btn--donate, .give-btn { font-size: .9375rem; }
.btn--sm { font-size: .8125rem; }

/* ---- Mobile section rhythm: 5 of 8 sections were an identical 25.75px, so nothing
   could be emphasised. Give the page a pulse instead of a flatline. ---- */
@media (max-width: 700px) {
  .section { padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
  .section--ink, .section--tint, .page-hero, .cta-band { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
}

/* ---- Staggered reveals: cards currently arrive as one block ---- */
@media (prefers-reduced-motion: no-preference) {
  .grid > .reveal:nth-child(1), .ways-list > .reveal:nth-child(1) { transition-delay: 0ms; }
  .grid > .reveal:nth-child(2), .ways-list > .reveal:nth-child(2) { transition-delay: 70ms; }
  .grid > .reveal:nth-child(3), .ways-list > .reveal:nth-child(3) { transition-delay: 140ms; }
  .grid > .reveal:nth-child(4), .ways-list > .reveal:nth-child(4) { transition-delay: 210ms; }
  .grid > .reveal:nth-child(n+5) { transition-delay: 240ms; }
}

/* ---- Shadow scale: 6 ad-hoc variants collapsed to 3 intentional levels ---- */
:root {
  --shadow-sm: 0 1px 2px rgba(16,32,56,.06), 0 2px 4px rgba(16,32,56,.05);
  --shadow-md: 0 6px 18px rgba(16,32,56,.09), 0 2px 6px rgba(16,32,56,.05);
  --shadow-lg: 0 16px 38px rgba(16,32,56,.14), 0 4px 10px rgba(16,32,56,.06);
}

/* ---- Physical press: buttons should respond to the finger ---- */
.btn:active, .give-amts button:active, .give-toggle button:active { transform: translateY(1px); }


/* ---- Gap section: the copy column ran short and left a dead band before the chart.
   Cap the prose, centre both columns, and give the bars a floor so the 12% bar is
   readable rather than a stub. ---- */
.gap-grid > div:first-child { max-width: var(--measure-tight); }
/* Was align-items:flex-end. That rule sits later in the file than the baseline fix
   above and would silently win, putting the 26px misalignment straight back. */

/* ---- Impact head: 1.75fr/1fr left the lead stranded. Balance it. ---- */
.impact-head { grid-template-columns: 1.35fr 1fr; align-items: end; }
.impact-head p { max-width: var(--measure-tight); }
@media (max-width: 820px){ .impact-head { grid-template-columns: 1fr; } }

/* ---- Hover: cards should lift, not just tint. Transform+opacity only (GPU-safe). ---- */
.card, .prog-card, .way-card, .path-card, .honor-card, .tcard {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  will-change: transform;
}
.card:hover, .prog-card:hover, .way-card:hover, .path-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
}

/* ---- Focus: visible, branded, and never removed ---- */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--link-ink); outline-offset: 3px; border-radius: 4px;
}

/* ---- Reduced motion: honour it completely, including the new stagger ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* .btn--sm sat at 37px tall. Every "Give now" / "Get transfer instructions" CTA
   inside the giving-method cards failed the 44px floor on mobile. */
@media (max-width: 920px) {
  .btn--sm { min-height: 44px; display: inline-flex; align-items: center; }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-social a { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
}

/* ---- /epa in-page navigation: sticky section nav + scroll-spy + scroll progress ---- */
/* Navigability for a 2,381-word essay: reach any section in one tap, know where you are. */
.epa-progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; }
@supports (animation-timeline: scroll()) {
  /* Compositor-thread, no JS. transform only. */
  .epa-progress { animation: epa-grow linear both; animation-timeline: scroll(root); }
  @keyframes epa-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.epa-toc { position: sticky; top: var(--hdr-h, 56px); z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); }
.epa-toc ul { list-style: none; margin: 0; padding: .6rem clamp(1rem, 4vw, 2rem); display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.epa-toc ul::-webkit-scrollbar { display: none; }
.epa-toc a { display: inline-block; white-space: nowrap; font-family: var(--f-body); font-weight: 600; font-size: var(--step--1); color: var(--eyebrow-ink); padding: .42rem .85rem; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; scroll-snap-align: start;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.epa-toc a:hover { border-color: var(--numeral-ink); }
.epa-toc a.is-active { background: var(--numeral-ink); color: #fff; border-color: var(--numeral-ink); }
.epa-toc a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
#history, #justice, #today, #pressure, #opportunity, #questions { scroll-margin-top: calc(var(--hdr-h, 56px) + 58px); }
@media (prefers-reduced-motion: reduce) { .epa-progress { animation: none; } .epa-toc a { transition: none; } }

/* Mobile: tighten the sponsor wall (generous gaps + 58px logos ran ~740px on phones). */
@media (max-width: 700px){
  .sponsor-grid { gap: 1.4rem 1.8rem; }
  .sponsor-logo img { height: 42px; }
  .sponsor-text { font-size: var(--step--1); max-width: 14ch; }
}

/* index length: several small structural cuts toward the 9,500 hub target (mobile only).
   Appended last so these win on source order at equal specificity (the specificity/order trap). */
@media (max-width: 700px){
  .bento { grid-template-columns: 1fr 1fr; }        /* was 1-col under 440px; 2-col drops a stacked column */
  .bento .tile--wide { grid-column: 1 / -1; }       /* keep the lead 40-years stat full width */
  .bento .tile { min-height: 108px; }
  .path-cards .card-media { aspect-ratio: 2.3 / 1; } /* shorter hero images on the two path cards */
  .path-cards .path-bd { padding: 1.05rem 1.2rem 1.25rem; }
  .path-cards .path-bd h3 { font-size: var(--step-1); }
  .prog-row h3 { font-size: var(--step-1); }         /* editorial index kept, just tighter type */
}

/* Trim section rhythm on phones across the site (helps every over-target page); subtle, ~6px per side. */
@media (max-width: 700px){
  .section { padding-block: clamp(1.4rem, 1.15rem + 1vw, 2.1rem); }
  .prog-row { padding: 1rem 0; }
  .prog-row .desc { font-size: var(--step--1); margin-top: .2rem; }
}

/* Art direction: the "Class of 2025" roster becomes a college-destinations board. The
   destination is the celebration, so the college is the hero (navy display) and the repeated
   "Open Door Scholar" drops to a small label. Navy on tint 8.6:1, label on tint 8.46:1, measured. */
.roster--dest { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; background: none; border: 0; box-shadow: none; padding: 0; }
.roster--dest .r { display: flex; flex-direction: column; gap: .2rem; padding: .95rem 1.1rem; background: var(--paper-2); border: 0; border-radius: 12px; }
.roster--dest .r .nm { order: 1; font-family: var(--f-body); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--eyebrow-ink); }
.roster--dest .r .sc { order: 2; font-family: var(--f-display); font-weight: 600; font-size: var(--step-1); line-height: 1.12; color: var(--numeral-ink); }
.roster--dest .r .sc::before { color: var(--numeral-ink); }  /* was --orange-deep #EE7623: orange text glyph, 2.30:1 on tint. Navy is 9.69:1 and matches the college. */
@media (max-width: 700px){ .roster--dest { gap: .5rem; } .roster--dest .r { padding: .8rem .95rem; } }
@media (max-width: 340px){ .roster--dest { grid-template-columns: 1fr; } }

/* /epa desktop split-panel: a sticky left narrative rail, the essay scrolls on the right
   (Obama Foundation pattern). Desktop only; below 1000px .epa-split/.epa-rail/.epa-flow are
   plain blocks and the page keeps its single column with the horizontal sticky nav. */
@media (min-width: 1000px){
  .epa-split { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
  .epa-rail { position: sticky; top: var(--hdr-h, 70px); align-self: start; padding-block: 1.5rem; }
  .epa-split .epa-toc { position: static; border-bottom: 0; background: none; backdrop-filter: none; z-index: auto; }
  .epa-split .epa-toc ul { flex-direction: column; align-items: stretch; gap: .4rem; padding: 0 1.1rem 0 clamp(1.1rem, 2vw, 1.9rem); overflow: visible; }
  .epa-flow > .section:first-child { padding-top: clamp(.5rem, .3rem + 1vw, 1.2rem); }
  .epa-flow { min-width: 0; }
  /* the nav is beside the content now, not above it, so jumps only clear the header */
  #history, #justice, #today, #pressure, #opportunity, #questions { scroll-margin-top: calc(var(--hdr-h, 70px) + 1.4rem); }
}

/* Below the split breakpoint, the wrappers must not exist as boxes, or the sticky nav gets
   trapped inside the short .epa-rail and cannot pin across the scrolling content. display:contents
   promotes the nav and sections back to main's flow, restoring the mobile single-column + sticky nav. */
@media (max-width: 999px){ .epa-split, .epa-rail, .epa-flow { display: contents; } }


/* ---- Campaign landing pages (volunteer, monthly giving, corporate, church) ---- */
/* Inline validation message. Hidden until the field is marked invalid. */
.step-row h3 { margin-bottom: .2rem; font-size: var(--step-1); }
.form .err { margin: .35rem 0 0; font-size: var(--step--1); color: #9A2A1E; font-weight: 500; }
.form [aria-invalid="true"] { border-color: #9A2A1E; }
.form [aria-invalid="true"]:focus { outline-color: #9A2A1E; }
/* Each landing page keeps the one brand system but leads with a different accent. */
.lp--volunteer .page-eyebrow { color: var(--eyebrow-ink); }
.lp--monthly .section--tint { background: #FBF6EC; }
.lp--corporate .section--ink { background: var(--navy); }
.lp--church .section--tint { background: #FBF6EC; }
/* A landing page owns its own sticky action, so the sitewide one must not stack on top. */
.lp .mobile-cta .btn { flex: 1; }
@media (max-width: 760px) { .lp.has-mobile-cta { padding-bottom: 76px; } }

/* Monthly-giving amount chips. They stay anchors because they navigate to the
   external donation system, so they need the chip styling the button variant has. */
.lp--monthly .give-amts { grid-template-columns: repeat(4, 1fr); }
.give-amts a.give-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .85em .4em; white-space: nowrap;
  border: 1px solid var(--line); background: #fff; border-radius: 9px;
  font-family: var(--f-body); font-weight: 600; font-size: var(--step-0);
  color: var(--navy); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.give-amts a.give-btn:hover { background: var(--paper-2); border-color: var(--navy); }
.give-amts a.give-btn:active { transform: translateY(1px); }
.give-amts a.give-btn:focus-visible { outline: 3px solid var(--link-ink); outline-offset: 2px; }
@media (max-width: 420px) { .lp--monthly .give-amts { grid-template-columns: repeat(2, 1fr); } }


/* ---- Campaign landing page composition ------------------------------------
   Scoped to .lp so no other page inherits any of it. Fixes three things the
   visual review caught: cards built on a component meant to sit under a photo
   (so they had no side padding), split-section images that collapsed to
   thumbnails, and sections whose height came from padding rather than content. */

/* Containers and rhythm */
.lp .container { width: min(100% - 3rem, 1240px); }
.lp .narrow    { width: min(100% - 3rem, 820px); }
.lp .section   { padding-block: clamp(3rem, 1.9rem + 4.4vw, 7rem); }
.lp .hero      { padding-block: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); }
.lp .narrow p, .lp .section-head p { max-width: 56ch; }
.lp .center p, .lp .center h2 { margin-inline: auto; }

/* Cards: real containers, stable on hover */
.lp .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: none; height: 100%; overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.lp .card .card-body { padding: clamp(1.5rem, 1.15rem + 1vw, 2.25rem); gap: .55rem; height: 100%; }
.lp .card:hover { border-color: var(--navy); background: #FCFDFF; box-shadow: none; }
html.js-motion .lp .card:hover { transform: none; }
.lp .card:focus-within { border-color: var(--navy); }
.lp .card .card-link { margin-top: auto; padding-top: .35rem; }
.lp .grid { gap: clamp(1rem, .7rem + .8vw, 1.5rem); }

/* Split sections: the photograph has to carry the section */
.lp .feature { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4.5rem); align-items: center; }
.lp .feature .media { border-radius: var(--r-3); overflow: hidden; }
.lp .feature .media img { width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: center 38%; display: block; }
.lp .feature .copy > *:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .lp .feature { grid-template-columns: 1fr; gap: 1.75rem; }
  .lp .feature .media img { aspect-ratio: 16 / 10; }
}

/* Closing CTA band: height from balanced padding, not dead space */
.lp .section--ink { padding-block: clamp(3rem, 2rem + 3.4vw, 5.5rem); }
.lp .section--ink h2 { max-width: 20ch; margin-inline: auto; }
.lp .section--ink p  { max-width: 60ch; margin-inline: auto; }
.lp .section--ink .btn { margin-top: .4rem; }

/* Display type earns emphasis; it should not swallow the viewport */
.lp .hero h1 { max-width: 15ch; }
.lp .section-head h2 { max-width: 22ch; }
@media (min-width: 861px) { .lp .hero h1 { font-size: clamp(2.6rem, 1.6rem + 2.6vw, 3.9rem); } }

/* Confirmation pages: a warm, centered composition rather than text in space */
.lp--confirm .confirm { display: grid; align-items: center; min-height: 58svh; }
.confirm-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
  gap: clamp(2rem, 1.2rem + 3vw, 4.5rem); align-items: center; }
.confirm-grid .media { border-radius: var(--r-3); overflow: hidden; }
.confirm-grid .media img { width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; object-position: center 32%; display: block; }
.confirm-grid .copy h1 { max-width: 16ch; }
.confirm-grid .copy .lead { max-width: 56ch; }
.confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.6rem; }
.confirm-actions .btn { width: auto; }
@media (max-width: 860px) {
  .confirm-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .confirm-grid .media { order: -1; }
  .confirm-grid .media img { aspect-ratio: 16 / 10; }
  .lp--confirm .confirm { min-height: 0; }
}

/* A campaign page owns its own action. The sitewide monthly-giving bar competes
   with it, and on a confirmation page it interrupts the moment entirely. */

.lp.has-mobile-cta { padding-bottom: 0; }
@media (max-width: 760px) { .lp.has-mobile-cta { padding-bottom: 76px; } }

/* Donation module, rebuilt as one centered action ---------------------------- */
.lp--monthly .give-form { width: min(100%, 720px); max-width: 720px; margin-inline: auto; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: 0 4px 16px rgba(16,32,56,.06); padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.give-fs { border: 0; margin: 0 0 1.1rem; padding: 0; }
.give-form .give-label { display: block; padding: 0; margin-bottom: .85rem; }
.give-amts--radio { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.give-amts--radio .amt { position: relative; display: block; }
.give-amts--radio input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.give-amts--radio span { display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .8em .4em; white-space: nowrap;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  font-family: var(--f-body); font-weight: 600; font-size: var(--step-0); color: var(--navy);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.give-amts--radio .amt:hover span { border-color: var(--navy); background: var(--paper-2); }
/* selected state does not rely on colour alone: weight, border mass and a mark */
.give-amts--radio input:checked + span { border-color: var(--navy); border-width: 2.5px;
  background: var(--paper-2); font-weight: 700; }
.give-amts--radio input:checked + span::after { content: " \2713"; margin-left: .35em; }
.give-amts--radio input:focus-visible + span { outline: 3px solid var(--link-ink); outline-offset: 2px; }
.give-form .give-submit { width: 100%; margin-top: .2rem; }
.give-form .give-fineprint { margin: .9rem 0 0; font-size: var(--step--1); }
.give-form .give-alt { margin: .6rem 0 0; font-size: var(--step--1); }
.give-form .give-alt { text-align: center; }
.give-form .give-alt .cite-link { display: block; width: fit-content; max-width: 44ch;
  margin-inline: auto; text-align: center; text-transform: none; letter-spacing: 0; font-weight: 500; }
.give-form .give-alt .cite-link:focus-visible { outline: 3px solid var(--link-ink); outline-offset: 3px; border-radius: 4px; }
.give-form .give-fineprint, .give-form .give-alt { text-align: center; max-width: 52ch; margin-inline: auto; }
.give-form .give-label { text-align: center; }
@media (max-width: 520px) { .give-amts--radio { grid-template-columns: repeat(2, 1fr); } }

/* Testimonial: attributed, restrained, no hover movement ---------------------- */
.testimonial { margin: 0; padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  border-left: 4px solid var(--gold); background: var(--paper-2); border-radius: 0 var(--r-3) var(--r-3) 0; }
.testimonial blockquote { margin: 0; }
.testimonial blockquote p { font-family: var(--f-display); font-size: var(--step-2);
  line-height: 1.35; color: var(--navy); margin: 0; max-width: 34ch; }
.testimonial blockquote p::before { content: "\201C"; }
.testimonial blockquote p::after { content: "\201D"; }
.testimonial figcaption { margin-top: 1.1rem; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .25rem .75rem; font-size: var(--step--1); }
.testimonial .t-name { font-weight: 700; color: var(--ink); }
.testimonial .t-role { color: var(--ink-soft); }
.lp .mt-cta { margin-top: 1.4rem; }

/* The donation module is the page's single action, so it gets its own centered
   band rather than a narrow hero column it cannot fill. */
.lp--monthly .give-section { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.lp--monthly .hero-grid--single { grid-template-columns: 1fr; text-align: center; }
.lp--monthly .hero-grid--single h1 { margin-inline: auto; max-width: 18ch; }
.lp--monthly .hero-grid--single .lead { margin-inline: auto; max-width: 54ch; }

@media (min-width: 861px) {
  .lp--monthly .give-form { max-width: 720px; padding: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
    box-shadow: 0 4px 16px rgba(16,32,56,.06); }
}

/* Anchor target clears the sticky header; the story link is editorial, not a button. */
#giveForm { scroll-margin-top: 96px; }
#giveForm:focus { outline: none; }
#giveForm:focus-visible { outline: 3px solid var(--link-ink); outline-offset: 4px; }
.testimonial--linkonly { border-left-color: var(--blue); }
.testimonial--linkonly figcaption { margin-top: 0; flex-direction: column; align-items: flex-start; gap: .3rem; }
.testimonial--linkonly .t-story { font-family: var(--f-display); font-size: var(--step-1);
  color: var(--link-ink); text-decoration: none; }
.testimonial--linkonly .t-story:hover { text-decoration: underline; }

/* ---- Pathways: grouped participation options instead of a wall of cards ---- */
.pathways { display: grid; gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
.pathway { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, .7rem + 1vw, 1.75rem);
  align-items: start; padding-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); border-top: 1px solid var(--line); }
.pathway:first-child { padding-top: 0; border-top: 0; }
.pathway-n { font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1; color: var(--blue); margin: 0; }
.pathway-body h3 { margin-bottom: .4rem; }
.pathway-intro { color: var(--ink-soft); max-width: 56ch; margin-bottom: .9rem; }
.pathway-list { margin: 0; padding-left: 1.15rem; display: grid; gap: .45rem; }
.pathway-list li { max-width: 52ch; }
.pathway-note { margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); padding-top: 1.25rem;
  border-top: 1px solid var(--line); max-width: 54ch; }
@media (max-width: 620px) { .pathway { grid-template-columns: 1fr; gap: .5rem; } .pathway-n { font-size: 1.4rem; } }

/* ---- Accessible checkbox group for the partnership interest forms ---- */
.chk-set { border: 0; padding: 0; margin: 0 0 1.1rem; }
.chk-set legend { padding: 0; margin-bottom: .7rem; font-weight: 600; color: var(--ink); }
.chk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem; }
.chk { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .7rem;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer;
  min-height: 44px; font-size: var(--step--1);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.chk:hover { border-color: var(--navy); background: #FCFDFF; }
.chk input { width: 20px; height: 20px; margin: .1rem 0 0; flex: none; accent-color: var(--navy); }
.chk:has(input:checked) { border-color: var(--navy); border-width: 2px; background: var(--paper-2); font-weight: 600; }
.chk:has(input:focus-visible) { outline: 3px solid var(--link-ink); outline-offset: 2px; }
@media (max-width: 620px) { .chk-grid { grid-template-columns: 1fr; } }

/* ---- Testimonial design system (ready for verified quotes) ----
   Featured plus up to two supporting. No carousel, no rotation, no hover lift. */
.testimonial--featured blockquote p { font-size: var(--step-3); max-width: 30ch; }
.testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, .7rem + 1vw, 1.75rem); margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.testimonial--support { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-left-width: 3px; }
.testimonial--support blockquote p { font-family: var(--f-body); font-weight: 500;
  font-size: var(--step-0); line-height: 1.5; max-width: 46ch; color: var(--ink); }
.testimonial cite { font-style: normal; }
.testimonial .t-photo { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex: none; }
.testimonial .t-place { color: var(--ink-soft); }
.testimonial, .testimonial--support { transition: none; }
.testimonial:hover, .testimonial--support:hover { transform: none; box-shadow: none; }
@media (max-width: 720px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* Newsletter CTA: one action, no dead input in front of it. */
.newsletter-cta { display: grid; gap: .9rem; justify-items: start; }
.newsletter-cta p { margin: 0; max-width: 46ch; }
.newsletter-cta .btn { min-height: 48px; }


/* ---- Contact directory ----
   Five people, so a rigid 3-up grid strands the last two against an empty
   column. Flex with a centered last row keeps every breakpoint deliberate:
   one card on phones, two on tablets, three on wide screens. */
.dircards { --dg: clamp(1rem, .7rem + 1vw, 1.5rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--dg); align-items: stretch; }
/* Fixed widths per breakpoint rather than flex-grow: with five cards the last
   row is always short, and growing it would leave the orphan a different width
   from its siblings. Centered plus equal-width reads as composition, not a gap. */
.dircard { flex: 0 1 100%; display: flex; flex-direction: column;
  padding: clamp(1.25rem, 1rem + .6vw, 1.6rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.dircard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.dircard-badge { width: 60px; height: 60px; border-radius: var(--r-pill);
  background: var(--spirit-soft); color: var(--spirit);
  display: grid; place-items: center; margin-bottom: .85rem;
  font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; }
.dircard-name { font-family: var(--f-display); font-weight: 600; font-size: var(--step-1);
  color: var(--navy); line-height: 1.2; margin: 0 0 .2rem; max-width: none; }
.dircard-role { font-size: var(--step--1); color: var(--muted); margin: 0 0 .9rem;
  max-width: none; }
/* The email is the action, so it sits last and is pinned to the card foot,
   which is what keeps five cards of unequal copy visually level. */
.dircard-mail { margin-top: auto; font-size: var(--step--1); font-weight: 600;
  color: var(--link-ink); text-decoration: none; border-bottom: 1px solid transparent;
  overflow-wrap: anywhere; align-self: flex-start;
  transition: border-color var(--dur-fast) var(--ease-out); }
.dircard-mail:hover { border-bottom-color: var(--link-ink); }
.dircard-mail:focus-visible { outline: 3px solid var(--link-ink); outline-offset: 3px;
  border-radius: 3px; }
@media (min-width: 620px)  { .dircard { flex-basis: calc((100% - var(--dg)) / 2); } }
@media (min-width: 1000px) { .dircard { flex-basis: calc((100% - 2 * var(--dg)) / 3); } }
@media (prefers-reduced-motion: reduce) {
  .dircard, .dircard-mail { transition: none; }
  .dircard:hover { transform: none; }
}


/* ---- Hero eyebrow over photography ----
   Brand gold #FFB549 measures ~3.98:1 on the hero scrim at 390px, under the
   4.5:1 floor for small text. The backdrop is a photo, so it varies; this is a
   lightened gold used ONLY here, chosen with headroom (measured
   4.96 / 4.68 / 5.51 / 5.97 at 390 / 768 / 1280 / 1440). Global palette untouched. */
.hero-bleed .eyebrow, .hero-bleed-copy .eyebrow { color: #FFD79B; }


/* An odd number of options leaves the last one stranded beside an empty cell
   (church partners has 9). Let it span the row so the gap reads as intentional. */
.chk-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }


/* A panel that is itself the link. .card is deliberately chrome-less (it is the
   image-plus-body pattern), so these blocks were rendering as floating text. */
.panel--link { display: block; text-decoration: none; color: inherit;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.panel--link:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.panel--link:focus-visible { outline: 3px solid var(--link-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .panel--link { transition: none; }
  .panel--link:hover { transform: none; }
}


/* Panels inside a dark band: the base .panel paints white, and these sections
   set white text, so a plain .panel renders invisible. Keep the container, take
   the fill from the band instead. */
.section--spirit .panel, .section--ink .panel,
.section--spirit .panel--link, .section--ink .panel--link {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .30);
  box-shadow: none;
}
.section--spirit .panel--link:hover, .section--ink .panel--link:hover {
  background: rgba(255, 255, 255, .14); box-shadow: none;
}


/* Buttons that are flex children stretch to the container. Full width is right
   for a donation-card submit; it is wrong for a link CTA in a wide panel
   (measured 1142px on ways-to-give) and for a lone form submit (760px on
   get-involved). Both keep their intrinsic width instead. */
.prog-card.feature-panel .btn { align-self: flex-start; }
form.form > .btn { justify-self: start; align-self: start; }  /* .form is a grid, so justify-self is the inline axis */


/* ---- Contact map on phones ----
   The embed renders as an empty --paper-2 block at narrow widths, so it reads
   as a broken container rather than a map. Hidden below 640px; the "Visit or
   call" panel underneath already carries the address, phone, and directions
   link, so nothing is lost and no placeholder is left behind. */
@media (max-width: 640px) {
  .hero-map { display: none; }
}


/* Keep the give promo compact. `.lp .section` sets a much taller rhythm and sits
   further down this file, so the override has to be here, after it, to win. */
.section.give-promo { padding-block: clamp(1.1rem, .8rem + 1vw, 1.6rem); }


/* ---- Heading levels promoted to close outline gaps ----
   These components were designed at a smaller heading size, but sat one level
   too deep (h2 -> h4, h1 -> h3), which breaks the screen-reader outline. The
   tags moved up; the visual sizes are pinned here so nothing looks different.
   Same fix already applied to .value, .role, .doclink and .jstep. */
.step-row h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: 0; margin-bottom: .2rem; }
.tl-item h3  { font-size: var(--step-1); font-weight: 600; letter-spacing: 0; }
/* These two were h3 before the outline fix; hold them at the h3 size. */
.prog-card.feature--wide .fw-main h2 { font-size: var(--step-2); }
.story-body h2, .article-body h2 { font-size: var(--step-2); }


/* ---- Next-step panel ----
   One focused choice at the end of a page. Centered on purpose: it is a short
   decision block, not prose, so the measure rules that govern body copy do not
   apply. Nothing here is fixed or sticky.
   NOTE: never put data-en/data-es on an element that wraps a link. The i18n
   layer writes the attribute into textContent, which deletes child anchors.
   Translate the eyebrow, heading, lead and each button label separately. */
.section.nextstep-band { padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.nextstep { max-width: 860px; margin-inline: auto; text-align: center;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) clamp(1.25rem, 1rem + 1.4vw, 2.4rem); }
.nextstep .eyebrow { margin-bottom: .55rem; }
.nextstep h2 { font-size: var(--step-2); margin-bottom: .55rem; max-width: 24ch;
  margin-inline: auto; }
.nextstep-lead { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.55;
  max-width: 56ch; margin: 0 auto 1.35rem; }
.nextstep-actions { display: flex; flex-wrap: wrap; justify-content: center;
  gap: .75rem; }
.nextstep-actions .btn { min-height: 44px; }
@media (max-width: 520px) {
  .nextstep-actions { flex-direction: column; align-items: stretch; }
  .nextstep-actions .btn { width: 100%; }
}


/* ---- Footer credit ----
   Its own centred line under the legal text. The translated words and the link
   are separate elements: putting data-en on a parent that wraps an anchor would
   delete the anchor when the language swaps. */
.footer-credit { flex-basis: 100%; text-align: center; margin-top: .9rem;
  font-size: .78rem; color: rgba(250, 246, 240, .82); }
.footer-credit a { color: rgba(250, 246, 240, .82); text-decoration: underline;
  text-underline-offset: 2px; }
.footer-credit a:hover { color: #fff; }
.footer-credit a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px;
  border-radius: 3px; }


/* ---- Balanced wrapping for short captions ----
   Stat labels and the next-step supporting line are two or three lines of text
   in a narrow column, which is exactly where a wrap strands a single word on
   the last line. Balancing evens the lines instead. Measured 72 orphans across
   20 pages at five widths in both languages before this. Short blocks only:
   never applied to body prose. */
.stat .label, .nextstep-lead { text-wrap: balance; }


/* "one-on-one support" has to survive as a unit: a non-breaking space alone was
   not enough, because the hyphens inside "one-on-one" are break opportunities of
   their own and the line broke as "one-" / "on-one support". The nowrap is on the
   phrase, never on the whole label, and balancing is off here so greedy wrapping
   puts the phrase on its own line rather than minimising the widest line. */
.stat .label--nb { text-wrap: normal; }
.stat .label .nb { white-space: nowrap; }


/* ---- Public events calendar ----
   Agenda first, because that is what a phone can actually use. The month grid is
   supporting context on wider screens. Everything here is static HTML: no script
   is required to read the calendar or reach an event page. */
.ev-agenda { display: grid; gap: clamp(1rem, .7rem + 1vw, 1.5rem); }
.ev-card { display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1rem, .8rem + .8vw, 1.5rem);
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-1); align-items: start; }
.ev-when { text-align: center; background: var(--paper-2); border-radius: var(--r-2);
  padding: .55rem .35rem; }
.ev-mon { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--eyebrow-ink); }
.ev-day { display: block; font-family: var(--f-display); font-weight: 700;
  font-size: var(--step-2); color: var(--navy); line-height: 1.1; }
.ev-cat { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--eyebrow-ink); margin: 0 0 .25rem; max-width: none; }
.ev-title { font-size: var(--step-1); margin: 0 0 .3rem; }
.ev-title a { color: var(--navy); text-decoration: none; }
.ev-title a:hover { text-decoration: underline; }
.ev-meta { font-size: var(--step--1); color: var(--muted); margin: 0 0 .5rem; max-width: none; }
.ev-sum { color: var(--ink-soft); margin: 0 0 .5rem; }
.ev-aud { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 .9rem; }
.ev-cta { min-height: 44px; }
.ev-status { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--terra-soft); color: var(--eyebrow-ink); margin-bottom: .6rem; }
.ev-status--cancelled { background: #F6D6D2; }
@media (max-width: 520px) { .ev-card { grid-template-columns: 1fr; } .ev-when { width: 4.5rem; } }

/* Month grid: context on wider screens, hidden on phones where the agenda wins. */
.cal-grid-wrap { display: none; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 900px) { .cal-grid-wrap { display: block; } }
.cal-month + .cal-month { margin-top: 2rem; }
.cal-mname { font-size: var(--step-1); margin: 0 0 .6rem; }
.cal-weekdays, .cal-days { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.cal-weekdays span { font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); padding: .3rem; text-align: center; }
.cal-cell { min-height: 92px; border: 1px solid var(--line); border-radius: var(--r-1);
  padding: .4rem; background: var(--paper); }
.cal-cell--pad { border: 0; background: none; }
.cal-cell--has { background: var(--paper-2); border-color: var(--blue-light); }
.cal-num { font-size: .78rem; font-weight: 700; color: var(--muted); }
.cal-dot { display: block; margin-top: .3rem; font-size: .74rem; font-weight: 600;
  color: var(--navy); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-1); padding: .28rem .35rem; text-decoration: none; }
.cal-dot:hover { border-color: var(--link-ink); }
.cal-dot:focus-visible, .ev-title a:focus-visible { outline: 3px solid var(--link-ink); outline-offset: 2px; }

/* Event detail page */
.ev-facts { display: grid; gap: 1rem; margin: 1.4rem 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ev-5w { display: grid; gap: clamp(1rem, .8rem + 1vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 1.6rem; }
.ev-w h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.ev-w p { color: var(--ink-soft); }
.ev-sched, .ev-reqs { margin: .4rem 0 1.6rem 1.1rem; }
.ev-sched li, .ev-reqs li { margin-bottom: .35rem; color: var(--ink-soft); }
.ev-contact { max-width: 46ch; }
.ev-updated { font-size: var(--step--1); margin-top: 1.2rem; }
.ev-empty { text-align: center; max-width: 860px; margin-inline: auto; }
.ev-empty h3 { font-size: var(--step-2); margin: .3rem 0 .6rem; }


/* ---- Save-the-date and program schedule ----
   A save-the-date has a confirmed title and date and nothing else, so it must
   not look clickable. Muted card, no button, no link. */
.std-head { margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 1rem; }
.std-head h3 { font-size: var(--step-2); margin-bottom: .3rem; }
.ev-card--std { background: var(--paper-2); box-shadow: none; }
.ev-when--std { background: var(--paper); }
.ev-title--plain { color: var(--navy); }
.ev-soon { font-size: var(--step--1); font-weight: 600; color: var(--eyebrow-ink);
  margin: .5rem 0 0; }
.cal-dot--std { display: block; margin-top: .3rem; font-size: .74rem; font-weight: 600;
  color: var(--eyebrow-ink); background: var(--paper-2); border: 1px dashed var(--line);
  border-radius: var(--r-1); padding: .28rem .35rem; }
.sn-block { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding: clamp(1.25rem, 1rem + 1vw, 1.8rem);
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--blue-light);
  border-radius: var(--r-3); }
.sn-block h3 { font-size: var(--step-1); margin-bottom: .25rem; }
.sn-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.sn-row { display: grid; grid-template-columns: minmax(0, 16rem) 1fr; gap: .4rem 1.2rem;
  padding: .7rem 0; border-top: 1px solid var(--line); }
.sn-row:first-child { border-top: 0; }
.sn-dates { font-weight: 700; color: var(--navy); }
.sn-what { color: var(--ink-soft); }
@media (max-width: 620px) { .sn-row { grid-template-columns: 1fr; } }

/* ---- Save-the-date question link and label ----
   The label states plainly that the date is confirmed and the details are not. */
.ev-tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--paper); border: 1px dashed var(--line); color: var(--eyebrow-ink); }
.ev-card--std .ev-tag { background: var(--paper); }
.ev-ask { margin: .2rem 0 0; font-size: var(--step--1); }
.ev-ask .textlink { display: inline-block; min-height: 44px; line-height: 44px; }

/* ---- Ways to take part: four pathways off the calendar ----
   Same panel system as the rest of the site: white card, hairline, soft shadow. */
/* Two columns, not four. At four across the cards are ~250px, which wraps
   "Explore Corporate Partnerships" onto three lines and leaves the single-button
   cards half empty. Two columns pair 1+2 and 3+4, so each row balances. */
.wtp-grid { display: grid; gap: clamp(1rem, .8rem + 1vw, 1.6rem);
  grid-template-columns: 1fr; }
@media (min-width: 760px) { .wtp-grid { grid-template-columns: repeat(2, 1fr); } }
.wtp-card { display: flex; flex-direction: column; text-align: left;
  padding: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-1); }
.wtp-card h3 { font-size: var(--step-1); margin: 0 0 .45rem; }
.wtp-card p { color: var(--ink-soft); margin: 0 0 1.1rem; max-width: none; }
.wtp-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem; margin-top: auto; }
.wtp-actions .btn { min-height: 44px; }
@media (max-width: 520px) { .wtp-actions { flex-direction: column; align-items: stretch; } }

/* ---- Homepage upcoming-events preview ----
   Confirmed dates only, with no link and no button, so nothing here reads as open
   for registration. The full calendar is one click away. */
.hp-std-head { font-size: var(--step-1); margin: clamp(1.4rem, 1rem + 1.4vw, 2.1rem) 0 .6rem; }
.hp-std-list { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line); }
.hp-std { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem;
  padding: .75rem 0; border-bottom: 1px solid var(--line); }
.hp-std-date { flex: 0 0 5.5rem; font-family: var(--f-display); font-weight: 700;
  color: var(--navy); }
.hp-std-title { flex: 1 1 12rem; color: var(--ink); font-weight: 500; }
.hp-ev-actions { justify-content: flex-start; margin-top: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
@media (max-width: 520px) { .hp-std-date { flex-basis: 100%; } }

/* A quiet aside on a page whose primary action is giving: panel, no button. */
.ev-aside { max-width: 62ch; margin-inline: auto; text-align: center; }
.ev-aside p { color: var(--ink-soft); margin: 0 0 .7rem; max-width: none; }
.ev-aside p:last-child { margin-bottom: 0; }
.ev-aside .textlink { display: inline-block; min-height: 44px; line-height: 44px; }