/* ==========================================================================
   Faith Mobile Food Bank Bristol
   One shared stylesheet. Mobile-first. No build step.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Palette (from the flyer: cream, deep blue, produce accents) */
  --cream: #F8F1E1;
  --cream-2: #EFE3C9;
  --paper: #FFFCF5;
  --blue: #1B3A6B;
  --blue-deep: #12294F;
  --blue-soft: #E3EAF5;
  --ink: #22303E;
  --muted: #5B6672;
  --line: #E0D4B8;
  --tomato: #C63D2A;
  --tomato-deep: #A83221;
  --wheat: #D9A441;
  --wheat-soft: #F6E7C4;
  --leaf: #3F7A3A;
  --leaf-deep: #33622F;
  --leaf-soft: #E2EEDD;

  /* Type: a warm book serif for headings, the device's own sans for body.
     No web-font download, so nothing to wait for on a parking-lot connection. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(27, 58, 107, .06), 0 10px 28px rgba(27, 58, 107, .08);
  --wrap: 72rem;
  --gutter: clamp(1.125rem, 4vw, 2rem);
  --header-h: 4.5rem;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;            /* 18px minimum on mobile */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 48em) { body { font-size: 1.1875rem; } }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--blue);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}
h1, h2 { text-wrap: balance; }   /* h3 and h4 are short; skipping balance there saves layout passes */
h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); }
p, ul, ol { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue); text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { color: var(--blue-deep); }
strong { color: var(--blue-deep); }
small, .small { font-size: .9rem; }
.muted { color: var(--muted); }
.lead { font-size: 1.25em; line-height: 1.5; }
.measure { max-width: 42rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
address { font-style: normal; }
[hidden] { display: none !important; }

/* Focus: visible and unmistakable, for keyboard and switch users */
:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.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;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--blue); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; }
#main:focus { outline: none; }  /* skip-link target; the outline on a whole page is noise */

/* ---------- Layout helpers ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { max-width: 48rem; }
.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section--alt { background: var(--cream-2); }
.section--paper { background: var(--paper); border-block: 1px solid var(--line); }
.section--leaf { background: var(--leaf-soft); }
.section--wheat { background: var(--wheat-soft); }
.section--blue { background: var(--blue); color: #fff; }
.section--blue h2, .section--blue h3, .section--blue a, .section--blue strong { color: #fff; }
.section--blue .stats li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.section--blue .stats b { color: #fff; }
.section--blue .stats span { color: rgba(255,255,255,.82); }
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-size: .85rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tomato-deep); margin-bottom: .75rem;
}
.section--blue .eyebrow { color: var(--wheat); }
.section-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48em) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.split { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56em) { .split { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; } .split--rev > :first-child { order: 2; } }
.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .8rem 1.6rem; border-radius: 999px;
  font-weight: 700; font-size: 1.05rem; line-height: 1.2; text-decoration: none; text-align: center;
  border: 2px solid transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; isolation: isolate;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--blue-deep); color: #fff; }
.btn--tomato { background: var(--tomato); color: #fff; }
.btn--tomato:hover { background: var(--tomato-deep); color: #fff; }
.btn--leaf { background: var(--leaf); color: #fff; }
.btn--leaf:hover { background: var(--leaf-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--ghost:hover { background: var(--blue-soft); color: var(--blue-deep); }
.btn--light { background: #fff; color: var(--blue); }
.btn--light:hover { background: var(--wheat-soft); color: var(--blue-deep); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn--lg { font-size: 1.15rem; min-height: 3.6rem; padding: .95rem 2rem; }
.btn--sm { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .95rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);   /* solid, not blurred: cheaper to scroll on low-end phones */
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: var(--header-h); padding-block: .5rem;
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--blue); margin-right: auto; min-width: 0; }
.brand img { width: 2.75rem; height: 2.75rem; flex: none; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.05; }
.brand__sub { display: block; font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }
.header-actions { display: flex; gap: .5rem; align-items: center; }
.header-actions .btn { min-height: 2.75rem; padding: .5rem .95rem; font-size: .95rem; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem;
  border-radius: 999px; border: 2px solid var(--blue); background: transparent; color: var(--blue);
}
.nav-toggle svg { width: 1.5rem; height: 1.5rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav { display: none; order: 3; width: 100%; border-top: 1px solid var(--line); padding-block: .5rem 1rem; margin-top: .25rem; }
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav a {
  display: flex; align-items: center; min-height: 3.25rem; padding: .5rem .75rem; border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600; font-size: 1.1rem; color: var(--blue);
}
.site-nav a:hover { background: var(--blue-soft); }
.site-nav a[aria-current="page"] { background: var(--blue); color: #fff; }
/* If JavaScript never runs, the menu still opens as a plain list */
.no-js .site-nav { display: block; }

@media (min-width: 60em) {
  .nav-toggle { display: none; }
  .site-header__bar { gap: 1rem; }
  .brand { margin-right: 0; }
  .brand__name { font-size: 1.25rem; }
  .site-nav { display: block; order: 0; width: auto; border: 0; padding: 0; margin: 0 0 0 auto; }
  .site-nav ul { flex-direction: row; gap: .15rem; }
  .site-nav a { font-size: 1rem; min-height: 2.75rem; padding: .4rem .8rem; }
  .site-nav li.nav-dup { display: none; }  /* Get Food and Donate are buttons on desktop */
}
@media (min-width: 72em) { .site-nav a { font-size: 1.05rem; padding: .4rem 1rem; } }
/* Small phones: compact header so Get Food, Donate and the menu always fit on one row */
@media (max-width: 40em) {
  .site-header__bar { gap: .4rem; }
  .brand { gap: .5rem; }
  .brand img { width: 2.5rem; height: 2.5rem; }
  .brand__name { font-size: .95rem; max-width: 6.5rem; }
  .brand__sub { display: none; }
  .header-actions { gap: .4rem; }
  .header-actions .btn { min-height: 2.6rem; padding: .4rem .75rem; font-size: .9rem; }
  .nav-toggle { width: 2.6rem; height: 2.6rem; }
  .eyebrow { font-size: .78rem; letter-spacing: .09em; }
}
@media (max-width: 24.5em) {
  .brand__name { display: none; }
  .brand img { width: 2.75rem; height: 2.75rem; }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem); position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, var(--wheat-soft) 0%, #F9F0DA 32%, var(--cream) 62%);
}
.hero > .wrap { position: relative; z-index: 2; }

/* Background film (HERO VIDEO SLOT in index.html). The poster paints first as a CSS
   background so there is never a blank frame; the video plays over it. Under
   prefers-reduced-motion the video is removed entirely and the poster stays. */
.hero__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: url("/assets/hero-poster-m.jpg?v=202609142153") right center / cover no-repeat;   /* phone poster */
}
@media (min-width: 56em) { .hero__media { background-image: url("/assets/hero-poster.jpg?v=202609142153"); } }
.hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
@media (prefers-reduced-motion: reduce) { .hero__media video { display: none; } }
/* When the film is on, the illustration brings its own olive branches */
.hero--video .hero__leaf { display: none; }

/* Phones: the film is a band across the top of the hero, cropped to its right two-thirds
   so the van and the produce stand stay in view, fading into cream where the copy sits. */
.hero--video { background: var(--cream); padding-top: 0; }
.hero--video .hero__media { inset: 0 0 auto 0; height: min(82vw, 32rem); }
.hero--video .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(248,241,225,0) 56%, rgba(248,241,225,.6) 82%, rgba(248,241,225,1) 100%);
}
.hero--video > .wrap { padding-top: calc(min(82vw, 32rem) - 3.25rem); }

/* Warm light that breathes over the scene, and small leaves that drift down the left half */
.hero__light {
  position: absolute; inset: -20% -10% -20% -30%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 25% 20%, rgba(233,196,120,.5), rgba(233,196,120,0) 60%);
  opacity: .5;
}
.hero__fall { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__fall span {
  position: absolute; top: -6%; width: 22px; height: 22px; opacity: 0;
  background: url("/assets/leaf-single.svg?v=202609142153") center / contain no-repeat;
}
.hero__fall span:nth-child(1) { left: 8%; }
.hero__fall span:nth-child(2) { left: 22%; width: 16px; height: 16px; }
.hero__fall span:nth-child(3) { left: 38%; }
.hero__fall span:nth-child(4) { left: 52%; width: 18px; height: 18px; }
.hero__fall span:nth-child(5) { left: 30%; width: 14px; height: 14px; }
@media (max-width: 40em) {
  .hero__fall { height: min(82vw, 32rem); }            /* leaves fall through the film band only */
  .hero__fall span:nth-child(4), .hero__fall span:nth-child(5) { display: none; }
}
.hero--video .hero__copy { max-width: 34rem; }

/* Wide screens: full-bleed film behind everything, copy on the pale left, van on the right */
@media (min-width: 56em) {
  .hero--video { background: linear-gradient(165deg, #F3DDB0 0%, var(--wheat-soft) 30%, var(--cream) 65%); min-height: 38rem; display: flex; align-items: center; padding-block: clamp(3rem, 6vw, 4.5rem); }
  .hero--video .hero__media { inset: 0; height: auto; }
  .hero--video .hero__media::after { background: linear-gradient(90deg, rgba(246,231,196,.8) 0%, rgba(246,231,196,.55) 40%, rgba(246,231,196,0) 68%); }
  .hero--video > .wrap { padding-top: 0; }
  .hero--video .hero__copy { max-width: 36rem; }
}

/* Leaf sprigs in the top corners, echoing the flyer border */
.hero__leaf { position: absolute; top: -.75rem; z-index: 1; width: clamp(6.5rem, 14vw, 11rem); height: auto; opacity: .55; pointer-events: none; }
.hero__leaf img { width: 100%; height: auto; }
.hero__leaf--tl { left: -1rem; }
.hero__leaf--tr { right: -1rem; transform: scaleX(-1); }
@media (max-width: 40em) { .hero__leaf { opacity: .4; width: 5.5rem; } .hero__leaf--tl { left: -1.25rem; } .hero__leaf--tr { right: -1.25rem; } }

/* Glow behind the giveaway card. It lives on a wrapper so the card's own entrance
   transform cannot pull the glow above the card's white background. */
.next-card-wrap { position: relative; margin-top: 1.75rem; }
.next-card-wrap > .next-card { margin-top: 0; position: relative; }
.next-card-wrap::before {
  content: ""; position: absolute; inset: -18% -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217,164,65,.55), rgba(217,164,65,0) 74%); pointer-events: none;
}

/* Page intros on inner pages: a soft glow sits behind the title */
.page-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before {
  content: ""; position: absolute; z-index: -1; left: -8rem; top: -10rem; width: 34rem; height: 30rem; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(217,164,65,.32), rgba(217,164,65,0) 70%); pointer-events: none;
}
.section--leaf.page-hero::before { background: radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0) 70%); }
.section--wheat.page-hero::before { background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0) 70%); }
.hero h1 { margin-bottom: .35em; }
.hero__promise { font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 600; color: var(--ink); max-width: 30ch; }
.hero__promise strong { color: var(--tomato); }

.next-card {
  background: var(--paper); border: 1px solid var(--line); border-left: 8px solid var(--wheat);
  border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: var(--shadow); margin-top: 1.75rem;
}
.next-card__label { font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tomato); margin: 0 0 .35rem; }
.next-card__date { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.1; color: var(--blue); margin: 0 0 .75rem; font-weight: 700; }
.next-card__meta { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.next-card__meta li { display: flex; gap: .6rem; align-items: flex-start; font-size: 1.05rem; }
.next-card__meta svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--leaf); margin-top: .15rem; }
.next-card__note { font-size: .95rem; color: var(--muted); margin-top: 1rem; }

