:root{
  --bg:#F7F3F2; --bg-top:#F3ECEA; --card:#FFFFFF; --wash:#E9EEF8; --tint:#F1EBE9;
  --ink:#1B1618; --ink-2:#6B6264;
  --edge:#E7DFDD;
  --blue:#17458C; --blue-2:#2C6BD1; --blue-ink:#F4F7FD;
  --warm:#9C443E; --warm-ink:#9C443E; --warm-wash:#F6E7E5;
  --deep:#1F2A5E; --deep-ink:#EDF0FA;
  --red:#D2685F;
  --r:26px; --r-sm:16px;
  --lift:0 1px 2px rgba(60,40,38,.05), 0 10px 28px -18px rgba(60,40,38,.42);
  --sans:'Figtree','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --maxw:1080px;
  color-scheme:light;
}
*{box-sizing:border-box}
/* Mobile Safari (and Chrome on Android) silently enlarges text in a narrow
 * column it judges "hard to read" — a heuristic called font boosting. It can
 * blow up a heading far past its own font-size and over whatever sits above
 * it; this is what put a giant "MOD" over "← All events" on a phone. Turning
 * it off is the standard fix and costs nothing on any other device. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  background-image:linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 340px);
  background-repeat:no-repeat;
  font-family:var(--sans); font-size:16.5px; line-height:1.58; font-weight:450;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.07; text-wrap:balance}
p{margin:0}
a{color:inherit}
/* Links the board wrote into a description, a post or an answer. Everything
   else on the page is a link in a place that already looks like one — a nav
   row, a card, a button. These sit in the middle of a sentence, where
   color:inherit above makes them indistinguishable from the words around
   them: two of them side by side read as one run-on phrase, and a single one
   reads as nothing at all. */
.lk{color:var(--blue); text-decoration:underline; text-underline-offset:2px}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--blue-2); outline-offset:3px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:22px}
.lbl{font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2)}
.none{font-family:var(--mono); font-size:12px; color:var(--ink-2); padding:20px 0}
[hidden]{display:none !important}

/* ---------- nav ---------- */
.nav{box-shadow:inset 0 -1px 0 var(--edge); background:color-mix(in srgb, var(--bg-top) 82%, transparent); backdrop-filter:blur(10px); position:sticky; top:0; z-index:40}
.nav-in{display:flex; align-items:center; gap:14px; padding-block:15px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto}
.brand-dot{width:26px; height:26px; border-radius:50%; flex:none; background:var(--blue); box-shadow:inset 0 0 0 3px var(--bg), 0 0 0 2px var(--blue); overflow:hidden; display:grid; place-items:center}
.brand-dot img{width:100%; height:100%; object-fit:contain; display:block; border-radius:50%}
/* The mark is an image, not a circle, so it gets room to be one. Left in the
   26px dot it would be squeezed round and read as a smudge on every page.
   index.html ships this class, so it applies from the first paint. */
.brand-dot.has-logo{width:46px; height:38px; border-radius:0; background:none; box-shadow:none; overflow:visible; display:block}
.brand-dot.has-logo img{width:100%; height:100%; object-fit:contain; border-radius:0; display:block}
.brand-name{font-weight:700; font-size:16.5px; letter-spacing:-.03em}
.links{display:flex; gap:2px; flex-wrap:wrap}
.nav-burger{display:none; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border-radius:13px; border:1px solid var(--edge); background:var(--card); color:var(--ink); cursor:pointer}
.nav-burger:focus-visible{outline:2px solid var(--blue-2); outline-offset:2px}
.nav-burger i{display:block; width:17px; height:1.5px; background:currentColor; border-radius:2px; position:relative}
.nav-burger i::before,.nav-burger i::after{content:''; position:absolute; left:0; width:17px; height:1.5px; background:currentColor; border-radius:2px}
.nav-burger i::before{top:-5.5px}
.nav-burger i::after{top:5.5px}
.nav.open .nav-burger i{background:transparent}
.nav.open .nav-burger i::before{top:0; transform:rotate(45deg)}
.nav.open .nav-burger i::after{top:0; transform:rotate(-45deg)}
/* The full bar needs about 1030px of content width. Below that it used to
   wrap onto a second row, Admin stranded underneath; the menu button is the
   better answer at that size. */
@media (max-width:1000px){
  .nav-burger{display:inline-flex}
  .links{display:none; order:10; width:100%; flex-direction:column; align-items:stretch; gap:1px; padding:4px 0 6px}
  .links a,.navg-b{font-size:13.5px; padding:12px 13px; border-radius:12px}
  #openAdmin{display:none}
  .nav.open .links{display:flex}
  .nav.open #openAdmin{display:inline-block; order:11; width:100%; text-align:center; margin-bottom:8px}
}
/* Four items instead of nine, so the type can be read at arm's length. */
.links a,.navg-b{
  font-family:var(--mono); font-size:13.5px; letter-spacing:.045em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; padding:9px 13px; border-radius:100px;
}
.links > a:hover,.links > a.on,.navg-b:hover,.navg-b.on{color:var(--ink); background:var(--tint)}

