/* =============================================================================
   1. TOKENS
   The whole site is written against these. A theme is a token override, exactly
   as in config/themes.php — no per-theme stylesheet, ever.
============================================================================= */
:root{
  /* — surfaces: snow-white, with warmth in the greys — */
  --surface:#faf8ff;
  --surface-lowest:#ffffff;
  --surface-low:#f3f3ff;
  --surface-container:#ebedff;
  --surface-high:#e3e7ff;
  --hairline:#dbe1ff;
  --hairline-strong:#bdc8ef;

  --on-surface:#0b132b;
  --on-surface-variant:#48527a;   /* warm brown-grey — inherited from Yuletide */
  --outline:#6f6a98;

  /* — festive palette: used deliberately, never sprayed — */
  --primary:#ae0012;              /* deep cranberry — headline accents, links */
  --primary-bright:#d42426;       /* classic Santa red — buttons only */
  --on-primary:#ffffff;
  --primary-soft:#ffedeb;

  --evergreen:#2f5233;
  --green:#2f5233;
  --green-soft:#dcefdb;

  --royal:#0066cc;
  --royal-soft:#ebf4ff;

  --gold:#f7a81b;
  --gold-deep:#8a5c00;            /* AA-safe gold for text on light */
  --gold-soft:#ffeedd;
  --ink-on-gold:#3a2600;

  /* — night: the global-map band. Literal values so it stays night in
       BOTH colour schemes. Sourced from the "Midnight Sleigh" theme. — */
  --night:#0b132b;
  --night-raised:#182142;
  --night-line:#2c3a63;
  --on-night:#eef2f9;
  --on-night-variant:#a9b8d1;
  --night-gold:#ffc857;
  --night-green:#7fd8a0;
  --night-red:#ff7a7e;

  /* — type — */
  --font-display:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Quicksand',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* — spacing: 4px base, doubling-ish. Same rhythm everywhere. — */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* — shape — */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-2xl:48px; --r-full:9999px;

  /* — depth: tinted Rotary blue, never muddy grey — */
  --sh-1:0 4px 12px rgba(11,19,43,.06), 0 1px 2px rgba(11,19,43,.04);
  --sh-2:0 8px 24px rgba(0,102,204,.12), 0 2px 6px rgba(11,19,43,.06);
  --sh-3:0 16px 36px rgba(11,19,43,.22);

  /* — layout & motion — */
  --wrap:1180px;
  --ease:cubic-bezier(.22,.9,.3,1);
  --t-fast:150ms; --t-mid:280ms; --t-slow:520ms;
}

/* Dark mode: the same design, after dark. Tokens only. */
@media (prefers-color-scheme:dark){
  :root{
    --surface:#0f151f;
    --surface-lowest:#161f2e;
    --surface-low:#141c29;
    --surface-container:#1c2637;
    --surface-high:#233047;
    --hairline:#243247;
    --hairline-strong:#31415c;

    --on-surface:#eef2f9;
    --on-surface-variant:#b0bccf;
    --outline:#61738f;

    --primary:#ff8f92;
    --primary-bright:#e03a3f;
    --primary-soft:#3a1a20;

    --evergreen:#8fdfae;
    --green:#6fcf95;
    --green-soft:#17321f;

    --royal:#7fb4ff;
    --royal-soft:#152742;

    --gold:#ffc857;
    --gold-deep:#ffd67d;
    --gold-soft:#33260c;

    --sh-1:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
    --sh-2:0 2px 4px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.35);
    --sh-3:0 6px 12px rgba(0,0,0,.4),  0 24px 60px rgba(0,0,0,.45);
  }
}

/* =============================================================================
   2. BASE
============================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--on-surface);
  font:400 17px/1.6 var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--primary);text-underline-offset:.18em}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 .5em;line-height:1.15;letter-spacing:-.015em}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.4em}

.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}
@media(min-width:900px){.wrap{width:min(100% - 80px,var(--wrap))}}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:0;top:-120px;z-index:99;background:var(--primary-bright);color:#fff;padding:14px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{top:0}
:focus-visible{outline:3px solid var(--royal);outline-offset:3px;border-radius:var(--r-xs)}
.night :focus-visible{outline-color:var(--night-gold)}

/* — section bands — */
.band{padding:var(--s8) 0;position:relative}
@media(min-width:900px){.band{padding:var(--s9) 0}}
section[id]{scroll-margin-top:100px}
.band-low{background:var(--surface-low);border-block:1px solid var(--hairline)}
.band-mint{background:linear-gradient(180deg,var(--green-soft),color-mix(in srgb,var(--green-soft) 55%,var(--surface)));border-block:1px solid color-mix(in srgb,var(--green) 22%,transparent)}

