/* == fonts: generated by `npm run fonts` (sites/tools/fonts.mjs), do not edit by hand == */
/* Self-hosted from Google Fonts. To change the faces, edit the URL below and
   re-run `npm run fonts`; it reads the URL back from here, and the preload
   list too (PAGE.md, "Preload what paints first").
   source: https://fonts.googleapis.com/css2?family=Albert+Sans:wght@500;700&family=Outfit:wght@600;700&family=Caveat+Brush&family=Caveat:wght@600&display=swap
   preload: Albert Sans:500,Outfit:700,Caveat Brush:400
*/
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/albert-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/albert-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/albert-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/albert-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/caveat-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/caveat-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/caveat-brush-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/caveat-brush-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/outfit-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/outfit-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/outfit-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* == end fonts == */

/* ===========================================================================
   Kyne Hands Foundation
   Built to concept 3 - We Are Where Children Are.
   Mockups: design/mockup/<page>-948.png (948px native).

   Every value below traces to a measurement in design/SPEC.md. If a number
   here is not in SPEC.md, it is a bug - not a preference.

   1200 MAX, NO BLEED (sites/.claude/rules/BUILD.md, "The defaults"). Sizes
   are written in 948px design pixels as `N * var(--u)`; --u renders
   them at 1200/948 at 1200 and above and shrinks below it, and the
   header, page and footer are one 1200 column. Floor a size for legibility
   with max() on the same line: max(16px, calc(17 * var(--u))).
   =========================================================================== */

:root {
  --u: min(calc(1200px / 948), 100vw / 948);

  /* --- Colour ------------------------------------------------------------
     The client: "the color of the logo, that's our color" (call, 20 Sep).
     Teal, gold and brown are medians of her logo file; the mockup's own
     samples sit beside them (SPEC.md, Colour). */
  --teal: #02697B;          /* logo ring; mockup CTA band #046474 */
  --teal-deep: #045C6C;     /* mockup hero field, x40 y300 */
  --teal-ink: #013F57;      /* mockup section headings */
  --navy: #18254D;          /* mockup body copy, darkest 5% */
  --nav-ink: #192A5A;       /* mockup nav links */
  --brown: #3F2D21;         /* logo hands; mockup footer #3C2C1C */
  --brown-btn: #28150B;     /* mockup Liberia button */
  --gold: #FEBE01;          /* logo map; mockup underline bars #FEC204 */
  --sun: #FCD43C;           /* mockup hero button and Liberia panel */
  --sun-script: #FDD816;    /* mockup hero script */
  --red: #DC242C;           /* mockup Donate */
  --sky: #C4ECF4;           /* mockup Colorado panel */
  --paper: #FCFCFC;         /* mockup page ground */
  --sky-pale: #EAF7F7;      /* about-948 pillars band */
  --sky-soft: #DBF1F5;      /* liberia-948 stories band */
  --cream: #FBF9EF;         /* impact-948 stats band */
  --green: #529D3A;         /* the bundles' green icons; mockup green buttons */
  --white: #FFFFFF;

  /* --- Type -------------------------------------------------------------
     Faces identified with font-match (SPEC.md, Type): Outfit for headings,
     Albert Sans for text, Caveat Brush for the display script, Caveat for
     the handwritten notes. Sizes solved from measured ink widths. */
  --ff-head: "Outfit", "Albert Sans", system-ui, sans-serif;
  --ff-body: "Albert Sans", system-ui, sans-serif;
  --ff-script: "Caveat Brush", "Caveat", cursive;
  --ff-note: "Caveat", cursive;

  --f-h1: calc(44.5 * var(--u));                       /* "We Are Where" 295w */
  --f-script-hero: calc(83 * var(--u));                /* "Children Are" 356w */
  --f-h2: max(26px, calc(31 * var(--u)));              /* Our Mission 33 / What We Do 30.3; one size */
  --f-h3-card: max(19px, calc(17.5 * var(--u)));       /* card titles 16.5-17.8 */
  --f-h3-place: max(22px, calc(24 * var(--u)));        /* In Liberia 26.2 / Colorado 20.8 */
  --f-lede: max(16px, calc(15.1 * var(--u)));          /* hero body */
  --f-body: max(16px, calc(14.4 * var(--u)));          /* mission body, subs */
  --f-small: max(15px, calc(10.9 * var(--u)));         /* panel copy */
  --f-list: max(15px, calc(9.6 * var(--u)));           /* card bullets */
  --f-nav: max(14px, calc(10.9 * var(--u)));           /* nav links */
  --f-btn: max(15px, calc(13.6 * var(--u)));           /* Donate */
  --f-btn-lg: max(16px, calc(15.3 * var(--u)));        /* Help Us Make a Difference */
  --f-note: max(18px, calc(19 * var(--u)));            /* handwritten notes */
  --f-foot: max(14px, calc(9.5 * var(--u)));
  --f-h1-page: calc(41 * var(--u));                    /* "People. Purpose." 303w, "Stronger Children." 347w */
  --f-script-page: calc(58 * var(--u));               /* "Brighter Tomorrows." 409w */
  --f-script-band: calc(47 * var(--u));               /* "A Brighter Tomorrow" 340w */
  --f-eyebrow: max(13px, calc(15 * var(--u)));        /* "ABOUT US" 74w */
  --f-kicker: max(13px, calc(10 * var(--u)));         /* SAFE CHILDREN. STRONGER COMMUNITIES. */

  --lh-body: 1.34;          /* 19.7 pitch on 15.1 (hero), 19.5 on 14.4 (mission) */
  --lh-list: 1.5;           /* 15 pitch on 9.6, raised with the floor */
  --lh-head: 1.15;

  /* --- Layout ------------------------------------------------------------ */
  --gut: calc(35 * var(--u));      /* hero copy x=35, card row x=30 */
  --header-h: calc(55 * var(--u)); /* hero field starts y=55 */
  --radius: calc(12 * var(--u));   /* card and photo corners */
  --pill: 999px;
}

/* No bleed: one 1200 column, bands and photographs included. */
.site-header, main, .site-footer { max-width: 1200px; margin-inline: auto; }

/* A minimal reset. Everything else belongs to the design. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--navy); font: 500 var(--f-body)/var(--lh-body) var(--ff-body); -webkit-font-smoothing: antialiased; }
img, picture, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--teal-ink); color: var(--white); border-radius: 8px; }
.skip:focus { top: 8px; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 44px; padding: 0 1.35em; border-radius: var(--pill);
  font: 700 var(--f-btn)/1.1 var(--ff-body); text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; transition: filter .15s, transform .15s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
/* Glyphs are cut from the icon pack (icon-pack-2048-v2) as white-on-clear PNGs and
   used as masks, so they take the text colour. Nothing here is drawn. */