/* ---- nav menus ---- */
.navg{position:relative}
.navg-b{display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; cursor:pointer}
.navg-c{width:10px; height:6px; flex:none; opacity:.75; transition:transform .14s ease}
.navg-b[aria-expanded="true"] .navg-c{transform:rotate(180deg)}
.navg-b[aria-expanded="true"]{color:var(--ink); background:var(--tint)}
.navg-p{
  position:absolute; top:calc(100% + 7px); left:0; z-index:60; min-width:212px;
  display:flex; flex-direction:column; gap:1px; padding:7px;
  background:var(--card); border:1px solid var(--edge); border-radius:16px; box-shadow:var(--lift);
}
.navg-p a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.045em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; padding:10px 12px; border-radius:11px; white-space:nowrap;
}
.navg-p a:hover,.navg-p a.on{color:var(--ink); background:var(--tint)}
/* In the burger menu a group opens in place, as an indented block. This has to
   come after the rules above, which are equally specific and would otherwise
   keep the floating panel. */
@media (max-width:1000px){
  .navg{display:block; position:static}
  .navg-b{display:flex; width:100%; justify-content:space-between; text-align:left}
  .navg-p{position:static; min-width:0; margin:1px 0 5px 12px; padding:2px; gap:0;
    background:transparent; border:0; border-left:1px solid var(--edge); border-radius:0; box-shadow:none}
  .navg-p a{white-space:normal; font-size:12.5px; padding:10px 12px}
}
.btn{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; display:inline-block; padding:11px 20px; border-radius:100px;
  border:1px solid var(--edge); background:var(--card); color:var(--ink);
}
.btn:hover{border-color:var(--ink-2)}
.btn-blue{background:var(--blue); border-color:var(--blue); color:var(--blue-ink)}
.btn-blue:hover{background:var(--blue-2); border-color:var(--blue-2)}
.btn-ink{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.btn-ink:hover{opacity:.87}
.btn-sm{padding:8px 15px; font-size:11px}
/* A disabled button is a label, so it should stop looking like an offer.
   The nav's "Signed in" is the case this exists for: it sits beside a real
   "Sign out" and used to be indistinguishable from it. */
.btn[disabled]{border-color:transparent; background:none; color:var(--ink-2); cursor:default; padding-inline:6px}
.btn[disabled]:hover{border-color:transparent; background:none; color:var(--ink-2)}

/* ---------- page frame ---------- */
.ph{padding-block:84px 40px}
/* the gap under a back-link lives here, not as an inline style on the h1, so a
   header that forgets it (the way the event page once did) still gets it */
.ph .mini + h1{margin-top:16px}
/* flight.css makes .ph h1 inline-block (so its underline mark hugs the text
   width). .mini is inline-block by default too, so without this the two sit
   on the same line and a two-line title overlaps "← All events" instead of
   clearing it. */
.ph .mini{display:block}
.ph h1{font-size:clamp(2.1rem,5vw,3.2rem); max-width:16ch; line-height:1.1; letter-spacing:-.032em}
.ph .say{color:var(--ink-2); font-size:1.05rem; line-height:1.62; max-width:54ch; margin-top:24px}
.sec{padding-block:22px 62px}
.head{margin-bottom:30px}
.head h2{font-size:clamp(1.6rem,3.6vw,2.2rem)}
.head .say{color:var(--ink-2); font-size:1rem; line-height:1.6; max-width:56ch; margin-top:12px}
@media (max-width:860px){ .head{margin-bottom:24px} .ph{padding-block:56px 32px} }

/* ---------- hero ---------- */
.hero{padding-block:104px 84px; position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:1}
.motif{
  position:absolute; top:-40px; right:-70px; width:430px; height:430px;
  pointer-events:none; z-index:0; opacity:.11;
}
@media (max-width:900px){ .motif{width:340px; height:340px; top:-40px; right:-110px; opacity:.1} }
.hero-in{display:grid; grid-template-columns:1.1fr .9fr; gap:76px; align-items:center}
.hero h1{font-size:clamp(2.4rem,5.8vw,3.8rem); max-width:13ch; line-height:1.1; letter-spacing:-.032em}
.hero .sub{color:var(--ink-2); font-size:1.08rem; line-height:1.62; max-width:42ch; margin-top:28px}
.hero .acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:38px}
@media (max-width:1000px){ .hero-in{gap:52px} }
@media (max-width:860px){
  .hero{padding-block:64px 56px}
  .hero-in{grid-template-columns:1fr; gap:44px; align-items:start}
  .hero .sub{margin-top:22px}
  .hero .acts{margin-top:30px}
}
.now{background:var(--card); border:1px solid var(--edge); border-radius:var(--r); padding:28px 30px 26px; box-shadow:var(--lift)}
.now .lbl{display:block; margin-bottom:18px}
.now-row{display:flex; align-items:baseline; gap:14px; padding-block:13px; box-shadow:inset 0 -1px 0 var(--edge)}
.now-row:last-child{box-shadow:none; padding-bottom:0}
.now-row .k{font-size:14.5px; color:var(--ink-2); margin-right:auto}
.now-row .v{font-size:1.12rem; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.now-row .v.on{color:var(--blue)}
.now-row.sub{padding-top:0; padding-bottom:12px; box-shadow:inset 0 -1px 0 var(--edge)}
.now-row.sub a{font-size:14.5px; color:var(--ink); font-weight:600; text-decoration:none; margin-right:auto}
.now-row.sub a:hover{color:var(--blue)}
.now-row.sub .q{font-size:13px; color:var(--ink-2)}
.now-row.sub:last-child{box-shadow:none}
.now .lbl{color:var(--warm-ink)}

/* ---------- events ---------- */
.evs{display:flex; flex-direction:column}
.ev-row{display:grid; grid-template-columns:96px 1fr auto; gap:20px; align-items:center; padding:16px 4px; box-shadow:inset 0 -1px 0 var(--edge)}
.ev-row:first-child{box-shadow:inset 0 1px 0 var(--edge), inset 0 -1px 0 var(--edge)}
.ev-row .d{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--blue); font-variant-numeric:tabular-nums}
.ev-row h3{font-size:1.08rem}
.ev-title .chip{margin-left:8px; vertical-align:2px}
.ev-row .t{font-size:14px; color:var(--ink-2); text-align:right; white-space:nowrap}
.ev-acts{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
.ev-acts a,.ev-acts button{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; background:var(--tint); border:0;
  padding:5px 11px; border-radius:100px;
}
.ev-acts a:hover,.ev-acts button:hover{color:var(--blue); background:var(--wash)}
.subs{background:var(--warm-wash); border-radius:var(--r); padding:28px 30px 26px; margin-top:36px}
.subs h3{font-size:1.3rem; margin:10px 0 8px}
.subs p{color:var(--ink-2); max-width:52ch}
.subs .frow{margin-top:18px}
.subs .lbl{color:var(--warm-ink)}
@media (max-width:640px){ .ev-row{grid-template-columns:1fr; gap:3px} .ev-row .t{text-align:left; white-space:normal} }

/* ---------- shifts ---------- */
.pills{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; align-items:center}
.pill{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--edge); background:var(--card); color:var(--ink-2); padding:9px 15px; border-radius:100px}
.pill:hover{color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.pill-n{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin-left:6px}
.shifts{display:grid; grid-template-columns:repeat(auto-fill,minmax(246px,1fr)); gap:11px}
.shift{background:var(--card); border:1px solid var(--edge); border-radius:var(--r); padding:21px 22px 18px; display:flex; flex-direction:column; gap:9px; box-shadow:var(--lift)}
.shift.remote{background:var(--wash); border-color:transparent}
.shift.full{opacity:.5}
.shift .ev{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.shift h3{font-size:1.16rem; line-height:1.2}
.shift .what{font-size:14.5px; color:var(--ink-2); line-height:1.5; margin:-2px 0 2px}
.shift .meta{font-size:14px; color:var(--ink-2); line-height:1.45; padding-top:2px; box-shadow:inset 0 1px 0 var(--edge); margin-top:2px}
.shift .meta b{padding-top:10px}
.shift .meta b{display:block; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.tags{display:flex; gap:6px; flex-wrap:wrap}
.chip{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:100px; white-space:nowrap}
.chip-blue{background:var(--wash); color:var(--blue)}
.chip-mute{background:var(--tint); color:var(--ink-2)}
.chip-warm{background:var(--warm-wash); color:var(--warm-ink)}
.chip-bad{background:color-mix(in srgb, var(--red) 12%, transparent); color:var(--red)}
.shift.remote .chip-blue{background:var(--card)}
.go{margin-top:auto; padding:6px 0 0; background:none; border:0; text-align:left; font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--blue)}
.go:hover{color:var(--blue-2)}
.shift.full .go{color:var(--ink-2); cursor:default}
.shifts .none{grid-column:1/-1; max-width:48ch}

/* ---------- seats ---------- */
.seats{padding-block:14px 46px}
.seats-in{background:var(--deep); color:var(--deep-ink); border-radius:32px; padding:46px 38px 40px}
.seats-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:start}
.seats h2{font-size:clamp(1.7rem,4.2vw,2.4rem); color:var(--deep-ink); max-width:15ch}
.seats p{opacity:.88; max-width:40ch}
.seats .flag{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; margin-bottom:14px; opacity:.9}
.seats .flag::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--red); flex:none}
.seats .roles{display:flex; gap:7px; flex-wrap:wrap; margin-top:16px}
.seats .role{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:7px 14px; border-radius:100px; background:rgba(255,255,255,.16)}
.seats .btn{margin-top:20px; background:var(--deep-ink); border-color:var(--deep-ink); color:var(--deep)}
@media (max-width:860px){ .seats-grid{grid-template-columns:1fr; gap:20px} .seats-in{padding:32px 22px 28px} }

