/* =============================================================================
   Mansfield Rotary — Santa Sleigh Tracker
   Design system: "Yuletide Service" — Modern Festive, light/snow-white.
   Mobile-first. Fonts degrade to system stacks if Google Fonts is unreachable.
============================================================================= */

:root{
  /* ── surfaces ─────────────────────────────────────────────── */
  --surface:#f8f9fa;
  --surface-dim:#d9dadb;
  --surface-lowest:#ffffff;
  --surface-low:#f3f4f5;
  --surface-container:#edeeef;
  --surface-high:#e7e8e9;
  --surface-highest:#e1e3e4;
  --frost:#e9ecef;

  --on-surface:#191c1d;
  --on-surface-variant:#5c403d;
  --outline:#916f6b;
  --outline-variant:#e5bdb9;

  /* ── festive palette ──────────────────────────────────────── */
  --primary:#ae0012;              /* deep cranberry */
  --primary-container:#d42426;    /* classic Santa red */
  --on-primary:#ffffff;
  --primary-fixed:#ffdad6;
  --on-primary-fixed:#410002;

  --evergreen:#2f5233;
  --secondary:#436746;
  --secondary-container:#c4edc3;
  --on-secondary-fixed:#002108;
  --on-secondary-variant:#2b4e30;

  --royal:#005daa;                /* Rotary blue */
  --tertiary:#00569e;
  --tertiary-container:#276fbd;
  --tertiary-fixed:#d4e3ff;
  --on-tertiary-fixed:#001c3a;

  --gold:#f7a81b;
  --gold-deep:#a86f00;

  --error:#ba1a1a;
  --error-container:#ffdad6;
  --on-error-container:#93000a;

  /* ── type ─────────────────────────────────────────────────── */
  --font-display:'Literata',Georgia,'Iowan Old Style','Times New Roman',serif;
  --font-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* ── shape ────────────────────────────────────────────────── */
  --r-xs:.25rem;
  --r-sm:.5rem;
  --r-md:.75rem;
  --r-lg:1rem;
  --r-xl:1.5rem;
  --r-full:9999px;

  /* ── depth: ambient, tinted Rotary blue so it never looks grey ── */
  --shadow-tint:0,93,170;
  --sh-1:0 1px 2px rgba(var(--shadow-tint), .05), 0 2px 8px rgba(var(--shadow-tint), .05);
  --sh-2:0 2px 4px rgba(var(--shadow-tint), .05), 0 8px 24px rgba(var(--shadow-tint), .08);
  --sh-3:0 4px 8px rgba(var(--shadow-tint), .06), 0 18px 48px rgba(var(--shadow-tint), .11);

  /* ── layout ───────────────────────────────────────────────── */
  --wrap:1200px;
  --gutter:24px;
  --ease:cubic-bezier(.22,.9,.3,1);
}

*,*::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 16px/24px var(--font-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--tertiary)}

h1,h2,h3{font-family:var(--font-display); margin:0 0 .5em; line-height:1.2}
p{margin:0 0 1em}

.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:-9999px;top:0;background:var(--primary-container);color:#fff;padding:12px 18px;z-index:99;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--tertiary-container); outline-offset:3px; border-radius:var(--r-xs)}

/* ── snow canvas ───────────────────────────────────────────────────────── */
/* Above the opaque section bands (z-index 3), below header (20) and toast (40) */
#snow{position:fixed; inset:0; pointer-events:none; z-index:15}
#snow[hidden]{display:none}

/* ── top bar ───────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--surface-highest);
  box-shadow:var(--sh-1);
}
.topbar-in{display:flex; align-items:center; gap:12px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; margin-right:auto}
.brand-mark{display:grid; place-items:center; flex:none; position:relative}
.brand-txt{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.brand-txt b{
  font-family:var(--font-display); font-size:16px; font-weight:700;
  color:var(--on-surface); white-space:nowrap;
}
.brand-txt i{
  font-style:normal; font-size:11px; font-weight:600; color:var(--primary-container);
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
}
/* the full wordmark does not fit beside three actions on a small phone */
@media(max-width:430px){
  .brand-txt b{font-size:15px}
  .brand-txt i{font-size:10px; letter-spacing:.03em}
  .icon-btn{width:38px;height:38px;font-size:15px}
  .topbar-in{gap:8px}
}
@media(max-width:360px){ .brand-txt i{display:none} }
.topbar-actions{display:flex; align-items:center; gap:8px}

.icon-btn{
  width:42px;height:42px;border-radius:var(--r-sm);flex:none;
  background:var(--surface-low); border:1px solid var(--surface-highest);
  color:var(--on-surface); font-size:17px; cursor:pointer;
  transition:.2s var(--ease); box-shadow:inset 0 -2px 0 rgba(0,0,0,.06);
}
.icon-btn:hover{background:var(--secondary-container); border-color:var(--secondary)}
.icon-btn[aria-pressed="false"]{opacity:.45}

