/* ============================================================
   WARNERS BAY COMMUNITY GARDEN - free preview by WVV Studios
   Theme v7.2 (story-refresh-2026-07-15): sticky story column removed,
   story photo reframed as a soft arch (echoes the bed hoops + pill
   buttons) with a sage echo line, facts moved to a full-width band.
   Prior: v7.1 hero refresh (bigger logo, hero CTA button, slim bar).
   Base: v7 multi-page, five pages, every page one click from the
   contact form. Bigger logo, bold nav, larger type for an older
   readership, warm invitation CTAs. Warm paper / sage family,
   hairline grids, oversized serif display.
   ============================================================ */

:root{
  --paper:#f4f0e5;
  --paper-2:#faf7ef;
  --ink:#272c23;
  --ink-soft:#575c4f;
  --sage:#88a07a;
  --sage-deep:#465c3a;
  --line:rgba(39,44,35,.22);
  --line-2:rgba(39,44,35,.1);
  --maxw:1280px;
  --nav-h:112px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Figtree",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:clamp(17px,1.15vw,19px);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:"Young Serif",Georgia,serif;font-weight:400;line-height:1.08;margin:0;color:var(--ink);letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:rgba(70,92,58,.18)}
section[id],footer[id]{scroll-margin-top:calc(var(--nav-h) + 8px)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--sage-deep);color:var(--paper-2);font-weight:600;padding:.8em 1.4em;text-decoration:none}
.skip:focus-visible{left:12px;top:12px}
img{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}
::selection{background:var(--sage);color:#1c2217}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.section{padding-block:clamp(50px,6vw,88px)}
.page-first{padding-top:calc(var(--nav-h) + clamp(44px,6vw,84px))}
.h2{font-size:clamp(2.4rem,4.4vw,3.7rem);text-wrap:balance}
/* adrian-edits-2026-08-13: the lede no longer sets its own size. Adrian asked for one
   paragraph size throughout ("sometimes the font for the first paragraph is bigger than
   the following"), so an intro paragraph is now distinguished by colour and measure only. */
.lede{margin-top:1.1rem;font-size:inherit;color:var(--ink-soft);max-width:58ch}
.sect-cta{margin-top:clamp(26px,3.4vw,40px)}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;text-decoration:none;cursor:pointer;
  font-family:"Figtree",sans-serif;font-weight:600;font-size:1.06rem;line-height:1;min-height:50px;
  padding:.9em 1.8em;border:1px solid transparent;border-radius:999px;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--sage-deep);color:var(--paper-2)}