.btn__icon, .glyph { display: inline-block; flex: none; background-color: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.btn__icon { width: 1.15em; height: 1.15em; }
.btn__icon--teal { background-color: var(--teal); }
.g-arrow { --g: url(/assets/img/kg2-arrow.png); }
.g-heart { --g: url(/assets/img/kg2-heart.png); }
.g-people { --g: url(/assets/img/kg2-people.png); }
.g-handshake { --g: url(/assets/img/kg2-handshake.png); }
.g-megaphone { --g: url(/assets/img/kg2-megaphone.png); }
.g-leaf { --g: url(/assets/img/kg2-leaf.png); }

.btn--lg { font-size: var(--f-btn-lg); min-height: max(48px, calc(42 * var(--u))); padding-inline: 1.6em; }
.btn--red { background: var(--red); color: var(--white); }
.btn--sun { background: var(--sun); color: #090D12; }
.btn--white { background: var(--white); color: var(--teal-ink); }
.btn--outline { border-color: var(--white); color: var(--white); }
.btn--brown { background: var(--brown-btn); color: var(--white); }
.btn--teal { background: var(--teal); color: var(--white); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

/* --- Handwritten notes -------------------------------------------------- */
.note { font: 600 var(--f-note)/1.2 var(--ff-note); color: var(--teal-ink); position: absolute; transform: rotate(-9deg); }
/* One text block per note, broken with <br> and stepped right with leading
   no-break spaces, so no two lines are separate boxes to collide once the
   note is rotated, and check:layout reads the breaks as authored. */
.note__text { display: inline-block; white-space: nowrap; }
.note__heart { position: absolute; width: 1.7em; height: auto; }

/* --- Header -------------------------------------------------------------
   Logo 168w at (40,5), nav 238-718 at y 24-36, Donate 740-839 x 12-47,
   the note in a white blob at the top right (about-948, home-948). */
.site-header {
  position: relative; z-index: 10;
  display: flex; align-items: flex-start; justify-content: flex-end;
  height: var(--header-h); padding-right: calc(109 * var(--u));
  background: var(--paper);
}
/* Her full logo (26 Sep) runs the fingers out past the ring, so it is 1.258x
   the old crop's width (ring: 92.5% of that file, 73.5% of this one) and moved
   left so the ring stays at the drawn 44.7-200 x 5-173. */
.brand { position: absolute; left: calc(18 * var(--u)); top: calc(5 * var(--u)); width: calc(211 * var(--u)); z-index: 3; }
.brand img { width: 100%; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .18)); }
.site-nav { display: flex; align-items: center; gap: calc(22 * var(--u)); padding-top: calc(12 * var(--u)); }
.site-nav ul { display: flex; gap: calc(18 * var(--u)); }
.site-nav ul a {
  display: block; padding: calc(10 * var(--u)) 0 calc(6 * var(--u));
  font: 500 var(--f-nav)/1 var(--ff-body); color: var(--nav-ink); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav ul a:hover { color: var(--teal); }
.site-nav ul a[aria-current="page"] { color: #201814; border-bottom-color: var(--gold); }
.site-nav__contact { display: none; }
.btn--nav { min-height: calc(35 * var(--u)); padding-inline: calc(17 * var(--u)); }
.nav-toggle { display: none; }

.note--header {
  top: 100%; right: 0; width: calc(153 * var(--u)); height: calc(114 * var(--u));  /* flush with the header's bottom edge, so no strip of hero shows above it */
  padding: calc(8 * var(--u)) 0 0 calc(24 * var(--u));
  background: var(--paper); border-bottom-left-radius: 100% 90%;
  transform: none; z-index: 2;
}
.note--header .note__text { transform: rotate(-8deg); transform-origin: left; font-size: max(15px, calc(16 * var(--u))); }
.note--header .note__heart { top: calc(6 * var(--u)); right: calc(12 * var(--u)); width: calc(28 * var(--u)); }
/* Jacob's lettering PNGs (24 Sep) stand in for the Caveat note and its doodle heart. */
.note__art { display: block; height: auto; }
.note--header .note__art { width: calc(100 * var(--u)); margin: calc(-2 * var(--u)) 0 0 calc(10 * var(--u)); }  /* centred in the curve: the panel has more room on the right */

/* --- Hero ---------------------------------------------------------------
   Band y 55-528 on home-948. Photo from x~330 fading into the teal field,
   copy at x 35: h1 cap top 199, script 237-305, brush 312-327, lede from
   338 (pitch 19.7), button 423-464, values row 481-519. */
.hero { position: relative; overflow: hidden; background: var(--teal-deep); color: var(--white); }
.hero__photo {
  position: absolute; inset: 0 0 0 auto; width: calc(640 * var(--u)); height: 100%; object-fit: cover; object-position: 50% 40%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 42%); mask-image: linear-gradient(to right, transparent 0, #000 42%);
}
.hero--home { min-height: calc(490 * var(--u)); }
/* Home's group photo has faces to its left edge, so a wide fade ghosted them behind the copy.
   Jacob, 24 Sep: the whole photo, beside the text, soft left edge only. It is 4:3 in a taller
   box, so it sits at the bottom with teal above it. */
@media (min-width: 761px) {
  .hero--home .hero__photo { width: min(calc(560 * var(--u)), calc(77% - 230px)); object-fit: contain;  /* left edge clear of the values row at every width */ object-position: 100% 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%); mask-image: linear-gradient(to right, transparent 0, #000 10%); }
}
.hero__copy { position: relative; z-index: 1; padding: calc(140 * var(--u)) 0 calc(40 * var(--u)) var(--gut); max-width: calc(420 * var(--u)); }
.hero__title { font: 700 var(--f-h1)/1 var(--ff-head); letter-spacing: -0.01em; }
.hero__title-line { display: block; }
/* The script line is Jacob's lettering PNG (design/incoming/hero-script/), underline included,
   sized to the height the Caveat Brush line and its brush took: 0.95em + the brush. */
.hero__script { display: block; font: 400 var(--f-script-hero)/0.95 var(--ff-script); color: var(--sun-script); }
.hero__script img { display: block; width: auto; max-width: 100%; height: calc(0.95em + 16 * var(--u)); object-fit: contain; object-position: left center; }
.hero__lede { max-width: calc(282 * var(--u)); margin-top: calc(6 * var(--u)); font-size: var(--f-lede); line-height: var(--lh-body); }
.hero__copy .btn { margin-top: calc(12 * var(--u)); }
.hero__values { display: flex; gap: calc(28 * var(--u)); margin-top: calc(16 * var(--u)); }
.hero__values li { display: flex; align-items: center; gap: calc(9 * var(--u)); font: 500 var(--f-small)/1.15 var(--ff-body); }
.hero__values .glyph { width: calc(34 * var(--u)); min-width: 28px; aspect-ratio: 1; }
.hero__edge { position: absolute; left: 0; right: 0; bottom: calc(-8 * var(--u));  /* 10px below the hero edge at 1200: clear of the values row; the clipped strip holds 0.5% of the brush */ width: 100%; height: calc(52 * var(--u)); object-fit: fill; pointer-events: none; }

/* --- Headings ------------------------------------------------------------
   Centred h2 with a 62x5 gold bar 10 below the cap line. */
.heading { font: 700 var(--f-h2)/var(--lh-head) var(--ff-head); color: var(--teal-ink); letter-spacing: -0.01em; }
.heading--center { width: fit-content; margin-inline: auto; text-align: center; }
.heading--center::after { content: ""; display: block; width: calc(62 * var(--u)); height: max(4px, calc(5 * var(--u))); margin: calc(8 * var(--u)) auto 0; border-radius: 3px; background: var(--gold); }

/* --- Mission + What We Do -------------------------------------------------
   "Our Mission" cap top 546, body 595-648, "What We Do" 663, sub 702,
   cards 727-968: x 30-321 / 341-619 / 640-918, photo 126 tall. */
.intro { position: relative; padding: calc(2 * var(--u)) calc(30 * var(--u)) calc(14 * var(--u)); }
.intro__text { max-width: max(calc(590 * var(--u)), 36em);  /* 590 measured; 36em keeps a phone measure once --u shrinks */ margin: calc(10 * var(--u)) auto 0; text-align: center; }
.intro .heading:nth-of-type(2) { margin-top: calc(14 * var(--u)); }
.intro__sub { margin-top: calc(8 * var(--u)); text-align: center; }
.note--mission { top: calc(4 * var(--u)); right: calc(34 * var(--u)); padding-left: calc(52 * var(--u)); }
.note--mission .note__heart { left: 0; top: 0.2em; width: calc(46 * var(--u)); }
.note--mission:has(.note__art) { padding-left: 0; top: calc(6 * var(--u)); transform: none; }
.note--mission .note__art { width: calc(118 * var(--u)); }

.programs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));  /* the food line and one volunteer, half each (Jacob, 24 Sep) */ gap: calc(20 * var(--u)); margin-top: calc(12 * var(--u)); }
.program {
  position: relative; display: flex; flex-direction: column;
  padding: 0 0 calc(14 * var(--u)); background: var(--white); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(24 37 77 / .08), 0 4px 14px rgb(24 37 77 / .08);
}
.program__photo { width: 100%; aspect-ratio: 290 / 126; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.program__icon { position: absolute; left: calc(4 * var(--u)); top: calc(94 * var(--u)); width: calc(66 * var(--u)); min-width: 52px; border-radius: 50%; box-shadow: 0 0 0 calc(4 * var(--u)) var(--white); }
.program__title { margin: calc(10 * var(--u)) 0 0; padding-left: calc(74 * var(--u)); font: 600 var(--f-h3-card)/1.2 var(--ff-head); color: var(--teal-ink); }
.program__list { margin-top: calc(12 * var(--u)); padding: 0 max(16px, calc(16 * var(--u))) 0 max(34px, calc(30 * var(--u))); list-style: disc; font-size: var(--f-list); line-height: var(--lh-list); }

/* --- Liberia | Colorado Springs -------------------------------------------
   Band y 982-1175: sun panel x 0-470, sky panel x 478-948, photos 173x157
   (r 12), globe badge d 95 at the seam. */
.places { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.place { display: grid; align-items: center; gap: calc(22 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); }
.place--liberia { grid-template-columns: calc(173 * var(--u)) minmax(0, 1fr); background: var(--sun); border-radius: 0 calc(26 * var(--u)) calc(26 * var(--u)) 0; padding-right: calc(52 * var(--u)); }
.place--colorado { grid-template-columns: minmax(0, 1fr) calc(155 * var(--u)); background: var(--sky); border-radius: calc(26 * var(--u)) 0 0 calc(26 * var(--u)); padding-left: calc(56 * var(--u)); }
.place__photo { width: 100%; aspect-ratio: 173 / 157; object-fit: cover; border-radius: var(--radius); }
.place__title { font: 700 var(--f-h3-place)/1.1 var(--ff-head); color: var(--teal-ink); }
.place p { margin-top: calc(8 * var(--u)); font-size: var(--f-small); line-height: 1.42; }
.place .btn { margin-top: calc(14 * var(--u)); min-height: max(44px, calc(35 * var(--u))); font-size: var(--f-small); }
.places__globe {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1;
  display: grid; place-items: center; width: calc(95 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  background: var(--white); color: var(--teal); box-shadow: 0 2px 10px rgb(0 0 0 / .12);
}
.places__globe img { width: 56%; }

/* --- Real People ---------------------------------------------------------
   Heading 1178, sub 1217, tiles 1240-1382: 263 / 323 / 289 wide, gap ~10. */
.people { padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(34 * var(--u)); }
.people__grid { display: grid; grid-template-columns: 263fr 323fr 289fr; gap: calc(11 * var(--u)); margin-top: calc(12 * var(--u)); }
.people__grid > img, .people__feature > img { width: 100%; height: calc(142 * var(--u)); min-height: 150px; object-fit: cover; border-radius: var(--radius); }
.people__feature { position: relative; }
.note--tile { right: calc(10 * var(--u)); bottom: calc(-18 * var(--u)); padding: calc(6 * var(--u)) calc(34 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u)); background: var(--white); border-radius: calc(14 * var(--u)); transform: rotate(-7deg); }
.note--tile .note__heart { right: calc(6 * var(--u)); bottom: calc(8 * var(--u)); width: calc(26 * var(--u)); }
.people__feature img { object-position: 50% 60%; }

/* --- Get Involved band ---------------------------------------------------
   Teal y 1390-1560 with a curved top; script heading x 30-290, copy at
   x 341 (1423, 1444), buttons 1471-1519: 150 / 153 / 191 / 206 wide. */
.involve {
  display: grid; grid-template-columns: calc(290 * var(--u)) minmax(0, 1fr); column-gap: calc(40 * var(--u)); align-items: center;
  padding: calc(36 * var(--u)) calc(34 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u));
  background: var(--teal); color: var(--white);
  border-radius: 50% 50% 0 0 / calc(34 * var(--u)) calc(34 * var(--u)) 0 0;
}
.involve__title { font: 400 calc(62 * var(--u))/1 var(--ff-script); color: var(--sun-script); transform: rotate(-4deg); padding-bottom: calc(14 * var(--u)); background: url(/assets/img/b1-brush-yellow.png) left bottom / 100% calc(12 * var(--u)) no-repeat; }
.involve__text { max-width: calc(340 * var(--u)); font-size: var(--f-lede); line-height: 1.35; }
.involve__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 150fr 153fr 191fr 206fr; gap: calc(11 * var(--u)); margin: calc(12 * var(--u)) 0 0 calc(141 * var(--u)); }
.involve__actions .btn { width: 100%; }

/* --- Footer ---------------------------------------------------------------
   Brown y 1560-1659: name 36-206, links from 265 with rules between,
   the note at the right, copyright centred at 1630. */
.site-footer { background: var(--brown); color: var(--white); padding: calc(28 * var(--u)) calc(34 * var(--u)) calc(16 * var(--u)); }
.site-footer__row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(20 * var(--u)); }
.site-footer__name { font: 700 max(17px, calc(15 * var(--u)))/1.2 var(--ff-head); }
.site-footer__motto { font: 600 max(18px, calc(15 * var(--u)))/1.2 var(--ff-note); color: var(--sun-script); }
.site-footer__social { font-size: var(--f-foot); }  /* the link's 44px box makes the gap: 12px to its text, none of it overlapping the motto */
.site-footer__social a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-footer__social a:hover { text-decoration: underline; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.site-footer__nav li { white-space: nowrap; }
/* The drawn rules between links, only while the list is one row. */
@media (min-width: 1101px) {
  /* Inner heroes: the photograph sits beside the copy with a short soft edge, instead of fading
     through it, so no face is ghosted behind the text (Jacob, 24 Sep, on About). Each page aims
     its own crop with an inline object-position. */
  .hero--page .hero__photo, .hero--page .hero__photos { width: min(calc(600 * var(--u)), calc(100% - 500px));
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%); mask-image: linear-gradient(to right, transparent 0, #000 10%); }
  .site-footer__nav ul { column-gap: 0; }
  .site-footer__nav li + li::before { content: "|"; padding: 0 0.5em; opacity: .6; }
}
.site-footer__nav a { font-size: var(--f-foot); text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.note--footer { position: relative; color: var(--sun-script); font-size: max(17px, calc(15 * var(--u))); }
.note--footer { padding-right: calc(30 * var(--u)); margin-block: 10px; }
.note--footer .note__heart { right: 0; top: 0.1em; width: max(18px, calc(24 * var(--u))); }
.note--footer:has(.note__art) { padding-right: 0; }
.note--footer .note__art { width: max(170px, calc(190 * var(--u))); }
.site-footer__legal { margin-top: calc(20 * var(--u)); text-align: center; font-size: var(--f-foot); opacity: .92; }

/* ===========================================================================
   INNER PAGES. The components the eight inner mockups share, each defined
   once. Measured off about/programs/liberia/colorado-springs/impact/
   get-involved/donate-948 and contact-1024 (SPEC.md, "Inner pages").
   =========================================================================== */

/* --- Page hero -----------------------------------------------------------
   Band y 55-431 (about-948): eyebrow cap 190, h1 cap 209, script to ~300,
   brush ~310, lede 334-400 (pitch 19). The photograph fades in from the
   left exactly as Home's does. */
.hero--page { min-height: calc(390 * var(--u)); }
.hero--page .hero__copy { padding-top: calc(128 * var(--u)); padding-bottom: calc(46 * var(--u)); max-width: calc(440 * var(--u)); }
.eyebrow { display: block; margin-bottom: calc(6 * var(--u)); font: 600 var(--f-eyebrow)/1.2 var(--ff-head); letter-spacing: .02em; text-transform: uppercase; }
.hero--page .hero__title { font-size: var(--f-h1-page); }
.hero--page .hero__script { font-size: var(--f-script-page); }
.hero--page .hero__script img { height: calc(0.95em + 14 * var(--u)); }
.hero--page .hero__lede { max-width: calc(300 * var(--u)); }
/* Colorado's photographs are all portrait, so its hero is three of them side
   by side rather than one cropped to a sliver (check:layout's 65% floor). */
.hero__photos { position: absolute; inset: 0 0 0 auto; width: calc(640 * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));  /* the food line and one volunteer, half each (Jacob, 24 Sep) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }
.hero__photos img { width: 100%; height: 100%; object-fit: cover; }

/* --- Sections -------------------------------------------------------------- */
.section { padding: calc(30 * var(--u)) calc(52 * var(--u)); }
.section--tight { padding-block: calc(18 * var(--u)); }
.section__head { margin-bottom: calc(18 * var(--u)); }
.section__head .intro__sub { max-width: max(calc(590 * var(--u)), 34em); margin-inline: auto; }
.heading--left::after { content: ""; display: block; width: calc(62 * var(--u)); height: max(4px, calc(5 * var(--u))); margin-top: calc(8 * var(--u)); border-radius: 3px; background: var(--gold); }
.heading--art img { display: block; width: min(100%, calc(330 * var(--u))); min-width: 240px; height: auto; }  /* the lettering carries its own underline */
.lead-in { margin-top: calc(6 * var(--u)); }
.prose p + p { margin-top: 1em; }
.prose { margin-top: calc(12 * var(--u)); }
.prose + .btn, .prose + .btn-row { margin-top: calc(18 * var(--u)); }
.btn-row { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); }

/* Two columns, text and a figure. Our Story, Building Brighter Futures,
   Outreach in Our Community, We Are Where Children Are. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(36 * var(--u)); align-items: center; }
.split__figure { position: relative; }
.photo { width: 100%; border-radius: var(--radius); object-fit: cover; }
.photo--wide { aspect-ratio: 16 / 9; }
.photo--land { aspect-ratio: 4 / 3; }

/* Two portrait photographs as one frame (Colorado's are all portrait). */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6 * var(--u)); }
.pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