/* chunky, tactile, toy-like: 2px inner bottom border */
.btn{
  display:inline-block; padding:14px 26px; border-radius:var(--r-full);
  font-family:var(--font-body); font-weight:600; font-size:16px;
  text-decoration:none; border:0; cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px); box-shadow:none !important}
.btn-sm{padding:10px 18px; font-size:14px}
.btn-gold{background:var(--gold); color:#3a2600; 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-red{background:var(--primary-container); color:#fff; box-shadow:inset 0 -3px 0 rgba(0,0,0,.22), var(--sh-1)}
.btn-ghost{background:transparent; color:var(--on-surface); border:1.5px solid var(--outline)}
.btn-ghost:hover{background:var(--surface-low)}

/* ── alert bar ─────────────────────────────────────────────────────────── */
.alert-bar{
  background:var(--error-container); color:var(--on-error-container);
  padding:14px 16px; text-align:center; font-size:15px;
  position:relative; z-index:19; border-bottom:1px solid rgba(147,0,10,.2);
}
.alert-bar b{display:block; font-family:var(--font-display)}

/* ══════════════ HERO — bright winter morning ══════════════ */
.hero{
  position:relative; overflow:hidden; padding:40px 0 64px;
  background:linear-gradient(180deg, var(--tertiary-fixed) 0%, #eaf2ff 45%, var(--surface) 100%);
}
.hero-sky{position:absolute; inset:0; z-index:0; pointer-events:none}
/* soft drifting clouds */
.hero-sky::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(38px 16px at 14% 20%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(52px 20px at 20% 22%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(44px 18px at 68% 14%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(60px 22px at 76% 17%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(40px 16px at 44% 30%, rgba(255,255,255,.75), transparent 70%);
}
.moon{ /* winter sun */
  position:absolute; top:26px; right:9%; width:74px; height:74px; border-radius:50%;
  background:radial-gradient(circle at 36% 34%, #fff6dd, var(--gold));
  box-shadow:0 0 60px 22px rgba(247,168,27,.28);
}
.hills{display:none}
/* The team flies left to right, so the rightmost glyph leads. Written in
   reading order the sleigh would be towing the reindeer, so the whole team is
   mirrored: reindeer end up in front, facing the way they are going. */
.flyby-team{display:inline-block; transform:scaleX(-1)}
.flyby{
  position:absolute; top:64px; left:-200px; font-size:32px; letter-spacing:-6px;
  filter:drop-shadow(0 4px 8px rgba(var(--shadow-tint), .25));
  animation:fly 26s linear infinite;
}
@keyframes fly{
  0%{transform:translate(-220px,40px) scale(.85)}
  45%{transform:translate(52vw,-14px) scale(1.05)}
  100%{transform:translate(115vw,34px) scale(.85)}
}
/* On a phone the sun sat on top of the eyebrow line — shrink it, tuck it into
   the corner, and start the copy below it. */
@media(max-width:640px){
  .hero{padding-top:76px}
  .moon{width:56px; height:56px; top:8px; right:5%; box-shadow:0 0 44px 16px rgba(247,168,27,.28)}
}
.hero-in{position:relative; z-index:1; text-align:center}
.eyebrow{
  font-size:14px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--primary); margin-bottom:14px;
}
.hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px, 10vw, 48px); line-height:1.12; letter-spacing:-.02em;
  margin-bottom:20px; color:var(--on-surface);
}
.glow{
  color:var(--primary-container);
  text-shadow:0 2px 0 #fff, 0 4px 14px rgba(212,36,38,.22);
}

/* ── live status card ──────────────────────────────────────────────────── */
.status{
  background:var(--surface-lowest);
  border:1px solid var(--surface-highest);
  border-radius:var(--r-xl); padding:24px 22px 22px;
  box-shadow:var(--sh-3); text-align:left;
  max-width:580px; margin:0 auto; position:relative; overflow:hidden;
}
/* status colour = the chip language: transit green, parked red, heading blue */
.status[data-state="live"]{background:var(--secondary-container); border-color:var(--secondary)}
.status[data-state="today"]{background:var(--primary-fixed); border-color:var(--primary-container)}
.status[data-state="idle"]{background:var(--tertiary-fixed); border-color:var(--tertiary-container)}
.status[data-state="over"]{background:var(--surface-low)}

.status-head{display:flex; align-items:center; gap:9px; margin-bottom:10px}
.dot{width:11px;height:11px;border-radius:50%;background:var(--outline); flex:none}
.status[data-state="live"] .dot{background:var(--evergreen); animation:pulse 1.5s ease-out infinite}
.status[data-state="today"] .dot{background:var(--primary-container)}
.status[data-state="idle"] .dot{background:var(--tertiary)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(47,82,51,.5)}
  100%{box-shadow:0 0 0 15px rgba(47,82,51,0)}
}
.status-label{
  font-size:14px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--on-surface-variant);
}
.status[data-state="live"] .status-label{color:var(--on-secondary-variant)}
.status[data-state="today"] .status-label{color:var(--primary)}
.status[data-state="idle"] .status-label{color:var(--tertiary)}
.status-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,6vw,32px); line-height:1.2; margin:0 0 6px; color:var(--on-surface);
}
.status-sub{color:var(--on-surface-variant); font-size:16px; line-height:24px; margin:0}