/* ---------- panels & lists ---------- */
.panel{background:var(--card); border:1px solid var(--edge); border-radius:var(--r); padding:32px 34px 30px; box-shadow:var(--lift)}
.two{display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:start}
.two.two-board{grid-template-columns:.8fr 1.2fr; gap:54px}
@media (max-width:860px){ .two.two-board{grid-template-columns:1fr; gap:30px} }
@media (max-width:860px){ .two{grid-template-columns:1fr; gap:28px} .panel{padding:24px 22px 22px} }
.blurb{font-size:1.05rem; line-height:1.58; max-width:38ch}
.rows{display:flex; flex-direction:column; margin-top:18px}
.row{display:flex; gap:14px; align-items:baseline; padding:11px 0; box-shadow:inset 0 -1px 0 var(--edge)}
.row:last-child{box-shadow:none}
.row .n{font-family:var(--mono); font-size:11px; color:var(--ink-2); flex:none; width:22px}
.row .k{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); flex:none; width:126px}
.row .w{font-size:15px}
.row .w.strong{font-weight:600}
.row .w.open{color:var(--blue)}
@media (max-width:640px){ .row{flex-direction:column; gap:2px} .row .k{width:auto} }

.ev-link{text-decoration:none}
.ev-link:hover{color:var(--blue)}
.ev-row:hover .ev-link{color:var(--blue)}
.flyer-big{display:block; border-radius:var(--r); overflow:hidden; border:1px solid var(--edge); box-shadow:var(--lift); background:var(--card)}
.flyer-big img{width:100%; height:auto; display:block; max-width:100%}

