/* ═══════════════════════════════════════════════════════════════════════════
   BAYS YOUTH COUNCIL
   Mobile first. Every desktop rule lives in a media query at the bottom.

   The palette is split for a measured reason: --moon fails WCAG AA for body
   text on every surface here (3.40:1 on butter, 3.99:1 on paper). So --moon is
   the blue you SEE (thick borders, big display type, icon strokes, blob fills)
   and --deep is the blue you READ (all links, buttons, small UI). Do not put
   --moon or --butter on text under 28px. Ever.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Colour ────────────────────────────────────────────────────────────── */
  /* --paper is a pale butter, not an off-white. The council asked for this:
     the yellow you currently see is coming from the placeholder photos, and it
     would vanish the moment real pictures go in. Putting it in the page itself
     means the yellow survives. Measured at 45% butter into white — any deeper
     and the butter SECTIONS stop separating from the page behind them.       */
  --paper:#FAF5D9;      /* pale butter page base                          */
  --butter:#F5E8AA;     /* atmosphere: fields, blobs                      */
  --gold:#E9D268;       /* highlighter sweeps. See note below.            */
  --moon:#4282AA;       /* decoration only: ≥3px strokes, ≥28px display   */
  --deep:#2C6485;       /* text-safe blue: links, buttons, small UI       */
  --berry:#8A5A86;      /* accent, chosen by the chairs. Rings, icons.    */
  --berry-deep:#6E4269; /* text-safe mulberry: 7.23:1 on paper            */
  --berry-tint:#D0BDCF; /* sweep colour on butter backgrounds only        */
  --ink:#1B2B36;        /* body copy, 13.2:1 on paper                     */

  /* Why the sweeps are --gold and not --butter: once the page went pale
     butter, a butter highlight measured 1.12:1 against it and disappeared.
     --gold clears it at 1.38:1 and still reads as a yellow highlighter.     */

  /* Derived. Not new hues — just transparency of the above. */
  --ink-70:rgba(27,43,54,.70);
  --ink-12:rgba(27,43,54,.12);
  --moon-14:rgba(66,130,170,.14);

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --hand:'Shantell Sans','Comic Sans MS',cursive;   /* display ≥28px only    */
  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; /* facts   */

  /* ── Spacing scale. Disciplined underneath the wobble. ─────────────────── */
  --s1:.5rem; --s2:.75rem; --s3:1rem;   --s4:1.5rem;
  --s5:2rem;  --s6:3rem;   --s7:4.5rem; --s8:6.5rem;

  --pad:1.25rem;          /* page gutter, mobile  */
  --radius:1.5rem;        /* bubbly baseline      */
  --radius-lg:2.25rem;
  --maxw:74rem;

  --ease-pop:cubic-bezier(.34,1.56,.64,1);   /* overshoot, never linear */
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x on HTML, using `clip` not `hidden`. `hidden` on <body> turns the
   body into a scroll container, which breaks window.scrollY, position:sticky
   and smooth-scroll libraries. `clip` contains the rotated/oversized decorative
   elements without any of that. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body,h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0}
a{color:var(--deep);text-underline-offset:.18em;text-decoration-thickness:.09em}

