/* ==========================================================================
   Good Neighbors Food Pantry — Design System
   Warm, dignified, accessible. One stylesheet for the whole site.
   Edit colors/spacing here; everything else inherits.
   ========================================================================== */

/* Hide first paint while a saved scroll position is being restored (refresh-at-bottom). */
html.gn-scroll-pending body { visibility: hidden; }
/* Hide first paint while a pending translation is applied, so a non-English
   visitor never sees the English page flash past. Set and cleared in
   scroll-prestore.js; capped there so the page always reveals. */
html.gn-i18n-pending body { visibility: hidden; }

/* ---- Design tokens — Harvest (golden-hour workbench) -------------------- */
:root {
  /* Harvest palette: one flame orange against warm neutrals */
  --flame:     #fa5d00;   /* bright accent — large display type, fills, focus, decorative */
  --flame-600: #e15300;   /* hover, ~10% darker */
  --flame-700: #c44800;   /* AA-safe flame for white text on flame & flame text on light (≥4.5:1) */
  --flame-800: #a23a00;   /* hover/pressed for flame-700 CTAs & links; AA on marigold too */
  --marigold:  #fee3b5;   /* soft warm highlight wash */
  --peach-100: #ffe6cf;   /* light orange tint — hovers, icon tiles */
  --peach-050: #fff3e8;   /* very light warm section bg */
  --parchment-shadow: #e3d6c5;

  --cream:     #fff8f1;   /* page background — the cream canvas IS the brand */
  --surface:   #ffffff;   /* paper-white cards & elevated panels */
  --surface-2: #fdf3e8;   /* warm soft surface */

  --ink:       #1d1e1c;   /* warm near-black — headings, primary text */
  --ink-soft:  #615f5c;   /* warm stone — body copy */
  --muted:     #73706b;   /* driftwood — tertiary / metadata (AA: ~4.7:1 on cream) */
  --line:      #d9d9d9;   /* mist gray — hairline dividers */
  --line-input:#c0bbb6;   /* bone — input borders at rest */

  --focus:     #fa5d00;

  /* Back-compat aliases — existing component rules cascade onto the Harvest
     scheme without rewriting every selector. */
  --green-900: var(--ink);
  --green-700: var(--flame);
  --green-600: var(--flame-600);
  --green-100: var(--peach-100);
  --green-050: var(--peach-050);
  --amber-600: var(--flame);
  --amber-500: #f4a35c;
  --amber-100: var(--marigold);

  /* Typography */
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;   /* serif display — matches the page heroes */
  --font-head: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1200px;
  --maxw-narrow: 760px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  /* warm-tinted shadows — never cold/neutral */
  --shadow-sm: rgba(0, 0, 0, .12) 0 1px 4px;
  --shadow-md: rgba(250, 166, 0, .18) 4px 4px 18px, rgba(31, 23, 8, .05) 0 2px 8px;
  --shadow-lg: rgba(250, 166, 0, .25) 6px 4px 24px, rgba(31, 23, 8, .07) 0 10px 28px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --header-h: 76px;
}

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html:focus-within { scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--cream);
  line-height: 1.6;
  font-size: 1.0625rem;
  letter-spacing: .015em;   /* Harvest tracks MuotoWeb wide for a friendlier geometric sans */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--flame-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Long unbreakable strings (email addresses, URLs) are wider than a 320px
   phone; break them rather than pushing the page sideways. */
p, li, dd, address, a, .hero__sub { overflow-wrap: break-word; }
/* Grid items default to min-width:auto, so one long token (an email address)
   sets the whole column's minimum and the page scrolls sideways on a 320px
   phone. Let the tracks shrink; the rule above then breaks the token. */
.split > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .detail-grid > *, .steps > *, .stats > * { min-width: 0; }
a:hover { color: var(--flame-800); }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.16; color: var(--ink); letter-spacing: -0.005em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p { color: var(--ink-soft); }
/* Keep description paragraphs from crowding section headings (matches .section-head .lead). */
h2 + p { margin-top: var(--space-3); }
h3 + p { margin-top: var(--space-3); }

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

/* ---- Utilities ---------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.narrow { max-width: var(--maxw-narrow); }
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.bg-cream { background: var(--cream); }
.bg-surface { background: var(--surface); }
.bg-soft { background: var(--surface-2); }
.bg-green { background: var(--green-050); }
.text-center { text-align: center; }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .8rem;
  color: var(--amber-600);
  margin-bottom: .6rem;
}
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); }
.section-head { max-width: 680px; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.section-head.text-center { margin-inline: auto; }
.section-head .lead { margin-top: var(--space-3); }
.muted { color: var(--muted); }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2);} .mt-3{margin-top:var(--space-3);} .mt-4 { margin-top: var(--space-4);} .mt-5{margin-top:var(--space-5);}
.mb-0 { margin-bottom: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Spam honeypot. Unlike .sr-only this must stay hidden from assistive tech
   too - it is a bot trap, not content. api/forms.js drops any submission
   where the `website` field is filled in. */
.hp {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--green-900); color: #fff; padding: .6rem 1rem; border-radius: 8px;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; color:#fff; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: 1rem; line-height: 1; letter-spacing: .015em;
  padding: .9rem 1.5rem; border-radius: var(--radius); border: 1.5px solid transparent;
  text-decoration: none; transition: transform .12s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* Primary CTA — the single most important element: flame fill, white text */
