/* Little Village Texas
   Page flow follows a doulakitchen-style structure; every visual motif is Little Village's own, taken from the
   brand kit, the pot logo, the trifold brochure and the fall-festival signage (Drive):
   - stripe fields (mulberry / rose / marigold over clay over jade / turquoise / indigo)
   - panels: arches and rounded signs in a double clay frame, a multicolour segmented edge, a hand-cut white interior
   - split-colour Chango lettering, arched Copse eyebrows, colour-dot bullets, the segmented colour rule */

/* ---------- tokens ---------- */
:root {
  /* brand kit, primary */
  --clay: #C97B5A;        /* Clay Pot */
  --baked: #A8563C;       /* Baked Earth */
  --marigold: #DE8F35;    /* Marigold */
  --turquoise: #1F9BA8;   /* Market Turquoise */
  /* brand kit, secondary */
  --rose: #C6456B;        /* Rebozo Rose */
  --mulberry: #7A3B52;    /* Mulberry */
  --passion: #5D4E86;     /* Passionflower */
  --indigo: #2F4A7C;      /* Indigo */
  --jade: #2F8F6E;        /* Jade */
  --ink: #3A2430;         /* Cook Fire, text ink */
  /* neutrals: brand says white backgrounds, black only for text */
  --white: #FFFFFF;
  --paper: #FFFFFF;       /* brand kit: white backgrounds */
  --clay-lt: #D58D6B;     /* inner ring of the double clay frame (brochure, signage) */
  --cream: #FFF7EE;       /* text on dark fills */
  --line: rgba(58, 36, 48, .78);

  --font-display: "Chango", "Arial Black", system-ui, sans-serif;  /* brand kit: Chango for headers */
  --font-serif: "Karma", Georgia, "Times New Roman", serif;         /* brand fonts sheet: Karma Regular */
  --font-accent: "Copse", Georgia, serif;                            /* brand kit: Copse */

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1200px;
  --section: clamp(64px, 7.5vw, 108px);
  --band-gap: clamp(40px, 4.45vw, 64px);  /* the white beside every wavy band, above and below (Kody 2026-10-31, #117-118): 64 px desktop, 40 phone */
  --radius: 22px;
  --frame: clamp(6px, 0.9vw, 12px);
  --header-h: 84px;
  --ribbon-h: clamp(112px, 12.5vw, 184px);
}

/* ---------- 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;
  font: 400 18px/1.65 var(--font-serif);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
html, body { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.1; }
ul { margin: 0; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--cream); border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 820px); margin-inline: auto; }
.section { position: relative; padding-block: var(--section); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

/* placeholder copy: add ?placeholders to any URL to outline every invented line */
html.show-ph .ph:not(.btn) { outline: 2px dashed var(--rose); outline-offset: 3px; background-color: rgba(198, 69, 107, .08); }
html.show-ph .btn.ph { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .45) 0 6px, transparent 6px 12px); }
html.show-ph .photo { outline: 2px dashed var(--indigo); outline-offset: 3px; }

/* ---------- type ---------- */
.display {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.04;
  color: var(--baked);
  letter-spacing: .01em;
}
.display--xl { font-size: clamp(46px, 7.4vw, 96px); }
.display--md { font-size: clamp(32px, 4.4vw, 54px); }
.display--sm { font-size: clamp(26px, 3vw, 36px); }
.display--light { color: var(--cream); }
.title-serif {  /* section titles are Chango, as on the brochure and signs */
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.08;
  color: var(--baked);
}
.title-serif--md { font-size: clamp(26px, 3.2vw, 40px); }
.eyebrow {
  margin: 0 0 14px;
  font: 700 13px/1.3 var(--font-serif);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rose);
}
.eyebrow--light { color: var(--cream); opacity: .9; }
.accent {  /* the brochure's Copse taglines ("build your village") */
  font-family: var(--font-accent);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--jade);
}
.lede { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.6; }
.muted { opacity: .82; }

/* .mark spans stay in the markup but carry no decoration */
.hero__grid > *, .connect > *, .product > * { min-width: 0; }

/* split-colour lettering from the signage (DONATE, MOMMA CIRCLE, Village): built by tools/build.py */
.fill .fw { display: inline-block; white-space: nowrap; }
.f { color: var(--a); }
.f--cut {
  background: linear-gradient(var(--ang, 62deg), var(--a) 50%, var(--b) 50%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.band .f, .mobile-menu .f { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.prog-hero .display--light, .shop-hero .display--light { color: var(--baked); }  /* these titles now sit on white */

/* arched eyebrows ("our weekly gathering", "be the village"): an SVG textPath built by tools/build.py */
.eyebrow--arc { margin-bottom: 4px; letter-spacing: 0; text-transform: none; }
.eyebrow--arc svg { display: inline-block; vertical-align: top; height: auto; overflow: visible; }  /* follows the paragraph's text-align */
.eyebrow--arc text { font: 400 21px var(--font-accent); fill: currentColor; letter-spacing: .02em; }

/* the brochure's colour dot, used wherever an ornament or bullet sits */
.dot { display: inline-block; width: .42em; height: .42em; margin: 0 .55em; border-radius: 50%; background: currentColor; vertical-align: .12em; }

/* the segmented colour rule from the festival posters */
.rule-seg { height: 6px; background: linear-gradient(90deg, var(--turquoise) 0 16.67%, var(--marigold) 0 33.33%, var(--mulberry) 0 50%,
  var(--jade) 0 66.67%, var(--passion) 0 83.33%, var(--rose) 0); }

/* multi-coloured letters, like the brochure headings */
.c-rose { color: var(--rose); } .c-marigold { color: var(--marigold); } .c-turquoise { color: var(--turquoise); }
.c-jade { color: var(--jade); } .c-indigo { color: var(--indigo); } .c-mulberry { color: var(--mulberry); }
.c-passion { color: var(--passion); } .c-baked { color: var(--baked); } .c-clay { color: var(--clay); }

/* ---------- buttons: Chango on a rounded sign, with the frame's light inner ring ---------- */
.btn {
  --h: 50px; --bg: var(--baked); --fg: var(--white);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--h); padding: 3px 26px 0;
  border: 0; border-radius: 14px;
  background: var(--bg); color: var(--fg);
  font: 400 14px/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28);
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; }
.btn--rose { --bg: var(--rose); }
.btn--jade { --bg: var(--jade); }
.btn--indigo { --bg: var(--indigo); }
.btn--mulberry { --bg: var(--mulberry); }
.btn--turquoise { --bg: var(--turquoise); }
.btn--marigold { --bg: var(--marigold); --fg: var(--ink); }
.btn--cream { --bg: var(--cream); --fg: var(--mulberry); }
.btn--sm { --h: 44px; font-size: 13px; padding-inline: 20px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* header CTA and tabs */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 3px 22px 0; border: 0; border-radius: 12px;
  font: 400 13px/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  background: var(--baked); color: var(--white); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28);  /* Donate = the Learn More colour (Kody 2026-10-28) */
  transition: filter .2s, transform .2s;
}
.pill:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ---------- header ---------- */
.site-header {  /* white, like the signage (the segmented colour rule under it was removed, Kody 2026-10-28) */
  position: sticky; top: 0; z-index: 30;
  background: var(--white); color: var(--ink);
}
.site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  min-height: var(--header-h); padding: 6px var(--gutter);
}
.brand { justify-self: start; display: inline-flex; align-items: center; }
.brand__pot {
  display: block; width: 92px; aspect-ratio: 900 / 697; background: var(--baked);
  -webkit-mask: url("../img/lv-pot-mask.png") center / contain no-repeat;
          mask: url("../img/lv-pot-mask.png") center / contain no-repeat;
}
.nav__list { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); list-style: none; }
.nav__list > li { position: relative; display: flex; align-items: center; gap: 2px; }
.nav a {
  font: 600 14px/1 var(--font-serif); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: 10px 0; background: linear-gradient(var(--marigold) 0 0) 0 100% / 0 2px no-repeat; transition: background-size .25s;
}
.nav a:hover, .nav a.is-active { background-size: 100% 2px; }
.nav__chev { display: grid; place-items: center; width: 26px; height: 26px; border: 0; background: none; color: var(--ink); font-size: 12px; }
.nav__chev svg { width: 12px; height: 12px; transition: rotate .2s; }
.nav__drop:hover .nav__chev svg, .nav__drop.is-open .nav__chev svg { rotate: 180deg; }
.nav__menu {  /* z-index lifts it over the header's colour rule (::after), which otherwise paints on top */
  position: absolute; z-index: 1; left: 50%; top: calc(100% + 10px); translate: -50% 6px;
  min-width: 260px; padding: 12px; list-style: none;
  background: var(--paper); color: var(--ink); border: 3px solid var(--clay); border-radius: 18px;
  box-shadow: inset 0 0 0 3px var(--clay-lt), 0 18px 40px rgba(58, 36, 48, .18);
  opacity: 0; visibility: hidden; transition: opacity .2s, translate .2s, visibility .2s;
}
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu, .nav__drop.is-open .nav__menu { opacity: 1; visibility: visible; translate: -50% 0; }
.nav__menu a { display: block; padding: 12px 14px; border-radius: 10px; letter-spacing: .1em; font-size: 13px; background: none; }
.nav__menu a:hover, .nav__menu a.is-active { background: rgba(201, 123, 90, .14); }
.header-cta { justify-self: end; }
.menu-toggle { display: none; justify-self: end; width: 46px; height: 46px; border: 0; background: none; padding: 10px; }
.menu-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .25s; }
.menu-toggle span + span { margin-top: 9px; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(5.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 29; overflow-y: auto;
  padding: calc(var(--header-h) + 48px) var(--gutter) 64px;
  background: linear-gradient(180deg, var(--mulberry) 0 calc(100% - 36px), var(--jade) 0 calc(100% - 24px), var(--turquoise) 0 calc(100% - 12px), var(--indigo) 0);
  color: var(--cream); text-align: center;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { list-style: none; display: grid; gap: 6px; }
.mobile-menu a { display: inline-block; padding: 10px; font: 400 clamp(26px, 7vw, 34px)/1.15 var(--font-display); text-decoration: none; }
.mobile-menu .sub a { font: 600 16px/1.2 var(--font-serif); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.mobile-menu .btn { margin-top: 28px; }
body.menu-open { overflow: hidden; }

/* #237 (Kody 2026-11-01): Home shows the header pot logo on desktop (it was left off Home on 10-27 because the arch logo sits right under it);
   phones keep Home's header without it: hidden, not focusable, no box */
@media (max-width: 960px) {
  .brand--desk { visibility: hidden; }
  .brand--desk .brand__pot { display: none; }
}
@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .site-header__inner { grid-template-columns: 1fr auto; }
  .nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .brand__pot { width: 78px; }
}

/* ---------- panels: the brochure arch / signage frame ----------
   double clay frame (border + inset ring) -> multicolour segmented edge (conic background) -> hand-cut white
   interior (::before, roughened by the #lv-wobble SVG filter in layout.html). Content sits on top. */
.ticket, .framed, .cover-arch, .story-card, .give-card__art, .prog-hero, .page-support .hero {
  --ring: clamp(6px, .75vw, 10px); --seg: clamp(8px, .95vw, 13px); --pr: clamp(24px, 3vw, 40px);
  --s1: var(--rose); --s2: var(--jade); --s3: var(--mulberry); --s4: var(--turquoise); --s5: var(--marigold); --s6: var(--passion);
  position: relative; isolation: isolate;
  border: var(--ring) solid var(--clay);
  border-radius: var(--pr);
  box-shadow: inset 0 0 0 var(--ring2, var(--ring)) var(--ring2-c, var(--clay-lt));
  background: conic-gradient(from var(--sf, -24deg), var(--s1) 0 13%, var(--s2) 0 31%, var(--s3) 0 46%, var(--s4) 0 63%, var(--s5) 0 81%, var(--s6) 0);
}
.ticket::before, .framed::before, .cover-arch::before, .story-card::before, .give-card__art::before, .prog-hero::before, .page-support .hero::before {
  content: ""; position: absolute; z-index: -1; inset: calc(var(--ring2, var(--ring)) + var(--seg)); pointer-events: none;
  background: var(--white); border-radius: max(6px, calc(var(--pr) - var(--ring) - var(--ring2, var(--ring)) - var(--seg)));
}
/* main.js redraws each frame as one vector SVG (crisp curves, square colour joins, a smooth hand-cut inside edge);
   the CSS layers above stay as the no-JS look and only lend it their measurements */
.frame-svg { position: absolute; z-index: -1; pointer-events: none; overflow: visible; max-width: none; }  /* full border-box width: the global svg max-width squeezed it 2 rings narrow */
.is-framed { border-color: transparent !important; background: none !important; --ring2-c: transparent; }
.is-framed::before { visibility: hidden; }
/* segment orders, so neighbouring panels don't repeat */
.ticket--rose { --s1: var(--rose); --s3: var(--jade); --s2: var(--marigold); --sf: 30deg; }
.ticket--jade { --s1: var(--jade); --s2: var(--passion); --s3: var(--rose); --sf: 120deg; }
.ticket--marigold { --s1: var(--marigold); --s2: var(--mulberry); --s3: var(--turquoise); --sf: 200deg; }
.ticket--turquoise { --s1: var(--turquoise); --s2: var(--rose); --s3: var(--marigold); --sf: 280deg; }
.ticket--indigo { --s1: var(--indigo); --s2: var(--marigold); --s3: var(--jade); --sf: 75deg; }
.ticket--mulberry { --s1: var(--mulberry); --s2: var(--turquoise); --s3: var(--rose); --sf: 160deg; }

/* ---------- hero: the brochure's stripe field, with panels standing on it ---------- */
.hero-frame {
  --st: clamp(24px, 4.2vw, 64px);  /* the Fall Festival flyer: each stripe about 6% of the height */
  position: relative; z-index: 2;
  padding: calc(var(--st) * .65) 0 calc(var(--st) * 1.5);
  background: linear-gradient(180deg, var(--mulberry) 0 var(--st), var(--rose) 0 calc(2 * var(--st)), var(--marigold) 0 calc(3 * var(--st)),
    var(--clay) 0 calc(100% - 3 * var(--st)), var(--jade) 0 calc(100% - 2 * var(--st)), var(--turquoise) 0 calc(100% - var(--st)), var(--indigo) 0);
}
.hero { position: relative; }
.hero-frame > .hero:has(> .hero__ribbon) { position: static; }  /* the banner hangs from the stripe field, not the hero */
/* hero arches: most of the width, with the flyer's thick double clay frame */
.cover-arch, .prog-hero, .hero--solo .photo { --ring: clamp(8px, 1.2vw, 17px); --ring2: clamp(11px, 1.85vw, 27px); --seg: clamp(8px, 1.05vw, 15px); }
.hero__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.hero__copy { text-align: center; padding: clamp(40px, 5vw, 64px) clamp(30px, 4.4vw, 60px); }
.hero__media { width: min(100%, 440px); justify-self: center; }
.hero__copy .lede { max-width: 34ch; margin-inline: auto; }
.hero__wordmark {
  display: block; width: min(100%, 470px); margin: 0 auto 14px; aspect-ratio: 964 / 359; background: var(--baked);
  -webkit-mask: url("../img/lv-wordmark-mask.png") center / contain no-repeat;
          mask: url("../img/lv-wordmark-mask.png") center / contain no-repeat;
}
.hero__tagline { font: 500 clamp(28px, 3.3vw, 44px)/1.18 var(--font-serif); margin: 0 0 20px; }
.hero__foot { display: none; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 300px; margin-inline: auto; width: 100%; }
}
/* the support page's hero is one big sign (it holds no window) */
.page-support .hero { width: min(100% - 2 * var(--gutter), 1300px); margin-inline: auto; padding-block: clamp(48px, 6vw, 80px); }
.page-support .hero .wrap { width: min(100% - 2 * clamp(14px, 3vw, 44px), var(--maxw)); }

/* home hero: the brochure's cover, one wide arch window with the logo and the words inside it */
.cover-arch {
  --sf: 0deg;
  width: min(100%, 1100px); margin-inline: auto; text-align: center;
  border-radius: 999px 999px var(--pr) var(--pr);
  padding: clamp(84px, 10vw, 150px) clamp(28px, 6vw, 90px) clamp(48px, 5.5vw, 76px);
}
.cover-arch::before { border-radius: 999px 999px 10px 10px; }
.cover-arch .window__logo { width: min(64%, 400px); margin: 0 auto clamp(14px, 2vw, 24px); }
.cover-arch .lede { max-width: 40ch; margin-inline: auto; }

/* other heroes: one big arch window standing on the stripe field; the page's words follow on white */
.hero--solo .hero__media { width: min(100%, 1000px); margin-inline: auto; }
.hero--solo .photo { aspect-ratio: 5 / 4 !important; }  /* overrides the slot's own ratio: a wide hero arch */
@media (max-width: 640px) { .hero--solo .photo { aspect-ratio: 4 / 5 !important; } }
.intro__text { text-align: center; }
.intro__text > .icon { display: block; width: 60px; margin: 0 auto 10px; color: var(--rose); }
.intro__text .lede { margin-inline: auto; }
.intro .product { display: block; }
.intro .product h1, .intro .product__price { text-align: center; }
.intro .product > .product__copy > .btn { display: flex; width: fit-content; margin-inline: auto; }

/* page heroes that put the title on the left (about, programs, connect) */
.hero--split .hero__copy { text-align: left; }
.hero--split .hero__copy .lede { margin-inline: 0; }
@media (max-width: 860px) { .hero--split .hero__copy { text-align: center; } .hero--split .hero__copy .lede { margin-inline: auto; } }

/* ---------- wavy scrolling banner: doulakitchen's ribbon shape, a thick white band in the double clay edge,
   Chango words in the canopy banner's colours, brochure colour dots between ---------- */
.ribbon { position: relative; width: 100%; height: var(--ribbon-h); overflow-x: clip; overflow-y: visible; pointer-events: none; }
.ribbon svg { width: 100%; height: 100%; overflow: visible; }
.ribbon__edge, .ribbon__edge2, .ribbon__band { fill: none; }
.ribbon__edge { stroke: var(--clay); stroke-width: 100; }   /* outer clay ring: keeps the wave readable on white */
.ribbon__edge2 { stroke: var(--clay-lt); stroke-width: 92; }
.ribbon__band { stroke: var(--white); stroke-width: 82; }
.ribbon__text { font: 400 38px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.ribbon__text .c-rose { fill: var(--rose); } .ribbon__text .c-turquoise { fill: var(--turquoise); } .ribbon__text .c-jade { fill: var(--jade); }
.ribbon__text .c-marigold { fill: var(--marigold); } .ribbon__text .c-passion { fill: var(--passion); } .ribbon__text .c-mulberry { fill: var(--mulberry); }
.ribbon__dot { font-size: 26px; }
.hero__ribbon { position: absolute; left: 0; right: 0; bottom: 0; translate: 0 calc(100% - 26px); z-index: 3; }
.hero-frame:has(.hero__ribbon) { margin-bottom: calc(var(--ribbon-h) - 26px); }

/* ---------- windows: every photo slot is the brochure arch, with its rainbow segmented edge ----------
   holds a brand icon (empty slot), a photo, or a muted looping video (src/media.json, see README) */
.photo {
  --ring: clamp(6px, .75vw, 9px); --seg: clamp(8px, .95vw, 12px);
  --s1: var(--rose); --s2: var(--jade); --s3: var(--mulberry); --s4: var(--turquoise); --s5: var(--marigold); --s6: var(--passion);
  position: relative; isolation: isolate; display: block; width: 100%; max-width: 100%; margin: 0; aspect-ratio: 3 / 4;
  border: var(--ring) solid var(--clay);
  border-radius: 999px 999px 22px 22px;
  box-shadow: inset 0 0 0 var(--ring2, var(--ring)) var(--ring2-c, var(--clay-lt));
  background: conic-gradient(from var(--sf, -24deg), var(--s1) 0 13%, var(--s2) 0 31%, var(--s3) 0 46%, var(--s4) 0 63%, var(--s5) 0 81%, var(--s6) 0);
}
.window__in {
  position: absolute; inset: calc(var(--ring2, var(--ring)) + var(--seg));
  display: grid; place-items: center; overflow: hidden;
  border-radius: 999px 999px 10px 10px;
  background: var(--tone, var(--clay)); color: rgba(255, 255, 255, .92);
}
.window__in .icon { width: 40%; max-width: 150px; }
.window__media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }  /* pinned: WebKit's grid pushed it down below a curved label */
.window--logo .window__in { background: var(--white); }
.window__logo { display: block; width: 74%; aspect-ratio: 900 / 697; background: var(--baked);
  -webkit-mask: url("../img/lv-pot-mask.png") center / contain no-repeat; mask: url("../img/lv-pot-mask.png") center / contain no-repeat; }
.tone-clay { --tone: var(--clay); --sf: 300deg; } .tone-baked { --tone: var(--baked); --sf: 20deg; } .tone-marigold { --tone: var(--marigold); --sf: 110deg; }
.tone-turquoise { --tone: var(--turquoise); --sf: 200deg; } .tone-rose { --tone: var(--rose); --sf: 60deg; } .tone-mulberry { --tone: var(--mulberry); --sf: 250deg; }
.tone-passion { --tone: var(--passion); --sf: 150deg; } .tone-indigo { --tone: var(--indigo); --sf: 330deg; } .tone-jade { --tone: var(--jade); --sf: 170deg; }
.layered { position: relative; }

/* ---------- icons from the brochure (single colour masks) ---------- */
.icon { display: inline-block; width: 64px; aspect-ratio: 1; background: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.icon-pot { --src: url("../img/icon-pot.png"); }
.icon-clothesline { --src: url("../img/icon-clothesline.png"); }
.icon-watering-can { --src: url("../img/icon-watering-can.png"); }
.icon-pitcher { --src: url("../img/icon-pitcher.png"); }
.icon-bowls { --src: url("../img/icon-bowls.png"); }
.icon-swing { --src: url("../img/icon-swing.png"); }

/* ---------- framed panels (sign shape) ---------- */
.cartouche { max-width: 680px; margin-inline: auto; padding: clamp(44px, 5.6vw, 70px) clamp(32px, 6vw, 76px); text-align: center; }
.cartouche__icon { display: block; width: clamp(72px, 8vw, 100px); margin: 0 auto 12px; color: var(--baked); }
.cartouche .btn { margin-top: 24px; }
.cartouche p { max-width: 46ch; margin-inline: auto; }
.cartouche p:last-of-type { margin-bottom: 0; }

/* ---------- cards (sign panels) ---------- */
.ticket { --pr: clamp(22px, 2.6vw, 34px); }
.ticket__in { height: 100%; padding: clamp(30px, 3.6vw, 48px) clamp(26px, 3.8vw, 54px); text-align: center; }
.ticket h3 { font: 500 clamp(26px, 2.6vw, 34px)/1.15 var(--font-serif); margin-bottom: 10px; }
.ticket p:last-child { margin-bottom: 0; }
.ticket--thick { --ring: clamp(8px, 1vw, 12px); }
.ticket-cta { display: flex; justify-content: center; margin-top: 16px; }
.ticket--rose .eyebrow { color: var(--rose); } .ticket--jade .eyebrow { color: var(--jade); } .ticket--marigold .eyebrow { color: var(--baked); }
.ticket--turquoise .eyebrow { color: var(--indigo); } .ticket--indigo .eyebrow { color: var(--indigo); } .ticket--mulberry .eyebrow { color: var(--mulberry); }

/* ---------- colour bands, edged with the brochure's stripes ---------- */
.band {
  --st: 10px;
  position: relative; color: var(--cream);
  background: linear-gradient(180deg, var(--rose) 0 var(--st), var(--marigold) 0 calc(2 * var(--st)), var(--band, var(--clay)) 0 calc(100% - 2 * var(--st)),
    var(--turquoise) 0 calc(100% - var(--st)), var(--indigo) 0);
}
.band--clay { --band: var(--clay); } .band--marigold { --band: var(--marigold); color: var(--ink); }
.band--jade { --band: var(--jade); } .band--turquoise { --band: var(--turquoise); } .band--rose { --band: var(--rose); }
.band--mulberry { --band: var(--mulberry); } .band--indigo { --band: var(--indigo); } .band--baked { --band: var(--baked); }
.band--passion { --band: var(--passion); }
.band .display { color: inherit; }
.band .eyebrow { color: inherit; opacity: .9; }
.band--plain { background: var(--band, var(--clay)); }

/* brochure stripes */
.stripes { display: grid; grid-auto-rows: 12px; }
.stripes span:nth-child(1) { background: var(--mulberry); } .stripes span:nth-child(2) { background: var(--rose); }
.stripes span:nth-child(3) { background: var(--marigold); } .stripes span:nth-child(4) { background: var(--clay); }
.stripes span:nth-child(5) { background: var(--jade); } .stripes span:nth-child(6) { background: var(--turquoise); }
.stripes span:nth-child(7) { background: var(--indigo); }

.blob { display: none; }

/* ---------- home: meet ---------- */
.meet { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(48px, 9vw, 130px); }
.meet__photos { display: grid; justify-items: center; }
.meet__photos .photo { width: min(100%, 400px); }
@media (max-width: 860px) {
  .meet { grid-template-columns: 1fr; }
  .meet__photos .photo { width: min(100%, 320px); }
}

/* ---------- home: programs (cards beside a tall arch) ---------- */
.services__head { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.services { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 90px); align-items: start; position: relative; isolation: isolate; }
.services__media { position: sticky; top: calc(var(--header-h) + 40px); }
.services__list { display: grid; gap: 54px; }
.services .blob { --blob: var(--jade); right: -14%; top: 10%; width: 72%; height: 80%; }
@media (max-width: 860px) {
  .services { grid-template-columns: 1fr; }
  .services__media { position: static; max-width: 380px; margin-inline: auto; width: 100%; }
  .services .blob { display: none; }
}

/* ---------- testimonial (label frame + carousel) ---------- */
.quote { --sf: 150deg; max-width: 860px; margin-inline: auto; padding: clamp(48px, 6vw, 80px) clamp(56px, 9vw, 110px); text-align: center; }
.quote .icon { width: 64px; color: var(--rose); margin: 0 auto 18px; display: block; }
.quote blockquote { margin: 0; font-size: clamp(19px, 1.9vw, 23px); line-height: 1.6; }
.quote cite { display: block; margin-top: 18px; font: 700 13px/1.3 var(--font-serif); letter-spacing: .22em; text-transform: uppercase; font-style: normal; color: var(--baked); }
.carousel { position: relative; }
.carousel__slide[hidden] { display: none; }
.carousel__nav { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border: 0; background: none; color: var(--clay); display: grid; place-items: center; }
.carousel__nav svg { width: 36px; height: 20px; }
.carousel__nav--prev { left: clamp(4px, 2vw, 24px); } .carousel__nav--next { right: clamp(4px, 2vw, 24px); }
.carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.carousel__dots { gap: 2px; }
.carousel__dots button { position: relative; width: 32px; height: 32px; padding: 0; border: 0; background: none; }
.carousel__dots button::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 2px solid var(--clay); }
.carousel__dots button[aria-current="true"]::before { background: var(--clay); }

/* ---------- "what your gift does" cards: little yard signs ---------- */
.shop-band { padding-block: clamp(64px, 8vw, 104px) clamp(72px, 9vw, 112px); }
.shop-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.shop-grid--3 { --cols: 3; }
.give-card { display: block; text-decoration: none; text-align: center; color: inherit; }
.give-card__art {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  display: grid; place-items: center; align-content: center; gap: 14px;
  --ring: 5px; --seg: 8px; --pr: 22px; --s1: var(--edge, var(--jade)); --s3: var(--deco, var(--marigold));
  padding: 26px 20px; color: var(--ink);
  transition: transform .25s ease;
}
.give-card:hover .give-card__art { transform: translateY(-4px); }
.give-card:nth-child(4n+2) .give-card__art { --sf: 100deg; } .give-card:nth-child(4n+3) .give-card__art { --sf: 190deg; } .give-card:nth-child(4n) .give-card__art { --sf: 280deg; }
.give-card__art .icon { width: 34%; color: var(--edge, var(--jade)); }
.give-card__title { font: 400 clamp(17px, 1.7vw, 22px)/1.2 var(--font-display); color: var(--baked); position: relative; z-index: 1; }
.give-card__name { display: block; margin-top: 14px; font-weight: 600; }
.give-card__meta { display: block; font-size: 15px; opacity: .85; }
.band .give-card { color: var(--cream); }
@media (max-width: 960px) { .shop-grid { --cols: 2; } }
@media (max-width: 420px) { .shop-grid { gap: 14px; } .give-card__art { --ring: 4px; --seg: 6px; padding: 18px 12px; } }

/* ---------- values list with icons and rules ---------- */
.values { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 90px); align-items: center; position: relative; isolation: isolate; }
.values .blob { --blob: var(--clay); right: -20%; top: -6%; width: 76%; height: 112%; }
.values__list { list-style: none; }
.values__list li { display: flex; align-items: center; gap: 22px; padding: 30px 0; border-bottom: 1.5px solid var(--line); }
.values__list li:first-child { padding-top: 0; }
.values__list .icon { flex: none; width: 52px; color: var(--rose); }
.values__list li:nth-child(2) .icon { color: var(--turquoise); }
.values__list li:nth-child(3) .icon { color: var(--jade); }
.values__list span { font: 500 clamp(24px, 2.6vw, 34px)/1.2 var(--font-serif); }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } .values__media { max-width: 380px; margin-inline: auto; width: 100%; } }