html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* Visible keyboard focus everywhere. Non-negotiable. */
:focus-visible{
  outline:3px solid var(--deep);
  outline-offset:3px;
  border-radius:.6rem;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--deep);color:#fff;padding:.85rem 1.25rem;
  border-radius:0 0 var(--radius) var(--radius);font-weight:600;
}
.skip:focus{left:var(--pad)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ═══ Type scale ═══════════════════════════════════════════════════════════ */
.h2{
  font-family:var(--hand);
  font-size:clamp(1.95rem,7.6vw,2.9rem);
  line-height:1.06;font-weight:700;color:var(--moon);
  letter-spacing:-.01em;margin-bottom:var(--s4);
  transform:rotate(-.55deg);       /* one degree off-axis, on purpose */
  transform-origin:left center;
}
p{text-wrap:pretty}

/* Marker sweep behind a key word. Drawn by JS on enter. */
/* The highlighted word is mulberry, not blue. Blue measured 2.77:1 on the new
   gold sweep and failed AA; mulberry clears it at 5.25:1 and introduces the
   accent exactly where the eye is already going. */
.mk{position:relative;display:inline-block;color:var(--berry-deep);white-space:nowrap}
.mk::before{
  content:'';position:absolute;left:-.16em;right:-.16em;top:.12em;bottom:.04em;
  background:var(--gold);border-radius:.7em .55em .75em .5em;
  transform:scaleX(0) rotate(-.8deg);transform-origin:left center;
  z-index:-1;
}
.mk.is-on::before{transform:scaleX(1) rotate(-.8deg);transition:transform .62s var(--ease-pop)}
/* The circled word in the hero gets a hand-drawn ring instead of a sweep. */
.ring{position:relative;display:inline-block;color:var(--moon)}
.ring svg{position:absolute;inset:-28% -14%;width:128%;height:156%;overflow:visible;pointer-events:none}
.ring path{fill:none;stroke:var(--moon);stroke-width:3.4;stroke-linecap:round}

/* ═══ Texture layers ═══════════════════════════════════════════════════════ */
/* Paper grain. One tiny inline SVG, no network request. */
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .17 0 0 0 0 .21 0 0 0 .34 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The filament: signature element. Runs the full document height. */
/* Height comes from JS (the document height in px). It cannot be 100% here:
   body is static, so an absolute child resolves 100% against the VIEWPORT,
   which squashed the whole 10,000px drawing into one 768px-tall hairline. */
.filament{position:absolute;top:0;left:0;width:100%;height:100px;z-index:0;pointer-events:none}
.filament svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.filament path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.filament-base{stroke:var(--ink-12);stroke-width:2.5}
.filament-lit{stroke:var(--moon);stroke-width:3.2}

/* Soft blob cursor. Desktop with a real pointer only — enabled by JS. */
.cursor{
  position:fixed;top:0;left:0;width:34px;height:34px;z-index:60;
  border-radius:58% 42% 50% 50%/50% 45% 55% 50%;
  background:var(--moon);opacity:0;pointer-events:none;
  mix-blend-mode:multiply;will-change:transform;
}
.cursor.is-live{opacity:.32}
.cursor.is-big{opacity:.22}

/* ═══ Nav ══════════════════════════════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:.7rem var(--pad);
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:2.5px solid var(--ink-12);
}
.nav-mark{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink)}
.nav-bulb{width:26px;height:26px;flex:0 0 26px;display:block}
.nav-name{
  font-family:var(--hand);font-weight:700;font-size:1.12rem;
  color:var(--deep);line-height:1;transform:rotate(-1.1deg);
}
.nav-links{display:flex;align-items:center;gap:var(--s4)}
.nav-links li:not(:last-child){display:none}          /* mobile: CTA only */
/* min-height 44px: the text is only ~19px tall, which fails the WCAG 2.2
   target-size minimum. The link looks identical; the hit area is thumb-sized. */
.nav-links a{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;font-size:.95rem;text-decoration:none;color:var(--ink);
}
.nav-links a:hover{color:var(--deep)}
.nav-cta{
  background:var(--deep);color:#fff !important;
  padding:.5rem 1.15rem;border-radius:999px;
  border:2.5px solid var(--deep);
}
.nav-cta:hover{background:var(--ink);border-color:var(--ink)}

/* ═══ Buttons ══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;font-size:1rem;text-decoration:none;text-align:center;
  padding:.9rem 1.6rem;border-radius:999px;border:2.5px solid var(--deep);
  min-height:48px;                                   /* thumb-sized target */
  transition:background .18s ease,color .18s ease,transform .18s var(--ease-pop);
  will-change:transform;
}
.btn-primary{background:var(--deep);color:#fff}      /* white on deep = 6.42:1 */
.btn-primary:hover{background:var(--ink);border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--deep)} /* deep on paper = 6.11:1 */
.btn-ghost:hover{background:var(--moon-14)}

/* ═══ 1. Hero ══════════════════════════════════════════════════════════════ */
.hero{position:relative;z-index:1;padding-bottom:var(--s6)}
.hero-photo{position:relative;margin-bottom:calc(var(--s5) * -1)}
/* 42vh, not 58: the headline has to be reachable on the first screen of a
   phone. The photo sells the page, but the words are what convert. */
