/* ============================================================
   SMASHROOM MUSIC & WELLBEING CIC : shared stylesheet
   Concept: "Come as you are", a late-night rehearsal-room world
   carrying a message of care. Black / purple / white, drenched dark.
   Signature motif: the logo waveform, alive.
   ============================================================ */

:root{
  --void:        oklch(0.155 0.028 305);
  --void-deep:   oklch(0.115 0.022 305);
  --surface:     oklch(0.205 0.034 305);
  --surface-2:   oklch(0.245 0.040 305);
  --line:        oklch(0.34 0.045 305);

  --purple:      oklch(0.605 0.185 303);
  --purple-bright:oklch(0.715 0.175 305);
  --purple-deep: oklch(0.44 0.150 303);
  --purple-ghost:oklch(0.605 0.185 303 / 0.14);

  --ink:         oklch(0.975 0.006 300);
  --body:        oklch(0.86 0.018 300);
  --muted:       oklch(0.745 0.024 302);

  --focus:       oklch(0.80 0.16 305);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.24vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.35rem + 1.2vw, 2.3rem);
  --step-3:  clamp(2.4rem, 1.9rem + 2.4vw, 3.6rem);
  --step-4:  clamp(3.4rem, 2.4rem + 4.8vw, 6rem);

  --gutter: clamp(1.15rem, 0.8rem + 1.6vw, 2rem);
  --section: clamp(3.75rem, 2.75rem + 4vw, 6.25rem);
  --maxw: 1200px;
  --nav-h: 74px;   /* fixed-nav height (phones); desktop override below */

  --radius: 18px;
  --radius-lg: 26px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --z-marquee: 1;
  --z-sticky: 60;
  --z-nav: 80;
  --z-menu: 90;
  --z-toast: 100;
  --z-lightbox: 120;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.62;
  color:var(--body);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(90% 65% at 82% -12%, oklch(0.62 0.2 303 / 0.42), transparent 62%),
    radial-gradient(70% 60% at 6% 112%, oklch(0.5 0.18 300 / 0.28), transparent 60%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, oklch(0.08 0.02 305 / 0.55));
  pointer-events:none; z-index:0;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; line-height:0.96; letter-spacing:-0.01em; color:var(--ink); text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
:focus-visible{ outline:2.5px solid var(--focus); outline-offset:3px; border-radius:4px; }

.wrap{ width:min(100% - var(--gutter)*2, var(--maxw)); margin-inline:auto; }
.wrap-wide{ width:min(100% - var(--gutter)*2, 1400px); margin-inline:auto; }

.col-head{
  font-family:var(--display); font-weight:800; font-size:var(--step-2);
  text-transform:uppercase; color:var(--ink); letter-spacing:-0.01em; line-height:1;
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--purple);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:0.55em;
  font-family:var(--sans); font-weight:600; font-size:var(--step-0);
  padding:0.85em 1.5em; border-radius:100px; border:1.5px solid transparent;
  background:var(--bg); color:oklch(0.14 0.02 305); white-space:nowrap;
  cursor:pointer; transition:transform .3s var(--ease), background .3s, box-shadow .35s var(--ease);
  box-shadow:0 0 0 0 var(--purple-ghost);
}
.btn::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-1;
  background:radial-gradient(60% 120% at 50% 120%, var(--purple-bright), transparent 70%);
  opacity:0; filter:blur(12px); transition:opacity .4s var(--ease);
}
.btn:hover{ background:var(--purple-bright); transform:translateY(-2px); box-shadow:0 14px 34px -12px oklch(0.6 0.19 303 / 0.7); }
.btn:hover::after{ opacity:0.75; }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none; }
.btn--ghost:hover{ background:oklch(0.6 0.19 303 / 0.12); border-color:var(--purple); transform:translateY(-2px); }
.nav-cta .btn--ghost[aria-current="page"]{ border-color:var(--purple); color:var(--purple-bright); }
.nav-cta .btn[aria-current="page"]{ box-shadow:0 0 0 3px oklch(0.6 0.19 303 / 0.22); }
.btn--sm{ padding:0.62em 1.15em; font-size:var(--step--1); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:0.55rem var(--gutter);
  background:oklch(0.13 0.02 305 / 0.82);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid oklch(0.5 0.1 303 / 0.18);
  transition:transform .5s var(--ease), background .4s;
}
.nav.is-hidden{ transform:translateY(-105%); }
.nav.at-top{ background:oklch(0.13 0.02 305 / 0.5); }
.brand{ display:flex; flex:0 0 auto; align-items:center; gap:0.7rem; font-family:var(--display); font-weight:800; }
.brand img{ width:58px; height:58px; border-radius:50%; box-shadow:0 0 0 1px oklch(0.6 0.19 303 / 0.35), 0 6px 18px -8px oklch(0.6 0.19 303 / 0.6); }
.brand span{ font-size:1.32rem; letter-spacing:0.005em; color:var(--ink); line-height:0.95; }
.brand span small{ display:block; font-family:var(--sans); font-weight:600; font-size:0.66rem; letter-spacing:0.2em; color:var(--purple-bright); margin-top:4px; white-space:nowrap; }

.nav-links{ display:flex; align-items:center; gap:0.2rem; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:0.92rem; font-weight:500; color:var(--body); white-space:nowrap;
  padding:0.5em 0.7em; border-radius:8px; position:relative;
  transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0.7em; right:0.7em; bottom:0.28em; height:2px;
  background:var(--purple-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:0.55rem; }

/* The shop link is the only nav item asking for money rather than attention, so it is
   built to be found at a glance: a bag, an outline and the brand purple, without shouting
   loudly enough to compete with Get involved. */
.nav-links a.nav-shop{ display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.42em 0.85em; border:1px solid oklch(0.6 0.19 303 / 0.45); border-radius:999px;
  color:var(--purple-bright); transition:background .25s, border-color .25s, color .25s; }
.nav-links a.nav-shop::after{ content:none; }
.nav-links a.nav-shop svg{ flex:0 0 auto; }
.nav-links a.nav-shop:hover{ background:var(--purple-ghost); border-color:var(--purple-bright); color:var(--ink); }
.nav-links a.nav-shop.is-on{ background:var(--purple-ghost); border-color:var(--purple-bright); color:var(--ink); }
.nav-links a.nav-shop:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }



/* Seven grouped items need 1254px at full size, which is 33px more than a 1221 laptop has.
   Tightening the spacing in that band buys it back without dropping anything from the bar
   or shrinking the wordmark, which is what the old ten-link version had to do. */
}

/* ---- Grouped nav ---- */
.nav-group{ position:relative; }
.nav-gbtn{ display:inline-flex; align-items:center; gap:0.32rem; cursor:pointer; white-space:nowrap;
  font:inherit; font-size:0.92rem; font-weight:500; color:var(--body); background:transparent;
  border:0; padding:0.5em 0.7em; border-radius:8px; transition:color .25s; }
.nav-gbtn:hover, .nav-gbtn[aria-expanded="true"]{ color:var(--ink); }
.nav-gbtn.is-on{ color:var(--ink); }
.nav-gbtn .chev{ transition:transform .3s var(--ease); }
.nav-gbtn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.nav-gbtn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.nav-drop{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:190px; margin:0; padding:0.4rem; list-style:none; z-index:var(--z-menu);
  background:oklch(0.17 0.03 305 / 0.98); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 22px 50px -20px #000;
  opacity:0; pointer-events:none; transition:opacity .22s, transform .28s var(--ease); }
.nav-group.open .nav-drop{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.nav-drop a{ display:block; padding:0.6em 0.8em; border-radius:9px; white-space:nowrap;
  font-size:0.9rem; color:var(--body); transition:background .2s, color .2s; }
.nav-drop a::after{ content:none; }
.nav-drop a:hover{ background:var(--purple-ghost); color:var(--ink); }
.nav-drop a.active{ color:var(--purple-bright); }
/* a hover bridge, so the pointer can cross the gap without the menu closing under it */
.nav-group.open::after{ content:""; position:absolute; left:0; right:0; top:100%; height:12px; }

/* ---- Phone menu ---- */
/* The root cause of links sitting side by side: .nav-menu is a flex column, so only its
   DIRECT children stacked. Anything nested one level deeper fell back to display:inline
   and ran along the line. Set it on every link in the menu, not just the top level. */
.nav-menu a{ display:block; }
.menu-block{ display:flex; flex-direction:column; padding-top:0.4rem; margin-top:0.4rem;
  border-top:1px solid oklch(0.34 0.045 305 / 0.35); }
.menu-shop{ display:flex !important; align-items:center; gap:0.5rem; margin:0.35rem 0;
  border:1px solid oklch(0.6 0.19 303 / 0.5); border-radius:12px; color:var(--purple-bright) !important;
  background:var(--purple-ghost); font-weight:700; }
.menu-shop svg{ flex:0 0 auto; }

.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid var(--line);
  background:transparent; border-radius:12px; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .2s; position:relative;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav.is-open .nav-toggle span{ background:transparent; }
.nav.is-open .nav-toggle span::before{ transform:translateY(6px) rotate(45deg); }
.nav.is-open .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 1220px){
  .nav-toggle{ display:inline-flex; }
  .nav-links, .nav-cta .btn--ghost{ display:none; }
  .nav-menu{
    position:fixed; inset:calc(var(--nav-h) + 6px) var(--gutter) auto; z-index:var(--z-menu);
    max-height:calc(100dvh - var(--nav-h) - 22px); overflow-y:auto; overscroll-behavior:contain;
    background:oklch(0.17 0.03 305 / 0.98); backdrop-filter:blur(20px);
    border:1px solid var(--line); border-radius:var(--radius);
    padding:1rem; display:flex; flex-direction:column; gap:0.2rem;
    opacity:0; transform:translateY(-12px) scale(0.98); pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    box-shadow:0 30px 70px -20px oklch(0.05 0 0 / 0.8);
  }
  .nav.is-open .nav-menu{ opacity:1; transform:none; pointer-events:auto; }
  .nav-menu a{ padding:0.85em 0.9em; border-radius:12px; font-size:1.05rem; }
  .nav-menu a:hover{ background:var(--purple-ghost); }
  .nav-menu a.active{ color:var(--purple-bright); background:var(--purple-ghost); }
  .nav-menu .btn{ margin-top:0.5rem; justify-content:center; }
  .nav-menu hr{ border:0; border-top:1px solid var(--line); margin:0.6rem 0 0.2rem; }
}
@media (min-width: 1221px){ .nav-menu-mobileonly{ display:none; } }
/* Nav branding: larger and more prominent on tablet/desktop (phones keep the fitted size) */
@media (min-width: 601px){
  :root{ --nav-h: 128px; }   /* taller nav to fit the dominant logo */
  .nav .brand img{ width:112px; height:112px; }
  .nav .brand span{ font-size:1.95rem; }
  .nav .brand span small{ font-size:0.86rem; margin-top:5px; letter-spacing:0.18em; }
}
@media (max-width: 600px){
  .brand img{ width:50px; height:50px; }
  .brand span{ font-size:1.1rem; }
  .brand span small{ font-size:0.54rem; letter-spacing:0.1em; }
}
@media (max-width: 380px){
  .brand span small{ font-size:0.5rem; letter-spacing:0.06em; }
  .nav-cta .btn--sm{ padding:0.55em 0.95em; }
}

/* ---------- Waveform motif ---------- */
.wave{ display:flex; align-items:center; gap:3px; height:100%; }
.wave .bar, .hero-wave .bar, .page-hero-wave .bar{
  flex:1 1 auto; min-width:2px; max-width:10px;
  background:linear-gradient(to top, var(--purple-deep), var(--purple-bright));
  border-radius:100px;
  transform-origin:bottom;
  animation:pulse 1.4s var(--ease-quart) infinite alternate;
}
@keyframes pulse{ from{ transform:scaleY(0.28); } to{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .wave .bar{ animation:none; } }

/* ---------- Hero (home) ---------- */
.hero{ position:relative; z-index:1; padding:calc(var(--nav-h) + 1.8rem) 0 clamp(1.25rem,3vw,2.75rem); overflow-x:clip; }
.hero-grid{
  display:grid; grid-template-columns:clamp(22rem, 33vw, 27rem) 1fr; gap:clamp(1.5rem,3.5vw,3.25rem);
  align-items:center;
}
.hero-pill{
  display:inline-flex; align-items:center; gap:0.6em;
  font-size:var(--step--1); font-weight:500; letter-spacing:0.04em;
  color:var(--body); background:oklch(0.6 0.19 303 / 0.12);
  border:1px solid oklch(0.6 0.19 303 / 0.3); padding:0.5em 1em; border-radius:100px;
}
.hero-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--purple-bright); box-shadow:0 0 12px var(--purple-bright); }
.hero h1{
  font-size:clamp(4.5rem, 6.8vw, 6rem); font-weight:900; letter-spacing:-0.02em;
  margin:1.35rem 0 0; text-transform:uppercase; line-height:0.9;
}
.hero h1 .amp{ color:var(--purple-bright); }
.hero-lead{ font-size:var(--step-1); color:var(--body); max-width:36ch; margin-top:1.5rem; line-height:1.5; }
.hero-note{
  margin-top:1.4rem; display:flex; gap:0.7rem; align-items:flex-start;
  font-size:var(--step--1); color:var(--muted); max-width:42ch;
}
.hero-note svg{ flex:none; margin-top:2px; color:var(--purple-bright); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:2.1rem; }