.btn--primary { background: var(--flame-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--flame-800); color: #fff; box-shadow: var(--shadow-md); }
.btn--accent { background: var(--flame-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--flame-800); color: #fff; box-shadow: var(--shadow-md); }
/* Secondary — clean bordered button on the warm canvas */
.btn--ghost { background: transparent; color: var(--flame-700); border-color: var(--flame-700); }
.btn--ghost:hover { background: var(--peach-050); color: var(--flame-800); border-color: var(--flame-800); }
/* On peach-tinted "green" sections the peach-050 hover blends into the bg — use a stronger tint so the hover stays visible */
.bg-green .btn--ghost:hover { background: var(--peach-100); }
.btn--white { background:#fff; color: var(--ink); }
.btn--white:hover { background: var(--cream); color: var(--ink); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn.is-unset { opacity: .55; pointer-events: none; }
/* The longest labels ("See our full impact, month by month") are wider than a
   320px phone, and `nowrap` turned that into page-wide horizontal scroll. Below
   380px let button labels wrap instead. */
@media (max-width: 380px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; }
}

/* ---- Segmented control -------------------------------------------------- */
.segmented { display: inline-flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 4px; padding: 5px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.segmented__btn { flex: 0 1 auto; appearance: none; border: 0; background: transparent; color: var(--ink-soft);
  font-weight: 600; font-size: .95rem; line-height: 1.2; padding: .6rem 1rem; border-radius: var(--radius-pill);
  white-space: nowrap; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
@media (max-width: 560px) {
  .segmented { border-radius: 22px; }
  .segmented__btn { font-size: .85rem; padding: .55rem .8rem; }
}
.segmented__btn[aria-selected="true"] { background: var(--flame); color: #fff; box-shadow: var(--shadow-sm); }
.segmented__btn[aria-selected="false"]:hover { color: var(--ink); }
/* Keep the switcher tight against its panels — no big gap below the control. */
.audience-switch { padding-bottom: 0; }
.tabpanel > section:first-child { padding-top: clamp(1.5rem, 4vw, 2.25rem); }

/* ---- Header / nav ------------------------------------------------------- */
/* Header is now a 2-row structure; both rows are full width with side padding only. */
.site-header { position: sticky; top: 0; z-index: 100; }

.utility-strip { background: var(--ink); color: #fff; font: 500 13.5px/1.3 var(--font-body); }
.utility-strip__inner {
  padding: 11px clamp(1.1rem, 4vw, 2rem);
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
/* The strip has two explicit shapes rather than one row left to wrap on its
   own, because machine translations differ wildly in length (中文 is short,
   Português and Kreyòl are long) and self-wrapping made the header 1 line in
   some languages and 2 in others on the same screen.

   Narrow  — sentence stacked over the buttons, both centred.
   Wide    — a single row with the buttons parked on the right.
   The switch happens at a width where even the longest translation still fits
   on one line (see the min-width rule below), so every language changes shape
   at the same place. */
.utility-strip__promo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; color: #fff; text-decoration: none;
}
.utility-strip__info {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .3rem .6rem; text-align: center;
}
.utility-strip__actions { display: flex; align-items: center; justify-content: center; gap: .5rem; }
/* One line, buttons right. 1100px is chosen with headroom: the longest
   translation measured needs ~890px for text + buttons + padding, so no
   language wraps here — and `nowrap` guarantees it even if a future
   translation runs longer. */
@media (min-width: 1100px) {
  /* One centered cluster: countdown + date + time + both buttons sit together,
     centered as a group (no stretched middle pushing the buttons to the edge). */
  .utility-strip__promo { flex-direction: row; width: 100%; gap: 1rem; justify-content: center; }
  .utility-strip__info { flex: none; flex-wrap: nowrap; white-space: nowrap; }
  .utility-strip__actions { flex: none; }
}
/* On phones the strip is a single line: the date/time (__when) is dropped in
   this band — see the rule after the base declarations below — leaving just the
   countdown sentence. Every enabled translation of that sentence
   ("Next food pantry in N days" → Español/Português/Việt/Kreyòl/中文) fits on one
   line down to ~340px, so no second line is reserved and the header is the same
   height in every language without any wasted vertical space. (Only below ~330px
   does the longest, Português, wrap; that extreme-narrow edge is left to reflow.)
   The date is not lost: the hero callout carries it far more prominently. */
.utility-strip__label { font-weight: 700; }
.utility-strip__count-prefix { opacity: .85; }
.utility-strip__count { font-weight: 700; }
.utility-strip__sep { opacity: .5; }
.utility-strip__when { display: inline-flex; align-items: center; gap: .6rem; }
/* Drop the date/time on phones. This MUST come after the base rule above:
   media queries add no specificity, so an earlier @media display:none loses to
   this later declaration and the date leaks back onto phones (a 3rd line in
   verbose languages, breaking the equal-height goal). Keep it last. */
@media (max-width: 760px) {
  .utility-strip__sep, .utility-strip__when { display: none; }
}
.utility-strip__div { width: 1px; height: 13px; background: rgba(255,255,255,.35); border-radius: 1px; }
.utility-strip__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 2px 11px; border: 1px solid var(--flame-700); border-radius: var(--radius);
  background: var(--flame-700); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 12.5px; transition: background .15s, border-color .15s, filter .15s;
}
.utility-strip__cta:hover { filter: brightness(.92); color: #fff; }
.utility-strip__cta svg { width: 14px; height: 14px; flex-shrink: 0; }
.utility-strip.is-tbd .utility-strip__count,
.utility-strip.is-tbd .utility-strip__count-prefix,
.utility-strip.is-tbd .utility-strip__sep,
/* Hide the whole row, not just the buttons, so it stops contributing its gap. */
.utility-strip.is-tbd .utility-strip__actions,
.utility-strip.is-tbd .utility-strip__cta { display: none; }

/* ---- Language switcher --------------------------------------------------
   Lives in the utility strip and stays visible at every breakpoint. The
   labels inside are each written in their own language, so this control must
   never be hidden or icon-only — a neighbour who cannot read English needs to
   recognise it on sight. ---------------------------------------------------- */
.gn-lang { position: relative; margin-left: auto; }
/* The placeholder ships empty and is filled (or removed) by deferred i18n.js.
   Left in flow while empty its `margin-left:auto` + the strip's gap shove the
   promo hard left, so the whole strip jumps right once i18n.js runs. Take it
   out of layout until it actually has content. */
.gn-lang:empty { display: none; }
.gn-lang__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 3px 10px; border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius);
  background: transparent; color: #fff; cursor: pointer;
  font: 600 12.5px/1.3 var(--font-body);
  transition: background .15s, border-color .15s;
}
.gn-lang__btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }
.gn-lang__btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.gn-lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120;
  min-width: 168px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.gn-lang__menu[hidden] { display: none; }
.gn-lang__opt {
  display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: calc(var(--radius) - 2px);
  background: transparent; color: var(--ink); text-align: left; cursor: pointer;
  font: 500 14px/1.3 var(--font-body);
}
.gn-lang__opt:hover { background: var(--sand, rgba(0,0,0,.05)); }
.gn-lang__opt.is-active { font-weight: 700; background: rgba(0,0,0,.06); }

/* ---- GTranslate float switcher: make it instant --------------------------
   GTranslate's own CSS puts a 0.8s ease on the language list and a 0.5s fade on
   the switcher itself, so the languages drift in long after the click. A
   neighbour looking for their language should see it the moment they ask.
   Kill both transitions; keep a 90ms rise on the list purely so it reads as
   "opened" rather than "was always there" — short enough to land inside the
   same perceptual moment as the click, so nothing is ever waited on. --------- */
.gt_float_switcher { transition: none !important; }
/* The list is faded in by GTranslate's own script on a timer, not just by CSS,
   so the transition override alone still leaves it invisible for a beat after
   the click. Pin it opaque; `display` is what actually opens and closes it. */
.gt_float_switcher .gt_options { transition: none !important; opacity: 1 !important; }
/* GTranslate caps the list at 250px with overflow:auto, and our seven languages
   render 240px — close enough to the cap that a slightly larger font or one zoom
   step turns it into a scrolling box. Seven items should never scroll. A plain
   `none` would strand the list off-screen on a very short window, so the cap
   becomes the viewport instead: 240px never reaches it above a ~360px-tall
   window, and below that it degrades to scrolling rather than unreachable. */
.gt_float_switcher .gt_options { max-height: calc(100vh - 120px) !important; }
/* No open animation, deliberately. A transform on this element bobs it: the
   list is opened and closed by toggling `display`, which restarts any animation
   declared here on every toggle, and a throttled frame can leave it parked on
   the animation's first keyframe — a few pixels off — until something else
   repaints. The list simply appears. */
.gt_float_switcher .gt_options { animation: none !important; transform: none !important; }

/* Both translation widgets inject a banner iframe and shove <body> down ~40px,
   which would break the sticky header and every scroll offset on the site. */
.skiptranslate { display: none !important; }
body { top: 0 !important; }
/* Google's widget mount point must stay in the layout to initialise, so it is
   hidden by clipping rather than display:none. */
#google_translate_element { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.nav-bar { position: relative; background: rgba(255,248,241,.85); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); }
.nav-bar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 74px; padding: 0 clamp(1.1rem, 4vw, 2rem);   /* full width, no max-width */
}

@media (max-width: 560px) {
  /* keep the strip compact on phones; the whole bar stays a tappable map link */
  .utility-strip { font-size: 12.5px; }
  /* The actions row goes too, not just its buttons, so it stops contributing
     its row gap and the strip collapses cleanly to one line on phones. */
  .utility-strip__actions, .utility-strip__cta, .utility-strip__sep { display: none; }
  /* The CTAs drop out here, so the switcher joins the centred group rather
     than being pushed to a lonely right edge. It is never hidden. */
  .gn-lang { margin-left: 0; }
  .gn-lang__menu { right: auto; left: 50%; transform: translateX(-50%); }
}

/* ---- Brand lockup ------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand:hover { color: inherit; }
.brand__name { display: flex; align-items: center; height: 52px; }
.brand__name .lk-name {
  display: block;
  font-family: "Newsreader", "Newsreader Fallback", serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--green-900);
  white-space: nowrap;
}
.brand__mark { width: 52px; height: 52px; border-radius: 999px; flex: 0 0 auto; }
/* The wordmark can't wrap, so on the narrowest phones (iPhone SE, 320px) the
   lockup plus the menu button was wider than the screen. Scale the whole
   lockup down rather than letting the row overflow. */
@media (max-width: 380px) {
  .brand__name { height: 44px; }
  .brand__name .lk-name { font-size: 1.55rem; }
  .brand__mark { width: 44px; height: 44px; }
}

.nav__menu { display: flex; align-items: center; gap: .25rem; }
.nav__links { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; }
.nav__links a {
  position: relative;
  display: inline-block; text-decoration: none; color: var(--ink);
  font-weight: 500; font-size: .98rem; padding: .55rem .7rem; border-radius: 10px;
  white-space: nowrap;
}
.nav__links > li { white-space: nowrap; }
.nav__links a:hover { background: var(--peach-050); color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--flame); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 2px;
  height: 3px; border-radius: 3px; background: var(--amber-600);
}
.nav__links a.nav__has-sub-link[aria-current="page"]::after {
  left: .7rem; right: 1.6rem;
}

/* ---- Dropdown submenu --------------------------------------------------- */
.nav__has-sub { position: relative; display: flex; align-items: center; }
.nav__has-sub > a.nav__has-sub-link { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .7rem; }
.nav__has-sub > a.nav__has-sub-link .nav__chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform .2s; }
.nav__has-sub:hover > a.nav__has-sub-link .nav__chevron { transform: rotate(180deg); }
.nav__has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 6px; }
.nav__has-sub:hover > .nav__sub { display: block; }
.nav__chevron { width: 12px; height: 12px; flex-shrink: 0; transition: transform .2s; }