/* — headings & lede — */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--primary);margin:0 0 var(--s4);
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;opacity:.7}
.h1{font-size:clamp(38px,8.2vw,68px);font-weight:600;line-height:1.04;letter-spacing:-.03em;margin-bottom:var(--s5)}
.h2{font-size:clamp(30px,5.4vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.025em;margin-bottom:var(--s4)}
.h3{font-size:clamp(21px,2.6vw,24px);font-weight:600;line-height:1.25;margin-bottom:var(--s2)}
.lede{font-size:clamp(18px,2.2vw,21px);line-height:1.55;color:var(--on-surface-variant);max-width:60ch}
.measure{max-width:62ch}
.center{text-align:center}
.center .lede{margin-inline:auto}
.center .eyebrow{justify-content:center}

/* — buttons: chunky, tactile, a 3px inner bottom edge like a wooden toy — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:52px;padding:14px 28px;border:0;border-radius:var(--r-full);
  font:600 17px/1.2 var(--font-body);text-decoration:none;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px);box-shadow:none!important}
.btn-red{background:var(--primary-bright);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.24),var(--sh-1)}
.btn-red:hover{background:#c01f21}
.btn-gold{background:var(--gold);color:var(--ink-on-gold);box-shadow:inset 0 -3px 0 rgba(0,0,0,.16),var(--sh-1)}
.btn-navy{background:var(--royal);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),var(--sh-1)}
.btn-green{background:var(--evergreen);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),var(--sh-1)}
.btn-ghost{background:var(--surface-lowest);color:var(--on-surface);border:1.5px solid var(--hairline-strong);box-shadow:var(--sh-1)}
.btn-ghost:hover{background:var(--surface-low);border-color:var(--outline)}
.btn-sm{min-height:44px;padding:10px 20px;font-size:15px}
.btn-block{width:100%}
@media (prefers-color-scheme:dark){
  .btn-green{background:#2c6a41;color:#fff}
  .btn-navy{background:#1b64b5;color:#fff}
}

/* =============================================================================
   3. HEADER + FAIRY LIGHTS
============================================================================= */
.topbar{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--surface-lowest) 88%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.topbar-in{display:flex;align-items:center;gap:var(--s3);min-height:68px}
.brand{display:flex;align-items:center;gap:0;text-decoration:none;color:inherit;margin-right:auto}
/* Wordmark. With no icon beside it this has to read as the logo on its own,
   so it runs on one line at the display face's heaviest weight, tightened,
   with the TLD carrying the festive red. */
.brand-txt{display:flex;align-items:baseline;gap:1px;line-height:1;min-width:0;white-space:nowrap}
.brand-txt b{
  font-family:var(--font-display);font-size:22px;font-weight:900;
  letter-spacing:-.035em;color:var(--on-surface);
}
.brand-txt i{
  font-style:normal;font-family:var(--font-display);font-size:22px;font-weight:900;
  letter-spacing:-.035em;color:var(--primary-bright);
}
@media(min-width:980px){
  .brand-txt b,.brand-txt i{font-size:25px}
}

.nav{display:none;align-items:center;gap:var(--s1)}
.nav a{
  padding:10px 14px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--on-surface-variant);font-size:15.5px;font-weight:600;
  transition:var(--t-fast) var(--ease);
}
.nav a:hover{color:var(--on-surface);background:var(--surface-low)}
.topbar-cta{display:none}
.navtoggle{
  width:46px;height:46px;flex:none;border-radius:var(--r-sm);cursor:pointer;
  background:var(--surface-low);border:1px solid var(--hairline-strong);color:var(--on-surface);
  display:grid;place-items:center;
}
.navtoggle span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
@media(min-width:980px){
  .nav{display:flex}
  .topbar-cta{display:inline-flex}
  .navtoggle{display:none}
}
/* mobile drawer */
.navpanel{display:none;border-top:1px solid var(--hairline);background:var(--surface-lowest);padding:var(--s3) 0 var(--s5)}
.navpanel.is-open{display:block}
@media(min-width:980px){.navpanel{display:none!important}}
.navpanel a{display:block;padding:14px 4px;font-size:18px;font-weight:600;color:var(--on-surface);text-decoration:none;border-bottom:1px solid var(--hairline)}
.navpanel .btn{margin-top:var(--s4)}

/* fairy lights strung under the header — lifted from the club tracker,
   restrained: fewer bulbs, softer glow, no blink on reduced motion */
.lights{
  position:sticky;top:68px;z-index:28;height:22px;display:flex;
  justify-content:space-around;align-items:flex-start;pointer-events:none;
  padding:0 6px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface) 0 38%,color-mix(in srgb,var(--surface) 70%,transparent) 72%,transparent);
}
.lights::before{
  content:"";position:absolute;left:0;right:0;top:0;height:11px;
  border-bottom:2px solid color-mix(in srgb,var(--evergreen) 45%,transparent);
  border-radius:0 0 50% 50%/0 0 11px 11px;
}
.bulb{
  width:8px;height:11px;margin-top:7px;flex:none;position:relative;
  border-radius:0 0 50% 50%/0 0 62% 62%;
  background:var(--c);box-shadow:0 2px 9px 1px var(--c);
  animation:blink 3.6s ease-in-out infinite var(--d);
}
@keyframes blink{0%,100%{opacity:1}45%{opacity:.32}}

