/* --- Self-hosted variable fonts (see tools/fonts.py) ------------- */
@font-face{font-family:Literata;src:url("/assets/fonts/Literata.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Literata;src:url("/assets/fonts/Literata-Italic.woff2") format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/fonts/PublicSans.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

/* ============================================================
   WAYPOINT GATHERINGS · Site Wireframe v2 · 2026-07-08
   Tokens: Design Brief v1.1 §2 (Salt Marsh) — site UI unchanged;
           --gold deepened to #A68A3B per 2026-07-08 direction
           (pending Brand Guidelines v1.1 amendment: small-scale gold marks)
   Mark:   Brand Identity Guidelines v1.0 — the Threshold Mark
           (open-aperture kite rose; lockups per §05, colors per §04)
   Copy:   Website Copy Draft v1.4 (verbatim)
   Home:   S0–S8 spec unchanged from Brief v1.0 §3 / wireframe v2
   ============================================================ */
:root{
  --paper:#F7F5F0;   /* page background */
  --ink:#232823;     /* headlines, body — 13.8:1 on paper */
  --silt:#55584F;    /* secondary text — 6.7:1 on paper */
  --sand:#ECE9E0;    /* alternating bands, card fills */
  --deep:#1E5748;    /* primary: buttons, links, dark bands — 7.7:1 vs paper */
  --gold:#A68A3B;    /* Gold, deepened per 2026-07-08 direction (pending Brand Guidelines v1.1) — mark at all sizes on light fields, decorative line-work; never text */
  --line:#DDD9CE;    /* card & rule hairlines */
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font:400 17.5px/1.65 "Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Literata,Georgia,serif;font-weight:600;color:var(--ink)}
h1{font-size:clamp(34px,5vw,54px);line-height:1.12;letter-spacing:-.01em}
h2{font-size:30px;line-height:1.22}
h3{font-size:22px;line-height:1.3}
.small{font-size:14px}
p+p{margin-top:16px}
a{color:var(--deep);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--deep);outline-offset:3px;border-radius:2px}
.band--dark :focus-visible{outline-color:var(--paper)}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:var(--paper);padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}

.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.band{padding:76px 0}
.band--sand{background:var(--sand)}
.band--dark{background:var(--deep);color:var(--paper)}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark p{color:var(--paper)}
.band--dark a:not(.btn){color:var(--paper);text-decoration:underline}
.center{text-align:center}
.measure{max-width:65ch}
.measure70{max-width:70ch}
.center .measure,.center .measure70{margin-left:auto;margin-right:auto}
.lede{font-size:20px}
.muted{color:var(--silt)}
.band--dark .muted{color:rgba(247,245,240,.78)}
.eyebrow{font:600 12px/1 "Public Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--silt);margin-bottom:16px}
.band--dark .eyebrow{color:rgba(247,245,240,.75)}
.sechead{margin-bottom:10px}

/* --- Buttons (Brief §2.5) ------------------------------------ */
.btn{display:inline-block;font:600 16px/1 "Public Sans",sans-serif;padding:14px 24px;border-radius:8px;border:1.5px solid transparent;cursor:pointer}
.btn--primary{background:var(--deep);color:var(--paper)}
.btn--primary:hover{background:#17453A;text-decoration:none}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--sand);text-decoration:none}
.btn--paper{background:var(--paper);color:var(--deep)}
.btn--paper:hover{background:#FFFFFF;text-decoration:none}
.btn--ghostPaper{border-color:var(--paper);color:var(--paper)}
.btn--ghostPaper:hover{background:rgba(247,245,240,.12);text-decoration:none}
.btn--held{background:var(--paper);color:var(--deep);border:1.5px dashed var(--deep);opacity:.8;cursor:not-allowed}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.btns--left{justify-content:flex-start}

/* --- Waypoint rule (Brief §2.4): line · mark · line ------------
   Fully gold — hairlines and glyph — per 2026-07-08 direction;
   deepened gold #A68A3B holds at glyph scale. */
.wrule{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px}
.wrule::before,.wrule::after{content:"";height:1px;width:72px;background:var(--gold)}
.wrule svg{width:30px;height:30px;color:var(--gold);flex:none}

/* --- Nav (S0) -------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:26px;min-height:68px}
/* Horizontal lockup (Guidelines §05, amended): gold mark + Deep Green wordmark.
   Mark enlarged to 36px (~1.9×) per 2026-07-08 direction for in-situ presence;
   gap widened proportionally. Footer inherits the same lockup in Paper. */
.wordmark{display:inline-flex;align-items:center;gap:10px;font:600 19px Literata,Georgia,serif;color:var(--deep);white-space:nowrap}
.wordmark em{font-style:italic;font-weight:500}
.wordmark:hover{text-decoration:none}
.wordmark svg{width:36px;height:36px;color:var(--gold);flex:none}
.navlinks{display:flex;align-items:center;gap:24px;margin-left:auto}
.navlinks>a,.dd>button{font:500 16px "Public Sans",sans-serif;color:var(--ink);padding:8px 2px;background:none;border:0;cursor:pointer;border-bottom:2px solid transparent}
.navlinks>a:hover,.dd>button:hover{color:var(--deep);text-decoration:none}
.navlinks>a[aria-current="page"],.dd>button.on{color:var(--deep);border-bottom-color:var(--deep)}
.dd{position:relative}
.dd>button .car{font-size:12px;margin-left:5px}
.dd-panel{position:absolute;top:calc(100% + 12px);left:-10px;min-width:210px;background:var(--paper);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 26px rgba(35,40,35,.10);padding:8px;display:none}
.dd.open .dd-panel{display:block}
.dd-panel a{display:block;padding:11px 12px;border-radius:7px;color:var(--ink);font-weight:500}
.dd-panel a:hover{background:var(--sand);text-decoration:none}
.dd-panel a[aria-current="page"]{color:var(--deep);font-weight:600}
.nav .btn{margin-left:6px}
.menubtn{display:none;margin-left:auto;font:600 15px "Public Sans";background:none;border:1.5px solid var(--ink);border-radius:8px;padding:9px 16px;cursor:pointer;color:var(--ink)}
.mobilepanel{display:none;border-top:1px solid var(--line);background:var(--paper);padding:10px 0 18px}
.mobilepanel a:not(.btn){display:block;padding:13px 24px;font-weight:500;color:var(--ink)}
.mobilepanel .grp{padding:14px 24px 4px;font:600 12px "Public Sans";letter-spacing:.12em;text-transform:uppercase;color:var(--silt)}
.mobilepanel .sub{padding-left:38px}
.mobilepanel .btn{margin:12px 24px 0;display:inline-block}
.nav.open .mobilepanel{display:block}

/* --- Grids & cards --------------------------------------------- */
.grid{display:grid;gap:22px;margin-top:36px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:26px 24px;text-align:left}
.card h3{font-size:20px;margin-bottom:9px}
.card p{font-size:16.5px}
.card .arrow{display:inline-block;margin-top:14px;font-weight:600}
a.card{display:block;color:inherit}
a.card:hover{text-decoration:none}
a.card:hover .arrow{text-decoration:underline}
@media (prefers-reduced-motion: no-preference){
  .card{transition:transform .15s ease,box-shadow .15s ease}
  .card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(35,40,35,.08)}
}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:8px}
.photo{aspect-ratio:4/3;background:var(--sand);border-radius:12px;display:flex;align-items:center;justify-content:center}
.photo svg{width:44px;height:44px;color:var(--gold);opacity:.55}

/* --- Spec strip (Programs) ------------------------------------- */
.specs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:26px;background:var(--paper)}
.specs>div{padding:18px 20px}
.specs>div+div{border-left:1px solid var(--line)}
.specs b{display:block;font:600 12px "Public Sans";letter-spacing:.12em;text-transform:uppercase;color:var(--silt);margin-bottom:6px}

/* --- FAQ accordions -------------------------------------------- */
.faq{max-width:760px;margin-top:26px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:19px 40px 19px 0;font:600 19px/1.35 Literata,Georgia,serif;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:13px;font:500 26px/1 "Public Sans";color:var(--deep)}
.faq details[open] summary{color:var(--deep)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:2px 0 24px;max-width:66ch}
.rounds{list-style:none;padding:0;margin:16px 0 0}
.rounds li{padding:13px 0;border-top:1px dashed var(--line)}
.rounds b{font-family:Literata,Georgia,serif;font-weight:600}

/* --- Estuary location cards ------------------------------------ */
.loc h3{margin-bottom:6px}
.loc .venue{font-weight:500}
.loc .addr{color:var(--silt);font-size:15.5px}
.loc .when{margin-top:12px;font-size:16px}
.loc .arrow{margin-top:14px}

/* --- Forms ------------------------------------------------------ */
.field{margin-top:20px;text-align:left}
.field>label,.field>.lbl{display:block;font:600 14px "Public Sans";margin-bottom:9px}
input[type=text],input[type=email],select,textarea{width:100%;background:#FCFBF7;border:1px solid var(--line);border-radius:8px;padding:13px 14px;font:inherit;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--deep)}
textarea{min-height:140px;resize:vertical}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;inset:0}
.pill span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font:500 15px "Public Sans";background:var(--paper)}
.pill input:checked+span{background:var(--deep);border-color:var(--deep);color:var(--paper)}
.pill input:focus-visible+span{outline:2.5px solid var(--deep);outline-offset:3px}
.optional{font-weight:400;color:var(--silt)}