.btn-solid:hover{background:#38492e}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink);background:rgba(39,44,35,.05)}
.btn-glass{background:rgba(18,23,15,.55);color:#fff;border-color:rgba(255,255,255,.5);backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(18,23,15,.75);border-color:#fff}
.textlink{font-weight:600;color:var(--sage-deep);text-decoration:none;position:relative}
.textlink::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:100%;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .3s var(--ease)}
.textlink:hover::after{transform:scaleX(.4)}

/* ---------- header: transparent over the landing hero, glass everywhere else ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .18s var(--ease),box-shadow .18s var(--ease),backdrop-filter .18s var(--ease)}
.site-in{max-width:1440px;margin-inline:auto;padding:14px clamp(18px,3.4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
header.site.scrolled{background:rgba(250,247,239,.86);box-shadow:0 1px 0 var(--line-2);backdrop-filter:blur(14px) saturate(1.4)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:84px;width:auto;filter:drop-shadow(0 2px 9px rgba(0,0,0,.45));transform-origin:left center;transition:filter .18s var(--ease),transform .18s var(--ease)}
header.site.scrolled .brand img{filter:none;transform:scale(.86)}
.nav-links{display:flex;align-items:center;gap:clamp(1.1rem,2.6vw,2.4rem)}
.nav-links a{position:relative;font-weight:700;font-size:1.1rem;letter-spacing:.03em;color:#fff;text-decoration:none;opacity:.94;
  text-shadow:0 1px 10px rgba(0,0,0,.45);transition:color .18s var(--ease),opacity .18s,text-shadow .18s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{opacity:1}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
/* nav-cta-pill-2026-07-16: Get involved reads as a button, not a tab */
.nav-links a.cta{font-weight:700;padding:.55em 1.25em;border-radius:999px;border:1.5px solid rgba(255,255,255,.65);background:rgba(18,23,15,.35);backdrop-filter:blur(8px);text-shadow:none}
.nav-links a.cta::after{display:none}
.nav-links a.cta:hover{background:var(--paper-2);border-color:var(--paper-2);color:var(--sage-deep)}
header.site.scrolled .nav-links a{color:var(--ink);text-shadow:none}
header.site.scrolled .nav-links a.cta{color:var(--paper-2);background:var(--sage-deep);border-color:var(--sage-deep)}
header.site.scrolled .nav-links a.cta:hover{background:#38492e;border-color:#38492e;color:var(--paper-2)}

/* ---------- hero (landing page): full-bleed photo, type anchored low-left, info bar on the bottom edge ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
@media(prefers-reduced-motion:no-preference){.hero-bg img{animation:slowzoom 26s ease-out both}@keyframes slowzoom{from{transform:scale(1.08)}to{transform:scale(1)}}}
.hero-tint{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(15,21,13,.5) 0%, rgba(15,21,13,.34) 42%, rgba(10,15,9,.72) 100%),
    radial-gradient(140% 110% at 42% 44%, rgba(15,21,13,.06) 0%, rgba(10,15,9,.5) 100%)}
.hero-in{color:#fff;width:100%;max-width:1440px;margin-inline:auto;padding:calc(var(--nav-h) + 20px) clamp(18px,3.4vw,44px) clamp(30px,4.5vw,54px)}
.hero h1{color:#fff;font-size:clamp(2.9rem,7vw,6.4rem);line-height:1;letter-spacing:-.02em;max-width:14ch;text-shadow:0 2px 36px rgba(6,10,6,.5)}
.hl-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hl{display:block}
@media(prefers-reduced-motion:no-preference){
  html.js .hl{transform:translateY(112%);animation:lineup .9s var(--ease) forwards}
  html.js .hl-mask:nth-child(2) .hl{animation-delay:.14s}
  @keyframes lineup{to{transform:translateY(0)}}
}
.hero-foot{display:flex;flex-direction:column;align-items:flex-start;margin-top:clamp(1.2rem,2.4vw,2rem)}
.hero-sub{font-size:clamp(1.1rem,1.45vw,1.25rem);color:rgba(255,255,255,.92);max-width:52ch;text-shadow:0 1px 18px rgba(6,10,6,.6)}
/* the one action on the page: a proper button, first thing the eye lands on after the headline */
.hero-cta{background:var(--paper-2);color:var(--ink);font-size:clamp(1.06rem,1.3vw,1.18rem);padding:1em 2em;
  margin-top:clamp(1.4rem,2.4vw,2rem);box-shadow:0 14px 34px -14px rgba(6,10,6,.65)}
.hero-cta:hover{background:#fff}
.hero-cta svg{width:20px;height:20px}

/* ---------- sub-page banner (involve-refresh-2026-07-16): backdrop photo, title low-left ---------- */
.hero-page{min-height:clamp(340px,52svh,520px)}
.hero-page h1{font-size:clamp(2.4rem,4.6vw,4.2rem);max-width:16ch}

/* the hero's bottom edge: one quiet line of facts, kept out of the CTA's way */
.hero-bar{position:relative;background:rgba(10,15,9,.4);border-top:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.hero-bar-in{max-width:1440px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:.3rem 2.4rem;padding:.75rem clamp(18px,3.4vw,44px);font-size:.95rem;color:rgba(255,255,255,.85);text-align:center}
.hero-bar-in a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.hero-bar-in a:hover{border-color:#fff}

/* ---------- story: copy beside an arch-framed photo, facts band below ---------- */
.story-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,84px);align-items:center}
/* our-garden: photo on the left, copy given the wider column so the story still reads easily */
.story-grid.photo-left{grid-template-columns:.92fr 1.08fr}
.story-copy .body{margin-top:1.1rem;color:var(--ink-soft)}
.story-copy .btn{margin-top:1.8rem}
.story-copy .aside-link{display:inline-block;margin-top:1.4rem;margin-left:1.4rem}
/* the arch: soft garden geometry (the bed hoops, the pill buttons), never a plain box */
.story-solo{max-width:70ch}
.story-frame{position:relative;max-width:560px;margin-inline:auto}
.story-frame::before{content:"";position:absolute;inset:0;transform:translate(16px,-16px);
  border:1.5px solid var(--sage);border-radius:999px 999px 0 0;pointer-events:none}
.story-photo{position:relative;overflow:hidden;border-radius:999px 999px 0 0}
.story-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform .8s var(--ease)}
.story-photo:hover img{transform:scale(1.025)}
/* our-garden motto band (replaces the facts strip that duplicated the homepage) */
.motto-wrap{margin-top:clamp(44px,5.5vw,72px);border-block:1px solid var(--line);padding-block:clamp(30px,4vw,48px);text-align:center}
.motto{font-family:"Young Serif",Georgia,serif;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.22;color:var(--ink);max-width:30ch;margin-inline:auto;text-wrap:balance}
.motto-sub{margin-top:.85rem;color:var(--ink-soft)}
/* adrian-edits-2026-08-13: motto moved to the top of Our Garden, so it opens the page
   flush under the section padding instead of carrying the between-blocks margin. */
.motto-first{margin-top:0;margin-bottom:clamp(44px,5.5vw,72px)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line);margin-top:clamp(44px,5.5vw,72px)}
.facts li{padding:clamp(18px,2.2vw,28px) clamp(18px,2.2vw,30px);border-left:1px solid var(--line)}
.facts li:first-child{border-left:none;padding-left:0}
.facts .k{display:block;font-size:.88rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.facts .v{display:block;font-family:"Young Serif",Georgia,serif;font-size:clamp(1.15rem,1.7vw,1.4rem);margin-top:.4rem}

/* ---------- milestones: how the garden grew ---------- */
.miles-wrap{margin-top:clamp(44px,5.5vw,72px)}
.miles-h{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.miles{margin-top:clamp(18px,2.4vw,28px);border-top:1px solid var(--line)}
.miles li{display:grid;grid-template-columns:minmax(150px,.36fr) 1fr;gap:.35rem 2.5rem;padding-block:clamp(1.05rem,1.8vw,1.5rem);border-bottom:1px solid var(--line)}
.miles .m-k{font-family:"Young Serif",Georgia,serif;font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.01em;line-height:1.2;font-variant-numeric:lining-nums}
.miles .m-v{color:var(--ink-soft);max-width:64ch;align-self:center}
@media(max-width:640px){.miles li{grid-template-columns:1fr}}

/* ---------- the growing vine: draws itself as the history scrolls, pure CSS scroll-driven ---------- */
.miles-flow{position:relative;padding-left:calc(56px + clamp(18px,2.5vw,36px));margin-top:clamp(18px,2.4vw,28px)}
.miles-flow .miles{margin-top:0}
.vine{position:absolute;top:0;left:0;width:56px;height:100%;overflow:visible}
.vine .stem{fill:none;stroke:var(--sage-deep);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.vine .leafshape{fill:var(--sage);transform-box:fill-box;transform-origin:left center}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference){
    .vine .stem{animation:vinegrow linear both;animation-timeline:view();animation-range:entry 20% cover 90%}
    .vine .leafshape{animation:leafpop linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  }
}
@keyframes vinegrow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes leafpop{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:scale(1)}}
@media(max-width:900px){.miles-flow{padding-left:0}.vine{display:none}}

/* ---------- landing photo peek: three photos, a taste of the gallery ---------- */
.peek-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:clamp(24px,3vw,36px)}
.peek-grid a{display:block;overflow:hidden}
.peek-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .7s var(--ease)}
.peek-grid a:hover img{transform:scale(1.04)}
.peek-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:1.4rem}