.hero-photo img{
  width:100%;height:42vh;min-height:14rem;max-height:24rem;object-fit:cover;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.hero-body{position:relative;z-index:2;padding-inline:var(--pad);max-width:var(--maxw);margin-inline:auto}
.mark{margin-bottom:var(--s2)}
.mark svg{width:clamp(3.4rem,15vw,4.6rem);height:auto;overflow:visible}
.hero-head{
  font-family:var(--hand);font-weight:800;
  font-size:clamp(2.5rem,12.5vw,4.6rem);line-height:1.0;
  letter-spacing:-.022em;color:var(--ink);margin-bottom:var(--s3);
}
.hero-intro{font-size:1.06rem;line-height:1.6;max-width:34rem;margin-bottom:var(--s4);color:var(--ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.hero-cta .btn{flex:1 1 auto;min-width:12.5rem}
.hero-meta{
  font-size:.92rem;font-weight:600;color:var(--deep);
  display:inline-flex;align-items:center;gap:.45rem;
}
.hero-meta::before{
  content:'';width:.6rem;height:.6rem;border-radius:50%;
  background:var(--moon);flex:0 0 auto;
}

/* ═══ Sections + hand-inked dividers ═══════════════════════════════════════ */
.sec{position:relative;z-index:1;padding-block:var(--s6)}
.divider{width:100%;line-height:0;pointer-events:none;position:relative;z-index:1}
.divider svg{width:100%;height:26px;display:block;overflow:visible}
.divider path{fill:none;stroke:var(--moon);stroke-width:2.8;stroke-linecap:round;opacity:.55}
/* Alternate ink colours down the page so the hand-drawn rules carry the
   accent too, rather than the mulberry appearing in only one place. */
.divider.is-berry path{stroke:var(--berry)}

.who-text p{font-size:1.06rem;max-width:38rem;margin-bottom:var(--s3)}


/* ═══ Marquee ══════════════════════════════════════════════════════════════ */
.marquee{
  position:relative;z-index:1;overflow:hidden;
  background:var(--butter);
  padding-block:.85rem;margin-block:var(--s5);
  border-block:3px solid var(--moon);
  transform:rotate(-1.2deg) scaleX(1.06);        /* off-axis on purpose */
}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-item{
  font-family:var(--hand);font-weight:700;
  font-size:clamp(1.3rem,5.2vw,2rem);            /* ≥28px: --deep is safe here */
  color:var(--deep);padding-inline:.85rem;white-space:nowrap;
  display:flex;align-items:center;gap:.85rem;
}
.marquee-item::after{
  content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--berry);flex:0 0 auto;
}

/* ═══ 3. What we stand for ═════════════════════════════════════════════════ */
.stand-stage{display:grid;gap:var(--s3)}
.card{
  background:var(--paper);border:3px solid var(--moon);border-radius:var(--radius-lg);
  padding:var(--s4);position:relative;
}
.card:nth-child(odd){transform:rotate(-.7deg)}
.card:nth-child(even){transform:rotate(.55deg)}
/* Icons inherit colour, so they alternate blue and mulberry down the row. */
.card-icon{width:52px;height:52px;margin-bottom:var(--s2);color:var(--moon)}
.card:nth-child(even) .card-icon{color:var(--berry)}
.card-icon svg{width:100%;height:100%;overflow:visible}
.card h3{font-family:var(--hand);font-size:1.6rem;font-weight:700;line-height:1.1;color:var(--ink);margin-bottom:.45rem}
.card p{font-size:1rem;color:var(--ink);max-width:30rem}
.card-recent{
  margin-top:var(--s2);padding-top:var(--s2);border-top:2px dashed var(--ink-12);
  font-size:.9rem;color:var(--ink-70);font-weight:500;
}

/* ═══ 4. What we do — photo grid ═══════════════════════════════════════════ */
.do-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3);align-items:start}
.tile{position:relative;border-radius:var(--radius);overflow:visible}
.tile:nth-child(3n+1){transform:rotate(-1.3deg)}
.tile:nth-child(3n+2){transform:rotate(.9deg)}
.tile:nth-child(3n+3){transform:rotate(-.5deg)}
.tile-shot{position:relative;border-radius:var(--radius);overflow:hidden;border:3px solid var(--moon);background:var(--butter)}
.tile-shot img{width:100%;aspect-ratio:4/5;object-fit:cover}
.tile:nth-child(even) .tile-shot img{aspect-ratio:4/3}
/* Tape. Two strips, deliberately not parallel.
   These live on .tile, NOT .tile-shot — .tile-shot clips its overflow to keep
   the photo inside its rounded corners, which would slice the tape off. */