/* A note on a figure's corner (Small Acts, Big Impact; Same Children.). */
.note--corner { left: calc(-10 * var(--u)); bottom: calc(-16 * var(--u)); padding: calc(8 * var(--u)) calc(34 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u)); background: var(--white); border-radius: calc(14 * var(--u)); box-shadow: 0 2px 10px rgb(0 0 0 / .12); transform: rotate(-6deg); }
.note--right { left: auto; right: calc(-8 * var(--u)); }
.note--corner .note__heart { right: calc(8 * var(--u)); bottom: calc(10 * var(--u)); width: max(18px, calc(24 * var(--u))); }

/* --- Cynthia --------------------------------------------------------------
   Portrait with her name on a yellow brush, and the teal hand beside it. */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(26 * var(--u)); align-items: center; }
.founder__photo { position: relative; margin-bottom: calc(24 * var(--u)); }
.founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 30%; border-radius: var(--radius); }
.founder__name { position: absolute; left: 8%; right: 8%; bottom: calc(-22 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); background: var(--sun); border-radius: 6px; text-align: center; transform: rotate(-1.5deg); }
.founder__name strong { display: block; font: 700 max(16px, calc(15 * var(--u)))/1.15 var(--ff-head); color: var(--teal-ink); }
.founder__name span { font-size: var(--f-small); }
.quote { font: 600 max(20px, calc(21 * var(--u)))/1.25 var(--ff-note); color: var(--teal-ink); }
.quote__by { display: block; margin-top: calc(10 * var(--u)); font: 600 var(--f-kicker)/1.3 var(--ff-head); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); }
.quote__mark { display: block; height: .6em; font: 700 2.2em/1 var(--ff-head); color: var(--gold); }