/* ongoing programmes */
.prog{display:grid; grid-template-columns:170px 1fr; gap:26px; align-items:start}
.prog-img{display:block; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--edge)}
.prog-img img{width:100%; height:auto; display:block; max-width:100%}
.prog h3{font-size:1.25rem; margin-bottom:8px}
.prog p{color:var(--ink-2); max-width:54ch}
@media (max-width:640px){ .prog{grid-template-columns:1fr; gap:16px} .prog-img{max-width:200px} }

/* photo lock */
.lockbox{background:var(--card); border:1px solid var(--edge); border-radius:var(--r); padding:28px 30px 26px; box-shadow:var(--lift)}
.lockbox h3{font-size:1.35rem; margin:12px 0 10px}
.lockbox p{color:var(--ink-2); max-width:44ch}
.lockbox .frow{margin-top:18px}
.gal.gal-wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* community */
/* the testimonial column is reliably shorter than the photo grid beside it;
   centering it keeps the leftover space from reading as an unfinished column */
.commune{display:grid; grid-template-columns:1.25fr .75fr; gap:52px; align-items:center}
@media (max-width:900px){ .commune{grid-template-columns:1fr; gap:36px} }
.gal{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.gal figure{margin:0; display:flex; flex-direction:column; gap:9px}
.gal .fr{
  aspect-ratio:4/3; max-width:100%; border-radius:var(--r-sm); overflow:hidden;
  background:var(--tint); display:grid; place-items:center; position:relative;
}
.gal img{width:100%; height:100%; object-fit:cover; display:block}
.gal .ph-empty{
  width:100%; height:100%; display:grid; place-items:center; text-align:center; padding:14px;
  background:linear-gradient(150deg, var(--warm-wash) 0%, var(--wash) 100%);
}
.gal .ph-empty span{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); line-height:1.5}
.gal figcaption{font-size:13.5px; color:var(--ink-2); padding-inline:2px}
/* ---- album cards, on the Photos page ----
   The whole card is the link, because a reader who wants the pictures is
   aiming at the thumbnail. */
.alcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px}
.alcard-w{display:flex; flex-direction:column; gap:7px; min-width:0}
.alcard-more{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--blue); text-decoration:none; padding-inline:2px}
.alcard-more:hover{color:var(--blue-2)}
.alcard{
  display:flex; flex-direction:column; flex:1; text-decoration:none; color:inherit;
  border:1px solid var(--edge); border-radius:var(--r); overflow:hidden; background:var(--card);
  transition:border-color .15s, transform .15s;
}
.alcard:hover{border-color:var(--blue); transform:translateY(-2px)}
.alcard:focus-visible{outline:2px solid var(--blue-2); outline-offset:2px}
.alcard-fr{aspect-ratio:4/3; display:block; background:var(--tint); overflow:hidden}
.alcard-fr img{width:100%; height:100%; object-fit:cover; display:block}
.alcard-fr .ph-empty{
  width:100%; height:100%; display:grid; place-items:center; text-align:center; padding:14px;
  background:linear-gradient(150deg, var(--warm-wash) 0%, var(--wash) 100%);
}
.alcard-fr .ph-empty span{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2); line-height:1.5}
.alcard-in{display:flex; flex-direction:column; gap:6px; padding:15px 16px 17px}
.alcard-h{margin:0; font-weight:700; font-size:1.05rem; letter-spacing:-.02em; line-height:1.3}
.alcard-d{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2)}
/* Event descriptions run long. Clamping is a display decision, so it happens
   here rather than truncating what the board actually wrote. */