.tile::before,.tile::after{
  content:'';position:absolute;width:2.5rem;height:.85rem;z-index:3;
  background:color-mix(in srgb,#fff 78%,var(--butter));
  box-shadow:0 1px 2px rgba(27,43,54,.12);
  pointer-events:none;
}
.tile::before{top:-.28rem;left:-.32rem;transform:rotate(-41deg)}
.tile::after{top:-.28rem;right:-.32rem;transform:rotate(38deg)}
/* Captions are two separate lines of information, so they are two blocks. */
.tile-cap{padding:.65rem .2rem 0;display:grid;gap:.1rem}
.tile-label{display:block;font-family:var(--hand);font-size:1.12rem;font-weight:700;color:var(--deep);line-height:1.2}
.tile-sub{display:block;font-size:.85rem;color:var(--ink-70);line-height:1.35}
/* Cross-fades in rather than snapping, so the hover reads as one motion. */
.tile-fx{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  pointer-events:none;transition:opacity .22s ease}

/* ═══ 5. What's on ═════════════════════════════════════════════════════════ */
.events{display:grid;gap:var(--s3)}
.event{
  background:var(--butter);border-radius:var(--radius-lg);
  padding:var(--s4);border:3px solid var(--moon);
  display:grid;gap:var(--s2);
}
.event:nth-child(even){transform:rotate(.5deg)}
.event:nth-child(odd){transform:rotate(-.45deg)}
.event-when{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
/* Says who an event is for, so nobody reads it and then finds out they can't come.
   White on --berry-deep measures 7.94:1. */
.event-tag{
  justify-self:start;display:inline-block;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.32rem .75rem;border-radius:999px;
  background:var(--berry-deep);color:#fff;
}
.event-date{
  font-family:var(--sans);font-weight:800;font-size:1.05rem;color:var(--deep);
  letter-spacing:.02em;text-transform:uppercase;
}
.event-time{font-size:.92rem;color:var(--ink-70);font-weight:600}
.event h3{font-family:var(--hand);font-size:1.55rem;font-weight:700;line-height:1.1;color:var(--ink)}
.event-place{font-size:.95rem;font-weight:600;color:var(--ink);display:flex;gap:.4rem;align-items:flex-start}
.event-place::before{content:'▸';color:var(--deep);flex:0 0 auto}
.event p{font-size:.98rem;color:var(--ink)}
/* Partner credit. Quiet — it is attribution, not a selling point. */
.event-with{font-size:.9rem !important;font-weight:600;color:var(--berry-deep);font-style:italic}
.event .btn{justify-self:start}
.events-empty{font-size:1rem;color:var(--ink-70);padding:var(--s4);text-align:center}


/* ═══ Callouts ═════════════════════════════════════════════════════════════
   A note from us, not a bordered box. Soft wash, uneven corners, a degree
   off-axis, and a hand-inked line underneath drawn with the same pen as the
   section dividers. Deliberately NOT a coloured rule down one side — that is
   the one pattern every template reaches for.
   ═══════════════════════════════════════════════════════════════════════ */
.affil, .events-note, .council-note{
  position:relative;border:0;
  background-color:var(--moon-14);
  background-repeat:no-repeat;
  background-position:50% calc(100% - .6rem);
  background-size:calc(100% - 2.6rem) 10px;
  padding:var(--s3) var(--s4) calc(var(--s3) + .7rem);
  max-width:38rem;
}
.affil{
  border-radius:1.4rem 1.9rem 1.5rem 1.75rem;
  transform:rotate(-.45deg);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 12' preserveAspectRatio='none'><path d='M0.0 6.0Q0.0 6.0 17.6 6.0Q35.3 6.1 52.9 6.4Q70.6 6.8 88.2 6.4Q105.9 5.9 123.5 6.0Q141.2 6.0 158.8 6.2Q176.5 6.4 194.1 5.4Q211.8 4.5 229.4 5.3Q247.1 6.1 264.7 6.4Q282.4 6.7 300.0 7.1Q317.6 7.5 335.3 5.7Q352.9 4.0 370.6 4.5Q388.2 5.1 405.9 4.7Q423.5 4.3 441.2 5.7Q458.8 7.1 476.5 6.8Q494.1 6.5 511.8 5.8Q529.4 5.1 547.1 5.8Q564.7 6.5 582.4 6.2' fill='none' stroke='%234282AA' stroke-width='2.6' stroke-linecap='round'/></svg>");
}
.events-note{
  border-radius:1.8rem 1.4rem 1.85rem 1.5rem;
  transform:rotate(.35deg);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 12' preserveAspectRatio='none'><path d='M0.0 6.0Q0.0 6.0 17.6 5.9Q35.3 5.9 52.9 6.3Q70.6 6.6 88.2 6.0Q105.9 5.4 123.5 5.7Q141.2 6.0 158.8 5.7Q176.5 5.4 194.1 5.5Q211.8 5.6 229.4 7.0Q247.1 8.4 264.7 6.2Q282.4 3.9 300.0 4.8Q317.6 5.7 335.3 5.2Q352.9 4.6 370.6 5.0Q388.2 5.3 405.9 6.7Q423.5 8.1 441.2 6.7Q458.8 5.4 476.5 5.8Q494.1 6.3 511.8 6.1Q529.4 5.8 547.1 6.0Q564.7 6.2 582.4 6.1' fill='none' stroke='%232C6485' stroke-width='2.6' stroke-linecap='round'/></svg>");
}
.council-note{
  border-radius:1.5rem 1.8rem 1.4rem 1.9rem;
  transform:rotate(-.3deg);
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 12' preserveAspectRatio='none'><path d='M0.0 6.0Q0.0 6.0 17.6 6.2Q35.3 6.4 52.9 6.1Q70.6 5.9 88.2 6.2Q105.9 6.6 123.5 7.1Q141.2 7.5 158.8 6.8Q176.5 6.1 194.1 6.6Q211.8 7.1 229.4 7.1Q247.1 7.1 264.7 7.5Q282.4 7.9 300.0 5.7Q317.6 3.6 335.3 4.0Q352.9 4.3 370.6 6.3Q388.2 8.3 405.9 7.7Q423.5 7.0 441.2 6.1Q458.8 5.2 476.5 5.9Q494.1 6.7 511.8 6.0Q529.4 5.4 547.1 5.6Q564.7 5.9 582.4 5.9' fill='none' stroke='%238A5A86' stroke-width='2.6' stroke-linecap='round'/></svg>");
}

/* ═══ Calendar ═════════════════════════════════════════════════════════════
   Month grid with a dot per group. Day cells are buttons at 44px minimum so
   they are thumb-sized, which is also the WCAG target-size floor.
   ═══════════════════════════════════════════════════════════════════════ */
.cal{
  background:var(--paper);border:3px solid var(--moon);border-radius:var(--radius-lg);
  padding:var(--s3);margin-bottom:var(--s4);
}
.cal-filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--s3)}
.chip{
  --chip:var(--deep);
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  padding:.45rem .85rem;min-height:36px;border-radius:999px;
  border:2.5px solid var(--chip);color:var(--chip);background:transparent;
  transition:background .15s ease,color .15s ease;
}
.chip.is-on{background:var(--chip);color:#fff}

.cal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:.5rem}
.cal-month{
  font-family:var(--hand);font-size:1.5rem;font-weight:700;color:var(--moon);
  margin:0;line-height:1;transform:rotate(-.5deg);
}
.cal-nav{
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:2.5px solid var(--deep);color:var(--deep);background:transparent;
  font-size:1.4rem;line-height:1;display:grid;place-items:center;
}
.cal-nav:hover{background:var(--deep);color:#fff}

.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.cal-dows span{
  text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-70);padding:.2rem 0;
}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-pad{display:block}
.cal-day{
  position:relative;min-height:44px;cursor:default;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:0;background:transparent;border-radius:.8rem;
  font:inherit;font-size:.9rem;color:var(--ink-70);padding:.2rem 0;
}
.cal-day.has-ev{cursor:pointer;color:var(--ink);font-weight:700;background:var(--moon-14)}
.cal-day.has-ev:hover{background:var(--butter)}
.cal-day.is-today .cal-num{text-decoration:underline;text-decoration-thickness:.14em;text-underline-offset:.16em}
.cal-day.is-sel{background:var(--deep);color:#fff}
.cal-day.is-sel .cal-dots i{outline:1.5px solid #fff}
.cal-dots{display:flex;gap:2px;min-height:6px}
.cal-dots i{width:6px;height:6px;border-radius:50%;display:block}

.events-lead{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;
  font-size:1.05rem;color:var(--ink);margin-bottom:.2rem;
}
.events-lead strong{font-family:var(--hand);font-size:1.25rem;font-weight:700;color:var(--berry-deep)}
.linkish{
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  background:none;border:0;color:var(--deep);text-decoration:underline;
  text-underline-offset:.18em;padding:.25rem 0;min-height:32px;
}
.event-org{font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--org,var(--deep))}

/* ═══ Other groups directory ═══════════════════════════════════════════════ */
.orgdir{margin-top:var(--s5)}
.orgdir-head{font-family:var(--hand);font-size:1.45rem;font-weight:700;color:var(--moon);margin-bottom:.3rem;transform:rotate(-.4deg)}
.orgdir-note{font-size:.95rem;color:var(--ink-70);max-width:38rem;margin-bottom:var(--s3)}
.orgdir-list{display:grid;gap:var(--s2)}
.orgcard{
  background:var(--paper);border:2.5px solid var(--ink-12);
  border-radius:var(--radius);padding:var(--s3);
}
/* The group's colour reads as a dot, the same way it does on the calendar —
   rather than a thick bar down one edge, which every template does. */
.orgcard a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:800;font-size:1.02rem;text-decoration:none;color:var(--deep);
}
.orgcard a::before{
  content:'';flex:0 0 auto;width:11px;height:11px;border-radius:50%;
  background:var(--org,var(--deep));
}
.orgcard a:hover{text-decoration:underline}
.orgcard p{font-size:.92rem;color:var(--ink-70);margin-top:.15rem}