/* ---------- accordions ---------- */
.accordion { border-top: 1.5px solid var(--line); }
.accordion details { border-bottom: 1.5px solid var(--line); }
.accordion summary {
  display: flex; align-items: center; gap: 18px; padding: 22px 4px; cursor: pointer; list-style: none;
  font: 500 clamp(21px, 2.2vw, 28px)/1.25 var(--font-serif);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; margin-left: auto; width: 22px; height: 22px;
  background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
  transition: rotate .25s;
}
.accordion details[open] summary::after { rotate: 45deg; }
.accordion summary .icon { width: 34px; color: var(--rose); }
.accordion .accordion__body { padding: 0 4px 24px; max-width: 64ch; }
.accordion-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); }
.accordion-grid .accordion { border-top: 0; }
.accordion-grid .accordion details:first-child { border-top: 1.5px solid var(--line); }
@media (max-width: 760px) { .accordion-grid { grid-template-columns: 1fr; } .accordion-grid .accordion + .accordion details:first-child { border-top: 0; } }
.band .accordion, .band .accordion details, .wave-band .accordion, .wave-band .accordion details { border-color: rgba(255, 247, 238, .55); }

/* ---------- tabs ---------- */
.tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 40px; }
.tabs__list button {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 12px;
  font: 700 12px/1 var(--font-serif); letter-spacing: .16em; text-transform: uppercase;
  background: var(--cream); color: var(--ink);
}
.tabs__list button[aria-selected="true"] { background: var(--mulberry); color: var(--cream); }
.tab-panel[hidden] { display: none; }
.tab-panel .ticket { max-width: 900px; margin-inline: auto; color: var(--ink); }
.ticket ul.ticks { list-style: none; display: grid; gap: 8px; max-width: 560px; margin: 18px auto 0; text-align: left; }
.ticks li::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 12px; border-radius: 50%; background: var(--marigold); vertical-align: .12em; }

/* ---------- photo row ---------- */
/* ---------- one window at a time: the programs gallery ---------- */
.window-gallery { padding-block: clamp(24px, 4vw, 56px); }
.window-gallery .carousel { width: min(100% - 2 * var(--gutter), 440px); margin-inline: auto; padding-inline: 60px; }
.window-gallery .carousel__nav { color: var(--baked); }
.window-gallery .carousel__nav--prev { left: 0; } .window-gallery .carousel__nav--next { right: 0; }

/* ---------- partner logos (placeholders) ---------- */
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 3vw, 40px); margin-top: 22px; }
.logo-chip { display: grid; place-items: center; min-width: 120px; height: 64px; padding: 0 18px; border: 2px dashed rgba(58, 36, 48, .35); border-radius: 14px; font: 700 12px/1.2 var(--font-serif); letter-spacing: .14em; text-transform: uppercase; opacity: .75; text-decoration: none; }
a.logo-chip { border-style: solid; border-color: var(--rose); color: var(--rose); opacity: 1; }

/* ---------- small info cards ---------- */
.info-cards { display: grid; gap: 22px; }
.info-card { padding: 24px 26px; border: 3px solid var(--clay); border-radius: 22px; background: var(--white); box-shadow: inset 0 0 0 3px var(--clay-lt); }
.info-card h3 { font: 700 19px/1.3 var(--font-serif); margin-bottom: 8px; }
.info-card h3::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--rose); vertical-align: .12em; }
.info-card p { margin: 0; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .support-grid { grid-template-columns: 1fr; } }

/* step cards */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); }
.steps .ticket { --r: 26px; }
.steps .ticket__in { padding: 34px 22px; }
.steps .step-no { font: 700 12px/1 var(--font-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--rose); margin-bottom: 10px; }
.steps h3 { font: 700 22px/1.2 var(--font-serif); }
.steps p { font-size: 16px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } }

/* how-it-works columns on a dark band */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); text-align: center; margin-top: clamp(32px, 4vw, 52px); }
.how h3 { font: 700 22px/1.25 var(--font-serif); margin-bottom: 14px; }
.how .icon { width: 70px; margin: 0 auto 16px; display: block; color: var(--cream); }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ---------- about: story cards over layered wavy bands ---------- */
.story { position: relative; isolation: isolate; padding-block: clamp(40px, 6vw, 80px); }
.story__layers { position: absolute; inset: 14% 0 0; z-index: -1; display: grid; grid-template-rows: 1fr 1fr 1fr; }
.story__layers span { position: relative; }

.story__layers span:nth-child(1) { background: var(--baked); }
.story__layers span:nth-child(2) { background: var(--jade); }
.story__layers span:nth-child(3) { background: var(--marigold); }
.story__grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.story__cards { display: grid; gap: clamp(40px, 6vw, 80px); }
.story-card { padding: clamp(34px, 4.4vw, 52px); }
.story-card:nth-child(2) { --sf: 120deg; } .story-card:nth-child(3) { --sf: 230deg; }
.story-card h3 { font: 700 15px/1.3 var(--font-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--baked); margin-bottom: 14px; }
.story__media { position: sticky; top: calc(var(--header-h) + 40px); }
@media (max-width: 860px) {
  .story__grid { grid-template-columns: 1fr; }
  .story__media { position: static; order: -1; max-width: 360px; margin-inline: auto; width: 100%; }
}

.creds { list-style: none; max-width: 640px; }
.creds li { display: flex; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1.5px solid var(--line); font-size: clamp(19px, 1.8vw, 22px); }
.creds .icon { flex: none; width: 44px; color: var(--baked); }

/* about hero: title inside a cloud frame */
.cloud-copy { --sf: 60deg; padding: clamp(44px, 5.6vw, 72px) clamp(32px, 6vw, 72px); text-align: center; }
.cloud-copy .icon { display: block; width: 60px; margin: 0 auto 10px; color: var(--rose); }

/* ---------- program detail pages ---------- */
.prog-hero {  /* the brochure's tall arch, standing on the stripe field */
  --sf: 0deg;
  width: min(100% - 2 * var(--gutter), 1100px); margin-inline: auto; min-height: min(640px, 62vw);
  border-radius: 999px 999px var(--pr) var(--pr);
  color: var(--ink); text-align: center;
  padding: clamp(110px, 15vw, 180px) 0 clamp(56px, 7vw, 90px);
}
.prog-hero::before { border-radius: 999px 999px 10px 10px; }
.prog-hero .wrap { width: min(100% - 2 * clamp(20px, 5vw, 60px), 640px); }
.prog-hero .icon { width: clamp(84px, 9vw, 120px); color: var(--tone, var(--baked)); margin: 0 auto 18px; display: block; }
.prog-hero .eyebrow { color: var(--tone, var(--rose)); }
.prog-hero__sub { font: 400 clamp(20px, 2.2vw, 26px)/1.45 var(--font-accent); max-width: 34ch; margin: 14px auto 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.split--center { align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split > .photo, .split > .media { max-width: 440px; margin-inline: auto; } }
.details-card { max-width: 760px; margin: clamp(32px, 4vw, 48px) auto 0; color: var(--ink); }
.details-card dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; text-align: left; max-width: 520px; margin: 18px auto 26px; }
.details-card dt { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; padding-top: 4px; color: var(--rose); }
.details-card dd { margin: 0; }
.partner { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 44px); align-items: center; max-width: 900px; margin-inline: auto; }
.partner__mark { display: grid; place-items: center; width: clamp(120px, 14vw, 170px); aspect-ratio: 1; border-radius: 50%; background: var(--rose); color: var(--cream); text-align: center; font: 400 15px/1.15 var(--font-display); padding: 18px; }
@media (max-width: 640px) { .partner { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ---------- product (donate) page ---------- */
.product { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.product__art .give-card__art { --ring: 8px; --seg: 12px; --pr: 34px; aspect-ratio: 3 / 4; border-radius: 999px 999px var(--pr) var(--pr); padding-top: 22%; }
.product__art .give-card__art::before { border-radius: 999px 999px 12px 12px; }
.product__art .give-card__art .icon { width: 30%; }
.product__price { font-size: 22px; font-weight: 600; margin: 8px 0 18px; }
.product h2 { font: 700 18px/1.3 var(--font-serif); margin: 28px 0 10px; }
.product ul { list-style: none; display: grid; gap: 6px; }
.product ul li::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 12px; border-radius: 50%; background: var(--rose); vertical-align: .12em; }
.product .btn { margin-top: 30px; }
@media (max-width: 860px) { .product { grid-template-columns: 1fr; } .product__art { max-width: 380px; margin-inline: auto; width: 100%; } }

/* ---------- shop hero ---------- */
.shop-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 3vw, 40px); }
.shop-hero__panel { position: relative; padding: clamp(20px, 4vw, 48px) 12px; text-align: center; color: var(--ink); }
.shop-hero__panel > * { position: relative; }
.shop-hero__side { width: clamp(70px, 10vw, 150px); color: var(--jade); }
.shop-hero__side--r { color: var(--rose); }
@media (max-width: 640px) { .shop-hero { grid-template-columns: 1fr; } .shop-hero__side { display: none; } }
.filter { display: flex; justify-content: center; margin: clamp(40px, 5vw, 56px) 0 clamp(32px, 4vw, 48px); }
.filter label { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1.5px solid var(--line); font: 700 12px/1 var(--font-serif); letter-spacing: .16em; text-transform: uppercase; }
.filter select { border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; padding: 6px 4px; }
.give-card[hidden] { display: none; }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field > span { font: 600 15px/1.2 var(--font-serif); }
.field small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 2px solid var(--clay); border-radius: 10px; background: var(--white);
  font: 400 17px/1.4 var(--font-serif); color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 3px solid rgba(31, 155, 168, .45); outline-offset: 1px; border-color: var(--turquoise); }
.check { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.check input { width: 18px; height: 18px; accent-color: var(--rose); }
.form-note { font-size: 14px; opacity: .8; margin: 0; }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }

/* poem / brand lines */
.lines { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.lines__stack { display: grid; max-width: 320px; width: 100%; margin-inline: auto; }
.lines__text { text-align: center; display: grid; gap: 22px; }
.lines__text p { margin: 0; font: 400 clamp(20px, 2.2vw, 28px)/1.3 var(--font-accent); color: var(--mulberry); }
.lines__text .wiggle { width: 120px; height: 6px; margin: 8px auto 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--rose) 0 25%, var(--marigold) 0 50%, var(--jade) 0 75%, var(--turquoise) 0); }
.lines__text .wiggle path { display: none; }
@media (max-width: 860px) { .lines { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.footer-ribbon { position: relative; z-index: 2; margin-bottom: -64px; }
.site-footer { position: relative; background: var(--mulberry); color: var(--cream); padding-top: clamp(96px, 11vw, 132px); }
.footer-news__lede { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.45; max-width: 26ch; }
.footer-form { display: grid; gap: 14px; max-width: 380px; }
.field-line { display: grid; gap: 4px; }
.field-line span { font: 700 11px/1 var(--font-serif); letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.field-line input { border: 0; border-bottom: 1.5px solid var(--cream); background: transparent; color: var(--cream); font: 400 17px/1.4 var(--font-serif); padding: 8px 2px; border-radius: 0; }
.field-line input:focus { outline: none; border-bottom-color: var(--marigold); }
.footer-form .btn { justify-self: start; margin-top: 8px; }
.fine { font-size: 13px; opacity: .75; margin: 14px 0 0; }
.footer-art { display: grid; place-items: center; align-self: center; }
.footer-art .icon { width: clamp(110px, 12vw, 170px); color: var(--marigold); }
.footer-links { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 6px 0 26px; }
.footer-links a { font-size: clamp(19px, 1.7vw, 22px); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-decoration-color: var(--marigold); text-underline-offset: 5px; }
.footer-email { display: inline-block; padding: 8px 0; font: 700 14px/1.4 var(--font-serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; overflow-wrap: anywhere; }
.footer-email:hover { text-decoration: underline; }
.footer-place { margin: 14px 0 0; font: 700 13px/1.4 var(--font-serif); letter-spacing: .2em; text-transform: uppercase; }
.footer-place .dot { background: var(--marigold); }
.footer-mark { display: block; width: min(560px, 78vw); margin: clamp(40px, 5vw, 64px) auto 18px; }
.footer-mark span { display: block; aspect-ratio: 964 / 359; background: var(--cream);
  -webkit-mask: url("../img/lv-wordmark-mask.png") center / contain no-repeat; mask: url("../img/lv-wordmark-mask.png") center / contain no-repeat; }
.footer-legal, .footer-copy { text-align: center; margin: 0; font-size: 14px; letter-spacing: .08em; }
.footer-copy { opacity: .8; padding-bottom: 34px; margin-top: 4px; }

/* ---------- utilities ---------- */
.mt-0 { margin-top: 0; } .pt-0 { padding-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-s { margin-top: 18px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 56px; }
.text-cream { color: var(--cream); }
.bleed { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* footer social links */
.social { list-style: none; display: grid; gap: 12px; margin-top: 6px; }
.social a { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; text-decoration: none; }
.social a:hover span { text-decoration: underline; text-decoration-color: var(--marigold); text-underline-offset: 5px; }
.social svg { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--cream); color: var(--mulberry); flex: none; }

/* about: "heart of our work" carousel ticket */
.heart { max-width: 820px; margin-inline: auto; padding-inline: 56px; }
.heart .ticket__in { min-height: 300px; display: grid; align-content: center; }
.heart .icon { width: 72px; color: var(--jade); margin: 0 auto 14px; display: block; }
.heart .carousel__nav { color: var(--jade); }
.heart .carousel__nav--prev { left: 0; } .heart .carousel__nav--next { right: 0; }
.heart p { max-width: 52ch; margin-inline: auto; }
@media (max-width: 520px) { .heart { padding-inline: 0; } .heart .carousel__nav { top: auto; bottom: -6px; translate: 0 0; } .heart .carousel__nav--prev { left: 18%; } .heart .carousel__nav--next { right: 18%; } }

.creds--center { margin-inline: auto; }
.values--plain .blob { display: none; }
.accordion summary small { display: block; margin-top: 4px; font: 700 12px/1.3 var(--font-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--marigold); }
.band .accordion summary small, .wave-band .accordion summary small { color: var(--cream); opacity: .8; }
.band--mulberry .accordion__body, .band--indigo .accordion__body, .wave-band--mulberry .accordion__body, .wave-band--indigo .accordion__body { opacity: .95; }
.hero--split .cloud-copy { max-width: 640px; justify-self: center; width: 100%; }

/* programs */
.hero__grid--flip { grid-template-columns: 7fr 5fr; }
@media (max-width: 860px) { .hero__grid--flip { grid-template-columns: 1fr; } .hero__grid--flip .hero__media { order: -1; } }
.btn-row--start { justify-content: flex-start; }
@media (max-width: 860px) { .btn-row--start { justify-content: center; } }
.why { display: grid; grid-template-columns: 4fr 7fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding-top: clamp(40px, 6vw, 80px); }
.why__media { max-width: 380px; width: 100%; justify-self: center; }
.why__card { max-width: 700px; }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; } .why__media { max-width: 260px; } }
.feature-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); max-width: 1000px; margin-inline: auto; }
.feature-grid li { display: flex; align-items: center; gap: 18px; padding: 20px 4px; border-bottom: 1.5px solid var(--line); font: 500 clamp(19px, 1.9vw, 24px)/1.3 var(--font-serif); }
.feature-grid li:nth-child(-n+2) { border-top: 1.5px solid var(--line); }
.feature-grid .icon { flex: none; width: 40px; color: var(--rose); }
.feature-grid li:nth-child(3n+2) .icon { color: var(--turquoise); } .feature-grid li:nth-child(3n) .icon { color: var(--jade); }
@media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; } .feature-grid li:nth-child(2) { border-top: 0; } }
.prog-list { display: grid; gap: 6px; max-width: 560px; margin: 22px auto 30px; }
.prog-list dt { font: 700 14px/1.3 var(--font-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--baked); margin-top: 14px; }
.prog-list dt:first-child { margin-top: 0; }
.prog-list dd { margin: 0; }
.lead-icon { width: 76px; color: var(--marigold); margin-bottom: 14px; }
.ticks--cards { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: none; margin-inline: 0; }
.ticks--cards li { padding: 14px 18px; border: 2px solid rgba(201, 123, 90, .5); border-radius: 16px; background: rgba(255, 252, 248, .8); line-height: 1.35; }
@media (max-width: 520px) { .ticks--cards { grid-template-columns: 1fr; } }
.statement { display: grid; gap: 26px; justify-items: center; text-align: center; }
.statement__photo { max-width: 320px; }
.statement__text { font: 500 clamp(28px, 3.2vw, 42px)/1.25 var(--font-serif); max-width: 16ch; margin: 0; }
@media (max-width: 860px) { .support-grid > div:first-child { text-align: center; } .ticks--cards { text-align: left; } }

/* program detail extras */
.ticks--plain { list-style: none; display: grid; gap: 6px; max-width: none; margin: 0; text-align: left; }
.ticket-title { font: 500 clamp(26px, 2.6vw, 34px)/1.15 var(--font-serif); margin-bottom: 10px; }
.ticket-icon { width: 64px; color: var(--rose); margin: 0 auto 12px; display: block; }
.ticket--turquoise .ticket-icon { color: var(--turquoise); }
.soon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); max-width: 900px; margin-inline: auto; }
@media (max-width: 700px) { .soon-grid { grid-template-columns: 1fr; } }
.prog-hero .display { max-width: 16ch; margin-inline: auto; font-size: clamp(30px, 8.2vw, 76px); }  /* long words ("Wednesdays") fit the arch on phones */

/* support / donate / connect */
.shop-hero__mark { display: block; width: min(220px, 50%); margin: 0 auto 6px; aspect-ratio: 964 / 359; background: var(--baked);
  -webkit-mask: url("../img/lv-wordmark-mask.png") center / contain no-repeat; mask: url("../img/lv-wordmark-mask.png") center / contain no-repeat; }
