/* BASIS Plano Booster — design system
   Palette + type lifted from the existing site; layout rebuilt in normal flow. */

/* ── type ──────────────────────────────────────────────────────────────────
   Self-hosted, latin subset. These used to come from Google Fonts, which cost
   two extra origins — DNS, TCP and TLS to fonts.googleapis.com for a
   render-blocking stylesheet, then the same again to fonts.gstatic.com before a
   single letter could paint. On a weak signal that was about a second of blank
   page. Same-origin they ride the connection the HTML already opened.

   Josefin Sans and Roboto are variable fonts: one file covers 400 through 700,
   which is why there is no separate 600 or bold file. Lobster has one weight.
   Only the latin subset is shipped — the ✓ and the emoji in the calendar come
   from the system font either way.

   The files are NOT in git (CLAUDE.md rule 2). They live on the asset host
   beside the images and are served from /assets/fonts/ — see server.js. */
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/josefin-sans-var.woff2) format('woff2')}
@font-face{font-family:'Lobster';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lobster-400.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/roboto-var.woff2) format('woff2')}

:root{
  --green:#31a050; --green-lt:#47c76b; --green-dk:#268040;
  --ink:#0d141a; --char:#1d1e20; --char-2:#26282b; --char-3:#303337;
  --cream:#f2f1e6; --white:#fff;
  --muted:#a8adb4; --muted-dk:#56585e; --line:rgba(255,255,255,.10);
  /* the school's two carlines, named by colour — see .lane */
  --lane-red:#c0392f; --lane-red-lt:#e8897c;
  --lane-blue:#1f5f96; --lane-blue-lt:#84b8e0;
  --display:'Lobster',Georgia,serif;
  --head:'Josefin Sans','Trebuchet MS',sans-serif;
  --body:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --wrap:1180px; --pad:clamp(18px,4vw,40px);
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* One continuous mascot watermark behind the entire site. Fixed, so it does not
   scroll or tile; dark sections are translucent to let it through, light ones
   sit on top of it. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--mascot) center/cover no-repeat;opacity:.07}