/* ═══ Facilitators ═════════════════════════════════════════════════════════ */
.helpers{margin-top:var(--s6)}
.helpers-head{font-family:var(--hand);font-size:1.45rem;font-weight:700;color:var(--moon);margin-bottom:var(--s3);transform:rotate(-.4deg)}
.helpers-list{display:grid;gap:var(--s3)}
.helper{display:flex;align-items:center;gap:var(--s3)}
.helper-mono{
  flex:0 0 58px;width:58px;height:58px;display:grid;place-items:center;
  border:3px solid var(--berry);border-radius:54% 46% 50% 50%/50% 48% 52% 50%;
  background:var(--butter);font-family:var(--hand);font-weight:700;font-size:1.15rem;color:var(--ink);
}
.helper-name{font-family:var(--hand);font-size:1.1rem;font-weight:700;color:var(--ink);line-height:1.2}
.helper-role{font-size:.86rem;color:var(--ink-70);line-height:1.35;text-wrap:pretty}

/* ═══ Alumni ═══════════════════════════════════════════════════════════════ */
.alumni{margin-top:var(--s6);padding-top:var(--s4);border-top:2px dashed var(--ink-12)}
.alumni-head{font-family:var(--hand);font-size:1.6rem;font-weight:700;color:var(--moon);margin-bottom:.3rem;transform:rotate(-.5deg)}
.alumni-note{font-size:.95rem;color:var(--ink-70);margin-bottom:var(--s3)}
.alumni-list{display:flex;flex-wrap:wrap;gap:.5rem}
.alum{
  display:inline-flex;align-items:baseline;gap:.4rem;
  border:2.5px solid var(--ink-12);border-radius:999px;
  padding:.4rem .9rem;background:var(--paper);
}
.alum.is-lead{border-color:var(--berry);background:var(--moon-14)}
.alum-name{font-family:var(--hand);font-weight:700;font-size:1rem;color:var(--ink)}
.alum-year{font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--berry-deep)}