/* ---------- gallery: full-bleed dense mosaic, hairline gaps ---------- */
.gallery{background:var(--paper)}
/* gallery CTA: centred tight under the grid so the gap to the footer stays small */
.gallery.section{padding-bottom:clamp(28px,3.4vw,44px)}
.gallery .sect-cta{margin-top:clamp(16px,2.2vw,26px);text-align:center}
.gal-head{margin-bottom:clamp(22px,3vw,34px)}
.gal-head p{color:var(--ink-soft);margin-top:.7rem}
.gal-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(110px,13.5vw,190px);gap:4px;padding-inline:4px}
.gal-grid figure{margin:0;overflow:hidden;position:relative}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gal-grid figure:hover img{transform:scale(1.04)}
/* asymmetric bands: 3+2+1 / 4+2 / 2+4 / 3-tall + two stacked halves. never a row of equal thirds */
.g1{grid-column:span 3;grid-row:span 2}
.g2{grid-column:span 2;grid-row:span 2}
.g3{grid-column:span 1;grid-row:span 2}
.g4{grid-column:span 4;grid-row:span 2}
.g5{grid-column:span 2;grid-row:span 2}
.g6{grid-column:span 2;grid-row:span 1}
.g7{grid-column:span 4;grid-row:span 1}
.g8{grid-column:span 3;grid-row:span 2}
.g9{grid-column:span 3;grid-row:span 1}
.g10{grid-column:span 3;grid-row:span 1}