body>*{position:relative;z-index:1}
body{margin:0;background:var(--char);color:#fff;font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-lt)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── skip link ── */
.skip{position:absolute;left:-9999px;background:var(--green);color:#fff;padding:12px 20px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0;top:0}

/* ── header ── */
.hdr{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid rgba(13,20,26,.10)}
.hdr__in{display:flex;align-items:center;gap:20px;max-width:var(--wrap);margin-inline:auto;padding:10px var(--pad)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand img{width:56px;height:56px;border-radius:50%}
.brand b{font-family:var(--head);font-weight:700;font-size:17px;line-height:1.15;letter-spacing:.01em}
.brand span{display:block;font-size:12px;color:var(--muted-dk);font-weight:400}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav a{font-family:var(--head);font-size:15px;font-weight:600;color:var(--ink);
  text-decoration:none;padding:9px 10px;border-radius:8px;white-space:nowrap}
.nav a:hover{background:rgba(49,160,80,.12);color:var(--green-dk)}
.nav a[aria-current=page]{color:var(--green-dk);box-shadow:inset 0 -2px 0 var(--green)}
.nav__grp{position:relative}
.nav__grp>summary{list-style:none;cursor:pointer;font-family:var(--head);font-size:15px;font-weight:600;
  color:var(--ink);padding:9px 10px;border-radius:8px;display:flex;align-items:center;gap:5px}
.nav__grp>summary:hover{background:rgba(49,160,80,.12);color:var(--green-dk)}
.nav__grp>summary::-webkit-details-marker{display:none}
.nav__grp>summary::marker{content:""}
.nav__grp button{font-family:var(--head);font-size:15px;font-weight:600;color:var(--ink);background:none;
  border:0;cursor:pointer;padding:9px 10px;border-radius:8px;display:flex;align-items:center;gap:5px}
.nav__grp button:hover{background:rgba(49,160,80,.12);color:var(--green-dk)}
.nav__grp ul{position:absolute;top:calc(100% + 4px);left:0;min-width:190px;background:#fff;list-style:none;
  margin:0;padding:6px;border-radius:10px;box-shadow:0 10px 30px rgba(13,20,26,.18);display:none}
.nav__grp[open] ul,.nav__grp:focus-within ul{display:block}
.nav__grp ul a{display:block;padding:9px 12px}
.cta{background:var(--green);color:#fff!important;padding:10px 20px!important;border-radius:8px;font-weight:700!important}
.cta:hover{background:var(--green-dk)!important}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

/* ── sections ── */
.sec{padding:clamp(52px,8vw,96px) 0;position:relative}
.sec--dark{background:color-mix(in srgb,var(--char) 88%,transparent)}
.sec--dark2{background:color-mix(in srgb,var(--char-2) 88%,transparent)}
.sec--cream{background:var(--cream);color:var(--ink)}
.sec--green{background:var(--green);color:#fff}
/* .sec--mascot is a no-op now: the watermark is one fixed page-level layer. */
.sec>.wrap{position:relative}

/* ── type ── */
.display{font-family:var(--display);font-weight:400;color:var(--green-lt);
  font-size:clamp(34px,6vw,62px);line-height:1.12;margin:0 0 .3em}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(32px,5.5vw,54px)}
h2{font-size:clamp(27px,4vw,40px)}
h3{font-size:clamp(21px,2.6vw,27px)}
h4{font-size:19px}
.eyebrow{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-lt);margin:0 0 10px}
.sec--cream .eyebrow{color:var(--green-dk)}
.lead{font-size:clamp(17px,2vw,21px);line-height:1.6;color:#e7e9ec;max-width:62ch}
.sec--cream .lead{color:var(--muted-dk)}
p{margin:0 0 1.1em;max-width:72ch}
.center{text-align:center}
/* `center` may sit on the element itself or on an ancestor — match both, or a
   max-width'd <p> stays anchored left while its text centres inside it. */
.center .lead,.center p,.center .eyebrow,.center h1,.center h2,.center h3,
p.center,.lead.center,.eyebrow.center,.note.center{margin-left:auto;margin-right:auto}
.note{font-size:14px;color:var(--muted);max-width:70ch;margin-inline:auto;text-align:center}
.sec--cream .note{color:var(--muted-dk)}

/* ── buttons ── */
.btn{display:inline-block;font-family:var(--head);font-weight:700;font-size:16px;text-decoration:none;
  padding:14px 30px;border-radius:9px;background:var(--green);color:#fff;border:2px solid var(--green);transition:.15s}
.btn:hover{background:var(--green-dk);border-color:var(--green-dk)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost:hover{background:rgba(255,255,255,.10);border-color:#fff}
.sec--cream .btn--ghost{color:var(--ink);border-color:rgba(13,20,26,.30)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.center .btns{justify-content:center}

/* ── grids ── */
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g2-tight{grid-template-columns:1fr 1fr}
.card{background:var(--char-2);border:1px solid var(--line);border-radius:var(--r);padding:26px;height:100%}
.sec--cream .card{background:#fff;border-color:rgba(13,20,26,.10)}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
.stat{text-align:center}
.stat b{display:block;font-family:var(--display);font-size:clamp(40px,6vw,64px);color:var(--green-lt);line-height:1}
.stat span{font-family:var(--head);font-size:15px;color:var(--muted);font-weight:600}
.sec--cream .stat span{color:var(--muted-dk)}
figure{margin:0}
figure img{border-radius:var(--r);width:100%}
figcaption{font-size:14px;color:var(--muted);margin-top:9px;font-family:var(--head)}
.sec--cream figcaption{color:var(--muted-dk)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.gal img{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%}
/* One 339px-wide column on a phone meant the smallest screen pulled the
   LARGEST thumbnail of any device. Two-up halves the pixels and shows more
   of the album at once. GAL_SIZES in generate.py mirrors this — change both. */
@media (max-width:559px){.gal{grid-template-columns:repeat(2,1fr);gap:10px}}
.person{text-align:center}
.person img{border-radius:50%;aspect-ratio:1;object-fit:cover;width:132px;margin:0 auto 12px}
.person b{display:block;font-family:var(--head);font-size:17px}
.person span{font-size:14px;color:var(--green-lt)}
.sec--cream .person span{color:var(--green-dk)}

/* ── hero ── */
.hero{position:relative;background:color-mix(in srgb,var(--char) 84%,transparent);padding:clamp(48px,8vw,92px) 0;overflow:hidden}

.hero__in{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,44px);align-items:center}
.hero__logo{width:clamp(140px,20vw,230px);border-radius:50%}
/* Each flanking phrase wraps to two lines. Shrink the block to its widest line
   and centre the text inside it, so "Booster" sits under "BASIS Plano" instead
   of hanging off one edge — the block itself still hugs the crest. */
.hero .display{margin:0;width:fit-content;text-align:center}
.hero__l .display{margin-left:auto}
.hero__r .display{margin-right:auto}
@media(max-width:820px){
  .hero__in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .hero__l .display,.hero__r .display{margin-inline:auto}
}

/* ── FAQ ── */
details.faq{border:1px solid var(--line);border-radius:11px;margin-bottom:11px;background:var(--char-2)}
.sec--cream details.faq{background:#fff;border-color:rgba(13,20,26,.10)}
details.faq>summary{cursor:pointer;padding:17px 20px;font-family:var(--head);font-weight:700;font-size:17px;list-style:none;display:flex;gap:12px}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::before{content:"+";color:var(--green-lt);font-size:21px;line-height:1;flex:0 0 auto}
details.faq[open]>summary::before{content:"–"}
details.faq .bd{padding:0 20px 18px 52px}
/* App names in an answer, picked out so a parent scanning for the one they need
   finds it. Only the ones we have an address for are links, and only those get
   the underline — a green name with no rule under it is not clickable. */
.appname{font-family:var(--head);font-weight:700;color:var(--green-lt)}
a.appname{text-decoration:none;border-bottom:2px solid rgba(49,160,80,.45)}
a.appname:hover{color:#fff;border-bottom-color:var(--green-lt)}
.sec--cream .appname{color:var(--green-dk)}
.sec--cream a.appname:hover{color:var(--green-dk);border-bottom-color:var(--green-dk)}
details.faq .bd p:last-child{margin-bottom:0}

/* ── footer ── */
.ftr{background:var(--ink);padding:56px 0 30px;font-size:15px}
.ftr__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px}
.ftr h4{font-family:var(--head);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-lt);margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:9px}
.ftr a{color:#cbd0d6;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr__btm{border-top:1px solid rgba(255,255,255,.10);margin-top:34px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:#8b9198;font-size:13px}

@media(max-width:1060px){
  .burger{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);
    flex-direction:column;align-items:stretch;padding:10px var(--pad) 18px;
    border-bottom:1px solid rgba(13,20,26,.12);gap:0}
  .nav.open{display:flex}
  .nav a,.nav__grp button{width:100%;text-align:left;padding:12px 8px}
  .nav__grp ul{position:static;display:block;box-shadow:none;background:transparent;padding-left:14px}
  .nav__grp ul a{color:var(--muted-dk)}
  .cta{margin-top:8px;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── roster tables ── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.roster{width:100%;border-collapse:collapse;font-size:16px;min-width:420px}
table.roster caption{font-family:var(--head);font-weight:700;font-size:clamp(21px,2.6vw,27px);
  text-align:left;padding:0 0 14px;color:inherit}
table.roster th,table.roster td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
.sec--cream table.roster th,.sec--cream table.roster td{border-bottom-color:rgba(13,20,26,.10)}
table.roster thead th{font-family:var(--head);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-lt);border-bottom-width:2px}
.sec--cream table.roster thead th{color:var(--green-dk)}
table.roster tbody th{font-weight:700;font-family:var(--head);font-size:17px;white-space:nowrap}
table.roster tbody tr:hover{background:rgba(49,160,80,.07)}
table.roster td{color:#d8dce1}
.sec--cream table.roster td{color:var(--muted-dk)}
.tag{display:inline-block;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:3px 9px;border-radius:999px;background:rgba(49,160,80,.16);color:var(--green-lt);margin:2px 4px 2px 0}
.sec--cream .tag{background:rgba(49,160,80,.14);color:var(--green-dk)}
.tag--open{background:rgba(255,255,255,.10);color:var(--muted)}
.sec--cream .tag--open{background:rgba(13,20,26,.07);color:var(--muted-dk)}


/* ══════════ org chart ══════════ */
.org{--boxbd:rgba(13,20,26,.55)}
.org ul{list-style:none;margin:0;padding:0}
.org__tier{font-family:var(--head);font-weight:700;font-size:clamp(20px,2.5vw,26px);
  text-align:center;margin:0 0 20px;text-decoration:underline;text-underline-offset:6px}
.org__top{display:flex;justify-content:center;margin-bottom:14px}
.org__top .box{min-width:230px}
.org__link{width:2px;height:18px;background:var(--boxbd);margin:0 auto 14px;opacity:.5}
.org__board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:940px;margin:0 auto}
.org__cols{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:start}
.org__col{display:flex;flex-direction:column;gap:12px}

.box{border:2px solid var(--boxbd);border-radius:8px;padding:11px 12px;text-align:center;
  font-family:var(--head);line-height:1.25;display:flex;flex-direction:column;justify-content:center;
  min-height:62px}
.box b{display:block;font-weight:700;font-size:15px}
.box span{display:block;font-weight:600;font-size:13px;opacity:.92;margin-top:2px}

/* Colour = REPORTING LINE. Each chair's box matches the VP they report to.
   Muted stand-ins for the source chart's red / purple / gold. */
.box--pres{background:#1e5c34;color:#fff}   /* President                    */
.box--fin {background:#2b7b76;color:#fff}   /* Treasurer                    */
.box--evt {background:#c2703f;color:#fff}   /* VP Events        (was red)   */
.box--com {background:#6b5ca5;color:#fff}   /* VP Comms & FR    (was purple)*/
.box--sec {background:#b3862f;color:#fff}   /* Secretary        (was gold)  */
.box--open{background:#efecf8;color:#4a4270;border-style:dashed;border-color:#6b5ca5}
.sec--dark .org,.sec--dark2 .org{--boxbd:rgba(255,255,255,.45)}
.sec--dark .box--open,.sec--dark2 .box--open{background:rgba(107,92,165,.18);color:#cfc8ea;border-color:#8c7ec4}
/* legend */
.org__legend{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:center;margin:0 auto 30px;text-align:center;max-width:none;
  font-family:var(--head);font-size:14px;font-weight:600}
.org__legend span{display:flex;align-items:center;gap:8px}
.org__legend i{width:15px;height:15px;border-radius:4px;border:2px solid var(--boxbd);display:inline-block}

@media(max-width:1080px){ .org__cols{grid-template-columns:repeat(4,1fr)} }
@media(max-width:820px) { .org__board{grid-template-columns:repeat(2,1fr)}
                          .org__cols{grid-template-columns:repeat(3,1fr)} }
@media(max-width:600px) { .org__cols{grid-template-columns:repeat(2,1fr)}
                          .org__top .box{min-width:0;width:100%} }
@media(max-width:400px) { .org__board,.org__cols{grid-template-columns:1fr} }

/* ── contact tables: stack into labelled rows on narrow screens ── */
@media(max-width:640px){
  table.roster{min-width:0;display:block}
  table.roster thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.roster tbody,table.roster tr,table.roster th,table.roster td{display:block;width:100%}
  table.roster tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .sec--cream table.roster tr{border-bottom-color:rgba(13,20,26,.10)}
  table.roster tbody th{padding:0 0 6px;border:0;white-space:normal;font-size:18px}
  table.roster td{padding:2px 0;border:0}
  table.roster td[data-label]::before{content:attr(data-label) ": ";
    font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--green-dk);margin-right:6px}
  .sec--dark table.roster td[data-label]::before,
  .sec--dark2 table.roster td[data-label]::before{color:var(--green-lt)}
  table.roster tbody tr:hover{background:none}
}
table.roster td a{color:var(--green-dk);word-break:break-word}
.sec--dark table.roster td a,.sec--dark2 table.roster td a{color:var(--green-lt)}

/* ── events calendar ── */
.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.cal__m{background:var(--char-2);border:1px solid var(--line);border-radius:var(--r);padding:20px;height:100%}
.sec--cream .cal__m{background:#fff;border-color:rgba(13,20,26,.10)}
.cal__m h3{font-size:20px;margin:0 0 12px;padding-bottom:9px;border-bottom:2px solid var(--green);
  display:flex;align-items:baseline;gap:8px}
.cal__m ul{list-style:none;margin:0;padding:0}
.cal__m li{padding:7px 0;font-size:15px;line-height:1.45;border-bottom:1px dashed var(--line)}
.sec--cream .cal__m li{border-bottom-color:rgba(13,20,26,.09)}
.cal__m li:last-child{border-bottom:0}
.cal__d{font-family:var(--head);font-weight:700;color:var(--green-lt);margin-right:6px}
.sec--cream .cal__d{color:var(--green-dk)}
.cal__sub{font-family:var(--head);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:12px 0 2px;font-weight:700}
.sec--cream .cal__sub{color:var(--muted-dk)}
.who{display:inline-block;font-family:var(--head);font-size:10px;font-weight:700;letter-spacing:.07em;
  padding:1px 7px;border-radius:999px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.who--b{background:rgba(63,111,143,.22);color:#8fbcdb}
.who--s{background:rgba(49,160,80,.22);color:var(--green-lt)}
.sec--cream .who--b{background:rgba(63,111,143,.16);color:#2f5c7a}
.sec--cream .who--s{background:rgba(49,160,80,.16);color:var(--green-dk)}
.hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.hl div{background:var(--green);color:#fff;border-radius:var(--r);padding:18px 16px;text-align:center}
.hl b{display:block;font-family:var(--head);font-size:17px;margin-bottom:4px}
.hl span{font-size:14px;opacity:.95;line-height:1.4}

/* ── modal dialog + forms ── */
dialog.modal{border:0;padding:0;border-radius:16px;max-width:520px;width:calc(100% - 32px);
  background:var(--cream);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.42)}
dialog.modal::backdrop{background:rgba(9,12,15,.66)}
.modal__hd{display:flex;align-items:flex-start;gap:14px;padding:24px 24px 0}
.modal__hd h2{margin:0;font-size:23px}
.modal__hd p{margin:6px 0 0;font-size:14px;color:var(--muted-dk);max-width:none}
.modal__x{margin-left:auto;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;
  color:var(--muted-dk);padding:0 2px;border-radius:6px}
.modal__x:hover{color:var(--ink);background:rgba(13,20,26,.07)}
.modal form{padding:18px 24px 24px}
.fld{margin-bottom:14px}
.fld label{display:block;font-family:var(--head);font-weight:700;font-size:13px;margin-bottom:5px}
.fld .req{color:#b4453a}
.fld input,.fld textarea{width:100%;font:inherit;font-size:15px;padding:11px 13px;border-radius:9px;
  border:1px solid rgba(13,20,26,.24);background:#fff;color:var(--ink)}
.fld textarea{min-height:104px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.modal .btns{margin-top:18px}
.modal__note{font-size:12px;color:var(--muted-dk);margin:12px 0 0}
/* Result of a submission. The form used to close silently whether or not the
   message went anywhere, so say plainly which happened. */
.modal__status{margin:14px 0 0;padding:11px 13px;border-radius:9px;font-size:14px;line-height:1.5}
.modal__status.is-ok{background:rgba(49,160,80,.12);border:1px solid rgba(49,160,80,.45);
  color:var(--green-dk)}
.modal__status.is-err{background:rgba(180,69,58,.10);border:1px solid rgba(180,69,58,.40);
  color:#8f3128}
/* Honeypot: reachable by a bot reading the DOM, invisible to everyone else.
   Kept out of the layout and out of tab order rather than display:none, which
   some bots check for. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  dialog.modal[open]{animation:pop .16s ease-out}
  @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* short pages: fill the viewport and centre their panel vertically */
.sec.panel{min-height:calc(100vh - 78px);display:flex;align-items:center;justify-content:center}
@media(max-width:1060px){.sec.panel{min-height:calc(100vh - 70px)}}

/* ── gallery lightbox ── */
.gal button{padding:0;border:0;background:none;cursor:zoom-in;display:block;border-radius:10px;
  overflow:hidden;position:relative}
.gal button:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.gal button::after{content:"";position:absolute;inset:0;background:rgba(9,12,15,0);transition:background .15s}
.gal button:hover::after{background:rgba(9,12,15,.22)}
@media(hover:none){.gal button:hover::after{background:none}}

/* position:fixed, not the UA default of absolute: an absolutely positioned
   dialog is placed against the document, so opening a photo from the bottom of
   a long gallery put the viewer offscreen at the top of the page. */
dialog.lb{position:fixed;inset:0;border:0;padding:0;background:transparent;
  max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden}
/* showModal() does not stop the page behind from scrolling; this does. */
html.lb-open{overflow:hidden}
dialog.lb::backdrop{background:rgba(9,12,15,.93)}
.lb__fig{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:56px 62px}
.lb__fig img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;
  object-fit:contain;border-radius:8px;background:#111}
.lb__cap{color:#dfe3e8;font-family:var(--head);font-size:14px;text-align:center;margin:0;
  max-width:70ch;min-height:1.2em}
.lb__btn{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);
  color:#fff;border:0;width:46px;height:46px;border-radius:50%;font-size:24px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb__btn:hover{background:rgba(255,255,255,.24)}
.lb__btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.lb__prev{left:12px}.lb__next{right:12px}
.lb__x{position:fixed;top:12px;right:12px;transform:none;width:42px;height:42px;font-size:22px}
.lb__n{position:fixed;top:20px;left:18px;color:#aeb5bd;font-family:var(--head);font-size:13px;
  letter-spacing:.08em}
@media(max-width:620px){
  .lb__fig{padding:52px 12px 74px}
  .lb__btn{top:auto;bottom:14px;transform:none}
  .lb__prev{left:calc(50% - 58px)}.lb__next{right:calc(50% - 58px)}
}

/* ── paw cursor (lifted from the original site) ── */
body{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='29.4' height='29.4' viewBox='0 0 42 42'><g fill='%23355e39' stroke='%23ffffff' stroke-width='0.9' transform='translate(0,1)'><path d='M12,10.5 C9.5,10 8,10.8 8,12 C8,10.5 5,10.5 3.5,13 C2.5,15 3,18 6,20 C8,21.7 10,22 12,22 C14,22 16,21.7 18,20 C21,18 21.5,15 20.5,13 C19,10.5 16,10.5 16,12 C16,10.8 14.5,10 12,10.5 Z' transform='translate(12,16) scale(0.85,-0.85) translate(-12,-16)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(5,6) rotate(-25)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(9.5,3) rotate(-8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(14.5,3) rotate(8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(19,6) rotate(25)'/></g><g fill='%23355e39' stroke='%23ffffff' stroke-width='0.9' transform='translate(19,20)'><path d='M12,10.5 C9.5,10 8,10.8 8,12 C8,10.5 5,10.5 3.5,13 C2.5,15 3,18 6,20 C8,21.7 10,22 12,22 C14,22 16,21.7 18,20 C21,18 21.5,15 20.5,13 C19,10.5 16,10.5 16,12 C16,10.8 14.5,10 12,10.5 Z' transform='translate(12,16) scale(0.85,-0.85) translate(-12,-16)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(5,6) rotate(-25)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(9.5,3) rotate(-8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(14.5,3) rotate(8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(19,6) rotate(25)'/></g></svg>") 6 6,auto}
a,button,summary,label,[role="button"],.gal button{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='29.4' height='29.4' viewBox='0 0 42 42'><g fill='%23355e39' stroke='%23ffffff' stroke-width='0.9' transform='translate(0,1)'><path d='M12,10.5 C9.5,10 8,10.8 8,12 C8,10.5 5,10.5 3.5,13 C2.5,15 3,18 6,20 C8,21.7 10,22 12,22 C14,22 16,21.7 18,20 C21,18 21.5,15 20.5,13 C19,10.5 16,10.5 16,12 C16,10.8 14.5,10 12,10.5 Z' transform='translate(12,16) scale(0.85,-0.85) translate(-12,-16)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(5,6) rotate(-25)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(9.5,3) rotate(-8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(14.5,3) rotate(8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(19,6) rotate(25)'/></g><g fill='%23355e39' stroke='%23ffffff' stroke-width='0.9' transform='translate(19,20)'><path d='M12,10.5 C9.5,10 8,10.8 8,12 C8,10.5 5,10.5 3.5,13 C2.5,15 3,18 6,20 C8,21.7 10,22 12,22 C14,22 16,21.7 18,20 C21,18 21.5,15 20.5,13 C19,10.5 16,10.5 16,12 C16,10.8 14.5,10 12,10.5 Z' transform='translate(12,16) scale(0.85,-0.85) translate(-12,-16)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(5,6) rotate(-25)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(9.5,3) rotate(-8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(14.5,3) rotate(8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(19,6) rotate(25)'/></g></svg>") 6 6,pointer}
input,textarea,select{cursor:auto}
.gal button{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='29.4' height='29.4' viewBox='0 0 42 42'><g fill='%23355e39' stroke='%23ffffff' stroke-width='0.9' transform='translate(0,1)'><path d='M12,10.5 C9.5,10 8,10.8 8,12 C8,10.5 5,10.5 3.5,13 C2.5,15 3,18 6,20 C8,21.7 10,22 12,22 C14,22 16,21.7 18,20 C21,18 21.5,15 20.5,13 C19,10.5 16,10.5 16,12 C16,10.8 14.5,10 12,10.5 Z' transform='translate(12,16) scale(0.85,-0.85) translate(-12,-16)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(5,6) rotate(-25)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(9.5,3) rotate(-8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(14.5,3) rotate(8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(19,6) rotate(25)'/></g><g fill='%23355e39' stroke='%23ffffff' stroke-width='0.9' transform='translate(19,20)'><path d='M12,10.5 C9.5,10 8,10.8 8,12 C8,10.5 5,10.5 3.5,13 C2.5,15 3,18 6,20 C8,21.7 10,22 12,22 C14,22 16,21.7 18,20 C21,18 21.5,15 20.5,13 C19,10.5 16,10.5 16,12 C16,10.8 14.5,10 12,10.5 Z' transform='translate(12,16) scale(0.85,-0.85) translate(-12,-16)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(5,6) rotate(-25)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(9.5,3) rotate(-8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(14.5,3) rotate(8)'/><path d='M0,-3.5 C1.8,-3.5 2,-1 2,1 C2,3 1,3.5 0,3.5 C-1,3.5 -2,3 -2,1 C-2,-1 -1.8,-3.5 0,-3.5 Z' transform='translate(19,6) rotate(25)'/></g></svg>") 6 6,zoom-in}
@media (hover:none),(pointer:coarse){
  body,a,button,summary,label,[role="button"],.gal button{cursor:auto}
}

/* two-up photo rows: equal height regardless of the source aspect ratio */
.g2--even figure{height:100%}
.g2--even img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}

/* ── membership tiers ── */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;align-items:start}
.tier{background:#fff;border:1px solid rgba(13,20,26,.12);border-radius:var(--r);padding:26px;height:100%;
  display:flex;flex-direction:column}
.sec--dark .tier,.sec--dark2 .tier{background:var(--char-2);border-color:var(--line)}
.tier--best{border:2px solid var(--green);box-shadow:0 6px 24px rgba(49,160,80,.14)}
.tier h3{font-size:20px;margin:0 0 4px;line-height:1.25}
.tier__price{font-family:var(--display);font-size:42px;color:var(--green-dk);line-height:1;margin:10px 0 2px}
.sec--dark .tier__price,.sec--dark2 .tier__price{color:var(--green-lt)}
.tier__valid{font-family:var(--head);font-size:13px;color:var(--muted-dk);margin:0 0 16px}
.sec--dark .tier__valid,.sec--dark2 .tier__valid{color:var(--muted)}
.tier ul{list-style:none;margin:0 0 18px;padding:0;flex:1}
.tier li{position:relative;padding:0 0 11px 26px;font-size:15px;line-height:1.5}
.tier li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:8px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);
  transform:rotate(-45deg)}
.tier__note{font-size:13px;font-weight:700;color:var(--green-dk);margin:0 0 16px}
.sec--dark .tier__note,.sec--dark2 .tier__note{color:var(--green-lt)}
.tier .btn{width:100%;text-align:center}
.tier__tag{display:inline-block;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--green);color:#fff;padding:3px 10px;border-radius:999px;margin-bottom:10px}

/* ── social links ── */
.social{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;background:rgba(255,255,255,.09);color:#cbd0d6;transition:.15s}
.social a:hover{background:var(--green);color:#fff}
.social svg{width:20px;height:20px;fill:currentColor}
.hdr .social{margin:0}
.hdr .social a{width:34px;height:34px;background:transparent;color:var(--ink)}
.hdr .social a:hover{background:rgba(49,160,80,.14);color:var(--green-dk)}
.hdr .social svg{width:18px;height:18px}
@media(max-width:1060px){.hdr .social{display:none}}
.cal__x{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.sec--cream .cal__x{color:var(--muted-dk)}

/* ── shade campaign ── */
.camp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,34px);align-items:start}
@media(max-width:860px){.camp{grid-template-columns:1fr}}
.camp__goal{background:var(--green);color:#fff;border-radius:var(--r);padding:26px;text-align:center}
.camp__goal b{display:block;font-family:var(--display);font-size:clamp(38px,6vw,56px);line-height:1}
.camp__goal span{display:block;font-family:var(--head);font-size:14px;opacity:.95;margin-top:6px}
.camp__spec{display:inline-block;margin-top:14px;background:rgba(0,0,0,.22);border-radius:999px;
  padding:5px 14px;font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.04em}
.camp__perks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.camp__perks div{text-align:center;padding:16px 8px;border:1px solid rgba(13,20,26,.12);border-radius:11px}
.sec--dark .camp__perks div,.sec--dark2 .camp__perks div{border-color:var(--line)}
.camp__perks b{display:block;font-family:var(--head);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-dk);margin-top:8px}
.sec--dark .camp__perks b,.sec--dark2 .camp__perks b{color:var(--green-lt)}
.camp__perks svg{width:30px;height:30px;stroke:var(--green);fill:none;stroke-width:1.8}
.camp__ask{border-left:4px solid var(--green);padding:4px 0 4px 18px;margin:22px 0}
.camp__ask b{font-family:var(--head);font-size:17px;display:block;margin-bottom:4px}
.camp__major{background:rgba(49,160,80,.10);border:1px dashed var(--green);border-radius:11px;
  padding:18px 20px;margin-top:18px}
.camp__major b{font-family:var(--head);font-size:16px;display:block}
/* These callouts are boxed and short; the global 72ch measure left the text
   ending halfway across a full-width panel. Let them fill the box. */
.camp__major p,.camp__ask p{max-width:none}

/* sold-out products stay visible but read as unavailable */
.card--sold{opacity:.72}
.card--sold img{filter:grayscale(.55)}
.sold{display:inline-block;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(13,20,26,.10);color:var(--muted-dk);
  padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:2px}
.stock{display:inline-block;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(49,160,80,.16);color:var(--green-dk);
  padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:2px}

/* ── year calendar: month tiles that open a detail dialog ── */
.yr{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.yr button{text-align:left;font:inherit;cursor:pointer;background:var(--char-2);color:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:18px;transition:.15s;height:100%}
.sec--cream .yr button{background:#fff;color:var(--ink);border-color:rgba(13,20,26,.12)}
.yr button:hover{border-color:var(--green);transform:translateY(-2px)}
.yr button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.yr__m{display:flex;align-items:baseline;gap:8px;font-family:var(--head);font-weight:700;font-size:20px}
.yr__y{font-size:13px;opacity:.6;font-weight:600}
.yr__c{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.yr__c span{font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.05em;
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.yr__c .b{background:rgba(63,111,143,.22);color:#8fbcdb}
.yr__c .s{background:rgba(49,160,80,.22);color:var(--green-lt)}
.yr__c .n{background:rgba(179,134,47,.22);color:#d8b667}
.sec--cream .yr__c .b{background:rgba(63,111,143,.16);color:#2f5c7a}
.sec--cream .yr__c .s{background:rgba(49,160,80,.16);color:var(--green-dk)}
.sec--cream .yr__c .n{background:rgba(179,134,47,.20);color:#7a5c14}

dialog.month{border:0;padding:0;border-radius:16px;max-width:620px;width:calc(100% - 32px);
  background:var(--cream);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.42)}
dialog.month::backdrop{background:rgba(9,12,15,.7)}
.month__hd{display:flex;align-items:flex-start;gap:14px;padding:24px 24px 6px}
.month__hd h2{margin:0;font-size:26px}
.month__bd{padding:0 24px 24px;max-height:70vh;overflow:auto}
.month__bd h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dk);
  margin:20px 0 8px}
.month__bd ul{list-style:none;margin:0;padding:0}
.month__bd li{padding:8px 0;border-bottom:1px dashed rgba(13,20,26,.12);font-size:15px;line-height:1.5}
.month__bd li:last-child{border-bottom:0}
.month__empty{color:var(--muted-dk);font-style:italic}
/* inline text that opens a dialog should look like a link, not a button */
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--green-lt);
  text-decoration:underline;cursor:pointer}
.sec--cream .linkish,.month__bd .linkish,details.faq .linkish{color:var(--green-dk)}
.linkish:hover{opacity:.8}

/* ── "ways to help" — the page's call to action, not a mid-page afterthought ── */
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:34px}
.way{background:#fff;border:2px solid rgba(13,20,26,.10);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;text-align:center;transition:.16s;height:100%}
.sec--dark .way,.sec--dark2 .way{background:var(--char-2);border-color:var(--line)}
.way:hover{border-color:var(--green);transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(49,160,80,.16)}
.way__i{width:56px;height:56px;border-radius:50%;background:rgba(49,160,80,.14);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.way__i svg{width:28px;height:28px;stroke:var(--green-dk);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.sec--dark .way__i,.sec--dark2 .way__i{background:rgba(49,160,80,.20)}
.sec--dark .way__i svg,.sec--dark2 .way__i svg{stroke:var(--green-lt)}
.way h3{font-size:19px;margin:0 0 6px}
.way p{font-size:15px;flex:1;margin-bottom:16px}
.way .btn{width:100%;padding:11px 18px;font-size:15px}

/* ── featured campaign band ── */
.feat{background:var(--green);border-radius:18px;padding:clamp(26px,4vw,42px);color:#fff;
  box-shadow:0 14px 40px rgba(49,160,80,.28)}
.feat__tag{display:inline-block;background:rgba(255,255,255,.20);font-family:var(--head);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;margin-bottom:14px}
.feat h2{color:#fff;margin:0 0 10px;font-size:clamp(28px,4.2vw,42px)}
/* scope to direct children: .feat p would also hit text inside the white panel,
   and at higher specificity than .feat__goal, painting it white on white */
.feat>p,.feat__grid>div>p{color:rgba(255,255,255,.94)}
.feat__panel p{color:var(--ink)}
.feat__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,34px);align-items:center;
  margin-top:22px}
@media(max-width:820px){.feat__grid{grid-template-columns:1fr}}
.feat__panel{background:#fff;border-radius:14px;padding:22px;color:var(--ink)}
.feat__panel .feat__goal{font-family:var(--display);font-size:clamp(34px,5vw,48px);color:var(--green-dk);
  line-height:1;margin:0}
.feat__panel .feat__sub{font-family:var(--head);font-size:14px;color:var(--muted-dk);margin:2px 0 14px}
.feat .btn{background:#fff;color:var(--green-dk);border-color:#fff}
.feat .btn:hover{background:#f0f5f1;border-color:#f0f5f1}

/* Zeffy's thermometer iframe contains a full-height toast container, which makes
   the frame scrollable. Clip it: the visible content is a single line + bar. */
.therm{overflow:hidden;height:64px;border-radius:6px}
.therm iframe{display:block;border:0;width:calc(100% + 22px);height:104px;background:transparent}

/* artwork behind the featured campaign band */
.feat{position:relative;overflow:hidden}
.feat::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--mascot) center/cover no-repeat;opacity:.13;mix-blend-mode:luminosity}
.feat>*{position:relative;z-index:1}
.ended{font-family:var(--head);font-size:14px;font-weight:700;color:var(--muted-dk);
  background:rgba(13,20,26,.06);border-radius:8px;padding:10px 14px;margin:12px 0 14px;text-align:center}

/* ── element & grade parents roster ── */
.ep{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:32px}
.ep__g{background:var(--char-2);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.sec--cream .ep__g{background:#fff;border-color:rgba(13,20,26,.10)}
.ep__g h3{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-lt);
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.sec--cream .ep__g h3{color:var(--green-dk);border-bottom-color:rgba(13,20,26,.10)}
.ep__g ul{list-style:none;margin:0;padding:0}
.ep__g li{display:flex;gap:10px;align-items:baseline;padding:6px 0;font-size:15px}
.ep__el{font-family:var(--head);font-weight:700;font-size:13px;color:var(--green-lt);
  min-width:52px;flex:0 0 auto}
.sec--cream .ep__el{color:var(--green-dk)}
.ep__n{color:#dfe3e8}
.sec--cream .ep__n{color:var(--ink)}
.ep__open{color:var(--muted);font-style:italic;font-size:14px}
.sec--cream .ep__open{color:var(--muted-dk)}
/* STEAM Saturday session list */
.sessions{list-style:none;padding:0;margin:0 0 14px}
.sessions li{padding:10px 0;border-bottom:1px dashed rgba(13,20,26,.12)}
.sec--dark .sessions li,.sec--dark2 .sessions li{border-bottom-color:var(--line)}
.sessions li:last-child{border-bottom:0}
.sessions b{display:block;font-family:var(--head);font-size:15px}
.sessions span{display:block;font-size:14px;color:var(--muted-dk);margin-top:2px}
.sec--dark .sessions span,.sec--dark2 .sessions span{color:var(--muted)}
.sessions em{display:block;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green-dk);font-style:normal;margin-top:4px}
.sec--dark .sessions em,.sec--dark2 .sessions em{color:var(--green-lt)}

/* ── carpool & dismissal ── */
/* The carlines are named by colour, so the chip always spells out the line and
   the door too — the colour is reinforcement, never the only cue. */
.lane{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-weight:700;
  font-size:13px;letter-spacing:.05em;line-height:1.4;padding:3px 12px;border-radius:999px;
  border:2px solid currentColor;white-space:nowrap}
.lane::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 auto}
.lane--red{color:var(--lane-red-lt)}
.lane--blue{color:var(--lane-blue-lt)}
.sec--cream .lane--red{color:var(--lane-red)}
.sec--cream .lane--blue{color:var(--lane-blue)}
.lane + .lane{margin-left:6px}
.card h3 .lane{vertical-align:middle}
/* dismissal time, sitting under the grade band on a .cal__m card */
.dsm__t{font-family:var(--head);font-weight:700;font-size:25px;line-height:1;
  color:var(--green-lt);margin:0 0 12px}
.sec--cream .dsm__t{color:var(--green-dk)}

/* ── corner mascot ── */
/* The husky is drawn by WebGL into a canvas (assets/husky.js), on a transparent
   background — no disc, no card, just the drawing sitting on the page.
   It is pinned to the viewport rather than to the page, and what scrolls behind it
   alternates charcoal and cream, so it is drawn in black or in white depending on
   which the background is not; husky.js measures that and flips the ink. The shadow
   under it is a neutral grey so that one value works in both states — a dark shadow
   vanishes on charcoal and a light one vanishes on cream, but grey reads as a soft
   halo against the dark and as a cast shadow against the cream, and it is what keeps
   the drawing off a photograph on the gallery.
   Below the header's z-index 50 on purpose, so an open mobile menu covers it. */
.husky{position:fixed;z-index:40;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));
  /* Small enough on a phone that it clips the edge of a paragraph rather than a
     word of it, and big enough on a desktop that the drawing is legible. */
  width:clamp(78px,21vw,156px);aspect-ratio:1;
  pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(125,130,136,.72));
  opacity:0;transition:opacity .5s ease}
.husky--in{opacity:1}
.husky__c{display:block;width:100%;height:100%}
/* Orbit is a mouse affordance. On a touch screen the badge stays inert so a thumb
   scrolling past the corner scrolls the page instead of spinning the dog. */
.husky--grab{pointer-events:auto;cursor:grab}
.husky--grab:active{cursor:grabbing}
@media(prefers-reduced-motion:reduce){.husky{display:none}}