/* ═══ Join extras ══════════════════════════════════════════════════════════ */
.join-pitch{font-size:1rem;text-align:center;max-width:38rem;margin:0 auto var(--s5);color:var(--ink)}
.join-deadline{
  display:block;width:fit-content;margin:0 auto var(--s3);
  font-weight:800;font-size:.95rem;color:#fff;background:var(--berry-deep);
  padding:.6rem 1.2rem;border-radius:999px;text-align:center;
}

@media (min-width:48rem){
  .orgdir-list{grid-template-columns:repeat(2,1fr)}
  .helpers-list{grid-template-columns:repeat(2,1fr)}
  .cal{padding:var(--s4)}
  .cal-day{min-height:58px;font-size:1rem}
  .cal-month{font-size:1.9rem}
}

/* ═══ 6. News ══════════════════════════════════════════════════════════════ */
.news-sub{font-size:.98rem;color:var(--ink-70);margin-bottom:var(--s4);max-width:34rem}
.news-handle{display:block;margin-top:.2rem;color:var(--ink)}
.news-handle a{font-weight:700}


/* On a phone, three stacked squares is ~1800px of scrolling for a section
   that is meant to be a glance. A swipeable row is also how this audience
   already reads Instagram. Becomes a plain grid on desktop. */
.news-grid{
  display:grid;grid-auto-flow:column;grid-auto-columns:80%;gap:var(--s3);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) var(--s2);
}
.news-item{background:var(--paper);border-radius:var(--radius);border:3px solid var(--moon);overflow:hidden;scroll-snap-align:start}
.news-item a{display:block;text-decoration:none;color:inherit}
.news-item img{width:100%;aspect-ratio:1;object-fit:cover}
.news-body{padding:var(--s3)}
.news-date{font-size:.8rem;font-weight:700;color:var(--deep);text-transform:uppercase;letter-spacing:.05em}
.news-text{font-size:.96rem;color:var(--ink);margin-top:.3rem}

