/* Brand fonts, served from our own site (Fontsource latin subsets, SIL Open Font License; see /fonts/LICENSE-*.txt).
   Self-hosting keeps visitor data away from Google's font servers (plan §5.6, §8.1). */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/roboto-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/caveat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/caveat-latin-600-normal.woff2") format("woff2"); }

/* Layout: full-width color bands that alternate down the page (cream, white, butter, indigo), each
   with a centered 76rem column inside a 16px+ gutter. A slim sticky header fades to indigo on scroll.
   Home: hero, three color blocks, program cards with sub-brand headers, trail, numbers, season,
   values, photos, horizontal timeline, inlaid give box; a Hill Country ridge closes into the footer.
   Program pages open on the brand board's social tile. Tokens: Brand Standards v2.2 §5–7; Day & Night board. */
:root {
  --cream: #FEFCF7;
  --indigo: #2E3192;
  --night-indigo: #26286B;
  --deep-night: #1F2160;
  --gold: #F7B517;
  --butter: #FBDA8D;
  --clay: #C7413A;
  --river: #3E6F80;  /* River, the family-weekend type color (types.json); never brighten toward Ohana blue */
  --cobalt: #1052FD;
  --ink: #2A2A2A;
  --near-black: #0E0F2E;
  --season: #C7413A;          /* default; each season overrides via :root[data-season] (src/content/seasons.json) */
  --on-season: #FEFCF7;

  --bg: #FEFCF7;
  --bg-alt: #FFFFFF;
  --bg-warm: #FDF1D3;
  --band: #2E3192;
  --card: #FFFFFF;
  --text: #2A2A2A;
  --head: #2E3192;
  --muted: #3F3F3F;
  --link: #1052FD;
  --line: rgba(46, 49, 146, 0.14);
  --greet: #2E3192;
  --photo-bg: #EDE6D8;  /* photo placeholders: neutral limestone, so they never read as the Morning type color */
  --photo-line: rgba(42, 42, 42, 0.35);
  --photo-text: #2A2A2A;
  --tile-night: #26286B;
  --btn: #2E3192;
  --on-btn: #FEFCF7;
  --hdr-solid: #2E3192;
  --fl-a: #F7B517; --fl-b: #FEFCF7; --pear-flower: transparent; --pear-fruit: #C7413A; --pear-fruit-op: 1; --sotol-stalk: inline; --sotol-bloom: none;  /* footer scene by season: src/content/seasons.json */
  --star: #FBDA8D;
  /* Footer scene at night (Paul, Oct 21: night only, no day/night switch). The scroll script carries every visitor from
     sunset through blue hour into this night as they reach the footer (its sunset and twilight tones live in the page script);
     with reduced motion (or no script) it simply is night. Painted scene tones: one lit and one shade per layer, Brand Standards §7 tints. */
  --ridge: #1F2160; --ridge-far: #292B74; --ridge-mid: #24276C; --ridge-river: #303389; --ridge-river-shade: #26286B; --ridge-river-lit: #3E42A8; --ridge-river-warm: #3E42A8; --glint: #FBDA8D; --bloom: #FBDA8D; --fl-op: 0.38; --bloom-op: 0.55;
  --rb0: #24266C; --rb1: #2A2D77; --rb2: #303389; --rb3: #383B9E; --star-op: 1; --sun-op: 0;
  --ridge-lit: #24276C; --ridge-shade: #1F2160; --ridge-mid-lit: #292B74; --ridge-mid-shade: #1F2160; --ridge-jun: #1F2160; --ridge-jun-lit: #24276C; --ridge-jun-shade: #1F2160; --halo-op: 1; --glow-op: 1;
  --firefly-dot: rgba(247, 181, 23, 0.55);
  --note: #FFF4D6;
  --note-line: #E0B54A;
  --note-text: #4A3A10;

  --display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  --camp: "Fredoka", "Nunito", "Trebuchet MS", sans-serif;
  --body: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --wrap: 76rem;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.65 var(--body); transition: background-color 400ms ease, color 400ms ease; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--card); color: var(--text); padding: 0.5rem 1rem; z-index: 20; }
h1, h2, h3 { color: var(--head); text-wrap: balance; margin: 0; font-weight: 400; }
p { margin: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: max(16px, 4vw); }
.section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
.band-alt { background: var(--bg-alt); }
.band-warm { background: var(--bg-warm); }
.band-ink { background: var(--band); color: var(--cream); position: relative; overflow: hidden; }
.band-ink h2, .band-ink h3 { color: var(--cream); }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }
.measure { max-width: 40rem; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.2rem); line-height: 1.55; max-width: 34rem; color: var(--muted); }
.band-ink .lede { color: var(--butter); }
.kicker { font: 700 0.72rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 2.25rem; }
.sec-head .lede { max-width: 30rem; }

.reg-donor h1 { font: 400 clamp(3.2rem, 8vw, 6.5rem)/0.92 var(--display); letter-spacing: 0.01em; }
.reg-donor h2 { font: 400 clamp(2.4rem, 5vw, 3.6rem)/0.95 var(--display); letter-spacing: 0.01em; }
.reg-donor h3 { font: 700 1.15rem/1.3 var(--body); }
.reg-camp h1, .reg-gentle h1 { font: 600 clamp(2.4rem, 5vw, 3.6rem)/1.02 var(--camp); }
.reg-camp h2, .reg-gentle h2 { font: 600 clamp(1.6rem, 3vw, 2.1rem)/1.15 var(--camp); }
.reg-camp h3, .reg-gentle h3 { font: 600 1.25rem/1.3 var(--camp); }
.reg-gentle h1, .reg-gentle h2, .reg-gentle h3 { font-weight: 500; }

/* Header: persistent and slim. At the top it sits on the page color; once you scroll it fades to
   indigo, tightens, and a gold line tracks how far down the page you are. */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); transition: background-color 350ms ease, border-color 350ms ease; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; transition: min-height 300ms ease, margin-bottom 300ms ease; }
.logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--head); transition: color 350ms ease; }
.logo svg, .logo img { width: 1.9rem; height: 1.9rem; flex: none; transition: transform 300ms ease; }
.logo .sun-mark { width: 3.75rem; height: 3.25rem; }  /* logo kit sun mark: the drawing is 48.6px tall inside a 12-unit margin, so ray tips never clip (Logo Standards §5) */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sign-wrap { display: flex; align-items: center; gap: 0.85rem; }
.sign-wrap .sun-mark { width: 3.75rem; height: 3.25rem; flex: none; }
.logo .word { font: 400 1.75rem/1 var(--display); letter-spacing: 0.04em; }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }
.nav a:not(.btn) { color: var(--text); text-decoration: none; font: 500 0.95rem/1 var(--body); transition: color 350ms ease; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.5em; text-decoration-color: var(--gold); }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: opacity 300ms ease; }
.site-header.scrolled { background: var(--hdr-solid); border-color: transparent; }
/* The bar slims by 0.9rem, and the same 0.9rem goes into a transparent margin below it, so the page never
   changes height. (A changing height made the browser shift the scroll and the header flicker.) */