.hero-visual{ position:relative; }
.hero-visual::before{
  content:""; position:absolute; inset:-14% -10% -20% -12%; z-index:-1;
  background:radial-gradient(60% 60% at 60% 45%, oklch(0.6 0.19 303 / 0.55), transparent 70%);
  filter:blur(46px); pointer-events:none;
}
.hero-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid oklch(0.6 0.19 303 / 0.4);
  box-shadow:0 40px 90px -28px oklch(0.6 0.19 303 / 0.55), 0 0 0 1px oklch(0.55 0.15 303 / 0.25) inset;
  aspect-ratio:4/3;
}
.hero-frame img{ width:100%; height:100%; object-fit:cover; }
.hero-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, transparent 40%, oklch(0.13 0.02 305 / 0.55));
}
.hero-tag{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  display:flex; align-items:center; gap:0.6rem;
  font-size:0.8rem; font-weight:500; color:var(--ink);
  background:oklch(0.12 0.02 305 / 0.7); backdrop-filter:blur(8px);
  padding:0.5em 0.9em; border-radius:100px; border:1px solid oklch(0.6 0.19 303 / 0.3);
}
.hero-tag .live{ width:8px; height:8px; border-radius:50%; background:var(--purple-bright); animation:pulse-dot 2s infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
@media (prefers-reduced-motion: reduce){ .hero-tag .live{ animation:none; } }

.hero-wave{
  margin-top:1.7rem; height:84px; display:flex; align-items:flex-end; gap:3px;
  border-top:1px solid oklch(0.5 0.1 303 / 0.2);
  padding-top:1rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .hero-text{ max-width:31rem; }
  .hero h1{ font-size:clamp(4.9rem, 21.5vw, 5.9rem); }
  .hero-lead{ max-width:44ch; }
}

/* ---------- Interior page hero ---------- */
.page-hero{
  position:relative; z-index:1;
  padding:calc(var(--nav-h) + clamp(1.5rem,3vw,2.75rem)) 0 clamp(1.5rem,3vw,2.5rem);
}
.page-hero .pill{
  display:inline-flex; align-items:center; gap:0.55em; margin-bottom:1.1rem;
  font-size:var(--step--1); font-weight:600; letter-spacing:0.04em; color:var(--purple-bright);
  background:oklch(0.6 0.19 303 / 0.12); border:1px solid oklch(0.6 0.19 303 / 0.3);
  padding:0.45em 0.95em; border-radius:100px;
}
.page-hero .pill .eq{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.page-hero .pill .eq i{ width:2.5px; border-radius:2px; background:var(--purple-bright); display:block; }
.page-hero .pill .eq i:nth-child(1){ height:45%; } .page-hero .pill .eq i:nth-child(2){ height:100%; } .page-hero .pill .eq i:nth-child(3){ height:70%; }
.page-hero h1{ font-size:clamp(2.7rem, 1.9rem + 3.6vw, 4.8rem); text-transform:uppercase; letter-spacing:-0.02em; }
.page-hero h1 .amp{ color:var(--purple-bright); }
.page-hero .lead{ margin-top:1.2rem; max-width:56ch; font-size:var(--step-1); color:var(--body); line-height:1.5; }
.page-hero-wave{
  margin-top:2.2rem; height:56px; display:flex; align-items:flex-end; gap:3px; max-width:640px;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 70%, transparent);
  mask-image:linear-gradient(90deg, #000 0, #000 70%, transparent);
}
/* first band after the page hero sits closer */
.page-hero + .band{ padding-top:clamp(1.5rem,3vw,2.5rem); }

/* ---------- Marquee ---------- */
.marquee{
  position:relative; z-index:var(--z-marquee);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--void-deep); overflow:hidden; padding:1.1rem 0; margin-top:var(--section);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; gap:0; width:max-content; animation:scroll-x 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{
  font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,3vw,1.9rem);
  text-transform:uppercase; letter-spacing:0.01em; color:var(--ink);
  padding:0 1.6rem; display:inline-flex; align-items:center; gap:1.6rem; white-space:nowrap;
}
.marquee-item::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--purple); }
.marquee-item:nth-child(even){ color:var(--purple-bright); }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; flex-wrap:wrap; justify-content:center; } }

/* ---------- Section shell ---------- */
section{ position:relative; z-index:1; }
.band{ padding:var(--section) 0; }
.band--deep{ background:var(--void-deep); }
.band--tight{ padding:clamp(3rem,5vw,5rem) 0; }
.section-head{ max-width:60ch; margin-bottom:clamp(2rem,4vw,3.2rem); }
.section-head h2{ font-size:var(--step-3); margin-top:0.9rem; text-transform:uppercase; }
.section-head p{ color:var(--muted); font-size:var(--step-1); margin-top:1rem; line-height:1.5; }

/* Reveal enhances an already-visible default: only hidden once JS confirms it can reveal them */
.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(22px); }
.js .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- What we do ---------- */
.offers{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(0.9rem,2vw,1.4rem); }
.offer{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.5rem,2.6vw,2.2rem);
  overflow:hidden; transition:transform .45s var(--ease), border-color .35s, background .35s;
}
.offer::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .45s;
  background:radial-gradient(240px circle at var(--mx, 100%) var(--my, 0%), oklch(0.6 0.19 303 / 0.22), transparent 60%);
}
.offer:hover{ transform:translateY(-5px); border-color:oklch(0.6 0.19 303 / 0.5); background:var(--surface-2); }
.offer:hover::before{ opacity:1; }
.offer-ico{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:oklch(0.6 0.19 303 / 0.15); border:1px solid oklch(0.6 0.19 303 / 0.3);
  color:var(--purple-bright); margin-bottom:1.2rem;
}
.offer h3{ font-size:var(--step-2); text-transform:uppercase; }
.offer p{ color:var(--muted); margin-top:0.7rem; font-size:var(--step-0); }
.offer .tag{ margin-top:1.2rem; display:inline-block; font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--purple-bright); }
@media (max-width: 720px){ .offers{ grid-template-columns:1fr; } }

/* ---------- Support / why music ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
@media (max-width: 820px){ .split{ grid-template-columns:1fr; } }
.who-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.chips{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.3rem; }
.chip{
  font-size:0.85rem; font-weight:500; color:var(--body);
  background:oklch(0.6 0.19 303 / 0.1); border:1px solid oklch(0.6 0.19 303 / 0.28);
  padding:0.42em 0.85em; border-radius:100px;
}
.why-list{ list-style:none; margin:0; padding:0; display:grid; gap:0.2rem; }
.why-list li{
  display:flex; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-weight:600; font-size:var(--step-2); text-transform:uppercase; color:var(--ink);
}
.why-list li:last-child{ border-bottom:0; }
.why-list .eq{ display:inline-flex; align-items:flex-end; gap:2px; height:22px; flex:none; }
.why-list .eq i{ width:3px; border-radius:2px; background:var(--purple-bright); display:block; }
.why-list .eq i:nth-child(1){ height:40%; } .why-list .eq i:nth-child(2){ height:100%; } .why-list .eq i:nth-child(3){ height:65%; }

/* ---------- Story ---------- */
.story{ position:relative; overflow:hidden; }
.story-inner{ max-width:760px; margin-inline:auto; text-align:center; position:relative; }
.story .candle{
  width:14px; height:14px; border-radius:50%; margin:0 auto 1.6rem;
  background:var(--purple-bright); box-shadow:0 0 30px 6px oklch(0.7 0.18 305 / 0.6);
  animation:flicker 3.5s ease-in-out infinite;
}
@keyframes flicker{ 0%,100%{ opacity:1; transform:scale(1);} 45%{ opacity:.7; transform:scale(0.88);} 70%{ opacity:.95;} }
@media (prefers-reduced-motion: reduce){ .story .candle{ animation:none; } }
.story h2{ font-size:var(--step-3); text-transform:uppercase; }
.story-body{ margin-top:1.6rem; font-size:var(--step-1); color:var(--body); line-height:1.66; }
.story-body p + p{ margin-top:1.1rem; }
.story-body .lead{ color:var(--ink); font-weight:500; }
.story-name{
  display:inline-block; margin-top:2rem; font-family:var(--display); font-weight:700;
  font-size:var(--step-1); color:var(--purple-bright); text-transform:uppercase; letter-spacing:0.02em;
}
.story-name small{ display:block; font-family:var(--sans); font-weight:400; font-size:0.85rem; letter-spacing:0; color:var(--muted); text-transform:none; margin-top:0.3rem; }

/* ---------- Two Wolves ---------- */
.wolves{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(0.9rem,2vw,1.4rem); }
.wolf{
  border-radius:var(--radius-lg); padding:clamp(1.6rem,3vw,2.4rem); border:1px solid var(--line);
  transition:transform .45s var(--ease);
}
.wolf:hover{ transform:translateY(-4px); }
.wolf--fear{ background:var(--void-deep); border-color:oklch(0.34 0.045 305); }
.wolf--good{ background:linear-gradient(155deg, oklch(0.28 0.09 303), oklch(0.2 0.06 303)); border-color:oklch(0.6 0.19 303 / 0.4); }
.wolf .label{ font-size:0.8rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.wolf--good .label{ color:var(--purple-bright); }
.wolf h3{ font-size:var(--step-2); text-transform:uppercase; margin-top:0.5rem; }
.wolf p{ margin-top:0.8rem; color:var(--muted); }
.wolf--good p{ color:var(--body); }
.wolf .traits{ margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:0.4rem; }
.wolf .traits span{ font-size:0.82rem; padding:0.35em 0.75em; border-radius:100px; border:1px solid var(--line); color:var(--muted); }
.wolf--good .traits span{ border-color:oklch(0.6 0.19 303 / 0.35); color:var(--body); background:oklch(0.6 0.19 303 / 0.1); }
.wolves-foot{ margin-top:1.6rem; text-align:center; color:var(--muted); font-size:var(--step-0); max-width:60ch; margin-inline:auto; }
@media (max-width: 720px){ .wolves{ grid-template-columns:1fr; } }

/* ---------- Supported rehearsal ---------- */
.rehearse-visual{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid oklch(0.6 0.19 303 / 0.25); box-shadow:0 40px 90px -34px oklch(0.05 0.05 305 / 0.9); }
.rehearse-visual img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }
.rehearse-list{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:0.6rem; }
.rehearse-list li{ display:flex; gap:0.75rem; align-items:flex-start; color:var(--body); }
.rehearse-list li svg{ flex:none; margin-top:5px; color:var(--purple-bright); }
.callout{
  margin-top:1.5rem; padding:1.1rem 1.3rem; border-radius:14px;
  background:oklch(0.6 0.19 303 / 0.1); border:1px solid oklch(0.6 0.19 303 / 0.3);
  color:var(--body); font-size:var(--step-0);
}
.callout strong{ color:var(--ink); }

/* ---------- Team ---------- */
.team{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.4rem,2.8vw,2.4rem); max-width:1000px; margin-inline:auto; }
.member{ text-align:center; flex:1 1 280px; max-width:300px; }
.member .photo{
  width:clamp(130px,20vw,180px); aspect-ratio:1; margin:0 auto 1.1rem; border-radius:50%;
  border:2px solid oklch(0.6 0.19 303 / 0.4); padding:5px; background:var(--surface);
  position:relative;
}
.member .photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.member h3{ font-size:var(--step-1); text-transform:uppercase; }
.member .role{ color:var(--purple-bright); font-size:0.85rem; font-weight:600; letter-spacing:0.04em; margin-top:0.35rem; }
.member p{ color:var(--muted); font-size:0.92rem; margin-top:0.7rem; max-width:34ch; margin-inline:auto; }
@media (max-width: 760px){ .member{ flex-basis:100%; max-width:340px; } }

.advisers{ margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line); padding-top:2rem; }
.advisers h4{ font-family:var(--sans); font-weight:600; font-size:0.85rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:1.1rem; }
.adviser-grid{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.adviser{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:0.8rem 1.1rem;
}
.adviser strong{ color:var(--ink); font-weight:600; display:block; font-size:0.98rem; }
.adviser span{ color:var(--muted); font-size:0.84rem; }

/* ---------- Gallery ---------- */
.gallery{ columns:3; column-gap:14px; }
@media (max-width: 900px){ .gallery{ columns:2; } }
@media (max-width: 520px){ .gallery{ columns:1; } }
.gallery figure{
  break-inside:avoid; margin:0 0 14px; position:relative; border-radius:16px; overflow:hidden;
  cursor:pointer; border:1px solid var(--line); background:var(--void-deep);
  -webkit-tap-highlight-color:transparent;
}
.gallery figure img{ width:100%; display:block; transition:transform .7s var(--ease), filter .5s; }
.gallery figure::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:linear-gradient(160deg, oklch(0.6 0.19 303 / 0.28), transparent 55%);
}
.gallery figure:hover img{ transform:scale(1.045); }
.gallery figure:hover::after{ opacity:1; }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem 0.9rem;
  font-size:0.85rem; font-weight:500; color:#fff; z-index:1;
  background:linear-gradient(transparent, oklch(0.08 0.02 305 / 0.82));
  opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s;
}
.gallery figure:hover figcaption, .gallery figure:focus-visible figcaption{ opacity:1; transform:none; }
.gallery figure .zoom{
  position:absolute; top:10px; right:10px; z-index:1; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:oklch(0.12 0.02 305 / 0.6);
  backdrop-filter:blur(6px); opacity:0; transform:scale(0.8); transition:opacity .3s, transform .3s;
}
.gallery figure:hover .zoom{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .gallery figure img{ transition:none; } .gallery figure:hover img{ transform:none; }
}