/* ═══ 7. Meet the council ══════════════════════════════════════════════════ */
.council-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3)}
.person{text-align:center}
.person-shot{
  width:100%;aspect-ratio:1;object-fit:cover;
  border:3.5px solid var(--moon);margin-bottom:.6rem;background:var(--butter);
}
/* Stand-in until the member photos are taken. Initials in the display face, in
   the same blob crop and accent ring the real photo will inherit — so the grid
   looks finished now and nothing shifts when the pictures arrive. */
.person-mono{
  width:100%;aspect-ratio:1;display:grid;place-items:center;
  border:3.5px solid var(--moon);margin-bottom:.6rem;background:var(--butter);
  font-family:var(--hand);font-weight:700;line-height:1;
  font-size:clamp(1.5rem,6vw,2.1rem);color:var(--ink);letter-spacing:.02em;
}
/* A seat nobody has taken yet. Dashed, quieter, and it reads as an invitation. */
.person-open .person-mono{
  background:transparent;border-style:dashed;color:var(--deep);
  font-size:clamp(1.6rem,6.5vw,2.3rem);
}
.person-open .person-name{color:var(--deep)}
.person-open .person-role{color:var(--ink-70)}

/* Every crop slightly different, and every ring a different colour — made by
   hand, not stamped out. The ring cycles blue → mulberry → deep blue → deep
   mulberry so each person is distinct, and nobody outranks anybody. */
.person:nth-child(6n+1) .person-face{border-radius:58% 42% 47% 53%/49% 55% 45% 51%;border-color:var(--moon)}
.person:nth-child(6n+2) .person-face{border-radius:50%;border-color:var(--berry)}
.person:nth-child(6n+3) .person-face{border-radius:44% 56% 58% 42%/54% 44% 56% 46%;border-color:var(--deep)}
.person:nth-child(6n+4) .person-face{border-radius:52% 48% 40% 60%/46% 58% 42% 54%;border-color:var(--berry-deep)}
.person:nth-child(6n+5) .person-face{border-radius:50%;border-color:var(--moon)}
.person:nth-child(6n+6) .person-face{border-radius:60% 40% 52% 48%/56% 46% 54% 44%;border-color:var(--berry)}
.person:nth-child(odd){transform:rotate(-1deg)}
.person:nth-child(even){transform:rotate(.8deg)}
.person-name{font-family:var(--hand);font-size:1.12rem;font-weight:700;color:var(--ink);line-height:1.15}
.person-role{font-size:.86rem;font-weight:600;color:var(--deep)}
/* One short line in the member's own words. Hidden entirely when empty. */
.person-intro{font-size:.82rem;line-height:1.4;color:var(--ink-70);margin-top:.25rem;text-wrap:pretty}

/* ═══ 8. Get involved ══════════════════════════════════════════════════════ */
/* Butter now sits on a pale-butter page (1.13:1), so this section needs a
   border to stay a distinct block rather than a faint wash. */
.join{background:var(--butter);border:3px solid var(--berry);border-radius:var(--radius-lg);position:relative;overflow:hidden}
.join .wrap{position:relative;z-index:1}
.join-bulb{width:clamp(4.5rem,18vw,6.5rem);margin:0 auto var(--s3)}
.join-bulb svg{width:100%;height:auto;overflow:visible;display:block}
.join-head{text-align:center;color:var(--ink);transform:rotate(-.5deg);transform-origin:center}
/* This section's background is butter, so neither the gold sweep (1.22:1) nor
   the pale-butter paper (1.13:1) would show on it. A mulberry tint clears it
   at 1.43:1. */
.join .mk::before{background:var(--berry-tint)}
.join-lead{font-size:1.08rem;text-align:center;max-width:34rem;margin:0 auto var(--s5);color:var(--ink)}
.join-facts{display:grid;gap:var(--s3);max-width:38rem;margin:0 auto var(--s5)}
/* With an odd number of facts the last one would sit alone in a half-width
   column. Spanning it keeps the block symmetrical whatever the count. */