.vol-cards { display: grid; gap: 28px; color: var(--ink); }
.ticket-sub { font: 700 18px/1.3 var(--font-serif); margin-bottom: 12px; }
.fine-ink { font-size: 15px; opacity: .8; }
.product { padding-bottom: clamp(20px, 3vw, 40px); }
.connect { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.connect__intro { text-align: center; }
.connect__photo { max-width: 420px; margin: clamp(28px, 4vw, 44px) auto 0; }
.contact-list { list-style: none; display: grid; gap: 10px; }
.contact-list li { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; align-items: baseline; }
.contact-list__k { font: 700 12px/1 var(--font-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
.contact-list a { display: inline-block; padding: 4px 0; font-size: 19px; text-decoration-color: var(--marigold); text-underline-offset: 4px; overflow-wrap: anywhere; }
@media (max-width: 860px) { .connect { grid-template-columns: 1fr; } }
.where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); }
.where h3 { font-size: clamp(22px, 2vw, 26px); }
@media (max-width: 860px) { .where { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.shop-grid--flex { display: flex; flex-wrap: wrap; justify-content: center; }
.shop-grid--flex > .give-card { flex: 0 1 calc((100% - 3 * clamp(18px, 2.4vw, 32px)) / 4); }
@media (max-width: 960px) { .shop-grid--flex > .give-card { flex-basis: calc((100% - clamp(18px, 2.4vw, 32px)) / 2); } }
@media (max-width: 420px) { .shop-grid--flex > .give-card { flex-basis: calc((100% - 14px) / 2); } }
.connect__form .btn { justify-self: start; }
@media (max-width: 860px) { .connect__form .btn { justify-self: center; } .form-note { text-align: center; } }
.hero--split .hero__copy .lede { max-width: 44ch; }
.mobile-menu a.btn { font: 700 14px/1 var(--font-serif); letter-spacing: .16em; padding: 0 34px; }
.mobile-menu a.is-active { text-decoration: underline; text-decoration-color: var(--marigold); text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* ---------- one window per row (Kody 2026-10-19): an arch never shares a row with a framed panel;
   the arch comes first, its words or cards follow below ---------- */
.meet { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(28px, 4vw, 48px); }
.meet__photos { width: min(100%, 520px); }
.meet__photos .photo { width: 100%; }
.meet__text { max-width: 640px; text-align: center; }
.meet__text .btn { margin-top: 20px; }
.why { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(28px, 4vw, 48px); }
.why__media { width: min(100%, 480px); max-width: none; }
.why__text { max-width: 640px; text-align: center; }
.why__text .btn { margin-top: 20px; }
.services { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(36px, 5vw, 64px); }
.services__media { position: static; width: min(100%, 480px); max-width: none; }
.services__list { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(24px, 3vw, 40px); }
.story__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.story__media { position: static; order: -1; width: min(100%, 480px); max-width: none; }
.story__cards { max-width: 820px; }
@media (max-width: 760px) { .services__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- arch labels: set on a circle concentric with the arch's top, inside it (main.js sizes the arc) ---------- */
.eyebrow--top { position: absolute; z-index: 1; top: var(--lab-in, 0px); left: var(--lab-in, 0px); right: var(--lab-in, 0px);
  margin: 0; letter-spacing: 0; text-transform: none; pointer-events: none; --arc-fs: clamp(16px, 1.5vw, 21px); }
.cover-arch, .prog-hero { --lab-in: calc(var(--ring2, var(--ring)) + var(--seg)); }
.cover-arch > .eyebrow--top, .prog-hero .eyebrow--top { --arc-fs: clamp(18px, 1.9vw, 27px); }
.cover-arch > .eyebrow--top { --arc-fs: clamp(22px, 3.1vw, 44px); }  /* Little Village Texas: big enough to follow the wide arch visibly */
.prog-hero > .wrap { position: static; }
.arc-label { display: block; width: 100%; height: auto; overflow: visible; }
.arc-label text { font-family: var(--font-accent); fill: currentColor; letter-spacing: .03em; }
.arc-label.is-laid text { font-size: var(--arc-fs); }
.window__in .eyebrow--top { color: rgba(255, 255, 255, .97); }
.window__in .arc-label text { paint-order: stroke; stroke: rgba(40, 20, 30, .3); stroke-width: 3px; stroke-linejoin: round; }
.window__in .eyebrow--top + .icon { margin-top: 6%; }

/* ---------- main menu: one drop-down holding the seven sections (Kody 2026-10-20) ---------- */
.nav__trigger { display: inline-flex; align-items: center; gap: 10px; width: auto; height: auto; padding: 12px 6px;
  font: 600 14px/1 var(--font-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.nav__trigger svg { width: 12px; height: 12px; }

/* #234 (Kody 2026-11-01), DESKTOP only (961 px and up; tablets and phones stack exactly as before): ONE two-column helper. Mark the two things
   to pair .duo-l and .duo-r; their parent becomes a two-column grid, everything else in it keeps the full width. When the parent is main or a
   section, the columns line up with the site's content width (--maxw); inside a narrower container they split it. Pairs are vertically
   centred, --duo-gap apart; reading order left then right. Plan: review/desktop-duo-PLAN.md. */
@media (min-width: 961px) {
  :root { --duo-gap: clamp(40px, 4.5vw, 72px); }
  :is(main, section):has(> .duo-l) { display: grid; align-items: center;
    grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [l-start] minmax(0, calc((var(--maxw) - var(--duo-gap)) / 2)) [l-end] var(--duo-gap)
      [r-start] minmax(0, calc((var(--maxw) - var(--duo-gap)) / 2)) [r-end] minmax(var(--gutter), 1fr) [full-end]; }
  :is(main, section):has(> .duo-l) > * { grid-column: full; min-width: 0; }
  :is(main, section) > .duo-l { grid-column: l; }
  :is(main, section) > .duo-r { grid-column: r; }
  :is(main, section) > :is(.duo-l, .duo-r) > .wrap { width: 100%; }
  :is(main, section) > :is(.duo-l, .duo-r) { width: auto; max-width: none; margin-inline: 0; }
  :not(main, section):has(> .duo-l) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--duo-gap); align-items: center; }
  :not(main, section):has(> .duo-l) > * { grid-column: 1 / -1; min-width: 0; }
  :not(main, section) > .duo-l { grid-column: 1; }
  :not(main, section) > .duo-r { grid-column: 2; }
  /* a pair of sections in main: both columns start at the same height (the right one copies the left one's top padding) */
  main > :is(.band, .wave-band) + .duo-l + .duo-r { padding-top: 0; }
  main > :not(.band, .wave-band, .hero-frame, .toc, .hdr-a) + .duo-l + .duo-r { padding-top: calc(var(--band-gap) - clamp(6px, 0.56vw, 8px)); }
  main > :is(.hero-frame, .toc, .hdr-a) + .duo-l + .duo-r { padding-top: clamp(28px, 4vw, 48px); }
  /* containers that hold a pair take the content width on desktop (they were 720-760 px text columns) */
  :is(.mh-body, .lh-body, .page-head__text, .our-story__text, .mon-intro):has(> .duo-l), .product__copy:has(> .duo-l) { width: 100%; max-width: none; }
  .page-head__text:has(> .product__copy > .duo-l), .split--solo:has(.duo-l) { width: min(100% - 2 * var(--gutter), var(--maxw)); grid-template-columns: minmax(0, 1fr); }
  .our-story:has(.duo-l) { width: min(100% - 2 * var(--gutter), var(--maxw)); }
  .page-about-us .our-story__text:has(> .duo-l) { width: 100%; }  /* beats the About Us 760 px text column */
  .page-about-us .our-story__text > .mission-card.duo-r { margin-block: 0; }  /* centred on its paragraphs (the card's own band-gap margin would shift it) */
  /* columns centre on what they show: no outer vertical margins on the pair, its first and last children (a margin would shift the centre) */
  :is(.duo-l.duo-l, .duo-r.duo-r) { margin-block: 0; }
  :is(.duo-l.duo-l.duo-l, .duo-r.duo-r.duo-r) > :first-child { margin-top: 0; }
  :is(.duo-l.duo-l.duo-l, .duo-r.duo-r.duo-r) > :last-child { margin-bottom: 0; }
}

/* #233 (Kody 2026-11-01), DESKTOP only (961 px and up; tablets and phones keep the stack): Home's program rows side by side, the arch window
   (with its curved name over it) on one side, the words (bullets, tagline, Learn More) on the other, the words vertically centred against the
   arch; the sides alternate row by row (Postpartum Circles' arch on the left, Village Commons' on the right, ...), counting only the program
   rows (the quote bands between them don't break the alternation). */
/* #235 (Kody 2026-11-01): the curved name + arch fit one screen: the arch's width follows the viewport height (name ink top -> arch bottom
   = 1.483 x the arch width, so 57vh wide = 85vh tall), at most 420 px as before; the video keeps its crop (the window keeps 3:4). The row is
   1000 px at most and centred as one unit (arch + 48-64 px gap + words), still alternating. */
@media (min-width: 961px) {
  .prog-row--stack.prog-row--arc-title .prog-row__grid { --arch-w: min(420px, 57vh);
    width: min(100% - 2 * var(--gutter), 1000px); grid-template-columns: var(--arch-w) minmax(0, 1fr); align-items: center; justify-items: stretch;
    column-gap: clamp(48px, 4vw, 64px); }
  .prog-row--stack.prog-row--arc-title .prog-row__media { width: var(--arch-w); justify-self: center; }
  .prog-row--stack.prog-row--arc-title .prog-row__text { text-align: left; margin-top: calc(var(--arch-w) * 0.162); }  /* centred on the arch window, not on window + curved name (which stands ~16% of the window's width above it) */
  .prog-row--stack.prog-row--arc-title .prog-row__text .ticks { margin-inline: 0; }
  .prog-row--arc-title:nth-child(even of .prog-row--arc-title) .prog-row__grid { grid-template-columns: minmax(0, 1fr) var(--arch-w); }
  .prog-row--arc-title:nth-child(even of .prog-row--arc-title) .prog-row__media { order: 2; }
}
/* #238 (Kody 2026-11-01): the squiggles are chunky (the same wave, 138 x 26 px with a 5.5 px round stroke: the path's viewBox padded so the
   thick stroke isn't clipped) and centred on the words themselves: main.js measures the right-most text line / button and sets --sq-l;
   with no JS they stay on the words' left edge. #237 (Kody 2026-11-01): the squiggles sit on the words' left edge (centred on the 522 px column they looked off to the right of the
   left-aligned words; fit-content can't shrink the block to wrapped lines). #236 (Kody 2026-11-01), DESKTOP only: the testimonials' wave squiggle (the same 66 x 10 path, used as a mask so it takes a colour) centred
   above and below each row's words, in the row's colour (= its curved name); the two gaps from the words match (--sq-t / --sq-b, measured to
   the letters and the button), so the words stay centred on the arch */
@media (min-width: 961px) {
  .prog-row--stack.prog-row--arc-title .prog-row__text { --sq-t: 15px; --sq-b: 19.5px; }  /* #238: 22 px from the squiggle's ink to the letters / the button (the 26 px box has ~2.5 px clear under and over the wave) */
  .prog-row--stack.prog-row--arc-title .prog-row__text::before, .prog-row--stack.prog-row--arc-title .prog-row__text::after {
    content: ""; display: block; width: 138px; height: 26px; margin: 0 0 0 var(--sq-l, 0px); background: var(--name, var(--rose));  /* #238: 2x, 5.5 px stroke; centred on the words by main.js (--sq-l), on their left edge without it */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 69 13'%3E%3Cpath d='M2 5C7.5 0 13 0 18.5 5S29.5 10 35 5 46 0 51.5 5 62.5 10 64 7' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 69 13'%3E%3Cpath d='M2 5C7.5 0 13 0 18.5 5S29.5 10 35 5 46 0 51.5 5 62.5 10 64 7' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  .prog-row--stack.prog-row--arc-title .prog-row__text::before { margin-bottom: var(--sq-t); }
  .prog-row--stack.prog-row--arc-title .prog-row__text::after { margin-top: var(--sq-b); transform: scaleX(-1); }  /* #241: the bottom wave runs the other way (mirrored in place; its ink is centred in the box, so the centre line holds) */
  .prog-row--stack.prog-row--arc-title .prog-row__text > :is(.btn, .soon-label) { margin-left: var(--btn-l, 0px); }  /* #241: on the squiggles' centre line (main.js), on the words' left edge without JS */
  /* #245 (Kody 2026-11-02): the tagline centred on the same line: a box as wide as the words (--ink-w, main.js), from their left edge, its
     lines centred in it; bullets stay left-aligned. Without JS (no data-sq) it stays left-aligned like everything else. */
  .prog-row--stack.prog-row--arc-title .prog-row__text[data-sq] > .tag-bold { width: var(--ink-w); margin-inline: -1px 0; text-align: center; }
}

/* #232 (Kody 2026-11-01, his menu option 7), DESKTOP only (961 px and up; phones keep the hamburger and full-screen menu): the logo left, ONE
   "Menu" button right (the Learn More button in marigold, with its chevron; no Donate button in the header). Clicking it opens a panel under the
   header: cream, a clay-lt top border, one centred row of the menu pages as pills (the Learn More button, the pills' 9-colour cycle, white
   words), Donate last. Click only (no hover); main.js closes it on an outside click, on Escape and when focus leaves it. */
@media (min-width: 961px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .header-cta { display: none; }
  .nav__list > li.nav__drop { position: static; }
  .site-header .nav__trigger { --bg: var(--marigold); --fg: var(--ink); min-height: 50px; padding: 3px 20px 0 24px; gap: 10px; border-radius: 14px;
    background: var(--bg); color: var(--fg); font: 400 14px/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28); transition: transform .2s ease, filter .2s ease; }
  .site-header .nav__trigger:hover { filter: brightness(1.08); transform: translateY(-2px); }
  .site-header .nav__trigger:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; }
  .site-header .nav__trigger svg { margin-top: -3px; }
  .nav__drop:hover .nav__chev svg { rotate: 0deg; } .nav__drop.is-open .nav__chev svg { rotate: 180deg; }
  .nav__drop .nav__menu { left: 0; right: 0; top: 100%; translate: 0 -6px; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    gap: 8px; padding: 20px var(--gutter) 22px; background: var(--cream); border: 0; border-top: 3px solid var(--clay-lt); border-radius: 0; box-shadow: 0 18px 30px rgba(58, 36, 48, .12); }
  .nav__drop .nav__menu::before { display: none; }
  .nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu { opacity: 0; visibility: hidden; translate: 0 -6px; }
  .nav__drop.is-open .nav__menu { opacity: 1; visibility: visible; translate: 0 0; }
  .nav__menu a.btn { --h: 44px; display: inline-flex; padding: 3px 18px 0; border-radius: 14px; font: 400 13px/1.1 var(--font-display); letter-spacing: .05em;
    background: var(--bg); color: var(--fg); }  /* the small Learn More size (.btn--sm), so all eight sit in one row on a wide screen */
  .nav__menu a.btn:hover, .nav__menu a.btn.is-active { background: var(--bg); filter: brightness(1.08); }
}

/* ---------- program rows: one arch window per row, its words beside it (stacked on phones) ---------- */
.programs-head { padding-bottom: 0; }
.prog-row { padding-block: clamp(32px, 4.5vw, 64px); }
.prog-row__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.prog-row--flip .prog-row__media { order: 2; }
.prog-row__media { width: min(100%, 420px); justify-self: center; }
.prog-row__text .display { margin-bottom: 12px; }
.prog-row__text .lede { margin-bottom: 10px; }
.prog-row__text .ticks { margin: 0 0 22px; }
@media (max-width: 760px) {
  .prog-row__grid { grid-template-columns: minmax(0, 1fr); }
  .prog-row--flip .prog-row__media { order: 0; }
  .prog-row__media { width: min(100%, 320px); }
  .prog-row__text { text-align: center; }
  .prog-row__text .ticks { display: inline-grid; text-align: left; }
}

/* ---------- content still to come: marked so it can't be mistaken for real copy ---------- */
.needs { color: var(--rose); font-weight: 600; }
.needs--block { padding: 18px 22px; border: 2px dashed var(--rose); border-radius: 14px; background: rgba(198, 69, 107, .06); color: var(--ink); font-weight: 400; }
.needs--block p { margin: 0 0 6px; color: var(--rose); }
.needs--block ul { padding-left: 20px; list-style: disc; }
dd.needs { font-size: 15px; }

/* ---------- brochure quote bands (the coloured blocks at the foot of each brochure panel) ---------- */
.band-quote__text { margin: 0; font: 500 clamp(22px, 2.6vw, 32px)/1.35 var(--font-serif); }
.band-quote__cite { margin: 14px 0 0; font: 700 13px/1.3 var(--font-serif); letter-spacing: .22em; text-transform: uppercase; opacity: .9; }

/* ---------- About Us: contact section and partner events ---------- */
.contact__media { width: min(100% - 2 * var(--gutter), 520px); margin: 0 auto clamp(36px, 5vw, 56px); }
.events-list { display: inline-grid; text-align: left; margin: 10px 0 0; }
.free-list .ticks--cards { max-width: 820px; margin-inline: auto; text-align: left; }
.free-list .statement__text { max-width: none; }

/* ---------- the curvy band (Kody 2026-10-26: "I love that curvy line"): the wavy-edged band from the before-build's
   Village Prenatals details, redrawn in Little Village colours. The wave carries two brochure stripes, rose and marigold
   along the top, turquoise and indigo along the bottom. Used for every When / Where details block and for the
   testimonials woven through the site. The edges are one continuous inline SVG wave each (built by tools/build.py),
   so WebKit draws them smooth with no tile seams. ---------- */
.wave-band {
  --band: var(--mulberry); --wv: 1;
  --wave-edge: calc(26px * var(--wv));
  position: relative; color: var(--cream); background: var(--band);
  margin-block: calc(var(--wave-edge) + var(--band-gap));  /* #117: its wave + the one band gap (was wave + 8-24 px, plus the neighbour's padding) */
  padding-block: clamp(32px, 3.35vw, 48px);  /* #149 (Kody 2026-10-31): ONE inside padding for every wavy band (details, Where we gather, Mondays,
     quotes): 48 px desktop, 32 px phone, band edge to the first / last content (was 92 / 52, quotes 36 / 20). No per-band overrides. */
}
.wave-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wave-edge { position: absolute; left: 0; width: 100%; height: var(--wave-edge); pointer-events: none; overflow: hidden; }
.wave-edge--top { bottom: calc(100% - 1px); }
.wave-edge--bottom { top: calc(100% - 1px); transform: scaleY(-1); }
.wave-edge--top .w1 { fill: var(--rose); } .wave-edge--top .w2 { fill: var(--marigold); }
.wave-edge--bottom .w1 { fill: var(--indigo); } .wave-edge--bottom .w2 { fill: var(--turquoise); }
.wave-edge .w3 { fill: var(--band); }
/* #117 (Kody 2026-10-31): ONE gap beside every wavy band, on every page, set by --band-gap. The band's margin is the only spacer: the
   neighbour's padding on the band side is 0 (so section padding + band margin + wave never add up), and two bands in a row leave room for
   both waves. A plain colour band (.band) is ink itself, so it keeps its padding. */
main > :not(.band, .wave-band):has(+ .wave-band) { padding-bottom: 0; }
main > .wave-band + :not(.band, .wave-band) { padding-top: 0; }
main > .wave-band + .wave-band { margin-top: calc(2 * var(--wave-edge) + var(--band-gap)); }
/* #157 (Kody 2026-10-31): ONE gap between white sections too, the same as beside every band (--band-gap: 64 px desktop, 40 phone), so the
   whole site has one rhythm. The earlier section's bottom padding is 0 and the later one's top padding is the gap (no stacked paddings: Home
   above Support, Donate, Many Hands were 212-218 px). The header's own spacing (stripes / pills / title) is not a section gap and keeps its rules. */
main > :not(.band, .wave-band, .hero-frame, .toc, .hdr-a):has(+ :not(.band, .wave-band)) { padding-bottom: 0; }
main > :not(.band, .wave-band, .hero-frame, .toc, .hdr-a) + :not(.band, .wave-band) { padding-top: calc(var(--band-gap) - clamp(6px, 0.56vw, 8px)); }
/* #167 (Kody 2026-10-31): measured in pixels, a white-to-white gap LOOKED 6-8 px bigger than a gap beside a band (Village Commons: 52 / 80 px vs
   45-51 / 68-74 at 390 / 1440): the type's own leading (under the last line, above the Chango letters) sits on both sides, the wave has none.
   Nothing hidden (no fixed heights, min-heights, row gaps or heading margins); the padding is 6-8 px less so the visible gaps match. */
/* #159 (Kody 2026-10-31): the same gap above the footer when a page ends on a white section (a band already ends on wave + gap); the last
   section's last line keeps no bottom margin, so nothing stacks */
main > :not(.band, .wave-band, .hero-frame, .toc, .hdr-a):has(+ :not(.band, .wave-band)) :is(.wrap, .wrap--narrow) > :last-child { margin-bottom: 0; }  /* #157: a section's last line adds no margin to the gap (Partnerships' funders note had 15 px) */
main > :not(.band, .wave-band):last-child { padding-bottom: var(--band-gap); }
main > :not(.band, .wave-band):last-child :is(.wrap, .wrap--narrow, .vp-center, .split, .values) > :last-child,
main > :not(.band, .wave-band):last-child :is(.creds, .ticks, ul, p):last-child { margin-bottom: 0; }
.page-head__text > :last-child, .our-story__text > p:last-child { margin-bottom: 0; }  /* #153 / #157: a header's or Our Story's last paragraph kept 18 px, which stacked onto the gap */
.wave-band--mulberry { --band: var(--mulberry); } .wave-band--indigo { --band: var(--indigo); }
.wave-band--passion { --band: var(--passion); } .wave-band--jade { --band: var(--jade); }  /* jade: #153, the Volunteer bands (were straight .band--jade) */ .wave-band--baked { --band: var(--baked); }
.wave-band .display, .wave-band .title-serif { color: inherit; }
.wave-band .f { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.wave-band .eyebrow { color: inherit; opacity: .92; }
.wave-band a:not(.btn) { color: inherit; text-decoration-color: var(--marigold); text-underline-offset: 4px; }
@media (max-width: 760px) { .wave-band { --wv: .818182; } }

/* details inside the curvy band: icon, a Copse label, the words */
.wave-band .how { margin-top: clamp(28px, 3.6vw, 48px); }
.wave-band .how h3 { font: 400 clamp(23px, 2.3vw, 29px)/1.2 var(--font-accent); margin-bottom: 10px; }
.wave-band .how p { margin: 0 auto; max-width: 30ch; }
.wave-band .how .icon { width: 64px; margin-bottom: 14px; }
.how--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .how--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .how--4 { grid-template-columns: minmax(0, 1fr); } }
.wave-band .needs { color: var(--cream); font-weight: 600; font-style: italic; opacity: .95; }
.wave-band__more { margin-top: clamp(40px, 5vw, 64px); }
.wave-band__rule { width: 66px; height: 10px; margin: clamp(40px, 5vw, 64px) auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 10'%3E%3Cpath d='M2 5C7.5 0 13 0 18.5 5S29.5 10 35 5 46 0 51.5 5 62.5 10 64 7' fill='none' stroke='%23FFF7EE' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* testimonials inside the curvy band */
/* removed 2026-10-31 (#149, one inside padding for every band; was: .wave-band.quote-band padding-block clamp(20px, 2.6vw, 36px)) */
.quote-band__fig { width: min(100% - 32px, 1040px); margin: 0 auto; text-align: center; }
.quote-band .icon { display: block; width: 44px; margin: 0 auto 10px; color: var(--cream); opacity: .9; }
.quote-band blockquote { margin: 0; }
.quote-band blockquote p { margin: 0; font: 500 clamp(19px, 1.95vw, 24px)/1.6 var(--font-serif); }
.quote-band figcaption { margin-top: 12px; font: 400 clamp(20px, 1.9vw, 24px)/1.3 var(--font-accent); }
.quote-band figcaption::before { content: ""; display: block; width: 66px; height: 10px; margin: 0 auto 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 10'%3E%3Cpath d='M2 5C7.5 0 13 0 18.5 5S29.5 10 35 5 46 0 51.5 5 62.5 10 64 7' fill='none' stroke='%23FFF7EE' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- home (Kody's spec 2026-10-26): logo, tagline, a big Donate, the wavy words, then the programs ---------- */
.cover-arch h1 { margin: 0; }
.cover-arch .hero__tagline { margin-bottom: clamp(18px, 2.4vw, 28px); }
.btn--lg { --h: clamp(60px, 6vw, 72px); font-size: clamp(17px, 1.6vw, 21px); padding-inline: clamp(40px, 5vw, 64px); border-radius: 18px; }
.prog-row__text .accent { margin: -6px 0 22px; }
/* Wellness Wednesdays (Kody 2026-10-27): a Coming Soon label where Learn More would be; a sign, not a button, and no link */
.soon-label { display: inline-flex; align-items: center; min-height: 50px; margin: 0; padding: 3px 24px 0; border: 2px dashed var(--passion); border-radius: 14px;
  color: var(--passion); font: 400 14px/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; cursor: default; user-select: none; }
.support-sign .lede { max-width: 44ch; margin-inline: auto; }
.support-sign .btn { margin-top: 26px; }

/* ---------- footer: the one rule set (Kody 2026-10-29). Two balanced columns, Programs over Hays County + clothesline | Follow along over Contact: tops aligned, the same gap
   between and inside the columns, down to 560 px; below 560 px one centred column, evenly spaced: Programs, Hays County + clothesline, Follow along, Contact. ---------- */
.footer-grid { display: grid; width: min(100% - 2 * var(--gutter), 760px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); align-items: start; }
.footer-grid > * { margin: 0; text-align: left; }
.footer-col { display: grid; gap: clamp(32px, 4vw, 64px); align-content: start; }
.site-footer .eyebrow--arc { text-align: left; }
.footer-grid .eyebrow--arc { margin-top: 0; }
.footer-links { grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 6px 0 0; }
.footer-links a { display: inline-block; padding: 3px 0; font-size: clamp(17px, 1.4vw, 19px); }
.footer-contact .footer-email { letter-spacing: .06em; font-size: clamp(12px, 2.1vw, 14px); }  /* the address stays on one line in a tablet column */
.footer-where .footer-place { margin: 0; }  /* Kody 2026-10-29: Hays County and the clothesline sit under the Programs list */
.footer-where .footer-art { justify-items: start; margin-top: 18px; }
.footer-where .footer-art .icon { width: clamp(96px, 9vw, 130px); }
/* #229 (Kody 2026-11-01): in the two-column footer the clothesline sits centred under "• Hays County, Texas •" (it was left-aligned, 52-69 px
   off): the block is as wide as that line, the icon centred in it. Phones (one centred column, below 560 px) were already centred. */
@media (min-width: 560px) { .footer-where { width: fit-content; justify-self: start; } .footer-where .footer-art { justify-items: center; } }
.footer-legal + .footer-legal { margin-top: 4px; }
@media (max-width: 559.98px) {
  .footer-grid, .footer-col { grid-template-columns: minmax(0, 1fr); gap: 44px; justify-items: center; }
  .footer-grid > *, .footer-col > * { text-align: center; width: min(100%, 420px); }
  .site-footer .eyebrow--arc { text-align: center; }
  .footer-grid .social { width: fit-content; margin-inline: auto; justify-items: start; }  /* the list centred, its icons in one line */
  .site-footer .footer-ask { margin-inline: auto; }  /* #134 (Kody 2026-10-31): .site-footer so the later `.footer-ask { margin: 0 0 10px }` can't pull it back left */
  .footer-where .footer-art { justify-items: center; }
  .footer-contact .footer-email { font-size: 14px; }
}

/* About Us (Kody's spec 2026-10-26): Our Story under its arch, Rebuilding the Village on the layered bands */
.our-story { display: grid; justify-items: center; gap: clamp(28px, 4vw, 48px); }
.our-story__media { width: min(100%, 480px); }
.our-story__text { max-width: 720px; text-align: center; }
.our-story__text .title-serif { margin-bottom: 18px; }
.rebuild-card { max-width: 860px; justify-self: center; }
.rebuild-card .title-serif { margin-bottom: 18px; text-align: center; }
.rebuild-card p:last-child { margin-bottom: 0; }
/* removed 2026-10-31 (#117, one band-gap rule; was: the last band before the footer, wave + 56-104 px) */
.ticks--plain li { padding-left: 21px; text-indent: -21px; }
/* removed 2026-10-31 (#117, one band-gap rule; was: band then a pt-0 section, 40-72 px) */
.prog-hero .display--long { font-size: clamp(26px, 6.9vw, 68px); }  /* "Postpartum Wellness Wednesdays" clears the arch on phones */

/* the wavy banners are their section's curvy edge (Kody 2026-10-27: "I want the one at the top to look like that"): the top one
   fills the hero's last stripe (indigo) down to the wave, the footer one fills the footer colour up to it, so no white strip shows */
.ribbon__fill { fill: none; }
.hero__ribbon .ribbon__fill { fill: var(--indigo); }
.footer-ribbon .ribbon__fill { fill: var(--mulberry); }
.hero-frame { --rib-in: min(26px, var(--st)); }  /* the banner tucks under the indigo stripe, never past it */
.hero__ribbon { translate: 0 calc(100% - var(--rib-in)); }
.hero-frame:has(.hero__ribbon) { margin-bottom: calc(var(--ribbon-h) - var(--rib-in)); }
.cover-arch { padding-top: clamp(92px, 11.4vw, 168px); }  /* room for the bigger curved "Little Village Texas" above the logo */

/* Home program sections (Kody 2026-10-27): the words first, centred (curved stage label, name, bullets, Learn More / Coming Soon),
   the arch window below them, the same on every screen size */
.prog-row--stack .prog-row__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(28px, 3.6vw, 44px); }
.prog-row--stack .prog-row__text { max-width: 800px; text-align: center; }  /* room for each tagline on one line on desktop */
.prog-row--stack .prog-row__text .eyebrow--arc { margin-bottom: 0; }
.prog-row--stack .prog-row__text .ticks { display: grid; width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }  /* centred block, its own line */
.prog-row--stack .prog-row__media { width: min(100%, 420px); }
@media (max-width: 760px) { .prog-row--stack .prog-row__media { width: min(100%, 320px); } }

/* Home program sections (Kody 2026-10-28, from the Postpartum Circles preview, on all 8): the name is curved Copse text in rose on an arc
   concentric with the arch top, tucked just above it (the svg is 118% of the window wide, centred, and the window slides up under it);
   then the bullets, the tagline and Learn More / Coming Soon */
.prog-row--arc-title { padding-top: 6px; }
.prog-row--arc-title .prog-row__grid { gap: clamp(18px, 2.4vw, 28px); }
.arc-title { margin: 0; color: var(--rose); }
.arc-title svg { display: block; width: 118%; max-width: none; height: auto; margin: 0 0 -48% -9%; overflow: visible; position: relative; z-index: 1; }
.arc-title text { font: 400 10px var(--font-accent); letter-spacing: .03em; fill: currentColor; }
.tag-bold { margin: 4px auto 26px; max-width: none; font: 400 clamp(20px, 2.4vw, 26px)/1.25 var(--font-display); color: var(--marigold); text-wrap: balance; }

/* arch windows (Kody 2026-10-28: "remove the colorful inner border"): no rainbow band. The photo, video or icon fills right up to the
   double clay frame and runs 2px under it; main.js draws the frame on top, so the edge is one smooth, even line */
.photo { background: var(--clay-lt); }
.photo .window__in { inset: calc(var(--ring2, var(--ring)) - 2px); isolation: isolate;
  --wb: calc(max(0px, 22px - var(--ring) - var(--ring2, var(--ring))) + 2px); border-radius: 999px 999px var(--wb) var(--wb); }
.photo > .frame-svg { z-index: 2; }
.arc-title--long text { font-size: 8.4px; letter-spacing: .01em; }  /* "Many Hands and Meal Trains" fits the same arc */

/* Home: the 7 program sections take the hero's 7 stripe colours in order (Kody 2026-10-28) for the curved name and the window;
   marigold names use a darker marigold so they read on white */
:root { --marigold-dk: #B06A1E; }
.prog-row--arc-title .arc-title { color: var(--name, var(--rose)); }

/* ---------- calendar (Kody 2026-10-28, his pattern): src/calendar/YYYY-MM.json, built by tools/build.py ----------
   the page opens like the other menu pages (the brochure arch, "Calendar"); below, one clay-framed card with the month and one left-aligned
   block per day: a Chango heading ("Monday, November 2nd 11am-1pm: Postpartum Circle"), then a details line between dots in brand colours */
.cal { max-width: 900px; margin-inline: auto; }
.cal-card { --ring: clamp(6px, .75vw, 9px);
  position: relative; isolation: isolate;
  border: var(--ring) solid var(--clay); box-shadow: inset 0 0 0 var(--ring) var(--ring2-c, var(--clay-lt)); background: var(--white);
  border-radius: 22px; padding: clamp(28px, 4vw, 52px) clamp(22px, 4.6vw, 64px); }
.cal-month { margin: 0 0 clamp(20px, 3vw, 32px); font: 400 clamp(30px, 4vw, 46px)/1.1 var(--font-accent); color: var(--rose); }
.cal-days { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(30px, 3.6vw, 44px); }
.cal-day { padding-left: 16px; border-left: 4px solid var(--c); }
.cal-day__head { margin: 0 0 8px; font: 400 clamp(19px, 2.2vw, 26px)/1.3 var(--font-display); color: var(--mulberry); }
.cal-day.is-today .cal-day__head { color: var(--rose); }
.cal-nw { white-space: nowrap; }
.cal-page-title { margin: 0 0 clamp(24px, 3.4vw, 40px); text-align: center; }
.cal-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 400 clamp(17px, 1.6vw, 19px)/1.55 var(--font-serif); }
.cal-items li { position: relative; padding-left: 20px; }
.cal-items li::before { content: ""; position: absolute; left: 2px; top: .62em; width: .44em; height: .44em; border-radius: 50%; background: var(--c); }
.cal-items li:first-child { font-weight: 700; }
.cal-items a { display: inline-block; padding: 5px 0; margin: -5px 0; font-weight: 700; color: var(--indigo); text-decoration-color: var(--marigold); text-underline-offset: 4px; }  /* a full-size tap target, same line spacing */
.cal-ph { white-space: nowrap; }
.cal-ph--long { white-space: normal; }
.cal-dot { display: inline-block; width: .42em; height: .42em; margin: 0 .55em; border-radius: 50%; background: var(--c); vertical-align: .14em; }
.cal-needs { margin-top: 32px; }
.cal-after { margin: clamp(36px, 5vw, 56px) auto 0; max-width: 640px; text-align: center; }
.cal-after__free { margin: 0 0 12px; font: 400 clamp(30px, 4.6vw, 54px)/1.1 var(--font-display); color: var(--baked); }
.cal-after__join { margin: 0; font: 400 clamp(18px, 1.8vw, 21px)/1.6 var(--font-serif); }
.cal-after__join a { font-weight: 700; color: var(--indigo); text-decoration-color: var(--marigold); text-underline-offset: 4px; }

/* ---------- #239 (Kody 2026-11-02): the calendar page = his month flyer (review/incoming/calendar-nov-v2/november-flyer.png) ----------
   the stripe field with one big cover arch (Home's frame: double clay rings, rainbow segments, white wobbly inside), the pot logo and the
   month in big baked Chango in the dome, then the items: a colour circle (day, number: white Chango) beside the title (Chango capitals in
   the circle's colour) over its lines (the time bold); the Every Monday block between two baked squiggle rules (the flyer's wave: 36 x 16
   per period), three columns of name over time, then Request a spot. Phone first; on desktop the arch is centred, 880 px at most. */
.hero--cal > .wrap { container-type: inline-size; }
.hero--cal .cover-arch.cal2 {
  --pad-in: clamp(12px, 4.2cqw, 48px);  /* white between the rainbow edge and the words */
  container-type: inline-size; width: min(100%, 880px); text-align: left;
  padding: calc(var(--ring2) + var(--seg) + clamp(40px, 7.5cqw, 76px)) calc(var(--ring2) + var(--seg) + var(--pad-in))
    calc(var(--ring2) + var(--seg) + clamp(30px, 5.5cqw, 60px));
}
.cal2-head { display: grid; justify-items: center; text-align: center; }
.cal2 .window__logo { width: clamp(96px, 30cqw, 200px); margin: 0 0 clamp(6px, 1.6cqw, 14px); }
.cal2-month { margin: 0; font: 400 min(92px, calc(100cqw / 8)) / 1 var(--font-display); color: var(--baked); text-transform: uppercase; letter-spacing: .01em; }
.cal2-list { --d: clamp(54px, 13.5cqw, 96px); --t: clamp(16px, 5cqw, 33px); --l: clamp(15.5px, 3.6cqw, 21px);
  list-style: none; margin: clamp(20px, 5cqw, 40px) 0 0; padding: 0; display: grid; gap: clamp(14px, 3.4cqw, 26px); }
.cal2-ev { display: grid; grid-template-columns: var(--d) minmax(0, 1fr); column-gap: clamp(12px, 3.6cqw, 28px); align-items: center; }
.cal2-date { display: grid; place-content: center; justify-items: center; width: var(--d); aspect-ratio: 1; border-radius: 50%; background: var(--c);
  color: var(--white); font-family: var(--font-display); text-transform: uppercase; line-height: 1; }
.cal2-dow { font-size: calc(var(--d) * .2); letter-spacing: .04em; }
.cal2-num { font-size: calc(var(--d) * .42); margin-top: .04em; }
.cal2-title { margin: 0 0 .22em; font: 400 var(--t) / 1.08 var(--font-display); color: var(--c); text-transform: uppercase; letter-spacing: .045em; }
/* links in the arch: quiet, and never the site's in-text link look (marigold highlight + arrow), so the flyer's words print exactly */
.cal2 :is(p, li, h2) a:not(.btn, .cal2-name) { background: none; padding: 0; }
.cal2 :is(p, li, h2) a:not(.btn, .cal2-name)::after { content: none; }  /* #247: the Every Monday names keep the site's in-text link (highlighter + arrow) */
/* (each selector outranks the site's in-text link rule, 0-2-1, which comes later in this file) */
.cal2 .cal2-title a:not(.btn) { color: inherit; font-weight: inherit; text-decoration: none; }  /* the title links to its program page: no underline (the flyer's look); hover shows one */
.cal2 .cal2-title a:not(.btn):hover, .cal2 .cal2-title a:not(.btn):focus-visible { text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .14em; }
.cal2-line { margin: 0; font: 400 var(--l) / 1.38 var(--font-serif); color: var(--ink); }
.cal2-line strong { font-weight: 700; }
.cal2 .cal2-line a.cal2-sms { color: var(--ink); font-weight: 400; text-decoration: underline; text-decoration-color: var(--marigold);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cal2 .cal2-line a.cal2-sms { white-space: nowrap; }
/* the line under the arch keeps the site's in-text link (highlight + arrow), as the old calendar had it */
.cal2-rsvp { margin: 12px 0 0; }  /* #247: Village Prenatal's RSVP is a button now (the calendar's button size) */
.cal2-every { text-align: center; padding-block: clamp(6px, 1.4cqw, 12px); }
/* #247 (Kody 2026-11-02: the rules showed gaps): ONE continuous wave per rule, not tiles (the tiled 36 x 16 wave left a wedge at every
   seam); the rule is a whole number of periods wide (round down to 2.25 x its height), so both ends finish on the centre line */
.cal2-every { --sqh: clamp(9px, 2.2cqw, 16px); }
.cal2-every::before, .cal2-every::after { content: ""; display: block; width: min(100%, 78cqw, 600px); width: round(down, min(100%, 78cqw, 600px), calc(var(--sqh) * 2.25));
  height: var(--sqh); margin: 0 auto; background: var(--baked); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 16'%3E%3Cpath d='M0 8C6 2.4 12 2.4 18 8S30 13.6 36 8S48 2.4 54 8S66 13.6 72 8S84 2.4 90 8S102 13.6 108 8S120 2.4 126 8S138 13.6 144 8S156 2.4 162 8S174 13.6 180 8S192 2.4 198 8S210 13.6 216 8S228 2.4 234 8S246 13.6 252 8S264 2.4 270 8S282 13.6 288 8S300 2.4 306 8S318 13.6 324 8S336 2.4 342 8S354 13.6 360 8S372 2.4 378 8S390 13.6 396 8S408 2.4 414 8S426 13.6 432 8S444 2.4 450 8S462 13.6 468 8S480 2.4 486 8S498 13.6 504 8S516 2.4 522 8S534 13.6 540 8S552 2.4 558 8S570 13.6 576 8S588 2.4 594 8S606 13.6 612 8S624 2.4 630 8S642 13.6 648 8S660 2.4 666 8S678 13.6 684 8S696 2.4 702 8S714 13.6 720 8' fill='none' stroke='%23000' stroke-width='3.6'/%3E%3C/svg%3E") 0 50% / auto 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 16'%3E%3Cpath d='M0 8C6 2.4 12 2.4 18 8S30 13.6 36 8S48 2.4 54 8S66 13.6 72 8S84 2.4 90 8S102 13.6 108 8S120 2.4 126 8S138 13.6 144 8S156 2.4 162 8S174 13.6 180 8S192 2.4 198 8S210 13.6 216 8S228 2.4 234 8S246 13.6 252 8S264 2.4 270 8S282 13.6 288 8S300 2.4 306 8S318 13.6 324 8S336 2.4 342 8S354 13.6 360 8S372 2.4 378 8S390 13.6 396 8S408 2.4 414 8S426 13.6 432 8S444 2.4 450 8S462 13.6 468 8S480 2.4 486 8S498 13.6 504 8S516 2.4 522 8S534 13.6 540 8S552 2.4 558 8S570 13.6 576 8S588 2.4 594 8S606 13.6 612 8S624 2.4 630 8S642 13.6 648 8S660 2.4 666 8S678 13.6 684 8S696 2.4 702 8S714 13.6 720 8' fill='none' stroke='%23000' stroke-width='3.6'/%3E%3C/svg%3E") 0 50% / auto 100% no-repeat; }
.cal2-every__title { margin: clamp(12px, 3cqw, 20px) 0 clamp(6px, 1.6cqw, 12px); font: 400 calc(var(--t) * .86) / 1.1 var(--font-display); color: var(--baked); text-transform: uppercase; letter-spacing: .05em; }
.cal2-cols { list-style: none; margin: 0 0 clamp(12px, 3cqw, 20px); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2.4cqw, 24px);
  font: 400 var(--l) / 1.3 var(--font-serif); }
.cal2-cols li { display: block; text-align: center; }  /* #247: a block, not a grid, so the name link stays inline and its highlighter hugs each line */
.cal2-name { font-weight: 700; color: var(--ink); text-wrap: balance; }
.cal2-time { display: block; margin-top: .1em; white-space: nowrap; }
.cal2-request { margin: 0 0 clamp(14px, 3.4cqw, 22px); }
.cal2-request__label { margin: 0 0 10px; font: 400 clamp(23px, 2.3vw, 29px) / 1.2 var(--font-accent); color: var(--ink); }  /* #247: the lead font (Copse, as .lead-in) at the subheading size */
.cal2-request__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
:is(.cal2-request, .cal2-rsvp) .btn { --h: 38px; padding: 3px 14px 0; font-size: clamp(11.5px, 1.9cqw, 13px); border-radius: 12px; }
.cal2-after { padding-block: clamp(26px, 4vw, 44px) clamp(30px, 4.6vw, 52px); text-align: center; }
.cal2-join { max-width: 640px; margin: 0 auto; font: 400 clamp(18px, 1.8vw, 21px) / 1.6 var(--font-serif); }
/* "all events are free." (#247, Kody 2026-11-02): one place, the bottom, right above "Find more meetups..." (the A / B variants are gone) */
.cal2-after .cal2-free { margin: 0 0 clamp(10px, 1.4vw, 16px); }
.cal2-free { margin: 0; font: 400 clamp(17px, 2vw, 24px) / 1.2 var(--font-display); color: var(--baked); text-transform: uppercase; letter-spacing: .06em; }
/* #242 (Kody 2026-11-02), DESKTOP only (961 px and up; phones and tablets keep the flyer exactly): two columns inside a wider arch (1100 px
   at most). Left, the dated list as it is (circles, titles, lines); right, the Every Monday block as a cream card (clay-lt edge, the site's
   22 px corners) holding the three names over their times and Request a spot with its two buttons, sticky under the header while the list
   scrolls past. The card spans the list's rows (--rows, from build.py), so the DOM order (it sits after Mon 16) and the phone layout are
   untouched. No squiggle rules on desktop (the block is no longer between events). The titles drop to 25.5 px so each stays on one line
   beside the card (was 33 px across the 880 px arch); the card's buttons fill its width, one line each at 1280 and up. */
@media (min-width: 961px) {
  .hero--cal .cover-arch.cal2 { --pad-in: clamp(12px, 2.6cqw, 36px); width: min(100%, 1100px); }
  .cal2-list { --t: min(25.5px, 2.7cqw); grid-template-columns: minmax(0, 1fr) clamp(280px, 38.2cqw, 360px); column-gap: clamp(28px, 4.7cqw, 44px); align-items: start; }
  .cal2-ev { grid-column: 1; }
  .cal2-every { grid-column: 2; grid-row: 1 / span var(--rows, 1); position: sticky; top: calc(var(--header-h) + 24px);
    padding: 22px 14px 24px; border: 2px solid var(--clay-lt); border-radius: var(--radius); background: var(--cream); }
  .cal2-every::before, .cal2-every::after { content: none; }
  .cal2-every__title { margin: 0 0 14px; }
  .cal2-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
  .cal2-request { margin-bottom: 0; }
  .cal2-request__btns { flex-direction: column; align-items: stretch; }
  :is(.cal2-request, .cal2-rsvp) .btn { padding: 4px 10px 1px; font-size: 11.5px; line-height: 1.2; text-align: center; text-wrap: balance; }
}

/* Home hero (Kody 2026-10-28): Donate and Calendar side by side, the same size; they wrap, Donate first, when the arch is too narrow */
.hero-ctas { gap: 14px 16px; }
.hero-ctas .btn { width: 12.5em; padding-inline: 0; }  /* one width for both, so the pair matches */

/* About Us (Kody 2026-10-28): starts with Our Story (no hero); text set left in one 760px column, headings too; Rebuilding the Village set
   exactly like Our Story. Centred stays: the "Where we gather" band's icon columns and the wellbeing carousel's cards. */
.page-about-us .about-top { padding-top: clamp(56px, 7vw, 96px); }
.page-about-us .our-story__text { width: min(100%, 760px); max-width: none; text-align: left; }
.page-about-us .section > .wrap.center { width: min(100% - 2 * var(--gutter), 760px); text-align: left; }
.page-about-us .section > .wrap.center .wrap--narrow { width: 100%; }
.page-about-us .free-list .ticks--cards { margin-inline: 0; max-width: none; }
.page-about-us .heart .ticket__in { text-align: center; }
.page-about-us .band .center, .page-about-us .center, .page-about-us .connect__intro, .page-about-us .lines__text { text-align: left; }
.page-about-us .wave-band .center { text-align: center; }
.page-about-us .contact-list li { justify-content: flex-start; }
.page-about-us .creds--center { margin-inline: auto; }
.values--solo { grid-template-columns: minmax(0, 1fr); }  /* a list with no window beside it */

/* Home "Where we gather" (Kody 2026-10-28): day, address, RSVP in the Learn More style */
.where-home > div { display: flex; flex-direction: column; align-items: center; }
.wave-band .where-home > div > p:not(.soon-label) { margin: 0 auto 16px; }
.wave-band .where-home .btn, .wave-band .where-home .soon-label { margin: auto 0 0; }  /* RSVP, RSVP and Coming soon line up across on desktop */
.where-home .soon-label--band { min-height: var(--h, 50px); }
.soon-label--band { margin-top: 16px; border-color: rgba(255, 247, 238, .8); color: var(--cream); }  /* Coming soon on a dark band */

/* "on this page" menu (Kody 2026-10-28, About Us): a centred row of rounded links that wraps; sections land below the sticky header */
.toc { padding: clamp(28px, 4vw, 48px) var(--gutter) 0; }
.toc ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1180px; margin: 0 auto; padding: 0; }
/* #155 / #160 / #172 (Kody): the pills ARE the Learn More button (.btn: Chango uppercase, 50 px, 14 px corners, the light inner ring), white words,
   one brand colour each, cycling through 9 so no colour repeats in a row: mulberry, rose, marigold, jade, turquoise, indigo, passion, clay,
   baked. White-word contrast: mulberry 8.2:1, indigo 8.8, passion 7.1, baked 5.2, rose 4.7, jade 4.0, turquoise 3.3, clay 3.3, marigold 2.6
   (14 px words: AA asks 4.5; Kody's call). The row wraps, centred, 10 px between pills both ways. */
:is(.toc, .nav__menu) li:nth-child(9n+1) .btn { --bg: var(--mulberry); }
:is(.toc, .nav__menu) li:nth-child(9n+2) .btn { --bg: var(--rose); }
:is(.toc, .nav__menu) li:nth-child(9n+3) .btn { --bg: var(--marigold); }
:is(.toc, .nav__menu) li:nth-child(9n+4) .btn { --bg: var(--jade); }
:is(.toc, .nav__menu) li:nth-child(9n+5) .btn { --bg: var(--turquoise); }
:is(.toc, .nav__menu) li:nth-child(9n+6) .btn { --bg: var(--indigo); }
:is(.toc, .nav__menu) li:nth-child(9n+7) .btn { --bg: var(--passion); }
:is(.toc, .nav__menu) li:nth-child(9n+8) .btn { --bg: var(--clay); }
:is(.toc, .nav__menu) li:nth-child(9n+9) .btn { --bg: var(--baked); }
[data-toc] { scroll-margin-top: calc(var(--header-h) + 18px); }
.page-about-us .toc + .about-top { padding-top: clamp(36px, 5vw, 64px); }


/* About Us (Kody 2026-10-28): the same white gap between every section, at every width (the gap Our Story → Rebuilding has) */
/* removed 2026-10-31 (#153: Board of Directors is a wavy band now, so the band gap is the only space above FAQ; was: .page-about-us #faq padding-top var(--section) + 18px) */
/* removed 2026-10-31 (#117, one band-gap rule; was: About Us Where we gather, wave + 18 px) */
/* removed 2026-10-31 (#117, one band-gap rule; was: About Us Community partners padding-top after its band) */
/* Calendar (Kody 2026-10-28): the title sits as close under the header as the other pages' content (the About Us section menu's top padding) */
.cal-section { padding-top: clamp(28px, 4vw, 48px); }
/* Footer Contact (Kody 2026-10-28): his "Questions?" line above the email, read before the contact details */
.footer-ask { margin: 0 0 10px; max-width: 34ch; font: 400 16px/1.55 var(--font-serif); color: var(--cream); }
/* removed 2026-10-31 (#163; was: .footer-ask a = 700, marigold underline; hover thicker) */
/* About Us FAQ (Kody 2026-10-28): the same "Questions?" line as the footer, as the FAQ's intro */
.faq-intro { margin: 14px 0 0; }
/* removed 2026-10-31 (#163, one in-text link style; was: .faq-intro a, #faq .accordion__body a = 700, indigo, marigold underline) */
/* Where we gather, Monday Circles (Kody 2026-10-28): two RSVP forms, stacked; the lower one lines up with the other columns' RSVP / Coming soon */
.wave-band .where-home .rsvp-pair { display: grid; gap: 10px; margin: auto 0 0; }  /* the two buttons the same width */
.wave-band .where-home .rsvp-pair .btn { margin: 0; }
/* Every page but Home (Kody 2026-10-28): the About Us top. No arches: section pills (pages with 2+ sections), then the page heading */
.page-head { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 0; }
.toc + .page-head { padding-top: clamp(36px, 5vw, 64px); }
.page-head__text { width: min(100% - 2 * var(--gutter), 760px); text-align: left; }
.page-head__text .title-serif { margin-bottom: 18px; }
.page-head__text .soon-label { margin: 0 0 18px; }
.page-head__text .eyebrow { margin: 0 0 14px; text-align: left; }
.page-head .product__copy h1, .page-head .product__price { text-align: left; }
/* the window that sat under the arch is gone: its section keeps one column, About Us width */
.prog-row--solo .prog-row__grid, .split--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
.prog-row--solo .prog-row__text, .split--solo { text-align: left; }
/* the same white gap under the header as between About Us sections, whatever comes first */
/* removed 2026-10-31 (#157, one white gap; was: .page-head + .prog-row, .page-head + .section.pt-0 padding-top var(--section)) */
/* removed 2026-10-31 (#117, one band-gap rule; was: page header then band, 126 / 82 px) */
.page-head .product { display: block; padding-bottom: 0; }  /* Donate: its button is the header's last line (#157: its bottom padding, 18 then 40 px from .product, stacked onto the gap) */
/* Where we gather buttons (Kody 2026-10-28: "pregnant + postpartum families", "3rd Thursday of every month"): two even lines, not one word left over */
.where-home .btn { text-wrap: balance; }
/* Village Prenatals = the web version of Kody's brochure (2026-10-28); its copy is locked, word for word */
.vp-figure, .vp-text { width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; }
.vp-figure { text-align: center; }
.vp-text .title-serif { margin-bottom: 20px; }
.vp-group { display: block; width: 100%; height: auto; border-radius: 28px; }
.vp-caption { margin-top: 18px; font: italic 400 clamp(19px, 2vw, 24px)/1.4 var(--font-serif); color: var(--mulberry); }
.vp-center { width: min(100% - 2 * var(--gutter), 620px); margin: 0 auto; text-align: center; }
.vp-center p { margin: 0; }
.vp-greta { display: block; width: clamp(170px, 20vw, 220px); height: auto; margin: 0 auto 20px; }
.vp-stamp { display: block; height: auto; }  /* Kody 2026-10-31: the Womb Centered stamp (#131), since #142 inside the badge on the group photo */
.vp-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 30px; max-width: 640px; margin: 0 auto; text-align: left; }
.vp-details dt { font: 400 clamp(14px, 1.3vw, 17px)/1.45 var(--font-display); letter-spacing: .06em; }
@media (min-width: 521px) { .vp-details dt { padding-top: 4px; } }  /* lines the label up with its words beside it (2 columns only; #149: not on top of the band on phones) */
.vp-details dd { margin: 0; font: 400 clamp(18px, 1.7vw, 21px)/1.45 var(--font-serif); }
@media (max-width: 520px) { .vp-details { grid-template-columns: minmax(0, 1fr); gap: 0; } .vp-details dd { margin-bottom: 14px; } .vp-details dd:last-child { margin-bottom: 0; } }
.vp-rsvp { --h: clamp(76px, 8vw, 96px); margin-bottom: 18px; font-size: clamp(24px, 2.8vw, 32px); }
/* #143 (Kody 2026-10-31): RSVP HERE + its line at the bottom of the baked details band, centred, the line right under the button. The button is
   cream (.btn--cream, mulberry words): on baked, cream is 4.9:1 (marigold only 2.0:1, jade 1.3, turquoise 1.6; the Mondays marigold on
   indigo is 3.4:1). The block ends flush, so the band's equal top / bottom padding keeps it balanced. */
.vp-band-rsvp { margin-top: clamp(36px, 4.4vw, 56px); text-align: center; }
.vp-band-rsvp .vp-rsvp { margin-bottom: 14px; }
.vp-band-rsvp p { margin: 0; font: 400 clamp(18px, 1.7vw, 21px)/1.45 var(--font-serif); text-wrap: balance; }
.vp-note { margin-top: 22px; font-size: 15px; color: var(--ink); opacity: .78; }
/* note → details band = the plain section gap, var(--section): 108 px at 1440, 64 at 390 (Kody 2026-10-30, was the 126 / 82 header gap) */
/* removed 2026-10-31 (#117, one band-gap rule; was: #107 Village Prenatals note then band) */
.vp-topics { max-width: 760px; margin: clamp(6px, 0.56vw, 8px) auto; }  /* #168: the box edge has none of the leading text brings (#167), so 6-8 px above and below keep its visible gaps the same as text's */
.wrap:has(> .vp-topics) { display: flow-root; }  /* #168: keeps the box's 6-8 px from collapsing into a neighbouring band's margin */
.vp-topics .ticket__in > :last-child { margin-bottom: 0; }  /* #168: the box is reused (Village Commons Give and take, Little Helpers responsibilities, Donate gift amounts); a list that ends it adds no margin */
.vp-topics .ticket__in > h2 { text-align: center; }  /* #168: every boxed list's heading centred, as Topics' */
.vp-topics .ticket__in { text-align: left; }
.vp-topics .title-serif { text-align: center; }
.dots { display: grid; gap: 8px; margin: 22px 0 24px; padding: 0; list-style: none; }
.dots li { position: relative; padding-left: 22px; }
.dots li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--marigold)); }
.vp-topics__note { margin: 0; text-align: center; font-size: 15px; opacity: .8; }
/* Village Commons (Kody 2026-10-31, #130): his copy in sections; each section = its heading (the Mondays at St. Mark's style), then one
   readable column at the page intro's width (760 px), left-aligned, centred under the heading, the band headings' gap below the heading
   (48 / 30 / 28 px, as Mondays at St. Mark's, #115). Lists = the site's colour-dot bullets (.dots). (His 2026-10-28 sign panel's rules,
   .vc-sign*, were removed with it; backup: review/backup-2026-10-31-pre-vc-rebuild/style.css.) */