/* --- Pillars --------------------------------------------------------------
   Icon over a centred heading and text, columns ruled apart. Mission /
   Vision / Values (a pale band), Liberia's four areas, Contact's three. */
.pillars { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); padding-block: calc(24 * var(--u)); }
.pillars--band { background: var(--sky-pale); }
.pillar { padding: 0 calc(22 * var(--u)); text-align: center; }
.pillar + .pillar { border-left: 1px solid rgb(2 105 123 / .25); }
.pillar__icon { width: calc(62 * var(--u)); min-width: 48px; margin: 0 auto calc(10 * var(--u)); }
.pillar__title { font: 700 max(20px, calc(22 * var(--u)))/1.15 var(--ff-head); color: var(--teal-ink); }
.pillars--band .pillar__title::after { content: ""; display: block; width: calc(50 * var(--u)); height: 4px; margin: calc(7 * var(--u)) auto 0; border-radius: 3px; background: var(--gold); }
.pillar p { margin-top: calc(8 * var(--u)); font-size: var(--f-small); line-height: 1.45; }
.pillar .checks { display: inline-grid; text-align: left; }

/* A check list; the check takes the program's colour. */
.checks { display: grid; gap: calc(5 * var(--u)); margin-top: calc(12 * var(--u)); font-size: var(--f-list); line-height: 1.35; }
.checks li { position: relative; padding-left: 1.7em; }
.checks li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.2em; height: 1.2em; border-radius: 50%; background: url(/assets/img/kg2-tick.png) center / 58% no-repeat, var(--check, var(--teal)); }  /* the pack's white tick on the list colour */
.checks--gold { --check: var(--gold); }
.checks--red { --check: var(--red); }
.checks--green { --check: var(--green); }