.nav__sub {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); list-style: none; padding: .4rem 0; margin: 0; z-index: 101;
}
.nav__sub.open { display: block; }
.nav__sub a {
  display: block; text-decoration: none; color: var(--ink);
  font-weight: 500; font-size: .92rem; padding: .6rem 1rem; border-radius: 0;
}
.nav__sub a:hover { background: var(--peach-050); color: var(--ink); }

/* 1130px, not 960: the six desktop nav labels plus the Donate CTA need ~1128px
   to sit on one row, so anything below that overflowed the viewport and ran the
   links into the logo. Translated labels are longer still, so the hamburger
   takes over well before the row can get tight. */
@media (max-width: 1130px) {
  .nav__has-sub:hover > .nav__sub { display: none; }
  .nav__has-sub { flex-wrap: wrap; }
  .nav__has-sub > a { flex: 1; }
  .nav__sub {
    position: static; border: none; box-shadow: none;
    background: transparent; margin: 0; padding: 0 0 0 .8rem; min-width: 0; width: 100%;
  }
  .nav__sub a { font-size: 1rem; padding: .75rem .6rem; }
}

/* ---- CTA in nav -------------------------------------------------------- */
.nav__cta { margin-left: .4rem; }
.nav__toggle {
  display: none; background: transparent; border: 2px solid var(--line);
  border-radius: 10px; padding: .5rem; width: 46px; height: 44px;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 22px; height: 2.5px; background: var(--green-900); border-radius: 3px; transition: .2s;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -7px; }
.nav__toggle span::after { position: absolute; top: 7px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1130px) {
  .nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    display: none; padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.6rem;
  }
  .nav__menu.open { display: block; }
  .nav__links { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__links a { padding: .85rem .6rem; border-radius: 10px; font-size: 1.05rem; }
  .nav__links a[aria-current="page"]::after { display: none; }
  .nav__cta { margin: .8rem 0 0; }
  .nav__cta .btn { width: 100%; }
}