.vc-body { width: min(100%, 760px); margin: clamp(28px, 3.6vw, 48px) auto 0; text-align: left; }
.vc-body p { margin: 0; }
.vc-body p + p { margin-top: 1em; }
.vc-body .dots { margin: 0; }
.vc-body p + .dots { margin-top: 14px; }
/* #135-136 (Kody 2026-10-31): Village Commons has no pills and opens on white: its first section starts the page-head gap under the header (as Volunteer's) */
.vc-first, .mh-first { padding-top: clamp(28px, 4vw, 48px); }  /* .mh-first: #194, Many Hands + Meal Trains opens on white the same way (.lh-first gone in #256: Little Helpers opens on its pills + page-head, as Postpartum Circles) */
/* #194 (Kody 2026-10-31): Many Hands + Meal Trains, his copy. The body column = Village Commons' (760 px, left-aligned under a centred heading,
   1em between paragraphs); his Give / Receive pair = a centred row of Learn More buttons with air above and below; the 7 things a crew helps
   with = the Topics / Give and take box, under its paragraph */
/* #199: Family Days (.fd-body) uses the same body column */
:is(.mh-body, .fd-body, .lh-body) { width: min(100%, 760px); margin: 0 auto; text-align: left; }
.sec-title + :is(.mh-body, .fd-body, .lh-body) { margin-top: clamp(28px, 3.6vw, 48px); }
:is(.mh-body, .fd-body, .lh-body) p { margin: 0; }
:is(.mh-body, .fd-body, .lh-body) p + p { margin-top: 1em; }
:is(.mh-body, .fd-body, .lh-body) > .btn-row, .mh-body > .duo-r > .btn-row { margin-block: clamp(22px, 2.2vw, 32px); }  /* #234: a separate selector for the wrapper, so the rule keeps its weight */
:is(.mh-body, .fd-body, .lh-body) > :last-child { margin-bottom: 0; }
.fd-end { text-align: center; }  /* #199: his closing line, centred over its centred Calendar button */
/* #212 (Kody 2026-11-01): the closing line is a split-colour section heading now; the button under it at the heading-to-content gap
   (the page's heading -> text margin + the 6-8 px a button edge lacks next to text's leading, as #202's box) */