/* =============================================================================
   4. HERO
============================================================================= */
.hero{
  position:relative;overflow:hidden;
  padding:var(--s7) 0 0;
  background:linear-gradient(180deg,#d9e8fb 0%,#eaf2fd 38%,var(--surface) 86%);
}
@media (prefers-color-scheme:dark){
  .hero{background:linear-gradient(180deg,#16233c 0%,#131c2c 42%,var(--surface) 86%)}
}
.hero-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-sky::before{ /* soft drifting cloud bank */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(46px 18px at 13% 16%,rgba(255,255,255,.9),transparent 70%),
    radial-gradient(64px 24px at 19% 19%,rgba(255,255,255,.82),transparent 70%),
    radial-gradient(52px 20px at 71% 11%,rgba(255,255,255,.82),transparent 70%),
    radial-gradient(72px 26px at 79% 14%,rgba(255,255,255,.7),transparent 70%);
}
@media (prefers-color-scheme:dark){.hero-sky::before{opacity:.12}}
.sun{
  position:absolute;top:22px;right:8%;width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#fff6dd,var(--gold));
  box-shadow:0 0 70px 26px rgba(247,168,27,.26);
}
@media(max-width:700px){.sun{width:54px;height:54px;top:10px;right:6%;box-shadow:0 0 42px 16px rgba(247,168,27,.24)}}
.flyby{
  position:absolute;top:52px;left:0;font-size:30px;letter-spacing:-6px;
  filter:drop-shadow(0 4px 8px rgba(0,60,110,.22));
  animation:fly 34s linear infinite;
}
/* The team flies left to right, so the rightmost glyph leads. Written in
   reading order the sleigh would be out in front towing the reindeer, so the
   whole team is mirrored: reindeer end up in front, and the glyphs face the
   direction of travel. Motion stays on .flyby, facing lives here, so the two
   transforms never fight. */
.flyby-team{display:inline-block;transform:scaleX(-1)}
@keyframes fly{
  0%{transform:translate(-240px,44px) scale(.8)}
  46%{transform:translate(52vw,-16px) scale(1.02)}
  100%{transform:translate(118vw,38px) scale(.8)}
}
.skyline{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:210px}
.sky-hill{fill:#cfe0f3}
.sky-tree{fill:var(--evergreen)}
.sky-build{fill:#bfd2e8}
.sky-snow{fill:var(--surface)}
.sky-window{fill:var(--gold);opacity:.9}
@media (prefers-color-scheme:dark){
  .sky-hill{fill:#1a2740}.sky-build{fill:#22304b}.sky-tree{fill:#1e3d27}
}

.hero-in{position:relative;z-index:2;padding-bottom:var(--s8)}
@media(min-width:900px){.hero-in{padding-bottom:var(--s9)}}
.hero-copy{max-width:780px}
.hero .h1 .glow{
  color:var(--primary);
  text-shadow:0 2px 0 rgba(255,255,255,.7);
}
@media (prefers-color-scheme:dark){.hero .h1 .glow{text-shadow:none}}
.sleeps{
  display:inline-block;margin:0 0 var(--s5);padding:9px 18px;border-radius:var(--r-full);
  background:var(--surface-lowest);border:1px solid var(--hairline-strong);
  font-size:14.5px;font-weight:600;color:var(--primary);box-shadow:var(--sh-1);
}

/* — THE TWO DOORS: the whole two-audience problem, solved in one component — */
.doors{
  display:grid;gap:var(--s4);margin-top:var(--s7);
  grid-template-columns:1fr;
}
@media(min-width:880px){.doors{grid-template-columns:1.08fr 1fr;gap:var(--s5)}}
.door{
  position:relative;background:var(--surface-lowest);
  border:1px solid var(--hairline);border-radius:var(--r-xl);
  padding:var(--s5) var(--s5) var(--s6);
  box-shadow:var(--sh-2);
}
.door-a{border-top:5px solid var(--royal)}
.door-b{border-top:5px solid var(--primary-bright)}
.door-tag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s3);
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-full);
}
.door-a .door-tag{background:var(--royal-soft);color:var(--royal)}
.door-b .door-tag{background:var(--primary-soft);color:var(--primary)}
@media (prefers-color-scheme:dark){
  .door-a .door-tag{color:#a9cdff}
  .door-b .door-tag{color:#ffb1b1}
}
.door h2{font-size:clamp(23px,3.4vw,28px);font-weight:600;margin-bottom:6px}
.door p{color:var(--on-surface-variant);font-size:16.5px;margin-bottom:var(--s4)}
.door-note{font-size:14px;color:var(--on-surface-variant);margin:var(--s3) 0 0}

.finder{display:flex;gap:var(--s2);flex-wrap:wrap}
.finder input{
  flex:1 1 190px;min-height:52px;padding:14px 18px;
  font:400 17px var(--font-body);color:var(--on-surface);
  background:var(--surface-low);border:1.5px solid var(--hairline-strong);
  border-radius:var(--r-full);transition:var(--t-fast) var(--ease);
}
.finder input::placeholder{color:var(--outline)}
.finder input:focus{outline:none;background:var(--surface-lowest);border-color:var(--royal);box-shadow:0 0 0 4px color-mix(in srgb,var(--royal) 18%,transparent)}
.finder-out{margin-top:var(--s4);font-size:15.5px;color:var(--on-surface-variant)}
.finder-out .hit{
  display:block;background:var(--green-soft);border:1px solid color-mix(in srgb,var(--green) 40%,transparent);
  border-radius:var(--r-md);padding:14px 16px;color:var(--on-surface);
}
.finder-out .hit b{display:block;font-family:var(--font-display);font-size:18px}

.door-list{list-style:none;padding:0;margin:0 0 var(--s5)}
.door-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:16px;color:var(--on-surface-variant)}
.tick{flex:none;width:21px;height:21px;margin-top:2px;border-radius:50%;background:var(--green-soft);color:var(--evergreen);display:grid;place-items:center}
.tick svg{display:block}

/* — trust strip — */
.trust{
  position:relative;z-index:2;margin-top:calc(var(--s7) * -1);
  padding-top:var(--s7);
}
.trust-in{
  background:var(--surface-lowest);border:1px solid var(--hairline);
  border-radius:var(--r-xl);box-shadow:var(--sh-2);
  padding:var(--s5) var(--s5);
}
.trust-lab{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-surface-variant);text-align:center;margin:0 0 var(--s4)}
.trust-orgs{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:center;
  font-family:var(--font-display);font-size:clamp(15px,2.4vw,19px);font-weight:600;
  color:var(--on-surface);opacity:.82;margin:0 0 var(--s5);
}
.trust-orgs span{display:inline-flex;align-items:center;gap:8px}
.trust-orgs span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);border-top:1px solid var(--hairline);padding-top:var(--s5)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(28px,4.4vw,38px);font-weight:600;line-height:1;color:var(--primary);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font-size:14.5px;color:var(--on-surface-variant);line-height:1.35}

/* =============================================================================
   5. FEATURE CARDS
============================================================================= */
.cards{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-top:var(--s7)}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--surface-lowest);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s5);
  box-shadow:var(--sh-1);transition:var(--t-mid) var(--ease);
}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-3px);border-color:var(--hairline-strong)}
.card-ico{
  width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;
  margin-bottom:var(--s4);background:var(--surface-low);border:1px solid var(--hairline);
}
.card-ico svg{display:block}
.card h3{font-size:20px;margin-bottom:6px}
.card p{font-size:16px;color:var(--on-surface-variant);margin:0}
.i-red{color:var(--primary-bright);background:var(--primary-soft);border-color:transparent}
.i-green{color:var(--evergreen);background:var(--green-soft);border-color:transparent}
.i-blue{color:var(--royal);background:var(--royal-soft);border-color:transparent}
.i-gold{color:var(--gold-deep);background:var(--gold-soft);border-color:transparent}