.join-fact:last-child:nth-child(odd){grid-column:1 / -1}
.join-fact{background:var(--paper);border-radius:var(--radius);padding:var(--s3) var(--s4);border:2.5px solid var(--moon)}
.join-fact dt{font-family:var(--sans);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--deep);margin-bottom:.15rem}
.join-fact dd{margin:0;font-size:1rem;color:var(--ink)}
.join-act{display:flex;justify-content:center;margin-bottom:var(--s3)}
.join-act .btn{font-size:1.08rem;padding:1.05rem 2rem}
.join-note{text-align:center;font-size:.95rem;color:var(--ink-70);max-width:30rem;margin-inline:auto}

/* ═══ 9. Footer ════════════════════════════════════════════════════════════ */
.foot{position:relative;z-index:1;background:var(--ink);color:var(--paper);margin-top:var(--s7);padding-block:var(--s6) var(--s5);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.foot a{color:var(--butter)}                      /* butter on ink = 11.7:1 */
.foot-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:var(--s4)}
.foot-bulb{width:32px;height:32px;flex:0 0 32px}
.foot-name{font-family:var(--hand);font-weight:700;font-size:1.35rem;color:var(--paper);transform:rotate(-1deg)}
.foot-cols{display:grid;gap:var(--s4);margin-bottom:var(--s5)}
.foot-col h3{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--butter);margin-bottom:.5rem;font-family:var(--sans)}
.foot-col p,.foot-col li{font-size:.95rem;color:color-mix(in srgb,var(--paper) 82%,transparent);margin-bottom:.3rem}
.foot-ack{font-size:.86rem;color:color-mix(in srgb,var(--paper) 62%,transparent);border-top:2px solid rgba(253,249,238,.18);padding-top:var(--s3)}

.noscript{padding:var(--s6) var(--pad);text-align:center}

/* NOTE: there is deliberately no CSS rule here hiding .reveal elements.
   CSS must never hide content that only JavaScript can bring back — if the
   animation library is blocked (corporate network, ad blocker, CDN outage)
   the page would render half-empty. The hidden state is applied by JS in
   main.js, which only does it when it knows it can also undo it. */

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — parallax, marquee and cursor off; content fully readable.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.reveal-tile{opacity:1 !important;transform:none !important}
  .cursor{display:none}
  .marquee{transform:rotate(-1.2deg)}
  .mk::before{transform:scaleX(1) rotate(-.8deg)}
  .marquee-track{transform:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP — the adaptation, not the origin.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:48rem){
  :root{--pad:2rem}
  .nav-links li:not(:last-child){display:block}
  .do-grid{grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4)}
  /* Swipe row back to a static grid — there is room for all three at once. */
  .news-grid{
    grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr);
    overflow:visible;margin-inline:0;padding:0;
  }
  .council-grid{grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4)}
  .events{grid-template-columns:repeat(2,1fr)}
  .join-facts{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
  .sec{padding-block:var(--s7)}
}

@media (min-width:64rem){
  :root{--pad:2.5rem}
  /* SPLIT, NOT OVERLAY. The team photo has people right across the frame, so
     the old cream panel sitting on top of it hid everyone on the left. Text and
     photo now sit side by side and nobody gets covered. Reverting to the overlay
     would need a photo with its subject kept to the centre-right. */
  .hero{
    min-height:auto;display:grid;align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    gap:var(--s6);
    max-width:var(--maxw);margin-inline:auto;
    padding:var(--s5) var(--pad) var(--s7);
  }
  .hero-photo{position:static;inset:auto;margin:0;order:2}
  .hero-photo img{
    width:100%;height:auto;max-height:none;aspect-ratio:4/3;object-fit:cover;
    border:3px solid var(--moon);
    border-radius:2.5rem 3.25rem 2.5rem 3rem;   /* bubbly, deliberately uneven */
    transform:rotate(1.1deg);
  }
  .hero-body{
    order:1;width:auto;margin:0;padding:0;
    background:none;border:0;transform:rotate(-.5deg);
  }
  .hero-cta .btn{flex:0 1 auto}
  .stand-stage{grid-template-columns:repeat(4,1fr)}
  .card{padding:var(--s4) var(--s3)}
  .events{gap:var(--s4)}
  .h2{font-size:clamp(2.4rem,3.6vw,3.4rem)}
}

@media (min-width:80rem){
  .council-grid{grid-template-columns:repeat(6,1fr)}
}