.alcard-p{font-size:14px; color:var(--ink-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.alcard-go{margin-top:4px; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--blue)}
.alyear{margin:34px 0 16px}
.alyear:first-of-type{margin-top:0}
.alyear h2{font-size:1.35rem; letter-spacing:-.025em}
.alyear p{color:var(--ink-2); font-size:14.5px; margin:3px 0 0}

/* .voices sits beside .gal in a single 1fr column below 900px; without
   min-width:0 its flex-carousel content (.slide has min-width:100%) forces
   that shared column past the wrap's width, which drags .gal along with it
   and pushes photos off the right edge of the screen. */
.voices{display:flex; flex-direction:column; gap:12px; min-width:0}
.vhead{display:flex; align-items:center; justify-content:space-between; gap:12px}
.arrows{display:flex; gap:6px}
.arw{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--edge); background:var(--card);
  color:var(--ink-2); font-size:17px; line-height:1; display:grid; place-items:center; padding:0;
}
.arw:hover{color:var(--blue); border-color:var(--blue)}
.slider{overflow:hidden; border-radius:var(--r)}
.slider:focus-visible{outline:2px solid var(--blue-2); outline-offset:3px}
.track{display:flex; transition:transform .35s cubic-bezier(.4,0,.2,1); will-change:transform}
@media (prefers-reduced-motion:reduce){ .track{transition:none} }
.slide{
  min-width:100%; flex:0 0 100%; margin:0;
  background:var(--card); border:1px solid var(--edge); border-radius:var(--r);
  padding:24px 26px 22px; box-shadow:var(--lift);
}
.slide blockquote{margin:0; font-size:1.08rem; line-height:1.5; letter-spacing:-.015em; font-weight:600}
.slide figcaption{margin-top:14px; font-size:13.5px; color:var(--ink-2)}
.slide figcaption b{color:var(--ink); font-weight:700; display:block}
.dots{display:flex; gap:7px; justify-content:center}
.dot{width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--edge)}
.dot[aria-current="true"]{background:var(--warm)}
.dot:hover{background:var(--ink-2)}


/* board roster — compact by default, bio on demand */
.roster{display:flex; flex-direction:column; gap:2px}
.member{border-radius:14px; box-shadow:inset 0 -1px 0 var(--edge)}
.member:last-child{box-shadow:none}
.member > summary{
  display:flex; align-items:center; gap:16px; padding:14px 6px;
  cursor:pointer; list-style:none;
}
.member > summary::-webkit-details-marker{display:none}
.member > summary:hover .mname{color:var(--blue)}
.member > summary:focus{outline:none}
.member > summary:focus-visible{outline:2px solid var(--blue-2); outline-offset:-3px; border-radius:12px}
.member[open]{background:var(--tint)}
.member[open] > summary{padding-bottom:8px}
.avatar{
  width:76px; height:76px; border-radius:14px; overflow:hidden; background:var(--wash);
  display:grid; place-items:center; border:1px solid var(--edge); flex:none;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar span{font-weight:800; font-size:26px; color:var(--blue); letter-spacing:-.02em}
.avatar .ph-av{opacity:.92}
.avatar.is-open{background:var(--tint)}
.avatar.is-open span{color:var(--ink-2)}
.mwho{display:flex; flex-direction:column; min-width:0; margin-right:auto}
.mname{font-weight:700; font-size:17px; letter-spacing:-.025em; line-height:1.25}
.mrole{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-top:4px}
.chev{flex:none; width:14px; height:14px; color:var(--ink-2); transition:transform .18s ease}
.member[open] .chev{transform:rotate(90deg)}
.mbio{padding:0 6px 16px 98px; font-size:14.5px; color:var(--ink-2); line-height:1.55; max-width:46ch; margin:0}
.member.open-seat .avatar{background:var(--tint)}
.member.open-seat .avatar span{color:var(--ink-2)}
.member.open-seat .mname{color:var(--blue)}
@media (prefers-reduced-motion:reduce){ .chev{transition:none} }
@media (max-width:520px){ .mbio{padding-left:6px} .avatar{width:62px; height:62px; border-radius:12px} .avatar span{font-size:21px} }

/* news */
.posts{display:flex; flex-direction:column; gap:11px}
.post{background:var(--card); border:1px solid var(--edge); border-radius:var(--r); padding:24px 26px 22px; box-shadow:var(--lift)}
.post .d{font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2)}
.post h3{font-size:1.3rem; margin:7px 0 8px}
.post p{color:var(--ink-2); max-width:64ch}
.post .pic{margin:0 0 14px; border-radius:var(--r-sm); overflow:hidden; background:var(--wash)}
.post .pic img{display:block; width:100%; max-height:340px; object-fit:cover}
.nimg{display:block; max-height:120px; max-width:100%; border-radius:10px; margin:9px 0}

/* docs / faq */
.doc{display:flex; gap:14px; align-items:baseline; padding:13px 0; box-shadow:inset 0 -1px 0 var(--edge)}
.doc:last-child{box-shadow:none}
.doc .w{font-weight:600; font-size:15px}
.doc .note{font-size:14px; color:var(--ink-2)}
.doc a{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); text-decoration:none; white-space:nowrap}
.qa{padding:16px 0; box-shadow:inset 0 -1px 0 var(--edge)}
.qa:last-child{box-shadow:none}
.qa h3{font-size:1.05rem; margin-bottom:6px}
.qa p{color:var(--ink-2); max-width:64ch}

/* quad */
.quad{display:grid; grid-template-columns:repeat(auto-fit,minmax(218px,1fr)); gap:11px}
.qc{background:var(--card); border:1px solid var(--edge); border-radius:var(--r); padding:24px 24px 22px; display:flex; flex-direction:column; gap:7px; text-decoration:none; box-shadow:var(--lift)}
.qc .lbl{margin-bottom:8px}
.qc h3{font-size:1.16rem}
.qc p{font-size:14.5px; color:var(--ink-2); line-height:1.5}
.qc .mini{align-self:flex-start; margin-top:auto; padding-top:12px}
.mini{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; background:none; border:0; padding:0; color:var(--blue); text-decoration:none; display:inline-block}
.mini:hover{color:var(--blue-2)}