/* ---- Home hero ---------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 45%; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* soft fade so the photo blends into the cream on its left + top edges */
.hero__photo::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to right, var(--cream) 0%, rgba(255,248,241,.55) 16%, rgba(255,248,241,0) 38%); }
.hero__photo::after { content:""; position:absolute; left:0; right:0; top:0; height:70px; pointer-events:none;
  background: linear-gradient(to bottom, var(--cream), transparent); }

.hero__inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2.4rem,5.5vw,4.6rem) clamp(1.1rem,4vw,2rem) clamp(90px,10vw,130px); display: block; }
.hero__text { max-width: 680px; }

.hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font: 800 13px/1 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--flame); }
.hero__eyebrow svg { width: 16px; height: 16px; }

.hero h1 { font-family: "Newsreader", "Newsreader Fallback", serif; font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(2.4rem,5.2vw,4.4rem); line-height: 1.02; margin: 18px 0 0; }
.hero h1 .swoosh-wrap { position: relative; display: inline-block; }
.hero h1 .swoosh { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; }

.hero__lead { color: var(--ink-soft); font-size: clamp(1.05rem,1.4vw,1.25rem); line-height: 1.6;
  margin-top: 22px; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 30px; }
.hero__cta .btn { gap: .55rem; }            /* icon + label */
.hero__cta .btn svg { width: 19px; height: 19px; }

/* floating feature bar */
.featurebar { position: relative; z-index: 3; max-width: var(--maxw); margin: clamp(-72px,-7vw,-52px) auto clamp(40px,6vw,72px);
  padding: 0 clamp(1.1rem,4vw,2rem); }
.featurebar__card { background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: rgba(250,166,0,.16) 4px 8px 30px, rgba(31,23,8,.06) 0 12px 28px;
  display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; }
.feat { display: flex; align-items: flex-start; gap: 14px; padding: 26px; border-left: 1px solid var(--line);
  height: 100%; color: inherit; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.feat:first-child { border-left: 0; }
.feat:hover { background: var(--peach-050); }
.feat:focus-visible { outline: 2px solid var(--flame); outline-offset: -2px; }
.feat__tile { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 999px; background: var(--peach-050);
  color: var(--flame); display: flex; align-items: center; justify-content: center; }
.feat__tile svg { width: 22px; height: 22px; }
.feat__t { font: 700 1rem/1.25 var(--font-body); color: var(--ink); }
.feat__d { font: 400 .9rem/1.45 var(--font-body); color: var(--muted); margin-top: 4px; }

@media (max-width: 880px) {
  .hero { display: flex; flex-direction: column; padding-bottom: clamp(48px,9vw,72px); }
  .hero__photo { position: static; width: 100%; height: clamp(240px,42vw,360px); order: 1; }
  .hero__photo::before { background: linear-gradient(to bottom, transparent 60%, var(--cream)); }
  .hero__photo::after { display: none; }
  .hero__inner { order: 2; padding-top: clamp(1.8rem,5vw,2.6rem); padding-bottom: 0; }
  .hero__text { max-width: none; }
  .featurebar { order: 3; margin-top: clamp(28px,5vw,40px); }
  .featurebar__card { grid-template-columns: 1fr; }
  .feat { border-left: 0; }
  .feat:nth-child(n+2) { border-top: 1px solid var(--line); }
}

/* ---- Interior page hero (visit / volunteer / donate / impact / about / contact) --- */
/* Split layout: left typographic column + right single image with a flame stat pill */
.hero--page { background: var(--peach-050); }
.hero--page .hero__inner { display: grid; grid-template-columns: 1fr .92fr; gap: clamp(1.6rem, 4vw, 3.6rem);
  align-items: center; max-width: var(--maxw); padding-block: clamp(1.8rem, 3.5vw, 2.8rem); }
.hero--page .hero__text { max-width: none; }
.hero--page h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin: 0; }
.hero--page h1 .swoosh-wrap { position: relative; display: inline-block; }
.hero--page h1 .hero__swoosh { position: absolute; left: 0; bottom: -.12em; width: 100%; height: .34em; overflow: visible; display: block; }
.hero--page .hero__sub { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.2rem,2.2vw,1.5rem); color: var(--ink); margin-top: 1.1rem; line-height: 1.35; }
.hero--page p { margin-top: 1rem; max-width: 48ch; }
.hero--page .hero__shot { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-sm); }
.hero--page .hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) {
  .hero--page .hero__inner { grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2rem); }
  .hero--page .hero__shot { aspect-ratio: 16 / 10; }
}

/* ---- Stats -------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.25rem; text-align: center; box-shadow: var(--shadow-sm);
}
.stat__num { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.9rem, 3.5vw, 2.7rem); color: var(--green-700); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: .5rem; font-size: .98rem; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* Six-metric monthly cards (Home latest month + Impact explorer) */
.stats--metrics { grid-template-columns: repeat(3, 1fr); }
.stat__icon { display: block; width: 112px; height: 112px; margin: 0 auto .6rem; }
@media (max-width: 760px) { .stats--metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats--metrics { grid-template-columns: 1fr; } }

/* ---- Impact explorer (Total / Monthly + timeline) ----------------------- */
.impact-explorer__top { display: flex; justify-content: center; margin-bottom: 1.4rem; }
.impact-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; box-shadow: var(--shadow-sm); }
.impact-toggle__btn { appearance: none; border: 0; background: transparent; color: var(--ink-soft); font: 700 .95rem var(--font-body); padding: .5rem 1.4rem; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.impact-toggle__btn:hover { color: var(--ink); }
.impact-toggle__btn.is-active { background: var(--flame); color: #fff; box-shadow: var(--shadow-sm); }
.impact-toggle__btn:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }

/* Horizontal month timeline (the Monthly picker) */
.impact-timeline.is-total { opacity: .62; }
.impact-timeline { display: flex; align-items: flex-start; gap: .3rem; position: relative;
  max-width: 760px; margin: 0 auto 1.4rem; padding: .2rem .3rem; overflow-x: auto; scrollbar-width: none; }
.impact-timeline::-webkit-scrollbar { display: none; }
.impact-timeline::before { content: ""; position: absolute; left: 6%; right: 6%; top: 13px; height: 2px; background: var(--line); z-index: 0; }
.impact-timeline:focus-visible { outline: 2px solid var(--flame); outline-offset: 4px; border-radius: 8px; }
.impact-timeline__node { position: relative; z-index: 1; flex: 1 0 auto; min-width: 3rem;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  background: none; border: 0; padding: .2rem 0; cursor: pointer; }
.impact-timeline__dot { width: 22px; height: 22px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--line); transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.impact-timeline__node:hover .impact-timeline__dot { border-color: var(--flame); }
.impact-timeline__m { font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.impact-timeline__node.is-active .impact-timeline__dot { background: var(--flame); border-color: var(--flame); transform: scale(1.25); box-shadow: 0 0 0 4px var(--peach-100); }
.impact-timeline__node.is-active .impact-timeline__m { color: var(--ink); }
.impact-timeline__node:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; border-radius: 8px; }

.impact-timeline__head { text-align: center; font-family: var(--font-head); font-weight: 600;
  font-size: 1.2rem; color: var(--ink); margin-bottom: 1.1rem; }

/* ---- Cards / grids ------------------------------------------------------ */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.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; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow-sm); height: 100%;
  display: flex; flex-direction: column;
}
.card--soft { background: var(--surface-2); border-color: transparent; }
.card h3 { margin-bottom: .4rem; }
/* Center team card content so spacing above/below is equal, even when a card
   is stretched to match a taller sibling with a wrapping title.
   margin-bottom:0 overrides `.card p`, which out-specifies the `mb-0` class. */
