/* Shared styles for all Project Foxwood program sites (home + subpages). */
:root{
  --sand:#F5EEE1; --sand-2:#EFE5D4; --cream:#FCF8F0; --card:#FFFFFF;
  --ink:#22302E; --ink-2:#586460; --ink-3:#8A9188;
  --line:#E6DCC9; --line-2:#D6C9B1;
  --accent:#22707C; --on-accent:#FFFFFF;
  --lab-ink:#174B53;   /* fallback only; site.js sets it per camp at 65% of that accent */
  --ember:#DE7A3C; --gold:#EEA636; --gold-ink:#7A4E12;
  /* Text-only companions. The brand values above are unchanged and still correct for
     fills and edges; these exist because --ember (2.62:1) and --ink-3 (2.81:1) cannot
     carry text on a light ground. Both invert in dark mode below. */
  --ember-ink:#A4501C;   /* 4.86:1 on --sand */
  --muted-ink:#646C67;   /* 4.69:1 on --sand */
  --tint:#E6EEEA;
  /* Theme-independent ink/paper. Some surfaces are always dark (the footer slab, the
     CTA gradient) and some are always light (the white button), so their partner color
     must NOT follow the theme. Flipping it is what made the footer nav cream-on-cream
     and .btn-light near-white-on-white in dark mode. Never redefine these in the dark
     block -- being fixed is the entire point. The quote card joined them for the same
     reason: it inverted into a bright slab in dark mode. */
  --static-ink:#22302E; --static-paper:#F5EEE1;
  /* Gold that belongs with the fixed pair above. --gold-ink is tuned for a LIGHT
     ground and drops to 1.9:1 on the dark quote card; this is 6.63:1 on it. */
  --static-gold:#EEA636;
  --footer-bg:var(--static-ink); --footer-ink:var(--static-paper);
  --on-light:var(--static-ink);
  --radius:22px; --radius-sm:14px;
  --display:"Bricolage Grotesque",Georgia,serif;
  --script:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  /* Kept for quote attributions only, where a hand is a signature rather than a label. */
  --hand:"Caveat",cursive;
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 2px 5px rgba(34,48,46,.05),0 16px 40px -20px rgba(34,48,46,.28);
  --shadow-lg:0 40px 80px -34px rgba(34,48,46,.42);
}
@media (prefers-color-scheme:dark){
  :root{
    --sand:#14191A; --sand-2:#191F20; --cream:#1B2223; --card:#1E2627;
    --ink:#F1EADC; --ink-2:#B4BCB4; --ink-3:#828C86;
    --line:#2A322F; --line-2:#3A433E; --tint:#17211F; --gold-ink:#EEA636;
    --ember-ink:#DE7A3C; --muted-ink:#828C86;
    --shadow:0 2px 5px rgba(0,0,0,.35),0 18px 44px -22px rgba(0,0,0,.7);
    --shadow-lg:0 44px 90px -36px rgba(0,0,0,.8);
  }
}
/* No [data-theme] blocks: nothing in the site ever sets that attribute, so they were
   dead code implying a toggle that does not exist. Dark mode follows the OS, through
   the prefers-color-scheme query above. */

*{box-sizing:border-box}
html,body{overflow-x:hidden}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3,.display{font-family:var(--display);letter-spacing:-.02em}
section[id]{scroll-margin-top:82px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

.script{font-family:var(--script);font-size:clamp(13px,1.1vw,14px);color:var(--gold-ink);font-weight:700;
  line-height:1.25;letter-spacing:.14em;text-transform:uppercase}
/* Not --accent: the tint panel is a 12% mix of the accent into sand, and the accent on
   its own tint is only 3.66:1. This is 5.61:1 there and 6.57:1 on plain sand. */
.lab{font-family:var(--display);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--lab-ink);font-weight:700}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--display);font-weight:700;font-size:15px;border-radius:100px;padding:13px 24px;cursor:pointer;border:2px solid transparent;white-space:nowrap;transition:transform .16s cubic-bezier(.34,1.56,.64,1),filter .15s}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-warm{background:var(--ember);color:#fff}
.btn-warm:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-ghost{background:transparent;border-color:currentColor;color:inherit}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--on-light)}
.btn-light:hover{transform:translateY(-2px)}