/* two-column split (organiser side-by-side) */
.split{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:center}
/* grid children default to min-width:auto, which lets a <pre> or a long word
   push the whole column past the wrap. Reset it on every grid we own. */
.split>*,.doors>*,.cards>*,.plans>*,.globe-layout>*,.theme-layout>*,.steps>*,.foot-grid>*{min-width:0}
.codebox,.codebox pre{max-width:100%}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--s8)}}

/* =============================================================================
   6. NIGHT BAND — the global map of Santa's helpers
============================================================================= */
.night{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 50% -10%,#1c2a48 0%,var(--night) 62%);
  color:var(--on-night);
  border-block:1px solid var(--night-line);
}
.night .h2,.night h3{color:var(--on-night)}
.night .lede,.night p{color:var(--on-night-variant)}
.night .eyebrow{color:var(--night-gold)}
.night a{color:var(--night-gold)}
.stars{position:absolute;inset:0;pointer-events:none;opacity:.85}
.stars i{
  position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  animation:twinkle 4.5s ease-in-out infinite var(--d);
}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.95}}
.night-in{position:relative;z-index:2}

.globe-layout{display:grid;gap:var(--s6);grid-template-columns:1fr;margin-top:var(--s7);align-items:center}
@media(min-width:960px){.globe-layout{grid-template-columns:1.15fr .85fr;gap:var(--s8)}}
.globe-shell{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  border:1px solid var(--night-line);padding:var(--s4);
}
.globe-shell svg{display:block;width:100%;height:auto}
.globe-cap{
  margin:var(--s3) 0 0;font-size:14.5px;color:var(--on-night-variant);
  text-align:center;
}
.helper-dot{animation:beat 2.6s ease-out infinite var(--d)}
@keyframes beat{
  0%{r:4;opacity:1}
  70%{r:13;opacity:0}
  100%{r:13;opacity:0}
}
.trail{stroke-dasharray:3 9;animation:travel 9s linear infinite}
@keyframes travel{to{stroke-dashoffset:-96}}

.nearby{
  background:var(--night-raised);border:1px solid var(--night-line);
  border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-3);
}
.nearby h3{font-size:20px;margin-bottom:var(--s1)}
.nearby > p{font-size:15px;margin-bottom:var(--s4)}
.nearby-list{list-style:none;padding:0;margin:0 0 var(--s5)}
.nearby-list li{
  display:flex;align-items:center;gap:var(--s3);padding:13px 0;
  border-bottom:1px solid var(--night-line);
}
.nearby-list li:last-child{border-bottom:0}
.nb-pip{flex:none;width:10px;height:10px;border-radius:50%}
.nb-out{background:var(--night-green);box-shadow:0 0 0 4px color-mix(in srgb,var(--night-green) 25%,transparent)}
.nb-soon{background:var(--night-gold)}
.nb-rest{background:var(--night-line)}
.nb-txt{min-width:0;flex:1}
.nb-txt b{display:block;font-size:16px;font-weight:600;color:var(--on-night)}
.nb-txt span{display:block;font-size:14px;color:var(--on-night-variant)}
.nb-when{flex:none;font-size:13.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--night-gold)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center;margin-top:var(--s5);font-size:14px;color:var(--on-night-variant)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.lg{width:11px;height:11px;border-radius:50%;display:inline-block}

/* — the magic note: charming, not a disclaimer — */
.pole-note{
  margin-top:var(--s7);background:rgba(255,200,87,.07);
  border:1px solid rgba(255,200,87,.28);border-radius:var(--r-lg);
  padding:var(--s5);max-width:62ch;margin-inline:auto;text-align:center;
}
.pole-note p{margin:0;font-size:17px;line-height:1.6}
.pole-note p + p{margin-top:var(--s3)}
.pole-note b{color:var(--night-gold);font-family:var(--font-display);font-weight:600}

/* =============================================================================
   7. HOW IT WORKS — three steps
============================================================================= */
.steps{counter-reset:step;display:grid;gap:var(--s5);grid-template-columns:1fr;margin-top:var(--s7)}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.step{position:relative;padding-top:62px}   /* 46px circle + 16px gap */
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:0;left:0;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1;
  background:var(--primary-bright);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
}
/* dotted sleigh-trail joining the steps on desktop */
@media(min-width:860px){
  .step:not(:last-child)::after{
    content:"";position:absolute;top:23px;left:58px;right:-24px;height:2px;
    background:repeating-linear-gradient(90deg,var(--hairline-strong) 0 7px,transparent 7px 15px);
  }
}
.step h3{font-size:21px;margin-bottom:6px}
.step p{font-size:16.5px;color:var(--on-surface-variant);margin:0}
.reassure{
  margin-top:var(--s7);display:flex;gap:var(--s4);align-items:flex-start;
  background:var(--surface-lowest);border:1px solid var(--hairline);border-left:5px solid var(--gold);
  border-radius:var(--r-md);padding:var(--s5);box-shadow:var(--sh-1);max-width:70ch;
}
.reassure p{margin:0;font-size:16.5px}
.reassure strong{font-family:var(--font-display);font-weight:600}