/* ---------- Filmstrip: interactive "step inside" showcase ---------- */
.filmstrip{
  display:flex; gap:10px; height:clamp(340px, 44vw, 540px); width:100%;
}
.filmstrip .frame{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden; border-radius:16px;
  border:1px solid var(--line); cursor:pointer; padding:0; background:var(--void-deep);
  appearance:none; color:inherit; font:inherit; text-align:left; display:block;
  transition:flex .7s var(--ease), filter .5s var(--ease), border-color .4s;
  filter:brightness(0.62) saturate(0.92);
}
.filmstrip .frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease); }
.filmstrip:hover .frame{ flex:1 1 0; }
.filmstrip .frame:hover, .filmstrip .frame:focus-visible{ flex:5 1 0; filter:none; border-color:oklch(0.6 0.19 303 / 0.5); }
.filmstrip:not(:hover) .frame:first-child{ flex:5 1 0; filter:none; }
.filmstrip .frame:hover img, .filmstrip:not(:hover) .frame:first-child img{ transform:scale(1.04); }
.filmstrip .frame .glow{ position:absolute; inset:0; background:linear-gradient(160deg, oklch(0.6 0.19 303 / 0.18), transparent 55%); opacity:0; transition:opacity .5s; pointer-events:none; }
.filmstrip .frame:hover .glow, .filmstrip:not(:hover) .frame:first-child .glow{ opacity:1; }
.filmstrip .frame .cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1.2rem 1.1rem;
  color:#fff; font-size:0.95rem; font-weight:500; line-height:1.35; z-index:2;
  background:linear-gradient(transparent, oklch(0.07 0.02 305 / 0.9));
  opacity:0; transform:translateY(8px); transition:opacity .45s, transform .45s;
  white-space:normal;
}
.filmstrip .frame:hover .cap, .filmstrip .frame:focus-visible .cap, .filmstrip:not(:hover) .frame:first-child .cap{ opacity:1; transform:none; }
.filmstrip .frame .zoom{
  position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:oklch(0.1 0.02 305 / 0.55); backdrop-filter:blur(6px);
  opacity:0; transform:scale(0.85); transition:opacity .35s, transform .35s;
}
.filmstrip .frame:hover .zoom, .filmstrip:not(:hover) .frame:first-child .zoom{ opacity:1; transform:none; }
.filmstrip-hint{ margin-top:1rem; font-size:0.85rem; color:var(--muted); display:flex; align-items:center; gap:0.5rem; }
.filmstrip-hint svg{ color:var(--purple-bright); }
@media (prefers-reduced-motion: reduce){
  .filmstrip .frame, .filmstrip .frame img{ transition:none; }
}
@media (max-width: 760px){
  .filmstrip{
    height:auto; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding-bottom:0.6rem; scrollbar-width:none;
  }
  .filmstrip::-webkit-scrollbar{ display:none; }
  .filmstrip .frame, .filmstrip .frame:hover, .filmstrip:not(:hover) .frame:first-child{
    flex:0 0 82%; filter:none; height:clamp(280px, 74vw, 420px); scroll-snap-align:center;
  }
  .filmstrip .frame .cap{ opacity:1; transform:none; }
  .filmstrip .frame .glow{ opacity:0; }
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:var(--z-lightbox); display:grid; place-items:center;
  background:oklch(0.07 0.015 305 / 0.95); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease); padding:clamp(1rem,4vw,3rem);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox figure{ margin:0; max-width:min(1100px,94vw); text-align:center; }
.lightbox img{
  max-width:100%; max-height:82vh; border-radius:12px; object-fit:contain;
  box-shadow:0 40px 100px -30px oklch(0.03 0 0 / 0.9); border:1px solid oklch(0.6 0.19 303 / 0.25);
}
.lightbox figcaption{ margin-top:1rem; color:var(--body); font-size:0.95rem; }
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:oklch(0.18 0.03 305 / 0.85); border:1px solid var(--line); color:var(--ink); cursor:pointer;
  display:grid; place-items:center; transition:background .25s, transform .25s;
}
.lb-btn:hover{ background:var(--purple); color:oklch(0.14 0.02 305); }
.lb-prev{ left:clamp(0.5rem,3vw,2rem); } .lb-next{ right:clamp(0.5rem,3vw,2rem); }
.lb-close{ position:absolute; top:clamp(0.8rem,3vw,1.6rem); right:clamp(0.8rem,3vw,1.6rem); width:48px; height:48px; border-radius:50%; background:oklch(0.18 0.03 305 / 0.85); border:1px solid var(--line); color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.lb-close:hover{ background:var(--purple); color:oklch(0.14 0.02 305); }
.lb-count{ position:absolute; bottom:clamp(0.8rem,3vw,1.6rem); left:50%; transform:translateX(-50%); color:var(--muted); font-size:0.85rem; letter-spacing:0.08em; }
@media (max-width: 620px){ .lb-btn{ width:44px; height:44px; } }

/* ---------- Donate ---------- */
.donate-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width: 820px){ .donate-grid{ grid-template-columns:1fr; } }
.tiers{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.tier{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:center;
  padding:1.15rem clamp(1.1rem,2.4vw,1.6rem); border-bottom:1px solid var(--line);
  transition:background .3s;
}
.tier:last-child{ border-bottom:0; }
.tier:hover{ background:var(--surface-2); }
/* 4ch so £100 does not shunt its description out of line with the others */
.tier .amt{ font-family:var(--display); font-weight:800; font-size:var(--step-2); color:var(--purple-bright); min-width:4ch; }
.tier .desc{ color:var(--body); font-size:0.98rem; }
.tier--feat{ background:oklch(0.6 0.19 303 / 0.1); }
.donate-aside .card{
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid oklch(0.6 0.19 303 / 0.3); border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.2rem);
}
.donate-aside h3{ font-size:var(--step-2); text-transform:uppercase; }
.donate-aside p{ color:var(--muted); margin-top:0.9rem; }
.donate-aside .btn{ margin-top:1.5rem; }
.donate-aside .detail{ margin-top:1.4rem; }
.mini-note{ margin-top:1rem; font-size:0.82rem; color:var(--muted); }

/* ---------- Get involved ---------- */
.involve{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(0.8rem,1.8vw,1.2rem); }
.involve-item{
  flex:1 1 210px; max-width:320px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; transition:transform .4s var(--ease), border-color .3s;
}
a.involve-item:hover{ transform:translateY(-4px); border-color:oklch(0.6 0.19 303 / 0.45); }
.involve-item .k{ font-family:var(--display); font-weight:700; color:var(--purple-bright); font-size:1.1rem; }
.involve-item h3{ font-size:var(--step-1); text-transform:uppercase; margin-top:0.5rem; }
.involve-item p{ color:var(--muted); font-size:0.92rem; margin-top:0.5rem; }
/* only linked cards get the interactive treatment (hover lift + arrow), so static info cards do not look clickable */
a.involve-item{ display:block; text-decoration:none; color:inherit; cursor:pointer; }
a.involve-item h3::after{ content:" \2192"; color:var(--purple-bright); font-weight:400; display:inline-block; margin-left:0.2em; transition:transform .3s var(--ease); }
a.involve-item:hover h3{ color:var(--ink); }
a.involve-item:hover h3::after{ transform:translateX(4px); }
a.offer{ display:block; text-decoration:none; color:inherit; }
a.offer h3::after{ content:" \2192"; color:var(--purple-bright); font-weight:400; display:inline-block; margin-left:0.2em; transition:transform .3s var(--ease); }
a.offer:hover h3::after{ transform:translateX(4px); }

/* ---------- Testimonials / reviews ---------- */
.reviews{ columns:3; column-gap:clamp(0.9rem,2vw,1.4rem); }
@media (max-width: 980px){ .reviews{ columns:2; } }
@media (max-width: 620px){ .reviews{ columns:1; } }
.review{
  break-inside:avoid; margin:0 0 clamp(0.9rem,2vw,1.4rem);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,2.6vw,2rem); position:relative; overflow:hidden;
}
.review .mark{ display:block; height:26px; color:var(--purple-bright); }
.review .mark svg{ width:34px; height:34px; opacity:0.8; }
.review .headline{
  font-family:var(--display); font-weight:800; font-size:var(--step-1); text-transform:uppercase;
  color:var(--ink); margin-top:0.5rem; line-height:1.02; letter-spacing:-0.01em; text-wrap:balance;
}
.review blockquote{ margin:0.85rem 0 0; color:var(--body); font-size:var(--step-0); line-height:1.6; }
.review .headline + blockquote{ color:var(--muted); font-size:0.98rem; }
.review .who{ margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line); display:flex; align-items:center; gap:0.85rem; }
.review .who .who-av{ flex:none; width:48px; height:48px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:linear-gradient(155deg, oklch(0.4 0.14 303), oklch(0.26 0.09 303)); color:#fff; font-weight:700; font-size:0.92rem; letter-spacing:0.02em; }
.review .who .who-av img{ width:100%; height:100%; object-fit:cover; }
.review .who strong{ display:block; color:var(--ink); font-weight:600; font-size:1rem; }
.review .who .who-txt span{ display:block; color:var(--purple-bright); font-size:0.82rem; font-weight:500; letter-spacing:0.02em; }
.review--feature{
  background:linear-gradient(155deg, oklch(0.29 0.095 303), oklch(0.185 0.055 303));
  border-color:oklch(0.6 0.19 303 / 0.45);
}
.review--feature .headline{ font-size:var(--step-2); }
.review--feature blockquote{ color:oklch(0.9 0.02 300); }
.review--feature .who{ border-top-color:oklch(0.6 0.19 303 / 0.3); }
/* FAQ accordion (What we do) */
.faq{ display:flex; flex-direction:column; gap:0.7rem; max-width:770px; }
.faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.faq-item summary{ cursor:pointer; list-style:none; padding:1.05rem 1.2rem; font-weight:600; color:var(--ink); font-size:1.05rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--purple-bright); font-size:1.5rem; line-height:1; flex:none; transition:transform .25s var(--ease); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item summary:hover{ color:var(--purple-bright); }
.faq-item summary:focus-visible{ outline:2px solid var(--purple-bright); outline-offset:-2px; border-radius:var(--radius); }
.faq-item .faq-a{ padding:0 1.2rem 1.15rem; color:var(--muted); line-height:1.6; }
.faq-item .faq-a p{ margin:0; }
/* fixed 3-up grid variant (home strip) */
.reviews--grid{ columns:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(0.9rem,2vw,1.4rem); }
.reviews--grid .review{ margin:0; }
@media (max-width: 820px){ .reviews--grid{ grid-template-columns:1fr; } }

/* ---------- Prompt cards (home) ---------- */
.prompts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,1.6rem); }
@media (max-width: 760px){ .prompts{ grid-template-columns:1fr; } }
.prompt{
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.8rem,3.2vw,2.6rem); position:relative; overflow:hidden;
}
.prompt--accent{ border-color:oklch(0.6 0.19 303 / 0.4); }
.prompt h2{ font-size:var(--step-2); text-transform:uppercase; }
.prompt p{ color:var(--muted); margin-top:0.8rem; }
.prompt .btn{ margin-top:1.5rem; }
.centered{ text-align:center; }
.home-more{ margin-top:clamp(2rem,4vw,2.8rem); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  margin-bottom:0.8rem; overflow:hidden; transition:border-color .3s;
}
.faq details[open]{ border-color:oklch(0.6 0.19 303 / 0.4); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.15rem 1.4rem; display:flex;
  justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--display); font-weight:700; font-size:var(--step-1); color:var(--ink); text-transform:uppercase;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ic{ flex:none; width:26px; height:26px; position:relative; transition:transform .35s var(--ease); }
.faq summary .ic::before, .faq summary .ic::after{ content:""; position:absolute; inset:50% 4px auto; height:2px; background:var(--purple-bright); transform:translateY(-50%); }
.faq summary .ic::after{ inset:4px auto auto 50%; width:2px; height:auto; bottom:4px; transform:translateX(-50%); }
.faq details[open] summary .ic{ transform:rotate(135deg); }
.faq .ans{ padding:0 1.4rem 1.3rem; color:var(--muted); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:0.85rem; font-weight:600; color:var(--body); margin-bottom:0.4rem; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:0.8em 0.95em; transition:border-color .25s, box-shadow .25s;
}
.field input::placeholder, .field textarea::placeholder{ color:oklch(0.62 0.02 302); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--purple); box-shadow:0 0 0 3px oklch(0.6 0.19 303 / 0.22);
}
.field textarea{ resize:vertical; min-height:120px; }
.consent{ display:flex; gap:0.7rem; align-items:flex-start; font-size:0.88rem; color:var(--muted); margin:0.4rem 0 1.2rem; }
.consent input{ margin-top:4px; width:18px; height:18px; accent-color:var(--purple); flex:none; }