/* forms */
input[type=email],input[type=text],input[type=url],input[type=date],input[type=time],input[type=password],textarea,select{
  font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--card); border:1px solid var(--edge); border-radius:13px; padding:11px 14px; min-width:0; flex:1;
}
input::placeholder,textarea::placeholder{color:var(--ink-2); opacity:.75}
textarea{resize:vertical; min-height:88px; line-height:1.5; width:100%}
.frow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.note{font-family:var(--mono); font-size:11.5px; color:var(--blue); min-height:17px; margin-top:8px}
.fine{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); line-height:1.6; margin-top:12px; max-width:60ch}

footer{position:relative; padding-block:32px 52px; font-size:14.5px; color:var(--ink-2); box-shadow:inset 0 1px 0 var(--edge); margin-top:20px}
.foot{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; position:relative; z-index:1}
.nowwrap{position:relative}
.perch{
  position:absolute; top:-34px; right:-10px; width:108px; z-index:2;
  pointer-events:none; transform:rotate(7deg);
  filter:drop-shadow(0 6px 14px rgba(40,30,28,.22));
}
.perch img{width:100%; height:auto; display:block}
@media (max-width:860px){ .perch{width:86px; top:-34px; right:-6px} }
@media (max-width:480px){ .perch{width:68px; top:-28px} }
footer a{color:var(--ink-2)}
footer a:hover{color:var(--ink)}
.social{display:flex; gap:8px; margin-top:12px}
.social a{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--edge); background:var(--card); color:var(--ink-2);
}
.social a:hover{color:var(--blue); border-color:var(--blue)}
.social svg{width:16px; height:16px; fill:currentColor; display:block}