.countdown{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:20px 0 4px}
/* JS owns [hidden] on the countdown (out-now / season-over states hide it).
   The rule above beats the UA [hidden] rule, so restate it here. */
.countdown[hidden]{display:none}
.cd{
  background:rgba(255,255,255,.75); border:1px solid rgba(0,0,0,.07);
  border-radius:var(--r-sm); padding:10px 4px; text-align:center;
}
.cd b{
  display:block; font-family:var(--font-display); font-size:clamp(20px,6vw,28px);
  font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1;
}
.cd span{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--on-surface-variant)}

.status-actions{display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; position:relative; z-index:1}
.status-actions .btn{padding:12px 20px; font-size:15px}

.hero-quick{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:24px}
.chip-link{
  background:var(--surface-lowest); border:1px solid var(--surface-highest);
  color:var(--on-surface); text-decoration:none; padding:11px 18px;
  border-radius:var(--r-full); font-size:15px; font-weight:600;
  box-shadow:var(--sh-1); transition:.2s var(--ease);
}
.chip-link:hover{background:var(--secondary-container); border-color:var(--secondary); transform:translateY(-2px)}

/* ── bands ─────────────────────────────────────────────────────────────── */
.band{padding:64px 0; position:relative; z-index:3; background:var(--surface)}
/* anchor jumps must clear the sticky header + fairy lights */
section[id]{scroll-margin-top:96px}
@media(min-width:900px){ .band{padding:80px 0} }
/* soft mint band — keeps the red/green/gold rhythm on a light page */
.band-dark{
  background:linear-gradient(180deg,#f2f9f3,#e9f4ea);
  border-block:1px solid #d5e8d7;
}
.band-gold{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 24px, transparent 24px 48px),
    linear-gradient(140deg,var(--gold),#ffc961);
  color:#3a2600;
}
.band-gold a{color:var(--primary)}
.h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,6.5vw,32px); line-height:1.25; color:var(--on-surface);
}
@media(min-width:700px){ .h2{font-size:32px; line-height:40px} }
.h2::after{content:" 🎄"; font-size:.72em}
#donate .h2::after{content:" 🎁"}
#faq .h2::after{content:" ❓"}
#about .h2::after{content:" ⚙️"}
.h3{font-family:var(--font-display); font-size:24px; line-height:32px; font-weight:600; margin-top:40px}
.lede{color:var(--on-surface-variant); font-size:18px; line-height:28px; max-width:62ch; margin-bottom:28px}
.lede-dark{color:#5a3d06}
.empty{color:var(--on-surface-variant); font-style:italic}

/* ── search ────────────────────────────────────────────────────────────── */
.search{position:relative; max-width:580px}
.search-ico{position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:18px; opacity:.6}
#finderInput{
  width:100%; padding:18px 48px 18px 50px; font-size:18px;
  font-family:var(--font-body); color:var(--on-surface);
  background:var(--surface); border:1px solid var(--outline-variant);
  border-radius:var(--r-full); transition:.2s var(--ease); box-shadow:var(--sh-1);
}
#finderInput::placeholder{color:var(--outline)}
#finderInput:focus{background:#fff; border-color:var(--evergreen); border-width:1px; outline:none; box-shadow:0 0 0 3px rgba(47,82,51,.16)}
.search-clear{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:var(--surface-highest); color:var(--on-surface); font-size:13px;
}
.suggests{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.suggests button{
  background:var(--surface-lowest); border:1px solid var(--surface-highest);
  color:var(--on-surface-variant); padding:8px 14px; border-radius:var(--r-full);
  font-size:14px; font-weight:600; cursor:pointer; font-family:var(--font-body);
  transition:.18s var(--ease);
}
.suggests button:hover{color:var(--evergreen); border-color:var(--evergreen); background:var(--secondary-container)}
.finder-result{margin-top:24px; display:grid; gap:12px}
.fr-none{
  background:var(--error-container); border:1px solid rgba(147,0,10,.25);
  color:var(--on-error-container); padding:20px; border-radius:var(--r-md);
}
.fr-none b{display:block; margin-bottom:6px; font-family:var(--font-display); font-size:19px}
.fr-none a{color:var(--on-error-container)}

/* ── map ───────────────────────────────────────────────────────────────── */
.map-shell{
  border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--surface-highest);
  box-shadow:var(--sh-2); background:#fff; position:relative;
}
#mapSvg{display:block; width:100%; height:auto; touch-action:manipulation}
.pin{cursor:pointer}
.pin-hit{fill:transparent}
.pin-body{transition:transform .2s var(--ease)}
.pin:hover .pin-body,.pin:focus .pin-body{transform:translateY(-4px)}
.pin-label{
  font:600 15px var(--font-body); fill:#1c3352; paint-order:stroke;
  stroke:#fff; stroke-width:5px; stroke-linejoin:round; pointer-events:none;
}
.pin-count{font:700 13px var(--font-body); fill:#fff; pointer-events:none}
.map-legend{
  display:flex; flex-wrap:wrap; gap:16px; padding:14px 18px;
  background:var(--surface-low); font-size:14px; font-weight:600;
  color:var(--on-surface-variant); border-top:1px solid var(--surface-highest);
}
.map-legend span{display:flex; align-items:center; gap:7px}
.lg{width:12px;height:12px;border-radius:50%;display:inline-block}
.lg-route{background:var(--evergreen)}
.lg-venue{background:var(--tertiary-container)}
.lg-live{background:var(--primary-container); box-shadow:0 0 0 4px rgba(212,36,38,.22)}

.map-card{
  margin-top:16px; background:var(--surface-lowest);
  border:1px solid var(--surface-highest); border-radius:var(--r-lg); padding:20px;
  box-shadow:var(--sh-2); animation:rise .3s var(--ease);
}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1;transform:none}}
.map-card.flash{animation:rise .3s var(--ease), flash 1.4s var(--ease)}
@keyframes flash{
  0%{box-shadow:0 0 0 3px var(--primary-container), 0 0 34px rgba(212,36,38,.35)}
  100%{box-shadow:var(--sh-2)}
}
.map-card .mc-close{
  float:right; background:var(--surface-low); border:1px solid var(--surface-highest);
  color:var(--on-surface); width:34px; height:34px; border-radius:50%; cursor:pointer;
  font-size:14px; line-height:1;
}
.map-card .mc-close:hover{background:var(--error-container); border-color:var(--error)}
.map-card h3{margin-bottom:4px; font-size:22px}
.map-card .mc-date{color:var(--primary); font-weight:600; font-size:14px; margin-bottom:12px}
.pin.is-sel .pin-body{transform:translateY(-4px)}