/* =============================================================================
   8. THEMES — live switcher over a mini tracker preview
============================================================================= */
.theme-layout{display:grid;gap:var(--s6);grid-template-columns:1fr;margin-top:var(--s7)}
@media(min-width:960px){.theme-layout{grid-template-columns:.85fr 1.15fr;gap:var(--s7);align-items:start}}
.swatches{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:520px){.swatches{grid-template-columns:repeat(2,1fr)}}
.swatch{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 13px;border-radius:var(--r-md);cursor:pointer;text-align:left;
  background:var(--surface-lowest);border:1.5px solid var(--hairline);
  font:600 14.5px var(--font-body);color:var(--on-surface);
  transition:var(--t-fast) var(--ease);
}
.swatch:hover{border-color:var(--outline);transform:translateY(-1px)}
.swatch[aria-pressed="true"]{border-color:var(--on-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--on-surface) 12%,transparent)}
.chips{display:flex;flex:none}
.chips i{display:block;width:13px;height:22px;border-radius:3px;margin-right:-4px;border:1px solid rgba(0,0,0,.14)}
.chips i:last-child{margin-right:0}
.theme-desc{margin-top:var(--s4);font-size:15.5px;color:var(--on-surface-variant);min-height:3em}

/* the preview is fully token-scoped: switching theme rewrites these vars only */
.preview{
  --p-surface:#f8f9fa;--p-lowest:#fff;--p-low:#f3f4f5;--p-container:#edeeef;
  --p-on:#191c1d;--p-variant:#5c403d;--p-outline:#916f6b;
  --p-primary:#ae0012;--p-primary-c:#d42426;--p-on-primary:#fff;
  --p-green:#2f5233;--p-green-c:#c4edc3;--p-royal:#005daa;--p-gold:#f7a81b;
  --p-display:'Fraunces',Georgia,serif;--p-body:'Be Vietnam Pro',system-ui,sans-serif;
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
  border:1px solid var(--hairline-strong);
  background:var(--p-surface);color:var(--p-on);font-family:var(--p-body);
  transition:background var(--t-mid) var(--ease),color var(--t-mid) var(--ease);
}
.pv-bar{
  display:flex;align-items:center;gap:9px;padding:11px 14px;
  background:var(--p-lowest);border-bottom:1px solid var(--p-container);
}
.pv-bar .dotrow{display:flex;gap:5px}
.pv-bar .dotrow i{width:9px;height:9px;border-radius:50%;background:var(--p-container);display:block}
.pv-url{
  flex:1;font-size:11.5px;color:var(--p-variant);background:var(--p-low);
  border-radius:var(--r-full);padding:5px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pv-body{padding:var(--s5) var(--s4) var(--s5)}
.pv-club{
  display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--p-primary);margin-bottom:var(--s3);
}
.pv-club::before{content:"";width:20px;height:20px;border-radius:6px;background:var(--p-primary-c);flex:none}
.pv-h{font-family:var(--p-display);font-size:clamp(24px,4.6vw,34px);font-weight:700;line-height:1.1;margin:0 0 var(--s4);letter-spacing:-.02em}
.pv-status{
  background:var(--p-green-c);border:1px solid var(--p-green);border-radius:var(--r-lg);
  padding:var(--s4);margin-bottom:var(--s4);
}
.pv-live{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--p-green);margin-bottom:6px}
.pv-live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--p-green);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:1}100%{box-shadow:0 0 0 11px transparent;opacity:.6}}
.pv-where{font-family:var(--p-display);font-size:21px;font-weight:700;margin:0 0 3px;line-height:1.2}
.pv-sub{font-size:13.5px;color:var(--p-variant);margin:0}
.pv-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:var(--s4)}
.pv-cd div{background:var(--p-lowest);border:1px solid var(--p-container);border-radius:var(--r-xs);padding:7px 3px;text-align:center}
.pv-cd b{display:block;font-family:var(--p-display);font-size:19px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.pv-cd span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p-variant);margin-top:3px}
.pv-btns{display:flex;gap:8px;flex-wrap:wrap}
.pv-btn{
  border-radius:var(--r-full);padding:10px 18px;font:600 14px var(--p-body);
  border:0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
}
.pv-btn.a{background:var(--p-primary-c);color:var(--p-on-primary)}
.pv-btn.b{background:var(--p-gold);color:#3a2600;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.pv-btn.c{background:transparent;color:var(--p-variant);border:1.5px solid var(--p-outline);box-shadow:none}
.pv-map{
  margin-top:var(--s4);height:96px;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--p-container);background:var(--p-lowest);
}
.pv-map svg{display:block;width:100%;height:100%}