.fd-end > .sec-title { margin: 0; }
.fd-end > .sec-title + .btn-row { margin-top: calc(clamp(28px, 3.6vw, 48px) + clamp(6px, 0.56vw, 8px)); }
/* #200 (Kody 2026-10-31): Many Hands = the Topics box with everything inside (heading, his line, the list); his line sits 22 px under the
   heading (the heading-to-list gap of the other boxes), the list 14 px under it (as a list under a paragraph elsewhere) */
.vp-topics.mh-list .ticket__in > p { margin: 22px 0 0; text-align: left; }
.vp-topics.mh-list .ticket__in > p + .dots { margin-top: 14px; }
/* removed 2026-11-01 (#215, option H: the heading sits inside each box again, the purple band is gone; were #202's heading-above-box gap,
   p:first-child, and #200's .mh-blurb band rules) */
/* #203: a Give | Receive pair in a box, the page's text-to-pair gap (.mh-body > .btn-row) */
.vp-topics.mh-list .ticket__in > .btn-row { margin-top: clamp(22px, 2.2vw, 32px); }
/* #215 (Kody 2026-11-01, his pick: layout option H) Many Hands + Meal Trains: the two programs in matching boxes side by side (the site's .split
   grid, stacked below 860 px), the same height; each quote inside its box, above that box's Give | Receive pair, together at the box's foot */
.mh-cards { align-items: stretch; }
.mh-cards > .vp-topics { width: 100%; max-width: none; display: flex; flex-direction: column; }
.mh-cards > .vp-topics > .ticket__in { flex: 1 1 auto; height: auto; display: flex; flex-direction: column; }
.mh-cards > .vp-topics.mh-list > .ticket__in > .quote-pull { margin-top: auto; padding-top: clamp(4.9px, calc(3.2px + 0.438vw), 9.5px); }  /* #217: +1.5 / +2.3 px for the clothesline, whose ink starts higher in its box than the watering can's */
/* #216 (Kody 2026-11-01): the words -> the quote's icon = a paragraph gap, measured visually: 20 px desktop, 16 px phone (the list keeps no
   bottom margin; the padding above + the list's own line spacing make the 20 / 16). margin-top: auto only adds space in the shorter box of a
   side-by-side pair (desktop); stacked on phones it is 0. */