/* Multi-section form (interest / registration) */
.form-lead{ max-width:60ch; color:var(--body); margin-bottom:1.6rem; }
.fset{ border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.4rem; margin:0 0 1.2rem; background:var(--surface); }
.fset > legend{ font-family:var(--display); text-transform:uppercase; font-size:1.05rem; letter-spacing:-0.01em; color:var(--ink); padding:0 0.5rem; margin-left:-0.5rem; }
.fset .hint{ color:var(--muted); font-size:0.85rem; margin:-0.2rem 0 1rem; }
.field-row{ display:grid; gap:0 1rem; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.req{ color:var(--purple-bright); }
.opt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0.55rem; margin-top:0.2rem; }
.opt{ display:flex; align-items:flex-start; gap:0.6rem; padding:0.7em 0.85em; border:1px solid var(--line); border-radius:11px; background:var(--void-deep); cursor:pointer; font-size:0.92rem; color:var(--body); transition:.15s var(--ease); line-height:1.4; }
.opt:hover{ border-color:oklch(0.6 0.19 303 / 0.5); }
.opt > span{ flex:1; }
.opt input{ width:18px; height:18px; accent-color:var(--purple); flex:none; margin-top:0.1em; }
.opt:has(input:checked){ border-color:var(--purple-bright); background:oklch(0.6 0.19 303 / 0.14); color:var(--ink); }
.form-note{ background:oklch(0.6 0.19 303 / 0.1); border:1px solid oklch(0.6 0.19 303 / 0.32); border-radius:var(--radius); padding:1rem 1.2rem; display:flex; gap:0.8rem; align-items:flex-start; font-size:0.9rem; color:var(--body); margin-bottom:1.6rem; }
.form-note svg{ flex:none; margin-top:2px; color:var(--purple-bright); }
.form-ok{ background:oklch(0.72 0.16 155 / 0.12); border:1px solid oklch(0.72 0.16 155 / 0.4); border-radius:var(--radius); padding:1.4rem 1.5rem; }
.form-ok h3{ font-size:var(--step-1); text-transform:uppercase; }
.contact-details{ display:grid; gap:1.2rem; }
.detail{ display:flex; gap:1rem; align-items:flex-start; }
.detail .di{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:oklch(0.6 0.19 303 / 0.14); border:1px solid oklch(0.6 0.19 303 / 0.3); color:var(--purple-bright); }
.detail .dt{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); }
.detail a, .detail p{ color:var(--ink); font-size:1.05rem; font-weight:500; margin-top:2px; }
.detail a:hover{ color:var(--purple-bright); }
.map{ margin-top:0.5rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.map iframe{ display:block; width:100%; height:280px; border:0; filter:grayscale(0.2) contrast(1.05); }
.form-status{ font-size:0.9rem; color:var(--purple-bright); min-height:1.2em; margin-top:0.6rem; }

/* ---------- Footer ---------- */
.footer{ background:var(--void-deep); border-top:1px solid var(--line); padding:clamp(3rem,5vw,4.5rem) 0 2rem; position:relative; z-index:1; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
@media (max-width: 760px){ .footer-top{ grid-template-columns:1fr; gap:2.2rem; } }
.footer .brand img{ width:54px; height:54px; }
.footer p{ color:var(--muted); font-size:0.92rem; margin-top:1rem; max-width:34ch; }
.footer h5{ font-family:var(--sans); font-weight:600; font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--body); margin:0 0 1rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.55rem; }
.footer ul a{ color:var(--muted); font-size:0.95rem; }
.footer ul a:hover{ color:var(--purple-bright); }
.footer address{ font-style:normal; color:var(--muted); font-size:0.95rem; line-height:1.6; }
.socials{ display:flex; gap:0.6rem; margin-top:1.3rem; }
.socials a{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--line); color:var(--body); transition:border-color .3s, color .3s, transform .3s; }
.socials a:hover{ border-color:var(--purple); color:var(--purple-bright); transform:translateY(-3px); }
.footer-bottom{
  margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:0.6rem 1.5rem; justify-content:space-between; align-items:center;
  font-size:0.85rem; color:var(--muted);
}
.footer-bottom a{ color:var(--body); }
.footer-bottom a:hover{ color:var(--purple-bright); }
.credit a{ color:var(--purple-bright); font-weight:600; }

/* ---------- Footer legal block ---------- */
.footer-legal{ margin-top:clamp(2rem,4vw,3rem); padding-top:1.6rem; border-top:1px solid var(--line); color:var(--muted); font-size:0.85rem; line-height:1.65; }
.footer-legal p{ max-width:80ch; margin:0; }
.footer-legal a{ color:var(--body); }
.footer-legal a:hover{ color:var(--purple-bright); }
.footer-policies{ display:flex; flex-wrap:wrap; gap:0.5rem 1.4rem; margin-top:1.1rem; }
.footer-policies a{ color:var(--body); font-size:0.85rem; }
.footer-policies a:hover{ color:var(--purple-bright); }

/* ---------- Community champions ---------- */
.champions{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(0.9rem,2vw,1.4rem); }
@media (max-width: 820px){ .champions{ grid-template-columns:1fr; } }
.champion{ display:flex; gap:clamp(1rem,2vw,1.3rem); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,2.6vw,2rem); }
.champion .avatar{
  flex:none; width:76px; height:76px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(155deg, oklch(0.4 0.14 303), oklch(0.26 0.09 303));
  border:2px solid oklch(0.6 0.19 303 / 0.45);
  font-family:var(--display); font-weight:800; font-size:1.55rem; color:var(--ink); letter-spacing:0.02em;
}
.champion .avatar img{ width:100%; height:100%; object-fit:cover; }
/* Supporters wall + give flow */
.donor-wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; }
.donor-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.2rem; text-align:center; }
.donor-card .av{ width:66px; height:66px; border-radius:50%; margin:0 auto 0.7rem; overflow:hidden; background:linear-gradient(155deg,oklch(0.4 0.14 303),oklch(0.26 0.09 303)); display:grid; place-items:center; color:#fff; font-weight:700; font-size:1.35rem; }
.donor-card .av img{ width:100%; height:100%; object-fit:cover; }
.donor-card h4{ font-size:1rem; text-transform:uppercase; color:var(--ink); letter-spacing:-0.01em; }
.donor-card p{ color:var(--muted); font-size:0.88rem; margin-top:0.45rem; line-height:1.5; }
.donor-empty{ text-align:center; color:var(--muted); max-width:48ch; margin-inline:auto; }
#gv-preview img{ width:92px; height:92px; object-fit:cover; border-radius:50%; border:2px solid var(--purple-bright); }

/* Public sessions list + booking */
.g-sessions{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(1rem,2.5vw,1.5rem); }
.scard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; display:flex; flex-direction:column; gap:0.55rem; }
.scard-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:0.8rem; }
.scard h3{ font-size:var(--step-1); text-transform:uppercase; }
.sbadge{ flex:none; font-size:0.7rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:0.32em 0.7em; border-radius:100px; white-space:nowrap; }
.sbadge.open{ background:oklch(0.72 0.16 155 / 0.16); color:oklch(0.8 0.16 155); border:1px solid oklch(0.72 0.16 155 / 0.4); }
.sbadge.filling{ background:oklch(0.78 0.15 70 / 0.16); color:oklch(0.85 0.15 70); border:1px solid oklch(0.78 0.15 70 / 0.4); }
.sbadge.nearly{ background:oklch(0.74 0.16 45 / 0.16); color:oklch(0.82 0.15 45); border:1px solid oklch(0.74 0.16 45 / 0.4); }
.sbadge.full,.sbadge.closed,.sbadge.cancelled{ background:oklch(0.66 0.03 303 / 0.16); color:var(--muted); border:1px solid var(--line); }
.smeta{ display:flex; flex-wrap:wrap; gap:0.25rem 1rem; color:var(--body); font-size:0.9rem; }
.smeta span{ display:inline-flex; align-items:center; }
.sdesc{ color:var(--muted); font-size:0.92rem; margin:0; }
.smentors{ color:var(--purple-bright); font-size:0.85rem; margin:0; }
.session-summary{ background:var(--surface); border:1px solid oklch(0.6 0.19 303 / 0.35); border-radius:var(--radius); padding:1.3rem 1.4rem; margin-bottom:1.6rem; }
.session-summary h2{ font-size:var(--step-2); text-transform:uppercase; }
.session-summary .smeta{ margin-top:0.5rem; }

/* Featured "coming soon" event */
.event-feature{ max-width:920px; margin-inline:auto; background:var(--surface); border:1px solid oklch(0.6 0.19 303 / 0.4); border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,2.6rem); box-shadow:0 30px 70px -30px oklch(0.6 0.19 303 / 0.5); }
.event-feature .pill{ display:inline-flex; align-items:center; gap:0.5em; font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--purple-bright); background:oklch(0.6 0.19 303 / 0.14); border:1px solid oklch(0.6 0.19 303 / 0.35); padding:0.4em 0.9em; border-radius:100px; }
.event-feature h2{ font-size:var(--step-3); text-transform:uppercase; margin-top:1rem; }
.event-feature .sub{ color:var(--purple-bright); font-family:var(--display); font-weight:700; font-size:var(--step-1); text-transform:uppercase; margin-top:0.3rem; }
.event-feature > p{ color:var(--body); margin-top:1.1rem; max-width:60ch; line-height:1.6; }
.event-feature .ef-meta{ display:flex; flex-wrap:wrap; gap:0.6rem 1.6rem; margin-top:1.3rem; color:var(--muted); font-size:0.92rem; }
.event-feature .ef-meta span{ display:inline-flex; align-items:center; gap:0.5em; }
.event-feature .ef-meta svg{ color:var(--purple-bright); flex:none; }
.event-feature .looking{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.event-feature .looking-h{ font-size:0.8rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); }
.event-feature .tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.8rem; }
.event-feature .tags span{ font-size:0.85rem; color:var(--body); background:var(--void-deep); border:1px solid var(--line); border-radius:100px; padding:0.4em 0.9em; }
.event-feature .ef-actions{ display:flex; flex-wrap:wrap; gap:0.8rem; margin-top:1.8rem; }

/* In-development preview pages (events / merch) */
.devnote{ display:flex; gap:1rem; align-items:flex-start; max-width:840px; margin-inline:auto; background:oklch(0.6 0.19 303 / 0.10); border:1px solid oklch(0.6 0.19 303 / 0.35); border-radius:var(--radius); padding:1.15rem 1.35rem; }
.devnote svg{ flex:none; margin-top:3px; color:var(--purple-bright); }
.devnote h3{ font-family:var(--sans); font-size:1.02rem; text-transform:none; letter-spacing:0; line-height:1.3; }
.devnote p{ color:var(--body); font-size:0.94rem; margin-top:0.4rem; line-height:1.6; }
.soon-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1rem,2.5vw,1.6rem); }
.soon{ flex:1 1 285px; max-width:340px; background:var(--surface); border:1px dashed oklch(0.6 0.19 303 / 0.45); border-radius:var(--radius); padding:1.35rem; }
.soon .ph{ aspect-ratio:4/3; border-radius:12px; background:oklch(0.6 0.19 303 / 0.07); border:1px dashed var(--line); display:grid; place-items:center; text-align:center; color:var(--muted); font-size:0.85rem; padding:1rem; margin-bottom:1.1rem; }
.soon h3{ font-size:var(--step-1); text-transform:uppercase; }
.soon .when{ color:var(--purple-bright); font-size:0.8rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; margin-top:0.4rem; }
.soon > p{ color:var(--muted); font-size:0.92rem; margin-top:0.65rem; line-height:1.6; }
.soon .need{ list-style:none; margin:1rem 0 0; padding:0.95rem 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:0.45rem; }
.soon .need-h{ font-size:0.78rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); }
.soon .need li{ color:var(--muted); font-size:0.86rem; line-height:1.5; display:flex; gap:0.55rem; align-items:flex-start; }
.soon .need li::before{ content:"\00B7"; color:var(--purple-bright); font-weight:700; flex:none; }
.soon .shots{ display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:1.1rem; }
.soon .shots figure{ margin:0; }
.soon .shots img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:10px; display:block; border:1px solid var(--line); }
.soon .shots figcaption{ margin-top:0.4rem; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); text-align:center; }

/* "People wearing it" wall: grows forever, stays inside its own box */
.wearing{
  position:relative; max-height:clamp(340px, 54vh, 540px); overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:0.8rem;
  background:var(--void-deep); scrollbar-width:thin; scrollbar-color:oklch(0.6 0.19 303 / 0.55) transparent;
}
.wearing::-webkit-scrollbar{ width:10px; }
.wearing::-webkit-scrollbar-track{ background:transparent; }
.wearing::-webkit-scrollbar-thumb{ background:oklch(0.6 0.19 303 / 0.5); border-radius:100px; border:3px solid transparent; background-clip:content-box; }
.wearing::-webkit-scrollbar-thumb:hover{ background:oklch(0.6 0.19 303 / 0.8); background-clip:content-box; }
.wearing-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:0.6rem; }
.wearing-item{ padding:0; border:0; background:none; cursor:pointer; border-radius:12px; overflow:hidden; aspect-ratio:1/1; position:relative; }
.wearing-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s var(--ease); }
.wearing-item:hover img{ transform:scale(1.07); }
.wearing-item:focus-visible{ outline:2px solid var(--purple-bright); outline-offset:2px; }
.wearing-add{
  aspect-ratio:1/1; border:1px dashed oklch(0.6 0.19 303 / 0.4); border-radius:12px;
  display:grid; place-items:center; text-align:center; color:var(--muted); font-size:0.74rem; line-height:1.4; padding:0.6rem;
}
.wearing-foot{ display:flex; flex-wrap:wrap; gap:0.6rem 1.2rem; align-items:center; justify-content:center; margin-top:1rem; color:var(--muted); font-size:var(--step--1); }

/* Website & digital partner card */
.partner{ display:flex; gap:1.5rem; align-items:center; max-width:660px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,1.9rem); }
.partner .avatar{ flex:none; width:104px; height:104px; border-radius:50%; overflow:hidden; }
.partner .avatar img{ width:100%; height:100%; object-fit:cover; }
.partner h3{ font-size:var(--step-1); text-transform:uppercase; }
.partner .role{ color:var(--purple-bright); font-size:0.85rem; font-weight:600; letter-spacing:0.04em; margin-top:0.35rem; }
.partner p{ color:var(--muted); font-size:0.95rem; margin-top:0.7rem; line-height:1.6; }
.partner p a{ color:var(--purple-bright); text-decoration:underline; text-underline-offset:2px; }
.partner p a:hover{ color:var(--ink); }
@media (max-width: 560px){ .partner{ flex-direction:column; text-align:center; } }
.champion h3{ font-size:var(--step-1); text-transform:uppercase; }
.champion .role{ color:var(--purple-bright); font-size:0.85rem; font-weight:600; letter-spacing:0.03em; margin-top:0.3rem; }
.champion p{ color:var(--muted); font-size:0.95rem; margin-top:0.85rem; line-height:1.6; }
@media (max-width: 460px){ .champion{ flex-direction:column; } }