/* ── filters + calendar ────────────────────────────────────────────────── */
.filterbar{
  position:sticky; top:88px; z-index:12; margin:0 -8px 16px; padding:12px 8px 10px;
  background:rgba(248,249,250,.94); backdrop-filter:blur(12px);
  border-radius:var(--r-md);
}
.band-dark .filterbar{background:rgba(240,248,241,.94)}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:0}
.filter{
  background:var(--surface-lowest); border:1px solid var(--surface-highest);
  color:var(--on-surface-variant); padding:10px 18px; border-radius:var(--r-full);
  cursor:pointer; font-family:var(--font-body); font-size:14px; font-weight:600;
  transition:.18s var(--ease); box-shadow:var(--sh-1);
}
.filter:hover{color:var(--evergreen); border-color:var(--secondary)}
.filter.is-on{
  background:var(--evergreen); border-color:var(--evergreen); color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.2);
}
.stop-count{margin:10px 0 0; font-size:14px; font-weight:600; color:var(--on-surface-variant)}
.stop-count b{color:var(--primary)}

@media(max-width:640px){
  .filters{
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
  }
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none; scroll-snap-align:start; padding:9px 15px}
  .filterbar{padding:10px 8px 8px}
  .stop-count{margin-top:8px; font-size:13px}
}