.mh-cards > .vp-topics.mh-list > .ticket__in > .dots { margin-bottom: 0; }
.mh-cards > .vp-topics.mh-list > .ticket__in > .quote-pull + .btn-row { margin-top: clamp(22px, 2.2vw, 32px); }
/* #215: a quote inside a box (lv-quote pull="1") = the quote band's own figure on white: ink words, the band's type, a clay icon and little wave */
.quote-pull { width: auto; margin: clamp(26px, 3vw, 36px) 0 0; text-align: center; }
.quote-pull .icon { display: block; width: 40px; margin: 0 auto 8px; color: var(--clay); }
.quote-pull blockquote { margin: 0; }
.quote-pull blockquote p { margin: 0; font: 500 clamp(19px, 1.95vw, 24px)/1.6 var(--font-serif); color: var(--ink); text-align: center; }
.quote-pull figcaption { margin-top: 12px; font: 400 clamp(20px, 1.9vw, 24px)/1.3 var(--font-accent); color: var(--ink); }
.quote-pull figcaption::before { content: ""; display: block; width: 66px; height: 10px; margin: 0 auto 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 10'%3E%3Cpath d='M2 5C7.5 0 13 0 18.5 5S29.5 10 35 5 46 0 51.5 5 62.5 10 64 7' fill='none' stroke='%23C97B5A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* removed 2026-11-01 (#216: "A village needs both." is no longer a heading under the boxes; were .mh-both's heading and line rules) */
/* #216 (Kody 2026-11-01): the intro ends on a Give | Receive pair, then his two lines in the lead-in style (the subheading font, size and
   weight, as .lead-in and Village Commons' "Open for shopping..." line), centred, one under the other */
.mh-body > .mh-lead, .mh-body > .duo-r > .mh-lead { margin: 0; font: 400 clamp(23px, 2.3vw, 29px)/1.3 var(--font-accent); text-align: center; text-wrap: balance; }
.mh-body > .mh-lead + .mh-lead, .mh-body > .duo-r > .mh-lead + .mh-lead { margin-top: 0; }
/* #150 (Kody 2026-10-31, his pick): the free store's when / where as two columns side by side at every width, each centred: the site's own icon
   (clothesline = when, pitcher = where; in clay until #193, now white in a baked circle), two bold baked lines (#191) */
.vc-ww { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 4vw, 56px); max-width: 600px; margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; }
.vc-ww .icon { display: block; width: clamp(52px, 5vw, 64px); margin: 0 auto 12px; color: var(--clay); }
.vc-ww p { margin: 0; text-wrap: balance; }
.vc-ww p + p { margin: 0; }
.vc-ww__label { font-weight: 700; color: var(--baked); }  /* #191 (Kody 2026-11-01): both lines of each column in the bold baked label style, no gap between them (zero margins, the paragraph line height) */
/* #193 (Kody 2026-10-31, his pick): each icon in a baked-earth circle (84 px desktop, 72 phone), the icon shape white at 57% of it, centred */
.vc-ww__circle { display: grid; place-items: center; width: clamp(72px, 5.84vw, 84px); aspect-ratio: 1; margin: 0 auto 12px; border-radius: 50%; background: var(--baked); }
.vc-ww .vc-ww__circle .icon { display: block; width: 57%; margin: 0; color: #fff; }
/* #189 (Kody 2026-11-01): each column = the icon + one line in the body style (ink, body font and size, normal weight), centred; the bold baked label is gone */
/* #156 (Kody 2026-10-31): the line above the two columns in the inline lead style (.lead-in: Copse 400, 23-29 px), its own line, centred;
   the white under this section = the site's one band gap (64 / 40 px; it was the plain section gap, 108 / 64, which Kody found far too much) */
.vc-ww-lead { font: 400 clamp(23px, 2.3vw, 29px)/1.3 var(--font-accent); text-align: left; text-wrap: pretty; }  /* #189: left-aligned (was centred); #192: pretty, not balance (balance broke the line early after "shopping," and left a big gap) */
/* #177 (Kody 2026-11-01): this one gap (the free store's columns → the Give and take box) is a deliberate one-off, not the site's white gap.
   #208 (Kody 2026-11-01, PRIORITY, his values): the VISIBLE gap, the bottom of the last label line's letters ("10 AM–1 PM" / "Preschool") to
   the box's outer top edge, = 24 px desktop, 20 px phone (measured in pixels; was 55.5 / 36.5). It is this padding + the box's 6-8 px margin
   (#168) + the 7.5-8.5 px the labels' line box runs under their letters (line-height 1.2, #197): 8.25 px at 1440 -> 6 px at 390. */
main > #free-store + #give-and-take { padding-top: clamp(6px, calc(5.16px + 0.2143vw), 8.25px); }
/* #197 (Kody 2026-10-31, his values, "tighter all over"): the free-store block. Heading -> "Open for shopping..." 16 px; that line centred again
   (lead style, text-wrap: pretty) with 18 px under it; the two icon columns as one centred pair, 56 px between them; circle -> its lines 8 px;
   the two baked lines at line-height 1.2. The circles stay 84 / 72 px (#193). */
#free-store .vc-body { margin-top: 16px; }
#free-store .vc-ww-lead { text-align: center; text-wrap: pretty; }
#free-store .vc-ww { grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 56px; max-width: none; margin-top: 18px; }
#free-store .vc-ww__circle { margin-bottom: 8px; }
#free-store .vc-ww__label { line-height: 1.2; }
/* #231 (Kody 2026-11-01): on wide screens the free store's icons were tiny next to the heading: the circles grow from 72 px (820 px wide and
   below, phones unchanged) to 150 px at 1440, the icon still 57% of its circle; the two labels 18 -> 20 px (line-height 1.2 kept), and the gap
   between the columns grows with them (56 -> 72 px). Then, Kody: "MUCH bigger": 150 px circles, 26 px labels, 100 px gap at 1440 (from 820 px up,
   linear). (The heading is already the section-heading size, = "Give + take": 54 px at 1440.) */
@media (min-width: 821px) {
  #free-store .vc-ww__circle { width: min(150px, calc(72px + (100vw - 820px) * 0.1259)); }
  #free-store .vc-ww__label { font-size: min(26px, calc(18px + (100vw - 820px) * 0.0130)); }
  #free-store .vc-ww { column-gap: min(100px, calc(56px + (100vw - 820px) * 0.071)); }
  /* #208's visible 24 px (labels' letters -> the Give + take box) kept: the bigger labels' line box runs ~0.375 px further under their
     letters per px of size, so the padding gives that back */
  main > #free-store + #give-and-take { padding-top: calc(clamp(6px, calc(5.16px + 0.2143vw), 8.25px) - (min(26px, calc(18px + (100vw - 820px) * 0.0130)) - 18px) * 0.375); }
}
#vc-free-title { text-wrap: balance; }  /* #231: two even lines ("Village Commons is / our free store") instead of "store" alone on the second */
/* #178 (Kody 2026-11-01): a whole paragraph in the lead-in font (Copse 400, the lead size), e.g. Village Commons' "When you donate..." */
.lead-para { font: 400 clamp(23px, 2.3vw, 29px)/1.35 var(--font-accent); }
/* #157: the white under it is the site-wide white gap rule now (was .vc-first padding-bottom: var(--band-gap)) */
/* #142 (Kody 2026-10-31): Village Prenatals opens with the group photo (content width, max 820 px, 14 px corners, cover) and the Womb Centered stamp
   on it in a round cream badge (6 px clay border, 4 px clay-lt inner ring, stamp 88% of the badge), centred, 70% over the photo's bottom edge
   and 30% below it. The badge stays in the flow (its negative top margin = 70% of its size), so the 30% overhang keeps its own room below the
   photo. vp-group.jpg has white rounded corners baked in (about 23 / 40 px at 820 px), so the page uses vp-group-crop.jpg (the same photo,
   45 px off each side and 23 px off top and bottom: 1010 x 507), clipped to 14 px corners. */
.vp-photo { width: min(100% - 2 * var(--gutter), 820px); margin: 0 auto clamp(24px, 3vw, 36px); }
.vp-photo__img { aspect-ratio: 1010 / 507; border-radius: 14px; overflow: hidden; }
.vp-photo__img .vp-group { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.vp-badge { --badge: clamp(150px, 30%, 240px); position: relative; z-index: 1; box-sizing: border-box; width: var(--badge); aspect-ratio: 1;
  margin: calc(-0.7 * var(--badge)) auto 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%;
  background: #FFF7EE; border: 6px solid var(--clay); box-shadow: inset 0 0 0 4px var(--clay-lt); }
.vp-badge .vp-stamp { width: 88%; margin: 0; }
/* Postpartum Circles (Kody 2026-10-30): the title, then his intro (no line between them, #104), then one copy per weekly gathering of the page's old "Come to a Monday"
   block (indigo curvy band, .how grid: icon, Copse label, words); the RSVP column holds the two Monday forms, stacked, one width */
.page-head .pc-intro p:last-child { margin-bottom: 0; }
.how--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; margin-inline: auto; }
@media (max-width: 560px) { .how--2 { grid-template-columns: minmax(0, 1fr); } }
.week-how .rsvp-pair { display: grid; gap: 10px; width: min(100%, 280px); margin: 0 auto; }
.week-how .rsvp-pair .btn { --h: 82px; margin: 0; padding: 3px 24px 0; text-align: center; text-wrap: balance; }  /* the Where we gather height (#66): room for three lines */
.week-how p + .rsvp-pair { margin-top: 18px; }  /* Mondays, Request a spot (Kody 2026-10-31, #109): his line, then the two forms */
/* Mondays at St. Mark's (Kody 2026-10-31, #112): his paragraphs between the heading and the 5 columns, one readable column at the page intro's
   width (760 px), left-aligned like the site's other runs of body text, centred in the band */
.mon-intro { width: min(100%, 760px); margin: clamp(28px, 3.6vw, 48px) auto 0; text-align: left; }  /* under the heading: the band headings' gap (.wave-band .how: The details, Where we gather), 48 / 30 / 28 px (Kody 2026-10-31, #115; was 18) */
.mon-intro p { margin: 0 0 1em; }
.mon-intro p:last-child { margin-bottom: 0; }
.nobr { display: inline-block; white-space: nowrap; }  /* words that stay on one line ("St. Mark's" in the Mondays heading, #112) */
/* Tuesdays in Wimberley (Kody 2026-10-31, #113): just its heading and the Coming soon label, centred; 18 px between them (the heading-to-text gap),
   the plain section spacing above and below, equal on both sides */
.tue-soon .soon-label { margin-top: 18px; }
/* Postpartum Circles (Kody 2026-10-31, #116): a centred "Postpartum Circles" section heading over the intro (the Tuesdays heading's style and size) */
.pc-intro .sec-title, .lh-head .sec-title { text-align: center; margin: 0 0 clamp(28px, 3.6vw, 48px); }  /* .lh-head: #256, Little Helpers' heading under the pills, the same */  /* #119: the first paragraph right under it, the Mondays heading's gap (#115) */
/* #120 (Kody 2026-10-31): intro only, no subheadings; paragraphs 2-4 open with a lead-in in the subheading style (Copse 400, 23-29 px): the
   first sentence (paragraph 3: the first part of it); paragraph 1 is plain (#122). The words stay one paragraph (verbatim). Paragraphs evenly spaced: the subheading gap (36 px at 1440, 26 at 390).
   Mondays at St. Mark's keeps its WORKING subheadings (#116, h3.sub-head): the same style, the same space above each, 8 px below. */
.sub-head { font: 400 clamp(23px, 2.3vw, 29px)/1.2 var(--font-accent); color: inherit; text-align: left; margin: clamp(26px, 3vw, 36px) 0 8px; }
/* #123 (Kody 2026-10-31): the lead-in stays INLINE, part of the paragraph (the rest follows on the same line and wraps as normal), no gap.
   line-height 0 on the lead-in, so its bigger letters never stretch a line; the intro paragraphs get one even line height, big enough for the
   lead-in's letters (1.15 x its size, or the body line height when that is taller, as on phones) */
.lead-in { display: inline; font: 400 clamp(23px, 2.3vw, 29px)/0 var(--font-accent); color: inherit; }
.pc-intro p, p:has(> .lead-in) { line-height: max(1.65em, calc(clamp(23px, 2.3vw, 29px) * 1.15)); }  /* every paragraph that opens with a lead-in (#146 Village Commons, #161 About Us) */
.pc-intro p, .mon-intro p { margin: 0; }
.pc-intro p + p, .mon-intro p + p { margin-top: clamp(26px, 3vw, 36px); }
/* Mondays in San Marcos (Kody 2026-10-31, #111): 5 columns in his order. Desktop: 3 over 2, the second row centred (a 6-track grid, each column
   spans 2); tablets: 2 columns, the 5th centred; phones: 1. Every column is the same width, so all four buttons are one size (82 px tall). */
.how--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.how--5 > * { grid-column: span 2; }
.how--5 > :nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 960px) {
  .how--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 680px; margin-inline: auto; }
  .how--5 > :nth-child(4) { grid-column: span 2; }
  .how--5 > :nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 560px) {
  .how--5 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .how--5 > *, .how--5 > :nth-child(4), .how--5 > :nth-child(5) { grid-column: auto; }
}
/* Postpartum Circles (Kody 2026-10-31, #110): the page ends on Erin's band (no Where we gather / Community partners), so the white above the footer
   banner matches the white between its bands (.wave-band + .wave-band: 74 / 51 / 42 px at 1440 / 820 / 390) */
/* removed 2026-10-31 (#117, one band-gap rule; was: #110 Postpartum Circles last band) */
/* Village Commons (Kody 2026-10-31, #114): the page ends on Where we gather (no Community partners), so the white under the band, down to the
   footer banner, matches the white above it (the plain section gap + the band's own margin: 133 / 81 / 73 px at 1440 / 820 / 390) */
/* removed 2026-10-31 (#117, one band-gap rule; was: #114 Village Commons last band) */
@media (max-width: 560px) { .vc-sign__foot { flex-direction: column; } .vc-sign__hours { text-align: center; } .vc-sign__pot { order: -1; } }
/* Where we gather (Kody 2026-10-28): every button and the Coming soon label one height, room for three centred lines with even padding */
.wave-band .where-home .btn { --h: 82px; padding: 3px 24px 0; text-align: center; }
.wave-band .where-home .soon-label { min-height: 82px; }
/* Community partners (Kody 2026-10-28): the same size as the section headings around it (Where we gather, Board of Directors), every page */
#partners-title, #funders-title { font-size: clamp(32px, 4.4vw, 54px); }
/* One size for every section heading (Kody 2026-10-28: About Us first, then every page): the size Board of Directors, Where we gather and
   Community partners had. Page titles, Home, card titles and in-section sub-headings keep their own sizes. */
.title-serif.sec-title, .display.sec-title { font-size: clamp(32px, 4.4vw, 54px); }
/* Pregnancy (Kody 2026-10-28): its text-only Village Prenatals row sits right above Where we gather: the usual gap before the band */
/* removed 2026-10-31 (#117, one band-gap rule; was: Pregnancy text-only row then band) */
/* a gap listed for SITE-COPY only (Kody 2026-10-28): never shown on the page */
.needs[hidden] { display: none !important; }
/* Pregnancy, Weekly Circles (Kody 2026-10-28): Learn More and the two RSVP forms, left-aligned with the section's text at every width */
.prog-row--solo .btn-row--start { justify-content: flex-start; }
.prog-row--solo .btn-row .btn { text-wrap: balance; text-align: center; }
/* a heading with only a hidden SITE-COPY note under it (Pregnancy, Classes and Retreats): no bottom margin, so the gap below matches */
.prog-row__text .sec-title:has(+ .needs[hidden]:last-child) { margin-bottom: 0; }
/* a text-only program row followed by a plain section (Pregnancy: Many Hands + Meal Trains, then Support Network): the usual section gap */
/* removed 2026-10-31 (#157, one white gap; was: .prog-row--solo + .section:not(.band) padding-top calc(var(--section) + 18px - clamp(32px, 4.5vw, 64px))) */
/* Page header style B (Kody 2026-10-29), the 8 menu pages: Home's stripe field and cover arch (same frame, size and spacing), holding a
   smaller pot logo, the split-colour title and the page's tagline in Home's hero tagline style. No buttons. The pills sit below the stripes. */
.hero--page .cover-arch { container-type: inline-size; }  /* lets a long title word shrink to the arch's width (100cqw) */
.hero--page .cover-arch .window__logo { width: min(clamp(46%, calc(46% + (100vw - 390px) / 10), 52%), 280px); margin: 0 auto clamp(2.5px, calc(4.32px - 0.129vw), 3.8px); }  /* #226: option 15, the logo close over the title (was 12-20 px) */
/* #211 (Kody 2026-11-01): the pot logo bigger, so it fills the dome: 46% of the arch's text width on a phone (132 px at 390), growing to 52%
   by ~570 px, capped at 280 px (from 820 px up; was min(36%, 190px)). Same rule on every style B page; #201's balance rule is unchanged. */
.cover-arch .arch-title { margin: 0 0 clamp(12px, 1.6vw, 20px); font: 400 min(clamp(36px, 8vw, 88px), calc(100cqw / (var(--n, 8) * .8))) / 1 var(--font-display); text-wrap: balance; }
.hero--page .cover-arch .hero__tagline { margin: 0 auto; max-width: 30ch; text-wrap: balance; }
/* #201 (Kody 2026-11-01): ONE balance rule for every style B arch (no per-page values). The logo + title + tagline block sits optically
   centred in the white inside: the white over the logo (--air-t) is about 1.3x the white under the last line's box (--air-b), so measured
   ink to ink (the tagline's descender room counts as white) the top is 1.0-1.3x the bottom on every page, 1920 to 360 (tools/archbalance.mjs).
   Both are measured from the white's edge (the frame rings and rainbow edge, ring2 + seg, come first). A longer title or tagline makes the
   arch taller from the bottom; the block never moves down. The arch is never shorter than the dome main.js paints (half its width + the
   frame inset), or the painted sides fold back (a short title at 1000-1300 px did); when that floor binds, the block stays centred. */
.hero--page > .wrap { container-type: inline-size; }  /* 100cqw below = the width the arch may take (it is min(100%, 1100px)) */
.hero--page .cover-arch {
  --air-b: clamp(50px, calc(44px + 1.53vw), 66px);  /* 50 px at 390 -> 66 px at 1440 */
  --air-t: clamp(65px, calc(55.6px + 2.25vw), 88px);   /* 65 px at 390 -> 88 px at 1440: 1.30-1.33x --air-b */
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;  /* grid, not flex: WebKit sized the logo's aspect-ratio box 13 px too tall in a flex column */
  padding-top: calc(var(--ring2) + var(--seg) + var(--air-t));
  padding-bottom: calc(var(--ring2) + var(--seg) + var(--air-b));
  min-height: calc(min(100cqw, 1100px) / 2 + max(var(--ring) + var(--ring2) + var(--seg), var(--pr)));
}
.hero-frame + .toc { padding-top: clamp(22px, 3vw, 40px); }
/* About Us, Calendar (Kody 2026-10-29): no tagline in the arch, so the title is its last line and the arch's own bottom padding balances it */
.cover-arch .arch-title:last-child { margin-bottom: 0; }
/* #226 (Kody 2026-11-01, his pick: arch spacing option 15, artifact RNbAxYA6dMqEyXfSnDiJYb): the logo and the title read as a pair, the tagline
   set apart. The two margins come from the measured gaps (option 5's even spacing, then logo -> title 0.6x and title -> tagline 1.75x): about
   10 / 23 px at 390 and 17 / 41 px at 1440, visible ink to ink. The white over the logo and under the tagline (#201) is unchanged. */
.hero--page .cover-arch .arch-title:not(:last-child) { margin-bottom: clamp(25.2px, calc(17.21px + 2.052vw), 46.8px); }
/* About Us FAQ, "Do I need to RSVP for events?" (Kody 2026-10-29): the two Monday bullets, then the plain lines with the usual gap */
#faq .accordion__body .ticks { margin: 10px 0 16px; }
/* About Us and Calendar (Kody 2026-10-29): header style A again, the title only: big split-colour Chango, centred on white at the top of the
   page, no tagline, no stripes, arch or logo; then the pills (About Us) or the content (Calendar). A long word shrinks to fit (--n). */
.hdr-a { padding: clamp(28px, 4vw, 48px) var(--gutter) 0; text-align: center; background: var(--white); }
.hdr-a__title { margin: 0 auto; text-wrap: balance; font: 400 min(clamp(44px, 9vw, 88px), calc((100vw - 2 * var(--gutter)) / (var(--n, 8) * .8))) / 1 var(--font-display); }

/* #163 (Kody 2026-10-31): ONE style for in-text links (links inside paragraphs and list items; not buttons, nav, pills or the footer's link
   lists): a marigold highlighter behind the words, no underline, weight 600, an arrow after them (::after, so the copy stays word for word;
   a no-break space joins it to the last word, so it never wraps alone; "/ ''" keeps screen readers from reading it). Words stay ink on white,
   cream on dark (wavy bands, footer). Hover = a stronger, taller highlight; keyboard focus = the site's turquoise ring. The highlight is
   clipped to the text (content-box) and repeats on every line of a wrapped link; the 4 px inline padding only enlarges the tap area. */
:is(main :is(p, li, dd), .footer-ask) a:not(.btn, .pill) {
  --hl: #F6CF9C; --hl-top: 55%;
  display: inline; margin: 0; padding: 4px 0; color: var(--ink); font-weight: 600; text-decoration: none;
  background: linear-gradient(transparent var(--hl-top), var(--hl) var(--hl-top) 92%, transparent 92%) content-box;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: --hl-top .15s ease, background-color .15s ease;
}
:is(main :is(p, li, dd), .footer-ask) a:not(.btn, .pill)::after { content: "\00a0\2192"; content: "\00a0\2192" / ""; }
:is(main :is(p, li, dd), .footer-ask) a:not(.btn, .pill):hover { --hl: #F2BB72; --hl-top: 35%; }
:is(main :is(p, li, dd), .footer-ask) a:not(.btn, .pill):focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; border-radius: 3px; }
:is(.wave-band, .site-footer) :is(p, li, dd) a:not(.btn, .pill) { --hl: rgba(222, 143, 53, .6); color: var(--cream); }
:is(.wave-band, .site-footer) :is(p, li, dd) a:not(.btn, .pill):hover { --hl: rgba(222, 143, 53, .85); }

/* #181 (Kody 2026-11-01): About Us, Our Full Circle Story: the mission in a cream arch card (#FFF7EE, 3 px clay-lt border, radius 999 999 18 18,
   the column's full width, the site's white gap above and below): the pot icon in clay, "Our mission" (Chango, rose, 13 px, caps, .1em), then
   the two sentences left-aligned in the body font, 20 px / 1.55. The top is a half circle as wide as the card, so the top padding keeps the
   text below the curve (checked at 1440 and 390 by verbatim.mjs). */
.mission-card { margin: var(--band-gap) 0; padding: clamp(40px, 7.2vw, 104px) clamp(26px, 5vw, 72px) clamp(28px, 3.4vw, 48px);
  background: #FFF7EE; border: 3px solid var(--clay-lt); border-radius: 999px 999px 18px 18px; text-align: center; }
.mission-card .icon { display: block; width: clamp(44px, 3.9vw, 56px); margin: 0 auto clamp(10px, 1.1vw, 16px); color: var(--clay); }
.mission-card__label { margin: 0 0 clamp(20px, 1.9vw, 28px); font: 400 13px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rose); }
.mission-card__text { margin: 0; text-align: left; font: 400 20px/1.55 var(--font-serif); color: var(--ink); }
.our-story__text > .mission-card:last-child { margin-bottom: 0; }  /* #183: closing a section, its gap is the band gap after it (the wrapper is a grid, so the margin would stack) */
.page-about-us .our-story__text .mission-card .mission-card__label { margin-bottom: clamp(20px, 1.9vw, 28px); } .page-about-us .our-story__text .mission-card .mission-card__text { margin-bottom: 0; }
/* #230 (Kody 2026-11-01): on desktop (820 px and up) the mission card is a narrower arch, 520 px, centred, same cream, border and full
   half-circle top; the pot sits up in the dome (60 px top padding), "Our mission" under it, then the words, with side padding that keeps every
   line inside the curve (verbatim.mjs checks it). Phones unchanged. */
@media (min-width: 820px) {
  .page-about-us .our-story__text > .mission-card { width: 100%; max-width: 520px; justify-self: center; margin-inline: auto; padding: 60px 40px 40px; }
  .page-about-us .our-story__text .mission-card .icon { margin-bottom: 12px; }
  .page-about-us .our-story__text .mission-card .mission-card__label { margin-bottom: 20px; }
}

/* #249 (Kody 2026-11-02): Little Helpers rebuilt with his copy (LH-COPY-2026-11-02.md). Body = the Many Hands / Family Days column (.lh-body:
   760 px, left-aligned; joined to their rules above). His [icons] groups = the Village Commons free-store icon columns (.vc-ww: a white icon in
   a baked circle, the bold baked label), 3 across (his last group 2), each label wrapping in its column, centred under its circle. On phones
   (560 px and under) the long-label group (.lh-icons--stack) is one centred column; the short ones stay across. The line before each group
   (.lh-lead) and the closing line (.lh-close) are in the lead style (Copse, as VC's "Open for shopping..." and Many Hands' lead lines),
   centred. His pills sit mid-page above Mondays at St. Mark's: the white gap above them, the heading gap under them. */
.lh-body > .lh-lead { margin: clamp(32px, 3.6vw, 48px) 0 0; font: 400 clamp(23px, 2.3vw, 29px)/1.3 var(--font-accent); text-align: center; text-wrap: balance; }
.lh-body .vc-ww.lh-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(16px, 3.4vw, 48px); row-gap: 28px; max-width: none;
  margin: clamp(20px, 2.2vw, 30px) auto 0; }
.lh-body .vc-ww.lh-icons--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
.lh-icons .vc-ww__circle { width: clamp(72px, 7.6vw, 110px); margin-bottom: 12px; }
.lh-icons .vc-ww__label { line-height: 1.3; }
.lh-body > .lh-icons + p { margin-top: clamp(32px, 3.6vw, 48px); }
.lh-body .lh-after-icons { margin-top: clamp(20px, 2.2vw, 30px); text-align: center; text-wrap: balance; }
.lh-body > .lh-close { margin-top: clamp(32px, 3.6vw, 48px); }
/* #252 (Kody 2026-11-02, his pick: option 2 of the icon layouts, https://claude.ai/artifact/CP3jZC47ADbz2dDLRjgSST), PHONES ONLY (560 px and
   under; 820 and desktop unchanged): the first group 3 across again, smaller: 64 px circles (the icon 57% of it, as everywhere), 8 px from
   circle to label, 15 px labels, 8 px between columns (at 390 a column is 114 px, "A connection" 92: two clean lines each, no orphan word, down
   to 360). The second group, and the last one to match, = rows: the 56 px circle left, the bold baked label right, left-aligned, the circle
   centred on the label's lines, 14 px between circle and label and between rows. (Replaces #249's one-column stack on phones.) */
@media (max-width: 560px) {
  .lh-body .vc-ww.lh-icons--three { column-gap: 8px; }
  .lh-icons--three .vc-ww__circle { width: 64px; margin-bottom: 8px; }
  .lh-icons--three .vc-ww__label { font-size: 15px; }
  .lh-body .vc-ww.lh-icons--rows { grid-template-columns: minmax(0, 1fr); row-gap: 14px; max-width: none; text-align: left; }
  .lh-icons--rows > div { display: flex; align-items: center; gap: 14px; }
  .lh-icons--rows .vc-ww__circle { flex: none; width: 56px; margin: 0; }
  .lh-icons--rows .vc-ww__label { text-align: left; text-wrap: pretty; }
}
/* removed 2026-11-03 (#256: the pills are at the top, under the stripes, as on Postpartum Circles; was: .page-volunteer-hour main > .toc padding-top
   band-gap - 6/8 px, and .toc + .section padding-top 28-48 px, for the mid-page pills) */
/* #249: the 7-item list alone in the Topics box, under its subheader's line (the line -> box edge 20-28 px; the box keeps #168's 6-8 px below,
   its edge having none of the leading text brings); headings balanced over their lines; the two-line button on phones centred */
.lh-body > p + .vp-topics { margin-top: clamp(20px, 2.2vw, 28px); }
.lh-body > .vp-topics:last-child { margin-bottom: clamp(6px, 0.56vw, 8px); }
.lh-topics .ticket__in > .dots { margin: 0; }  /* #268: was .lh-list (the class is the cream card's now, Kody) */
.page-volunteer-hour main .sec-title { text-wrap: balance; }
.lh-body > .btn-row .btn { text-align: center; text-wrap: balance; }
/* #251: Kody's paragraph right under the box (a normal paragraph, not in it): the same 20-28 px from the box edge as the line above the box */
.lh-body > .vp-topics + p { margin-top: clamp(20px, 2.2vw, 28px); }

/* #253 (Kody 2026-11-02): testimonial slider. A page with 2+ testimonials shows them in ONE quote band (Village Commons, Village Prenatals,
   Family Days), one at a time. Without JS the quotes stack in the band. With JS (.is-live, main.js) every slide sits in one grid cell, so the
   band keeps the tallest quote's height at every width (no jump), each quote centred in it; the others are hidden (visibility + aria-hidden).
   Under the quotes: the left arrow, a dot per quote, the right arrow (cream circles with the Learn More button's light inner ring, baked
   chevrons; marigold on hover; the site's turquoise focus ring). Arrow keys move too; phones swipe; no auto-advance. Fade 0.25 s (none on
   reduced motion). Boxed quotes (Many Hands) stay as they are. */
.quote-slider:not(.is-live) .quote-slide + .quote-slide { margin-top: clamp(32px, 3.35vw, 48px); }
.quote-slider.is-live .quote-slider__stage { display: grid; touch-action: pan-y; }
.quote-slider.is-live .quote-slide { grid-area: 1 / 1; align-self: center; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
.quote-slider.is-live .quote-slide.is-active { visibility: visible; opacity: 1; transition: opacity .25s ease; }
.quote-slider__nav { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(20px, 2.2vw, 30px); }
.quote-slider__nav[hidden] { display: none; }
.quote-slider__arrow { display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: var(--cream); color: var(--baked); box-shadow: inset 0 0 0 3px rgba(168, 86, 60, .22); cursor: pointer;
  transition: background-color .2s ease, transform .2s ease; }
.quote-slider__arrow svg { width: 22px; height: 22px; }
@media (hover: hover) { .quote-slider__arrow:hover { background: var(--marigold); color: var(--ink); transform: translateY(-1px); } }  /* touch screens keep :hover after a tap */
.quote-slider__dots { display: flex; align-items: center; }
.quote-slider__dot { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.quote-slider__dot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--cream); box-sizing: border-box; transition: background-color .2s ease; }
.quote-slider__dot[aria-current="true"]::before { background: var(--cream); }
@media (hover: hover) { .quote-slider__dot:not([aria-current="true"]):hover::before { background: rgba(255, 247, 238, .5); } }
.quote-slider__arrow:focus-visible, .quote-slider__dot:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .quote-slider .quote-slide, .quote-slider__arrow { transition: none; } }

/* #254 (Kody 2026-11-02): photos (build.py <lv-pic> / <lv-pics>, src/photos.json). One photo = a centred figure with the Village Prenatals
   photo's 14 px corners, no caption, the same gap above and below (24-40 px; none after a container's last child): as wide as the column
   allows, at most 460 px wide and 620 px tall (560 on phones; --ar = its width / height, so tall phone photos stay narrower), 380 px wide
   at most inside the Postpartum Circles Mondays columns. A set of 2-3 (.pic-set) = one row on wider screens, up to 960 px wide (centred on
   its column, wider than the 760 px text), every photo the same height (each as wide as its shape needs: flex-grow = --ar); on phones one
   photo at a time with the testimonial slider's arrows, dots, keys and swipe (main.js .is-live), baked on white. */
.pic { --pic-w: 460px; --pic-h: 620px; width: min(100%, var(--pic-w), calc(var(--pic-h) * var(--ar))); margin: clamp(24px, 3vw, 40px) auto; }
.pic picture { display: block; }
.pic img { display: block; width: 100%; height: auto; border-radius: 14px; }
.pic:last-child, .pic-set:last-child { margin-bottom: 0; }
.section > .wrap > .pic-set:first-child { margin-top: 0; }  /* #255: a set that is its own section (Early Childhood set B, between cards): the white gap alone above it, as below */
.mon-intro .pic { --pic-w: 380px; }
.pic-set { width: min(960px, 100vw - 2 * var(--gutter)); margin: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 40px) 50%; translate: -50% 0; }
.pic-set__stage { display: flex; gap: clamp(12px, 1.6vw, 20px); }
.pic-set .pic-slide { flex: var(--ar) 1 0%; width: auto; margin: 0; }
@media (max-width: 560px) {
  .pic { --pic-h: 560px; }
  .pic-set:not(.is-live) .pic-set__stage { flex-direction: column; align-items: center; gap: 16px; }
  .pic-set:not(.is-live) .pic-slide { flex: none; width: min(100%, calc(var(--pic-h) * var(--ar))); }
  .pic-set.is-live .pic-set__stage { display: grid; touch-action: pan-y; }
  .pic-set.is-live .pic-slide { grid-area: 1 / 1; align-self: center; justify-self: center; width: min(100%, calc(var(--pic-h) * var(--ar)));
    visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
  .pic-set.is-live .pic-slide.is-active { visibility: visible; opacity: 1; transition: opacity .25s ease; }
}
.pic-set .quote-slider__nav { margin-top: 16px; }
.pic-set .quote-slider__arrow { background: var(--baked); color: var(--cream); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28); }
.pic-set .quote-slider__dot::before { border-color: var(--baked); }
.pic-set .quote-slider__dot[aria-current="true"]::before { background: var(--baked); }
@media (hover: hover) { .pic-set .quote-slider__dot:not([aria-current="true"]):hover::before { background: rgba(168, 86, 60, .35); } }
@media (prefers-reduced-motion: reduce) { .pic-set .pic-slide { transition: none !important; } }
/* removed 2026-11-03 (#256: the watering-basil photo is unplaced, the "Little hands..." paragraph back in the flow, .lh-body > .lh-icons + p; was:
   .lh-pair = the paragraph | its photo side by side on desktop, the photo under it below 961 px) */
/* #256 (Kody 2026-11-03): Little Helpers, Mondays at St. Mark's = Postpartum Circles' Mondays band (indigo; the band heading, .mon-intro with
   PC's .sub-head over each paragraph, two halves on desktop). Its halves open on a sub-head (PC's open on a paragraph), so the first one adds
   no space under the band heading (the heading gap alone, 48 / 28 px, as on PC). The button = PC's marigold band button, at the band's end,
   the gap PC has from its paragraphs to its columns (48 / 28 px); centred, two balanced lines when it wraps on phones. */
/* removed 2026-11-05 (#265: the band = PC's Mondays band, opening on the St. Mark's paragraph, so Inside's and Village Commons' sub-heads keep
   PC's space above them on phones; was: .lh-mon .mon-intro > .duo-l > .sub-head:first-child { margin-top: 0; }) */
/* removed 2026-11-03 (#258: PC's Request a spot block replaced the lone button; was: .lh-mon .mon-intro + .btn-row margin-top 28-48 px, its .btn
   centred + balanced, 280 px wide on phones) */

/* #257 (Kody 2026-11-03, all widths; his picks: option 8 of the Little Helpers lists artifact E1ft7TSLULt7Tc88K2YnLJ, icon style 4 of
   CKp3HJSSLG85U5QXLN5vPg). (1) The first icon group (We come together every week to cultivate:) = the bare icon, no circle: baked, 64 px
   (the icon 92% of its box, as style 4), 3 across at every width, the bold baked labels as they were. (2) The second group = three polaroids
   on a clothesline: a thin brown rope sagging in the middle (one SVG curve, 2 px at any width), a wooden clothespin on each, white border
   (6 / 6 / 12 px), soft shadow, tilted -4 / +1 / +4 deg, the middle one 14 px lower; a square photo (tools/square_photos.py) and his line on
   the bottom border in bold baked Karma. Phones (560 px and under): the line runs the screen's width, each polaroid 30% of it; wider: one
   row up to 880 px wide, centred on the text column, each 26%. No scroll: the line is never wider than the screen. */
.lh-icons--bare .vc-ww__circle { width: 64px; background: none; border-radius: 0; }
.lh-icons--bare .vc-ww__circle .icon { width: 92%; color: var(--baked); }
/* removed 2026-11-05 (#268: Kody's cream card replaced the captioned polaroid clothesline; .lh-pol__im stays, every clothesline uses it).
   Was: .lh-body > .lh-line (the line, min(880px, screen - gutters), centred), .lh-line__rope + path, .lh-line__row, .lh-pol (+ --low,
   ::before pin), .lh-pol__cap, .lh-body > .lh-line + p (32-48 px), and the 560 px phone block (line 100vw, polaroids 30%, captions 13 px). */