.team-grid .card { justify-content: center; }
.team-grid .card p { line-height: 1.2; margin-bottom: 0; }
.card p { margin-bottom: .9rem; }
.card .btn, .card .card__link { margin-top: auto; }
/* Clickable role cards: behave like a card, read like a link */
a.card--link { text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
a.card--link:hover { border-color: var(--flame); box-shadow: var(--shadow-md, var(--shadow-sm)); transform: translateY(-2px); }
a.card--link:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.card__cue { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 700; font-size: .9rem; color: var(--flame); }
a.card--link:hover .card__cue { gap: .5rem; }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--marigold); color: var(--ink); margin-bottom: 1rem;
}
.card__icon svg { width: 28px; height: 28px; }
.card__link { font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.card__link::after { content: "→"; transition: transform .15s ease; }
.card__link:hover::after { transform: translateX(3px); }

/* numbered steps */
.steps { counter-reset: step; display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .steps { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .steps { grid-template-columns: 1fr;} }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); position: relative; }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-head); font-weight: 600; font-size: 1.1rem;
  width: 40px; height: 40px; border-radius: 999px; background: var(--amber-100); color: var(--amber-600);
  display: grid; place-items: center; margin-bottom: .8rem;
}
.step h3 { font-size: 1.15rem; }

/* feature list with check icons */
.checklist { list-style: none; padding: 0; display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink-soft); }
.checklist li::before {
  content: "✓"; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  background: var(--green-100); color: var(--green-700); font-weight: 900; font-size: .85rem;
  display: grid; place-items: center; margin-top: .15rem;
}

/* ---- Info / detail panel ------------------------------------------------ */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow-sm);
}
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
@media (max-width: 760px) { .detail-grid { grid-template-columns: 1fr; } }
.detail h4 { color: var(--amber-600); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-body); font-weight: 800; font-size: .8rem; margin-bottom: .35rem; }
.detail p, .detail address { font-style: normal; color: var(--ink); line-height: 1.5; }
.detail a { font-weight: 700; }
.detail-grid--ink .detail a { color: var(--ink); text-decoration: none; }
.detail-grid--ink .detail a:hover { color: var(--flame); }