/* --- Program card, extended ------------------------------------------------
   Programs and Get Involved draw Home's card with a kicker, a paragraph, a
   check list and a button (programs-948: cards x 32-318 / 336-617 / 635-915). */
.program--full { padding-bottom: calc(20 * var(--u)); }
.program--full .program__title { text-align: center; padding: calc(4 * var(--u)) calc(16 * var(--u)) 0; margin-top: calc(4 * var(--u)); }
/* The icon straddles the photo's bottom edge in flow (half its width up),
   so the title below it can never be painted over at any width. */
.program--full .program__icon { position: relative; top: auto; left: calc(14 * var(--u)); width: max(52px, calc(66 * var(--u))); margin-top: calc(-0.5 * max(52px, calc(66 * var(--u)))); }
.program__kicker { margin-top: calc(4 * var(--u)); padding-inline: calc(16 * var(--u)); text-align: center; font: 700 var(--f-kicker)/1.3 var(--ff-head); letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }
.program__text { margin-top: calc(10 * var(--u)); padding-inline: calc(18 * var(--u)); font-size: var(--f-list); line-height: 1.45; }
.program--full .checks { padding-inline: calc(18 * var(--u)); }
.program__cta { margin: auto calc(18 * var(--u)) 0; padding-top: calc(16 * var(--u)); display: flex; justify-content: center; }
.btn--green { background: var(--green); color: var(--white); }
.programs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* An icon-topped card with no photograph: Colorado's services, Donate's
   ways to give. */
.icon-card { display: flex; flex-direction: column; align-items: center; padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u)); text-align: center; background: var(--white); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(24 37 77 / .08), 0 4px 14px rgb(24 37 77 / .08); }
.icon-card > img { width: calc(66 * var(--u)); min-width: 52px; }
.icon-card h3 { margin-top: calc(10 * var(--u)); font: 700 var(--f-h3-card)/1.2 var(--ff-head); color: var(--teal-ink); }
.icon-card p { margin: calc(8 * var(--u)) 0 calc(14 * var(--u)); font-size: var(--f-list); line-height: 1.45; }
.icon-card .btn { margin-top: auto; }

/* --- Photo tiles with a brushed caption (liberia-948) ----------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--u)); margin-top: calc(18 * var(--u)); }
.tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
/* Below the photograph rather than over its edge as drawn: a caption laid on
   the picture reads its ground as the picture (check:derived). */