.lh-pol__im { aspect-ratio: 1; overflow: hidden; background: var(--cream); }
.lh-pol__im img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* #258 (Kody 2026-11-03): Postpartum Circles' Mondays band keeps one photo (babies-on-quilt), so its desktop halves (#234) are two rows of
   balanced pairs, his order kept: the intro + Outside + Inside + Postpartum Circle | its photo, then Village Commons | Food + coffee. The
   rows sit a sub-head's space apart (the duo pairs zero their first / last margins); phones and tablets stack in reading order as before. */
/* removed 2026-11-05 (#269: the Mondays band is arch rows now; was: 961 px+ .mon-intro--rows { row-gap: clamp(26px, 3vw, 36px) }) */
/* #258: "Tuesdays at Zoetic in Wimberley" (both pages) breaks into even lines; "in Wimberley" stays together (.nobr) */
.tue-soon .sec-title { text-wrap: balance; }
/* removed 2026-11-05 (#269; was: 961 px+ .mon-intro--rows .pic { --pic-w: 420px }) */  /* #258: the photo has its own half now: 420 px (was 380 in the shared columns) matches the text beside it (560 / 563 px at 1280-1440) */

/* #259 (Kody 2026-11-03, all widths; his pick: "5 + 6 · Cream card overlapping the circle, button in the card" of
   https://claude.ai/artifact/Cv5QPVu9GhFJvTzQEmv8Yt): Little Helpers' closing line in a cream card (3 px clay-light edge, 22 px corners)
   overlapping a round photo (circle-outdoors) in a white 6 px gap + a 5 px marigold ring; the line in the lead style (Copse), baked; under it
   a row of Learn More-style buttons (one for now; it wraps and stays centred on phones, starts on the left wider). Phones and small tablets:
   the circle centred (82% of the column, at most 360 px), the card over its bottom 50 px, words centred. 761 px and up: the circle (360 px
   at most, 44% of the block) on the left, the card pulled 50 px over its right side, vertically centred, words left. The ring is drawn
   outside the photo's box, so the block keeps 11 px of room for it (above, and below where the circle is the lowest part). */
.lh-body > .lh-close-card { margin-top: clamp(32px, 3.6vw, 48px); }
.lh-round { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--cream); box-shadow: 0 0 0 6px #fff, 0 0 0 11px var(--marigold); }
.lh-round picture, .lh-round img { display: block; width: 100%; height: 100%; }
.lh-round img { object-fit: cover; }
.lh-card { position: relative; box-sizing: border-box; margin: 0 14px; padding: 22px; background: var(--cream); border: 3px solid var(--clay-lt); border-radius: 22px; text-align: center; }
.lh-card__line { margin: 0; font: 400 clamp(23px, 2.3vw, 29px)/1.3 var(--font-accent); color: var(--baked); text-wrap: balance; }
.lh-card__btns { margin-top: 16px; }
.lh-card__btns .btn { text-align: center; text-wrap: balance; }
/* #262 (Kody 2026-11-03): (C.2, all widths) the round photo is gone: the card alone, as on phones (14 px in from each side of the column, words
   and button centred), the old line's gap above it (32-48 px; no ring room now); the side-by-side layout (761 px and up: the circle left, the
   card over its right side) went with the photo, so tablets show the phone card too. (J, computers only, 961 px and up; phones and tablets
   pixel-identical) Kody prefers the phone version: stacked and centred, the line then the Register button, at the phone card's proportions:
   its width = the phone card's width for its type (330 px at 390 for 23 px words = 14.35 times the line's size), centred. */
@media (min-width: 961px) { .lh-card { width: min(100% - 28px, calc(330 / 23 * clamp(23px, 2.3vw, 29px))); margin-inline: auto; } }

/* #260 (Kody 2026-11-03, all widths): photos across the site in four reusable styles (src/photos.json; build.py macros).
   A) CLOTHESLINE: replaced in #262 by the two-photo line (see the #262 block below); was 3 polaroids (4 on Family Days' hikes) of Little
      Helpers' #257 style on one row, fit="half|box|card".
   B) ARCH ROW .arch-row (<lv-arch name tone pos> in .arch-row__media, words in .arch-row__text): laid out like Home's program rows with
      videos: the same .photo window (main.js paints the same double clay frame), 3:4; 961 px and up the arch (min(420px, 57vh)) beside the
      words (48-64 px gap, the row 1000 px at most, words vertically centred on the arch); below that the arch above the words, centred
      (420 px at most, 320 on phones). --start: left-aligned under a left-aligned heading (About Us).
   C) WIDE <lv-wide name>: like the Village Prenatals group photo: 820 px at most, centred on its column, 14 px corners, no stamp.
   D) CARD PHOTO: removed in #261 (see below); program cards carry a clothesline of 3 after their line (fit="card"). */
.arch-row { --arch-w: min(100%, 420px); display: grid; justify-items: center; gap: clamp(24px, 3vw, 40px); margin: clamp(24px, 3vw, 40px) 0; }
.arch-row:first-child { margin-top: 0; }
.arch-row:last-child { margin-bottom: 0; }
.arch-row__media { width: var(--arch-w); }
.arch-row__text { justify-self: stretch; min-width: 0; }
.arch-row__text > :first-child { margin-top: 0; }
.arch-row__text > :last-child { margin-bottom: 0; }
@media (max-width: 760px) { .arch-row { --arch-w: min(100%, 320px); } }
@media (min-width: 961px) {
  .arch-row { --arch-w: min(420px, 57vh); grid-template-columns: var(--arch-w) minmax(0, 1fr); column-gap: clamp(48px, 4vw, 64px);
    align-items: center; justify-items: stretch; width: min(1000px, 100vw - 2 * var(--gutter)); margin-left: 50%; translate: -50% 0; }
  .arch-row--start { width: min(100%, 1000px); margin-left: 0; translate: none; }
}
.pic-wide { width: min(820px, 100vw - 2 * var(--gutter)); margin: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 40px) 50%; translate: -50% 0; }
.pic-wide picture { display: block; }
.pic-wide img { display: block; width: 100%; height: auto; border-radius: 14px; }
.pic-wide:first-child { margin-top: 0; }
.pic-wide:last-child { margin-bottom: 0; }
/* removed 2026-11-03 (#261, Kody: card photos looked "thrown in", he wants clotheslines): D) CARD PHOTO .card-pic (4:3 across the top of a
   program card, rounded top corners). Program cards now carry a clothesline after their line (<lv-line fit="card">), Pregnancy's Village
   Prenatals card the group photo as a wide one at the card's width. */
/* removed 2026-11-03 (#262: no wide photo in a program card, none on Home or Wellness Wednesdays; were .prog-row__text > .pic-wide = the card's
   width, #261; .ww-top padding-top 28-48 px, #260; .home-wide padding-top = the band gap, #260) */
#donate-clothing-diapers-and-baby-gear .sec-title { text-wrap: balance; }  /* #260: one column now (760 px): three even lines, not "gear" alone */
/* removed 2026-11-03 (#262: Village Commons' free-store clothesline is gone; was: below 961 px the line under the icons kept 18-22 px under it) */

/* #262 (Kody 2026-11-03, all widths; his pick: option A of https://claude.ai/artifact/TZ629UrnmgyQ7BMoSKtinh): a CLOTHESLINE = TWO photos
   side by side on ONE line, not overlapping (<lv-line names="a b">, build.py). One thin brown rope (#8A6A52, 2 px at any size) across the
   line's whole width, both ends level at its top, a gentle sag in the middle (a quadratic curve, 16 px at 390 wide, scaled with the line).
   Two square polaroids (white border 6 / 6 / 14 px, soft shadow), each 46% of the line, centred in its half (2 px toward the middle: a small
   gap), tilted -3 / +2.5 deg; one wooden clothespin (10 x 24 px) at each photo's top centre ON the rope: the rope runs through it 6 px
   from its top (the curve's height at the photo's centre = 13 / 390 of the width down), the photo's top 10 px under the rope, so the pin
   grips the rope and the photo's top 8 px. Phones (560 px and
   under): the screen's width (the rope runs edge to edge, as in his pick at 390). Wider: 560 px at most (his "about 520-600"), centred under
   its paragraph (a desktop half narrower than that: the half's width). The gap above (paragraph -> rope) = the paragraph gap; below, the
   same plus room for the tilted corners. Little Helpers' captioned 3-polaroid line (#257, .lh-line) is its own markup and keeps its look. */