/* highlight band — warm near-black with a single flame glow, never a large saturated fill */
.band { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3rem); box-shadow: var(--shadow-md); }
.band::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(60% 90% at 100% 0%, rgba(250,93,0,.35), transparent 60%); }
.band > * { position: relative; z-index: 1; }
.band h2, .band h3 { color: #fff; }
.band p { color: rgba(255,255,255,.82); }
.band .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.band .btn--ghost:hover { background: rgba(255,255,255,.12); color:#fff; border-color: #fff; }

/* two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.2rem); align-items: center; }
.split--narrow { grid-template-columns: 1.1fr .9fr; }
@media (max-width: 820px) { .split, .split--narrow { grid-template-columns: 1fr; } }

/* Signup section: keep columns top-aligned so the aside photo is not
   stretched to match the form height (flex-grow on the photo caused visible
   flicker when the form repainted on role toggle, even when final heights
   matched). The photo keeps a fixed aspect ratio instead. */
#signup .split { align-items: start; }
.signup-aside { display: flex; flex-direction: column; }
.signup-aside__photo { flex: none; width: 100%; aspect-ratio: 4 / 3; min-height: 0; }
@media (max-width: 820px) {
  .signup-aside__photo { aspect-ratio: 16 / 9; }
}

/* ---- Next pantry callout ------------------------------------------------ */
.next-pantry {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
  background: var(--amber-100); border: 1px solid #f0d4b0; border-radius: var(--radius-lg); padding: 1.4rem 1.6rem;
}
.next-pantry__date { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; color: var(--green-900); }
.next-pantry__meta { color: var(--ink-soft); font-weight: 700; margin-top: .55rem; }
/* Floating variant — sits in the featurebar slot, lifted over the hero photo */
.next-pantry--float {
  box-shadow: rgba(250,166,0,.16) 4px 8px 30px, rgba(31,23,8,.06) 0 12px 28px;
  padding: 1.5rem 1.8rem;
}
/* Callout header — "Next pantry day" label with the countdown pill beside it */
.next-pantry__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .6rem; }
.next-pantry__head .eyebrow { margin: 0; line-height: 1; }
/* Higher specificity than the base .countdown (defined later in the file) so the
   pill drops its 1.4rem top margin and oversized padding inside this header. */
.next-pantry .next-pantry__countdown { margin-top: 0; padding: .35rem .85rem; font-size: .9rem; line-height: 1; gap: .4rem; }
/* "Next pantry day" label, now living inside the pill */
.np-pill-label { font-weight: 800; text-transform: uppercase; letter-spacing: .07em; font-size: .76rem; color: var(--flame); }
.np-pill-sep { color: var(--muted); }
/* "The pantry is today" banner, replaces the countdown pill in the callout
   on a pantry day (see renderNextPantry / GN_dates.isPantryToday). */
.next-pantry__today {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .6rem;
  padding: .42rem 1rem; border-radius: var(--radius-pill);
  background: var(--flame); color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 0 2px 12px rgba(250, 93, 0, .3);
}
.next-pantry__today-dot {
  width: .5rem; height: .5rem; border-radius: 50%; flex: none;
  background: #fff; box-shadow: 0 0 0 .28rem rgba(255, 255, 255, .3);
}
@media (prefers-reduced-motion: no-preference) {
  .next-pantry__today-dot { animation: cd-pulse-light 2.6s ease-out infinite; }
}
/* Invite-card / section countdown pill on the pantry day: emphasise it */
.countdown.is-today { font-weight: 800; }
/* Utility strip on the pantry day: make the "today" value pop */
.utility-strip.is-today .utility-strip__count { color: var(--flame); text-transform: uppercase; letter-spacing: .04em; }
/* Callout actions — mirror the top utility-strip "Get Food" / "Volunteer" pills */
.next-pantry__cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.pill-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.5rem; border: 1.5px solid var(--flame); border-radius: var(--radius);
  background: var(--flame); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 1rem; line-height: 1; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: filter .15s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.pill-cta:hover { filter: brightness(.94); color: #fff; box-shadow: var(--shadow-md); }
.pill-cta:focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; }
.pill-cta svg { width: 19px; height: 19px; flex-shrink: 0; }

/* ---- Pantry "invitation" card — full-width, giant date leaf ------------ */
/* days-until pill for the next pantry day (section head, above the invite card) */
.countdown {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.4rem; padding: .5rem 1.1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-head); font-weight: 700; font-size: .98rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.countdown[hidden] { display: none; }
.countdown__dot {
  width: .5rem; height: .5rem; border-radius: 50%; flex: none;
  background: var(--flame); box-shadow: 0 0 0 .28rem rgba(250, 93, 0, .14);
}
@media (prefers-reduced-motion: no-preference) {
  .countdown__dot { animation: cd-pulse 2.6s ease-out infinite; }
}
@keyframes cd-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(250, 93, 0, .32); }
  70%  { box-shadow: 0 0 0 .55rem rgba(250, 93, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(250, 93, 0, 0); }
}
/* variant sitting on the orange invite-card leaf: white text + dot */
.countdown--on-card {
  margin: 0 0 .65rem; background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .28); color: #fff;
}
.countdown--on-card .countdown__dot {
  background: #fff; box-shadow: 0 0 0 .28rem rgba(255, 255, 255, .2);
}
@media (prefers-reduced-motion: no-preference) {
  .countdown--on-card .countdown__dot { animation: cd-pulse-light 2.6s ease-out infinite; }
}
@keyframes cd-pulse-light {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
  70%  { box-shadow: 0 0 0 .55rem rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.invite-card {
  display: grid; grid-template-columns: 280px 1fr;
  background: var(--flame-700); color: #fff;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
/* left: the date as the hero, with the calendar action beneath it */
.invite-card__leaf {
  background: rgba(0, 0, 0, .13); text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
/* the date as a calendar tile: month band, hero day, weekday · year footer */
.invite-card__leaf #invite-date {
  display: flex; flex-direction: column; align-items: stretch; width: min(100%, 8rem);
  background: rgba(255,255,255,.1); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.invite-card__mon {
  font-family: var(--font-head); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; font-size: .72rem; color: var(--flame-700);
  background: #fff; padding: .35rem .5rem;
}
.invite-card__day {
  font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(3rem, 5.5vw, 4rem); padding: .45rem .5rem .15rem;
}
.invite-card__sub {
  font-family: var(--font-head); font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; font-size: .65rem; color: rgba(255,255,255,.92);
  padding: 0 .4rem .5rem; white-space: nowrap;
}
.invite-card__cal { margin-top: .9rem; }
/* right: invitation copy on the left, actions pinned right */
.invite-card__body {
  padding: clamp(1.8rem, 3.5vw, 3rem); position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap;
}
.invite-card__body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 140% at 100% -20%, rgba(255,255,255,.2), transparent 55%);
}
.invite-card__body > * { position: relative; }   /* keep copy above the glow */
.invite-card__details { flex: 1 1 18rem; }
.invite-card__h {
  font-family: var(--font-display); font-weight: 600; line-height: 1;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 0 0 1.2rem; color: #fff;
}
.invite-card__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.invite-card__fact { display: flex; align-items: flex-start; gap: .8rem; }
.invite-card__ico { flex: none; margin-top: .15rem; color: rgba(255,255,255,.85); }
.invite-card__date {
  font-family: var(--font-display); font-weight: 600; line-height: 1.1;
  font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; margin: .35rem 0 1.1rem;
}
.invite-card__time { color: rgba(255,255,255,.85); font-weight: 700; font-size: 1.05rem; }
.invite-card__venue { display: block; color: rgba(255,255,255,.85); font-weight: 700; }
.invite-card__addr { display: block; font-style: normal; color: rgba(255,255,255,.85); font-weight: 600; margin-top: .15rem; }
.invite-card__actions { flex-direction: column; align-items: stretch; flex: none; margin: 0; }
.invite-card__actions .btn { white-space: nowrap; text-align: center; }
.invite-card .btn--white { background: #fff; color: var(--flame-700); }
/* cream is imperceptible against pure white on the flame card — use a clear peach tint + lift */
.invite-card .btn--white:hover { background: var(--peach-100); color: var(--flame-800); box-shadow: var(--shadow-md); }
/* Ghost buttons sit on the flame-colored invite card — flame text/border would vanish, so render them white-on-transparent */
.invite-card .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.invite-card .btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.invite-card .btn--clear { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.invite-card .btn--clear:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
@media (max-width: 760px) {
  .invite-card { grid-template-columns: 1fr; }
  .invite-card__leaf { padding-block: 1.4rem; }
}
/* anchor target offset so the sticky header doesn't cover the heading */
#dates, #signup { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* date list */
.date-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }
@media (max-width: 760px){ .date-list { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 460px){ .date-list { grid-template-columns: 1fr;} }
.date-list li {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem 1rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .6rem;
}
.date-list li .dow { color: var(--muted); font-weight: 700; }
.date-list li.is-next { border-color: var(--amber-500); background: var(--amber-100); }
.date-list li.is-past { opacity: .3; }
.tag { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--flame-800); margin-left: auto; }

/* ---- FAQ accordion ------------------------------------------------------ */
.faq { display: grid; gap: .7rem; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 800; color: var(--green-900);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--amber-600); line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__body { padding: 0 1.3rem 1.2rem; }
.faq .faq__body p { margin-top: 0; }

/* ---- Forms -------------------------------------------------------------- */
.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: grid; gap: .35rem; }
.field[hidden] { display: none; }
.field label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.field .req { color: var(--flame); }
.field input, .field select, .field textarea {
  /* min-width:0 — form controls carry an intrinsic ~322px min size (size=20),
     which sized the grid track and pushed the form past the screen on a 320px
     phone despite width:100%. */
  width: 100%; min-width: 0; background: var(--surface); border: 1px solid var(--line-input); border-radius: var(--radius);
  padding: .85rem 1rem; font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
.field input[type="checkbox"], .field input[type="radio"] {
  width: auto; height: auto; padding: 0; margin: 0;
  border: none; background: none; border-radius: 0; font-size: inherit;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235c4d3c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 1.15rem;
  cursor: pointer;
}
.field select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fa5d00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.field textarea { min-height: 130px; resize: vertical; }
/* The follow-up field swaps (date picker <-> notes) when the volunteer role
   changes. Both fields are stacked in the same grid cell, so the wrapper is
   always as tall as the taller one (the notes box) regardless of which is
   showing — at any viewport width, with no hard-coded height to get wrong.
   The inactive field is hidden with visibility (it keeps its space) instead of
   display:none, so swapping roles can never change the wrapper's height and
   nothing below it can move or flicker. We use .is-inactive (not [hidden]) so
   the UA's display:none !important on [hidden] can never collapse the cell. */
#vol-followup { display: grid; align-items: start; contain: layout style; min-height: 10rem; }
#vol-followup > .field { grid-area: 1 / 1; margin: 0; }
#vol-followup > .field.is-inactive { visibility: hidden; pointer-events: none; }
#vol-date-field { align-self: start; align-content: start; }
#vol-date { min-height: 3.25rem; padding-top: .85rem; padding-bottom: .85rem; }
#vol-notes { min-height: 130px; height: 130px; resize: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--flame); box-shadow: 0 0 0 1px rgba(250,93,0,.18); outline: none; }
.field .hint { font-size: .85rem; color: var(--muted); }
.form__note { font-size: .9rem; color: var(--muted); }
.form-status { padding: .9rem 1.1rem; border-radius: 10px; font-weight: 700; display: none; }
.form-status.show { display: block; }
.form-status.success { background: var(--marigold); color: var(--ink); border: 1px solid #f3cf8e; }
.form-status.error { background: #fde7e7; color: #8a1f1f; border: 1px solid #f3c0c0; }
.checkbox { display: flex; gap: .6rem; align-items: flex-start; }
.checkbox input { width: auto; margin-top: .25rem; }

/* Role picker: selectable cards that drive the rest of the form */
.role-field { border: 0; padding: 0; margin: 0; min-width: 0; contain: layout style; }
.role-field legend { font-weight: 600; font-size: .92rem; color: var(--ink); padding: 0; margin-bottom: .35rem; }
.role-options { display: grid; gap: .5rem; contain: layout style; }

/* Pantry date grid: 1 column by default, 2 columns only when viewport is wide enough
   that the split-layout form column still has comfortable room */
.role-options--boxes {
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .role-options--boxes {
    grid-template-columns: repeat(2, 1fr);
  }
}
.role-options--boxes .role-option { flex-direction: row; align-items: flex-start; text-align: left; padding: .85rem 1rem; gap: .6rem; }
.role-options--boxes .role-option::before { border-radius: 3px; margin-bottom: 0; margin-top: 2px; }
.role-options--boxes .role-option__title { display: flex; flex-direction: column; line-height: 1.3; }
.role-options--boxes .role-option__day { font-size: .75rem; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.role-options--boxes .role-option__date { font-weight: 700; color: var(--ink); }
.role-option { position: relative; display: flex; gap: .6rem; align-items: center; cursor: pointer;
  box-sizing: border-box; min-height: 3.25rem;
  background: var(--surface); border: 1px solid var(--line-input); border-radius: var(--radius);
  padding: .85rem 1rem; outline: none; }
.role-option::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; flex: none;
  box-sizing: border-box; border: 1px solid var(--line-input); background: var(--surface);
  box-shadow: inset 0 0 0 4px var(--surface); }
.role-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.role-option__title { font-weight: 700; color: var(--ink); line-height: 1.25; }
.role-option:hover { border-color: var(--flame); }
.role-option:has(input:checked) { border-color: var(--flame); background: var(--surface); }
.role-option:has(input:checked)::before { border-color: var(--flame); background: var(--flame); }

/* embed placeholder */
.embed-note {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; background: var(--surface-2);
  color: var(--ink-soft); font-size: .95rem;
}

/* ---- Sponsor tiers ------------------------------------------------------ */
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm); text-align: center; height:100%; display:flex; flex-direction:column; }
.tier--feature { border-color: var(--amber-500); box-shadow: var(--shadow-md); position: relative; }
.tier--feature::before { content: "Monthly goal"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--amber-600); color: #fff; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .25rem .7rem; border-radius: 999px; }
.tier--feature.tier--popular::before { content: "Most popular"; }
.tier__amount { font-family: var(--font-head); font-weight: 600; font-size: 2.2rem; color: var(--green-700); }
.tier p { margin-top: .5rem; flex: 1; }

/* ---- Quarterly infographics (Impact page) ------------------------------- */
.infographic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); max-width: 980px; margin-inline: auto; }
.infographic { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .12s ease; }
.infographic:hover { box-shadow: var(--shadow-md); }
.infographic a { display: block; }
.infographic img { width: 100%; height: auto; display: block; }
.infographic figcaption { padding: .85rem 1.1rem; font-weight: 700; color: var(--ink); font-size: .95rem; border-top: 1px solid var(--line); }

/* ---- Partners & donors (Impact page) ------------------------------------ */
.partner-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 760px) { .partner-logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .partner-logos { grid-template-columns: repeat(2, 1fr); } }
.partner-logo { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; min-height: 132px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.partner-logo img { max-height: 74px; max-width: 100%; width: auto; object-fit: contain; }
/* square / tall marks hit the height cap before filling the tile — give them more room */
.partner-logo img.is-lg { max-height: 108px; }
a.partner-logo { text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.partner-logo:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--flame); }
@media (prefers-reduced-motion: reduce) { a.partner-logo { transition: none; } a.partner-logo:hover { transform: none; } }
.partner-names { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: 1.6rem; }
.partner-names span { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; font-weight: 600; color: var(--ink); font-size: .92rem; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #f3ede4; margin-top: 0; }
.site-footer a { color: #fff; }

/* 1) CTA band */
.footer-cta { background: var(--marigold); }
.footer-cta__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(2.2rem, 4.5vw, 3.4rem) clamp(1.1rem, 4vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1.4rem 2.4rem; flex-wrap: wrap; }
.footer-cta__lead { max-width: 52ch; }
.footer-cta .eyebrow { color: var(--flame-700); }
.footer-cta__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.08; margin: .35rem 0 0; }
.footer-cta__sub { color: var(--ink-soft); margin-top: .5rem; }
.footer-cta .btn-row { flex: 0 0 auto; }

/* Centered poster variant: stacked, date headline as the hero */
.footer-cta--center .footer-cta__inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.1rem; }
.footer-cta--center .footer-cta__lead { max-width: 60ch; }
.footer-cta--center .footer-cta__title { font-size: clamp(2rem, 4vw, 2.9rem); }
.footer-cta--center .footer-cta__sub { font-size: 1.05rem; }
.footer-cta--center .btn-row { justify-content: center; flex-wrap: wrap; }
.footer-cta .btn--ghost { background: transparent; color: var(--ink); border-color: rgba(29,30,28,.35); }
.footer-cta .btn--ghost:hover { background: rgba(29,30,28,.06); color: var(--ink); border-color: var(--ink); }