/* =============================================================================
   9. EMBED
============================================================================= */
.codebox{
  background:var(--night);color:var(--on-night);border-radius:var(--r-lg);
  border:1px solid var(--night-line);overflow:hidden;box-shadow:var(--sh-2);
}
.codebox header{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  background:rgba(255,255,255,.04);border-bottom:1px solid var(--night-line);
  font-size:13px;font-weight:600;color:var(--on-night-variant);
}
.codebox header i{width:9px;height:9px;border-radius:50%;background:var(--night-red);display:block}
.codebox pre{
  margin:0;padding:var(--s5) var(--s4);overflow-x:auto;
  font:400 14px/1.7 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
.codebox .t{color:var(--night-green)}
.codebox .a{color:var(--night-gold)}
.codebox .v{color:#9ec5ff}
.embed-notes{list-style:none;padding:0;margin:var(--s5) 0 0}
.embed-notes li{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:16.5px;color:var(--on-surface-variant)}

/* =============================================================================
   10. PRICING
============================================================================= */
.plans{display:grid;gap:var(--s5);grid-template-columns:1fr;margin-top:var(--s7);align-items:start}
@media(min-width:880px){.plans{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.plan{
  background:var(--surface-lowest);border:1px solid var(--hairline);
  border-radius:var(--r-xl);padding:var(--s6) var(--s5);box-shadow:var(--sh-1);
  position:relative;
}
.plan-pro{border:2px solid var(--gold);box-shadow:var(--sh-2)}
.plan-flag{
  position:absolute;top:-14px;left:var(--s5);
  background:var(--gold);color:var(--ink-on-gold);
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--r-full);box-shadow:var(--sh-1);
}
.plan h3{font-size:24px;margin-bottom:4px}
.plan .plan-for{font-size:15px;color:var(--on-surface-variant);margin-bottom:var(--s5)}
.price{display:flex;align-items:baseline;gap:8px;margin-bottom:var(--s5)}
.price b{font-family:var(--font-display);font-size:clamp(44px,7vw,58px);font-weight:600;line-height:.9;letter-spacing:-.03em}
.price span{font-size:15.5px;color:var(--on-surface-variant)}
.plan ul{list-style:none;padding:0;margin:0 0 var(--s6)}
.plan li{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;font-size:16.5px}
.plan li span{color:var(--on-surface-variant)}
.plan-foot{font-size:14.5px;color:var(--on-surface-variant);margin:var(--s4) 0 0}

/* =============================================================================
   11. FAQ
============================================================================= */
.faq{max-width:76ch;margin:var(--s7) auto 0}
.qa{
  background:var(--surface-lowest);border:1px solid var(--hairline);
  border-radius:var(--r-md);margin-bottom:12px;box-shadow:var(--sh-1);overflow:hidden;
}
.qa summary{
  list-style:none;cursor:pointer;padding:19px var(--s5) 19px var(--s4);
  font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.3;
  display:flex;align-items:flex-start;gap:12px;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:12px;height:12px;margin:7px 0 0 auto;
  border-right:2.5px solid var(--primary);border-bottom:2.5px solid var(--primary);
  transform:rotate(45deg);transition:transform var(--t-fast) var(--ease);
}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa .a{padding:0 var(--s4) var(--s5);color:var(--on-surface-variant);font-size:16.5px}
.qa .a p:last-child{margin-bottom:0}

/* =============================================================================
   12. FINAL CTA + FOOTER
============================================================================= */
.cta{
  position:relative;overflow:hidden;color:var(--ink-on-gold);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 26px,transparent 26px 52px),
    linear-gradient(140deg,var(--gold),#ffcf72);
}
.cta .h2,.cta p{color:var(--ink-on-gold)}
.cta .eyebrow{color:#7a3a00}
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s6)}
.cta .btn-ghost{background:rgba(255,255,255,.9);border-color:rgba(0,0,0,.18);color:var(--ink-on-gold)}

.foot{position:relative;background:var(--night);color:var(--on-night);padding:var(--s9) 0 var(--s6)}
.drift{position:absolute;top:-1px;left:0;width:100%;height:56px;display:block;pointer-events:none}
.drift path{fill:var(--night)}
.foot-grid{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot h4{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--night-gold);margin-bottom:var(--s4)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:11px}
.foot a{color:var(--on-night-variant);text-decoration:none;font-size:16px}
.foot a:hover{color:var(--on-night);text-decoration:underline}
.foot .brand-txt b,.foot .brand-txt i{color:var(--on-night)}
.foot-blurb{color:var(--on-night-variant);font-size:16px;max-width:38ch;margin-top:var(--s4)}
.foot-base{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--night-line);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;
  font-size:14.5px;color:var(--on-night-variant);
}

/* =============================================================================
   13. MOTION
============================================================================= */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .flyby{display:none}
  .bulb,.stars i{opacity:1!important}
}


/* =============================================================================
   SIGNUP  (/start)
   Six fields, one screen. Generous targets and 16px+ inputs, because iOS zooms
   the viewport on focus for anything smaller and volunteers fill this in on a
   phone.
============================================================================= */
.signup-card{
  max-width:560px;margin:var(--s7) auto 0;background:var(--surface-lowest);
  border:1px solid var(--hairline);border-radius:var(--r-xl);
  padding:var(--s6);box-shadow:var(--sh-2);
}
.signup-card fieldset{border:0;margin:0 0 var(--s6);padding:0}
.signup-card legend{
  font-family:var(--font-display);font-size:19px;font-weight:600;
  padding:0 0 var(--s3);color:var(--on-surface);
}
.signup-card label{display:block;font-weight:600;font-size:15px;margin:var(--s4) 0 6px}
.signup-card input{
  width:100%;box-sizing:border-box;font:inherit;font-size:16.5px;
  padding:12px 14px;border:1.5px solid var(--hairline-strong);
  border-radius:var(--r-md);background:var(--surface);color:var(--on-surface);
}
.signup-card input:focus-visible{
  outline:3px solid var(--primary-bright);outline-offset:1px;border-color:transparent;
}
.signup-card .hint{font-size:14.5px;color:var(--on-surface-variant);margin:6px 0 0}
.signup-card .row-2{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:560px){.signup-card .row-2{grid-template-columns:1fr 1fr}}
.signup-card .btn{margin-top:var(--s5)}
.signup-foot{font-size:15px;color:var(--on-surface-variant);text-align:center;margin:var(--s5) 0 0}
.signup-errors{
  background:#fff4f4;border:1.5px solid #e6b3b3;color:#7a1f1f;
  border-radius:var(--r-md);padding:var(--s4) var(--s5);margin-bottom:var(--s5);
}
.signup-errors p{margin:0 0 6px}
.signup-errors ul{margin:0;padding-left:1.1em;font-size:15px}
.foot-credit{text-align:center;font-size:14.5px;opacity:.75;margin:var(--s5) 0 0}