.calwrap{margin-bottom:28px}
.calendar{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
  background:var(--surface-lowest); border:1px solid var(--surface-highest);
  border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-1);
}
.cal-dow{
  text-align:center; font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--on-surface-variant); padding-bottom:2px;
}
.cal-day{
  aspect-ratio:1; border-radius:var(--r-sm); border:1px solid var(--surface-highest);
  background:var(--surface-low); color:var(--outline);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-size:13px; font-weight:600; font-family:var(--font-body);
  cursor:default; padding:0; transition:.18s var(--ease); position:relative;
}
/* advent doors */
.cal-day.has-stop{
  cursor:pointer; color:#fff; background:var(--evergreen); border-color:var(--evergreen);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.18), inset 2px 2px 0 rgba(255,255,255,.18);
}
.cal-day.has-venue{background:var(--tertiary-container); border-color:var(--tertiary)}
.cal-day.has-both{background:linear-gradient(150deg,var(--evergreen) 48%,var(--tertiary-container) 52%)}
.cal-day.has-stop::after{
  content:""; position:absolute; left:3px; top:20%; bottom:20%; width:2px;
  background:rgba(255,255,255,.35); border-radius:2px;
}
.cal-day.has-stop:hover{transform:scale(1.09) rotate(-2deg); box-shadow:var(--sh-2)}
.cal-day.is-today{box-shadow:0 0 0 3px var(--gold)}
.cal-day.is-past{opacity:.4}
.cal-day .cal-ico{font-size:11px; line-height:1}
.cal-day.empty-cell{border:0; background:none}
.cal-key{font-size:13px; color:var(--on-surface-variant); margin-top:12px; display:flex; flex-wrap:wrap; gap:14px}
.ck{width:11px;height:11px;border-radius:3px;display:inline-block;vertical-align:-1px;margin-right:5px}
.ck-route{background:var(--evergreen)}
.ck-venue{background:var(--tertiary-container)}
.ck-none{background:var(--surface-highest)}

/* ── stop cards ────────────────────────────────────────────────────────── */
.stops{display:grid; gap:16px}
@media(min-width:760px){ .stops{grid-template-columns:1fr 1fr} }