/* 2) Editorial brand */
.footer-main { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(2.6rem, 5vw, 4rem) clamp(1.1rem, 4vw, 2rem) clamp(1.4rem, 3vw, 2rem);
  display: grid; grid-template-columns: minmax(300px, 1fr) 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px){ .footer-main { grid-template-columns: 1fr; gap: 2.6rem; } }
.footer-brandblock { max-width: 46ch; }
.footer-wordmark { display: inline-flex; align-items: center; gap: .9rem; }
.footer-mark { flex: 0 0 auto; display: block; height: clamp(58px, 8vw, 82px); }
.footer-mark img { display: block; height: 100%; width: auto; }
.footer-wordmark__text { display: inline-block; }
.footer-wordmark .lk-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 3.5rem); line-height: .92; letter-spacing: -.015em; color: #fff; white-space: nowrap; }
/* The 2.2rem floor of the clamp above plus the logo mark is wider than a 320px
   phone, so drop the floor on the narrowest screens. */
@media (max-width: 380px) {
  .footer-mark { height: 48px; }
  .footer-wordmark { gap: .6rem; }
  .footer-wordmark .lk-name { font-size: 1.85rem; }
}
.footer-wordmark .lk-sub { display: block; font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; margin-top: .55rem; color: rgba(255,255,255,.58); }
.footer-news-block { margin-top: 1.5rem; }
.footer-news { width: 100%; }
.footer-news__row input { flex: 1 1 auto; }
.footer-news-block h4 { color: #fff; font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; margin-bottom: .7rem; }
.footer-brandblock .social-row { margin-top: 1.4rem; }

/* 3) Columns — two widened link columns */
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 3vw, 2.6rem) clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 420px){ .footer-cols { grid-template-columns: 1fr; } }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; margin-bottom: .9rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-col a { text-decoration: none; color: rgba(255,255,255,.82); }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-contact { font-style: normal; line-height: 1.7; color: rgba(255,255,255,.82); }