.site-header { transition: background-color 350ms ease, border-color 350ms ease, margin-bottom 300ms ease; }
.site-header.scrolled { margin-bottom: 0.9rem; }
.site-header.scrolled .wrap { min-height: 3.6rem; }
.site-header.scrolled .logo, .site-header.scrolled .nav a:not(.btn) { color: var(--cream); }
.site-header.scrolled .logo svg, .site-header.scrolled .logo img { transform: scale(0.85); }
.site-header.scrolled .logo .sun-mark { transform: none; }  /* the kit sun stays at 48px, its minimum (Logo Standards §5) */
.site-header.scrolled .progress { opacity: 1; }
.site-header.scrolled .menu summary { color: var(--cream); border-color: rgba(254, 252, 247, 0.5); }
.menu { display: none; }
@media (max-width: 56rem) {
  .nav > ul { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; font: 500 0.95rem/1 var(--body); padding: 0.75rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; color: var(--text); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu ul { display: grid; gap: 0.2rem; position: absolute; right: 0; top: calc(100% + 0.6rem); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0.75rem 1.1rem; min-width: 13rem; list-style: none; margin: 0; z-index: 11; }
  .menu li a { display: block; padding: 0.55rem 0; color: var(--text) !important; }
}
@media (max-width: 26rem) { .logo .word { font-size: 1.45rem; } .logo svg { width: 1.6rem; height: 1.6rem; } .nav { gap: 0.6rem; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.85rem 1.6rem; border-radius: 999px; font: 500 1rem/1.1 var(--body); text-decoration: none; border: 1.5px solid transparent; transition: transform 160ms ease, background-color 160ms ease; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--ink); font-weight: 700; }
.btn-gold:hover { background: #FFC845; }
.btn-solid { background: var(--btn); color: var(--on-btn); font-weight: 700; }
.btn-line { border-color: currentColor; color: var(--head); }
.btn-cream { background: var(--cream); color: var(--indigo); font-weight: 700; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.ext::after { content: "\2197"; font-size: 0.85em; }
.nav .btn { min-height: 2.6rem; padding: 0.65rem 1.35rem; }

/* Photo slots: dashed until consented SmugMug images arrive */
.photo { margin: 0; position: relative; }
.photo .frame { width: 100%; aspect-ratio: 4 / 3; max-width: 100%; background: var(--photo-bg); border: 1.5px dashed var(--photo-line); border-radius: 14px; display: flex; align-items: flex-end; padding: 1rem 1.15rem; transition: background-color 400ms ease; }
.photo.tall .frame { aspect-ratio: auto; height: 100%; min-height: 22rem; border-radius: 20px; }
.photo.wide .frame { aspect-ratio: 21 / 9; }
.photo.fill { height: 100%; }
.photo.fill .frame { aspect-ratio: auto; height: 100%; min-height: 10rem; }
.photo .frame span { font: 500 0.82rem/1.45 var(--body); color: var(--photo-text); max-width: 24rem; }
/* Real photos (src/content/photos.json): the frame keeps its shape and radius; the photo fills it around its focal point */
.photo.has-img .frame { padding: 0; border: 0; overflow: hidden; }
.photo.has-img .frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo .play { position: absolute; top: 50%; left: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border-radius: 50%; background: var(--gold); display: grid; place-items: center; }
.photo .play svg { width: 1.4rem; height: 1.4rem; margin-left: 0.2rem; }

/* Campaign banner: always clay, every season (Paul, Oct 20: a seasonal banner color was hard to track; summer would have made it gold, which means Donate). Never on Camp Firefly pages. */
.banner { background: var(--clay); color: var(--cream); }
/* Set by the theme script before first paint once the campaign has started, so the banner never shows and then jumps away */
[data-campaign="past"] .banner { display: none; }
.banner .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 1.1rem; padding-block: 0.6rem; text-align: center; font-size: 0.92rem; }
.banner strong { font: 400 1.3rem/1 var(--display); letter-spacing: 0.04em; }
.banner .days { font-weight: 700; font-variant-numeric: tabular-nums; border: 1.5px solid currentColor; border-radius: 999px; padding: 0.15rem 0.7rem; }

/* Home hero */
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: stretch; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.home-hero > * { position: relative; z-index: 1; }
.hero-text { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; }
.greet { font: 600 2rem/1 var(--hand); color: var(--greet); }
.home-hero h1 { font-size: clamp(3.4rem, 8.4vw, 6.6rem); }
.home-hero .btn-row { margin-top: 0.5rem; }
@media (max-width: 54rem) { .home-hero { grid-template-columns: 1fr; } .photo.tall .frame { min-height: 16rem; } }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.stars circle { fill: var(--star); }
.stars.always circle { fill: #FBDA8D; opacity: 0.55; }
/* Home numbers band: night-set stars, one brush (src/scene/band-stars.json). The hero cluster sits in the empty
   fourth stat cell; small marks stay in the band's padding; phones get their own set. Static: nothing twinkles. */
.band-stars { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bstar { position: absolute; display: block; overflow: visible; }
.bstar .l { fill: #F7B517; }
.bstar .f { fill: #1F2160; }
.stat.stat-sky { position: relative; border: 0 !important; min-height: 9rem; pointer-events: none; }
.bstar.narrow { display: none; }
@media (max-width: 26rem) { .bstar.edge, .stat.stat-sky { display: none; } .bstar.narrow { display: block; } }

.fireflies { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fireflies i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--firefly-dot); box-shadow: 0 0 8px 2px var(--firefly-dot); animation: drift 5s ease-out 1 forwards; }
.fireflies i:nth-child(2) { animation-duration: 6s; }
.fireflies i:nth-child(3) { animation-duration: 4.5s; }
@keyframes drift { from { transform: translate(-6px, 8px); opacity: 0.2; } to { transform: translate(0, 0); opacity: 1; } }

/* Three doors: photo on top, a solid color block below (the social tile, small) */
.doors3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 52rem) { .doors3 { grid-template-columns: 1fr; } }
.door { display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; text-decoration: none; transition: transform 200ms ease; }
.door:hover { transform: translateY(-4px); }
.door .photo .frame { border-radius: 0; border: 0; aspect-ratio: 16 / 10; }
.door .blk { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: 0.5rem; align-content: start; }
.door .blk strong { font: 400 2.4rem/0.95 var(--display); letter-spacing: 0.02em; }
.door .blk span { font-size: 1rem; line-height: 1.5; }
.door .blk em { font-style: normal; font-weight: 700; margin-top: 0.4rem; }
.door .blk em::after { content: " \2192"; display: inline-block; transition: transform 200ms ease; }
.door:hover .blk em::after { transform: translateX(4px); }
.door.indigo .blk { background: var(--indigo); color: var(--cream); }
.door.clay .blk { background: var(--clay); color: var(--cream); }
.door.gold .blk { background: var(--gold); color: var(--ink); }

/* Program cards: name in a sub-brand color header with the program-type tag */
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 64rem) { .cards, .cards.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .cards, .cards.three { grid-template-columns: 1fr; } }
/* Home program row: all eight cards in one line; four, two or one in view, the rest by arrow, swipe or keyboard */
.cards.row-scroll { --n: 4; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--n) - 1) * 1.1rem) / var(--n)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 0.6rem; }
.cards.row-scroll > * { scroll-snap-align: start; }
.cards.row-scroll:focus-visible { outline: 3px solid var(--indigo); outline-offset: 4px; }
@media (max-width: 64rem) { .cards.row-scroll { --n: 2; } }
@media (max-width: 36rem) { .cards.row-scroll { --n: 1.15; } }
.row-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.row-nav { display: inline-flex; gap: 0.4rem; }
.row-nav[hidden] { display: none; }
.row-nav button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--indigo); background: transparent; color: var(--indigo); font: 700 1.1rem/1 var(--body, inherit); cursor: pointer; }
.row-nav button:disabled { opacity: 0.35; cursor: default; }
.row-nav button:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--text); transition: transform 200ms ease, border-color 200ms ease; }
a.card:hover { transform: translateY(-4px); border-color: var(--gold); }
/* Program card headers in thirds (Paul, Oct 21): the camp-type tag in the top third, the program name anchored in the bottom
   third, so names line up across a row; the middle stays open (Camp Firefly's lights fly there). */
.card .head { position: relative; padding: 1rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; min-height: 7.5rem; }
.card .head .name { margin-top: auto; }
.card .tag { font: 700 0.68rem/1.3 var(--body); letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.92; }
.card .name { font: 400 2.05rem/0.92 var(--display); letter-spacing: 0.02em; color: inherit; }
.card .photo .frame { border-radius: 0; border-width: 0 0 1.5px; aspect-ratio: 16 / 10; padding: 0.75rem 0.9rem; }
.card .photo .frame span { font-size: 0.75rem; }
.card .body { padding: 1rem 1.2rem 1.3rem; display: grid; gap: 0.45rem; align-content: start; flex: 1; }
.card .facts { color: var(--muted); font-size: 0.88rem; }
.card .go { margin-top: 0.3rem; font-weight: 500; color: var(--head); }
.card .go::after { content: " \2192"; display: inline-block; transition: transform 200ms ease; }
a.card:hover .go::after { transform: translateX(4px); }
/* Camp Firefly's card: three firefly lights (Camp Sketch, direction B, Oct 20): a butter lantern with a stitched
   flight path, one brush (src/icons/dc-firefly-light-0N, scripts/scene/firefly_marks.py). No glow: the butter is the light. */
.card .bugs { position: absolute; inset: 0; pointer-events: none; }
/* 404 roadrunner (Paul, Oct 21): runs in place for about four seconds, then stands; hover runs it again.
   Four leg frames swap with steps (src/icons/dc-roadrunner-run.svg, scripts/scene/roadrunner_run.py); the body bounces
   on the passing frames. Under 5 seconds, so no pause control is needed (WCAG 2.2.2). Reduced motion: frame 1, still. */