.tile figcaption { position: relative; margin: calc(6 * var(--u)) calc(12 * var(--u)) 0; padding: calc(5 * var(--u)) calc(8 * var(--u)); background: #FBF3D8; border-radius: 4px; text-align: center; font: 600 max(17px, calc(15 * var(--u)))/1.2 var(--ff-note); color: var(--teal-ink); transform: rotate(-1.5deg); }
/* The same row, uncaptioned, of portrait photographs cut like .pair (Colorado's 26 Sep outreach). */
.tiles--portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

/* --- A three-part band: copy | photo with a note | copy (liberia-948) ------ */
.band3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1fr); }
.band3__sky, .band3__sun { padding: calc(24 * var(--u)) calc(26 * var(--u)); }
.band3__sky { background: var(--sky-soft); }
.band3__sun { background: #FDCF48; }
.band3__photo { position: relative; display: grid; align-items: center; padding: calc(12 * var(--u)); background: linear-gradient(to right, var(--sky-soft) 50%, #FDCF48 50%); }
.band3__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 4px solid var(--white); }
.band3 h2 { font: 700 max(22px, calc(24 * var(--u)))/1.15 var(--ff-head); color: var(--teal-ink); }
.band3 p { margin-top: calc(10 * var(--u)); font-size: var(--f-small); line-height: 1.45; }
.band3 .btn { margin-top: calc(16 * var(--u)); }
.band3__row { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(16 * var(--u)); }
.band3__row .btn { margin-top: 0; }
.band3__row img { width: calc(46 * var(--u)); min-width: 40px; }

/* --- Split band: a photo on one side, sky copy on the other (programs,
   donate, get-involved). ----------------------------------------------------- */
.photo-band { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; background: var(--sky-soft); }
/* Landscape photographs, so the frame is 4:3 rather than the column's height
   (check:layout: a tall column starved them to 40%). */
.photo-band__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.photo-band__copy { padding: calc(26 * var(--u)) calc(40 * var(--u)); align-self: center; }
.quote-card { margin-top: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)); background: #FBF3D8; border-radius: calc(10 * var(--u)); }
.support-list { display: grid; gap: calc(10 * var(--u)); margin-top: calc(12 * var(--u)); }
.support-list li { display: grid; grid-template-columns: max(28px, calc(34 * var(--u))) minmax(0, 1fr); column-gap: calc(12 * var(--u)); align-items: start; }
.support-list img { width: 100%; }
.support-list strong { display: block; font: 700 max(17px, calc(15 * var(--u)))/1.2 var(--ff-head); color: var(--teal-ink); }
.support-list span { font-size: var(--f-list); }

/* --- Stats (impact-948: a cream band, four ruled columns) ------------------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: calc(18 * var(--u)); background: var(--cream); }
.stat { padding: 0 calc(12 * var(--u)); text-align: center; }
.stat + .stat { border-left: 1px solid rgb(2 105 123 / .2); }
.stat img { width: calc(40 * var(--u)); min-width: 34px; margin: 0 auto; }
.stat strong { display: block; margin-top: calc(4 * var(--u)); font: 700 max(26px, calc(24 * var(--u)))/1.1 var(--ff-head); color: var(--teal-ink); }
.stat span { font-size: var(--f-small); line-height: 1.35; }

/* --- Story cards (impact-948, colorado-springs-948) ------------------------- */
.stories { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.story { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgb(24 37 77 / .08), 0 4px 14px rgb(24 37 77 / .08); }
.story__media { position: relative; }
.story__media > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.story__media .pair { gap: 2px; }
.story__media .pair img { border-radius: 0; aspect-ratio: 4 / 5; }
.story__tag { position: absolute; left: 0; bottom: calc(8 * var(--u)); padding: 3px calc(12 * var(--u)); background: var(--teal); color: var(--white); border-radius: 0 999px 999px 0; font: 700 max(12px, calc(9 * var(--u)))/1.3 var(--ff-head); letter-spacing: .04em; text-transform: uppercase; }
.story__body { display: flex; flex-direction: column; flex: 1; padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); }
.story__date { font-size: var(--f-list); color: #5A6480; }
.story h3 { margin-top: calc(4 * var(--u)); font: 700 var(--f-h3-card)/1.2 var(--ff-head); color: var(--teal-ink); }
.story p { margin-top: calc(6 * var(--u)); font-size: var(--f-list); line-height: 1.45; }
.story[hidden] { display: none; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter button { min-height: 44px; padding: 0 18px; border: 2px solid var(--teal); border-radius: var(--pill); background: var(--white); font: 700 15px/1.2 var(--ff-body); color: var(--teal-ink); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--teal); color: var(--white); }
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: calc(16 * var(--u)); }

/* --- Quote band (impact-948: a photograph under a dark wash, the words in
   the white hand) ------------------------------------------------------------ */
.quote-band { position: relative; overflow: hidden; display: grid; align-items: center; min-height: calc(150 * var(--u)); padding: calc(24 * var(--u)) calc(60 * var(--u)) calc(24 * var(--u)) calc(260 * var(--u)); color: var(--white); background: var(--teal-deep); }
.quote-band > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.quote-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgb(4 60 70 / .45), rgb(4 60 70 / .92) 40%); }
.quote-band blockquote { position: relative; z-index: 2; }
.quote-band .quote { position: relative; color: var(--white); font-size: max(22px, calc(24 * var(--u))); }
.quote-band .quote__by { color: var(--white); }

/* --- Closing call to action: a real photograph under the teal wash, the
   script title, a line and the buttons. The mockups draw generated
   landscapes here; the client's own photographs stand in (BRIEF.md). ------- */
.cta-band { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: calc(30 * var(--u)); align-items: center; padding: calc(36 * var(--u)) calc(52 * var(--u)) calc(40 * var(--u)); color: var(--white); background: var(--teal-deep); }
.cta-band > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(3 55 66 / .82), rgb(3 55 66 / .9)); }
.cta-band > :not(img) { position: relative; z-index: 2; }
.cta-band__title { font: 400 var(--f-script-band)/1.05 var(--ff-script); color: var(--sun-script); transform: rotate(-4deg); }
.cta-band__title span { display: block; padding-left: 1.2em; color: var(--white); }
.cta-band p { font-size: var(--f-lede); line-height: 1.4; }
.cta-band .btn-row { margin-top: calc(16 * var(--u)); }