/* Newsletter signup */
.footer-news__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.footer-news input { flex: 1 1 12rem; min-width: 0; padding: .7rem .9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font: inherit; }
.footer-news input::placeholder { color: rgba(255,255,255,.5); }
.footer-news input:focus { outline: none; border-color: var(--flame); box-shadow: 0 0 0 3px rgba(250,93,0,.25); }
.footer-news .btn { flex: 0 0 auto; }
.footer-news .form-status { margin-bottom: .7rem; font-size: .9rem; }

/* 4) Legal bar */
.site-footer__bottom { width: 100%; max-width: var(--maxw); margin-inline: auto; border-top: 1px solid rgba(255,255,255,.15); padding: 1.3rem clamp(1.1rem, 4vw, 2rem) 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between; font-size: .88rem; line-height: 1.7; color: rgba(255,255,255,.7); }

/* Social icons */
.social-row { display: flex; gap: .6rem; }
.social-row a { width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.social-row a:hover { background: rgba(255,255,255,.2); }
.social-row svg { width: 20px; height: 20px; }

/* ---- Prose blocks ------------------------------------------------------- */
.prose p + p { margin-top: 1rem; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.4rem; margin-bottom: .3rem; }
.divider { height: 1px; background: var(--line); border: 0; margin-block: clamp(2rem,5vw,3.5rem); }

/* reveal on scroll (progressive enhancement)
   Hidden state is gated behind html.js.reveals-ready, set only after main.js has
   marked every already-visible .reveal with .in. That way adding html.js never
   flashes the whole page to opacity:0 before the observer runs. With no JS the
   content stays fully visible. */
.reveal { opacity: 1; transform: none; }
/* Snap off-screen blocks hidden instantly on load — never fade OUT (that read as a
   whole-page flicker on every refresh). Transition only when .in is added on scroll. */
html.js.reveals-ready .reveal:not(.in) { opacity: 0; transform: translateY(14px); }
html.js.reveals-ready .reveal.in { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .reveal, html.js.reveals-ready .reveal:not(.in) { opacity: 1; transform: none; transition: none; }
  .impact-timeline__dot { transition: none; }
  .impact-timeline__node.is-active .impact-timeline__dot { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- Temporary "under construction" notice -------------------------------
   Paired with assets/js/notice.js. Delete both when the site is finished. */
.gn-notice {
  border: 0;
  padding: 0;
  /* The reset zeroes margin globally, which kills the UA stylesheet's
     `margin: auto` and pins the dialog to the top-left. Restore it. */
  margin: auto;
  max-width: 30rem;
  width: calc(100% - 2rem);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.gn-notice::backdrop { background: rgba(29, 30, 28, .55); }
.gn-notice__body { padding: 1.75rem; }
/* The body holds initial focus instead of the dismiss button. It is not
   keyboard-reachable (tabindex="-1"), so suppressing its ring hides nothing
   a keyboard user needs. */
.gn-notice__body:focus, .gn-notice__body:focus-visible { outline: none; }
.gn-notice__title {
  margin: 0 0 .75rem;
  font-size: 1.375rem;
  line-height: 1.25;
}
.gn-notice__text {
  margin: 0 0 .875rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.gn-notice__text--assure { color: var(--ink); font-weight: 600; }
/* `display:block` + auto side margins centres the button under the
   left-aligned notice text without centring the text itself. */
.gn-notice__close { display: block; margin: .5rem auto 0; }

@media (max-width: 400px) {
  .gn-notice__body { padding: 1.25rem; }
  .gn-notice__title { font-size: 1.2rem; }
}