/* ---------- News & events ---------- */
.news-list{ display:grid; gap:clamp(0.9rem,2vw,1.4rem); max-width:840px; }
.news-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.4rem,2.6vw,2rem); transition:border-color .3s; }
.news-item:hover{ border-color:oklch(0.6 0.19 303 / 0.4); }
.news-item .when{ display:inline-flex; align-items:center; gap:0.5em; font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--purple-bright); background:oklch(0.6 0.19 303 / 0.12); border:1px solid oklch(0.6 0.19 303 / 0.3); padding:0.4em 0.85em; border-radius:100px; }
.news-item h3{ font-size:var(--step-2); text-transform:uppercase; margin-top:1rem; }
.news-item p{ color:var(--muted); margin-top:0.7rem; }
.news-empty{ text-align:center; max-width:60ch; margin:0 auto; color:var(--muted); }

/* ---------- Supporters / donors ---------- */
.donor-note{ text-align:center; max-width:62ch; margin:0 auto; color:var(--muted); font-size:var(--step-0); }

/* ---------- Prose (legal / policy pages) ---------- */
.prose{ max-width:72ch; }
.prose > * + *{ margin-top:1.1rem; }
.prose h2{ font-family:var(--display); font-weight:800; font-size:var(--step-2); text-transform:uppercase; color:var(--ink); letter-spacing:-0.01em; margin-top:2.4rem; }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ color:var(--body); line-height:1.7; }
.prose ul{ margin:0.6rem 0 0; padding-left:1.25rem; display:grid; gap:0.5rem; }
.prose li::marker{ color:var(--purple-bright); }
.prose a{ color:var(--purple-bright); text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--ink); }
.prose .updated{ color:var(--muted); font-size:0.88rem; }