/* --- Contact (contact-1024) ---------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: calc(22 * var(--u)); align-items: start; }
.locations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14 * var(--u)); margin-top: calc(16 * var(--u)); }
.loc { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgb(24 37 77 / .08), 0 4px 14px rgb(24 37 77 / .08); }
.loc__media > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.loc__media .pair { gap: 2px; }
/* Two 4:5 halves make the same 16:10 as the Liberia card beside it. */
.loc__media.pair > img { border-radius: 0; aspect-ratio: 4 / 5; }
.loc__body { padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
.loc h3 { font: 700 max(22px, calc(22 * var(--u)))/1.15 var(--ff-head); color: var(--teal-ink); }
.loc__sub { margin-top: 2px; font: 600 var(--f-small)/1.3 var(--ff-head); color: var(--teal-ink); }
.loc p { margin-top: calc(8 * var(--u)); font-size: var(--f-list); line-height: 1.45; }
.loc__facts { display: grid; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); font-size: var(--f-list); line-height: 1.4; }
.loc__facts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.loc__facts img { width: 26px; }
.loc__facts a { font-weight: 700; color: var(--teal-ink); text-decoration: none; }
.loc__facts a:hover { text-decoration: underline; }

.panel { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(22 * var(--u)); background: var(--white); border-radius: var(--radius); box-shadow: 0 1px 2px rgb(24 37 77 / .08), 0 4px 14px rgb(24 37 77 / .08); }
.panel h2 { font: 700 max(22px, calc(24 * var(--u)))/1.15 var(--ff-head); color: var(--teal-ink); }
.panel > p { margin-top: calc(8 * var(--u)); font-size: var(--f-list); line-height: 1.45; }
/* Donate's PayPal panel: not in the mockup (her QR arrived 25 Sep), so it is
   built from the panel and icon-card values above, not measured. The button
   is her PayPal.me link (26 Sep), which works on any device; the QR is for a
   phone held up to the screen. The foundation's Zelle and Venmo (texted 25 Sep,
   emailed 28-29 Sep) are the same panel, one each; Cash App was too, until she
   asked for it off on 1 Oct. Zelle has no
   button: its code only opens inside a bank's app. */