/* --- Footer (S8, global) ---------------------------------------- */
.footer{background:var(--deep);color:var(--paper);padding:56px 0 44px}
.footer .wordmark{color:var(--paper)}
.footer .wordmark svg{color:var(--paper)} /* Paper mark on Deep Green — Guidelines §08 dark-band workhorse */
.footer a:not(.btn){color:var(--paper);text-decoration:underline}
.footer .cap{margin-top:26px;max-width:460px}
.footer .cap .lbl{font:600 14px "Public Sans";margin-bottom:10px;display:block}
.footer .cap .row{display:flex;gap:10px}
.footer .cap input{background:var(--paper);border:0;flex:1}
.footer .status{margin-top:30px;font-size:14px;color:rgba(247,245,240,.82);max-width:70ch}
.footer .links{margin-top:12px;font-size:14px}
.footer .links a{margin-right:18px}

/* --- Responsive -------------------------------------------------- */
@media (max-width: 960px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .navlinks,.nav>.wrap>.btn{display:none}
  .menubtn{display:inline-block}
}
@media (max-width: 720px){
  .band{padding:52px 0}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:28px}
  .specs{grid-template-columns:1fr}
  .specs>div+div{border-left:0;border-top:1px solid var(--line)}
  h2{font-size:26px}
}
main[tabindex]{outline:none}
[hidden]{display:none !important}

/* --- Production: form states ------------------------------------ */
.formnote{margin-top:14px;font:500 15px/1.5 "Public Sans",sans-serif}
.formnote--ok{color:var(--deep)}
.formnote--err{color:#7C2B1D}
.band--dark .formnote--ok,.footer .formnote--ok{color:var(--paper)}
.band--dark .formnote--err,.footer .formnote--err{color:#F5CDBD}
.footer form.cap{margin-top:26px;max-width:460px}
button[disabled].btn{opacity:.65;cursor:progress}

/* --- Production: Give slot (SU6, live state) --------------------- */
.give-wrap{max-width:560px;margin:0 auto}
.give-wrap .btn{min-width:200px}