.rr { display: block; width: 7.5rem; height: 7.5rem; margin: 0 0 -0.5rem -0.6rem; color: #F7B517; overflow: visible; }
.rr .l { fill: currentColor; }
.rr .f { fill: var(--indigo); }
.rr .rr-f { opacity: 0; animation: rr-frame 0.36s step-end 11; }
.rr .rr-f1 { opacity: 1; }
.rr .rr-f2 { animation-delay: -0.27s; animation-iteration-count: 11.75; }
.rr .rr-f3 { animation-delay: -0.18s; animation-iteration-count: 11.5; }
.rr .rr-f4 { animation-delay: -0.09s; animation-iteration-count: 11.25; }
.rr .rr-body { animation: rr-bob 0.36s step-end 11; }
.rr:hover .rr-f, .rr:hover .rr-body { animation-iteration-count: infinite; }
@keyframes rr-frame { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes rr-bob { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: translateY(-3px); } }
.card .bugs .sk { position: absolute; display: block; color: #F7B517; }
.card .bugs .sk .lamp { fill: #FBDA8D; }
.card .bugs .fl1 { width: 22px; height: 22px; left: 46%; top: 35px; }
.card .bugs .fl2 { width: 18px; height: 18px; left: 22%; top: 47px; transform: scaleX(-1) rotate(-8deg); }
.card .bugs .fl3 { width: 16px; height: 16px; left: 68%; top: 55px; transform: rotate(10deg); }
.group + .group { margin-top: 3rem; }
.group > h2.kicker { margin-bottom: 1rem; font: 700 0.75rem/1.3 var(--body) !important; letter-spacing: 0.14em !important; }

/* Campers come back: a dashed trail between four camp patches */
.trail-wrap { position: relative; }
.trail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.trail-line { position: absolute; left: 12.5%; right: 12.5%; top: 2.1rem; height: 6.3rem; width: 75%; overflow: visible; z-index: 0; }  /* centred on the patches (5.25rem); each hop bends its own way */
.trail-line { color: var(--head); }
.trail-line path { fill: currentColor; }  /* a hand-drawn Camp Sketch running stitch (src/icons/dc-trail-02.svg) */
.trail-wrap.pre .trail-line { clip-path: inset(0 100% 0 0); }
.trail-wrap.go .trail-line { clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.4, 0, .2, 1) 150ms; }  /* draws in once, left to right, then rests */
.stop { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 0.7rem; }
.patch { width: 10.5rem; height: 10.5rem; border-radius: 50%; display: grid; grid-template-rows: 2.5rem 2.6rem 1rem; row-gap: 0.45rem; justify-items: center; align-content: center; position: relative; transition: transform 300ms cubic-bezier(.2, .9, .3, 1.3); }
.patch .ring { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.65; pointer-events: none; }  /* hand-drawn running stitch (src/icons/dc-ring-0N.svg) */
.patch .pico { grid-row: 1; width: 2.5rem; height: 2.5rem; align-self: end; }
.patch .age { grid-row: 2; align-self: center; font: 400 3.1rem/1 var(--display); font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
.patch .role { grid-row: 3; align-self: center; font: 600 0.95rem/1 var(--camp); }
.patch.solo .pico { grid-row: 1 / 3; width: 4rem; height: 4rem; align-self: center; }  /* volunteer: no age, a larger Medium heart in its place */
.stop:hover .patch { transform: rotate(-4deg) scale(1.05); }
.stop p { max-width: 17rem; color: var(--text); }
.trail-wrap.pre .patch { transform: scale(0.6) rotate(-12deg); opacity: 0.2; }
.trail-wrap.go .patch { transition: transform 600ms cubic-bezier(.2, .9, .3, 1.3), opacity 400ms ease; }
.trail-wrap.go .stop:nth-child(2) .patch { transition-delay: 250ms; }
.trail-wrap.go .stop:nth-child(3) .patch { transition-delay: 500ms; }
.trail-wrap.go .stop:nth-child(4) .patch { transition-delay: 750ms; }
@media (max-width: 62rem) and (min-width: 44.01rem) {
  .trail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .trail-line { display: none; }
}
@media (max-width: 44rem) {
  .trail { grid-template-columns: 1fr; gap: 2rem; }
  .trail-line { display: none; }
  .stop + .stop::before { content: ""; position: absolute; top: -2rem; left: calc(50% - 7px); width: 14px; height: 1.8rem; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 100%22 width=%2220%22 height=%22100%22%3E%3Cpath fill=%22%232E3192%22 d=%22M6.9 2.8 L5.8 3.4 L5.2 4.0 L4.8 4.7 L4.4 6.0 L4.8 8.1 L5.1 8.8 L5.6 9.5 L6.0 10.1 L6.2 8.3 L6.0 8.8 L5.7 9.5 L5.4 10.2 L5.0 11.2 L5.8 14.7 L6.2 15.3 L6.7 15.9 L7.3 16.5 L7.9 17.1 L7.4 15.6 L7.4 16.4 L7.5 17.2 L7.5 18.0 L7.6 19.4 L7.8 20.2 L8.0 21.0 L8.2 21.7 L8.5 22.4 L8.7 23.1 L9.0 23.8 L9.3 24.5 L10.0 25.2 L11.9 24.3 L12.1 23.5 L12.2 22.8 L12.3 22.0 L12.3 21.1 L12.3 20.4 L12.1 19.7 L11.9 18.9 L11.8 18.7 L11.8 18.0 L11.9 17.2 L11.9 16.5 L11.7 14.7 L11.1 14.0 L10.8 13.4 L10.4 12.7 L10.1 12.0 L10.2 12.2 L10.5 12.7 L11.0 12.1 L11.5 11.5 L11.9 11.0 L12.2 7.6 L12.1 6.9 L11.9 6.1 L11.6 5.4 L11.3 5.3 L11.1 6.1 L10.8 5.3 L10.4 4.4 L9.7 3.5 Z%22/%3E%3Cpath fill=%22%232E3192%22 d=%22M10.9 36.3 L10.1 37.1 L9.7 37.9 L9.3 38.6 L8.9 39.4 L8.6 40.3 L8.4 41.3 L8.3 42.1 L8.3 42.8 L8.4 43.6 L8.4 44.2 L8.3 44.4 L8.2 45.1 L8.0 45.9 L7.9 46.6 L7.7 47.4 L7.7 48.8 L7.6 49.5 L7.6 50.2 L7.6 51.0 L7.6 51.7 L7.5 51.9 L7.5 52.6 L7.4 53.4 L7.4 54.1 L7.4 54.8 L7.4 55.8 L7.5 56.5 L7.5 57.2 L7.6 58.0 L7.9 58.7 L8.3 59.6 L8.8 60.3 L9.2 61.1 L9.8 61.9 L10.4 62.6 L13.4 63.2 L14.6 62.5 L15.3 61.8 L15.9 61.0 L16.5 60.3 L17.0 59.6 L17.5 58.9 L17.7 58.1 L17.8 57.3 L17.8 56.5 L17.8 55.8 L17.8 55.2 L17.8 54.4 L17.9 53.6 L17.9 52.9 L17.9 52.0 L17.9 50.7 L17.8 49.9 L17.7 49.1 L17.6 48.3 L17.5 47.5 L17.5 47.6 L17.5 46.9 L17.5 46.1 L17.6 45.3 L17.6 44.5 L17.4 42.9 L17.2 42.1 L17.0 41.4 L16.7 40.7 L16.1 40.0 L15.6 39.6 L15.1 38.9 L14.5 38.2 L13.9 37.4 L13.3 36.7 Z%22/%3E%3Cpath fill=%22%232E3192%22 d=%22M10.0 74.3 L9.3 75.1 L9.0 75.9 L8.8 76.7 L8.7 77.5 L8.4 77.3 L8.1 78.0 L8.0 78.8 L7.8 79.5 L7.8 79.7 L7.5 80.3 L7.2 81.1 L7.0 81.8 L6.7 82.5 L6.3 84.4 L6.4 85.2 L6.5 86.0 L6.6 86.7 L6.7 87.3 L6.7 88.1 L6.6 88.8 L6.5 89.6 L6.3 90.4 L6.2 91.3 L6.0 92.0 L5.9 92.8 L5.9 93.6 L6.0 93.8 L6.0 94.6 L6.2 95.4 L6.4 96.2 L7.0 97.1 L9.1 97.0 L9.7 96.3 L10.2 95.7 L10.7 95.0 L11.2 94.0 L11.4 93.1 L11.5 92.4 L11.5 91.6 L11.5 90.9 L11.5 90.2 L11.4 89.5 L11.4 88.8 L11.4 88.0 L11.4 87.1 L11.3 86.4 L11.3 85.6 L11.3 84.9 L11.3 84.6 L11.6 84.1 L11.9 83.4 L12.2 82.8 L12.6 82.1 L13.1 81.0 L13.3 80.3 L13.6 79.5 L13.7 78.8 L13.8 77.5 L13.4 76.4 L13.1 75.7 L12.7 75.0 L12.1 74.3 Z%22/%3E%3C/svg%3E") center / contain no-repeat; }
  .stop:nth-child(odd)::before { transform: scaleX(-1); }  /* the bent stitch leans the other way on alternate hops */
}

/* Numbers band */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; z-index: 1; }
.stat { padding: 1.5rem 1.25rem; border-left: 1px solid rgba(254, 252, 247, 0.2); display: grid; gap: 0.4rem; align-content: start; }
.stat:first-child { border-left: 0; }
.stat.pre { opacity: 0; transform: translateY(10px); }
.stat.in { opacity: 1; transform: none; transition: opacity 600ms ease calc(var(--i, 0) * 90ms), transform 600ms ease calc(var(--i, 0) * 90ms); }
.stat .n { font: 400 clamp(3.2rem, 6vw, 4.6rem)/0.9 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.stat .n.tbc { color: var(--butter); border-bottom: 2px dashed rgba(251, 218, 141, 0.6); justify-self: start; }
.stat .l { color: var(--cream); font-size: 0.98rem; line-height: 1.45; }
.stat-foot { margin-top: 1.75rem; color: var(--butter); font-size: 0.9rem; position: relative; z-index: 1; }
/* The accountability link sits in a cream-outlined box: link blue on the indigo band was unreadable (Paul, Oct 20). Not gold: gold means Donate. */
.stat-foot a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.6rem 1.1rem; border: 1.5px solid rgba(254, 252, 247, 0.6); border-radius: 12px; background: var(--band); color: var(--cream); font-weight: 500; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease; }
.stat-foot a::after { content: "\2192"; }
.stat-foot a:hover, .stat-foot a:focus-visible { background: color-mix(in srgb, var(--band) 86%, var(--cream)); border-color: var(--cream); }
/* Any plain link on a dark band reads cream, never link blue */
.band-ink a:not(.btn):not(.card) { color: var(--cream); text-decoration-color: var(--butter); }
@media (max-width: 56rem) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { border-left: 0; } .stat { border-top: 1px solid rgba(254, 252, 247, 0.2); } .stat:nth-child(-n+2) { border-top: 0; } }
@media (max-width: 26rem) { .stats { grid-template-columns: 1fr; } .stat { border-left: 0; border-top: 1px solid rgba(254, 252, 247, 0.2); } .stat:first-child { border-top: 0; } }

/* This season at camp */
.season { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--season); color: var(--on-season); font: 700 0.72rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.45rem 0.8rem; border-radius: 999px; }
/* Season label as a brushy highlighter swipe (src/icons/dc-swipe-01.svg) in the seasonal accent */
.swipe { position: relative; display: inline-block; align-self: start; justify-self: start; padding: 0.6rem 1.2rem 0.55rem; color: var(--on-season); }
.swipe-bg { position: absolute; inset: 0 -0.35rem; width: calc(100% + 0.7rem); height: 100%; color: var(--season); transform: rotate(-1.2deg); }
.swipe-t { position: relative; font: 700 0.78rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; }
.dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.dates li { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: 1.1rem; padding: 0.85rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); align-items: center; }