.paypal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(26 * var(--u)); align-items: center; max-width: max(calc(590 * var(--u)), 34em); margin: calc(22 * var(--u)) auto 0; }
.paypal p { margin-top: calc(8 * var(--u)); font-size: var(--f-list); line-height: 1.45; }
.paypal__app { margin-top: calc(14 * var(--u)); }
.paypal__qr { width: max(150px, calc(150 * var(--u))); }
.form { display: grid; gap: 14px; margin-top: calc(16 * var(--u)); }
.field label { display: block; margin-bottom: 5px; font: 700 15px/1.2 var(--ff-body); color: var(--teal-ink); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1.5px solid #B9D3D8; border-radius: 8px; background: var(--white); font: 500 16px/1.4 var(--ff-body); color: var(--navy); }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgb(2 105 123 / .18); }
/* What is missing goes red, and says so (CONTACT-FORMS.md): the attribute
   drives the border, and .field__error carries the meaning. */
.field input[aria-invalid='true'], .field select[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--red); }
.field__error { margin-top: 5px; font-size: 14px; font-weight: 700; color: #B01C23; }
.form .btn { width: 100%; border: 0; cursor: pointer; }
.form .btn[disabled] { opacity: .6; cursor: default; }
.form__status { min-height: 1.4em; font-size: 15px; font-weight: 700; text-align: center; }
.form__status--ok { color: #2F6B23; }
.form__status--bad { color: #B01C23; }
.form__note { font-size: 14px; text-align: center; color: #5A6480; }
.hp { position: absolute; left: -9999px; }

.script-inline { display: block; font: 400 1.45em/1 var(--ff-script); color: var(--teal-ink); }
.stories--square .story__media > img { aspect-ratio: 1; }
.notfound { padding-block: calc(190 * var(--u)) calc(70 * var(--u)); }  /* clears the crest: top 5 + ~175 tall */
.notfound .btn-row { margin-top: 24px; }

/* ===========================================================================
   Structure below the drawn width. Breakpoints change structure only;
   sizes ramp through --u and their floors (PAGE.md, MOBILE.md 1).
   =========================================================================== */

/* The seven links and Donate stop fitting beside the crest at 1100. */
@media (max-width: 1100px) {
  /* Teal to the top on phones and tablets (Jacob, 24 Sep): a white bar above a teal hero read as a stray strip. */
  .site-header { align-items: center; height: 76px; padding-right: 16px; background: var(--teal-deep); }
  .brand { width: 131px; top: 6px; left: 16px; }  /* 104 x 1.258: the same ring, fingers now included */
  .note--header { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
    border: 2px solid var(--white); border-radius: var(--pill); background: transparent;
    font: 700 16px/1.2 var(--ff-body); color: var(--white); cursor: pointer;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .site-nav {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 16px 24px;
    background: var(--paper); box-shadow: 0 12px 24px rgb(0 0 0 / .15);
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { padding: 13px 4px; font-size: 18px; border-bottom: 1px solid rgb(24 37 77 / .1); }
  .site-nav ul a[aria-current="page"] { border-bottom-color: var(--gold); }
  .site-nav__contact { display: block; }
  .btn--nav { min-height: 48px; font-size: 17px; }
  .hero__copy { padding-top: calc(92px + 40 * var(--u)); }
}

/* Four cards across stop fitting their lists: two by two. */
@media (max-width: 1100px) {
  .programs--4, .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .stat:nth-child(3) { border-left: 0; }
  .pillars[style*="--cols: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .pillars[style*="--cols: 4"] .pillar:nth-child(3) { border-left: 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  /* No captions to clear, so rows sit at the columns' own gap. */
  .tiles--portrait { row-gap: calc(10 * var(--u)); }
  .band3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band3__photo { grid-column: 1 / -1; grid-row: 1; background: var(--sky-soft); max-width: 640px; justify-self: center; width: 100%; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .quote-band { padding-left: calc(120 * var(--u)); }
  .founder { grid-template-columns: minmax(0, 1fr); }
  /* Taller hero here (the menu row), so the photograph spans the band and
     fades under the copy rather than being cropped to a sliver. */
  .hero--page .hero__photo { width: 100%; -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 30%, #000 70%); mask-image: linear-gradient(to right, transparent 0, transparent 30%, #000 70%); }
  /* ...except from 761 up, where it sits beside the copy as on desktop (Jacob, 24 Sep): the overlay ghosted faces. */
  .founder__photo { max-width: 360px; }
  .notfound { padding-top: 48px; }
}

/* Four action buttons stop fitting on one row beside the heading's column,
   three program cards stop fitting their lists (check:layout, 761px), and
   the mission note stops having room beside the centred heading. */
@media (min-width: 761px) and (max-width: 1100px) {
  /* Tablet spacing floors, as on phones (Jacob, 24 Sep). */
  .hero__copy { padding-top: calc(44px + 30 * var(--u)); }
  .intro { padding: 48px 32px 8px; }
  .intro .heading:nth-of-type(2) { margin-top: 48px; }
  .intro__text, .intro__sub { margin-top: 14px; }
  .section { padding-block: 56px; }
  .section__head { margin-bottom: 24px; }
  .place p { margin-top: 10px; }
  .place .btn { margin-top: 20px; }
  .hero--page .hero__photo, .hero--page .hero__photos { width: calc(60% - 30px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%); mask-image: linear-gradient(to right, transparent 0, #000 10%); }
}
@media (max-width: 1000px) {
  .involve__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .programs { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 640px; margin-inline: auto; }
  .program__icon { top: auto; margin-top: -34px; position: relative; left: 12px; width: 60px; box-shadow: 0 0 0 4px var(--white); }
  .program__title { margin-top: -24px; padding-left: 84px; min-height: 30px; }
  .note--mission { display: none; }  /* decorative; no room beside the centred heading */
}

/* The hero copy stops having a clear field left of the photograph (MOBILE.md 11). */
@media (max-width: 760px) {
  /* Stacked under its .pair, the row reads as that grid carried on. */
  .tiles--portrait { gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)); }
  .hero--home, .hero--page { display: flex; flex-direction: column; min-height: 0; }
  .hero__photo { position: relative; order: 2; width: 100%; height: auto; aspect-ratio: 16 / 9; -webkit-mask-image: none; mask-image: none; }
  .hero__copy { display: contents; }
  /* Ramps solved through (320, floor) and (760, the desktop value there):
     35.7 = 44.5u and 66.5 = 83u at 760 (MOBILE.md 1). */
  .hero__title { order: 1; padding: 96px 16px 0; font-size: clamp(30px, calc(1.295vw + 25.85px), 35.7px); }
  .hero__script { font-size: clamp(56px, calc(2.386vw + 48.36px), 66.5px); }
  .hero__lede { order: 1; max-width: none; padding: 0 16px 20px; margin-top: 18px; }
  .hero__copy .btn { order: 3; margin: 20px 16px 0; }
  .hero__values { order: 4; justify-content: space-between; gap: 12px; margin: 22px 16px 60px; }
  .hero__values .glyph { width: 28px; }

  /* Phone spacing floors (Jacob, 24 Sep). The desktop values are in --u, which shrinks to ~0.4px
     here, so gaps between sections and headings collapsed to 5-8px on every page. */
  .brand { width: 106px; }
  .hero__title { padding-top: 36px; }
  .intro { padding: 40px 16px 8px; }
  .intro .heading:nth-of-type(2) { margin-top: 44px; }
  .intro__text, .intro__sub { margin-top: 14px; }
  .heading--center::after, .heading--left::after { margin-top: 10px; }
  .place p { margin-top: 10px; }
  .place .btn { margin-top: 22px; }


  .places { grid-template-columns: minmax(0, 1fr); gap: 60px; }
  .place--liberia, .place--colorado { grid-template-columns: minmax(0, 1fr); border-radius: 0; padding: 24px 16px; }
  .place--colorado .place__photo { order: -1; }
  .place__photo { aspect-ratio: 4 / 3; }
  .place--colorado .place__photo { aspect-ratio: 1; object-position: 50% 45%; }
  .places__globe { width: 76px; }

  .people__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .people__grid > img, .people__feature > img { height: auto; min-height: 0; }
  .note--tile { bottom: 12px; }

  .involve { grid-template-columns: minmax(0, 1fr); padding: 40px 16px 32px; border-radius: 24px 24px 0 0; }
  .involve__title { font-size: 58px; width: max-content; }
  .involve__text { max-width: none; margin-top: 18px; }
  .involve__actions { margin-top: 22px; }

  .section { padding: 52px 16px; }
  .section__head { margin-bottom: 24px; }
  .prose > * + *, .heading + .prose, .heading + p { margin-top: 14px; }
  .split, .founder, .photo-band, .cta-band { grid-template-columns: minmax(0, 1fr); }
  .founder__photo { max-width: 420px; }
  .pillars { grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px; padding-inline: 16px; }
  .pillar { padding: 0; }
  .pillar + .pillar { border-left: 0 !important; border-top: 1px solid rgb(2 105 123 / .25); padding-top: 24px; }
  .programs--4, .stories, .locations { grid-template-columns: minmax(0, 1fr); }
  .paypal { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; margin-top: 28px; padding: 24px 16px; }
  .paypal p { margin-top: 10px; }
  .paypal__app { margin-top: 18px; }
  .band3 { grid-template-columns: minmax(0, 1fr); }
  .band3__sky, .band3__sun { padding: 28px 16px; }
  .photo-band__copy { padding: 28px 16px; }
  .cta-band { padding: 40px 16px; gap: 18px; }
  .cta-band__title { font-size: 44px; margin-bottom: 10px; }  /* rotated -4deg: its corner dips into the line below */
  .cta-band .btn-row .btn { flex: 1 1 100%; }
  .quote-band { padding: 40px 16px; }
  .quote-band::before { background: rgb(4 60 70 / .82); }
  .note--corner { left: 8px; bottom: -14px; }
  .note--right { left: auto; right: 8px; }
  .hero__photos { position: relative; order: 2; width: 100%; height: auto; -webkit-mask-image: none; mask-image: none; }
  .hero__photos img { aspect-ratio: 3 / 4; height: auto; }
  .hero--page .hero__photo { -webkit-mask-image: none; mask-image: none; }  /* the 1100 fade is for the overlay, not the stacked band */
  .hero--page .hero__title { font-size: clamp(30px, calc(0.818vw + 27.38px), 33.6px); }  /* 33.6 = 41u at 760 */
  .hero--page .hero__script { font-size: clamp(40px, calc(1.705vw + 34.55px), 47.5px); }  /* 47.5 = 58u at 760 */
  .hero--page .hero__lede { max-width: none; }
  .hero--page .hero__copy { padding: 0; }
  .hero--page .hero__lede { padding-bottom: 28px; }

  .site-footer { padding: 32px 16px 20px; }
  .site-footer__row { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .note--footer { transform: rotate(-6deg); }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { border-left: 0; border-top: 1px solid rgb(2 105 123 / .2); padding-top: 16px; }
  .involve__actions { grid-template-columns: minmax(0, 1fr); }
  .hero__values span { font-size: 14px; }
}