/* =============================================================================
   TOWN / COUNTY LANDING PAGES
============================================================================= */
.town-club{
  background:var(--surface-lowest);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s5);margin:var(--s5) 0;box-shadow:var(--sh-1);
}
.town-stops{list-style:none;margin:var(--s4) 0;padding:0;display:grid;gap:8px}
.town-stops li{
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  padding:10px 12px;background:var(--surface);border-radius:var(--r-md);font-size:16px;
}
.town-stops li b{min-width:6.5em}
.town-stops li span{color:var(--on-surface-variant)}
.town-stops li.is-cancelled{opacity:.62}
.town-stops li.is-cancelled b,.town-stops li.is-cancelled span:not(:last-child){text-decoration:line-through}
.town-stops li em{color:var(--primary);font-style:normal;font-weight:600;font-size:15px}
.town-empty{
  background:var(--surface-lowest);border:1px dashed var(--hairline-strong);
  border-radius:var(--r-lg);padding:var(--s6);margin:var(--s5) 0;text-align:center;
}
.town-list{list-style:none;margin:var(--s4) 0;padding:0;column-width:220px;column-gap:var(--s6)}
.town-list li{margin:0 0 8px;break-inside:avoid}
.town-nearby{list-style:none;margin:var(--s4) 0;padding:0;display:grid;gap:8px}
.town-nearby li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--surface);border-radius:var(--r-md)}
.town-nearby li span{color:var(--on-surface-variant);font-size:15px;white-space:nowrap}
.county-block{margin:var(--s6) 0}
.muted{color:var(--on-surface-variant)}

/* Brand mark now carries the real logo, which is a circular badge - let it be
   round and unpadded rather than sitting in the old glyph's tinted square. */

/* The brand mark now carries the real logo, which is already a circular badge -
   let it be round and unpadded rather than sitting inside the old glyph's tile. */

/* =============================================================================
   YULETIDE TRACKER FESTIVE SYSTEM — public surfaces only
   -----------------------------------------------------------------------------
   Applies the brand design system to the marketing site. Club tracker pages are
   deliberately untouched: those are themed per club from config/themes.php, and
   a club that picked "Nordic Frost" should not have this red pushed onto it.

   Everything below is component-level. The palette and type arrived via the
   token block above, because the whole stylesheet is written against it.
============================================================================= */

/* ── Tactile 3D buttons ─────────────────────────────────────────────────────
   Pill-shaped with a bottom bevel that flattens on press. The transform is
   behind a motion query - a bouncing button is charming until you have
   vestibular issues, at which point it is not. */