.dates .when b { font: 400 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.dates .when span { font: 700 0.66rem/1.5 var(--body); letter-spacing: 0.14em; text-transform: uppercase; }
.dates strong { color: var(--head); display: block; }
.dates em { font-style: normal; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 48rem) { .season { grid-template-columns: 1fr; } }

/* Why we do it: color blocks */
.why { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 1rem; }
.why .lead { grid-row: span 2; background: var(--indigo); color: var(--cream); border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1.1rem; align-content: start; }
.why .lead h2 { color: var(--cream); }
.why .lead .lede { color: var(--butter); }
.why .lead .photo .frame { background: #34379A; border-color: rgba(247, 181, 23, 0.6); aspect-ratio: 16 / 9; }
.why .lead .photo .frame span { color: var(--butter); }
.vtile { border-radius: 20px; padding: 1.4rem 1.5rem; display: grid; gap: 0.4rem; align-content: end; min-height: 11rem; }
.vtile strong { font: 400 2.3rem/0.95 var(--display); letter-spacing: 0.02em; }
.v1 { background: var(--clay); color: var(--cream); }
.v2 { background: var(--river); color: var(--cream); }
.v3 { background: var(--gold); color: var(--ink); }
.v4 { background: var(--butter); color: var(--indigo); }
@media (max-width: 60rem) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .why .lead { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 30rem) { .why { grid-template-columns: 1fr; } .vtile { min-height: 0; } }

/* Camp in pictures */
.scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.scope-tile { position: relative; display: block; border-radius: 20px; overflow: hidden; color: inherit; text-decoration: none; }
.scope-tile.s-main { grid-column: 1 / -1; }
.scope-tile .photo .frame { aspect-ratio: 1 / 1; border-radius: 0; }
.scope-tile.s-main .photo .frame { aspect-ratio: 4 / 3; }
.photo-strip { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.photo-strip .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 54rem) { .photo-strip .strip { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(9rem, 13rem); gap: 0.75rem; }
.mosaic .big { grid-column: span 2; grid-row: span 2; }
.mosaic .tall2 { grid-row: span 2; }
@media (max-width: 48rem) { .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 10rem; } .mosaic .tall2 { grid-row: span 1; } }

/* Horizontal timeline */
/* Camp since 1984: a winding river with a canoe slider; archery-arrow buttons (build.mjs TIMELINE) */
.tl-shell { position: relative; }
.tl-track { overflow-x: auto; scroll-snap-type: x proximity; padding-top: 2.25rem; padding-bottom: 1.25rem; }  /* top room for the canoe's paddle */
/* Firefox only reads these two; Chrome and Safari use the rounded ::-webkit-scrollbar styles below instead */
@supports not selector(::-webkit-scrollbar) { .tl-track { scrollbar-width: thin; scrollbar-color: var(--river) #F4E3B5; } }
.tl-track::-webkit-scrollbar { height: 6px; }
.tl-track::-webkit-scrollbar-button { display: none; }
.tl-track::-webkit-scrollbar-track { background: #F4E3B5; border-radius: 999px; margin-inline: 2px; }
.tl-track::-webkit-scrollbar-thumb { background: var(--river); border-radius: 999px; }
.tl-track::-webkit-scrollbar-thumb:hover { background: var(--indigo); }
.tl-lane { position: relative; width: calc(var(--n) * 15rem); }
.tl-river { position: absolute; left: 0; top: 0; width: 100%; height: 92px; pointer-events: none; }
.tl-river .water { fill: none; stroke: #BFE3F1; stroke-width: 22; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 15rem); }
.tl-item { scroll-snap-align: start; position: relative; padding: 104px 1.5rem 0 0; display: grid; gap: 0.5rem; align-content: start; }
.tl-item .yr { font: 400 2.6rem/0.9 var(--display); color: var(--head); font-variant-numeric: tabular-nums; }
.tl-item p { max-width: 13.5rem; }
.tl-canoe { position: absolute; left: 0; top: 0; width: 116px; height: 85px; z-index: 2; cursor: grab; touch-action: none; will-change: transform; }
.tl-canoe:active { cursor: grabbing; }
.tl-canoe svg { width: 100%; height: 100%; overflow: visible; display: block; translate: 0 6px; }  /* the lighter hull is shallower, so it sits a little lower to stay on the water */
/* Camp Sketch canoe, Day colorway: gold pen line over an indigo hull; the paddle is its own drawing so it can row */
.tl-canoe .hull { color: var(--indigo); }
.tl-canoe .line { color: var(--gold); }
.tl-canoe .oar { color: var(--indigo); transform-box: view-box; transform-origin: 64px 32px; }
.tl-canoe.rowing .oar { animation: row 0.75s ease-in-out infinite; }
@keyframes row { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(16deg); } }
.tl-nav { display: flex; gap: 0.5rem; }
.tl-nav button { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1.5px solid var(--head); background: transparent; color: var(--head); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background-color 200ms ease, color 200ms ease; }
.tl-nav button svg { width: 2.5rem; height: 1rem; overflow: visible; transition: transform 200ms ease; }
.tl-nav button[data-tl-step="-1"] svg { transform: scaleX(-1); }
.tl-nav button[data-tl-step="1"]:hover svg { transform: translateX(3px); }
.tl-nav button[data-tl-step="-1"]:hover svg { transform: scaleX(-1) translateX(3px); }
.tl-nav button:hover { background: var(--head); color: var(--bg); }

/* Send a kid to camp: an inlaid box (gold hairline inset, like the evening invitation) */
.inlay { background: var(--indigo); color: var(--cream); border-radius: 24px; padding: 14px; }
.inlay-in { border: 1px solid rgba(247, 181, 23, 0.75); border-radius: 16px; padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.inlay h2 { color: var(--cream); }
.inlay .lede { color: var(--butter); }
.inlay .photo .frame { background: #34379A; border-color: rgba(247, 181, 23, 0.6); }
.inlay .photo .frame span { color: var(--butter); }
.inlay a:not(.btn) { color: var(--cream); }
.inlay .more { font-size: 0.92rem; color: var(--butter); }
@media (max-width: 48rem) { .inlay-in { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 48rem) { .split { grid-template-columns: 1fr; } }
.seal { font-size: 0.92rem; color: var(--muted); }

/* Program hero: the social tile */
.tile-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "photo block"; padding-block: clamp(1.5rem, 4vw, 2.75rem) 0; }
.tile-hero .photo { grid-area: photo; }
.tile-hero .photo .frame { height: 100%; aspect-ratio: auto; min-height: 24rem; border-radius: 20px 0 0 20px; }
.tile-block { grid-area: block; border-radius: 0 20px 20px 0; padding: clamp(1.5rem, 4vw, 2.75rem); display: flex; flex-direction: column; gap: 1.1rem; justify-content: center; }
.tile-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pill { display: inline-flex; font: 700 0.72rem/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5rem 0.85rem; border-radius: 999px; }
.mark-slot { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1.5px dashed currentColor; display: grid; place-items: center; text-align: center; font: 700 0.5rem/1.15 var(--body); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; flex: none; }
.tile-block h1 { color: inherit; }
.tile-line { font: 500 clamp(1.25rem, 2.4vw, 1.6rem)/1.25 var(--camp); }
.tile-block .status { font-weight: 500; display: inline-flex; align-items: center; gap: 0.55rem; }
.tile-block .status::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }
/* Hero blocks take the program type color: .tone-morning, .tone-river, .tone-clay, .tone-night (generated from types.json) */
.tile-block .pill { background: transparent; border: 1.5px solid currentColor; color: inherit; display: inline-flex; align-items: center; gap: 0.45rem; }
.type-ico { display: inline-flex; flex: none; }
.type-ico svg { width: 1.5em; height: 1.5em; margin-block: -0.2em; }
/* Program type mark on cards: a Camp Sketch drawing about one headline line tall, top right of the color block */
.card .type-mark { position: absolute; top: 0.7rem; right: 0.85rem; width: 2.6rem; height: 2.6rem; }
.card .type-mark svg { width: 100%; height: 100%; display: block; }
.card .head:has(.type-mark) .tag { padding-right: 3rem; }
.card .head .tag, .gl-top, .for .prog { display: inline-flex; align-items: center; gap: 0.4rem; }
.btn-tile { font-weight: 700; }
.tile-block .btn-line { color: inherit; }
/* Sign-up windows (registration, applications): one state shows at a time, chosen by date */
.tile-block [data-window], .tile-block [data-state] { display: flex; flex-direction: column; gap: 1.1rem; }
@media (max-width: 54rem) {
  .tile-hero { grid-template-columns: 1fr; grid-template-areas: "block" "photo"; }
  .tile-block { border-radius: 20px 20px 0 0; }
  .tile-hero .photo .frame { min-height: 13rem; border-radius: 0 0 20px 20px; }
}
.facts-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); margin: 1.25rem 0 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.facts-strip div { padding: 1rem 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-right: -1px; margin-bottom: -1px; }
.facts-strip dt { font: 700 0.7rem/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.facts-strip dd { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.45; }
.facts-strip .free dd { font: 600 1.35rem/1.2 var(--camp); color: var(--head); }
.body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 54rem) { .body-grid { grid-template-columns: 1fr; } }
.prose { display: grid; gap: 1.75rem; max-width: 42rem; }
.prose > p:first-child { font-size: 1.2rem; line-height: 1.55; }
.aside { display: grid; gap: 0.9rem; padding: 1.4rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; position: sticky; top: 5rem; }
.aside h3 { font: 700 0.72rem/1.3 var(--body) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.aside p { font-size: 0.98rem; }
.plain-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1.05rem 0; font-weight: 500; color: var(--head); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 600 1.3rem/1 var(--camp); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding-bottom: 1.1rem; max-width: 40rem; }
.doors { display: grid; gap: 0.9rem; max-width: 28rem; }
.doors .btn { min-height: 4rem; font-size: 1.15rem; justify-content: space-between; padding-inline: 1.6rem; }

/* Proof notes: rendered only in the proof build */
.proof-note { background: var(--note); border-left: 4px solid var(--note-line); color: var(--note-text); padding: 0.85rem 1rem; border-radius: 4px; font-size: 0.9rem; line-height: 1.5; position: relative; z-index: 1; }
.proof-note strong { display: block; font: 700 0.72rem/1.4 var(--body); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.25rem; }
.proof-note ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.note-gap { margin-top: 1.5rem; }
.proof-bar { background: var(--note); color: var(--note-text); border-bottom: 1px solid var(--note-line); font-size: 0.85rem; }
.proof-bar .wrap { padding-block: 0.5rem; text-align: center; }

/* Hill Country scene into the footer: plateau mesas, juniper hills with limestone ledges, a cypress-lined
   river under a bluff, and a grassland foreground (live oak mottes, prickly pear, sotol, bluestem, wildflowers) */
/* Footer scene layers (build.mjs RIDGE): the page script lifts them apart into the section above and closes
   them up as the page ends; night visitors see the sunset turn to night (sky, land and footer colors, stars) */
main { position: relative; z-index: 1; }
.ridge { position: relative; z-index: 0; width: 100%; height: clamp(9rem, 19vw, 17rem); margin-top: clamp(2rem, 5vw, 4rem); margin-bottom: -1px; overflow-x: clip; overflow-y: visible; pointer-events: none; }
.ridge .rl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; }
.ridge .b0 { fill: var(--rb0); }
.ridge .b0x { fill: var(--rb0); display: none; }
/* A section that joins the night sky (home "Send a kid to camp"): its background is the top sky color, cream
   by day and the night sky after dark, with stars; the footer scene rises over it and the box stays on top */
.night-sky { position: relative; background: var(--rb0); }
.night-sky > .wrap { position: relative; z-index: 1; }
.sky-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--star-op); }
.sky-stars circle { fill: #FBDA8D; }
.sky-stars circle.mw { opacity: 0.4; }
body:has([data-night-sky]) main { z-index: auto; }
body:has([data-night-sky]) .ridge { margin-top: 0; }
body:has([data-night-sky]) .ridge .b0x { display: inline; }
.ridge .b1 { fill: var(--rb1); }
.ridge .b2 { fill: var(--rb2); }
.ridge .b3 { fill: var(--rb3); }
.ridge .night { opacity: var(--star-op); }
.ridge .sunl { opacity: var(--sun-op); }
.ridge .far { fill: var(--ridge-far); }
.ridge .mid { fill: var(--ridge-mid); }
.ridge .mid-sh { fill: var(--ridge-mid-shade); }
.ridge .mid-lt { fill: var(--ridge-mid-lit); }
.ridge .jun { fill: var(--ridge-jun); }
.ridge .jun-sh { fill: var(--ridge-jun-shade); }
.ridge .jun-lt { fill: var(--ridge-jun-lit); }
.ridge .halo { opacity: var(--halo-op); }
/* the moon's glow lets the stars behind it through (Paul, Oct 10): a little transparent, and screened over the
   stars so their light comes up through it; the two rings blend as one group */
.ridge .mglow { opacity: calc(var(--glow-op) * 0.82); mix-blend-mode: screen; }
.ridge .mglow .g1 { fill: #2A2D77; }
.ridge .mglow .g2 { fill: #303389; }
.ridge .si { fill: var(--star); }
.ridge .sc { fill: var(--cream); }
.ridge .river { fill: var(--ridge-river); }
.ridge .river-sh { fill: var(--ridge-river-shade); }
.ridge .river-lt { fill: var(--ridge-river-lit); }
.ridge .river-wm { fill: var(--ridge-river-warm); }
.ridge .glint { fill: none; stroke: var(--glint); stroke-width: 1.4; stroke-linecap: round; opacity: 0.8; }
.ridge .near { fill: var(--ridge); }
.ridge .near-sh { fill: var(--ridge-shade); }
.ridge .near-lt { fill: var(--ridge-lit); }
.ridge .bloom { fill: var(--bloom); opacity: var(--bloom-op); }
.ridge .fl { fill: var(--fl-a); opacity: var(--fl-op); }
.ridge .fl2 { fill: var(--fl-b); }
.ridge .pf { fill: var(--pear-flower); opacity: var(--fl-op); }
.ridge .pt { fill: var(--pear-fruit); opacity: calc(var(--fl-op) * var(--pear-fruit-op)); }
.ridge .stalk { fill: var(--ridge); display: var(--sotol-stalk); }
.ridge .bloom { display: var(--sotol-bloom); }
.ridge circle.s { fill: var(--star); }
.ridge circle.mw { opacity: 0.4; }
.ridge .sun { fill: #FFF7DF; }
.site-footer { position: relative; z-index: 1; background: var(--ridge); color: var(--cream); }
.site-footer a { color: var(--cream); }
.site-footer .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: 2rem 2.5rem; }
.site-footer h2 { font: 700 0.72rem/1.4 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--butter); margin-bottom: 0.85rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.95rem; }
@media (max-width: 52rem) { .site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-bar { border-top: 1px solid rgba(247, 181, 23, 0.5); }
.footer-bar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; min-height: 5rem; padding-block: 1rem; }
.footer-bar .sign { font: 400 1.65rem/1 var(--display); letter-spacing: 0.05em; color: var(--cream); }
.footer-bar .fine, .site-footer .fine { color: var(--butter); font-size: 0.85rem; }
.mode { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.mode-note { font-size: 0.82rem; color: var(--butter); }
.theme-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(254, 252, 247, 0.14); }
.theme-switch button { min-height: 44px; padding: 0 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--cream); font: 500 0.88rem/1 var(--body); cursor: pointer; }
.theme-switch button[aria-pressed="true"] { background: var(--gold); color: var(--ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .trail-wrap.pre .patch { transform: none; opacity: 1; }
  .trail-wrap.pre .trail-line { clip-path: none; }
  .fireflies i { opacity: 1; }
  .stat.pre { opacity: 1; transform: none; }
}

/* Dates: session lists, 2027 at a glance, the camp calendar */
.dates .when, .sessions .when, .cal-row .when { text-align: center; display: grid; line-height: 1; padding: 0.6rem 0; border-radius: 10px; min-width: 4.25rem; }
.sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sessions li, .cal-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.75rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.sessions .when b, .cal-row .when b { font: 400 1.9rem/1 var(--display); font-variant-numeric: tabular-nums; }
.sessions .when span, .cal-row .when span { font: 700 0.66rem/1.5 var(--body); letter-spacing: 0.14em; text-transform: uppercase; }
.sessions strong, .cal-row strong { display: block; color: var(--head); }
.sessions em, .cal-row em { font-style: normal; color: var(--muted); font-size: 0.95rem; }
.addcal { font-size: 0.85rem; font-weight: 500; white-space: nowrap; }
.addcal summary { cursor: pointer; color: var(--link, inherit); text-decoration: underline; text-underline-offset: 0.15em; padding: 0.35rem 0; }
.addcal ul { list-style: none; margin: 0.15rem 0 0; padding: 0; display: grid; gap: 0.1rem; }
.addcal li a { display: inline-block; padding: 0.35rem 0; }
.addcal.subscribe { font-size: 0.95rem; }
@media (max-width: 34rem) { .sessions li, .cal-row { grid-template-columns: 4.25rem minmax(0, 1fr); } .addcal { grid-column: 2; } }
.tbc-tag { display: inline-block; margin-left: 0.4rem; font: 700 0.65rem/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.5rem; border-radius: 999px; border: 1.5px dashed var(--note-line); color: var(--note-text); background: var(--note); vertical-align: middle; }
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; }
.gl { display: grid; align-content: start; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform 200ms ease; }
.gl:hover { transform: translateY(-3px); }
.gl-top { padding: 0.55rem 0.85rem; font: 700 0.7rem/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.gl-date { padding: 0.75rem 0.85rem 0.15rem; font: 400 1.6rem/1 var(--display); color: var(--head); letter-spacing: 0.02em; }
.gl-where { padding: 0 0.85rem 0.85rem; font-size: 0.85rem; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.filters button { min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--text); font: 500 0.92rem/1 var(--body); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--head); color: var(--bg); border-color: var(--head); }
.cal-month { margin-top: 2.25rem; }
.cal-h { font: 400 2rem/1 var(--display) !important; letter-spacing: 0.03em; margin-bottom: 0.9rem !important; padding-bottom: 0.5rem; border-bottom: 2px solid var(--line); }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.for { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.for span { font: 700 0.62rem/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.for .prog { border: 0; }
.for .prog .type-ico { padding: 0; border: 0; border-radius: 0; color: inherit; font-size: inherit; }
.for .prog .type-ico svg, .gl-top .type-ico svg { width: 1.35rem; height: 1.35rem; margin-block: -0.3rem; }
.cal-empty { margin-top: 2rem; }

/* Programs page: groups as tinted trays, side by side on desktop */
.trays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.75rem; }
.tray { grid-column: span var(--span, 1); background: var(--bg-warm); border-radius: 22px; padding: 1.1rem; display: grid; grid-template-rows: auto 1fr; gap: 0.9rem; position: relative; }
.tray-h { font: 700 0.75rem/1.3 var(--body) !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--head) !important; padding: 0.25rem 0.35rem 0; display: flex; align-items: center; gap: 0.55rem; }
.tray-h::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--gold); flex: none; }
.tray-cards { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 64.01rem) { .tray-h { min-height: 2.5rem; align-items: flex-start; } .tray-h::before { margin-top: 0.2rem; } }
.tray-cards .card { height: 100%; }
.tray.journey + .tray.journey::before { content: "\2192"; position: absolute; left: -1.05rem; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; font: 700 0.9rem/1 var(--body); z-index: 2; box-shadow: 0 0 0 4px var(--bg); }
.card.help { border: 1.5px dashed var(--head); background: transparent; justify-content: center; }
.card.help .body { gap: 0.9rem; align-content: center; padding: 1.5rem; }
.help-h { font: 400 2rem/0.95 var(--display) !important; letter-spacing: 0.02em; color: var(--head); }
@media (max-width: 64rem) {
  .trays { grid-template-columns: 1fr; }
  .tray { grid-column: auto; }
  .tray-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .tray.journey + .tray.journey::before { content: "\2193"; left: 50%; top: -1.05rem; transform: translateX(-50%); }
}

.season-mode .theme-switch { flex-wrap: wrap; border-radius: 22px; }
.footer-bar .wrap > .mode { margin-left: auto; }
@media (max-width: 52rem) { .footer-bar .wrap > .mode { margin-left: 0; } }

/* Home hero: a morning at camp (build.mjs CAMP_HERO). Sky bands, mesas, hills with the hilltop overnight area,
   the cabin terrace and the lake ground; nearest is darkest, and the ground resolves into the indigo band that
   holds the three doors. Each layer lags the one in front of it on scroll (data-depth); still for reduced motion. */
:root {
  --hero-top: #FEFCF7; --hero-b1: #FEF6E6; --hero-b2: #FDEBC6; --hero-b3: #FBD892; --sunrise: #F7B517;
  --cl-far: #C9CAEA; --cl-hill: #9A9DD6; --cl-ter: #6266BC; --cl-gnd: #2E3192;
  --cl-lake: #A9ACDB; --cl-glint: #FEFCF7; --cl-glint2: #F8C34F; --cl-win: #9A9DD6; --cl-ring: #9A9DD6; --cl-hold: #9A9DD6; --cl-trail: #C9CAEA;
  --cl-flame: transparent; --cl-smoke: #FEF6E4; --cl-jun: #8F92CF;
  --cl-hill-lit: #A9ACDB; --cl-hill-shade: #8F92CF; --cl-jun-lit: #9A9DD6; --cl-jun-shade: #6E72C0;
  --cl-ter-lit: #6E72C0; --cl-ter-shade: #5B5FB4; --cl-gnd-lit: #3A3D9C; --cl-gnd-shade: #2A2D77; --cl-lake-shade: #9A9DD6;
}
.camp-hero { background: var(--hero-top); transition: background-color 400ms ease; }
.camp-top { position: relative; overflow: hidden; }
.camp-top .home-hero { z-index: 2; padding-bottom: clamp(1rem, 3vw, 2rem); }
.camp-land { position: relative; z-index: 1; height: clamp(11rem, 27vw, 27rem); margin-top: calc(-1 * clamp(2rem, 9vw, 9rem)); overflow-x: clip; overflow-y: visible; pointer-events: none; }
.camp-land::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--cl-gnd); }
.camp-land .cl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: visible; will-change: transform; }
.camp-land path, .camp-land rect, .camp-land circle, .camp-land ellipse { transition: fill 400ms ease, stroke 400ms ease; }
.cl.sky .b1 { fill: var(--hero-b1); }
.cl.sky .b2 { fill: var(--hero-b2); }
.cl.sky .b3 { fill: var(--hero-b3); }
.camp-land .sunrise { fill: var(--sunrise); }
body:has(.camp-hero) .site-header:not(.scrolled) { background: var(--hero-top); border-bottom-color: transparent; }
.cl.far { fill: var(--cl-far); color: var(--cl-far); }
.cl.far .strata { fill: none; stroke: var(--cl-hill); stroke-width: 1.4; stroke-dasharray: 22 10 12 16; stroke-linecap: round; opacity: 0.45; }
.cl.hill { fill: var(--cl-hill); color: var(--cl-hill); }
.cl.hill .ledge { fill: none; stroke: var(--cl-far); stroke-width: 1.6; stroke-dasharray: 26 12 14 18; stroke-linecap: round; opacity: 0.55; }
.cl.hill .sh { fill: var(--cl-hill-shade); }
.cl.hill .lt { fill: var(--cl-hill-lit); }
.cl.hill .jb { fill: var(--cl-jun); }
.cl.hill .jsh { fill: var(--cl-jun-shade); }
.cl.hill .jlt { fill: var(--cl-jun-lit); }
.cl.ter .sh { fill: var(--cl-ter-shade); }
.cl.ter .lt { fill: var(--cl-ter-lit); }
.cl.gnd .sh { fill: var(--cl-gnd-shade); }
.cl.gnd .lt { fill: var(--cl-gnd-lit); }
.camp-land .lake-sh { fill: var(--cl-lake-shade); }
.camp-land .lake-lt { fill: var(--cl-glint); }
.camp-land .bull { fill: var(--butter); }
.cl.hill .trail { fill: none; stroke: var(--cl-trail); stroke-width: 1.8; stroke-dasharray: 3 6; stroke-linecap: round; opacity: 0.7; }
.cl.ter { fill: var(--cl-ter); color: var(--cl-ter); }
.cl.gnd { fill: var(--cl-gnd); color: var(--cl-gnd); }
.camp-land .st { fill: none; stroke: currentColor; stroke-linecap: round; }
.camp-land .win { fill: var(--cl-win); }
.camp-land .flame { fill: var(--cl-flame); }
.camp-land .smoke { fill: none; stroke: var(--cl-smoke); stroke-linecap: round; opacity: 0.8; }
.camp-land .ring { fill: none; stroke: var(--cl-ring); }
.camp-land .ring.dot { fill: var(--cl-ring); stroke: none; }
.camp-land .hold { fill: var(--cl-hold); }
.camp-land .lake { fill: var(--cl-lake); }
.camp-land .glint { fill: none; stroke: var(--cl-glint); stroke-width: 1.8; stroke-linecap: round; opacity: 0.85; }
.camp-land .glint2 { stroke: var(--cl-glint2); opacity: 0.9; }
.camp-land .fl { fill: var(--fl-a); }
.camp-land .fl2 { fill: var(--fl-b); }
.camp-land .pf { fill: var(--pear-flower); }
.camp-land .pt { fill: var(--pear-fruit); opacity: var(--pear-fruit-op); }
.camp-land .stalk { display: var(--sotol-stalk); }
.camp-land .bloom { display: var(--sotol-bloom); fill: #FEFCF7; }
.camp-ground { background: var(--cl-gnd); padding-block: clamp(0.5rem, 2vw, 1.25rem) clamp(2.5rem, 6vw, 4rem); margin-top: -2px; position: relative; z-index: 1; transition: background-color 400ms ease; }
.camp-ground .door.indigo .blk { background: var(--cream); color: var(--indigo); }
.camp-ground .door .photo .frame { border-bottom: 0; }
@media (max-width: 54rem) { .camp-land { margin-top: 0; } }
@media (max-width: 40rem) {
  .camp-land { height: 13rem; }
  .camp-land .cl { width: 200%; left: -39%; }  /* phone: frame the hilltop, cabins and lake */
  .camp-ground .door .photo .frame { aspect-ratio: 16 / 7; }
}

/* ---------- About hub (Oct 17): timeline hero, chapter nav, story, founder, people, trust ---------- */
.about-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.about-hero .sec-head { margin-bottom: 1.5rem; }
.chapters { margin-top: 1.5rem; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: sticky; top: 3.4rem; z-index: 5; }
.chapters ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem 1.75rem; overflow-x: auto; scrollbar-width: none; }
.chapters ul::-webkit-scrollbar { display: none; }
.chapters a { display: inline-block; padding: 0.8rem 0; font: 700 0.78rem/1.3 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--head); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.chapters a:hover, .chapters a[aria-current="true"] { border-bottom-color: var(--gold); }
.chapter { scroll-margin-top: 7rem; }
.pull { margin: 0.5rem 0; padding: 0 0 0 1.25rem; border-left: 4px solid var(--gold); }
.pull p { font: 500 clamp(1.6rem, 3vw, 2.2rem)/1.2 var(--hand); color: var(--head); max-width: 24ch; }
.founder-sec h3 { font: 400 clamp(1.9rem, 3.5vw, 2.6rem)/0.95 var(--display) !important; letter-spacing: 0.01em; color: var(--head); }
.founder-sec { padding-top: 0.5rem; }
.memorial { padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.98rem; }
.founder-side { display: grid; gap: 1rem; align-content: start; }
.founder-side .photo .frame { aspect-ratio: 4 / 3; }
.video-slot .photo .frame { aspect-ratio: 16 / 9; }
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.5rem; }
.values .vtile { min-height: 8rem; padding: 1.1rem 1.2rem; }
.values .vtile strong { font-size: 1.9rem; }
@media (max-width: 30rem) { .values { grid-template-columns: 1fr; } }
.venues { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; counter-reset: v; }
.venues li { display: grid; gap: 0.1rem; padding-left: 1.6rem; position: relative; font-size: 0.95rem; }
.venues li::before { counter-increment: v; content: counter(v); position: absolute; left: 0; top: 0.1rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--gold); color: var(--indigo); font: 700 0.7rem/1.15rem var(--body); text-align: center; }
.venues strong { color: var(--head); }
.venues span { color: var(--muted); }