/* ================= ADMIN ================= */
.admin{position:fixed; inset:0; z-index:90; background:var(--bg); overflow-y:auto}
.abar{position:sticky; top:0; z-index:5; background:var(--card); box-shadow:inset 0 -1px 0 var(--edge); display:flex; align-items:center; gap:12px; padding:12px 22px; flex-wrap:wrap}
.abar .who{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); margin-right:auto}
.savewarn{
  margin:0; padding:13px 22px; background:var(--warm-wash); color:var(--warm-ink);
  font-family:var(--mono); font-size:12px; line-height:1.5;
}
.abody{max-width:940px; margin:0 auto; padding:24px 22px 60px}
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px}
.tab{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--edge); background:var(--card); color:var(--ink-2); padding:9px 14px; border-radius:100px}
.tab[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.tab .ct{background:var(--red); color:#fff; border-radius:100px; padding:1px 6px; margin-left:5px}
.card{background:var(--card); border:1px solid var(--edge); border-radius:var(--r-sm); padding:19px 20px; margin-bottom:11px}
.card h4{font-size:1.03rem; margin-bottom:4px}
.card .sub{font-family:var(--mono); font-size:11.5px; color:var(--ink-2)}
.card .txt{margin-top:8px; font-size:14.5px; color:var(--ink-2)}
.acts{display:flex; gap:7px; margin-top:13px; flex-wrap:wrap}
.amini{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--edge); background:var(--bg); color:var(--ink-2); padding:6px 12px; border-radius:100px; text-decoration:none; display:inline-block}
.amini:hover{color:var(--blue); border-color:var(--blue)}
.amini[disabled]{opacity:.38; cursor:default}
.amini[disabled]:hover{color:var(--ink-2); border-color:var(--edge)}
.edbar{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--warm-ink); background:var(--warm-wash); border:1px solid var(--warm-wash); border-radius:100px; padding:8px 15px; display:inline-block; margin:0 0 11px}
.edbar[hidden], .btn[hidden]{display:none}
[data-pane] .card{scroll-margin-top:72px}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:11px}
.upl{display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start; padding:15px 0; box-shadow:inset 0 -1px 0 var(--edge)}
.upl:last-of-type{box-shadow:none}
.upl-prev{
  width:96px; aspect-ratio:1; border-radius:13px; background:var(--tint);
  display:grid; place-items:center; overflow:hidden; border:1px solid var(--edge);
  font-family:var(--mono); font-size:10px; color:var(--ink-2); text-align:center; padding:6px;
}
.upl-prev img{width:100%; height:100%; object-fit:contain; display:block}
.upl-body b{font-size:15px; display:block; margin-bottom:3px}
.upl-body p{font-size:13.5px; color:var(--ink-2); line-height:1.5; max-width:46ch}
.upl-row{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:10px}
.upl-row label.amini{cursor:pointer}
.vis-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:560px){ .upl{grid-template-columns:1fr} .upl-prev{width:84px} }
.field label{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.cp-grp{font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin:22px 0 10px; padding-top:15px; box-shadow:inset 0 1px 0 var(--edge)}
.cp-grp:first-child{margin-top:0; padding-top:0; box-shadow:none}
.cp-row{display:flex; gap:9px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:2px}
.cp-ct{font-family:var(--mono); font-size:11px; color:var(--ink-2)}
.cp-ct.near{color:var(--warm-ink)}
.field input,.field textarea,.field select{width:100%; flex:none}
/* the event Address field is the one .field input that shares its row with a
   button (Find on Maps); without a wrap it's forced onto the row's own edge
   and clipped on a phone-width admin panel. */
div:has(> #eAddr){flex-wrap:wrap}
/* .vis-hidden's 1px box is how the native file input hides behind its styled
   label, but .field input above outranks it on specificity and stretches
   #flyerFile's hidden box to full width, widening the admin panel's own
   scrollable area even though nothing is visibly wrong. */
.field input.vis-hidden{width:1px}
.g2{display:grid; grid-template-columns:1fr 1fr; gap:0 13px}
@media (max-width:600px){ .g2{grid-template-columns:1fr} }
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:11px; margin-bottom:22px}
.stat{background:var(--card); border:1px solid var(--edge); border-radius:var(--r-sm); padding:16px 18px}
.stat dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
.stat dd{margin:7px 0 0; font-size:1.8rem; font-weight:700; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.rb h3{font-size:1.2rem; margin:26px 0 8px}
.rb h3:first-child{margin-top:0}
.rb p,.rb li{font-size:15px; color:var(--ink-2); max-width:68ch}
/* consecutive paragraphs otherwise touch — p{margin:0} is the site default —
   and read as one run-on block; only a p that follows another p needs the gap,
   since a heading or list already carries its own trailing margin */
.rb p + p{margin-top:14px}
.rb ol,.rb ul{padding-left:20px; margin:8px 0}
.rb li{margin-bottom:6px}
.rb strong{color:var(--ink); font-weight:600}
.rb code{font-family:var(--mono); background:var(--tint); border-radius:5px; padding:2px 6px; font-size:.87em; color:var(--ink)}
.callout{background:var(--wash); border-radius:16px; padding:16px 18px; margin:14px 0}
.callout p{color:var(--ink)}
.tbl{width:100%; border-collapse:collapse; font-size:14.5px; margin:10px 0}
.tbl th,.tbl td{text-align:left; padding:9px 11px; box-shadow:inset 0 -1px 0 var(--edge); vertical-align:top}
.tbl th{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); font-weight:500}
.tbl td{color:var(--ink-2)}
.tbl td:first-child{color:var(--ink); font-weight:600; white-space:nowrap}
.scroll-x{overflow-x:auto}
.login{max-width:370px; margin:13vh auto 0; text-align:center; padding-inline:22px}
.login h2{font-size:1.6rem; margin-bottom:10px}
.login p{color:var(--ink-2); font-size:15px; margin-bottom:22px}
.gbtn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:var(--card); border:1px solid var(--edge); border-radius:13px; padding:13px 18px; font-weight:600; font-size:15px; color:var(--ink)}
.gbtn:hover{border-color:var(--ink-2)}
.gbtn svg{width:18px; height:18px; flex:none}
.tiny{font-family:var(--mono); font-size:11px; color:var(--ink-2); margin-top:14px; line-height:1.6}
.banner{background:var(--wash); font-family:var(--mono); font-size:11.5px; color:var(--blue)}
.banner .wrap{padding-block:10px}
.lbx{display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; font:inherit; color:inherit; border-radius:inherit}
.lbx:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.gal .fr .lbx{height:100%}
.shift-sec{margin-top:40px; padding-top:30px; border-top:1px solid var(--edge)}
.shift-h{font-size:1.45rem; letter-spacing:-.035em; font-weight:800; color:var(--ink)}
.shift-note{color:var(--ink-2); font-size:15px; margin:10px 0 18px; max-width:52ch; line-height:1.55}
.flyer-big.lbx{width:100%; border:1px solid var(--edge); background:var(--card)}
.lbx-vid{
  aspect-ratio:16/9; display:grid; place-items:center; align-content:center; gap:7px; text-align:center;
  background:var(--tint); border:1px solid var(--edge); border-radius:var(--r-sm); padding:14px;
}
.lbx-play{font-size:27px; line-height:1; color:var(--blue)}
.lbx-vt{font-size:13.5px; color:var(--ink-2)}
.alb{border-top:1px solid var(--edge); margin-top:17px; padding-top:8px}

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:120; background:rgba(14,10,12,.93);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:15px; padding:58px 18px;
}
.lb[hidden]{display:none}
.lb-stage{display:flex; align-items:center; justify-content:center; width:100%; max-width:100%; max-height:calc(100vh - 156px)}
.lb-stage img{max-width:100%; max-height:calc(100vh - 156px); width:auto; height:auto; display:block; object-fit:contain; border-radius:var(--r-sm)}
.lb-16x9{width:min(100%, calc((100vh - 156px) * 16 / 9)); max-width:100%; aspect-ratio:16/9}
.lb-16x9 iframe{width:100%; height:100%; display:block; border:0; border-radius:var(--r-sm); background:#000}
.lb-cap{margin:0; max-width:62ch; text-align:center; color:#f4efed; font-size:14.5px; line-height:1.5}
.lb-bad{margin:0; color:#f4efed; font-size:14.5px}
.lb-x{
  position:absolute; top:15px; right:16px; width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.32); background:rgba(0,0,0,.42); color:#fff; font-size:21px; line-height:1;
}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:62px; cursor:pointer;
  border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.32); background:rgba(0,0,0,.42);
  color:#fff; font-size:26px; line-height:1;
}
.lb-prev{left:13px}
.lb-next{right:13px}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:2px solid #fff; outline-offset:2px}
@media (max-width:640px){ .lb{padding:54px 12px} .lb-nav{width:37px; height:50px; font-size:22px} }