/* Page-load stagger. Fast entrance, slow settle. Only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .in, .page-hero .eyebrow, .page-hero h1, .page-hero .lead, .story-hero .chapter, .story-hero h1, .story-hero .lead, .story-hero .promise {
    animation: rise .95s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 95ms);
  }
  .page-hero .eyebrow, .story-hero .chapter { --i: 0; } .page-hero h1, .story-hero h1 { --i: 1; } .page-hero .lead, .story-hero .lead { --i: 2; } .story-hero .promise { --i: 3; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---------- Photos ---------- */
.photo { border-radius: var(--radius); overflow: hidden; background: var(--cream-2); box-shadow: var(--shadow); }
.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.photo--square img { aspect-ratio: 1; }
.photo--tilt { transform: rotate(-1.2deg); }
figure { margin: 0; }
figcaption { font-size: .9rem; color: var(--muted); margin-top: .6rem; }

/* ---------- Cards ---------- */
.card { position: relative; isolation: isolate; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: var(--shadow); }
.card h3 { margin-top: 0; }
.card--soft { background: var(--cream-2); box-shadow: none; }
.card--accent-leaf { border-top: 6px solid var(--leaf); }
.card--accent-wheat { border-top: 6px solid var(--wheat); }
.card--accent-tomato { border-top: 6px solid var(--tomato); }
.card--accent-blue { border-top: 6px solid var(--blue); }
.card .btn { margin-top: .5rem; }

/* ---------- Steps (How it works) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.steps li { position: relative; padding-left: 4rem; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 3rem; height: 3rem; border-radius: 999px; background: var(--blue); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; display: grid; place-items: center;
}
.steps h3 { margin-bottom: .25rem; }
.steps p { color: var(--muted); }

/* ---------- Promise band ---------- */
.promise {
  display: grid; gap: .75rem 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius);
  background: var(--leaf-soft); border: 1px solid #CFE0C7; color: var(--ink);
}
.promise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 40em) { .promise ul { grid-template-columns: repeat(2, 1fr); } }
.promise li { display: flex; gap: .6rem; align-items: flex-start; font-weight: 600; }
.promise svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--leaf); margin-top: .15rem; }
.promise p { margin: 0; }