/* People: officers in a row of three, directors four-up (two-up on a phone). A card opens in place and
   stretches across the row so the bio reads beside the headshot. No carousel: everything is visible,
   reachable from the keyboard, and nothing moves on its own. */
.people-h { margin: 2rem 0 1rem; }
.people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.people.officers, .people.staff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.people:not(.officers):not(.staff) { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* 6 directors = two even rows under the 3 officers (Oct 21, 2026) */
@media (max-width: 64rem) { .people:not(.officers):not(.staff) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .people.officers, .people.staff { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .people, .people:not(.officers):not(.staff), .people.officers, .people.staff { grid-template-columns: repeat(2, minmax(0, 1fr)); } .person summary { padding: 0.75rem; } .person .who strong { font-size: 1.3rem; } .person .who small { font-size: 0.8rem; } }
@media (max-width: 36rem) { .people.staff { grid-template-columns: 1fr; } }
.person { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.person summary { list-style: none; cursor: pointer; display: grid; gap: 0.75rem; padding: 0.9rem; }
.person summary::-webkit-details-marker { display: none; }
.person .hs, .person .hs img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--photo-bg); }
.person .headshot .photo .frame { aspect-ratio: 1; border-radius: 10px; padding: 0.6rem 0.7rem; min-height: 0; }
.person .headshot .photo .frame span { font-size: 0.72rem; }
.person .who { display: grid; gap: 0.15rem; }
.person .who strong { font: 400 1.5rem/1 var(--display); letter-spacing: 0.02em; color: var(--head); }
.person .who em { font-style: normal; font: 700 0.7rem/1.4 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.person .who small { font-size: 0.85rem; color: var(--muted); line-height: 1.35; }
.person .read { font-weight: 500; color: var(--head); font-size: 0.9rem; }
.person .read:not(:empty)::after { content: "\00a0\2192"; display: inline-block; transition: transform 200ms ease; }
.person:hover { border-color: var(--gold); }
.person:hover .read::after { transform: translateX(4px); }
.person[open] { grid-column: 1 / -1; display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: start; }
.person[open] summary { grid-row: 1; }
.person[open] .read:not(:empty) { font-size: 0; }
.person[open] .read:not(:empty)::before { content: attr(data-close); font-size: 0.9rem; }
.person[open] .read:not(:empty)::after { content: ""; }
.person .bio { display: grid; gap: 1rem; padding: 1.2rem 1.4rem 1.4rem 0; max-width: 42rem; font-size: 0.98rem; }
.person .bio p { line-height: 1.6; }
.people.staff .person { display: grid; grid-template-columns: 1fr; align-content: start; }
.people.staff .person[open] { grid-column: auto; grid-template-columns: 1fr; }
.people.staff .person .bio { padding: 0 1rem 1.2rem; }
@media (max-width: 40rem) { .person[open] { grid-template-columns: 1fr; } .person[open] summary { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: start; column-gap: 0.9rem; } .person[open] .headshot { grid-row: 1 / 3; } .person[open] .read { grid-column: 2; } .person .bio { padding: 0 1rem 1.2rem; } }

/* Trust: the seals at full size, one line each */
.seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 52rem) { .seals { grid-template-columns: 1fr; } }
.seal-tile { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; color: var(--text); text-decoration: none; }
a.seal-tile:hover { border-color: var(--gold); }
.seal-img { display: grid; place-items: center; aspect-ratio: 1; }
.seal-img img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.seal-slot { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1.5px dashed var(--photo-line); border-radius: 50%; background: var(--photo-bg); font: 700 0.62rem/1.25 var(--body); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; padding: 0.75rem; color: var(--photo-text); }
.seal-text { display: grid; gap: 0.3rem; }
.seal-text strong { font: 700 0.95rem/1.3 var(--body); color: var(--head); }
.seal-text span { font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
.next-doors { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

/* Home: four-tile mosaic and the origin line with a still canoe */
.mosaic.four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mosaic.four .tall2 { grid-row: span 2; }
@media (max-width: 48rem) { .mosaic.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mosaic.four .tall2 { grid-row: span 2; } }
.origin .measure-wide { max-width: 44rem; }
.origin .lede { max-width: 40rem; }

/* Workplace giving: employer search, three steps, employer box */
.dd-wrap { margin-top: 2rem; max-width: 46rem; display: grid; gap: 0.9rem; }
/* Workplace giving: headline beside the employer search on wide screens; "how it works" in an indigo box */
@media (min-width: 60rem) { .wp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; } .wp-top .dd-wrap { margin-top: 0; max-width: none; } }
.wp-top .dd-wrap { padding: 1.5rem 1.6rem; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.how-box { background: var(--indigo); color: var(--cream); border-radius: 22px; padding: clamp(1.6rem, 4vw, 3rem); }
.how-box h2, .how-box .lede, .how-box .steps strong, .how-box .steps p { color: var(--cream); }
.how-box .steps li { background: transparent; border: 1.5px solid rgba(254, 252, 247, 0.45); }
.how-box .steps .num { background: var(--gold); color: var(--ink); }
.how-box .aside-note { max-width: none; color: var(--ink); }
.vol-ask { margin-top: 2.5rem; display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
@media (max-width: 54rem) { .vol-ask { grid-template-columns: 1fr; } }
.vol-ask-go { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.btn-cream { background: var(--cream); color: var(--indigo); font-weight: 700; }
.how-box .btn-line { color: var(--cream); }
.card-art { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--bg-alt); border-bottom: 1.5px solid var(--line); }
.card-art svg { width: 38%; height: auto; max-height: 70%; }
.hero-art .frame { display: grid; place-items: center; background: var(--bg-alt); }
.hero-art .frame svg { width: 30%; height: auto; max-height: 60%; }
.dd-prompt { font-weight: 500; color: var(--head); }
.dd-box { min-height: 7rem; display: grid; place-items: center; border: 1.5px dashed var(--line); border-radius: 14px; background: var(--card); padding: 1rem; }
.dd-soon { font: 700 0.72rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* Live employer search: the plugin draws its own card, so ours steps back (no box inside a box) */
.dd-box.dd-live { display: block; min-height: 12rem; border: 0; padding: 0; background: none; place-items: initial; }
.dd-fallback { font-size: 0.95rem; color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: s; }
@media (max-width: 48rem) { .steps { grid-template-columns: 1fr; } }
.steps li { display: grid; gap: 0.5rem; align-content: start; padding: 1.3rem 1.4rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.steps .num { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--indigo); color: var(--cream); font: 400 1.4rem/2.4rem var(--display); text-align: center; }
.steps strong { font: 400 1.7rem/1 var(--display); letter-spacing: 0.02em; color: var(--head); }
.steps p { font-size: 0.98rem; }
.aside-note { margin-top: 1.5rem; max-width: 46rem; padding: 1.1rem 1.3rem; border-left: 4px solid var(--gold); background: var(--card); border-radius: 0 12px 12px 0; }
.aside-note h3 { font: 700 1rem/1.3 var(--body) !important; margin-bottom: 0.3rem; }
.aside-note p { font-size: 0.95rem; }
.side-stack { display: grid; gap: 1rem; align-content: start; position: sticky; top: 5rem; }
.side-stack .aside { position: static; }
.employer-box h3.kicker, .people-h { font: 700 0.72rem/1.3 var(--body) !important; letter-spacing: 0.14em !important; }
.employer-box .facts-strip { grid-template-columns: 1fr; margin-top: 0.75rem; }
.employer-box .facts-strip dd { font-size: 0.95rem; }

/* Footer: the three trust seals, small, on a cream plate so they read on the indigo footer; one link to About › Trust */
.foot-seals { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; margin: 1.75rem 0 2.25rem; padding: 0.75rem 1.1rem; background: var(--cream); border-radius: 12px; text-decoration: none; }
.foot-seals img { height: 3.4rem; width: auto; display: block; }
@media (max-width: 52rem) { .foot-seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center; width: 100%; box-sizing: border-box; margin: 0.5rem 0 2rem; padding: 1rem 1.25rem; gap: 1.25rem; } .foot-seals img { height: auto; width: 100%; max-height: 7rem; object-fit: contain; } }
.foot-seals:hover { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Lite YouTube embed: still + play button until tapped */
.video { margin: 0; display: grid; gap: 0.5rem; }
.lite-yt, .yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; overflow: hidden; background: var(--indigo); }
.lite-yt { position: relative; padding: 0; cursor: pointer; }
.lite-yt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lite-yt .play { position: absolute; top: 50%; left: 50%; width: 4.25rem; height: 4.25rem; margin: -2.125rem 0 0 -2.125rem; border-radius: 50%; background: var(--indigo); display: grid; place-items: center; transition: transform 200ms ease; }
.lite-yt .play svg { width: 1.6rem; height: 1.6rem; margin-left: 0.2rem; fill: var(--cream); }
.lite-yt:hover .play, .lite-yt:focus-visible .play { transform: scale(1.08); }
.video figcaption { font-size: 0.85rem; color: var(--muted); }

/* Footer: legal and safety row beside the seals */
.foot-legal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.site-footer .foot-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-size: 0.9rem; }
.foot-legal a { color: var(--cream); }
@media (max-width: 52rem) { .foot-legal-row { display: grid; } .site-footer .foot-legal { order: 2; gap: 0.5rem 1.25rem; margin-bottom: 1.5rem; } .foot-seals { order: 1; } }

/* Legal pages: one plain column, an "on this page" list, numbered sections */
.legal { max-width: 46rem; display: grid; gap: 2rem; }
.legal-head { display: grid; gap: 0.6rem; }
.legal-dates { color: var(--muted); font-size: 0.95rem; }
.legal-toc { padding: 1.1rem 1.3rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.legal-toc h2 { margin-bottom: 0.6rem; font: 700 0.72rem/1.3 var(--body) !important; letter-spacing: 0.14em; }
.legal-toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; font-size: 0.95rem; line-height: 1.5; }
.legal-toc li { break-inside: avoid; padding: 0.15rem 0; }
@media (max-width: 36rem) { .legal-toc ol { columns: 1; } }
.legal-body { display: grid; gap: 2rem; }
.legal-sec { display: grid; gap: 0.9rem; scroll-margin-top: 5rem; }
.legal-sec h2 { font: 400 clamp(1.7rem, 3vw, 2.2rem)/1 var(--display); letter-spacing: 0.01em; }
.legal-sec h3 { font: 700 1.05rem/1.3 var(--body) !important; }
.legal-sec p, .legal-sec li { line-height: 1.65; max-width: 65ch; }
.legal-sec ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.legal-foot { padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }

.yt-title { position: absolute; left: 1.25rem; bottom: 1.1rem; right: 1.25rem; color: var(--cream); font: 400 1.5rem/1.05 var(--display); letter-spacing: 0.02em; text-align: left; }
.hub-video { max-width: 46rem; margin-top: 2.5rem; }

/* Forms: Jotform frame or its stand-in; thank-you pages use the plain stack */
.form-col { display: grid; gap: 1rem; align-content: start; }
.form-frame iframe { display: block; width: 100%; min-height: 40rem; border: 0; border-radius: 14px; background: var(--card); }
.form-soon { padding: 1.4rem; border: 1.5px dashed var(--line); border-radius: 14px; background: var(--card); display: grid; gap: 0.5rem; }
/* Volunteer interest list (Forms plan F2): appears once its Jotform ID is set */
.interest-band { margin-top: 2.5rem; max-width: 46rem; }
.interest-band .form-frame iframe { min-height: 28rem; }
.fine-print { font-size: 0.9rem; color: var(--muted); margin-top: 1rem; }

/* Photos page */
.photo-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }
@media (max-width: 48rem) { .photo-how { grid-template-columns: 1fr; } }
.how-tile { padding: 1.3rem 1.4rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; display: grid; gap: 0.5rem; align-content: start; }
.how-tile h2 { font-size: 1.3rem !important; }
.how-tile p { font-size: 0.98rem; }

/* ---------- Language (Master Plan D4) ---------- */
/* The Español / English link: a plain word in its own language, set apart as a small pill in the main menu */
.nav > ul .lang-li a { border: 1.5px solid var(--line); border-radius: 999px; padding: 0.45rem 0.85rem; }
.nav > ul .lang-li a:hover, .nav > ul .lang-li a[aria-current] { text-decoration: none; border-color: var(--gold); }
.site-header.scrolled .nav > ul .lang-li a { border-color: rgba(254, 252, 247, 0.5); }
.menu .lang-li { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.3rem; }
.foot-legal .lang-link { font-weight: 500; }
/* The offer line on English pages: shown by site.js only to people who chose Spanish or whose browser prefers it */
.lang-offer { background: var(--indigo); color: var(--cream); font-size: 0.95rem; }
.lang-offer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 1rem; padding-block: 0.55rem; position: relative; padding-right: 3rem; }
.lang-offer a { color: var(--cream); font-weight: 500; text-decoration-color: var(--gold); text-underline-offset: 0.2em; }
.lang-offer-x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: transparent; color: var(--cream); font: 400 1.4rem/1 var(--body); cursor: pointer; }
.lang-offer-x:hover, .lang-offer-x:focus-visible { background: rgba(254, 252, 247, 0.14); }
.start-lang { margin-top: 0.5rem; }