/* ---------- gallery viewing layer: hover captions + full-screen lightbox ---------- */
.gal-grid figure{cursor:zoom-in}
.gal-btn{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal-btn:focus-visible{outline:2px solid var(--paper-2);outline-offset:-5px}
.gal-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.6rem 1.1rem .85rem;color:#fff;font-size:.88rem;font-weight:500;
  background:linear-gradient(180deg,transparent,rgba(10,15,9,.74));pointer-events:none;opacity:0;transform:translateY(8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
@media(hover:hover){
  .gal-grid figure:hover .gal-cap,.gal-grid figure:focus-within .gal-cap{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.gal-cap{transition:none;transform:none}}

.lb{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,40px);background:rgba(13,17,11,.95);overscroll-behavior:contain}
.lb.open{display:flex}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;width:min(1400px,94vw);max-height:76vh}
.lb-stage img{max-width:100%;max-height:76vh;width:auto;height:auto;object-fit:contain}
@media(prefers-reduced-motion:no-preference){.lb.open .lb-stage img{animation:lbin .32s var(--ease)}@keyframes lbin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}}
.lb-bar{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;width:min(1400px,94vw);margin-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.28);padding-top:.9rem}
.lb-cap{font-family:"Young Serif",Georgia,serif;font-size:clamp(1.02rem,1.7vw,1.3rem);color:#fff;line-height:1.3}
.lb-count{color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums;font-size:.92rem;white-space:nowrap}
.lb-x,.lb-nav{display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:rgba(13,17,11,.55);
  border:1px solid rgba(255,255,255,.45);color:#fff;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease)}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.14);border-color:#fff}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-x{position:absolute;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{left:clamp(6px,1.6vw,20px)}
.lb-next{right:clamp(6px,1.6vw,20px)}
.lb-x svg,.lb-nav svg{width:22px;height:22px}
@media(max-width:640px){
  .lb-nav{top:auto;bottom:clamp(12px,4vw,20px);transform:none}
  .lb-prev{left:18px}.lb-next{right:18px}
  .lb-stage{max-height:64vh}.lb-stage img{max-height:64vh}
  .lb-bar{flex-direction:column;gap:.4rem;align-items:flex-start;padding-bottom:76px}
}

/* ---------- visit: oversized timetable rows, good-to-know strip, full-bleed map ---------- */
.visit-head{max-width:640px}
/* adrian-edits-2026-08-13: email button sits between the two intro paragraphs */
.visit-email{margin-top:1.5rem}
.timetable{margin-top:clamp(26px,3.4vw,44px);border-top:1px solid var(--line)}
.timetable li{display:grid;grid-template-columns:1fr auto;gap:.2rem 2rem;align-items:baseline;padding-block:clamp(1.3rem,2.2vw,2rem);border-bottom:1px solid var(--line)}
.timetable .day{font-family:"Young Serif",Georgia,serif;font-size:clamp(1.7rem,3.4vw,2.9rem);letter-spacing:-.015em}
.timetable .time{font-weight:600;color:var(--sage-deep);font-variant-numeric:tabular-nums;font-size:clamp(1.05rem,1.6vw,1.35rem)}
.timetable .note{grid-column:1/-1;color:var(--ink-soft);max-width:60ch}
/* visit page: a garden morning between the timetable and the practical notes (visit-photo-2026-07-16) */
.visit-photo{margin-top:clamp(30px,4vw,52px);border-block:1px solid var(--line)}
.visit-photo img{display:block;width:100%;height:clamp(260px,32vw,420px);object-fit:cover}
.knows{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(26px,3.4vw,40px)}
.knows>div{padding:clamp(16px,1.8vw,24px) clamp(16px,1.8vw,26px);border-left:1px solid var(--line)}
.knows>div:first-child{border-left:none;padding-left:0}
.knows b{display:block;font-weight:600;color:var(--ink);margin-bottom:.3rem;font-size:1.08rem}
.knows p{color:var(--ink-soft);font-size:1rem}
.mapband{position:relative;margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mapband iframe{display:block;width:100%;height:clamp(300px,34vw,430px);border:0;filter:grayscale(.2) saturate(1.05)}
.mapband .btn{position:absolute;left:clamp(18px,4vw,40px);bottom:clamp(18px,3vw,32px)}

/* ---------- contact / get involved: one section, form in the first view ---------- */
.contact{background:var(--paper)}
/* involve-layout-2026-07-16: two balanced bands, invitation + form up top,
   FAQ + photo below. text spine stays left in both bands, the form card +
   photo sit on the right. photo stretches to the FAQ's height so their bottom
   edges line up (replaces the form-spans-both-rows grid that left the photo
   floating mid-FAQ with dead space beside the lower questions). */
.involve-top{display:grid;grid-template-columns:1fr 1.05fr;column-gap:clamp(36px,4.5vw,76px);align-items:center}
.involve-faq{display:grid;grid-template-columns:1.06fr .94fr;column-gap:clamp(36px,4.5vw,76px);align-items:stretch;margin-top:clamp(54px,8vw,116px)}
.involve-faq .faq{margin-top:0}
.gi-photo .story-frame{height:100%;max-width:none;margin:0}
.gi-photo .story-photo{height:100%}
.frame-wide .story-photo img{aspect-ratio:4/3}
.gi-photo .story-photo img{height:100%;aspect-ratio:auto}
.cdetails{margin-top:2rem;border-top:1px solid var(--line)}
.cdetails li{border-bottom:1px solid var(--line)}
.cdetails a{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding-block:1.15rem;text-decoration:none}
.cdetails .k{font-weight:600;color:var(--ink);display:inline-block;transition:transform .25s var(--ease)}
.cdetails a:hover .k{transform:translateX(.4rem)}
.cdetails .v{color:var(--sage-deep);font-weight:500;text-align:right;overflow-wrap:anywhere}
.faq{margin-top:2.6rem}
.faq-h{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.faq ul{border-top:1px solid var(--line);margin-top:1.1rem}
.faq li{border-bottom:1px solid var(--line);padding-block:1.05rem}
.faq b{display:block;font-weight:600;color:var(--ink);margin-bottom:.25rem}
.faq p{color:var(--ink-soft)}
form{background:var(--paper-2);border:1px solid var(--line);padding:clamp(1.6rem,2.6vw,2.3rem)}
.field{margin-bottom:1.35rem}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.4rem}
.field input,.field textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.6em 2px;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sage-deep);box-shadow:0 1px 0 var(--sage-deep)}
.field input::placeholder,.field textarea::placeholder{color:rgba(87,92,79,.75)}
.field textarea{resize:vertical;min-height:120px}
.field .err{color:#93321f;font-weight:600;font-size:.88rem;margin-top:.4rem;display:none}
.field.invalid input,.field.invalid textarea{border-color:#93321f}
.field.invalid .err{display:block}
form .btn{width:100%;justify-content:center;padding:1.05em}
.form-note{color:var(--ink-soft);font-size:.9rem;margin-top:1rem;text-align:center}
.form-ok{display:none;text-align:center;padding:1.3rem 0}
.form-ok.show{display:block}
.form-ok h3{font-size:1.5rem}
.form-ok p{color:var(--ink-soft);margin-top:.6rem}

/* ---------- footer: sign-off + CTA on the left, icon'd contact stack filling the right ---------- */
footer{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.foot-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,4.5vw,72px);align-items:center}
.foot-hello{font-family:"Young Serif",Georgia,serif;font-size:clamp(2.5rem,6vw,5rem);line-height:1.02;letter-spacing:-.02em;max-width:12ch}
.foot-cta{margin-top:1.6rem;font-size:1.18rem;padding:1em 2.1em}
.foot-cta svg{width:20px;height:20px}
.foot-info{border-top:1px solid var(--line)}
.foot-info li{border-bottom:1px solid var(--line)}
.fi{display:flex;align-items:center;gap:.9rem;padding-block:.95rem;color:var(--ink-soft)}
.fi svg{width:22px;height:22px;flex:none;color:var(--sage-deep)}
.fi span{min-width:0;overflow-wrap:anywhere}
a.fi{text-decoration:none;color:var(--sage-deep);font-weight:600}
a.fi:hover span{text-decoration:underline;text-underline-offset:4px}
.foot-legal{margin-top:clamp(26px,3.2vw,40px);border-top:1px solid var(--line-2);padding-block:1.15rem;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.5rem;font-size:.86rem;color:var(--ink-soft)}
.foot-legal img{height:42px;width:auto}
.foot-legal small:last-child{margin-left:auto}
.foot-legal a{color:var(--sage-deep);font-weight:600}

/* ---------- reveal (scoped to js so no-JS never hides content) ---------- */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}.hero-bg img{animation:none}html.js .hl{transform:none;animation:none}}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .story-grid{grid-template-columns:1fr}
  /* photo-left has 2-class specificity, so it needs its own collapse rule here or it stays 2-col and the photo shrinks to a sliver on phones */
  .story-grid.photo-left{grid-template-columns:1fr}
  .story-grid.photo-left .story-copy{order:-1}
  /* once stacked to one column the copy loses the grid's width cap; hold a readable measure for the older readership */
  .story-copy{max-width:64ch}
  .involve-top,.involve-faq{grid-template-columns:1fr;align-items:start}
  .gi-form{margin-top:clamp(28px,5vw,40px)}
  .involve-faq{margin-top:clamp(44px,7vw,64px)}
  .gi-photo{margin-top:clamp(28px,5vw,40px)}
  .gi-photo .story-frame{height:auto;max-width:520px}
  .gi-photo .story-photo img{height:auto;aspect-ratio:4/3}
  .story-frame{max-width:480px;margin-inline:0}
  .facts{grid-template-columns:1fr 1fr}
  .facts li{border-left:none;padding-inline:0;border-top:1px solid var(--line)}
  .facts li:nth-child(-n+2){border-top:none}
  .facts li:nth-child(even){padding-left:clamp(18px,4vw,30px);border-left:1px solid var(--line)}
  .knows{grid-template-columns:1fr 1fr}
  .knows>div{border-left:none;border-top:1px solid var(--line);padding-inline:0}
  .knows>div:nth-child(-n+2){border-top:none;padding-top:0}
  .gal-grid{grid-auto-rows:clamp(120px,22vw,180px)}
  .g1,.g4{grid-column:span 6;grid-row:span 2}
  .g2,.g3,.g5,.g6,.g7,.g8{grid-column:span 3;grid-row:span 2}
  .g9,.g10{grid-column:span 3;grid-row:span 1}
  .foot-grid{grid-template-columns:1fr;gap:clamp(22px,3.5vw,32px)}
}
/* <=767: links collapse behind the header Menu button (mobile-menu-2026-07-17) */
.nav-menu-btn{display:none}
@media(max-width:767px){
  .nav-menu-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.45em 1.05em;cursor:pointer;
    border-radius:999px;border:1.5px solid rgba(255,255,255,.65);background:rgba(18,23,15,.35);color:#fff;
    backdrop-filter:blur(8px);font-family:"Figtree",sans-serif;font-weight:600;font-size:1rem;
    transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
  .nav-menu-btn svg{width:20px;height:20px}
  .nav-menu-btn .i-close{display:none}
  .nav-menu-btn[aria-expanded="true"] .i-open{display:none}
  .nav-menu-btn[aria-expanded="true"] .i-close{display:block}
  header.site.scrolled .nav-menu-btn{color:var(--ink);border-color:var(--line);background:transparent}
  /* the menu itself: a plain full-width sheet attached under the header, fast and solid */
  .nav-links{position:fixed;left:0;right:0;top:var(--nav-h);flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper-2);border-block:1px solid var(--line);padding:.4rem 18px 1.1rem;
    opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .16s var(--ease),transform .16s var(--ease)}
  .nav-links.open{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{color:var(--ink);text-shadow:none;opacity:1;font-size:1.2rem;letter-spacing:normal;padding:.85em .2em;border-bottom:1px solid var(--line-2)}
  .nav-links a::after{display:none}
  .nav-links a[aria-current="page"],header.site.scrolled .nav-links a[aria-current="page"]{color:var(--sage-deep)}
  .nav-links a.cta{margin-top:.8rem;text-align:center;background:var(--sage-deep);color:var(--paper-2);padding:.9em;border:0;border-bottom:0}
  header.site.scrolled .nav-links a.cta{color:var(--paper-2)}
  @media(prefers-reduced-motion:reduce){.nav-links{transition:none}}
}
@media(max-width:640px){
  :root{--nav-h:94px}
  .brand img{height:66px}
  .hero-bar-in{flex-direction:column;gap:.3rem;font-size:.92rem}
  /* stack label over value so the long facebook URL has the full row width and never breaks mid-word */
  .cdetails a{flex-direction:column;align-items:flex-start;gap:.3rem}
  .cdetails .v{text-align:left}
  .timetable li{grid-template-columns:1fr}
  .timetable .time{font-size:1.05rem}
  .knows{grid-template-columns:1fr}
  .knows>div:nth-child(-n+2){border-top:1px solid var(--line);padding-top:clamp(16px,1.8vw,24px)}
  .knows>div:first-child{border-top:none;padding-top:0}
  .gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:36vw}
  .g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10{grid-column:span 1;grid-row:span 1}
  .gal-grid figure:first-child,.gal-grid figure:last-child{grid-column:span 2}
  .peek-grid{grid-template-columns:1fr 1fr}
  .peek-grid a:first-child{grid-column:span 2}
  .foot-legal small:last-child{margin-left:0}
}

/* ---------- mobile declutter (kept from the 2026-07-17 passes) ---------- */
@media(max-width:767px){
  /* the embedded map pans instead of the page on touch; keep it a picture and
     give the directions button its own full-width row below the map */
  .mapband iframe{pointer-events:none}
  .mapband .btn{position:static;display:flex;justify-content:center;margin:14px 18px 20px;
    background:var(--sage-deep);color:var(--paper-2);border-color:transparent;backdrop-filter:none}
}
@media(max-width:640px){
  /* the hero facts bar repeats the hero copy on phones; email lives in the footer and Get involved */
  .hero-bar{display:none}
  /* stack the story's secondary link cleanly under its button */
  .story-copy .aside-link{display:block;margin-left:0;margin-top:1.1rem;width:fit-content}
  /* get-involved: the decorative arch photo only lengthens the page on phones */
  .gi-photo{display:none}
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}