.btn{
  border-radius:var(--r-full);
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:.2px;
  /* 48x48 minimum: the audience includes children on tablets, and adults in
     gloves in December. */
  min-height:48px;
  padding:13px 26px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;
  transition:transform .12s var(--ease,cubic-bezier(.22,.9,.3,1)),box-shadow .18s;
}
.btn-red{background:var(--primary-bright);color:#fff;box-shadow:0 4px 0 #9e1315}
.btn-red:hover{box-shadow:0 4px 0 #9e1315, 0 0 16px rgba(247,168,27,.6)}
.btn-green{background:var(--evergreen);color:#fff;box-shadow:0 4px 0 #1d3520}
.btn-gold{background:var(--gold);color:#0b132b;box-shadow:0 4px 0 #c07d00}
.btn-navy,.btn-blue{background:var(--royal);color:#fff;box-shadow:0 4px 0 #004488}

@media (prefers-reduced-motion:no-preference){
  .btn-red:hover,.btn-green:hover,.btn-gold:hover,.btn-navy:hover,.btn-blue:hover{transform:translateY(-1px)}
  .btn-red:active,.btn-green:active,.btn-gold:active,.btn-navy:active,.btn-blue:active{transform:translateY(3px)}
}
.btn-red:active{box-shadow:0 1px 0 #9e1315}
.btn-green:active{box-shadow:0 1px 0 #1d3520}
.btn-gold:active{box-shadow:0 1px 0 #c07d00}
.btn-navy:active,.btn-blue:active{box-shadow:0 1px 0 #004488}

.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ── Pill-shaped chips, tags and badges ──────────────────────────────────── */
.chip,.chip-link,.badge,.pill,.eyebrow{border-radius:var(--r-full)}
.chip-link{min-height:44px;display:inline-flex;align-items:center}

/* ── Cards: snowbank corners, pillowy depth ─────────────────────────────── */
.card,.plan,.step,.trust-in,.signup-card,.town-club,.town-empty{border-radius:var(--r-xl)}

/* ── Inputs: 52px, pill, ambient focus halo ─────────────────────────────── */
input[type="text"],input[type="email"],input[type="search"],input[type="password"],
.signup-card input,.finder input{
  min-height:52px;
  border-radius:var(--r-full);
  border:2px solid #e2e8f0;
  padding:12px 20px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:16.5px;               /* below 16px iOS zooms the page on focus */
}
input:focus-visible,.signup-card input:focus-visible{
  outline:none;
  border-color:var(--royal);
  box-shadow:0 0 0 4px rgba(0,102,204,.18);
}

/* ── Headline weights: Nunito Sans carries this system at 800/900 ────────── */
h1,.h1,.h2{font-weight:900;letter-spacing:-.5px}
h2,h3,.h3{font-weight:800;letter-spacing:-.2px}
.stat b,.price b,.cd b{font-weight:900;font-variant-numeric:tabular-nums}

/* ── Layout container ───────────────────────────────────────────────────── */
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--s4)}
@media(min-width:640px){.wrap{padding-inline:var(--s5)}}
@media(min-width:1024px){.wrap{padding-inline:var(--s6)}}

/* =============================================================================
   MOBILE
   The majority of visitors arrive on a phone, from a Facebook link, outdoors,
   in the dark. This block is not a fallback - it is the primary case.
============================================================================= */
@media(max-width:640px){
  /* Nothing tappable smaller than a fingertip. */
  .btn,.chip-link,.nav a,.foot a,.town-list a,.town-nearby a{min-height:48px}
  .btn{width:100%;padding:14px 22px}
  .btn-inline{width:auto}

  h1,.h1{font-size:34px;line-height:40px}
  .h2{font-size:28px;line-height:34px}
  .h3{font-size:22px;line-height:28px}
  .lede{font-size:17px;line-height:27px}

  /* Steps stack, so the connector trail between them is meaningless. */
  .step:not(:last-child)::after{display:none}

  /* Long single-column lists read better than cramped columns on a phone. */
  .town-list{column-width:auto}
  .town-stops li{flex-direction:column;gap:2px}
  .town-stops li b{min-width:0}
  .town-nearby li{flex-direction:column;align-items:flex-start;gap:2px}

  /* Side-by-side price cards become unreadable slivers under ~600px. */
  .plans{grid-template-columns:1fr}
}

/* Respect the system setting rather than animating regardless. */
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .flyby{animation:none}
}

/* ── Tap targets on inline links ────────────────────────────────────────────
   min-height does nothing to an inline box, so nav and footer links stayed
   ~20px tall on a phone. Padding is what actually grows the hit area. */
.foot a,.nav a,.navpanel a,.door-note a,.muted a{display:inline-block}
@media(max-width:640px){
  .foot a,.nav a,.navpanel a{padding-block:14px;line-height:20px}
  .brand{min-height:48px;display:inline-flex;align-items:center}
}
/* Code samples scroll themselves rather than widening the page. */
.codebox pre{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.codebox code{white-space:pre;min-width:0}

/* =============================================================================
   /TONIGHT — the live index, and the postcode district pages
   Both are read standing up, outdoors, on a phone, in the dark. Big answer at
   the top, generous tap targets, nothing that needs a second look.
============================================================================= */
.band-tight{padding:var(--s6) 0}
@media(min-width:900px){.band-tight{padding:var(--s7) 0}}

.tonight-answer{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,4.4vw,28px);line-height:1.25;
  margin:var(--s4) 0 0;color:var(--on-surface);
}

.live-dot{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  background:var(--primary);margin-right:8px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(212,36,38,.55);animation:tonightPulse 1.9s ease-out infinite;
}
@keyframes tonightPulse{
  70%{box-shadow:0 0 0 12px rgba(212,36,38,0)}
  100%{box-shadow:0 0 0 0 rgba(212,36,38,0)}
}
/* A pulsing dot next to "out right now" is decoration, not information. */
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}}

.tonight-list{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:10px}
.tonight-row{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start;
  background:var(--surface-lowest);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);
}
.tonight-row.is-live{border-color:var(--primary);box-shadow:var(--sh-1)}
.tonight-list.is-compact .tonight-row{padding:10px var(--s4)}
.tonight-main{min-width:0;flex:1 1 260px}
.tonight-club{font-weight:700;font-size:17px;text-decoration:none}
.tonight-club:hover{text-decoration:underline}
.tonight-where{margin:2px 0 0;color:var(--on-surface-variant)}
.tonight-streets{margin:6px 0 0;font-size:15px}
.tonight-meta{display:flex;flex-direction:column;gap:4px;align-items:flex-end;text-align:right;font-size:15px}
@media(max-width:520px){
  .tonight-meta{align-items:flex-start;text-align:left}
}
.tonight-badge{
  display:inline-block;padding:3px 10px;border-radius:999px;
  background:var(--primary);color:#fff;font-weight:700;font-size:14px;white-space:nowrap;
}
.tonight-badge.is-soon{background:var(--surface-highest);color:var(--on-surface)}
.tonight-counties{column-width:180px}

.pc-nights{display:grid;gap:10px;margin:var(--s4) 0 0}
.pc-night{
  background:var(--surface-lowest);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);
}
.pc-night.is-cancelled{opacity:.62}
.pc-date{margin:0 0 4px;font-size:16px;font-weight:700}
.pc-cancelled{color:var(--primary);font-weight:600;margin:6px 0 0}
.pc-streets{list-style:none;margin:var(--s4) 0 0;padding:0;column-width:180px;column-gap:var(--s6)}
.pc-streets li{margin:0 0 6px;break-inside:avoid;color:var(--on-surface-variant)}
/* The full street list under each night. The town page owns "is santa coming
   to my street in {town}" and cannot own it without the streets on it. */
.town-stop-streets{flex-basis:100%;font-size:15px;color:var(--on-surface-variant)}