.tone-morning{background:#FBDA8D;color:#2E3192}.tone-morning .btn-tile{background:#2E3192;color:#FBDA8D}.tone-morning .pill{border-color:currentColor}.t-morning{background:#FBDA8D;color:#2E3192}.tone-river{background:#3E6F80;color:#FEFCF7}.tone-river .btn-tile{background:#FEFCF7;color:#3E6F80}.tone-river .pill{border-color:currentColor}.t-river{background:#3E6F80;color:#FEFCF7}.tone-clay{background:#C7413A;color:#FEFCF7}.tone-clay .btn-tile{background:#FEFCF7;color:#C7413A}.tone-clay .pill{border-color:currentColor}.t-clay{background:#C7413A;color:#FEFCF7}.tone-night{background:#2E3192;color:#FEFCF7}.tone-night .btn-tile{background:#FEFCF7;color:#2E3192}.tone-night .pill{border-color:currentColor}.t-night{background:#2E3192;color:#FEFCF7}
:root[data-season="spring"]{--season:#1A92C2;--on-season:#0E0F2E;--fl-a:#1052FD;--fl-b:#C7413A;--pear-flower:#F7B517;--pear-fruit:transparent;--pear-fruit-op:1;--sotol-stalk:none;--sotol-bloom:none}:root[data-season="summer"]{--season:#F7B517;--on-season:#2E3192;--fl-a:#C7413A;--fl-b:#F7B517;--pear-flower:#F7B517;--pear-fruit:#3F6B3A;--pear-fruit-op:1;--sotol-stalk:inline;--sotol-bloom:inline}:root[data-season="fall"]{--season:#C7413A;--on-season:#FEFCF7;--fl-a:#F7B517;--fl-b:#FEFCF7;--pear-flower:transparent;--pear-fruit:#C7413A;--pear-fruit-op:1;--sotol-stalk:inline;--sotol-bloom:none}:root[data-season="winter"]{--season:#2E3192;--on-season:#FEFCF7;--fl-a:transparent;--fl-b:transparent;--pear-flower:transparent;--pear-fruit:#C7413A;--pear-fruit-op:0.45;--sotol-stalk:inline;--sotol-bloom:none}.s-spring{display:none}:root[data-season="spring"] .s-spring{display:inline}.s-summer{display:none}:root[data-season="summer"] .s-summer{display:inline}.s-fall{display:none}:root[data-season="fall"] .s-fall{display:inline}.s-winter{display:none}:root[data-season="winter"] .s-winter{display:inline}