.stop{
  background:var(--surface-lowest);
  border:1px solid var(--surface-highest); border-radius:var(--r-sm);
  padding:20px 20px 18px; position:relative; overflow:hidden;
  box-shadow:var(--sh-1); transition:.22s var(--ease); scroll-margin-top:110px;
}
.stop:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
/* candy-cane accent down the leading edge */
.stop::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
  background:repeating-linear-gradient(45deg,var(--evergreen) 0 8px,#eaf4ea 8px 16px);
}
.stop[data-type="venue"]::before{
  background:repeating-linear-gradient(45deg,var(--tertiary-container) 0 8px,#e6f0ff 8px 16px);
}
.stop.is-live{border-color:var(--primary-container); box-shadow:0 0 0 2px rgba(212,36,38,.18), var(--sh-2)}
.stop.is-live::before{background:repeating-linear-gradient(45deg,var(--primary-container) 0 8px,#fff 8px 16px)}
.stop.is-past{opacity:.55}
.stop.is-next{border-color:var(--gold); box-shadow:0 0 0 2px rgba(247,168,27,.28), var(--sh-1)}

.stop-top{display:flex; align-items:flex-start; gap:12px; margin-bottom:8px}
.stop-date{
  flex:none; width:56px; text-align:center; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--surface-highest); background:var(--surface-low);
}
.stop-date .sd-m{
  display:block; background:var(--primary-container); color:#fff; font-size:10px;
  font-weight:600; letter-spacing:.05em; padding:3px 0; text-transform:uppercase;
}
.stop-date .sd-d{display:block; font-family:var(--font-display); font-size:23px; font-weight:700; padding:4px 0 2px; line-height:1}
.stop-date .sd-w{display:block; font-size:10px; color:var(--on-surface-variant); padding-bottom:4px; text-transform:uppercase; letter-spacing:.05em}
.stop-head{flex:1; min-width:0}
.stop-head h3{font-family:var(--font-display); font-size:20px; line-height:1.25; margin:0 0 3px; font-weight:700}
.stop-time{font-size:14px; color:var(--primary); font-weight:600; margin:0}
.stop-badge{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 11px; border-radius:var(--r-full); margin-top:7px;
}
.b-live{background:var(--secondary-container); color:var(--on-secondary-fixed)}
.b-next{background:var(--gold); color:#3a2600}
.b-past{background:var(--surface-high); color:var(--on-surface-variant)}

.fav{
  flex:none; width:40px;height:40px;border-radius:var(--r-sm); cursor:pointer;
  background:var(--surface-low); border:1px solid var(--surface-highest);
  font-size:16px; color:var(--outline); transition:.2s var(--ease);
}
.fav:hover{background:var(--gold); color:#3a2600}
.fav[aria-pressed="true"]{background:var(--gold); border-color:var(--gold-deep); color:#3a2600}

.stop-note{font-size:15px; line-height:23px; color:var(--on-surface-variant); margin:12px 0 0}
.streets{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; padding:0}
.streets li{list-style:none}
.street{
  display:inline-block; font-size:13px; padding:5px 12px; border-radius:var(--r-full);
  background:var(--secondary-container); border:1px solid #a9d1a8; color:var(--on-secondary-fixed);
}
.street.hit{background:var(--gold); border-color:var(--gold-deep); color:#3a2600; font-weight:700}
.streets-head{
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--on-surface-variant); margin:16px 0 0;
}
.stop-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.mini{
  background:var(--surface-low); border:1px solid var(--surface-highest);
  color:var(--on-surface); padding:9px 14px; border-radius:var(--r-full);
  font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-body);
  text-decoration:none; display:inline-flex; align-items:center; gap:5px;
  transition:.18s var(--ease);
}
.mini:hover{background:var(--secondary-container); border-color:var(--secondary)}

.stops-compact .stop{padding:16px}
.stops-compact .streets{display:none}

/* ── donate ────────────────────────────────────────────────────────────── */
.donate-grid{display:grid; gap:32px}
@media(min-width:820px){ .donate-grid{grid-template-columns:1.15fr .85fr; align-items:center} }
.thermo-box{
  background:rgba(255,255,255,.72); border-radius:var(--r-xl); padding:24px;
  border:1px solid rgba(255,255,255,.9); box-shadow:var(--sh-2);
}
.thermo-cap{font-size:14px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#6b4a06; margin:0 0 6px}
.thermo-num{font-family:var(--font-display); font-size:clamp(30px,9vw,44px); font-weight:700; margin:0 0 16px; line-height:1}
.thermo-num small{font-family:var(--font-body); font-size:16px; font-weight:400; color:#6b4a06}
.thermo{height:28px; background:rgba(0,0,0,.14); border-radius:var(--r-full); overflow:hidden; position:relative}
.thermo-fill{
  height:100%; width:0; border-radius:var(--r-full); position:relative;
  background:linear-gradient(90deg,var(--evergreen),#5a9c60);
  transition:width 1.6s var(--ease);
}
.thermo-santa{position:absolute; right:-2px; top:50%; transform:translateY(-50%); font-size:20px}
.thermo-foot{font-size:13px; color:#6b4a06; margin:12px 0 0}
.fineprint{font-size:14px; color:#5a3d06; margin-top:16px}
.fineprint a{color:var(--primary)}

/* ── about ─────────────────────────────────────────────────────────────── */
.prose{max-width:68ch}
.prose p{color:var(--on-surface-variant); font-size:18px; line-height:28px}
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:32px 0 6px}
@media(min-width:760px){ .stat-grid{grid-template-columns:repeat(4,1fr)} }
.stat{
  background:var(--surface-lowest); border:1px solid var(--surface-highest);
  border-radius:var(--r-md); padding:22px 14px; text-align:center;
  box-shadow:var(--sh-1); border-top:4px solid var(--royal);
}
.stat b{
  display:block; font-family:var(--font-display); font-size:clamp(26px,7vw,34px);
  font-weight:700; color:var(--royal); font-variant-numeric:tabular-nums;
}
.stat span{font-size:14px; color:var(--on-surface-variant); line-height:20px; display:block; margin-top:6px}

.cause-grid{display:grid; gap:14px; margin-top:20px}
@media(min-width:700px){ .cause-grid{grid-template-columns:1fr 1fr} }
.cause{
  display:flex; gap:14px; padding:18px; background:var(--surface-lowest);
  border:1px solid var(--surface-highest); border-left:4px solid var(--evergreen);
  border-radius:var(--r-sm); box-shadow:var(--sh-1); transition:.2s var(--ease);
}
.cause:hover{box-shadow:var(--sh-2); transform:translateY(-2px)}
.cause .ci{font-size:26px; line-height:1; flex:none}
.cause b{display:block; margin-bottom:4px; font-family:var(--font-display); font-size:17px}
.cause p{margin:0; font-size:15px; line-height:23px; color:var(--on-surface-variant)}

.meet-card{
  margin-top:40px; padding:28px; border-radius:var(--r-xl);
  background:
    repeating-linear-gradient(45deg, rgba(212,36,38,.05) 0 16px, transparent 16px 32px),
    var(--secondary-container);
  border:1px solid #a9d1a8; box-shadow:var(--sh-1);
}
.meet-card h3{margin-top:0; font-size:24px; color:var(--on-secondary-fixed)}
.meet-card p{font-size:16px; color:var(--on-secondary-variant)}

/* ── faq ───────────────────────────────────────────────────────────────── */
.faq{display:grid; gap:12px; max-width:820px}
.faq details{
  background:var(--surface-lowest); border:1px solid var(--surface-highest);
  border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--sh-1);
}
.faq summary{
  padding:18px 20px; cursor:pointer; font-family:var(--font-display);
  font-weight:600; font-size:17px; list-style:none;
  display:flex; justify-content:space-between; gap:12px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:24px; color:var(--primary-container); font-weight:400; line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details[open]{border-color:var(--secondary)}
.faq details[open] summary{background:var(--secondary-container)}
.faq .fa{padding:16px 20px 18px; color:var(--on-surface-variant); font-size:16px; line-height:24px; margin:0}

/* ── footer ────────────────────────────────────────────────────────────── */
.foot{
  padding:56px 0 90px; text-align:center;
  background:var(--footer-bg, var(--evergreen));
  color:var(--on-footer, #eaf4ea);
  position:relative; z-index:3; overflow:hidden;
}
.foot-logo{font-size:32px; margin:0 0 12px; letter-spacing:4px}
.foot p{margin:0 0 8px; font-size:15px}
.foot b{font-family:var(--font-display)}
.foot a{color:var(--footer-link, #ffd98a)}
/* Needs .foot to outrank `.foot p{margin:0 0 8px}` above, which is one
   specificity point higher and was resetting the inline margins - so the
   56ch block sat hard left with its text centred inside it. */
.foot .foot-note{font-size:13px; color:var(--on-footer-variant, #b6cfb8); max-width:56ch; margin-inline:auto; line-height:20px}

/* ── preview dock ──────────────────────────────────────────────────────── */
.preview-dock{position:fixed; right:14px; bottom:14px; z-index:30; text-align:right}
.preview-tab{
  background:var(--surface-lowest); color:var(--on-surface-variant);
  border:1px solid var(--surface-highest); padding:9px 15px; border-radius:var(--r-full);
  font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-body);
  box-shadow:var(--sh-2);
}
.preview-tab:hover{color:var(--on-surface); border-color:var(--outline)}
.preview-panel{
  margin-top:8px; background:var(--surface-lowest); border:1px solid var(--surface-highest);
  border-radius:var(--r-md); padding:16px; width:256px; text-align:left; box-shadow:var(--sh-3);
}
.preview-panel label{
  font-size:12px; color:var(--on-surface-variant); display:block; margin-bottom:6px;
  font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
#previewDate{
  width:100%; padding:10px; border-radius:var(--r-sm); font-family:var(--font-body);
  font-size:14px; background:var(--surface); border:1px solid var(--outline-variant);
  color:var(--on-surface);
}
.preview-btns{display:flex; gap:8px; margin-top:10px}
.preview-btns .btn{flex:1}
.preview-note{font-size:12px; color:var(--outline); margin:10px 0 0; line-height:17px}
body.is-preview .topbar{box-shadow:inset 0 -3px 0 var(--primary-container)}

/* ── toast ─────────────────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%);
  background:var(--evergreen); color:#fff; padding:14px 24px; border-radius:var(--r-full);
  font-size:15px; font-weight:600; z-index:40; box-shadow:var(--sh-3);
  transition:transform .35s var(--ease); max-width:calc(100% - 32px); text-align:center;
}
.toast.show{transform:translate(-50%,0)}

/* ═══════════════ FESTIVE LAYER ═══════════════ */

/* fairy lights strung under the header */
/* Sticky, so it reads as part of the header. The white-to-transparent wash is
   load-bearing: without it, headings scrolling underneath collide with the
   bulbs and the whole strip looks like a rendering glitch. */
.lights{
  position:sticky; top:64px; z-index:18; height:26px; 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 40%, rgba(248,249,250,.75) 70%, rgba(248,249,250,0) 100%);
}
.lights::before{
  content:""; position:absolute; left:0; right:0; top:1px; height:13px;
  border-bottom:2px solid rgba(47,82,51,.3);
  border-radius:0 0 50% 50%/0 0 13px 13px;
}
.bulb{
  width:9px; height:13px; border-radius:0 0 50% 50%/0 0 62% 62%;
  margin-top:8px; position:relative; flex:none;
  background:var(--c); box-shadow:0 2px 8px 1px var(--c);
  animation:blink 3.2s ease-in-out infinite; animation-delay:var(--d);
}
.bulb::before{
  content:""; position:absolute; top:-4px; left:2.5px;
  width:4px; height:4px; background:#7d9480; border-radius:1px;
}
@keyframes blink{0%,100%{opacity:1}45%{opacity:.35}}

/* snowy skyline */
.skyline{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:190px}
.sky-hill{fill:#dfeaf7}
.sky-trees path{fill:var(--evergreen)}
.sky-build{fill:#c9d9ea}
.sky-snowman circle{fill:#ffffff; stroke:#cfdcea; stroke-width:1.5}
.sky-snowman rect{fill:var(--primary-container)}
.sky-snow{fill:#ffffff}

/* hanging baubles */
.baubles{position:absolute; inset:0 0 auto 0; height:0}
.bauble{
  position:absolute; top:0; width:26px; height:26px; border-radius:50%;
  transform-origin:50% -46px; animation:swing 4.6s ease-in-out infinite;
  box-shadow:0 3px 8px rgba(var(--shadow-tint), .2);
}
.bauble::before{
  content:""; position:absolute; left:50%; top:-46px; width:1.5px; height:46px;
  background:rgba(47,82,51,.35);
}
.bauble::after{
  content:""; position:absolute; top:5px; left:6px; width:7px; height:5px;
  border-radius:50%; background:rgba(255,255,255,.75);
}
.b1{left:11%;  background:radial-gradient(circle at 32% 30%,#ef5350,var(--primary)); animation-delay:-.4s}
.b2{left:27%;  background:radial-gradient(circle at 32% 30%,#ffd980,var(--gold-deep)); animation-delay:-1.9s; width:20px;height:20px}
.b3{right:24%; background:radial-gradient(circle at 32% 30%,#7fc98d,var(--evergreen)); animation-delay:-1.1s; width:22px;height:22px}
.b4{right:9%;  background:radial-gradient(circle at 32% 30%,#8fc4f5,var(--tertiary)); animation-delay:-2.7s}
@keyframes swing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* "sleeps until Christmas" */
.sleeps{
  display:inline-block; margin:0 auto 22px; padding:10px 22px; border-radius:var(--r-full);
  background:var(--surface-lowest); border:1px solid var(--outline-variant);
  font-size:15px; font-weight:600; color:var(--primary); box-shadow:var(--sh-1);
}
.sleeps:empty{display:none}

/* snow drift above the footer */
.drift{position:absolute; top:-1px; left:0; width:100%; height:52px; display:block; pointer-events:none}
.drift path{fill:var(--footer-bg, var(--evergreen))}
#faq{padding-bottom:90px}


@media(max-width:520px){
  .baubles{display:none}
  .lights{height:20px}
  .bulb{width:8px;height:11px}
}

/* ── motion / print ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  /* NB: the snow canvas is deliberately NOT display:none. It starts off for
     reduced-motion users, but the ❄️ toggle must still work — JS owns [hidden]. */
  .bulb{opacity:1 !important}
  .bauble{transform:none !important}
}
@media print{
  #snow,.preview-dock,.topbar-actions,.hero-sky,.map-shell,.filterbar,
  .lights,.baubles,.skyline,.drift,.sleeps{display:none}
  body{background:#fff; color:#000}
  .band,.band-dark,.band-gold,.foot{background:#fff !important; color:#000 !important}
  .stop{break-inside:avoid; border:1px solid #999; box-shadow:none}
  .street{border:1px solid #999}
  .h2::after{content:"" !important}
}

/* The club name lives inside the H1 rather than in a paragraph above it: this
   page owns "{club} santa sleigh" and the town page owns "santa sleigh {town}".
   Styled to match the old .eyebrow exactly, so nothing moved on screen. */
.hero h1 .h1-club{
  display:block;
  font-family:var(--font-body,inherit);
  font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--primary);margin-bottom:14px;
}
.hero h1 .h1-big{display:block}

.stop-townlink{margin:var(--s5,20px) 0 0;text-align:center}
.stop-townlink a{font-weight:600}

/* ── live sleigh map (the paid add-on) ─────────────────────────────────── */
.band-live{background:var(--surface-lowest);border-block:1px solid var(--hairline,rgba(0,0,0,.08))}
.livemap-canvas{
  height:min(62vh,460px); width:100%; margin:var(--s5,20px) 0 0;
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--surface-highest); box-shadow:var(--sh-2);
  background:var(--surface);
}
.livemap-meta{margin:12px 0 0}
.livemap-near{margin:14px 0 0; display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* The pin never rotates. A rotated asymmetric glyph is upside down or
   mirrored on half of all headings, which is how Santa ended up flying
   backwards three times on this site already - the arrow carries direction. */
.sleigh-pin{position:relative; width:46px; height:46px}
.sleigh-pin-glyph{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:26px; line-height:1;
  background:var(--surface-lowest); border-radius:50%;
  border:3px solid var(--primary); box-shadow:0 3px 12px rgba(0,0,0,.28);
}
.sleigh-pin-arrow{
  position:absolute; inset:0; display:block; transform-origin:50% 50%;
  transition:transform .5s ease-out;
}
.sleigh-pin-arrow::before{
  content:''; position:absolute; left:50%; top:-9px; translate:-50% 0;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom:10px solid var(--primary);
}
/* Leaflet gives every marker a transition already; ours would fight it. */
.leaflet-marker-icon.sleigh-pin-wrap{background:none; border:0}
.leaflet-container{font:inherit}
.leaflet-container a{color:var(--primary)}
.live-dot{
  display:inline-block; width:12px; height:12px; border-radius:50%;
  background:var(--primary); margin-right:9px; vertical-align:middle;
  box-shadow:0 0 0 0 rgba(212,36,38,.55); animation:livePulse 1.9s ease-out infinite;
}
@keyframes livePulse{
  70%{box-shadow:0 0 0 13px rgba(212,36,38,0)}
  100%{box-shadow:0 0 0 0 rgba(212,36,38,0)}
}
/* A pulsing dot is decoration, not information. */
@media(prefers-reduced-motion:reduce){
  .live-dot{animation:none}
  .sleigh-pin-arrow{transition:none}
}