/* header (injected by site.js) */
header.bar{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
.bar .wrap{display:flex;align-items:center;gap:16px;height:84px}
.brand{font-family:var(--display);font-weight:800;font-size:20px;color:#fff;margin-right:auto;display:flex;align-items:center;gap:10px;transition:color .3s}
.brand .dot{display:none}
.brand .blogo{height:64px;width:64px;object-fit:contain;display:block;background:#fff;border-radius:50%;padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
nav.links{display:flex;gap:24px;align-items:center}
/* nowrap because a nav item that wraps mid-label is worse than one that overflows: adding
   Custom Adventures to Crystalaire turned "A Day in the Life" into four stacked words. */
nav.links a{font-size:14.5px;color:rgba(255,255,255,.92);font-weight:600;transition:color .3s;white-space:nowrap}
/* Crystalaire carries the longest nav of the three camps, and .wrap is capped at 1140px,
   so the bar has the same room at 1440 as it does at 1200. Tightening was conditional on
   the VIEWPORT at first, which meant the nav went back to full size above the cap and
   overflowed on the widest screens. The container never grows, so neither does the rule. */
@media (min-width:1024px){
  nav.links{gap:15px}
  nav.links a{font-size:13.5px}
  nav.links a.btn{padding:11px 18px}
}
nav.links a:hover{color:#fff}
nav.links a.active{color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold)}
header.bar.solid,header.bar.scrolled{background:color-mix(in srgb,var(--sand) 92%,transparent);backdrop-filter:blur(10px);border-color:var(--line);box-shadow:0 6px 24px -18px rgba(0,0,0,.4)}
header.bar.solid .brand,header.bar.scrolled .brand{color:var(--accent)}
header.bar.solid nav.links a,header.bar.scrolled nav.links a{color:var(--ink-2)}
header.bar.solid nav.links a:hover,header.bar.scrolled nav.links a:hover{color:var(--ink)}
header.bar.solid nav.links a.active,header.bar.scrolled nav.links a.active{color:var(--ink)}
header.bar.solid nav.links a.btn-accent,header.bar.scrolled nav.links a.btn-accent{color:var(--on-accent)}
.navtoggle{display:none;background:none;border:none;cursor:pointer;color:#fff;padding:6px;line-height:0;margin-left:6px}
.navtoggle svg{width:28px;height:28px}
header.bar.solid .navtoggle,header.bar.scrolled .navtoggle{color:var(--ink)}
/* Below header.bar (z-index:40). The panel lives INSIDE the header, so a scrim
   above 40 covers it: dimmed, and every tap lands on the scrim instead of a link. */
.navscrim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .28s;z-index:38}
.navscrim.open{opacity:1;pointer-events:auto}
@media (max-width:1023px){
  .navtoggle{display:inline-flex}
  nav.links{position:fixed;top:0;right:0;bottom:0;width:min(82vw,330px);z-index:45;background:var(--sand);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;padding:84px 22px 24px;transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-24px 0 60px -24px rgba(0,0,0,.5);border-left:1px solid var(--line);overflow-y:auto}
  nav.links.open{transform:none}
  nav.links a{color:var(--ink-2)!important;font-size:17px;font-weight:600;padding:13px 4px;border-bottom:1px solid var(--line)}
  nav.links a.active{color:var(--ink)!important}
  nav.links a.btn{margin-top:16px;justify-content:center;color:#fff!important;border-bottom:none}
}

/* full-bleed home hero */
.hero{position:relative;min-height:clamp(600px,94vh,900px);display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,22,24,.60) 0%,rgba(14,22,24,.28) 38%,rgba(12,19,21,.52) 70%,rgba(10,16,18,.90) 100%),linear-gradient(90deg,rgba(12,19,21,.55) 0%,rgba(12,19,21,0) 58%)}
.hero-inner{position:relative;color:#fff;padding:126px 0 clamp(46px,7vw,88px);max-width:780px}
.hero .script{color:#FFD98A;margin-bottom:12px;display:block;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.hero h1{font-size:clamp(42px,7.4vw,82px);line-height:.98;font-weight:800;margin:0;text-wrap:balance;color:#fff;text-shadow:0 3px 30px rgba(0,0,0,.45)}
.hero .intro{font-size:clamp(16.5px,1.9vw,20px);color:rgba(255,255,255,.95);max-width:52ch;margin:20px 0 0;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:13px}
.hero-meta{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 20px}
.hero-meta .chip{font-family:var(--display);font-weight:600;font-size:13px;color:rgba(255,255,255,.86);
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-meta .chip svg{width:14px;height:14px;opacity:.62;flex:none}
.hero-meta a.chip:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* subpage hero (shorter, image band) */
.page-hero{position:relative;min-height:clamp(320px,46vh,460px);display:flex;align-items:flex-end;overflow:hidden}
.page-hero .hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero .hero-scrim{background:linear-gradient(180deg,rgba(14,22,24,.5) 0%,rgba(12,19,21,.3) 45%,rgba(10,16,18,.85) 100%)}
.page-hero .inner{position:relative;color:#fff;padding:120px 0 clamp(28px,4vw,50px)}
.page-hero .script{color:#FFD98A;display:block;margin-bottom:6px}
.page-hero h1{font-size:clamp(34px,5.6vw,58px);line-height:1;font-weight:800;margin:0;color:#fff;text-wrap:balance;text-shadow:0 3px 24px rgba(0,0,0,.4)}

/* ---- split hero: dark text panel + photo, alternating sides (home + subpages) ---- */
.hero.split,.page-hero.split{display:grid;grid-template-columns:1fr;grid-template-areas:"img" "copy";gap:0;min-height:0;padding:0;overflow:hidden;align-items:stretch}
.split .hero-copy{grid-area:copy;background:#22302E;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:clamp(38px,7vw,58px) clamp(22px,6vw,44px) clamp(44px,7vw,56px)}
.split .hero-copy>*{max-width:38rem;width:100%}
.split .hero-img{grid-area:img;position:relative;min-height:clamp(240px,42vh,380px);background:#22302E}
.split .hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .hero-img .hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,22,24,.5) 0%,transparent 16%);pointer-events:none}
.hero.split .script,.page-hero.split .script{color:#FFD98A;text-shadow:none;margin-bottom:10px}
.hero.split h1,.page-hero.split h1{color:#fff;text-shadow:none}
.hero.split h1{font-size:clamp(36px,5vw,64px)}
.hero.split .intro{color:rgba(255,255,255,.9);text-shadow:none;max-width:48ch}
@media (min-width:900px){
  .hero.split,.page-hero.split{grid-template-areas:"copy img"}
  .hero.split.flip,.page-hero.split.flip{grid-template-areas:"img copy"}
  .hero.split{grid-template-columns:47% 53%;min-height:clamp(520px,74vh,720px)}
  .page-hero.split{grid-template-columns:44% 56%;min-height:clamp(340px,50vh,480px)}
  .split .hero-img{min-height:0}
  .split .hero-copy{padding-top:124px;padding-bottom:66px}
  .hero.split:not(.flip) .hero-copy,.page-hero.split:not(.flip) .hero-copy{padding-left:max(44px,calc((100vw - 1140px)/2 + 44px));padding-right:clamp(34px,4vw,60px)}
  .hero.split.flip .hero-copy,.page-hero.split.flip .hero-copy{padding-right:max(44px,calc((100vw - 1140px)/2 + 44px));padding-left:clamp(34px,4vw,60px)}
}

/* section rhythm */
section.band{padding:clamp(52px,8vw,104px) 0}
.sec-head{margin-bottom:30px}
.sec-head h2{font-size:clamp(28px,4.4vw,46px);line-height:1.04;font-weight:800;margin:10px 0 0;text-wrap:balance;max-width:20ch}
.sec-lead{font-size:clamp(16px,1.7vw,18.5px);color:var(--ink-2);max-width:58ch;margin:16px 0 0}
.readmore{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--accent)}
.readmore:hover{gap:11px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* prose */
.prose{max-width:66ch}
.prose p{font-size:clamp(16px,1.7vw,18.5px);color:var(--ink-2);margin:0 0 18px}
.prose p.lead{font-size:clamp(18px,2vw,22px);color:var(--ink);font-weight:500}

/* friendship / image split */
.split2{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,60px);align-items:center}
@media (min-width:900px){.split2{grid-template-columns:1fr 1fr}}
.split2.flip .fig{order:2}
.fig{position:relative;border-radius:32px 32px 42px 32px;overflow:hidden;aspect-ratio:4/4.3;box-shadow:var(--shadow-lg);background:var(--sand-2)}
.fig img{width:100%;height:100%;object-fit:cover}
.fig::after{content:"";position:absolute;left:-16px;bottom:-16px;width:120px;height:120px;background:radial-gradient(circle at 30% 30%,var(--gold),transparent 70%);opacity:.5;z-index:-1}
.split2 .body{font-size:clamp(16px,1.8vw,19px);color:var(--ink-2);margin-top:18px}
.split2 .pull{margin-top:22px;font-family:var(--display);font-size:clamp(18px,2.2vw,23px);font-weight:700;color:var(--ink);border-left:4px solid var(--gold);padding-left:16px;line-height:1.3}
.split2 h2 .hl{color:var(--accent)}

/* wide image band */
.imgband{position:relative;height:clamp(240px,38vw,420px);border-radius:32px;overflow:hidden;box-shadow:var(--shadow-lg)}
.imgband img{width:100%;height:100%;object-fit:cover}

/* trust band */
.trust{background:var(--accent);color:#fff;border-radius:36px;padding:clamp(30px,5vw,60px)}
.trust .th{max-width:24ch}
.trust .th .lab{color:#FFE8B5}  /* 4.75:1 on --accent; #FFD98A was 4.23:1 */
.trust h2{color:#fff}
.trust .grid{margin-top:30px;display:grid;grid-template-columns:1fr;gap:2px;background:rgba(255,255,255,.16);border-radius:18px;overflow:hidden}
@media (min-width:680px){.trust .grid{grid-template-columns:1fr 1fr}}
.trust .item{background:var(--accent);padding:22px 24px}
.trust .item h3{font-size:18px;font-weight:800;margin:0 0 7px;color:#fff}
.trust .item p{margin:0;font-size:14px;color:rgba(255,255,255,.86)}

/* shop band — mirrors the Foxwood hub shop section */
/* Sister programs. Built from FOXWOOD_PROGRAMS, so a camp never lists itself. */
.family{background:var(--tint);border-radius:32px;padding:clamp(26px,4vw,48px)}
.family .sec-head{margin-bottom:18px}
.famgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}
.famcard{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--ink);transition:transform .18s,box-shadow .18s}
.famcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.famcard .fname{font-family:var(--display);font-weight:700;font-size:16px;display:flex;align-items:center;gap:9px}
.famcard .fdot{width:11px;height:11px;border-radius:50%;flex:none}
.famcard .fkind{font-size:12px;color:var(--muted-ink);font-weight:600}
.famcard .fblurb{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.famhub{margin-top:18px;font-size:13.5px}
.famhub a{color:var(--lab-ink);font-weight:700}
@media (prefers-reduced-motion:reduce){.famcard{transition:none}}

/* A/V slot. The aspect box keeps layout stable before the iframe loads. */
.videobox{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:20px;overflow:hidden;
  background:var(--sand-2);box-shadow:var(--shadow-lg)}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:20px;color:var(--ink-2);
  border:2px dashed var(--line-2);border-radius:20px;
  background:repeating-linear-gradient(45deg,var(--sand-2) 0 12px,var(--sand) 12px 24px)}
.video-placeholder strong{font-family:var(--display);font-size:17px;color:var(--ink)}
.video-placeholder span{font-size:13px;max-width:34ch}

.shopband{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;background:var(--tint);border-radius:32px;padding:clamp(24px,4vw,44px)}
@media (min-width:760px){.shopband{grid-template-columns:1.1fr .9fr}}
.shopband h2{margin:8px 0 6px}
.shopart img{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow-lg);display:block;transition:transform .25s}
.shopart:hover img{transform:scale(1.02)}

/* pillars / value cards */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow);transition:transform .16s}
.pillar:hover{transform:translateY(-4px)}
.pillar .n{font-family:var(--display);font-size:26px;font-weight:800;color:var(--ember-ink)}
.pillar h3{margin:11px 0 6px;font-size:17px;font-weight:700}
.pillar p{margin:0;font-size:13.5px;color:var(--ink-2)}
.values{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:720px){.values{grid-template-columns:1fr 1fr}}
.value{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 26px;box-shadow:var(--shadow);display:flex;gap:18px;align-items:flex-start}
.value .num{font-family:var(--display);font-size:34px;font-weight:800;color:var(--gold-ink);line-height:1;flex:none}
.value h3{margin:2px 0 8px;font-size:20px;font-weight:800}
.value p{margin:0;font-size:15px;color:var(--ink-2)}

/* checklist (goals / what's included) */
.checks{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:640px){.checks{grid-template-columns:1fr 1fr}}
.checks li{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:15px;color:var(--ink-2);box-shadow:var(--shadow)}
.checks li b{color:var(--ink)}
.checks .tick{flex:none;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--gold) 26%,var(--card));color:var(--gold-ink);display:grid;place-items:center;font-weight:800;font-family:var(--display);font-size:13px;margin-top:1px}

/* testimonial */
.quote{position:relative;background:var(--static-ink);color:var(--static-paper);border-radius:34px;padding:clamp(30px,5vw,64px);overflow:hidden;box-shadow:var(--shadow-lg)}
.quote .mark{position:absolute;top:-24px;right:26px;font-family:var(--display);font-size:200px;color:var(--static-gold);opacity:.24;line-height:1}
.quote blockquote{margin:0;position:relative;font-family:var(--display);font-size:clamp(22px,3.4vw,38px);line-height:1.22;font-weight:700;text-wrap:balance;max-width:22ch}
.quote .by{margin-top:18px;font-family:var(--hand);font-size:24px;color:var(--static-gold)}  /* 6.63:1 on the card */

/* schedule */
.ses-note{color:var(--muted-ink);font-size:15px}
.sched-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.sched-hint{font-size:13.5px;color:var(--muted-ink)}
.sched-view{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:4px;gap:3px}
.sched-view .sv{font-family:var(--display);font-weight:700;font-size:13px;border:none;background:transparent;color:var(--ink-2);padding:8px 17px;border-radius:100px;cursor:pointer;transition:.14s}
.sched-view .sv.active{background:var(--accent);color:#fff}
.sched-group{margin-top:26px}.sched-group:first-child{margin-top:0}
.group-label{font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:14px;margin-bottom:14px}
.group-label::after{content:"";flex:1;height:2px;border-radius:2px;background:color-mix(in srgb,var(--accent) 24%,transparent)}
.slist{display:flex;flex-direction:column;gap:11px}
.srow{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px 17px;box-shadow:var(--shadow);transition:transform .16s}
.srow:hover{transform:translateY(-3px)}
.datechip{flex:none;width:60px;text-align:center;background:var(--tint);border-radius:14px;padding:9px 0}
.datechip .mo{font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);line-height:1}
.datechip .dy{font-family:var(--display);font-size:23px;font-weight:800;color:var(--ink);line-height:1.1}
.sinfo{flex:1;min-width:0}
.sinfo .snm{font-family:var(--display);font-weight:800;font-size:17.5px}
.sinfo .smeta{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px;align-items:center}
.tagpill{font-size:12px;font-weight:600;padding:4px 11px;border-radius:100px;white-space:nowrap}
.tag-date{background:var(--sand-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.tag-age{background:color-mix(in srgb,var(--accent) 15%,var(--card));color:var(--accent);font-weight:800}
.stagline{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--accent);line-height:1.4}
.addon-line{margin-top:9px;font-size:12.5px;font-weight:600;color:var(--gold-ink);background:color-mix(in srgb,var(--gold) 18%,var(--card));border:1px dashed color-mix(in srgb,var(--gold) 55%,var(--card));border-radius:10px;padding:6px 11px;display:inline-block}
.sright{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.sprice{font-family:var(--display);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.savail{font-family:var(--display);font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px}
.savail.open{background:color-mix(in srgb,var(--gold) 26%,var(--card));color:var(--gold-ink)}
.savail.full{background:var(--sand-2);color:var(--muted-ink);border:1px solid var(--line)}
.sbtn{font-family:var(--display);font-weight:700;font-size:13px;background:var(--accent);color:#fff;border-radius:100px;padding:8px 16px;transition:transform .14s}
.sbtn:hover{transform:translateY(-2px)}
@media (max-width:640px){.srow{flex-wrap:wrap}.sright{width:100%;flex-direction:row;justify-content:space-between;align-items:center;order:3;border-top:1px solid var(--line);padding-top:11px;margin-top:3px}}
.crosscamp{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 22px;font-size:15px;color:var(--ink-2)}
.crosscamp b{font-family:var(--display);color:var(--ink)}
.crosscamp a{color:var(--accent);font-weight:700;white-space:nowrap}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.gallery figure{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:var(--sand-2);box-shadow:var(--shadow)}
.gallery figure:nth-child(3n){border-radius:22px 22px 44px 22px}
.gallery figure:nth-child(4n){aspect-ratio:4/4.4}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.gallery figure:hover img{transform:scale(1.05)}

/* team */
.staff{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.person{text-align:center}
.person .ph{border-radius:26px 26px 40px 26px;overflow:hidden;aspect-ratio:3/3.5;background:var(--sand-2);box-shadow:var(--shadow);margin-bottom:11px;transition:transform .16s;display:grid;place-items:center}
.person:hover .ph{transform:translateY(-4px) rotate(-1deg)}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person .ph .initials{font-family:var(--display);font-size:44px;font-weight:800;color:var(--accent)}
.person .nm{font-family:var(--display);font-weight:800;font-size:15.5px}
.person .rl{font-size:12.5px;color:var(--muted-ink);font-weight:600}
/* full bio cards (team page) */
.bios{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:720px){.bios{grid-template-columns:1fr 1fr}}
.bio{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}
.bio .ph{flex:none;width:96px;height:112px;border-radius:16px 16px 24px 16px;overflow:hidden;background:var(--sand-2);display:grid;place-items:center}
.bio .ph img{width:100%;height:100%;object-fit:cover}
.bio .ph .initials{font-family:var(--display);font-size:30px;font-weight:800;color:var(--accent)}
.bio .nm{font-family:var(--display);font-size:18px;font-weight:800}
.bio .rl{font-size:12.5px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:2px 0 8px}
.bio .rl .pr{color:var(--muted-ink);text-transform:none;letter-spacing:0;font-weight:600}
.bio p{margin:0;font-size:14px;color:var(--ink-2)}

/* request form */
.split{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:860px){.split{grid-template-columns:.9fr 1.1fr;align-items:start}}
.infoform{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:clamp(20px,3vw,30px);box-shadow:var(--shadow-lg)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field input,.field textarea{font:inherit;font-size:15px;background:var(--sand);border:1.5px solid var(--line-2);border-radius:12px;padding:11px 13px;color:var(--ink);width:100%}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field textarea{min-height:96px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-note{font-size:12.5px;color:var(--muted-ink);margin:2px 0 14px}
.success{background:var(--tint);border:1.5px solid var(--accent);color:var(--ink);border-radius:20px;padding:26px;text-align:center;font-family:var(--display);font-size:17px;font-weight:700}
.contact-list{display:flex;flex-direction:column;gap:16px;font-size:15.5px}
.contact-list .ci{display:flex;gap:13px;align-items:flex-start}
.contact-list .ci .k{font-family:var(--display);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-ink);min-width:66px;padding-top:3px}

/* final cta */
.final{position:relative;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--static-ink)));color:#fff;border-radius:40px;padding:clamp(38px,6vw,80px);text-align:center;overflow:hidden}
.final::before{content:"";position:absolute;top:-60px;right:-40px;width:260px;height:260px;background:radial-gradient(circle,var(--gold),transparent 68%);opacity:.4}
.final .script{color:#FFD98A;position:relative}
.final h2{position:relative;color:#fff;font-size:clamp(28px,4.6vw,50px);margin:8px auto 0;max-width:20ch}
.final p{position:relative;color:rgba(255,255,255,.92);max-width:48ch;margin:16px auto 0;font-size:clamp(16px,1.7vw,18px)}
.final .cta{position:relative;margin-top:28px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* footer (injected) */
footer.site{background:var(--footer-bg);color:var(--footer-ink);padding:clamp(40px,6vw,64px) 0 56px}
footer.site .cols{display:grid;grid-template-columns:1fr;gap:26px;padding-bottom:26px;border-bottom:1px solid color-mix(in srgb,var(--footer-ink) 14%,transparent)}
@media (min-width:680px){footer.site .cols{grid-template-columns:1.4fr 1fr 1fr}}
footer.site .fb{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:8px}
footer.site .fabout{color:color-mix(in srgb,var(--footer-ink) 72%,transparent);font-size:14px;max-width:34ch}
footer.site h4{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--footer-ink) 60%,transparent);margin:0 0 12px}
footer.site .fnav{display:flex;flex-direction:column;gap:9px;font-size:14.5px}
footer.site a{color:color-mix(in srgb,var(--footer-ink) 90%,transparent)}
footer.site a:hover{color:var(--gold)}
footer.site .frow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-top:22px;font-size:13px;color:color-mix(in srgb,var(--footer-ink) 60%,transparent)}
footer.site .frow a:not(.btn){color:var(--gold);font-weight:700}

/* a-day timeline */
.timeline{position:relative;margin:0;padding:0 0 0 8px;list-style:none}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:color-mix(in srgb,var(--accent) 30%,transparent)}
.tl{position:relative;padding:0 0 26px 34px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:1px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--gold);border:3px solid var(--sand)}
.tl .time{font-family:var(--display);font-weight:800;font-size:13px;color:var(--accent);letter-spacing:.02em}
.tl h3{margin:3px 0 4px;font-size:18px;font-weight:800}
.tl p{margin:0;font-size:14.5px;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips .c{font-family:var(--display);font-weight:700;font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:9px 16px;box-shadow:var(--shadow)}
.chips .c::before{content:"•";color:var(--gold-ink);margin-right:8px;font-weight:800}

/* faq */
.faq{display:flex;flex-direction:column;gap:12px;max-width:820px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 20px;font-family:var(--display);font-weight:700;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:24px;color:var(--accent);font-weight:700;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 20px 20px;font-size:15px;color:var(--ink-2)}
.infocards{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:720px){.infocards{grid-template-columns:repeat(3,1fr)}}
.infocard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.infocard h3{margin:0 0 8px;font-size:17px;font-weight:800}
.infocard p{margin:0;font-size:14px;color:var(--ink-2)}
.infocard a{color:var(--accent);font-weight:700}

/* sample menu (camp life / food) */
.menu{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:720px){.menu{grid-template-columns:repeat(3,1fr)}}
.menu .mcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow)}
.menu .mcard h3{font-family:var(--display);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 13px}
.menu .mcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.menu .mcard li{font-size:15px;color:var(--ink-2)}
.menu .mcard li::before{content:"›";color:var(--gold-ink);font-weight:800;margin-right:9px}

/* fact / stat tiles (about / location) */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:8px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.fact .fk{font-family:var(--display);font-size:24px;font-weight:800;color:var(--accent);line-height:1}
.fact .fv{font-size:13px;color:var(--ink-2);margin-top:5px}

/* trip cards (Crystalaire expeditions) */
.tripgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:680px){.tripgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tripcard{min-width:0;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.tripcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tripcard .timg{aspect-ratio:16/10;overflow:hidden;background:var(--sand-2)}
.tripcard .timg img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tripcard:hover .timg img{transform:scale(1.05)}
.tripcard .tbody{padding:20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.tripcard .ttag{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--card));border-radius:100px;padding:4px 11px}
.tripcard h3{margin:0;font-family:var(--display);font-size:21px;font-weight:800}
.tripcard .tmeta{display:flex;flex-wrap:wrap;gap:7px}
.tripcard .tmeta span{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--sand-2);border-radius:100px;padding:4px 11px}
.tripcard p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
/* Departures inside a trip card. A trip is a name and a photograph; a departure is a date
   you can book, so it gets its own row with the only three facts that decide it: when, how
   full, and how much. */
.tripcard .tdeps{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.tripcard .tdep{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 0}
.tripcard .tdep+.tdep{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.tripcard .ddate{font-family:var(--display);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.tripcard .dright{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tripcard .dprice{font-family:var(--display);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.tripcard .dsoon{font-size:12.5px;font-weight:600;color:var(--muted-ink)}
.tripcard .dmore{display:block;padding-top:10px;font-size:13px;font-weight:600;color:var(--accent)}

/* Closing panel on the trips page. Deliberately the quiet tint band the site already uses
   for .family and .shopband, not a second .final slab: the accent CTA directly below it is
   the one that should carry the weight. */
.moreadv{background:var(--tint);border-radius:32px;padding:clamp(26px,4vw,48px);text-align:center}
.moreadv h2{font-family:var(--display);font-size:clamp(26px,3.6vw,38px);line-height:1.08;font-weight:800;margin:0;text-wrap:balance;max-width:18ch;margin-inline:auto}
.moreadv p{margin:14px auto 0;max-width:52ch;font-size:clamp(15.5px,1.6vw,17px);line-height:1.6;color:var(--ink-2)}
.moreadv .cta{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Two buttons side by side stop fitting well before the band does, so below that they go
   full width and stack rather than wrapping into a ragged pair. */
@media (max-width:460px){
  .moreadv .cta{flex-direction:column;align-items:stretch}
  .moreadv .cta .btn{width:100%;white-space:normal}
}

/* enrollment & payment policies accordion */
.policies{display:flex;flex-direction:column;gap:12px;max-width:880px}
.policies details{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.policies summary{cursor:pointer;list-style:none;padding:18px 20px;font-family:var(--display);font-weight:700;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.policies summary::-webkit-details-marker{display:none}
.policies summary::after{content:"+";font-family:var(--display);font-size:24px;color:var(--accent);font-weight:700;transition:transform .2s;flex:none}
.policies details[open] summary::after{transform:rotate(45deg)}
.policies .pbody{padding:0 20px 20px}
.policies .pbody p{margin:0 0 12px;font-size:15px;color:var(--ink-2)}
.policies .pbody p:last-child{margin-bottom:0}
.policies .pbody ul{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.policies .pbody ul:last-child{margin-bottom:0}
.policies .pbody li{font-size:15px;color:var(--ink-2);padding-left:20px;position:relative}
.policies .pbody li::before{content:"–";position:absolute;left:4px;color:var(--gold-ink);font-weight:800}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ── Custom adventures page ──────────────────────────────────────────────────
   Reuses .famcard for the "who we build for" and "what doesn't change" grids, which until
   now only ever held the Foxwood family cards and so only styled their own inner classes.
   Headings and paragraphs are given the same treatment here so the card works with plain
   markup too. */
.famcard h3{margin:0;font-family:var(--display);font-weight:700;font-size:16px}
.famcard p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.prose-h{font-family:var(--display);font-size:clamp(24px,3.4vw,34px);line-height:1.1;font-weight:800;
  margin:0;text-wrap:balance}

/* The steps are numbered because they are a real sequence: nobody changes a route before
   somebody has drafted one. Nothing else on the page is numbered. */
ol.cusetps{list-style:none;counter-reset:cs;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:760px){ol.cusetps{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}}
ol.cusetps li{counter-increment:cs;position:relative;padding:18px 0 18px 54px;border-top:1px solid var(--line)}
ol.cusetps li::before{content:counter(cs);position:absolute;left:0;top:16px;width:34px;height:34px;
  display:grid;place-items:center;border-radius:100px;background:var(--accent);color:var(--on-accent);
  font-family:var(--display);font-weight:700;font-size:15px}
ol.cusetps h3{margin:0 0 5px;font-family:var(--display);font-weight:700;font-size:17px}
ol.cusetps p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}

.chiprow{display:flex;flex-wrap:wrap;gap:9px}
.chiprow .chip{font-size:13.5px;font-weight:600;color:var(--ink-2);background:var(--sand-2);
  border-radius:100px;padding:7px 15px}