/* skip link */
.skip{ position:absolute; left:-999px; top:0; z-index:200; background:var(--purple); color:#140f1a; padding:0.7em 1.2em; border-radius:0 0 10px 0; font-weight:600; }
.skip:focus{ left:0; }

:where(section[id]){ scroll-margin-top:calc(var(--nav-h) + 12px); }

/* utility: elements that JS toggles (session empty-state, booking/give success panels) */
.hidden{ display:none !important; }

/* Highlights gallery */
.hl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.4rem; }
.hl-card{ display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:border-color .15s, transform .15s; }
.hl-card:hover{ border-color:var(--purple-bright); transform:translateY(-3px); }
.hl-thumb{ position:relative; aspect-ratio:4/3; background:var(--void-deep); }
.hl-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hl-vidflag{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--purple-bright); }
.hl-count{ position:absolute; bottom:0.6rem; right:0.6rem; background:rgba(0,0,0,0.62); color:#fff; font-size:0.72rem; padding:0.2rem 0.6rem; border-radius:100px; }
.hl-cbody{ padding:1rem 1.1rem 1.2rem; }
.hl-cbody h3{ font-size:var(--step-1); text-transform:uppercase; line-height:1.1; }
.hl-cbody p{ color:var(--muted); font-size:0.85rem; margin-top:0.35rem; }
.hl-back{ display:inline-block; color:var(--purple-bright); font-weight:600; font-size:0.9rem; text-decoration:none; margin-bottom:0.6rem; }
.hl-back:hover{ text-decoration:underline; }
.hl-detail{ max-width:900px; margin-inline:auto; }
.hl-title{ font-size:var(--step-4); text-transform:uppercase; line-height:1.02; }
.hl-meta{ color:var(--purple-bright); font-size:0.9rem; font-weight:600; margin-top:0.6rem; }
.hl-note{ color:var(--body); font-size:var(--step-1); line-height:1.6; margin-top:1.2rem; max-width:70ch; }
.hl-media{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin-top:2rem; }
.hl-shot{ margin:0; }
/* Audio recordings have no picture, so they get a tile of their own: a waveform that
   sits with the photos instead of a grey browser bar. Bars are drawn from the file name
   so each recording keeps a consistent shape, and the played part lights up. */
.hl-audio{ display:flex; flex-direction:column; justify-content:center; gap:0.85rem; min-height:180px; padding:1.15rem; border-radius:12px; border:1px solid var(--line);
  background:linear-gradient(150deg, rgba(139,92,246,0.16), rgba(20,14,32,0.9) 62%), var(--surface); }
.hl-audflag{ display:inline-flex; align-items:center; gap:0.45rem; align-self:flex-start; font-size:0.72rem; letter-spacing:0.04em; color:var(--brand-soft, #c9b6ff); }
.hl-audflag::before{ content:"\266B"; font-size:0.95rem; line-height:1; }
.aud{ display:flex; align-items:center; gap:0.7rem; }
.aud-play{ flex:none; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,#a78bfa,#7c3aed); box-shadow:0 6px 18px rgba(124,58,237,0.35); transition:transform .18s ease, box-shadow .18s ease; }
.aud-play:hover{ transform:scale(1.06); }
.aud-play:focus-visible{ outline:2px solid #c9b6ff; outline-offset:3px; }
.aud-play svg{ width:19px; height:19px; fill:currentColor; }
.aud-play .ic-pause{ display:none; }
.aud.playing .aud-play .ic-play{ display:none; }
.aud.playing .aud-play .ic-pause{ display:block; }
.aud-wave{ position:relative; flex:1; height:40px; cursor:pointer; min-width:0; }
.aud-bars{ position:absolute; inset:0; display:flex; align-items:center; gap:2px; }
.aud-bars i{ flex:1; min-width:2px; border-radius:2px; background:rgba(201,182,255,0.28); }
.aud-prog{ position:absolute; inset:0 auto 0 0; width:0%; overflow:hidden; }
.aud-prog .aud-bars{ width:var(--aud-w,100%); }
.aud-bars.lit i{ background:linear-gradient(180deg,#c4b5fd,#8b5cf6); }
.aud.playing .aud-bars.lit i{ animation:audpulse 1.15s ease-in-out infinite; }
.aud-bars.lit i:nth-child(3n){ animation-delay:.18s; }
.aud-bars.lit i:nth-child(3n+1){ animation-delay:.36s; }
@keyframes audpulse{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(0.62); } }
@media (prefers-reduced-motion: reduce){
  .aud.playing .aud-bars.lit i{ animation:none; }
  .aud-play{ transition:none; }
}
.aud-time{ flex:none; font-size:0.78rem; color:var(--muted); font-variant-numeric:tabular-nums; min-width:2.6rem; text-align:right; }
.hl-shot img, .hl-shot video{ width:100%; border-radius:12px; display:block; border:1px solid var(--line); background:var(--void-deep); }
.hl-shot figcaption{ color:var(--muted); font-size:0.82rem; margin-top:0.5rem; line-height:1.4; }
.hl-embed{ position:relative; aspect-ratio:16/9; }
.hl-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; }
.hl-media .hl-shot:has(.hl-embed){ grid-column:1 / -1; }
.hl-book{ margin-top:3rem; border-top:1px solid var(--line); padding-top:2rem; }
.hl-book h2{ font-size:var(--step-2); text-transform:uppercase; }
.hl-booklist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.9rem; margin-top:1.2rem; }
.hl-bookcard{ display:flex; flex-direction:column; gap:0.25rem; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; color:var(--ink); transition:border-color .15s; }
.hl-bookcard:hover{ border-color:var(--purple-bright); }
.hl-bookcard strong{ font-size:1rem; }
.hl-bookcard span{ color:var(--muted); font-size:0.82rem; }
.hl-bookcard .hl-spaces{ color:var(--purple-bright); font-weight:600; }

/* A booking page opened from a personal invite link says so, so the visitor knows
   the session was set aside for them rather than picked off a public list. */
.invitetag{ display:inline-block; font-size:0.85rem; font-weight:600; color:var(--brand-soft, #c9b6ff); margin:0 0 0.5rem; }

/* ---- "Have you been before?" on the booking page ----
   Asked before the form rather than as a note inside it, because a returning
   participant should not discover the shortcut halfway down. */
.choosecard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.4rem 1.5rem; margin-bottom:1.6rem; }
.choosecard h2{ font-size:var(--step-1); text-transform:uppercase; margin:0; }
.choosecard > p{ color:var(--muted); font-size:0.95rem; margin:0.4rem 0 1.1rem; max-width:52ch; }
.choice{ display:flex; align-items:center; gap:0.9rem; width:100%; text-align:left; cursor:pointer;
  background:var(--void-deep); border:1px solid var(--line); border-radius:14px; padding:0.95rem 1.05rem;
  color:var(--ink); font-family:var(--sans); margin-bottom:0.7rem; transition:border-color .15s ease, background .15s ease; }
.choice:last-child{ margin-bottom:0; }
.choice:hover{ border-color:var(--brand-soft, #c9b6ff); background:var(--surface); }
.choice:focus-visible{ outline:2px solid var(--brand-soft, #c9b6ff); outline-offset:2px; }
.choice .ic{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(139,92,246,0.16); color:var(--brand-soft, #c9b6ff); }
.choice .ic svg{ width:21px; height:21px; }
.choice .tx{ flex:1; min-width:0; }
.choice .tx b{ display:block; font-size:1rem; line-height:1.3; }
.choice .tx i{ display:block; font-style:normal; color:var(--muted); font-size:0.85rem; margin-top:0.2rem; line-height:1.45; }
.choice .arw{ flex:none; color:var(--muted); font-size:1.4rem; line-height:1; }
/* email / mobile switch */
.seg2{ display:flex; gap:0.4rem; background:var(--void-deep); border:1px solid var(--line); border-radius:12px; padding:0.3rem; }
.seg2 button{ flex:1; background:none; border:0; border-radius:9px; padding:0.6em 0.5em; cursor:pointer;
  color:var(--muted); font-family:var(--sans); font-size:0.9rem; font-weight:600; }
.seg2 button.on{ background:rgba(139,92,246,0.9); color:#fff; }
.seg2 button:focus-visible{ outline:2px solid var(--brand-soft, #c9b6ff); outline-offset:1px; }
.fmrule{ border:0; border-top:1px solid var(--line); margin:1.3rem 0 1.1rem; }

/* Fundraising amounts are illustrations of where money goes, not a price list.
   Saying so plainly keeps the claims honest when a figure does not cover a whole item. */
.tiers-note{ margin:0.9rem 0 0; color:var(--muted); font-size:0.85rem; line-height:1.55; max-width:52ch; }

/* ---- shop (merch page) ---- */
/* ---------- Merchandise ----------
   Black, white and purple, with the product itself the only thing carrying colour.
   The photographs are the real garments with the studio paper cut away, so they can sit
   straight on the dark card with a purple pool behind them rather than in a white box.

   The pool follows the cursor. Mechanic taken from the card-spotlight component already
   in the 21st.dev vault (a radial-gradient mask driven by the pointer), reduced to two
   custom properties and a radial-gradient so it costs nothing and needs no library. */
.merchlede{ max-width:60ch; color:var(--body); font-size:clamp(1rem,2.4vw,1.1rem); line-height:1.7; }

.merchbar{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:0.9rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  background:var(--surface,#191320); border:1px solid var(--line,#2a2233);
  border-radius:16px; padding:clamp(1rem,3vw,1.4rem); }
.merchbar li{ display:grid; grid-template-columns:auto 1fr; column-gap:0.8rem; align-items:start; }
.merchbar .ic{ grid-row:span 2; display:grid; place-items:center; width:38px; height:38px;
  border-radius:10px; background:var(--purple-ghost,oklch(0.605 0.185 303 / .14)); color:var(--purple-bright); }
.merchbar .ic svg{ width:20px; height:20px; }
.merchbar b{ font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--purple-bright); }
.merchbar i{ font-style:normal; color:var(--muted); font-size:0.9rem; line-height:1.5; }

.shop-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:1.2rem; }

.mcard{ position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface,#191320); border:1px solid var(--line,#2a2233);
  border-radius:18px; padding:clamp(0.9rem,2.4vw,1.2rem);
  transition:border-color 0.25s ease, transform 0.25s var(--ease-quart,ease); }
.mcard:hover{ transform:translateY(-3px); border-color:oklch(0.6 0.19 303 / 0.5); }
.mkind{ align-self:flex-start; font-size:0.66rem; font-weight:700; letter-spacing:0.09em;
  text-transform:uppercase; padding:0.32em 0.75em; border-radius:100px;
  background:var(--purple-ghost,oklch(0.605 0.185 303 / .16)); color:var(--purple-bright);
  border:1px solid oklch(0.6 0.19 303 / 0.4); margin-bottom:0.8rem; }

/* the product, floating on a purple pool */
/* overflow:hidden zeroes the automatic minimum size, otherwise a portrait photo's own
   min-content height beats aspect-ratio and every card's picture box ends up a different
   height (measured 245 / 301 / 288 / 266), which stepped the names and prices up and down */
.mpic{ position:relative; aspect-ratio:1; overflow:hidden; display:grid; place-items:center; margin-bottom:0.8rem; }
.mpic::before{ content:""; position:absolute; inset:4%; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 50% 52%, oklch(0.66 0.20 303 / 0.55), oklch(0.5 0.16 303 / 0.22) 52%, transparent 72%);
  filter:blur(16px); transition:opacity 0.3s ease, transform 0.4s var(--ease-quart,ease); }
.mcard:hover .mpic::before{ transform:scale(1.08); opacity:0.9; }
/* Black apparel on a dark plum card measured only 2 luminance points apart, so the
   garments read as silhouettes with no edge. Three things fix that without giving up the
   transparent cut-out: a tight bright rim that traces the alpha outline, a soft purple
   glow behind it, and a small lift so the fabric reads as fabric rather than a hole.
   drop-shadow follows the silhouette, unlike box-shadow which would draw a rectangle. */
.mpic img{ position:relative; z-index:1; max-width:88%; max-height:88%;
  width:auto; height:auto; object-fit:contain; display:block;
  filter:brightness(1.16) contrast(1.05)
         drop-shadow(0 0 1px oklch(0.84 0.10 303 / 0.7))
         drop-shadow(0 0 7px oklch(0.72 0.17 303 / 0.38))
         drop-shadow(0 16px 24px rgba(0,0,0,0.5)); }
.mnoimg{ color:var(--muted); font-weight:600; text-align:center; }

.mpic img.photo{ border-radius:14px; box-shadow:0 14px 34px -16px #000, 0 0 0 1px oklch(0.6 0.19 303 / 0.28); }
.mthumbs{ display:flex; gap:0.4rem; margin-bottom:0.7rem; min-height:46px; }
/* the reserved strip only earns its space when cards sit side by side; stacked on a phone
   it is just a hole between the photo and the name */
@media (max-width:720px){ .mthumbs:empty{ display:none; } }
.mthumb{ width:46px; height:46px; padding:0.2rem; border-radius:9px; cursor:pointer;
  background:var(--void-deep,#0f0b16); border:1px solid var(--line,#2a2233); }
.mthumb.on{ border-color:var(--purple-bright); }
.mthumb img{ width:100%; height:100%; object-fit:contain; display:block; }

.mcard h3{ font-size:clamp(1rem,2.6vw,1.15rem); line-height:1.2; margin:0 0 0.3rem; }
.mprice{ font-family:var(--display); font-weight:800; font-size:clamp(1.35rem,4vw,1.7rem);
  color:var(--purple-bright); letter-spacing:0.01em; margin-bottom:0.5rem; }
.mdesc{ margin:0 0 0.6rem; color:var(--body); font-size:0.9rem; line-height:1.6; }
.mcolour{ margin:0 0 0.8rem; padding-top:0.7rem; border-top:1px solid var(--line,#2a2233);
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }

/* sizes as chips, with what is left under each one */
.msizes{ margin-bottom:0.8rem; }
.msizes-h{ display:block; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:0.45rem; }
.mchips{ display:flex; flex-wrap:wrap; gap:0.35rem; }
.mchip{ display:grid; justify-items:center; gap:0.1rem; min-width:44px; padding:0.4rem 0.5rem;
  border-radius:10px; cursor:pointer; font:inherit; line-height:1.1;
  background:var(--void-deep,#0f0b16); border:1px solid var(--line,#2a2233); color:var(--ink); }
.mchip b{ font-size:0.86rem; font-weight:700; }
.mchip i{ font-style:normal; font-size:0.7rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.mchip i.none{ color:oklch(0.72 0.17 30); }
.mchip.on{ background:var(--purple-ghost,oklch(0.605 0.185 303 / .2)); border-color:var(--purple-bright); }
.mchip.on i{ color:var(--purple-bright); }
.mchip.gone{ opacity:0.45; cursor:not-allowed; text-decoration:line-through; }
.mchip:focus-visible{ outline:2px solid var(--purple-bright); outline-offset:2px; }
.msizes-n{ display:block; margin-top:0.4rem; font-size:0.68rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--muted); }

.mgood, .mlow{ align-self:flex-start; font-size:0.68rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; padding:0.32em 0.75em; border-radius:100px; margin-bottom:0.8rem; }
.mgood{ background:oklch(0.72 0.16 155 / 0.14); color:oklch(0.8 0.16 155); border:1px solid oklch(0.72 0.16 155 / .35); }
.mlow{ background:oklch(0.78 0.15 70 / 0.14); color:oklch(0.85 0.15 70); border:1px solid oklch(0.78 0.15 70 / .35); }

.mqty{ display:flex; align-items:center; gap:0.4rem; margin-bottom:0.8rem; }
/* display:flex would otherwise beat the hidden attribute when only one is left */
.mqty[hidden]{ display:none; }
.mqty button:disabled{ opacity:0.35; cursor:not-allowed; border-color:var(--line); color:var(--body); }
.mqty button{ width:38px; height:38px; border-radius:10px; cursor:pointer; font:inherit; font-size:1.1rem;
  background:var(--void-deep,#0f0b16); border:1px solid var(--line,#2a2233); color:var(--ink); }
.mqty button:hover{ border-color:var(--purple-bright); color:var(--purple-bright); }
.mqty input{ width:56px; height:38px; text-align:center; border-radius:10px; font:inherit;
  background:var(--void-deep,#0f0b16); border:1px solid var(--line,#2a2233); color:var(--ink);
  -moz-appearance:textfield; }
.mqty input::-webkit-outer-spin-button, .mqty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.madd{ margin-top:auto; width:100%; justify-content:center; }
.mout{ margin:auto 0 0; color:var(--muted); font-weight:600; }
/* A sold out product is dimmed, but NOT desaturated. Greyscale made the beanie look like
   a black and white item rather than an out of stock one, which misrepresents the product
   people are being asked to come back for. The "Sold out for now" line does that job. */
.mcard.out .mpic img{ filter:brightness(0.82) contrast(1.02)
  drop-shadow(0 0 1px oklch(0.8 0.06 303 / 0.5)) drop-shadow(0 0 9px oklch(0.65 0.1 303 / 0.28))
  drop-shadow(0 16px 24px rgba(0,0,0,0.5)); }

.merchknow{ margin-top:2rem; background:var(--surface,#191320); border:1px solid var(--line,#2a2233);
  border-radius:16px; padding:clamp(1rem,3vw,1.5rem); }
.merchknow h3{ display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--purple-bright); margin:0 0 0.9rem; }
.merchknow h3 .ic svg{ width:20px; height:20px; display:block; }
.merchknow ul{ margin:0; padding-left:1.1rem; display:grid; gap:0.45rem; }
.merchknow li{ color:var(--body); font-size:0.92rem; line-height:1.6; }
.merchknow a{ color:var(--purple-bright); }

.shop-item{ background:var(--surface,#191320); border:1px solid var(--line,#2a2233); border-radius:16px; padding:1.1rem; }
.shop-pic{ aspect-ratio:1; border-radius:12px; overflow:hidden; background:#0f0b16; display:grid; place-items:center; margin-bottom:0.9rem; }
.shop-pic img{ width:100%; height:100%; object-fit:cover; }
.shop-pic span{ color:#8a83a0; font-size:0.9rem; padding:1rem; text-align:center; }
.shop-item h3{ margin:0 0 0.3rem; font-size:1.05rem; }
.shop-price{ color:#c9b6ff; font-weight:700; margin-bottom:0.5rem; }
.shop-item p{ font-size:0.9rem; line-height:1.55; margin:0 0 0.9rem; }
.shop-size{ display:block; margin-bottom:0.8rem; font-size:0.85rem; }
.shop-size span{ display:block; margin-bottom:0.3rem; color:#8a83a0; }
.shop-size select{ width:100%; padding:0.6rem; border-radius:10px; border:1px solid var(--line,#2a2233); background:#0f0b16; color:inherit; font:inherit; }
.shop-out{ color:#8a83a0; font-size:0.88rem; margin:0; }
.shop-basket{ max-width:640px; margin:2.5rem auto 0; background:var(--surface,#191320); border:1px solid var(--line,#2a2233); border-radius:16px; padding:1.4rem; }
.basket-list{ list-style:none; margin:1rem 0; padding:0; }
.basket-list li{ display:flex; align-items:center; gap:0.8rem; padding:0.55rem 0; border-bottom:1px solid var(--line,#2a2233); font-size:0.92rem; }
.basket-list li span{ flex:1; min-width:0; }
.basket-rm{ background:none; border:0; color:#8a83a0; font:inherit; font-size:0.78rem; cursor:pointer; text-decoration:underline; }
.basket-total{ text-align:right; font-size:1rem; margin:0.6rem 0 1.2rem; }
.basket-form fieldset{ border:1px solid var(--line,#2a2233); border-radius:12px; padding:0.9rem; }
.basket-form legend{ padding:0 0.4rem; font-size:0.85rem; color:#8a83a0; }

/* ---- business supporter levels (donate page) ---- */
.sponsor-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.5rem; margin-top:2.2rem; }
.sponsor{ background:var(--surface,#191320); border:1px solid var(--line,#2a2233); border-radius:16px; padding:1.9rem 1.7rem; display:flex; flex-direction:column; }
.sponsor--feat{ border-color:oklch(0.6 0.19 303 / 0.55); box-shadow:0 18px 44px -26px oklch(0.6 0.19 303 / 0.8); }
.sp-level{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.09em; color:var(--purple-bright,#c9b6ff); font-weight:700; }
.sp-amt{ font-size:2.2rem; font-weight:700; line-height:1.1; margin:0.5rem 0 0.1rem; }
.sp-amt span{ display:block; font-size:0.78rem; font-weight:400; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted,#8a83a0); margin-top:0.25rem; }
.sp-for{ font-size:0.98rem; line-height:1.6; color:var(--muted,#8a83a0); margin:0.9rem 0 1.4rem; }
.sp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.85rem; }
.sp-list li{ display:flex; gap:0.65rem; align-items:flex-start; font-size:0.98rem; line-height:1.6; }
.sp-list li svg{ flex:none; margin-top:0.15rem; }
.sponsor-cta{ margin-top:2rem; background:var(--surface,#191320); border:1px solid var(--line,#2a2233); border-radius:18px; padding:1.6rem; text-align:center; }
.sponsor-cta h3{ font-size:1.15rem; margin:0 0 0.4rem; }
.sponsor-cta > div > p{ color:var(--muted,#8a83a0); font-size:0.92rem; margin:0; }
.sponsor-btns{ display:flex; flex-wrap:wrap; gap:0.7rem; justify-content:center; margin-top:1.2rem; }
.sponsor-cta .detail{ justify-content:center; }
.sponsor-empty{ max-width:560px; margin:2rem auto 0; text-align:center; background:var(--surface,#191320); border:1px dashed var(--line,#2a2233); border-radius:16px; padding:1.6rem; }
.sponsor-empty h3{ font-size:1.05rem; margin:0 0 0.5rem; }
.sponsor-empty p{ color:var(--muted,#8a83a0); font-size:0.92rem; line-height:1.55; margin:0 0 1.1rem; }


/* ---- business supporters: joining, and the wall ---- */
.sp-term{ margin-top:0.9rem; font-size:0.98rem; line-height:1.65; }
.sponsor-after{ max-width:760px; margin:2.2rem auto 0; background:var(--surface,#191320); border:1px solid var(--line,#2a2233); border-radius:18px; padding:1.8rem 1.7rem; }
.sponsor-after h3{ font-size:1.15rem; margin:0 0 1rem; }
.after-steps{ margin:0; padding-left:1.3rem; display:flex; flex-direction:column; gap:0.9rem; }
.after-steps li{ font-size:0.98rem; line-height:1.65; }
.after-steps strong{ color:var(--ink,#f4f1fa); }
.biz-wall{ margin-bottom:2rem; }
/* ---- The supporters ----
   One card, used on the supporters page and in the band on the donate page. Andy's layout:
   the logo big, then the name and level, then the thank you, and the whole card is a link
   to the business.

   A business hands over whatever logo it has: dark ink on transparent, a white PNG, a JPG
   with its own white background. On a near-black page most of those either vanish or sit
   in an obvious grey rectangle. So every logo goes on the SAME white plate, which is what
   a printed sponsor board does and the only thing that makes mixed artwork look deliberate.
   The few supplied as the WHITE version get the plate the other way round, set per
   supporter in the admin.

   Deliberately not greyscale-until-hover: that is a logo-cloud convention for quietening
   twenty marks, and greying out a business that paid to be seen defeats the point. */
.bizcards{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.bizc-wrap{ display:flex; flex-direction:column; }
.bizc-wrap .bizc{ flex:1; }
.bizc{ display:block; text-decoration:none; color:inherit;
  background:var(--surface,#191320); border:1px solid var(--line,#2a2233);
  border-radius:18px; padding:clamp(1rem,3vw,1.6rem);
  transition:transform 0.22s var(--ease-quart,ease), border-color 0.22s ease, box-shadow 0.22s ease; }
a.bizc:hover{ transform:translateY(-3px); border-color:oklch(0.6 0.19 303 / 0.55);
  box-shadow:0 16px 34px -20px oklch(0.05 0.02 305); }
a.bizc:focus-visible{ outline:3px solid var(--purple-bright); outline-offset:3px; }

.bizc-logo{ display:grid; place-items:center; min-height:clamp(112px,26vw,150px);
  padding:clamp(0.9rem,2.5vw,1.3rem); border-radius:14px; margin-bottom:1rem;
  background:#fff; border:1px solid oklch(0.88 0.01 300); }
.bizc-logo.ondark{ background:oklch(0.19 0.032 305); border-color:oklch(0.34 0.045 305); }
/* Capped on both axes so a 4:1 wordmark and a square mark end up optically similar. */
.bizc-logo img{ max-width:min(100%,340px); max-height:clamp(74px,15vw,104px);
  width:auto; height:auto; object-fit:contain; display:block; }

.bizc-body{ text-align:center; }
.bizc-role{ margin:0 0 0.6rem; font-size:clamp(1rem,2.5vw,1.15rem); color:var(--ink); }
.bizc-role b{ font-weight:700; }
.bizc-blurb{ margin:0; color:var(--body); line-height:1.7; font-size:0.98rem; }
.bizc-visit{ display:block; margin-top:0.9rem; text-align:center;
  color:var(--purple-bright); font-weight:600; font-size:0.95rem; }
/* When the card leads to a piece written about them, say so like a button rather than a
   quiet line of text. It was a small link before and it read as a footnote. */
.bizc-visit.strong{ margin-top:1.1rem; padding:0.8rem 1.4rem; border-radius:100px;
  background:var(--purple-ghost, oklch(0.605 0.185 303 / 0.14));
  border:1px solid oklch(0.6 0.19 303 / 0.45); font-size:1rem; }
a.bizc:hover .bizc-visit.strong{ background:var(--purple); color:oklch(0.14 0.02 305); }

/* Always under the cards, whether there is one supporter or ten. */
.bizcta{ margin-top:1.4rem; text-align:center; border-radius:18px;
  background:var(--surface,#191320); border:1px solid var(--line,#2a2233);
  padding:clamp(1.2rem,4vw,2rem); }
.bizcta h3{ margin:0 0 1.1rem; font-size:clamp(1.25rem,4vw,1.7rem); }
.bizways{ list-style:none; margin:0 0 1.4rem; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem 0.5rem; }
.bizways li{ display:grid; justify-items:center; gap:0.4rem;
  font-size:0.88rem; color:var(--body); }
.bizways .ic{ display:grid; place-items:center; width:40px; height:40px; color:var(--purple-bright); }
.bizways svg{ width:26px; height:26px; }
.bizcta-foot{ margin:1.2rem auto 0; max-width:58ch; color:var(--muted); font-size:0.9rem; line-height:1.65; }

/* The "something has changed" tick on the booking form. It used the portal's .ackbox
   class, which does not exist in this stylesheet, so it rendered inline and ran straight
   on from the end of the paragraph. */
.backcheck{ display:flex; gap:0.6rem; align-items:flex-start; margin-top:0.9rem;
  cursor:pointer; font-weight:600; line-height:1.45; }
.backcheck input{ margin-top:0.15rem; flex:0 0 auto; width:1.1rem; height:1.1rem; }

/* The homepage strip: who backs this, and a way through to the rest. */
.bizstrip{ display:grid; justify-items:center; gap:0.9rem; padding:1.6rem 0 0.4rem;
  border-top:1px solid var(--line,#2a2233); }
.bizstrip:empty{ display:none; }
.stripttl{ margin:0; font-size:0.72rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted); }
.striplogos{ display:flex; flex-wrap:wrap; gap:0.7rem; justify-content:center; align-items:center; }
.stripitem{ display:grid; place-items:center; background:#fff; border:1px solid oklch(0.88 0.01 300);
  border-radius:10px; padding:0.5rem 0.75rem; min-height:56px; }
.stripitem.ondark{ background:oklch(0.19 0.032 305); border-color:oklch(0.34 0.045 305); }
.stripitem img{ max-width:150px; max-height:38px; width:auto; height:auto; object-fit:contain; display:block; }
.stripname{ font-weight:700; color:var(--body); }
.stripmore{ color:var(--purple-bright); font-weight:600; font-size:0.92rem; }

/* A supporter's own page at /supporters/{slug}: their logo, the full piece written about
   them, and their photographs. The mirror of the page Simmonds gave Smashroom. */
/* The nav is position:fixed, so any page that does not open with a .hero or .page-hero has
   to make room for it itself. This one did not, and the heading sat underneath the bar. */
.supband{ padding-top:calc(var(--nav-h) + clamp(1.5rem,3vw,2.5rem)); }
.sup-page{ max-width:74ch; }
.sup-kicker{ margin:0 0 0.6rem; font-size:0.9rem; }
.sup-kicker a{ color:var(--purple-bright); text-decoration:none; font-weight:600; }
.sup-kicker a:hover{ text-decoration:underline; }
.sup-logo{ display:grid; place-items:center; width:min(100%,320px); min-height:140px;
  margin:1.4rem 0 1.8rem; padding:1.1rem; border-radius:16px;
  background:#fff; border:1px solid oklch(0.88 0.01 300); }
.sup-logo.ondark{ background:oklch(0.19 0.032 305); border-color:oklch(0.34 0.045 305); }
.sup-logo img{ max-width:100%; max-height:104px; width:auto; height:auto; object-fit:contain; display:block; }
.sup-story p{ font-size:clamp(1rem,2.4vw,1.1rem); line-height:1.75; margin:0 0 1.1rem; }
.sup-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:0.9rem; margin:2rem 0; }
.sup-gallery figure{ margin:0; border-radius:14px; overflow:hidden; background:var(--surface,#191320);
  border:1px solid var(--line,#2a2233); aspect-ratio:4/3; }
.sup-gallery img{ width:100%; height:100%; object-fit:cover; display:block; }
/* The pay-off at the end of the piece. Appears only when the business has a website on
   their record in the admin, so adding the link is the whole job. Deliberately large: it
   is the one thing the supporter gets out of the page, and it should not look like a
   footnote after three paragraphs about them. */
.sup-visit{ margin:2rem 0 0; }
.sup-visit .btn{ display:block; width:100%; text-align:center; white-space:normal;
  font-size:clamp(1rem,2.6vw,1.15rem); padding:1.1rem 1.6rem; border-radius:16px; }
@media(min-width:640px){ .sup-visit .btn{ display:inline-block; width:auto; min-width:min(100%,340px); } }

.joinsheet{ position:fixed; inset:0; z-index:300; background:rgba(8,4,16,0.78); display:flex; align-items:flex-end; justify-content:center; }
@media(min-width:760px){ .joinsheet{ align-items:center; padding:2rem; } }
.joinpanel{ background:var(--surface,#191320); border:1px solid var(--line,#2a2233); border-radius:20px 20px 0 0;
  width:100%; max-width:640px; max-height:94vh; overflow:auto; }
@media(min-width:760px){ .joinpanel{ border-radius:20px; } }
.joinhead{ position:sticky; top:0; background:var(--surface,#191320); display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line,#2a2233); font-size:1.05rem; }
.joinx{ background:none; border:0; color:var(--muted,#8a83a0); font:inherit; font-size:0.9rem; cursor:pointer; text-decoration:underline; padding:0.4rem; }
.joinbody{ padding:1.3rem; }
.joinfs{ border:0; padding:0; margin:0 0 1.6rem; }
.joinfs legend{ padding:0; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--purple-bright,#c9b6ff); font-weight:700; margin-bottom:0.7rem; }
.joinopts{ display:flex; flex-direction:column; gap:0.6rem; }
.joinopt{ display:flex; align-items:center; gap:0.8rem; padding:0.95rem 1rem; border-radius:12px;
  border:1px solid var(--line,#2a2233); cursor:pointer; }
.joinopt.on{ border-color:oklch(0.6 0.19 303 / 0.6); background:oklch(0.6 0.19 303 / 0.1); }
.joinopt input{ flex:none; width:20px; height:20px; accent-color:oklch(0.6 0.19 303); }
.joinopt span{ display:flex; flex:1; justify-content:space-between; align-items:baseline; gap:0.8rem; }
.joinopt b{ font-size:1rem; }
.joinopt i{ font-style:normal; color:var(--muted,#8a83a0); font-size:0.88rem; }
.joinbody .btn{ width:100%; justify-content:center; }

/* ---- individual vs business chooser (donate page) ---- */
.whopays{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; }
.whocard{ display:flex; flex-direction:column; gap:0.5rem; padding:1.6rem 1.5rem; border-radius:18px; text-decoration:none;
  background:var(--surface,#191320); border:1px solid var(--line,#2a2233); color:inherit; }
.whocard:hover{ border-color:oklch(0.6 0.19 303 / 0.6); transform:translateY(-3px); transition:all 0.2s; }
.whocard--biz{ background:linear-gradient(160deg, oklch(0.6 0.19 303 / 0.14), var(--surface,#191320)); }
.whoic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:oklch(0.6 0.19 303 / 0.18); color:var(--purple-bright,#c9b6ff); }
.whocard b{ font-size:1.12rem; }
.whocard i{ font-style:normal; color:var(--muted,#8a83a0); font-size:0.95rem; line-height:1.6; }
.wholink{ margin-top:0.4rem; font-weight:700; font-size:0.95rem; color:var(--purple-bright,#c9b6ff); }
.wholink::after{ content:" \2192"; }

/* ---- cryptocurrency donations ---- */
.cryptobox{ max-width:820px; margin:0 auto; }
.msg-note{ background:oklch(0.78 0.15 70 / 0.1); border:1px solid oklch(0.78 0.15 70 / 0.45); border-radius:14px;
  padding:1.1rem 1.2rem; font-size:0.98rem; line-height:1.65; margin-bottom:1.6rem; }
.cryptosoon{ text-align:center; background:var(--surface,#191320); border:1px dashed var(--line,#2a2233);
  border-radius:16px; padding:1.8rem 1.5rem; }
.cryptosoon b{ display:block; font-size:1.05rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--purple-bright,#c9b6ff); }
.cryptosoon p{ color:var(--muted,#8a83a0); font-size:0.98rem; line-height:1.65; margin:0.7rem auto 1.2rem; max-width:52ch; }
.cryptogrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; }
.cwallet{ background:var(--surface,#191320); border:1px solid var(--line,#2a2233); border-radius:16px; padding:1.4rem; text-align:center; }
.cwhead{ display:flex; justify-content:center; align-items:baseline; gap:0.5rem; }
.cwhead b{ font-size:1.08rem; }
.cwasset{ font-size:0.72rem; font-weight:700; letter-spacing:0.06em; color:var(--purple-bright,#c9b6ff); }
.cwnet{ font-size:0.86rem; line-height:1.55; color:oklch(0.86 0.13 70); margin:0.7rem 0 1rem; }
.cwqr{ width:180px; height:180px; border-radius:10px; background:#fff; padding:8px; }
.cwaddr{ display:block; margin:0.9rem 0 0.7rem; font-size:0.78rem; line-height:1.5; overflow-wrap:anywhere;
  color:var(--ink,#f4f1fa); background:#0f0b16; border-radius:8px; padding:0.6rem; }
.cwcopy{ width:100%; justify-content:center; }
.cwmemo, .cwnote{ font-size:0.82rem; color:var(--muted,#8a83a0); margin-top:0.7rem; line-height:1.55; overflow-wrap:anywhere; }
.cryptofacts{ margin-top:1.8rem; background:var(--surface,#191320); border:1px solid var(--line,#2a2233); border-radius:16px; padding:1.5rem; }
.cryptofacts h3{ font-size:1.05rem; margin:0 0 0.9rem; }
.cryptofacts ul{ margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:0.7rem; }
.cryptofacts li{ font-size:0.96rem; line-height:1.65; }
.cryptotell{ margin-top:1.4rem; background:var(--surface,#191320); border:1px solid var(--line,#2a2233); border-radius:16px; padding:1.5rem; }
.cryptotell h3{ font-size:1.05rem; margin:0 0 0.4rem; }
.cryptotell > p{ color:var(--muted,#8a83a0); font-size:0.95rem; line-height:1.6; margin:0 0 1.1rem; }
.cryptotell .btn{ width:100%; justify-content:center; }

/* ---- product gallery, stock hint and quantity ---- */
.shop-thumbs{ display:flex; gap:0.5rem; margin:-0.4rem 0 0.8rem; }
.shop-thumb{ flex:0 0 56px; height:56px; padding:0; border-radius:8px; overflow:hidden; cursor:pointer;
  background:#0f0b16; border:1px solid var(--line,#2a2233); }
.shop-thumb.on{ border-color:var(--purple-bright,#c9b6ff); }
.shop-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-left{ min-height:0; font-size:0.85rem; font-weight:600; color:oklch(0.86 0.13 70); margin-bottom:0.6rem; }
.shop-left:not(.on){ display:none; }
.shop-qty{ display:flex; align-items:center; gap:0.5rem; margin-bottom:0.8rem; }
.shop-qty span{ flex:1; font-size:0.85rem; color:var(--muted,#8a83a0); }
.shop-qty button{ width:38px; height:38px; border-radius:9px; border:1px solid var(--line,#2a2233);
  background:none; color:var(--ink,#f4f1fa); font-size:1.1rem; cursor:pointer; }
.shop-qty button:hover{ border-color:var(--purple-bright,#c9b6ff); }
.shop-qty input{ width:52px; height:38px; text-align:center; border-radius:9px; border:1px solid var(--line,#2a2233);
  background:#0f0b16; color:inherit; font:inherit; -moz-appearance:textfield; }
.shop-qty input::-webkit-outer-spin-button, .shop-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* availability band, never a number */

/* ---- Donate: card / bank transfer panel ---- */
.paytabs{ display:flex; gap:0.4rem; margin:1.2rem 0 1.1rem; padding:0.3rem;
  background:oklch(0.18 0.03 305 / 0.7); border:1px solid var(--line); border-radius:14px; }
.paytab{ flex:1; padding:0.65em 0.6em; border:0; border-radius:11px; cursor:pointer;
  font:inherit; font-weight:600; font-size:0.94rem; color:var(--body); background:transparent;
  transition:background .25s, color .25s; }
.paytab:hover{ color:var(--ink); }
.paytab.on{ background:var(--purple); color:oklch(0.16 0.02 305); }
.paytab:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.amtset{ border:0; padding:0; margin:0 0 1rem; }
.amtset legend{ padding:0; margin-bottom:0.6rem; font-size:0.8rem; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--muted); }
.amtchips{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.amtchip{ flex:1 1 auto; min-width:72px; min-height:48px; padding:0.55em 0.7em; cursor:pointer;
  font:inherit; font-weight:700; font-size:1.02rem; color:var(--ink);
  background:oklch(0.2 0.03 305 / 0.8); border:1px solid var(--line); border-radius:12px;
  transition:border-color .2s, background .2s, transform .2s; }
.amtchip:hover{ border-color:var(--purple-bright); transform:translateY(-1px); }
.amtchip.on{ border-color:var(--purple-bright); background:var(--purple-ghost); color:var(--purple-bright); }
.amtchip:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.amtother{ margin-top:0.85rem; }
.amtother label{ display:block; font-size:0.84rem; color:var(--muted); margin-bottom:0.35rem; }
.amtinput{ display:flex; align-items:center; gap:0.5rem; max-width:220px;
  background:oklch(0.2 0.03 305 / 0.8); border:1px solid var(--line); border-radius:12px; padding:0 0.8rem; }
.amtinput span{ color:var(--muted); font-weight:700; }
.amtinput input{ flex:1; min-width:0; height:48px; border:0; background:transparent; color:var(--ink);
  font:inherit; font-weight:700; font-size:1.05rem; }
.amtinput input:focus{ outline:none; }
.amtinput:focus-within{ border-color:var(--purple-bright); }

.optline{ display:flex; gap:0.6rem; align-items:flex-start; margin:0 0 1.1rem;
  font-size:0.92rem; color:var(--body); cursor:pointer; }
.optline input{ margin-top:0.22rem; width:18px; height:18px; accent-color:var(--purple); flex:0 0 auto; }
#donGo{ width:100%; }
#donGo:disabled{ opacity:0.5; cursor:not-allowed; }
#donStatus:empty{ display:none; }
#donStatus{ margin-top:0.7rem; font-size:0.9rem; color:var(--muted); }

.bankdl{ margin:1rem 0 0; }
.bankrow{ display:flex; flex-wrap:wrap; gap:0.3rem 1rem; align-items:baseline;
  padding:0.7rem 0; border-bottom:1px solid oklch(0.34 0.045 305 / 0.5); }
.bankrow:last-child{ border-bottom:0; }
.bankrow dt{ flex:0 0 130px; font-size:0.84rem; color:var(--muted); }
.bankrow dd{ flex:1 1 160px; margin:0; display:flex; align-items:center; gap:0.7rem;
  justify-content:space-between; color:var(--ink); font-weight:600; }
.bankrow .mono{ font-variant-numeric:tabular-nums; letter-spacing:0.06em; font-size:1.05rem; }
.copybtn{ flex:0 0 auto; min-height:36px; padding:0.35em 0.75em; cursor:pointer; font:inherit;
  font-size:0.82rem; font-weight:600; color:var(--purple-bright); background:transparent;
  border:1px solid var(--line); border-radius:9px; transition:border-color .2s, color .2s; }
.copybtn:hover{ border-color:var(--purple-bright); }
.copybtn.ok{ color:oklch(0.8 0.14 150); border-color:oklch(0.8 0.14 150 / 0.5); }
.copybtn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

@media (max-width:520px){
  .bankrow dt{ flex:0 0 100%; }
  .amtchip{ min-width:64px; font-size:0.96rem; }
}

/* ---- Basket: floating button + drawer ---- */
.basket-fab{
  position:fixed; z-index:var(--z-toast); right:1.1rem; bottom:1.1rem;
  display:inline-flex; align-items:center; gap:0.8rem; cursor:pointer;
  padding:0.75rem 1.15rem 0.75rem 0.95rem; border:0; border-radius:999px;
  font:inherit; font-weight:700; color:oklch(0.16 0.02 305); background:var(--purple-bright);
  box-shadow:0 16px 38px -12px oklch(0.6 0.19 303 / 0.75), 0 4px 12px rgba(0,0,0,0.4);
  animation:fabIn .38s var(--ease) both;
}
@keyframes fabIn{ from{ opacity:0; transform:translateY(14px) scale(0.94); } to{ opacity:1; transform:none; } }
.basket-fab:hover{ filter:brightness(1.06); }
.basket-fab:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.basket-fab.bump{ animation:fabBump .45s var(--ease); }
@keyframes fabBump{ 0%,100%{ transform:none; } 35%{ transform:scale(1.08); } }
.fab-bag{ position:relative; display:inline-flex; }
.fab-count{
  position:absolute; top:-7px; right:-9px; min-width:20px; height:20px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:oklch(0.16 0.02 305); color:var(--purple-bright);
  font-size:0.72rem; font-weight:800; line-height:1;
}
.fab-text{ display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.15; font-size:0.9rem; }
.fab-text b{ font-size:1.02rem; }

.basket-scrim{ position:fixed; inset:0; z-index:calc(var(--z-toast) + 1);
  background:oklch(0.08 0.02 305 / 0.62); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s; }
.basket-scrim.open{ opacity:1; }
body.basket-open{ overflow:hidden; }

.basket-drawer{
  position:fixed; z-index:calc(var(--z-toast) + 2); display:flex; flex-direction:column;
  background:oklch(0.15 0.026 305); border:1px solid var(--line);
  box-shadow:-30px 0 70px -30px #000;
  transition:transform .34s var(--ease);
}
.bd-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.2rem 0.9rem; border-bottom:1px solid var(--line); flex:0 0 auto; }
.bd-head h2{ margin:0; font-size:1.35rem; }
.bd-close{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; border:1px solid var(--line); border-radius:11px; background:transparent; color:var(--body); }
.bd-close:hover{ color:var(--ink); border-color:var(--purple-bright); }
.bd-close:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.basket-drawer .shop-basket{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:1.1rem 1.2rem 1.6rem; margin:0; background:none; border:0; }
.basket-empty{ color:var(--muted); padding:1.4rem 0; text-align:center; }

/* desktop: a panel down the right side */
@media (min-width:761px){
  .basket-drawer{ top:0; right:0; width:min(430px, 92vw); height:100dvh; transform:translateX(102%); border-radius:0; }
  .basket-drawer.open{ transform:none; }
}
/* phone: a sheet up from the bottom, where the thumb already is */
@media (max-width:760px){
  .basket-fab{ left:1rem; right:1rem; justify-content:center; }
  .basket-drawer{ left:0; right:0; bottom:0; max-height:88dvh; transform:translateY(102%);
    border-radius:22px 22px 0 0; }
  .basket-drawer.open{ transform:none; }
}

/* a basket line: picture, what it is, how many, what it costs, and a way out */
.basket-list{ list-style:none; margin:0 0 1rem; padding:0; }
.bline{ display:grid; grid-template-columns:52px 1fr auto; gap:0.55rem 0.8rem; align-items:center;
  padding:0.85rem 0; border-bottom:1px solid oklch(0.34 0.045 305 / 0.4); }
.bline-pic{ width:52px; height:52px; object-fit:contain; border-radius:10px;
  background:oklch(0.2 0.03 305 / 0.7); }
.bline-main{ display:flex; flex-direction:column; gap:0.12rem; min-width:0; }
.bline-main b{ font-size:0.98rem; color:var(--ink); }
.bline-main i{ font-style:normal; font-size:0.84rem; color:var(--purple-bright); }
.bline-each{ font-size:0.8rem; color:var(--muted); }
.bline-qty{ grid-column:2; display:inline-flex; align-items:center; gap:0.35rem; }
.bline-qty button{ width:34px; height:34px; cursor:pointer; font:inherit; font-size:1.05rem;
  color:var(--ink); background:oklch(0.2 0.03 305 / 0.85); border:1px solid var(--line); border-radius:9px; }
.bline-qty button:hover:not(:disabled){ border-color:var(--purple-bright); color:var(--purple-bright); }
.bline-qty button:disabled{ opacity:0.35; cursor:not-allowed; }
.bline-qty span{ min-width:26px; text-align:center; font-weight:700; }
.bline-sum{ grid-column:3; grid-row:1; align-self:start; font-size:1rem; }
.basket-rm{ grid-column:3; grid-row:2; justify-self:end; cursor:pointer; font:inherit; font-size:0.8rem;
  color:var(--muted); background:transparent; border:0; padding:0.2rem 0; text-decoration:underline; }
.basket-rm:hover{ color:oklch(0.72 0.17 25); }
.basket-total{ display:flex; justify-content:space-between; align-items:baseline;
  padding:0.5rem 0 1rem; font-size:1.05rem; border-bottom:1px solid var(--line); margin-bottom:1rem; }
.basket-total b{ font-size:1.3rem; font-family:var(--display); color:var(--purple-bright); }
@media (max-width:430px){
  /* on a narrow phone the middle column was squeezing "£25.00 each" onto two lines */
  .bline{ grid-template-columns:46px 1fr auto; gap:0.45rem 0.6rem; }
  .bline-pic{ width:46px; height:46px; }
  .bline-each{ white-space:nowrap; font-size:0.76rem; }
  .bline-main b{ font-size:0.94rem; }
}

/* ---- Our directors ---- */
/* Three across on desktop, straight to one column on a phone. No two-column middle
   state, because three cards in a two-column grid strands one on its own row. */
.dteam{ display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.2vw,1.7rem); max-width:1080px; margin-inline:auto; }
@media (max-width:920px){ .dteam{ grid-template-columns:1fr; max-width:430px; } }

.dcard{ display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:1.6rem 1.3rem 1.7rem; border-radius:var(--radius);
  background:linear-gradient(180deg, oklch(0.21 0.035 305 / 0.85), oklch(0.17 0.028 305 / 0.85));
  border:1px solid var(--line); transition:border-color .3s, transform .3s var(--ease); }
.dcard:hover{ border-color:oklch(0.6 0.19 303 / 0.5); transform:translateY(-3px); }
.dbadge{ display:inline-block; margin-bottom:1.1rem; padding:0.3em 0.85em;
  border-radius:999px; background:var(--purple-ghost); border:1px solid oklch(0.6 0.19 303 / 0.5);
  color:var(--purple-bright); font-family:var(--sans); font-size:0.72rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; }
.dphoto{ width:150px; height:150px; border-radius:50%; overflow:hidden; margin-bottom:1rem;
  box-shadow:0 0 0 1px oklch(0.6 0.19 303 / 0.35), 0 14px 34px -18px oklch(0.6 0.19 303 / 0.8); }
.dphoto img{ width:100%; height:100%; object-fit:cover; display:block; }
.dcard h3{ font-size:var(--step-1); text-transform:uppercase; margin:0; }
.dcard .role{ color:var(--purple-bright); font-size:0.85rem; font-weight:600;
  letter-spacing:0.03em; margin-top:0.4rem; text-wrap:balance; }
.dcard p{ color:var(--muted); font-size:0.92rem; margin-top:0.9rem; }

/* ---- Desktop nav squeeze band ----
   Seven grouped items plus the full size wordmark need 1276px, and a 1221 laptop has
   1221. Two things made an earlier attempt at this silently do nothing, so both are
   handled here: `.nav .brand img` elsewhere outranks a bare `.brand img` on specificity,
   and `.nav-gbtn` is defined further down the file, so this block has to live at the END
   to win on source order. */
@media (min-width:1221px) and (max-width:1400px){
  .nav .brand img{ width:72px; height:72px; }
  .nav .brand span{ font-size:1.45rem; }
  .nav .brand span small{ font-size:0.68rem; letter-spacing:0.14em; margin-top:3px; }
  .nav-links a, .nav-links .nav-gbtn{ font-size:0.85rem; padding-left:0.4em; padding-right:0.4em; }
  .nav-links a::after{ left:0.4em; right:0.4em; }
  .nav-links a.nav-shop{ padding-left:0.68em; padding-right:0.68em; }
}

/* ---- Sessions: optional donation note ----
   Quiet on purpose. It sits between the intro and the cards, so it must read as a note
   rather than a second call to action competing with Book a place. */
.freenote{ display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem 1.4rem;
  justify-content:space-between; margin:0 0 clamp(1.6rem,3vw,2.4rem);
  padding:clamp(1rem,2.2vw,1.35rem) clamp(1.1rem,2.4vw,1.6rem);
  border:1px solid oklch(0.6 0.19 303 / 0.28); border-radius:var(--radius);
  background:oklch(0.6 0.19 303 / 0.07); }
.freenote-txt{ flex:1 1 320px; min-width:0; }
.freenote h2{ font-size:1.05rem; margin:0 0 0.35rem; letter-spacing:0.005em; text-transform:none; }
.freenote p{ margin:0; color:var(--muted); font-size:0.92rem; line-height:1.6; max-width:62ch; }
.freenote .btn{ flex:0 0 auto; }
@media (max-width:560px){
  .freenote{ align-items:flex-start; }
  .freenote .btn{ width:100%; text-align:center; }
}

/* ---- Optional donation on the booking form ----
   Sits at the foot of the form and is deliberately understated. No donation is a real
   option with equal weight, not a way out of a hard sell. */
.donate-opt{ border:1px solid oklch(0.6 0.19 303 / 0.28); border-radius:var(--radius);
  background:oklch(0.6 0.19 303 / 0.06); padding:1rem 1.1rem 1.1rem; margin:1.4rem 0 0.4rem; }
/* A legend that wraps to two lines sits astride the top border and looks broken on a
   phone. Floating it makes it a normal block, so the border stays unbroken behind it. */
.donate-opt legend{ float:left; width:100%; padding:0; margin-bottom:0.15rem;
  font-weight:700; color:var(--ink); font-size:1rem; }
.donate-opt .hint{ clear:both; margin:0.2rem 0 0.8rem; }
.donate-picks{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.dpick{ flex:1 1 auto; min-width:84px; min-height:48px; padding:0.6em 0.9em; cursor:pointer;
  font:inherit; font-weight:700; color:var(--ink); background:oklch(0.2 0.03 305 / 0.8);
  border:1px solid var(--line); border-radius:12px; transition:border-color .2s, background .2s, color .2s; }
.dpick:hover{ border-color:var(--purple-bright); }
.dpick.on{ border-color:var(--purple-bright); background:var(--purple-ghost); color:var(--purple-bright); }
.dpick:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
/* No donation is first and reads as an ordinary choice, never a greyed-out afterthought */
.dpick[data-amt="0"]{ flex:0 0 auto; }
#bkDonateNote{ margin:0.7rem 0 0; }
.donate-other{ margin-top:0.8rem; }
.donate-other label{ display:block; font-size:0.84rem; color:var(--muted); margin-bottom:0.35rem; }
.donate-other .amtinput{ max-width:200px; }