.cl-line { position: relative; box-sizing: border-box; width: min(560px, 100%); margin: clamp(22px, 2.6vw, 32px) auto clamp(30px, 3.4vw, 44px); container-type: inline-size; }
.cl-line:last-child { margin-bottom: 0; }
.cl-line__rope { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; overflow: visible; }
.cl-line__rope path { fill: none; stroke: #8A6A52; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cl-line__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding-top: calc(13 / 390 * 100cqw + 10px); }
.cl-pol { position: relative; box-sizing: border-box; width: 92%; margin: 0; justify-self: center; padding: 6px 6px 14px; background: #fff;
  box-shadow: 0 6px 16px rgba(58, 36, 48, .22); transform: rotate(var(--r, 0deg)); }
.cl-pol:first-child { translate: 2px 0; }
.cl-pol:last-child { translate: -2px 0; }
.cl-pol::before { content: ""; position: absolute; z-index: 1; top: -16px; left: 50%; width: 10px; height: 24px; margin-left: -5px; border-radius: 3px; background: #C9A27A; }
@media (max-width: 560px) { .cl-line { width: 100vw; margin-left: 50%; margin-right: 0; translate: -50% 0; } }
/* #262: a wide photo at the top of a page, under its header (Early Childhood, Volunteer: after the pills; Village Commons: under the stripes;
   Family Days, version 1): the gap above = the header -> title gap of every page head (28-48 px); the page's first section follows at the
   one white gap */
.top-wide { padding-top: clamp(28px, 4vw, 48px); }
/* #262: Postpartum Circles' Mondays rows (three pairs, each paragraph over its clothesline): on desktop the two cells of a row align at their
   foot, so the row's two clotheslines hang level (the shorter text starts a little lower); phones and tablets stack as before */
/* removed 2026-11-05 (#269; was: 961 px+ .mon-intro.mon-intro--lines { align-items: end }, the #262 rows' lines level) */
/* #263 (Kody 2026-11-04): Partnerships = his copy (PT-COPY-2026-11-04.md). About Our Partnerships is the page-head section: its heading centred
   over the 760 px column at the band headings' gap (as Postpartum Circles' and Little Helpers' headings, #116 / #256), plain paragraphs 1em
   apart (the Village Commons body). The two partner sections = the Village Commons section look (centred heading, .vc-body column) with
   Postpartum Circles' sub-heads (.sub-head) for his subsections. A button row sits at the Many Hands body's gap (22-32 px) above and below.
   Our supporters: a centred grid of neutral dashed placeholder tiles (rows of 4, 3 on phones, each row centred) until the logos come. */
.pt-intro .sec-title { text-align: center; margin: 0 0 clamp(28px, 3.6vw, 48px); }
.pt-intro p, .pt-body p { margin: 0; }
.pt-intro p + p { margin-top: 1em; }
:is(.pt-intro, .pt-body) > .btn-row { margin-block: clamp(22px, 2.2vw, 32px); }
:is(.pt-intro, .pt-body) > .btn-row:last-child { margin-bottom: 0; }
.pt-body > .btn-row + .sub-head { margin-top: 0; }  /* the button row's own gap is the space above the next sub-head */
.pt-body .btn { text-wrap: balance; text-align: center; }
:is(#pt-about-title, #pt-stm-title, #pt-zoetic-title, #pt-sup-title) { text-wrap: balance; }  /* "Center" never alone on a line */
/* #281 (Kody 2026-11-07): the supporters' logo wall (was #263's dashed "Logo" placeholder tiles): a centred grid under the heading, rows of 3
   on computers (761 px and up: 200 x 120 px boxes) and 2 on phones (140 x 90 px), the same gap across and down; each logo contained in its
   box at its own shape, centred (no stretch, no crop). An odd last row sits centred (the grid is centred; 6 logos fill 3 + 3 / 2 + 2 + 2). */
.pt-logos { --bw: 140px; --bh: 90px; --gap: clamp(24px, 3.4vw, 48px); display: grid; grid-template-columns: repeat(2, var(--bw)); grid-auto-rows: var(--bh);
  gap: var(--gap); justify-content: center; margin: clamp(28px, 3.6vw, 48px) auto 0; padding: 0; list-style: none; }
.pt-logo { display: block; width: var(--bw); height: var(--bh); }  /* a block, so the logo's 100% height resolves against the box (a grid item's didn't) */
.pt-logo picture { display: contents; }
.pt-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
@media (min-width: 761px) { .pt-logos { --bw: 200px; --bh: 120px; grid-template-columns: repeat(3, var(--bw)); } }
/* #263: a button whose link hasn't come yet (data-needs-link, SITE-COPY's [NEEDS LINK]) gets the placeholder stripes under ?placeholders */
html.show-ph .btn[data-needs-link] { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .45) 0 6px, transparent 6px 12px); }
/* #264 (Kody 2026-11-04): Little Helpers' page-head heading IS his intro line now and the paragraph under it is gone, so the heading is the last
   child of its wrap (margin 0) and "We come together..." follows it: that line takes the heading's gap (28 / 29.5 / 48 px at 390 / 820 / 1440,
   PC's heading -> first line, as before), not its own 32-48 px lead gap. #lh-intro exists on volunteer-hour.html only. */
#lh-intro .lh-head + .wrap > .lh-body > .lh-lead:first-child { margin-top: clamp(28px, 3.6vw, 48px); }
/* #265 (Kody 2026-11-05): Little Helpers' Mondays band = Postpartum Circles' (same words, cells, rows and order; PC's markup). PC's desktop rows
   align at their foot so each row's TWO clotheslines hang level (#262); Little Helpers keeps only its three lines (Outside, Inside, Food +
   coffee; no photos added), one per row, so aligned at the foot the text-only paragraph would sink to the bottom of its row. Here the rows
   align at their top instead: each row's sub-heads sit level. Computer only (961 px+); phones and tablets stack exactly as PC's. .lh-mon is
   on volunteer-hour.html only. */
/* removed 2026-11-05 (#267, Kody: the band exactly as PC's, with PC's clotheslines and PC's foot-aligned rows; was: @media (min-width: 961px)
   { .lh-mon .mon-intro.mon-intro--lines { align-items: start; } }) */
/* #265 (Kody 2026-11-05): Village Commons' wide top photo is gone, so the free store opens the page again, right under the stripes. On
   computers it sits beside the Give + take box (#234 pair, centred on each other); #208's phone-tuned label -> box gap
   (main > #free-store + #give-and-take) outranked the pair's own header gap (main > .hero-frame + .duo-l + .duo-r), leaving the box 13-17 px
   under the stripes while its heading sat 48. Here the pair's top (the box) takes the page-head gap every page has under its header,
   clamp(28px, 4vw, 48px), the text column centred on the box as before. Computer only (961 px+); phones and tablets stack as before. */
@media (min-width: 961px) { main > .hero-frame + #free-store + #give-and-take { padding-top: clamp(28px, 4vw, 48px); } }
/* #268 (Kody 2026-11-05, his pick: option 4 "cream card, squiggles" of artifact VGvLWDC6oyJzGeYvhAuNu8, phone and computer): Little Helpers'
   three lines under "Our weekly Postpartum Circles ... We get together every week to:" in ONE cream card (ul.lh-list; Kody: not .lh-card,
   the closing card's class; the Supporting box's old lh-list class is lh-topics now), words left-aligned, bold baked Karma. Between the lines ONE continuous clay-lt
   squiggle (the calendar's approach, #247): a single long SVG path used as a no-repeat mask, the element a whole number of the wave's periods
   long (period = 2.25 x its height), so both ends finish on the centre line and nothing tiles. Phones and tablets: stacked, a 162 x 12 px
   squiggle (6 periods of 27 px) centred above lines 2 and 3. 900 px and up: three columns, a 12 x 135 px squiggle (5 periods) standing up
   between them, vertically centred. The paragraph after it keeps the old line's gap (32-48 px). */
ul.lh-list { --lh-sq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 16'%3E%3Cpath d='M0 8C6 2.4 12 2.4 18 8S30 13.6 36 8S48 2.4 54 8S66 13.6 72 8S84 2.4 90 8S102 13.6 108 8S120 2.4 126 8S138 13.6 144 8S156 2.4 162 8S174 13.6 180 8S192 2.4 198 8S210 13.6 216 8S228 2.4 234 8S246 13.6 252 8S264 2.4 270 8S282 13.6 288 8S300 2.4 306 8S318 13.6 324 8S336 2.4 342 8S354 13.6 360 8S372 2.4 378 8S390 13.6 396 8S408 2.4 414 8S426 13.6 432 8S444 2.4 450 8S462 13.6 468 8S480 2.4 486 8S498 13.6 504 8S516 2.4 522 8S534 13.6 540 8S552 2.4 558 8S570 13.6 576 8S588 2.4 594 8S606 13.6 612 8S624 2.4 630 8S642 13.6 648 8S660 2.4 666 8S678 13.6 684 8S696 2.4 702 8S714 13.6 720 8' fill='none' stroke='%23000' stroke-width='3.6'/%3E%3C/svg%3E");
  --lh-sqv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 720'%3E%3Cpath d='M8 0C2.4 6 2.4 12 8 18S13.6 30 8 36S2.4 48 8 54S13.6 66 8 72S2.4 84 8 90S13.6 102 8 108S2.4 120 8 126S13.6 138 8 144S2.4 156 8 162S13.6 174 8 180S2.4 192 8 198S13.6 210 8 216S2.4 228 8 234S13.6 246 8 252S2.4 264 8 270S13.6 282 8 288S2.4 300 8 306S13.6 318 8 324S2.4 336 8 342S13.6 354 8 360S2.4 372 8 378S13.6 390 8 396S2.4 408 8 414S13.6 426 8 432S2.4 444 8 450S13.6 462 8 468S2.4 480 8 486S13.6 498 8 504S2.4 516 8 522S13.6 534 8 540S2.4 552 8 558S13.6 570 8 576S2.4 588 8 594S13.6 606 8 612S2.4 624 8 630S13.6 642 8 648S2.4 660 8 666S13.6 678 8 684S2.4 696 8 702S13.6 714 8 720' fill='none' stroke='%23000' stroke-width='3.6'/%3E%3C/svg%3E");
  box-sizing: border-box; max-width: 560px; margin: clamp(22px, 3vw, 34px) auto 0; padding: 6px 20px; list-style: none; text-align: left;
  background: var(--cream); border: 2px solid var(--clay-lt); border-radius: 18px; }
ul.lh-list > li { margin: 0; padding: 16px 0; font: 700 clamp(17px, 1.5vw, 19px)/1.45 var(--font-serif); color: var(--baked); }
ul.lh-list > li + li { position: relative; padding-top: 30px; }
ul.lh-list > li + li::before { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 162px; height: 12px; background: var(--clay-lt);
  -webkit-mask: var(--lh-sq) 0 50% / auto 100% no-repeat; mask: var(--lh-sq) 0 50% / auto 100% no-repeat; }
@media (min-width: 900px) {
  ul.lh-list { max-width: 1000px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 26px 0; }
  ul.lh-list > li, ul.lh-list > li + li { padding: 4px 34px; }
  ul.lh-list > li + li::before { top: 50%; left: -6px; translate: 0 -50%; width: 12px; height: 135px;
    -webkit-mask: var(--lh-sqv) 50% 0 / 100% auto no-repeat; mask: var(--lh-sqv) 50% 0 / 100% auto no-repeat; }
}
.lh-body > ul.lh-list + p { margin-top: clamp(32px, 3.6vw, 48px); }
/* #269 (Kody 2026-11-05, his Clothesline or Arch chooser https://claude.ai/artifact/Tx21FsMtyXPE9ABnNV2p4f; brief NEXT-269): Mondays at
   St. Mark's on Postpartum Circles AND Little Helpers (the same section on both). Phones and tablets (under 900 px): one column as before
   (.mon-intro), no arches, three clotheslines (after Outside, Postpartum Circle, Food + coffee; each the last thing in its block, so the next
   sub-head's own 26-36 px follows it). Computers (900 px and up): two rows, min(1000px, 100vw - 64px) wide and centred, each an arch beside a
   group of text, alternating sides (row 1 text | arch, row 2 arch | text): a 420 px | 1fr grid, 56 px gap, vertically centred, 40 px between
   the rows; the text left-aligned, 22 px between its blocks (a sub-head keeps its 8 px to its paragraph); no clotheslines. The arch
   (<lv-ring-arch>): 3:4, round top, 14 px lower corners, a 6 + 6 px two-tone clay ring, the photo cover-cropped at its pos. */
.mon-intro--arches > .mon-row > .ring-arch { display: none; }
.ring-arch { margin: 0; aspect-ratio: 3 / 4; border-radius: 999px 999px 14px 14px; overflow: hidden; background: #F6EEE8;
  box-shadow: 0 0 0 6px #D58D6B, 0 0 0 12px #C97B5A; }
.ring-arch picture, .ring-arch img { display: block; width: 100%; height: 100%; }
.ring-arch img { object-fit: cover; }
@media (min-width: 900px) {
  .mon-intro.mon-intro--arches { width: min(1000px, 100vw - 64px); max-width: none; margin-left: 50%; margin-right: 0; translate: -50% 0; }
  .mon-row { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 56px; align-items: center; }
  .mon-row--arch-right { grid-template-columns: minmax(0, 1fr) 420px; }
  .mon-row + .mon-row { margin-top: 40px; }
  .mon-intro--arches > .mon-row > .ring-arch { display: block; margin-block: 12px; }  /* the 12 px ring inside the row, so the space above the
     first row and below the last is equal at every width (the ring or the text, whichever is outermost) and the rows sit 40 px apart, ring included */
  .mon-intro--arches .cl-line { display: none; }
  .mon-block + .mon-block { margin-top: 22px; }
  .mon-block > :first-child { margin-top: 0; }
}

/* #272 (2026-11-06, Kody's pick: option 6 of artifact Q9UnVDtkfLkr65TtopEYKV; brief review/incoming/NEXT-272-mh-layout.md) Many Hands + Meal
   Trains, COMPUTERS ONLY (900 px and up; phones and tablets unchanged): "way too much white space".
   (1) The intro is one centred column at the page's body width (.mh-body, 760 px, text left): the four paragraphs, then his two lines (centred,
   lead-in style), then the Give | Receive pair centred under them. The markup is unchanged (phones read the pair before the lines, as before):
   the column is a flex column and the pair takes order 1. Gaps: paragraphs -> lines = lines -> pair, ink to ink (see the values below).
   (2) The boxes stay side by side and top-aligned, each only as tall as its own content (no stretch, so Meal Trains loses its empty middle):
   the quote sits under the words at the page's words -> quote gap (#216's margin-top: auto resolves to 0, as in the taller box before), the
   pair under it. The Many Hands list runs in two columns, down then across (4 + 3), its 8 px row gap kept (option 6's columns: 2 dropped it). */
@media (min-width: 900px) {
  .mh-first .mh-body:has(> .duo-l) { display: block; width: min(100%, 760px); max-width: none; margin-inline: auto; }
  .mh-first .mh-body > :is(.duo-l, .duo-r) { width: auto; max-width: none; margin: 0; }
  .mh-first .mh-body > .duo-r { display: flex; flex-direction: column; margin-top: calc(clamp(22px, 2.2vw, 32px) - clamp(9.8px, 3.3px + 0.651vw, 11.5px)); }
  .mh-first .mh-body > .duo-r > .btn-row { order: 1; margin: clamp(22px, 2.2vw, 32px) 0 0; }
  .mh-first .mh-body > .duo-r > .mh-lead { margin: 0; }
  /* #279 (2026-11-07, Kody: "move everything up starting with clothesline, see if we can make both boxes the same size"; brief NEXT-279): both
     boxes the same height again (stretch, was #272's start); in each, the quote (from its icon) stays right under the words at the words ->
     quote gap (margin-top 0, was #216's auto, which dropped it to the foot), and the spare height goes between the quote and its Give |
     Receive pair (the pair's margin-top: auto, at least the usual quote -> pair gap as the quote's margin-bottom), so both pairs sit level
     at the boxes' foot */
  .mh-cards { align-items: stretch; }
  .mh-cards > .vp-topics.mh-list > .ticket__in > .quote-pull { margin-top: 0; margin-bottom: clamp(22px, 2.2vw, 32px); }
  .mh-cards > .vp-topics.mh-list > .ticket__in > .quote-pull + .btn-row { margin-top: auto; }
  /* equal halves where both fit (about 1100 px and up, as in option 6); narrower, a column is never thinner than its longest item, so
     "Household projects" and "Preparing for baby" never wrap (both column-major, 3 rows = 6 items since #279 removed Organizing, 3 + 3;
     change the 3 if the list changes) */
  .mh-cards #many-hands .dots { grid-template-columns: repeat(2, minmax(max-content, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column;
    column-gap: clamp(20px, 2vw, 28px); }
}

/* #280 (2026-11-07, Kody's picks from his Clothesline or Arch chooser Tx21FsMtyXPE9ABnNV2p4f; brief review/incoming/NEXT-280-banners-vp-photo.md)
   (A, B) PHOTO BANNERS: section.banner-sec = a photo edge to edge across the screen (<lv-banner>, build.py) at the top of the section, then a
   cream box (.banner__card: #FFF7EE, 2 px #D58D6B, 18 px corners, the chooser's shadow) holding the section's words, overlapping the photo's
   foot by min(--ov-card x its own height, --ov-photo x the photo's height): main.js sets that margin (it depends on the box's height); without
   JS the photo share alone. Per section: --bh (photo height), --pos (object-position), --ov-card, --ov-photo; computers = 900 px and up
   (860 px box, centred, padding 26 / 30), below that the phone values (16 px from the screen's edges, padding 20). Heading centred, words
   left-aligned, the site's sizes. School Holiday Mondays (Family Days, option 4F) and the free store (Village Commons). */
.banner-sec { --ov-card: 1; --ov-photo: .1; }
.banner__photo { height: var(--bh, 380px); overflow: hidden; }
.banner__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.banner__card { position: relative; z-index: 2; margin: calc(-1 * var(--ov-photo) * var(--bh, 380px)) 16px 0; padding: 20px; text-align: left;
  background: #FFF7EE; border: 2px solid #D58D6B; border-radius: 18px; box-shadow: 0 10px 24px rgba(58, 36, 48, .18); }
.banner__card > .sec-title { margin: 0 0 14px; text-align: center; }
.banner__card > :is(.fd-body, .vc-body) { width: auto; }
.banner__card > .sec-title + .fd-body { margin-top: 0; }
.banner__card > .banner__note { margin: 22px 0 0; text-align: left; }  /* Kody's locked line under the free store's circles */
#school-holiday-mondays { --bh: 380px; --pos: 38% 70%; --ov-card: .8; --ov-photo: .42; }
#free-store { --bh: 300px; --pos: 44% 50%; --ov-photo: .1; }
@media (min-width: 900px) {
  .banner__card { width: min(860px, 100% - 32px); margin-inline: auto; padding: 26px 30px; }
  #school-holiday-mondays { --bh: 680px; --pos: 50% 62%; --ov-photo: .4; }
  #free-store { --bh: 600px; --pos: 50% 40%; }
}
/* (C) VILLAGE PRENATALS, computers only: "This is the village around your prenatal care." + its line left (1fr), the St. Mark's group photo
   right (1.2fr), 56-64 px apart, centred on each other, at most 1120 px wide, centred. The photo = the whole group at 1634 / 1200, object-position
   50% 28%, 12 px corners, inside the site's striped frame (<lv-framed-pic>: .framed + .ticket--rose, Kody's frame option 2; main.js paints it)
   with a 12 px white mat. Phones and tablets: no photo, the section as before. */
.framed-pic { display: none; }
@media (min-width: 900px) {
  .vp-vill__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(56px, 4.4vw, 64px); align-items: center;
    width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }
  .vp-vill .vp-text { width: auto; margin: 0; text-align: left; }
  .vp-vill .vp-text > :is(h2, p) { text-align: left; margin-inline: 0; }
  .framed-pic { display: block; margin: 0; padding: calc(var(--ring2, var(--ring)) + var(--seg) + 12px); }
  .framed-pic img { display: block; width: 100%; height: auto; aspect-ratio: 1634 / 1200; object-fit: cover; object-position: 50% 28%; border-radius: 12px; }
}
/* #280: the free store now ends on its cream box, not on its labels, so #208's tight labels -> Give + take gap (6-8 px of padding) would
   leave the Give + take box 6 px under the box's border on phones; the page's section gap instead, the same as computers already had
   (#261's clamp(28px, 4vw, 48px)) */
main > #free-store.banner-sec + #give-and-take { padding-top: clamp(28px, 4vw, 48px); }
/* #284 (Kody 2026-11-06, Pregnancy's locked copy): "Gatherings include:" (Village Prenatals) leads its bullets: the card's usual line -> list
   gap above it (the lede's 10 px), the list's own 6 px row gap under it (was p's 1em = 18 px, which read as a paragraph of its own) */
.prog-row__text > .pg-list-lead { margin: 0 0 6px; }

/* #289 (Kody 2026-11-07, fixing #288: "the squiggles that go above and below the bullet point lists next to the arches"; brief NEXT-289),
   Little Helpers, COMPUTERS ONLY (961 px and up, the homepage rows' breakpoint): Community Mess gets the homepage program rows' squiggle
   (#236-#241: the same 138 x 26 px masked wave, 5.5 px round stroke; mask copied from the .prog-row__text::before / ::after rule above), in
   rose (Little Helpers' homepage row colour): one right above the first paragraph (15 px, --sq-t) and one right below the last (19.5 px,
   --sq-b), the bottom one mirrored (scaleX(-1)), both centred on the text column (the paragraphs fill it, so that is the words' centre
   within a pixel). #288's two-stripe band-edge squiggles are gone. Pseudo-elements: no markup. */
@media (min-width: 961px) {
  #community-mess .lh-body > p:first-of-type::before, #community-mess .lh-body > p:last-of-type::after {
    content: ""; display: block; width: 138px; height: 26px; margin-inline: auto; background: var(--rose);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 69 13'%3E%3Cpath d='M2 5C7.5 0 13 0 18.5 5S29.5 10 35 5 46 0 51.5 5 62.5 10 64 7' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 69 13'%3E%3Cpath d='M2 5C7.5 0 13 0 18.5 5S29.5 10 35 5 46 0 51.5 5 62.5 10 64 7' fill='none' stroke='%23000' stroke-width='2.75' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  #community-mess .lh-body > p:first-of-type::before { margin-bottom: 15px; }
  #community-mess .lh-body > p:last-of-type::after { margin-top: 19.5px; transform: scaleX(-1); }
}

/* #291 (Kody 2026-11-07: "make that font small, as like a subtitle to the header, not as big as the main text"; brief NEXT-291), Partnerships:
   "Formerly St. Mark's Episcopal Preschool." = a subtitle close under its sub-head "The Early Childhood Building" (2 px: the heading's 8 px
   bottom margin with -6 px), italic baked Karma, left-aligned like the heading; the next paragraph keeps the page's paragraph gap (p + p);
   the same at every width */
.sub-head + .sub-head__sub { margin-top: -6px; font: italic 400 clamp(14px, 1.15vw, 16px)/1.4 var(--font-serif); color: var(--baked); letter-spacing: .02em; text-align: left; }
/* #292 (Kody 2026-11-07: "Remove the arch from the partnerships page on the phone version"; brief NEXT-292), Partnerships below 900 px
   (phones and tablets): the watering-can arch beside the Support network list is hidden (display: none, its .values__media), and the section
   is one column there (as .values--solo; 861-899 px was still two columns), so the list runs on with no empty space. 900 px and up keep it. */
@media (max-width: 899px) {
  .page-partnerships #support-network .values { grid-template-columns: minmax(0, 1fr); }
  .page-partnerships #support-network .values__media { display: none; }
}

/* #302 (Kody 2026-11-07; brief NEXT-302): Volunteer's top photo (moms-group-playhouse, its -2000 copy) is #280's banner, the intro paragraph in
   its cream box (no heading, so the paragraph sits alone with the box's padding all round: its own bottom margin off), overlapping 10% of the
   photo (60 / 30 px), as Village Commons. 600 / 300 px tall; object-position 50% 45% on computers; on phones the photo is only cropped across, at
   45% so the mother on the left stays whole (every face in view). The section keeps .top-wide's gap under the pills. */
.banner__card > p { margin: 0; }
#volunteer-top { --bh: 300px; --pos: 45% 50%; --ov-photo: .1; }
@media (min-width: 900px) { #volunteer-top { --bh: 600px; --pos: 50% 45%; } }

/* #293 (Kody 2026-11-07, his photo picks from the Clothesline or Arch chooser Tx21FsMtyXPE9ABnNV2p4f; brief NEXT-293; picks and crops from
   review/incoming/chooser/placements.json). COMPUTERS (900 px and up): each pick is a .pick-row = Kody's arch (<lv-ring-arch>, #269's ring arch,
   his crop) beside a group of the section's words, as the chooser draws it: a 420 px | 1fr grid, 56 px gap, vertically centred,
   min(1000px, 100vw - 64px) wide and centred on its column, 40 px above and below; the sides alternate down the page (--arch-right puts the
   arch second). The words keep the site's own spacing inside their column (first and last margins off). PHONES AND TABLETS (under 900 px):
   no arches (hidden, lazy: never loaded) and the rows are plain blocks, so the words read exactly as before; his clotheslines
   (<lv-line phone="1" pos="a|b">, each polaroid cover-cropped at his position) hang where he put them, and are hidden on computers. */
.ring-arch { position: relative; }
.pick-row > .ring-arch, .pick-row > .grid6 { display: none; }
.pick-row__text > :nth-last-child(1 of :not(.cl-line--phone)) { margin-bottom: 0; }  /* the last words (past a phone clothesline), at every
   width: as the last child of its column it had no bottom margin before it moved into the row (Village Commons' Give + take box) */
@media (min-width: 900px) {
  .cl-line--phone { display: none; }
  .pick-row { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 56px; align-items: center; box-sizing: border-box;
    width: min(1000px, 100vw - 64px); max-width: none; margin: 40px 0 40px 50%; translate: -50% 0; text-align: left; }
  .pick-row--arch-right { grid-template-columns: minmax(0, 1fr) 420px; }
  .pick-row--arch-right > .ring-arch, .pick-row--arch-right > .grid6 { order: 2; }
  .pick-row > .ring-arch { display: block; margin-block: 12px; }  /* the 12 px ring inside the row (as #269) */
  .pick-row:first-child { margin-top: 0; }
  .pick-row:last-child { margin-bottom: 0; }
  .pick-row__text { min-width: 0; }
  .pick-row__text > * { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
  .pick-row__text > :nth-child(1 of :not(.cl-line--phone)) { margin-top: 0; }  /* the first words, past any (hidden) phone clothesline */
  /* Village Prenatals' Topics: six rounded photos, 2 x 3, as tall as the box beside them (his option 8) */
  .pick-row--grid6 { align-items: stretch; }
  .pick-row > .grid6 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 18px; min-height: 100%; margin-block: 5px; }
  .grid6__tile { position: relative; overflow: hidden; border-radius: 22px; box-shadow: 0 0 0 5px #D58D6B; background: #F6EEE8; min-height: 0; }
  .grid6__tile picture, .grid6__tile img { display: block; width: 100%; height: 100%; }
  .grid6__tile img { object-fit: cover; }
}
@media (min-width: 900px) {
  /* #293: beside an arch (Little Helpers' intro row, a ~520 px column) the cream card stays stacked, as on phones and in Kody's chooser */
  .pick-row__text > ul.lh-list { display: block; max-width: none; padding: 6px 20px; }
  .pick-row__text > ul.lh-list > li { padding: 16px 0; }
  .pick-row__text > ul.lh-list > li + li { padding-top: 30px; }
  .pick-row__text > ul.lh-list > li + li::before { top: 0; left: 50%; translate: -50% 0; width: 162px; height: 12px;
    -webkit-mask: var(--lh-sq) 0 50% / auto 100% no-repeat; mask: var(--lh-sq) 0 50% / auto 100% no-repeat; }
}
/* #293: a row right under a section heading keeps the heading -> words gap the words had (.sec-title + .lh-body / .fd-body / .mh-body), at every width */
.sec-title + .pick-row { margin-top: clamp(28px, 3.6vw, 48px); }
/* #293: a row whose words are whole sections (Village Commons' Plenty for everyone + Gift economy, his merge). The row is main's child, so it
   takes the one-white-gap paddings (#157) the first section had; inside it the sections keep that system by hand: the first no padding, the
   second the one gap above it (the same values as before, so phones are unchanged); on computers the row has no margin of its own */
.pick-row--sections > .pick-row__text > .section { padding-block: 0; }
.pick-row--sections > .pick-row__text > .section + .section { padding-top: calc(var(--band-gap) - clamp(6px, 0.56vw, 8px)); }
@media (min-width: 900px) {
  main > .pick-row--sections { margin-block: 0; }
  .pick-row--sections > .pick-row__text > .section > .wrap { width: 100%; max-width: none; }
}
/* #293: below 900 px the Topics row keeps the box's 6 px top margin inside it (as the box had in its .wrap before the row) */
@media (max-width: 899px) { .pick-row--grid6 { display: flow-root; } }
/* #293: Family Days' row of sections starts right under the pills: the intro's page-head gap under them (.toc + .page-head) moves to the row */
.toc + .pick-row--sections { padding-top: clamp(36px, 5vw, 64px); }
/* #293: Family Days' merged column (his chooser): its two section headings sit on the column's left, as he saw them (computers) */
@media (min-width: 900px) { .pick-row--sections :is(#fd-sat-title, #fd-river-title) { text-align: left; } }
/* #293: Partnerships' words sit in rows inside .pt-body now; the body's own rules carry into a row's column (every width), and a paragraph
   that starts or follows a row keeps the paragraph gap it had next to its neighbour paragraph (phones and tablets: on computers the rows
   carry their own 40 px) */
.pt-body .pick-row__text > .btn-row { margin-block: clamp(22px, 2.2vw, 32px); }
.pt-body .pick-row__text > .btn-row + .sub-head { margin-top: 0; }
@media (max-width: 899px) {
  .vc-body > .pick-row + .pick-row > .pick-row__text > p:first-child, .vc-body > .pick-row + p { margin-top: 1em; }
}
/* #293: beside Kody's circle-outdoors arch (computers) the hour row's duo halves are ~230 px, so the two-icon group's 48 px column gap left
   91 px per label and "Postpartum" (97 px) stuck out of its column: the gap = 16 px there, each label ~107 px. Phones and tablets unchanged. */
@media (min-width: 900px) { .pick-row .duo-r .vc-ww.lh-icons { column-gap: 16px; } }
/* ...and from 961 to 1023 px (duo halves ~188 px) even that is too narrow: the two icons stack there, each label the half's full width */
@media (min-width: 961px) and (max-width: 1023px) { .pick-row .duo-r .vc-ww.lh-icons--2 { grid-template-columns: minmax(0, 1fr); } }
/* #304 (Kody 2026-11-08): About Us, Rebuilding the Village = one column, the same 760 px column as Our Full Circle Story (#234's two-column
   split is gone: no .duo-l / .duo-r there); the mission card right under the last paragraph, centred at its own width (520 px from 820, the
   column's width below). The gap above it = the page's paragraph -> block gap (32 px, .mt-m: the FAQ intro -> its accordion), not the
   section gap; below it the section's normal end (the band gap to Board of Directors). */
.page-about-us #rebuilding-the-village .our-story__text > .mission-card { margin-top: 32px; }
/* #306 (Kody 2026-11-08: "why is there a space between all the other paragraphs, but not between these 2"): on computers (900 px+) #293's
   phone clotheslines are display: none, but they still sit between their neighbours in the markup, so a sibling rule (p + p, :last-child)
   no longer saw the pair. Each paragraph-gap rule gets its twin with a hidden phone line between (same scope, same value), and an arch row
   whose only later sibling is a phone line counts as last. Phones and tablets: the lines show and nothing here applies. */
@media (min-width: 900px) {
  .pc-intro p + .cl-line--phone + p, .mon-intro p + .cl-line--phone + p { margin-top: clamp(26px, 3vw, 36px); }  /* = .pc-intro p + p */
  .vc-body p + .cl-line--phone + p { margin-top: 1em; }  /* = .vc-body p + p (Village Commons, Partnerships' body) */
  :is(.mh-body, .fd-body, .lh-body) p + .cl-line--phone + p { margin-top: 1em; }
  .pt-intro p + .cl-line--phone + p { margin-top: 1em; }
  .pick-row:nth-last-child(1 of :not(.cl-line--phone)) { margin-bottom: 0; }  /* = .pick-row:last-child (Village Commons' Give + take row) */
  .pick-row:nth-child(1 of :not(.cl-line--phone)) { margin-top: 0; }
}
/* #307 (Kody 2026-11-08: "center this paragraph ... And align the rest with the arch. Computer only."): Postpartum Circles' first intro
   paragraph sits under the heading, out of the arch row, in the 760 px intro column; computers (900 px+) centre it (his exception to "body
   text left"), heading -> it = the heading's own gap (clamp(28px, 3.6vw, 48px), as before), it -> the arch row = the row's 40 px (every
   #293 arch row's gap to the words above it); paragraphs 2-4 left, vertically centred on the arch (the row's align-items: center). Phones and
   tablets: the same markup order as before, so paragraph 2 gets back its p + p gap here. */
@media (min-width: 900px) { .pc-intro > p { text-align: center; } }
@media (max-width: 899px) { .pc-intro > p + .pick-row > .pick-row__text > p:first-child { margin-top: clamp(26px, 3vw, 36px); } }
/* #321 / #322 (Kody 2026-11-08: "make these lines the big bold font", then the same on Postpartum, Early Childhood and Volunteer; computer
   only): on the four menu pages each program card's intro line (the paragraph right under its title: .lede, or Mother's Blessings' plain
   line) takes the lead-in font (Copse 400, clamp(23px, 2.3vw, 29px), as .lead-in / .lead-para) from 900 px. Words and markup unchanged;
   phones and tablets untouched. */
/* #328 (Kody 2026-11-11: "the paragraph that comes before the bullets for each program is supposed to be the big bold font"): the font now
   at EVERY width (the same clamp, so 23 px on phones and tablets, as .lead-in / .lead-para there); the margins below stay computer-only */
:is(.page-pregnancy, .page-postpartum, .page-early-childhood, .page-volunteer) .prog-row__text > h2 + p { font: 400 clamp(23px, 2.3vw, 29px)/1.35 var(--font-accent); }
@media (max-width: 899px) {  /* #328: the same give-back at the phone size (Copse sits ~5 px lower than the body font there): .lede 10 -> 15 px, Mother's Blessings' plain line 24 px */
  :is(.page-pregnancy, .page-postpartum, .page-early-childhood, .page-volunteer) .prog-row__text > h2 + p.lede { margin-bottom: 15px; }
  :is(.page-pregnancy, .page-postpartum, .page-early-childhood, .page-volunteer) .prog-row__text > h2 + p:not(.lede) { margin-bottom: 24px; }
}
@media (min-width: 900px) {
  /* the bigger Copse letters sit ~6 px lower in their line, so the line -> bullets / button gap is given back: .lede 10 -> 16 px; Mother's
     Blessings' plain line (1em = 29 px now) 23 px = its old ink gap to the button */
  :is(.page-pregnancy, .page-postpartum, .page-early-childhood, .page-volunteer) .prog-row__text > h2 + p.lede { margin-bottom: 16px; }
  :is(.page-pregnancy, .page-postpartum, .page-early-childhood, .page-volunteer) .prog-row__text > h2 + p:not(.lede) { margin-bottom: 23px; }
}
/* #319 (Kody 2026-11-08, computer only): three Partnerships sentences in the lead-in style ("These gatherings center postpartum mothers."):
   span.lead-in--pc = .lead-in from 900 px (Copse 400, the lead size, inline, line-height 0; its paragraph gets .lead-in's even line height);
   under 900 px it is plain body text, so phones and tablets do not move. */
@media (min-width: 900px) {
  .lead-in--pc { display: inline; font: 400 clamp(23px, 2.3vw, 29px)/0 var(--font-accent); color: inherit; }
  p:has(> .lead-in--pc) { line-height: max(1.65em, calc(clamp(23px, 2.3vw, 29px) * 1.15)); }
}
/* #313 (Kody 2026-11-08: "move this line to after the buttons ... make it the same margins as the text"; computer only): Many Hands' intro on
   computers reads paragraphs, "A village needs both.", the Give | Receive pair, then "The families you help today may help you tomorrow."
   (flex order; the markup keeps the phones' order); both lines centred across the full text column (no balanced, narrower wrap); line ->
   pair -> line at the page's text -> pair gap, clamp(22px, 2.2vw, 32px). #314 (Kody 2026-11-08, computer only): the Many Hands box takes
   the jade segment order (jade, passion, rose from 120 deg) so it no longer repeats Meal Trains' rose one beside it; main.js paints its
   frame from these at paint time. Phones and tablets: unchanged. */
@media (min-width: 900px) {
  .mh-first .mh-body > .duo-r > .mh-lead { text-wrap: wrap; width: 100%; }
  .mh-first .mh-body > .duo-r > .btn-row { order: 1; margin: clamp(22px, 2.2vw, 32px) 0 0; }
  .mh-first .mh-body > .duo-r > .mh-lead:last-child { order: 2; margin-top: calc(clamp(22px, 2.2vw, 32px) - .15em); }  /* less its Copse leading over the letters, so pair -> line = line -> pair ink to ink */
  #many-hands.ticket { --s1: var(--jade); --s2: var(--passion); --s3: var(--rose); --sf: 120deg; }
}
/* #315 (Kody 2026-11-08: "center this at the top. try colorful text of the big bold text. then after that, the sections start being next to
   arch."; computer only): Family Days' intro sits above the arch row (markup moved; phones read the same order), centred in its 760 px
   column, in the lead-in font (Copse 400, clamp(23px, 2.3vw, 29px)), each sentence its own brand colour, option A: mulberry, rose, jade (none
   is the purple that opens "Saturday Family Hikes" under it). B (all rose) and C (the headings' split-colour fill) are screenshots only. The
   arch row then opens on Saturday Family Hikes, 40 px under the intro (#293's row gap, as #307).
   #316 (Kody 2026-11-08: "move testimonials to below school holiday mondays"; computer only): one band, no copy: from 900 px main is a
   flex column and the band takes order 1 (Find dates order 2), so it shows after School Holiday Mondays; phones keep it after River Meetups.
   The sibling spacing rules follow the markup order, so the three joins are set here to the site's band spacing: the arch row -> School
   Holiday Mondays = the white gap between sections; School Holiday Mondays -> the band and the band -> Find dates = the band's own margin
   (no padding on the band side). */
@media (min-width: 900px) {
  #fd-intro .fd-body > p { font: 400 clamp(23px, 2.3vw, 29px)/1.35 var(--font-accent); text-align: center; }
  /* #324 (Kody 2026-11-10, on #315's A / B / C: "All of those look terrible just do black."): no per-sentence colours; the intro in the page's ink */
  #fd-intro .fd-body > p, #fd-intro .fd-c { color: var(--ink); }
  main > #fd-intro + .pick-row--sections { margin-top: 40px; }
  .page-family-days main { display: flex; flex-direction: column; }
  .page-family-days main > .quote-band { order: 1; }
  .page-family-days main > #find-dates { order: 2; padding-top: 0; }  /* after the band now: the band's margin is the only space (no padding on the band side) */
  .page-family-days main > #school-holiday-mondays { margin-top: var(--band-gap); }  /* after the arch row now (white -> white): the one white gap, to the photo's top edge */
}
/* #330 (Kody 2026-11-11, phone: "there's way too much white space after the tagline ... the arch should probably be adjusted for each page
   ... the white space needs to be gone"; under 900 px only, computers unchanged): the arch already grows and shrinks with its own words
   (#201: padding + content, no fixed height); what read as an empty band was the white under the last line, #201's --air-b (50 px at 390),
   a full-width band against the dome that narrows over the pot. Under 900 px: --air-b 32 px at 390 -> 40 px at 899 (the pot's straight-up
   clearance to the dome stays #201's --air-t, 65 px at 390), and where the arch is taller than its words (the dome floor main.js needs,
   half the arch's width, binds on tablets) the words sit at the arch's foot (align-content: end), so the spare white goes into the dome
   above the pot, never under the tagline. Logo, fonts, gaps between pot, title and tagline, the frame and the stripes are unchanged. */
@media (max-width: 899px) {
  .hero--page .cover-arch { --air-b: clamp(32px, calc(26px + 1.53vw), 40px); align-content: end; }
}