/* ---- first paint ----------------------------------------------------------
   The header is plain HTML, so it is on screen at once; everything under it
   waits on Google (who is signed in, then what they may read). That gap used
   to be a blank page under a finished header, which reads as broken rather
   than as loading. These are the shapes of the page to come — a title, a few
   lines, two buttons — in the paper colour, breathing gently. boot.js removes
   the block the moment the real page is ready. */
.boot{padding-block:104px 84px}
.boot .wrap > *{background:var(--ink); border-radius:8px; opacity:.055; animation:bootpulse 1.5s ease-in-out infinite}
.boot-h{height:58px; max-width:min(13ch,440px); border-radius:10px}
.boot-l{height:13px; max-width:min(42ch,520px); margin-top:18px}
.boot-l:first-of-type{margin-top:30px}
.boot-l.short{max-width:min(26ch,330px)}
.boot-row{display:flex; gap:12px; margin-top:34px; background:none!important; opacity:1!important; animation:none!important}
.boot-b{display:block; height:42px; width:132px; border-radius:999px; background:var(--ink); opacity:.055; animation:bootpulse 1.5s ease-in-out infinite}
.boot-b:last-child{width:168px}
@keyframes bootpulse{0%,100%{opacity:.055}50%{opacity:.1}}
@media (max-width:860px){ .boot{padding-block:56px 40px} .boot-h{height:44px} }
@media (prefers-reduced-motion:reduce){ .boot .wrap > *, .boot-b{animation:none} }

/* ---- the board's announcement, under the top bar ---- */
/* A school announcement is news, not an emergency, so this is a plain white
   band rather than the warning red it started as. The mascot is a transparent
   cut-out and sits straight on the band — no plate behind it. */
#announce{background:var(--card); box-shadow:inset 0 -1px 0 var(--edge)}
.ann-in{display:flex; align-items:center; gap:13px; padding-block:10px}
.ann-face{width:44px; height:44px; flex:none; object-fit:contain}
.ann-dot{display:block; width:12px; height:12px; margin:0 16px; border-radius:50%; background:var(--blue)}
.ann-text{margin:0; flex:1; font-size:15px; line-height:1.45; color:var(--ink)}
.ann-text a{color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.ann-x{flex:none; width:30px; height:30px; padding:0; border:0; border-radius:9px; background:transparent; color:var(--ink-2); font-size:20px; line-height:1; cursor:pointer; opacity:.55}
.ann-x:hover{opacity:1; background:var(--tint)}
@media (max-width:640px){ .ann-face{width:36px; height:36px} .ann-text{font-size:14px} }

/* ---- spirit store, on the home page ---- */
/* The store is the last section on the page, so when the menu jumps here the
   document is already at its maximum scroll and scroll-margin has nothing
   left to work with. The extra top padding is what keeps the heading out
   from under the sticky bar. */
#store{scroll-margin-top:72px; padding-top:62px}
.buys{display:grid; grid-template-columns:repeat(auto-fit,minmax(216px,296px)); justify-content:start; gap:16px; margin-top:6px}
.buy{border:1px solid var(--edge); border-radius:16px; background:var(--card); overflow:hidden; display:flex; flex-direction:column}
.buy-img{aspect-ratio:4/3; background:var(--tint); overflow:hidden}
.buy-img img{width:100%; height:100%; object-fit:cover; display:block}
/* no picture yet: a short band, not the tall frame a real photo earns */
.buy-none{aspect-ratio:auto; min-height:86px; display:grid; place-items:center; text-align:center; padding:14px; color:var(--ink-2); font-size:14px}
.buy-in{padding:15px 16px 17px; display:flex; flex-direction:column; align-items:flex-start; gap:7px; flex:1}
.buy-in h3{margin:0; font-size:1.05rem}
.buy-price{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--blue)}
.buy-in p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.5}
.buy-in .btn{margin-top:auto}

/* photo groups stack one per event, so they run tighter than a normal section
   — a dozen events at full section rhythm is a dozen screens of scrolling */
.phg{padding-block:6px 40px}
.phg .head{margin-bottom:18px}
.phg .head h2{font-size:clamp(1.35rem,2.8vw,1.75rem)}
.phg .head .say{margin-top:6px; font-size:.95rem}

/* ---- a warning that has to be read before a field is filled in ----
   Used where getting it wrong publishes a child's photo: the two Google
   Photos album links. Deliberately louder than .callout. */
.warn{border:1px solid var(--red); border-left-width:5px; border-radius:13px;
  background:color-mix(in srgb, var(--red) 7%, transparent); padding:13px 15px; margin:0 0 9px}
.warn p{margin:0; font-size:14.5px; line-height:1.55; color:var(--ink)}
.warn p + p{margin-top:8px}
.warn .wt{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--red); font-weight:600; margin-bottom:6px}
.warn b,.warn strong{color:var(--red); font-weight:700}

/* the opt-out names, printed beside the tick-box that asks about them */
.oonames{margin:-4px 0 12px 28px; font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--ink-2)}
.oonames b{color:var(--red); font-weight:600}
.oonames .n{color:var(--ink); font-weight:600}