/* ---------- Date list ---------- */
.dates { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.date-row {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1.1rem;
}
.date-row__day {
  text-align: center; font-family: var(--font-display); line-height: 1; color: var(--blue);
  background: var(--wheat-soft); border-radius: var(--radius-sm); padding: .5rem 0;
}
.date-row__day b { display: block; font-size: 1.9rem; }
.date-row__day span { display: block; font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.date-row__main { font-weight: 700; color: var(--blue); }
.date-row__sub { color: var(--muted); font-size: .95rem; }
.date-row--next { border-color: var(--wheat); box-shadow: var(--shadow); }
.date-row--cancelled { opacity: .85; }
.date-row--cancelled .date-row__day { background: #F1E4E1; color: var(--tomato-deep); }
.date-row--cancelled .date-row__main { text-decoration: line-through; text-decoration-color: var(--tomato); }
.badge { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; background: var(--wheat-soft); color: var(--blue-deep); margin-left: .4rem; vertical-align: middle; }
.badge--alert { background: #F8DDD8; color: var(--tomato-deep); }

/* ---------- Map ---------- */
.map { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--cream-2); aspect-ratio: 16 / 10; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__facade { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.5rem; }
.map__facade svg.pin { width: 3rem; height: 3rem; color: var(--tomato); margin-inline: auto; margin-bottom: .5rem; }
.map__facade p { margin: 0 0 1rem; font-weight: 600; color: var(--blue); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--blue);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; content: "+" / ""; flex: none;   /* second form hides the glyph from screen readers where supported */ width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); font-family: var(--font-body); font-size: 1.4rem; line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; content: "\2013" / ""; }
.faq details > div { padding: 0 0 1.25rem; max-width: 60ch; }

/* ---------- Locations ---------- */
.locations { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; counter-reset: loc; }
@media (min-width: 40em) { .locations { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
.locations li {
  counter-increment: loc; display: grid; grid-template-columns: 2.25rem 1fr auto; gap: .75rem; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .85rem 1rem;
}
.locations li::before {
  content: counter(loc); width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--leaf-soft); color: var(--leaf-deep);
  font-weight: 700; display: grid; place-items: center; font-size: .95rem;
}
.locations b { display: block; color: var(--blue); line-height: 1.3; }
.locations span { display: block; color: var(--muted); font-size: .95rem; }
.locations a.map-link {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; padding: .4rem .8rem; border-radius: 999px;
  border: 2px solid var(--blue); text-decoration: none; font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.locations a.map-link:hover { background: var(--blue-soft); }
.locations a.map-link svg { width: 1rem; height: 1rem; }

/* ---------- Stats ---------- */
.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.stats li { text-align: center; padding: 1.25rem .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.stats b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3rem); color: var(--blue); line-height: 1; }
.stats span { display: block; font-size: .9rem; color: var(--muted); margin-top: .5rem; line-height: 1.3; }
@media (max-width: 30em) { .stats { grid-template-columns: 1fr; } .stats li { display: grid; grid-template-columns: auto 1fr; text-align: left; gap: 1rem; align-items: center; padding-inline: 1.25rem; } .stats span { margin: 0; } }

/* ---------- Checklists ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.checks li { display: flex; gap: .65rem; align-items: flex-start; }
.checks svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--leaf); margin-top: .2rem; }
.checks--2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/* ---------- Amounts (Donate) ---------- */
.amounts { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .6rem; }
.amounts li { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; align-items: center; padding: .6rem .8rem; background: var(--cream-2); border-radius: var(--radius-sm); }
.amounts b { font-family: var(--font-display); font-size: 1.5rem; color: var(--blue); }
.tax-note { font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: .9rem; margin-top: 1.25rem; }
.donate-slot { margin-block: 1.25rem; }
.donate-slot iframe { width: 100%; border: 0; border-radius: var(--radius-sm); }
.zelle-qr { display: inline-block; margin: .6rem 0 .2rem; padding: .35rem; background: #fff; border: 1px solid var(--line); border-radius: .5rem; line-height: 0; }
.zelle-qr img { width: 7.5rem; height: 7.5rem; display: block; }
.zelle-qr:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }
.field label, .field legend { display: block; font-weight: 700; color: var(--blue); margin-bottom: .35rem; }
.field .hint { display: block; font-size: .9rem; color: var(--muted); font-weight: 400; margin-top: .15rem; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 3.25rem; padding: .75rem .9rem; border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; font-size: 1.05rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: 3px solid var(--blue-soft); outline-offset: 0; }
.field fieldset { border: 0; padding: 0; margin: 0; }
.choice { display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: .4rem .5rem; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; color: var(--ink); margin: 0; }
.choice:hover { background: var(--cream-2); }
.choice input { width: 1.4rem; height: 1.4rem; accent-color: var(--blue); flex: none; margin: 0; }
.form__note { font-size: .9rem; color: var(--muted); }
.honey { position: absolute; left: -9999px; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.contact-list li { display: flex; gap: .85rem; align-items: flex-start; }
.contact-list svg, .contact-list li > img { width: 1.5rem; height: 1.5rem; flex: none; color: var(--leaf); margin-top: .25rem; }
.contact-list b { display: block; color: var(--blue); }
.contact-list a { font-size: 1.15rem; font-weight: 600; word-break: break-word; display: inline-block; padding-block: .3rem; }

/* ---------- Callouts ---------- */
.callout { padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--blue-soft); border-left: 6px solid var(--blue); }
.callout--wheat { background: var(--wheat-soft); border-left-color: var(--wheat); }
.callout--tomato { background: #F8E7E3; border-left-color: var(--tomato); }
.callout--leaf { background: var(--leaf-soft); border-left-color: var(--leaf); }
.callout h3 { margin-bottom: .35rem; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--blue-deep); color: #fff; padding-block: clamp(2.5rem, 7vw, 4.5rem); position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; right: -8rem; top: -8rem; width: 24rem; height: 24rem; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(217,164,65,.35), transparent 70%); pointer-events: none;
}
.cta-band .wrap { position: relative; display: grid; gap: 1.5rem; }
@media (min-width: 56em) { .cta-band .wrap { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.cta-band h2 { color: #fff; margin-bottom: .35em; }
.cta-band .eyebrow { color: var(--wheat); }
.cta-band p { color: rgba(255,255,255,.88); max-width: 40ch; }
.cta-band .cluster { gap: .9rem; }
@media (min-width: 56em) { .cta-band .cluster { justify-content: flex-end; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--cream-2); border-top: 1px solid var(--line); padding-block: 2.5rem 2rem; font-size: 1rem; }
.site-footer .wrap { display: grid; gap: 2rem; }
@media (min-width: 48em) { .site-footer .wrap { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-footer img.footer-logo { width: min(100%, 20rem); height: auto; }
.site-footer h2 { font-family: var(--font-body); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.site-footer ul.footer-pages { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .site-footer ul.footer-pages { grid-template-columns: 1fr; } }
.site-footer a { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; min-height: 2.5rem; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .legal { font-size: .9rem; color: var(--muted); margin-top: .75rem; }
.site-footer .copyright { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.25rem; font-size: .9rem; color: var(--muted); }
.site-footer .copyright { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; justify-content: space-between; }
.site-footer .copyright a { display: inline; min-height: 0; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(27,58,107,.35); text-underline-offset: .15em; }
.site-footer .copyright a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   Atmosphere & motion
   Every animation here moves only transform and opacity, and every one is
   gated behind prefers-reduced-motion: no-preference.
   ========================================================================== */

/* Paper grain over the whole page: one tiny SVG noise tile, very low opacity */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0 0.05 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Scroll progress line (inserted by main.js) */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 80; width: 100%; height: 3px; background: var(--tomato);
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* Scroll reveals. html.js-motion is set by the inline head script only when motion is
   welcome and IntersectionObserver exists; main.js then reveals elements as they enter.
   Stagger order comes from position in a [data-stagger] group, in CSS, so the script
   never has to touch styles before first paint. */
.js-motion .io { opacity: 0; transform: translateY(20px); }
.js-motion .io.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s ease-out, transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
[data-stagger] > .io:nth-child(2) { --d: 1; }
[data-stagger] > .io:nth-child(3) { --d: 2; }
[data-stagger] > .io:nth-child(4) { --d: 3; }
[data-stagger] > .io:nth-child(5) { --d: 4; }
[data-stagger] > .io:nth-child(6) { --d: 5; }
[data-stagger] > .io:nth-child(n+7) { --d: 6; }

/* Count-up numbers keep a steady width while they tick */
.stats b { font-variant-numeric: tabular-nums; }

/* Hover lift: the deeper shadow lives on a pseudo-element and fades in, so only opacity and
   transform move. Created only on devices that can hover, so phones lay out none of these boxes. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card::after, .btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .3s ease;
  }
  .card::after { box-shadow: 0 18px 40px rgba(27, 58, 107, .16), 0 4px 10px rgba(27, 58, 107, .08); }
  .btn::after { box-shadow: 0 10px 22px rgba(27, 58, 107, .22); }
  .card, .btn { transition-property: transform, background-color, color, border-color; transition-duration: .35s, .18s, .18s, .18s; transition-timing-function: cubic-bezier(.16, 1, .3, 1), ease, ease, ease; }
  .card:hover { transform: translateY(-4px); }
  .btn:hover { transform: translateY(-2px); }
  .card:hover::after, .btn:hover::after { opacity: 1; }
  .btn--outline-light::after, .btn--ghost::after { box-shadow: 0 10px 22px rgba(0, 0, 0, .14); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Safety net: if main.js never runs to reveal an element, it appears on its own after 4 s */
  .js-motion .io:not(.is-in) { animation: io-safety 0s linear 4s forwards; }
  @keyframes io-safety { to { opacity: 1; transform: none; } }

  /* Hero life, layered over the film: a slow scale drift anchored on the van, breathing
     light, and falling leaves. With the leaf-sprig drift these are the site's only loops. */
  .hero--video .hero__media { animation: breathe 22s ease-in-out infinite alternate; transform-origin: 85% 55%; }
  @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.04); } }
  .hero__light { animation: glow 9s ease-in-out infinite alternate; }
  @keyframes glow { from { opacity: .3; } to { opacity: .75; } }
  .hero__fall span { animation: fall 16s linear infinite; }
  .hero__fall span:nth-child(2) { animation-duration: 21s; animation-delay: -7s; }
  .hero__fall span:nth-child(3) { animation-duration: 18s; animation-delay: -12s; }
  .hero__fall span:nth-child(4) { animation-duration: 24s; animation-delay: -4s; }
  .hero__fall span:nth-child(5) { animation-duration: 19s; animation-delay: -15s; }
  @keyframes fall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    8%   { opacity: .85; }
    50%  { transform: translate(28px, 55vh) rotate(160deg); }
    92%  { opacity: .85; }
    100% { transform: translate(-16px, 112vh) rotate(330deg); opacity: 0; }
  }

  /* Leaf drift: a few pixels over nine seconds, back and forth. */
  .hero__leaf--tl, .hero__leaf--tr img { animation: drift 9s ease-in-out infinite alternate; }
  .hero__leaf--tr img { animation-duration: 10.5s; animation-delay: -4s; }
  @keyframes drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(4px, 6px) rotate(1.6deg); } }

  /* Get Food: one gentle attention pulse on the next date, after the page has settled */
  .page-get-food .date-row--next { animation: pulse 1.3s ease-in-out 1.1s 2; }
  @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
}

/* ==========================================================================
   Inner-page story system
   Each inner page gets its own tint, its own weather in the hero, patterned
   parchment instead of flat white, objects instead of identical cards, one
   sentence in the organisation's own voice, and ONE arrival animation.
   Every animation here is transform/opacity only and lives inside
   prefers-reduced-motion: no-preference. Inner pages add no infinite loops.
   ========================================================================== */

/* ---- Page tints: one pair of tokens per page, read by everything below ---- */
:root { --tomato-soft: #F8E7E3; --tint: var(--wheat-soft); --tint-ink: var(--wheat); }
.page-get-food       { --tint: #FBE9C4;          --tint-ink: var(--wheat); }
.page-blessing-boxes { --tint: var(--leaf-soft);  --tint-ink: var(--leaf); }
.page-host-a-box { --tint: var(--leaf-soft); --tint-ink: var(--leaf); }
.page-about          { --tint: var(--blue-soft);  --tint-ink: var(--blue); }
.page-volunteer      { --tint: var(--tomato-soft);--tint-ink: var(--tomato); }
.page-donate         { --tint: var(--wheat-soft); --tint-ink: var(--wheat); }
.page-contact        { --tint: var(--blue-soft);  --tint-ink: var(--blue); }

/* ---- Washes and kraft: no more white stripes ---- */
.section--paper { background: var(--cream); border-block: 0; }
.section--wash {
  background:
    radial-gradient(ellipse at 15% 0%, var(--tint) 0, transparent 55%),
    radial-gradient(ellipse at 100% 100%, var(--tint) 0, transparent 45%),
    var(--cream);
}
.section--kraft { position: relative; background: var(--cream-2); isolation: isolate; }
.section--kraft::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0 0.05 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.section--blue-soft { background: var(--blue-soft); }
.section--tomato-soft { background: var(--tomato-soft); }
.section--warm { background: linear-gradient(180deg, var(--cream) 0%, var(--wheat-soft) 100%); }

/* Torn-paper edge: the section above tears softly into this one (set --edge to its colour) */
.edge { position: relative; }
.edge::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 16px; z-index: 1; pointer-events: none;
  background: var(--edge, var(--cream));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='16'%3E%3Cpath d='M0 0h200v7c-12 5-25-3-38 1s-24 6-37 1-26-5-38 0-25 5-37 0-26-6-38-1-12 4-12 4V0z' fill='%23000'/%3E%3C/svg%3E") repeat-x top / 200px 16px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='16'%3E%3Cpath d='M0 0h200v7c-12 5-25-3-38 1s-24 6-37 1-26-5-38 0-25 5-37 0-26-6-38-1-12 4-12 4V0z' fill='%23000'/%3E%3C/svg%3E") repeat-x top / 200px 16px;
}

/* ---- Pattern library: five tiny tiles drawn through a mask, zero requests ---- */
:root {
  --pat-cobble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='6' y='8' width='44' height='30' rx='14'/%3E%3Crect x='58' y='4' width='50' height='34' rx='16'/%3E%3Crect x='116' y='10' width='38' height='28' rx='13'/%3E%3Crect x='2' y='50' width='36' height='30' rx='14'/%3E%3Crect x='46' y='46' width='52' height='32' rx='15'/%3E%3Crect x='106' y='48' width='48' height='30' rx='14'/%3E%3Crect x='14' y='86' width='48' height='28' rx='13'/%3E%3Crect x='70' y='88' width='56' height='26' rx='13'/%3E%3Crect x='132' y='84' width='26' height='28' rx='12'/%3E%3C/g%3E%3C/svg%3E");
  --pat-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 .5H120M.5 0V120' stroke='%23000' fill='none'/%3E%3Cpath d='M0 60.5H120' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --pat-hearts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M30 44c-7-11-22-4-15 9 3 6 15 15 15 15s12-9 15-15c7-13-8-20-15-9z'/%3E%3Cpath d='M100 24c-6-9-18-3-12 8 3 5 12 12 12 12s9-7 12-12c6-11-6-17-12-8z'/%3E%3Cpath d='M74 104c-7-11-22-4-15 9 3 6 15 15 15 15s12-9 15-15c7-13-8-20-15-9z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  --pat-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='29' y='14' width='22' height='30' rx='2'/%3E%3Cpath d='M40 44v22'/%3E%3Ccircle cx='46' cy='30' r='1.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E");
  --pat-produce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='24' cy='30' r='10'/%3E%3Cpath d='M24 20c1-5 4-7 6-7'/%3E%3Crect x='56' y='18' width='18' height='24' rx='2'/%3E%3Cellipse cx='65' cy='18' rx='9' ry='3'/%3E%3Cpath d='M20 74c8-14 24-16 30-14-2 10-14 20-30 14z'/%3E%3C/g%3E%3C/svg%3E");
}
.bg { position: relative; isolation: isolate; }
.bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--pat-color, var(--tint-ink)); opacity: var(--pat-opacity, .07);
  -webkit-mask: var(--pat) 0 0 / var(--pat-size, 120px) repeat; mask: var(--pat) 0 0 / var(--pat-size, 120px) repeat;
}
.bg--cobble  { --pat: var(--pat-cobble);  --pat-size: 160px; }
.bg--grid    { --pat: var(--pat-grid);    --pat-size: 120px; }
.bg--hearts  { --pat: var(--pat-hearts);  --pat-size: 140px; }
.bg--box     { --pat: var(--pat-box);     --pat-size: 80px; }
.bg--produce { --pat: var(--pat-produce); --pat-size: 96px; }
.bg--fade-up::before   { -webkit-mask-image: var(--pat), linear-gradient(to top, #000 55%, transparent); -webkit-mask-composite: source-in; mask-image: var(--pat), linear-gradient(to top, #000 55%, transparent); mask-composite: intersect; }
.bg--fade-down::before { -webkit-mask-image: var(--pat), linear-gradient(to bottom, #000 40%, transparent 80%); -webkit-mask-composite: source-in; mask-image: var(--pat), linear-gradient(to bottom, #000 40%, transparent 80%); mask-composite: intersect; }
/* Two more without SVG: crate slats and notebook ruling */
.lines { position: relative; isolation: isolate; }
.lines::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lines--slats::after { background: repeating-linear-gradient(180deg, rgba(27,58,107,.05) 0 1px, transparent 1px 14px); }
.lines--slats-top::after { height: 5rem; inset: 0 0 auto 0; background: repeating-linear-gradient(180deg, rgba(27,58,107,.06) 0 1px, transparent 1px 14px); -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.lines--rule::after { background: repeating-linear-gradient(transparent 0 calc(1.9rem - 1px), var(--line) 0 1.9rem); opacity: .35; }
/* Contrast guard: muted text never sits on patterned or wheat paper */
.bg .muted, .section--wheat .muted, .section--kraft .muted, .lines .muted { color: var(--ink); }

/* ---- The hero: one system, six kinds of weather ---- */
.page-hero { --glow: var(--tint); }
.page-hero::before { background: radial-gradient(closest-side, var(--glow), rgba(255,255,255,0) 70%); opacity: .9; }
.page-hero--sunrise { background: linear-gradient(170deg, #FBE9C4 0%, var(--wheat-soft) 35%, var(--cream) 100%); }
.page-hero--leaf    { background: linear-gradient(160deg, var(--leaf-soft) 0%, var(--cream) 70%); }
.page-hero--journey { background: linear-gradient(165deg, var(--blue-soft) 0%, var(--cream) 45%, #FBE9C4 100%); }
/* About: the illustration's empty road and little houses sit low-left behind the title on wide screens */
@media (min-width: 56em) {
  .about-hero {
    background-image: linear-gradient(90deg, rgba(248,241,225,.35) 30%, rgba(248,241,225,1) 75%), url("/assets/spot-road.webp?v=202609142153"), linear-gradient(165deg, var(--blue-soft) 0%, var(--cream) 45%, #FBE9C4 100%);
    background-repeat: no-repeat; background-position: 0 0, left bottom, 0 0; background-size: 100% 100%, 62% auto, 100% 100%;
  }
}
@media (prefers-reduced-data: reduce) { .about-hero { background-image: linear-gradient(165deg, var(--blue-soft) 0%, var(--cream) 45%, #FBE9C4 100%); } }
.page-hero--warm    { background: linear-gradient(160deg, var(--tomato-soft) 0%, var(--cream) 55%); }
.page-hero--counter { background: linear-gradient(170deg, #F3DDB0 0%, var(--wheat-soft) 40%, var(--cream) 100%); }
.page-hero--sky     { background: linear-gradient(180deg, var(--blue-soft) 0%, var(--cream) 70%); }
.ghost {
  position: absolute; right: -.06em; top: -.2em; z-index: -1; pointer-events: none; user-select: none;
  font: 700 clamp(7rem, 22vw, 15rem) / 1 var(--font-display); letter-spacing: -.04em; color: var(--tint-ink); opacity: .13;
}
.page-hero .hero__leaf { opacity: .4; }
@media (min-width: 56em) { .page-hero .hero__leaf { display: none; } }
/* Olive-leaf tick before every eyebrow in the page body (header, band and footer untouched) */
main .eyebrow::before {
  content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .45em; vertical-align: -.1em;
  background: var(--leaf); transform: rotate(-20deg);
  -webkit-mask: url("/assets/leaf-single.svg?v=202609142153") center / contain no-repeat; mask: url("/assets/leaf-single.svg?v=202609142153") center / contain no-repeat;
}
/* Hand-brushed underline on exactly one phrase per page */
.hand-u { position: relative; text-decoration: underline; text-decoration-thickness: .16em; text-underline-offset: .1em; text-decoration-color: var(--u-color, var(--tint-ink)); text-decoration-skip-ink: none; }
.hand-u::after { display: none; }
@media (min-width: 40em) { .hand-u { white-space: nowrap; text-decoration: none; } .hand-u::after { display: block; } }
.hand-u::after {
  content: ""; position: absolute; left: -.05em; right: -.05em; bottom: -.12em; height: .28em; z-index: -1; opacity: .85;
  background: var(--u-color, var(--tint-ink));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8C40 2 80 10 198 5' stroke='%23000' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8C40 2 80 10 198 5' stroke='%23000' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
h1 .hand-u, h2 .hand-u { z-index: 0; }

/* Journey ornament above the About title */
.journey-line { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.journey-line > span { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.journey-line i { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--blue); background: var(--blue-soft); position: relative; }
.journey-line i.is-here { background: var(--wheat); }
.journey-line em { flex: 1; min-width: 2rem; border-top: 3px dotted var(--blue); opacity: .6; }
@media (max-width: 30em) { .journey-line { flex-direction: column; align-items: flex-start; gap: .25rem; } .journey-line em { width: 3px; min-height: 1.2rem; border-top: 0; border-left: 3px dotted var(--blue); margin-left: .35rem; } }

/* Next-giveaway chip on Get Food */
.chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .55rem 1rem; border-radius: 999px; background: var(--paper); border: 2px solid var(--wheat); color: var(--blue-deep); font-weight: 600; font-size: 1rem; }
.chip b { color: var(--tomato-deep); }

/* Painted sign: the promise as a hand-painted board */
.promise--sign { background: var(--blue-deep); color: #fff; border: 0; border-radius: 12px; outline: 2px dashed rgba(255,255,255,.35); outline-offset: -.6rem; padding: 1.5rem 1.6rem; }
.promise--sign li { color: #fff; }
.promise--sign svg { color: var(--wheat); }
.promise--sign p { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; color: var(--wheat-soft); }

/* ---- Prints and painted spots ---- */
.print { --r: 1.2deg; background: var(--paper); padding: 6px; border: 1px solid var(--line); box-shadow: var(--shadow); transform: rotate(var(--r)); }
.print img { border-radius: 2px; }
.print figcaption { font-family: var(--font-display); font-style: italic; font-size: .95rem; color: var(--blue-deep); padding: .55rem .25rem .1rem; margin: 0; }
.tape { position: relative; }
.tape::before { content: ""; position: absolute; top: -.7rem; left: 50%; width: 5rem; height: 1.4rem; margin-left: -2.5rem; background: rgba(217,164,65,.38); transform: rotate(-3deg); z-index: 2; }
.tape--corners::before { left: 1.5rem; margin: 0; transform: rotate(-6deg); }
.tape--corners::after { content: ""; position: absolute; top: -.7rem; right: 1.5rem; width: 5rem; height: 1.4rem; background: rgba(217,164,65,.38); transform: rotate(5deg); z-index: 2; }
.spot { display: none; }
@media (min-width: 56em) {
  .spot { display: block; position: absolute; z-index: 0; pointer-events: none; }
  .spot img { -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 55%, #000 50%, transparent 78%); mask-image: radial-gradient(ellipse 70% 75% at 50% 55%, #000 50%, transparent 78%); }
  .spot--right { right: -4%; bottom: 0; width: 42%; }
  .spot--stand { right: -7rem; bottom: -2rem; width: 15rem; z-index: 0; }
  .spot--hands { left: -3rem; bottom: -3.5rem; width: 13rem; z-index: 2; }
}

/* ---- Objects instead of identical cards ---- */
.card--bag { background: #EBDCB9; border-color: #D9C49A; border-radius: 6px 6px 14px 14px; padding-top: 2.4rem; overflow: visible; }
@supports (color: color-mix(in srgb, red, blue)) { .card--bag { background: color-mix(in srgb, var(--cream-2) 85%, var(--wheat)); } }
.card--bag::before { content: ""; position: absolute; top: -1rem; left: 50%; width: 3rem; height: 1.2rem; margin-left: -1.5rem; border: 3px solid var(--wheat); border-bottom: 0; border-radius: 1rem 1rem 0 0; }
.card--bag .bag-fold { position: absolute; left: 0; right: 0; top: 0; height: 1.25rem; background: var(--wheat-soft); border-radius: 6px 6px 0 0; }
.list--ruled { background: repeating-linear-gradient(transparent 0 calc(1.9rem - 1px), var(--line) 0 1.9rem); line-height: 1.9rem; padding: 0 .25rem; }
.list--ruled li { line-height: 1.9rem; margin: 0; }
.card--notice { border-top: 6px solid var(--tomato); outline: 2px dashed rgba(198,61,42,.45); outline-offset: -.75rem; padding: 1.75rem 1.9rem; }
.card--index { box-shadow: none; border-radius: 6px; padding-top: 3.25rem;
  background: linear-gradient(transparent 2.6rem, rgba(198,61,42,.4) 2.6rem, rgba(198,61,42,.4) calc(2.6rem + 1px), transparent calc(2.6rem + 1px)),
              repeating-linear-gradient(transparent 0 calc(1.9rem - 1px), rgba(224,212,184,.55) 0 1.9rem) 0 3.6rem / 100% 100% no-repeat, var(--paper); }
.card--index:nth-child(odd) { --r: -.6deg; } .card--index:nth-child(even) { --r: .5deg; }
.card--box { padding-left: 3.2rem; }
.card--box .box-hearts { position: absolute; left: 1rem; top: 1.4rem; display: grid; gap: .5rem; }
.card--box .box-hearts svg { width: 1.1rem; height: 1.1rem; }
.card--box::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: .8rem; height: .8rem; border-radius: 50%; background: var(--blue); margin-top: -.4rem; }
.card--call { border-top: 10px solid var(--tomato); }
.card--call .bignum a { text-decoration: none; color: var(--blue-deep); letter-spacing: .01em; }
.card--call .bignum { font-size: clamp(2rem, 8vw, 3.25rem); margin: .25rem 0 1rem; word-break: break-word; }
.stamp-round {
  display: inline-grid; place-items: center; text-align: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; padding: .5rem;
  border: 3px double var(--leaf-deep); color: var(--leaf-deep); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15;
  transform: rotate(var(--r, 8deg)); background: rgba(255,252,245,.85);
}
.stamp-round--tomato { border-color: var(--tomato-deep); color: var(--tomato-deep); }
.postmark { display: inline-block; padding: .45rem .8rem; border: 2px dashed var(--blue); border-radius: 50%; color: var(--blue); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-8deg); background: rgba(255,252,245,.7); line-height: 1.3; text-align: center; }

/* Luggage tags (Volunteer: what volunteers do) */
.tags { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
@media (min-width: 40em) { .tags { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60em) { .tags { grid-template-columns: repeat(3, 1fr); } }
.tag { position: relative; background: var(--paper); border: 1px solid var(--line); padding: 1rem 1.1rem 1rem 2.6rem; clip-path: polygon(0 50%, 1.25rem 0, 100% 0, 100% 100%, 1.25rem 100%); transform: rotate(var(--r, -1deg)); box-shadow: var(--shadow); }
.tag:nth-child(even) { --r: .8deg; }
.tag::before { content: ""; position: absolute; left: 1rem; top: 50%; width: .6rem; height: .6rem; margin-top: -.3rem; border-radius: 50%; background: var(--cream-2); border: 1px solid var(--line); }
.tag b { display: block; color: var(--blue); }
.tag span { display: block; font-size: .95rem; color: var(--ink); }

/* Tear-off tickets: the schedule rows, CSS only (rows are built by main.js) */
.page-get-food .date-row { position: relative; border: 2px solid var(--line); border-radius: 6px; background: var(--paper); overflow: visible; }
.page-get-food .date-row__day { border-right: 2px dashed var(--line); border-radius: 6px 0 0 6px; margin: -.9rem 0 -.9rem -1.1rem; padding: .9rem .25rem; }
.page-get-food .date-row__day b { font-size: 2.2rem; }
.page-get-food .date-row--next { background: var(--wheat-soft); border-color: var(--wheat); }
.page-get-food .date-row .badge { position: absolute; top: -.7rem; right: 1rem; margin: 0; background: var(--tomato); color: #fff; transform: rotate(-6deg); padding: .3rem .7rem; }
.page-get-food .date-row .badge--alert { background: var(--tomato-deep); }
.notice { background: var(--wheat-soft); border: 2px dashed var(--wheat); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.notice h3 { color: var(--tomato-deep); }

/* Street sign at the corner (Get Food, Contact) */
.street-sign { position: relative; width: 12rem; height: 6.5rem; margin: 0 auto 1rem; }
.street-sign::after { content: ""; position: absolute; left: 50%; top: 1.2rem; width: 6px; height: 5.5rem; margin-left: -3px; background: var(--muted); border-radius: 3px; }
.street-sign span { position: absolute; left: 50%; padding: .35rem .8rem; border-radius: 6px; background: var(--blue); color: #fff; font-family: var(--font-display); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; z-index: 1; box-shadow: var(--shadow); }
.street-sign span:first-child { top: 0; transform: translateX(-60%) rotate(-4deg); }
.street-sign span:last-child { top: 1.9rem; transform: translateX(-35%) rotate(3deg); }

/* The road: steps on a dashed lane with a car that drives to the van (Get Food) */
.road { position: relative; padding-top: 1rem; }
.road .steps { position: relative; z-index: 1; }
.road__lane { position: absolute; z-index: 0; pointer-events: none; }
.road__lane { left: 1.45rem; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient(180deg, #D9C9A3 0 24px, transparent 24px 40px); }
.road__van { position: absolute; z-index: 2; width: 44px; left: .1rem; bottom: -1.6rem; }
.track { position: absolute; z-index: 2; pointer-events: none; }
.track { left: .55rem; top: 0; bottom: 2.6rem; width: 26px; display: flex; flex-direction: column; justify-content: flex-end; }
.track svg { width: 16px; height: auto; }
.journey .track svg { width: 44px; }
.road .steps li:nth-child(1)::before { background: var(--blue); }
.road .steps li:nth-child(2)::before { background: var(--wheat); color: var(--blue-deep); }
.road .steps li:nth-child(3)::before { background: var(--leaf); }
@media (min-width: 48em) {
  .road { padding-top: 3.25rem; }
  .road__lane { left: 0; right: 0; top: 4.7rem; bottom: auto; width: auto; height: 4px; background: repeating-linear-gradient(90deg, #D9C9A3 0 24px, transparent 24px 40px); }
  .road__van { left: auto; right: -.5rem; bottom: auto; top: 2.9rem; }
  .track { left: 0; right: 3.5rem; top: 3.6rem; bottom: auto; width: auto; height: 26px; flex-direction: row; justify-content: flex-end; }
}

/* Volunteer: thirty hands, the shift timeline, the clipboard */
.hands { display: flex; flex-wrap: wrap; gap: .35rem; max-width: 34rem; margin: 1rem 0 .5rem; }
.hands svg { width: 1.6rem; height: 1.85rem; color: var(--blue); opacity: .45; }
.hands svg.is-us { color: var(--tomato); opacity: 1; }
.hands + .pullquote { margin-top: 1rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.25rem; position: relative; display: grid; gap: 1.25rem; border-left: 3px dotted var(--tomato); }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(-1.25rem - .5rem - 1.5px); top: .45rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--tomato-deep); border: 3px solid var(--cream); }
.timeline b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--blue); line-height: 1.1; }
.timeline span { display: block; color: var(--ink); }
.timeline--thin { border-left-color: var(--leaf); margin-top: 1.5rem; }
.timeline--thin li::before { background: var(--leaf-deep); }
.timeline--thin b { font-size: 1.15rem; font-family: var(--font-body); }
@media (min-width: 56em) {
  .timeline { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; border-left: 0; padding: 1.5rem 0 0; }
  .timeline::before { content: ""; position: absolute; left: .5rem; right: .5rem; top: .45rem; border-top: 3px dotted var(--tomato); }
  .timeline li::before { left: 0; top: -1.55rem; }
  .timeline--thin { grid-template-columns: repeat(2, 1fr); }
  .timeline--thin::before { border-top-color: var(--leaf); }
}
.clipboard { position: relative; background: var(--cream-2); border-radius: 16px; box-shadow: var(--shadow); padding: 2.5rem 1.25rem 1.5rem; margin-top: 1.25rem; }
.clipboard::before { content: ""; position: absolute; top: -.5rem; left: 50%; width: 7rem; height: 1.6rem; margin-left: -3.5rem; background: var(--blue); border-radius: .5rem; z-index: 2; }
.clipboard::after { content: ""; position: absolute; top: -1.2rem; left: 50%; width: 2.5rem; height: 1rem; margin-left: -1.25rem; background: var(--blue-deep); border-radius: .5rem .5rem 0 0; z-index: 1; }
.sheet { background: var(--paper); border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2rem); position: relative; }

/* Contact: postcard form, the phone as the headline object */
.postcard { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.25rem, 3vw, 2rem); position: relative; }
.postcard__stamp { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 2px dashed var(--blue); transform: rotate(-4deg); background: var(--paper); }
.postcard__stamp img { width: 3rem; height: 3rem; }
.postcard__addr { margin-top: 1rem; color: var(--ink); font-size: .95rem; }
.postcard__addr span { display: block; border-bottom: 1px solid var(--line); padding: .45rem 0; }
@media (min-width: 48em) {
  .postcard { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; }
  .postcard__right { border-left: 2px dashed var(--line); padding-left: 2rem; }
  .postcard__marks { display: flex; gap: 1rem; align-items: flex-start; justify-content: flex-end; margin-bottom: 1rem; }
}
@media (max-width: 47.99em) { .postcard__marks { display: flex; gap: 1rem; justify-content: flex-end; margin-bottom: 1rem; } }
.postcard__left, .postcard__right { display: grid; gap: .9rem; align-content: start; }
.postcard__actions { grid-column: 1 / -1; display: grid; gap: .75rem; justify-items: start; }
@media (max-width: 47.99em) { .postcard__actions .btn { width: 100%; } .postcard.form { display: grid; gap: 1rem; } }

/* Blessing Boxes: the door, the pins, the route */
.box-door { position: relative; }
.box-door__panel { display: none; }
.box-door__hearts { position: absolute; left: .9rem; top: 1rem; display: grid; gap: .45rem; z-index: 3; }
.box-door__hearts svg { width: 14px; height: 14px; }
.stamp-open { position: absolute; top: -1.2rem; right: -1rem; z-index: 4; }
@media (max-width: 36em) { .stamp-open { right: .25rem; } }
/* Map pins: a teardrop with the number kept upright */
.page-blessing-boxes .locations li { position: relative; }
.page-blessing-boxes .locations li::before { content: ""; width: 2rem; height: 2rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--leaf-deep); box-shadow: 0 0 0 2px var(--paper); }
.page-blessing-boxes .locations li::after { content: counter(loc); position: absolute; left: 1rem; top: 50%; width: 2rem; transform: translateY(-58%); text-align: center; color: #fff; font-weight: 700; font-size: .85rem; z-index: 1; pointer-events: none; }
.box-door__text { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; margin: 0; padding: 0 3rem 0 3.5rem; font-family: var(--font-display); font-variant: small-caps; letter-spacing: .06em; font-size: clamp(1rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--blue); }
.box-door__handle { position: absolute; right: 1rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; border-radius: 50%; background: var(--blue); }
.locations b .rural, .rural { display: inline-block; width: auto; margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--wheat-soft); color: var(--blue-deep); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
.route-gutter { display: none; }
@media (min-width: 40em) { .locations-wrap { position: relative; } .route-gutter { display: block; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: repeating-linear-gradient(180deg, var(--leaf) 0 6px, transparent 6px 14px); opacity: .5; pointer-events: none; } }
.deep-panel { background: var(--leaf-deep); color: #fff; border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); position: relative; isolation: isolate; overflow: hidden; }
.deep-panel h3, .deep-panel a { color: #fff; }
.deep-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .08; -webkit-mask: var(--pat-box) 0 0 / 80px repeat; mask: var(--pat-box) 0 0 / 80px repeat; }
.deep-panel .ruler { width: 9rem; height: 10px; margin: .25rem 0 1rem; background: repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 1px, transparent 1px 12px) 0 0 / 100% 6px no-repeat, linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) 0 8px / 100% 2px no-repeat; }

/* Donate: the receipt, the market stall, the route and the gauge */
.receipt { max-width: 22rem; margin: 0; padding: 1.25rem 1.25rem 2rem; background: var(--paper); font: 1rem / 1.5 ui-monospace, "Cascadia Mono", "Courier New", monospace; color: var(--ink); position: relative; box-shadow: var(--shadow); --r: 0deg; transform: rotate(var(--r)); list-style: none; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 16px;
  background: linear-gradient(-45deg, var(--paper) 8px, transparent 0) 0 0 / 16px 16px, linear-gradient(45deg, var(--paper) 8px, transparent 0) 8px 0 / 16px 16px; }
.receipt li { display: flex; align-items: baseline; gap: .5rem; }
.receipt li.head { justify-content: center; text-align: center; letter-spacing: .06em; font-size: .85rem; color: var(--blue-deep); }
.receipt li.rule { border-top: 1px dashed var(--line); margin: .5rem 0; }
.receipt li b { color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt li em { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-.35em); min-width: 1rem; }
.receipt li.total { font-weight: 700; color: var(--tomato-deep); }
.receipt li.stamp-line { justify-content: flex-end; margin-top: .75rem; }
.receipt .stamp-round { --r: -5deg; width: 7rem; height: 7rem; font-size: .62rem; margin-right: -.5rem; }
.receipt a { color: inherit; text-decoration: none; }
.receipt a:hover { color: var(--blue-deep); text-decoration: underline; }
@media (min-width: 56em) { .receipt--tilt { --r: -1.5deg; } }
.stall { display: grid; gap: 1.5rem; position: relative; z-index: 1; align-items: start; }
@media (min-width: 56em) { .stall { grid-template-columns: 1.3fr 1fr; } .stall > .card:first-child { grid-row: span 2; align-self: start; } }
.route { position: relative; display: grid; gap: 1rem; padding-left: 1.25rem; border-left: 4px dashed rgba(27,58,107,.35); list-style: none; margin: 0; }
.route li { position: relative; }
.route li::before { content: ""; position: absolute; left: calc(-1.25rem - .45rem - 2px); top: .5rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--blue); border: 3px solid var(--blue-soft); }
.route b { display: block; color: var(--blue); }
.route span { color: var(--ink); font-size: .95rem; }
@media (min-width: 56em) { .route { grid-template-columns: repeat(4, 1fr); border-left: 0; padding: 1.6rem 0 0; } .route::before { content: ""; position: absolute; left: .45rem; right: .45rem; top: .45rem; border-top: 4px dashed rgba(27,58,107,.35); } .route li::before { left: 0; top: -1.6rem; } }
.gauge { width: 9rem; aspect-ratio: 2 / 1; border-radius: 9rem 9rem 0 0; border: 6px solid rgba(27,58,107,.25); border-bottom: 0; position: relative; margin: 1rem auto 0; }
.gauge__needle { position: absolute; left: 50%; bottom: 0; width: 3px; height: 92%; margin-left: -1.5px; background: var(--tomato); transform-origin: 50% 100%; transform: rotate(84deg); border-radius: 2px; }
.gauge__needle::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--blue-deep); }
.gauge__labels { display: flex; justify-content: space-between; width: 9rem; margin: .35rem auto 0; font-weight: 700; color: var(--ink); font-size: .9rem; }

/* Pull quote: one sentence per page in the organisation's own voice */
.pullquote { position: relative; margin: 0; padding: .1rem 0 .1rem 1.1rem; max-width: 30ch; font: italic 700 clamp(1.35rem, 3vw, 1.7rem) / 1.3 var(--font-display); color: var(--blue-deep); border: 0; border-left: 4px solid var(--wheat); background: none; }
.pullquote::before { content: "\201C"; display: inline; font-size: 1.35em; line-height: 0; color: var(--wheat); font-style: normal; margin-right: .08em; vertical-align: -.2em; }
.pullquote cite { display: block; margin-top: .6rem; font: 400 .9rem / 1.4 var(--font-body); color: var(--ink); }
.section--blue .pullquote, .deep-panel .pullquote { color: var(--wheat-soft); }
.bignum { font-family: var(--font-display); font-size: clamp(3rem, 9vw, 5.5rem); line-height: .95; color: var(--blue); letter-spacing: -.02em; }

/* About: numbers without boxes, journey postcards */
.page-about .stats { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .page-about .stats { grid-template-columns: repeat(3, 1fr); } .page-about .stats li + li { border-left: 1px solid rgba(255,255,255,.2); } }
.page-about .stats li { background: none; border: 0; padding: .5rem 1rem; text-align: left; display: block; }
.page-about .stats b { font-size: clamp(3rem, 9vw, 5.5rem); color: var(--wheat); }
.page-about .stats span { font-size: 1rem; color: rgba(255,255,255,.85); margin-top: .35rem; }
.journey { position: relative; }
.journey__route { list-style: none; position: relative; display: grid; gap: 1.25rem; padding-left: 1.25rem; border-left: 4px dashed rgba(27,58,107,.25); margin: 1.5rem 0; }
@media (min-width: 56em) { .journey__route { grid-template-columns: repeat(3, 1fr); border-left: 0; padding: 0; } }
.journey__van { display: none; }
@media (min-width: 56em) { .journey__van { display: block; position: absolute; right: 0; top: -2.4rem; width: 44px; } .journey .track { left: 0; right: 3.5rem; top: -2rem; height: 26px; flex-direction: row; justify-content: flex-end; width: auto; bottom: auto; } }
.journey-wash { background: linear-gradient(180deg, var(--blue-soft) 0%, var(--cream) 45%, var(--wheat-soft) 100%); }
@media (min-width: 56em) { .journey-wash { background: linear-gradient(90deg, var(--blue-soft) 0%, var(--cream) 45%, var(--wheat-soft) 100%); } }
.postcards { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 56em) { .postcards { grid-template-columns: 1fr 1.4fr 1fr; align-items: center; } }
.mini-route { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .85rem; font-weight: 700; color: var(--blue); flex-wrap: wrap; }
.mini-route i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--blue); }
.mini-route em { flex: 1; min-width: 1.5rem; border-top: 2px dashed rgba(27,58,107,.4); }
.stamped { position: relative; }
.stamped .stamp-round { position: absolute; top: -1rem; right: .75rem; --r: -12deg; width: 5.75rem; height: 5.75rem; font-size: .6rem; }

/* ---- Motion vocabulary: five moves, each page uses one arrival ---- */
@media (prefers-reduced-motion: no-preference) {
  /* settle: prints and tags land on their tilt */
  .js-motion .io.settle { transform: translateY(22px) rotate(0deg); }
  .js-motion .io.settle.is-in { transform: rotate(var(--r, 1.2deg)); }
  /* hero prints settle at load with transform only, so the photo paints immediately (it is the page's largest element) */
  .settle-in { animation: settle-in 1.1s cubic-bezier(.16, 1, .3, 1) .15s both; }
  @keyframes settle-in { from { transform: translateY(22px) rotate(0deg); } to { transform: rotate(var(--r, 1.2deg)); } }
  /* stamp */
  @keyframes stamp { from { opacity: 0; transform: scale(1.18) rotate(var(--r, -6deg)); } 70% { transform: scale(.98) rotate(var(--r, -6deg)); } to { opacity: 1; transform: scale(1) rotate(var(--r, -6deg)); } }
  .stamp-in { animation: stamp .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--delay, .6s); }
  .js-motion .io .stamp-on-enter { opacity: 0; }
  .js-motion .io.is-in .stamp-on-enter { animation: stamp .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--delay, .4s); }
  /* travel: a marker rides the road when its section enters */
  .js-motion .track { transform: translateY(calc(-100% + 30px)); }
  .js-motion .is-in .track { transform: translateY(0); transition: transform 2.4s cubic-bezier(.2,.7,.2,1) .2s; }
  @media (min-width: 48em) {
    .js-motion .track { transform: translateX(calc(-100% + 40px)); }
    .js-motion .is-in .track { transform: translateX(0); }
    .js-motion .journey .track { transform: translateX(calc(-100% + 40px)); }
    .js-motion .journey.is-in .track { transform: translateX(0); transition-duration: 3s; }
  }
  /* open: the Blessing Box door, desktop only */
  @media (min-width: 56em) {
    .box-door { perspective: 1400px; }
    .box-door__panel { display: block; position: absolute; inset: 0 0 auto 0; aspect-ratio: 16 / 10; z-index: 3; transform-origin: 0 50%; backface-visibility: hidden; animation: open-door 3.2s cubic-bezier(.3,.6,.2,1) 1.4s both; background: var(--paper); border: 2px solid var(--line); box-shadow: inset 0 0 0 6px var(--paper); }
    .box-door__panel::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; animation: door-shade 3.2s cubic-bezier(.3,.6,.2,1) 1.4s both; pointer-events: none; }
    @keyframes open-door { from { transform: rotateY(0); } to { transform: rotateY(-85deg); } }
    @keyframes door-shade { from { opacity: 0; } to { opacity: .35; } }
  }
  /* tick: hands and checks grow in */
  .js-motion .hands.io svg { opacity: 0; transform: scale(.6); }
  .js-motion .hands.io.is-in svg { opacity: .45; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--n, 0) * 45ms); }
  .js-motion .hands.io.is-in svg.is-us, .js-motion .hands.io.is-in svg.is-you { opacity: 1; }
  .js-motion .tags .tag { transform: translateY(14px) rotate(-3deg); opacity: 0; }
  .js-motion .tags.is-in .tag, .js-motion .tags .tag.is-in { transform: rotate(var(--r, -1deg)); opacity: 1; transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .5s ease; transition-delay: calc(var(--d, 0) * 90ms); }
  /* the gauge fills from E to F as its section enters */
  .js-motion .gauge__needle { transform: rotate(-84deg); }
  .js-motion .is-in .gauge__needle { transform: rotate(calc(-84deg + var(--fuel, 1) * 168deg)); transition: transform 1.6s cubic-bezier(.2,.8,.2,1) .3s; }
  /* receipt prints line by line at load */
  .receipt.print-in > li { animation: rise .6s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.25s + var(--i, 0) * 90ms); }
  .receipt.print-in .stamp-round { --delay: 1.5s; }
  /* map pin bobs once when its strip enters */
  .js-motion .is-in .pin-bob { animation: bob .7s ease-out 1; }
  @keyframes bob { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
  /* Bristol dot lands with a fading halo, once */
  .journey-line i.is-here::after { content: ""; position: absolute; inset: -.3rem; border-radius: 50%; background: var(--wheat); opacity: .6; animation: halo 1.2s ease-out .8s both; }
  @keyframes halo { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
  /* clipboard clip clamps once */
  .js-motion .clipboard.io::before { transform: scale(1.06); opacity: 0; }
  .js-motion .clipboard.io.is-in::before { transform: none; opacity: 1; transition: transform .3s ease-out, opacity .3s ease-out; }
}

/* ---- 501(c)(3) trust marks: seal, trust chip, footer certification, certificate page ---- */
.nb { white-space: nowrap; }
.seal { width: 5.5rem; height: auto; display: block; }
.seal--lg { width: min(56vw, 13.5rem); }
.seal-link { display: inline-block; border-radius: 50%; line-height: 0; }
.seal-link:focus-visible { outline: 3px solid var(--tomato); outline-offset: 4px; }

/* Trust chip: one line that says we are official, used in heroes */
.trust {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem;
  padding: .3rem 1.1rem .3rem .35rem; border-radius: 999px;
  background: rgba(255,252,245,.94); border: 1px solid rgba(27,58,107,.28);
  color: var(--blue-deep); font-weight: 700; font-size: .95rem; line-height: 1.25; text-decoration: none;
  box-shadow: 0 1px 0 rgba(27,58,107,.08), 0 6px 18px rgba(27,58,107,.08);
}
.trust img { width: 2.6rem; height: 2.6rem; flex: none; }
.trust small { display: block; font-weight: 600; font-size: .78rem; color: var(--muted); letter-spacing: .02em; }
.trust:hover > span > span:first-child, .trust:focus-visible > span > span:first-child { text-decoration: underline; }
.trust:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; }
.hero .trust { position: relative; z-index: 2; }

/* Footer certification block */
.footer-cert { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; margin-top: 1.1rem; }
.footer-cert .seal { width: 4.75rem; }
.footer-cert .legal { margin-top: 0; }
.footer-cert .legal + .legal { margin-top: .5rem; }
.site-footer .footer-cert a { display: inline; min-height: 0; text-decoration: underline; text-decoration-color: rgba(27,58,107,.35); text-underline-offset: .15em; }
.site-footer .footer-cert a:hover { text-decoration-color: currentColor; }

/* Inline mentions of our status link to the certificate page */
a.cert-link { color: var(--blue-deep); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(27,58,107,.35); text-underline-offset: .15em; }
a.cert-link:hover, a.cert-link:focus-visible { text-decoration-color: currentColor; }
.section--blue a.cert-link, .cta-band a.cert-link { color: #fff; text-decoration-color: rgba(255,255,255,.5); }

/* ---------- Page: 501(c)(3) certificate (hidden from navigation) ---------- */
.page-nonprofit { --tint: var(--blue-soft); --tint-ink: var(--blue); }
.page-hero--cert { background: linear-gradient(165deg, var(--blue-soft) 0%, var(--cream) 50%, #FBE9C4 100%); }
.certificate {
  position: relative; margin: 0; justify-self: center; width: min(100%, 22rem);
  padding: 1.75rem 1.5rem 1.5rem; text-align: center; background: var(--paper);
  border: 3px double var(--blue); box-shadow: 0 18px 40px rgba(27,58,107,.14);
  display: grid; justify-items: center; gap: .25rem;
}
@media (min-width: 56em) { .certificate { justify-self: end; } }
.certificate::before { content: ""; position: absolute; inset: .45rem; border: 1px solid rgba(27,58,107,.35); pointer-events: none; }
.certificate figcaption { display: grid; gap: .1rem; margin-top: .9rem; font-size: .95rem; color: var(--blue-deep); }
.certificate figcaption b { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; margin-bottom: .2rem; }
.certificate figcaption .num { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.certificate figcaption .since { font-size: .8rem; color: var(--muted); margin-top: .35rem; }

/* Ledger: a definition list that reads like a fact sheet */
.ledger { margin: 0; display: grid; }
.ledger > div { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: .25rem 1.25rem; padding: .7rem 0; border-bottom: 1px dashed var(--line); align-items: start; }
.ledger > div:last-child { border-bottom: 0; }
.ledger dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-top: .2rem; }
.ledger dd { margin: 0; font-weight: 600; color: var(--blue-deep); }
.ledger dd .note { display: block; font-weight: 500; color: var(--muted); font-size: .9rem; margin-top: .15rem; }
.ledger dd .num { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-size: 1.15em; font-family: var(--font-display); }
@media (max-width: 40em) { .ledger > div { grid-template-columns: 1fr; gap: .15rem; } }
.ledger--tight > div { grid-template-columns: minmax(6rem, 7.5rem) 1fr; gap: .2rem .9rem; padding: .55rem 0; }
@media (max-width: 40em) { .ledger--tight > div { grid-template-columns: 1fr; } }

/* Document list with a status tag */
.docs { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.docs li { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; padding: .8rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: .6rem; }
.docs li b { display: block; color: var(--blue-deep); }
.docs li span { color: var(--muted); font-size: .92rem; }
.docs .badge { justify-self: end; white-space: nowrap; }
a.badge { text-decoration: none; color: var(--blue-deep); border: 1px solid rgba(27,58,107,.25); }
a.badge:hover, a.badge:focus-visible { text-decoration: underline; background: var(--wheat); }
@media (max-width: 30em) { .docs li { grid-template-columns: 1fr; } .docs .badge { justify-self: start; } }

/* Spend lines: what a gift pays for, in one row */
.spend { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 40em) { .spend { grid-template-columns: repeat(3, 1fr); } }
.spend li { background: var(--paper); border: 1px solid var(--line); border-radius: .8rem; padding: 1.1rem 1.2rem; }
.spend li b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1; color: var(--blue); margin-bottom: .35rem; }
.spend li span { color: var(--ink); }

.page-nonprofit .pullquote { margin-top: 1.5rem; }
/* Steps on the blue verify band */
.section--blue .steps li::before { background: var(--wheat); color: var(--blue-deep); }
.section--blue .steps p, .section--blue .section-head p { color: rgba(255,255,255,.86); }
.section--blue .steps a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: .15em; }
.section--blue .steps a:hover { text-decoration-color: #fff; }
.updated { font-size: .85rem; color: var(--muted); margin-top: 1.5rem; }

@media print {
  .page-nonprofit .certificate, .page-nonprofit .docs li, .page-nonprofit .spend li { border: 1pt solid #999 !important; box-shadow: none !important; background: #fff !important; transform: none !important; animation: none !important; }
  .page-nonprofit .section--blue, .page-nonprofit .section--blue h2, .page-nonprofit .section--blue h3, .page-nonprofit .section--blue p, .page-nonprofit .section--blue a, .page-nonprofit .section--blue strong, .page-nonprofit .section--blue .eyebrow { color: #000 !important; }
  .page-nonprofit .section--blue .steps li::before { background: #fff !important; color: #000 !important; border: 1pt solid #999; }
  .page-nonprofit .certificate::before { display: none; }
  .page-nonprofit .page-hero--cert, .page-nonprofit .section { background: #fff !important; }
  .page-nonprofit .cluster, .page-nonprofit .trust { display: none !important; }
  .page-nonprofit .seal--lg { width: 30mm; }
  .page-nonprofit .section { padding-block: 1rem !important; }
  .page-nonprofit .ledger > div { padding: .3rem 0; }
  .page-nonprofit a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ---- Extras: countdown, seasonal note, date picks, gift slider, box map, food-drive sheet ---- */
.next-card__count { margin: -.35rem 0 .75rem; font-weight: 700; color: var(--tomato-deep); font-size: 1rem; letter-spacing: .01em; }
.season {
  margin: 0 0 1rem; padding: .6rem .9rem; border-radius: .6rem; font-weight: 600; font-size: .95rem; line-height: 1.35;
  background: var(--wheat-soft); border-left: 4px solid var(--wheat); color: var(--ink);
}
.next-card .season { margin-top: -.25rem; }
.picks { display: grid; gap: .1rem; margin-bottom: .25rem; }
@media (min-width: 40em) { .picks { grid-template-columns: 1fr 1fr; } }
.hint { font-weight: 500; color: var(--muted); font-size: .9rem; }

/* Gift slider */
.gift { margin: 1rem 0 1.25rem; padding: 1rem 1.1rem 1.1rem; background: var(--cream); border: 1px solid var(--line); border-radius: .8rem; --pct: 21%; }
.gift label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 600; color: var(--blue-deep); }
.gift label b { font-family: var(--font-display); font-size: 1.6rem; color: var(--blue); font-variant-numeric: tabular-nums; }
.gift input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2.2rem; margin: .35rem 0 .5rem; background: transparent; cursor: pointer; }
.gift input[type=range]::-webkit-slider-runnable-track { height: .55rem; border-radius: 999px; background: linear-gradient(90deg, var(--wheat) 0 var(--pct), var(--cream-2) var(--pct) 100%); border: 1px solid rgba(27,58,107,.15); }
.gift input[type=range]::-moz-range-track { height: .55rem; border-radius: 999px; background: var(--cream-2); border: 1px solid rgba(27,58,107,.15); }
.gift input[type=range]::-moz-range-progress { height: .55rem; border-radius: 999px; background: var(--wheat); }
.gift input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.6rem; height: 1.6rem; margin-top: -.55rem; border-radius: 50%; background: var(--blue); border: 3px solid var(--paper); box-shadow: 0 2px 6px rgba(27,58,107,.35); }
.gift input[type=range]::-moz-range-thumb { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--blue); border: 3px solid var(--paper); box-shadow: 0 2px 6px rgba(27,58,107,.35); }
.gift input[type=range]:focus-visible { outline: 3px solid var(--tomato); outline-offset: 4px; border-radius: 999px; }
.gift__outs { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-weight: 600; color: var(--ink); }
.gift__outs li > span:first-child:not([data-gift-out]) { color: var(--muted); font-weight: 500; margin-right: .25rem; }
.gift__outs [data-gift-out] { color: var(--blue-deep); }

/* Blessing Box map: hand-laid OpenStreetMap tiles */
.boxmap { margin: 0 0 2rem; }
.boxmap__bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.boxmap__canvas {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 2; max-height: 32rem; border-radius: .8rem;
  background: var(--cream-2); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.boxmap:not(.is-live) .boxmap__canvas::after { content: "Map loads as you scroll to it"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .95rem; }
.boxmap__tile { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-drag: none; }
.boxmap__pin {
  position: absolute; z-index: 2; width: 1.9rem; height: 1.9rem; margin: -2.4rem 0 0 -.95rem; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: var(--tomato); color: #fff; font: 700 .78rem/1 var(--font-body); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.35); font-variant-numeric: tabular-nums;
}
.boxmap__pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: 0; margin-left: -.35rem; border: .35rem solid transparent; border-top: .5rem solid var(--tomato); border-bottom: 0; }
.boxmap__pin--approx { background: var(--wheat); color: var(--blue-deep); }
.boxmap__pin--approx::after { border-top-color: var(--wheat); }
.boxmap__pin.is-active, .boxmap__pin:hover { background: var(--blue); color: #fff; z-index: 3; }
.boxmap__pin.is-active::after, .boxmap__pin:hover::after { border-top-color: var(--blue); }
.boxmap__pin:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.boxmap__you { position: absolute; z-index: 4; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem; border-radius: 50%; background: #1E7BD6; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(30,123,214,.25); }
.boxmap__status { margin: .6rem 0 0; font-size: .95rem; color: var(--ink); font-weight: 600; }
.boxmap__credit { margin: .25rem 0 0; font-size: .75rem; color: var(--muted); }
.boxmap__credit a { color: inherit; }
.nearest { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.nearest li { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: center; padding: .55rem .8rem; background: var(--paper); border: 1px solid var(--line); border-radius: .5rem; }
.nearest li b { color: var(--blue-deep); }
.nearest li span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nearest li a { font-weight: 700; white-space: nowrap; }
.locations li.is-active { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 26em) { .nearest li { grid-template-columns: 1fr auto; } .nearest li b { grid-column: 1 / -1; } }

/* Food-drive sheet */
.page-food-drive { --tint: var(--leaf-soft); --tint-ink: var(--leaf); }
.flyer h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.flyer h2 { font-size: 1.35rem; margin: .5rem 0 .5rem; }
.flyer__cols { margin-top: 1.5rem; }
.flyer__qr { display: flex; gap: 1rem; align-items: center; margin-top: 1.25rem; padding: .9rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: .8rem; }
.flyer__qr img { width: 7.5rem; height: 7.5rem; flex: none; }
.flyer__qr div { display: grid; gap: .15rem; font-size: .95rem; }
.flyer__qr b { color: var(--blue-deep); overflow-wrap: anywhere; }
.flyer__qr span { color: var(--muted); }
.flyer__foot { margin-top: 1.5rem; font-size: .9rem; color: var(--muted); }

@media print {
  .page-food-drive .flyer { padding: 0 !important; }
  .page-food-drive .flyer__cols { gap: 1.2rem !important; margin-top: .8rem; }
  .page-food-drive .checks li { padding: .2rem 0 !important; }
  .page-food-drive .flyer__qr { border: 1pt solid #999; background: #fff; }
  .page-food-drive .flyer__qr img { width: 30mm; height: 30mm; }
  .page-food-drive .lead { font-size: 11pt; }
  .page-food-drive .flyer__foot { color: #333; }
}

/* ---- Lively: first-or-last, state line, State Street chips, add-your-hand, van sign, tables, life of a box, drive the week, porch light ---- */
/* First or last: a giveaway morning on a slider */
.lot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed rgba(27,58,107,.25); --t: 0; --van-x: -170%; --line: 0; --pile: 0; }
.lot__label { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; color: var(--blue-deep); }
.lot__label b { font-family: var(--font-display); font-size: 1.3rem; color: var(--blue); font-variant-numeric: tabular-nums; }
.lot input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2rem; margin: .25rem 0 .5rem; background: transparent; cursor: pointer; }
.lot input[type=range]::-webkit-slider-runnable-track { height: .5rem; border-radius: 999px; background: linear-gradient(90deg, var(--wheat) 0 var(--pct, 0%), rgba(27,58,107,.15) var(--pct, 0%) 100%); }
.lot input[type=range]::-moz-range-track { height: .5rem; border-radius: 999px; background: rgba(27,58,107,.15); }
.lot input[type=range]::-moz-range-progress { height: .5rem; border-radius: 999px; background: var(--wheat); }
.lot input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.5rem; height: 1.5rem; margin-top: -.5rem; border-radius: 50%; background: var(--blue); border: 3px solid var(--paper); box-shadow: 0 2px 6px rgba(27,58,107,.35); }
.lot input[type=range]::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--blue); border: 3px solid var(--paper); }
.lot input[type=range]:focus-visible { outline: 3px solid var(--tomato); outline-offset: 4px; border-radius: 999px; }
.lot__scene { position: relative; height: 5.5rem; overflow: hidden; border-radius: .5rem; background: linear-gradient(180deg, transparent 0 62%, rgba(27,58,107,.08) 62% 100%); }
.lot__ground { position: absolute; left: 0; right: 0; bottom: 1.6rem; height: 2px; background: rgba(27,58,107,.35); }
.lot__van { position: absolute; left: 4%; bottom: 1.5rem; width: 3rem; transform: translateX(var(--van-x)); }
.lot__van svg { display: block; width: 100%; height: auto; }
.lot__pile { position: absolute; left: calc(4% + 3.6rem); bottom: 1.75rem; display: flex; align-items: flex-end; gap: 2px; opacity: var(--pile); }
.lot__pile i { display: block; width: .8rem; height: .7rem; border-radius: 2px; background: #C9A26B; border: 1px solid #B8842C; }
.lot__pile i:nth-child(2) { height: 1rem; } .lot__pile i:nth-child(3) { height: .55rem; }
.lot__line { position: absolute; left: calc(4% + 5.6rem); right: 4%; bottom: 1.75rem; height: .5rem; transform-origin: left center; transform: scaleX(var(--line)); background: repeating-linear-gradient(90deg, var(--blue) 0 .5rem, transparent .5rem 1rem); border-radius: 999px; }
.lot__tag { position: absolute; left: 50%; top: .5rem; transform: translateX(-50%) rotate(-1.5deg); padding: .2rem .6rem; background: var(--paper); border: 1.5px dashed var(--wheat); border-radius: .3rem; font-size: .8rem; font-weight: 700; color: var(--blue-deep); white-space: nowrap; }
.lot__caption { margin: .6rem 0 0; font-weight: 600; color: var(--ink); min-height: 2.6em; }
@media (max-width: 30em) { .lot__tag { font-size: .72rem; } .lot__scene { height: 5rem; } }

/* Two Bristols, one line */
.stateline { padding-block: clamp(1.5rem, 4vw, 2.5rem); background: var(--cream-2); }
.stateline .wrap { display: grid; gap: 1rem; }
.stateline__road { position: relative; height: 4.25rem; border-radius: .4rem; background: #4A4F57; overflow: hidden; }
.stateline__center { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; background: linear-gradient(180deg, #E8C24A 0 2px, transparent 2px 4px, #E8C24A 4px 6px); transform-origin: left center; transform: scaleX(1); }
.stateline__label { position: absolute; left: 1rem; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.stateline__label--va { top: .55rem; } .stateline__label--tn { bottom: .55rem; }
.stateline__sign { position: absolute; right: 1.1rem; top: .55rem; padding: .2rem .5rem .2rem 1.1rem; background: var(--paper); color: var(--blue-deep); font-size: .72rem; font-weight: 700; letter-spacing: .06em; border-radius: 3px; }
.stateline__sign i { position: absolute; left: .35rem; top: .35rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--tomato); }
.stateline__text { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--blue-deep); max-width: 60ch; }

/* Which side of State Street */
.side { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line); }
.side__q { margin: 0 0 .5rem; font-weight: 700; color: var(--blue-deep); }
.side__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pick { font: 600 .92rem var(--font-body); padding: .5rem .9rem; border-radius: 999px; border: 2px solid var(--blue); background: var(--paper); color: var(--blue-deep); cursor: pointer; min-height: 2.6rem; }
.pick[aria-pressed="true"] { background: var(--blue); color: #fff; }
.pick:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; }
.side__answer { display: flex; align-items: center; gap: 1rem; margin-top: .75rem; min-height: 3rem; }
.stamp-round--leaf { border-color: var(--leaf-deep); color: var(--leaf-deep); }
.side__stamp { width: 4.5rem; height: 4.5rem; font-size: .7rem; flex: none; }
.side__text { margin: 0; font-weight: 600; color: var(--ink); }

/* Add your hand */
.hands-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin: .5rem 0 1rem; }
.hands__cap { font-weight: 600; color: var(--muted); }
.hands svg.is-you { color: var(--tomato); opacity: 1; }

/* Van sign on the Home card */
.van-sign { display: grid; gap: .1rem; margin: 0 0 .5rem; padding: .55rem .8rem; background: var(--blue); color: #fff; border-radius: .35rem; text-decoration: none; font-weight: 700; line-height: 1.25; transform-origin: 50% -1rem; position: relative; }
.van-sign::before { content: ""; position: absolute; left: 50%; top: -.9rem; width: 2px; height: .9rem; margin-left: -1px; background: rgba(27,58,107,.6); }
.van-sign small { font-weight: 500; opacity: .85; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); }
.van-sign:hover small { text-decoration-color: #fff; }
.next-card__tools { margin-top: .6rem; }

/* Walk the tables */
.tables { margin-top: 2.25rem; }
.tables__lead { font-weight: 700; color: var(--blue-deep); margin-bottom: .75rem; }
.tables__row { list-style: none; margin: 0 -1rem; padding: 0 1rem .5rem; display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tables__row::-webkit-scrollbar { height: 6px; } .tables__row::-webkit-scrollbar-thumb { background: rgba(27,58,107,.25); border-radius: 3px; }
@media (min-width: 56em) { .tables__row { display: grid; grid-template-columns: repeat(6, 1fr); overflow: visible; margin: 0; padding: 0; } }
.table { position: relative; flex: 0 0 9.5rem; scroll-snap-align: start; display: grid; justify-items: center; gap: .25rem; padding: .25rem .25rem .5rem; }
.tables__row > .table:nth-child(2) { --i: 1; } .tables__row > .table:nth-child(3) { --i: 2; } .tables__row > .table:nth-child(4) { --i: 3; } .tables__row > .table:nth-child(5) { --i: 4; } .tables__row > .table:nth-child(6) { --i: 5; }
.table__items { display: flex; align-items: flex-end; gap: 3px; height: 2.6rem; }
.table__top { width: 100%; height: .9rem; border-radius: 2px; background: #C9A26B; border-bottom: 3px solid #B8842C; position: relative; }
.table__top::before, .table__top::after { content: ""; position: absolute; top: 100%; width: 3px; height: 1.6rem; background: #8A6A3A; }
.table__top::before { left: 14%; } .table__top::after { right: 14%; }
.table b { margin-top: 1.7rem; color: var(--blue-deep); text-align: center; font-size: .95rem; }
.table b small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }
.it { display: block; border-radius: 2px; }
.it--can { width: .8rem; height: 1.1rem; background: #C63D2A; border-radius: 3px; box-shadow: inset 0 -.35rem 0 #A83221; }
.it--box { width: .95rem; height: 1.3rem; background: #E07A2F; } .it--box.it--tall { height: 1.9rem; background: #D9A441; }
.it--jar { width: .85rem; height: 1rem; background: #B8842C; border-radius: .3rem .3rem 3px 3px; }
.it--bag { width: 1rem; height: 1.5rem; background: #1B3A6B; border-radius: .25rem; } .it--bag.it--alt { background: #3F7A3A; }
.it--bottle { width: .55rem; height: 1.8rem; background: #7FB7E8; border-radius: .3rem .3rem 2px 2px; }
.it--kit { width: 1.3rem; height: .9rem; background: #F0D9A6; border: 1.5px solid #B8842C; border-radius: 2px; }
.table--kids .table__top { background: #D9A441; }

/* Life of a Blessing Box */
.life { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: life; }
@media (min-width: 40em) { .life { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64em) { .life { grid-template-columns: repeat(5, 1fr); } }
.life li { position: relative; display: grid; gap: .35rem; padding: 1.1rem 1rem 1.2rem; background: var(--paper); border: 1px solid var(--line); border-radius: .8rem; counter-increment: life; }
.life li::before { content: counter(life); position: absolute; left: .75rem; top: .6rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--leaf); color: #fff; font: 700 .8rem/1.5rem var(--font-body); text-align: center; }
.life svg { width: 100%; height: auto; max-width: 9rem; margin: 1rem auto 0; }
.life b { color: var(--blue-deep); }
.life span { color: var(--muted); font-size: .92rem; line-height: 1.4; }

/* Drive the week */
.route__stop { display: block; width: 100%; text-align: left; padding: .4rem .6rem; margin: -.4rem -.6rem; border: 0; border-radius: .5rem; background: transparent; font: inherit; color: inherit; cursor: pointer; }
.route__stop:hover { background: rgba(255,255,255,.55); }
.route__stop:focus-visible { outline: 3px solid var(--tomato); outline-offset: 2px; }
.route__stop[aria-pressed="true"] { background: var(--paper); box-shadow: 0 1px 0 rgba(27,58,107,.12); }
.route--drive li.is-here::before { background: var(--tomato); box-shadow: 0 0 0 5px rgba(198,61,42,.2); }
.route--drive li.is-done::before { background: var(--leaf); }
.route--drive li.is-here::after { content: ""; position: absolute; left: calc(-1.25rem - .45rem - 2px); top: .5rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--tomato); opacity: 0; pointer-events: none; }
@media (min-width: 56em) { .route--drive li.is-here::after { left: 0; top: -1.6rem; } }
.route__note { margin: 1rem 0 0; font-weight: 600; color: var(--blue-deep); min-height: 1.5em; }
.gauge__needle { transform: rotate(calc(-84deg + var(--fuel, 1) * 168deg)); }

/* Porch light (after sunset, Blessing Boxes only) */
.lamp { position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 35%, rgba(233,196,120,.6), rgba(233,196,120,0) 60%); }
[data-dusk] .page-blessing-boxes .page-hero--leaf { background: linear-gradient(160deg, #CFDFD8 0%, #E6EDE6 55%, var(--cream) 100%); }
[data-dusk] .page-blessing-boxes .lamp { opacity: .9; }

@media (prefers-reduced-motion: no-preference) {
  .lot__van, .lot__line, .lot__pile { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
  .js-motion .stateline .stateline__center { transform: scaleX(0); }
  .js-motion .stateline.is-in .stateline__center { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.2,.8,.2,1) .2s; }
  .side__stamp.is-stamped { animation: stamp .5s cubic-bezier(.2,.8,.2,1) both; --delay: 0s; }
  @keyframes hand-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
  .hands svg.is-you { animation: hand-pop .45s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes sign-swing { 0% { transform: rotate(-4deg); } 35% { transform: rotate(3deg); } 70% { transform: rotate(-1.2deg); } 100% { transform: rotate(0); } }
  .van-sign:not([hidden]) { animation: sign-swing 1.6s ease-out both; }
  .js-motion .tables.io .table { opacity: 0; transform: translateY(14px); }
  .js-motion .tables.io.is-in .table { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 90ms); }
  .route--drive li.is-here::after { animation: halo 1.1s ease-out 1 both; }
  .js-motion .is-in .gauge__needle { transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
  @keyframes lamp-on { from { opacity: 0; } to { opacity: .9; } }
  [data-dusk] .page-blessing-boxes .lamp { animation: lamp-on 2.2s ease-out both; }
  @keyframes stamp-pulse { 0%, 100% { transform: rotate(var(--r, 8deg)) scale(1); } 50% { transform: rotate(var(--r, 8deg)) scale(1.08); } }
  [data-dusk] .page-blessing-boxes .stamp-open { animation: stamp .5s cubic-bezier(.2,.8,.2,1) .6s both, stamp-pulse 1.3s ease-in-out 2.6s 2; }
}
@media print { .lot, .stateline, .side, .hands-cta, .van-sign, .tables, .lamp, .route__note { display: none !important; } .life li { border: 1pt solid #999; background: #fff; } }

/* ---- Print guardrails: the flyers print exactly as before ---- */
@media print {
  .bg::before, .edge::before, .ghost, .spot, .tape::before, .tape::after, .road__lane, .track, .road__van, .box-door__panel, .section--kraft::before, .lines::after, .route-gutter, .stamp-open, .journey__van, .hands { display: none !important; }
  .date-row, .locations li, .card, .tag, .print, .receipt { border: 1pt solid #999 !important; border-radius: 0 !important; transform: none !important; background: #fff !important; clip-path: none !important; box-shadow: none !important; outline: none !important; }
  .page-get-food .date-row__day { border-right: 1pt solid #999 !important; margin: 0 !important; }
  .page-get-food .date-row .badge { position: static !important; transform: none !important; background: #fff !important; color: #000 !important; border: 1pt solid #999; }
  .page-blessing-boxes .locations li::before { transform: none !important; border-radius: 50% !important; background: #fff !important; border: 1pt solid #999; box-shadow: none !important; }
  .page-blessing-boxes .locations li::after { color: #000 !important; }
  .page-blessing-boxes { font-size: 10pt; }
  .page-blessing-boxes .locations { gap: .3rem !important; }
  .page-blessing-boxes .locations li { padding: .25rem .5rem !important; grid-template-columns: 1.5rem 1fr !important; }
  .page-blessing-boxes .locations li::before { width: 1.4rem !important; height: 1.4rem !important; }
  .page-blessing-boxes .locations li::after { left: .5rem !important; width: 1.4rem !important; font-size: .7rem !important; }
  .page-blessing-boxes .section-head { margin-bottom: .5rem !important; }
  .page-blessing-boxes h3 { margin: .5rem 0 .3rem !important; font-size: 11pt !important; }
  .page-blessing-boxes .print-flyer-head { margin-bottom: .6rem !important; }
  .route-gutter, .rural { display: none !important; }
  .stamp-round, .postmark, .box-door__hearts, .box-door__text, .box-door__handle { display: none !important; }
  .section--wash, .section--kraft, .journey-wash, .page-hero, .section--blue-soft, .section--tomato-soft, .section--warm { background: #fff !important; }
}

/* ---------- Page: 404 ---------- */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }

/* ---------- Print: schedule and Blessing Box list print as one-page flyers ---------- */
.print-only { display: none; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .site-header, .site-footer, .cta-band, .no-print, .nav-toggle, .skip-link, .scroll-progress, .hero__leaf, .hero__media { display: none !important; }
  body::after { display: none; }
  .io { opacity: 1 !important; transform: none !important; }
  .print-only { display: block; }
  body.print-flyer main > :not(.print-keep) { display: none !important; }
  .print-keep { padding-block: 0 !important; background: #fff !important; }
  .print-flyer-head { display: flex; align-items: center; gap: 1rem; border-bottom: 2pt solid #1B3A6B; padding-bottom: .5rem; margin-bottom: 1rem; }
  .print-flyer-head img { width: 48pt; height: 48pt; }
  .print-flyer-head b { font-family: var(--font-display); font-size: 18pt; color: #1B3A6B; display: block; }
  a { color: #000; text-decoration: none; }
  .date-row, .locations li, .card { box-shadow: none; border: 1pt solid #999; break-inside: avoid; }
  .locations { grid-template-columns: repeat(2, 1fr); gap: .35rem; }
  .locations li { padding: .35rem .6rem; grid-template-columns: 1.6rem 1fr; }
  .locations a.map-link, .map, .btn { display: none !important; }
  .dates { gap: .4rem; }
  .date-row { padding: .4rem .8rem; }
  h1 { font-size: 22pt; } h2 { font-size: 16pt; } h3 { font-size: 13pt; }
}