/* Spooksconsin — Midnight is the default theme; Dusk is opt-in. The page is
   never a plain white or cream sheet. Contrast targets WCAG 2.2 AA in both. */

:root {
  --sky-top: #0B1030;
  --sky-mid: #131C4A;
  --sky-horizon: #2A3A78;
  --silhouette-far: #1A2148;
  --silhouette-near: #070A1C;
  --surface: rgba(18, 24, 58, 0.82);
  --surface-solid: #121A3A;
  --surface-raised: rgba(28, 36, 78, 0.92);
  --border: #34408A;
  --text: #F3EDE2;
  /* The brief's #9AA3C7 measures 4.27:1 against the lightest part of the page
     gradient, just under AA. Lifted to the nearest value that clears it. */
  --text-muted: #A2ABCD;
  --moon: #E6EEF8;
  --lantern: #F7C948;
  --pumpkin-start: #FF8A3D;
  --pumpkin-end: #F2B544;
  --pumpkin: #FF8A3D;
  --gold: #F2B544;
  --moonlight: #9DB8E8;
  --on-primary: #0B1030;

  /* Brand colours, used for icon and map-pin fills. */
  --scare-0: #F2C14E;
  --scare-1: #FF8A3D;
  --scare-2: #A77BFF;
  --scare-3: #E5484D;
  /* Text variants. Ember red at 4.32:1 on the card surface just misses AA,
     so badge labels use a lighter tint; the icon keeps the brand colour. */
  --scare-0-ink: #F2C14E;
  --scare-1-ink: #FF8A3D;
  --scare-2-ink: #B48CFF;
  --scare-3-ink: #FF7B80;

  /* Display type colour, per theme. */
  --display-ink: #F2B544;

  --ok: #5FE39A;
  --warn: #F2B544;
  --bad: #FF7B80;

  --radius-card: 20px;
  --radius-pill: 9999px;
  --gutter: 16px;
  --maxw: 1200px;

  --font-display: 'Creepster', 'Jolly Lodger', system-ui, cursive;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-card: 0 4px 24px rgba(4, 7, 22, 0.45);
  --shadow-glow: 0 0 30px rgba(157, 184, 232, 0.22);
  --page-bg-start: var(--sky-top);
  --page-bg-mid: var(--sky-mid);
  --page-bg-end: var(--sky-horizon);
  color-scheme: dark;
}

/* Dusk: a sunset scene, still illustrated, never a plain page.
   The sunset gradient belongs to the illustrated scene, not to the page body.
   Running it behind all content put Dusk's dark text on anything from light
   orange to deep purple, which cannot meet AA at both ends. The page instead
   sits on a warm parchment that the scene rises out of. */
[data-theme='dusk'] {
  --sky-top: #F29E4C;
  --sky-mid: #8C4F8F;
  --sky-horizon: #2A2350;
  --page-bg-start: #FFF4E4;
  --page-bg-end: #F7DFC2;
  --silhouette-far: #3A2B52;
  --silhouette-near: #1E1630;
  --surface: #FFF4E4;
  --surface-solid: #FFF4E4;
  --surface-raised: #FFFBF3;
  --border: #E8CFA8;
  --text: #2A2320;
  --text-muted: #6E5A52;
  --moon: #FFF0D6;
  --moonlight: #5B4A9E;
  --on-primary: #2A2320;
  --ok: #17694A;
  --warn: #8A5A00;
  --bad: #B3262B;
  --scare-0: #8A6300;
  --scare-1: #B4531A;
  --scare-2: #6A3FC4;
  --scare-3: #B3262B;
  --scare-0-ink: #8A6300;
  --scare-1-ink: #B4531A;
  --scare-2-ink: #6A3FC4;
  --scare-3-ink: #B3262B;
  /* Gold display type is near-invisible on the light end of the sunset
     gradient (1.17:1), so Dusk uses a deep burnt umber instead. */
  --display-ink: #5C2A0E;
  --shadow-card: 0 4px 20px rgba(42, 35, 80, 0.18);
  --shadow-glow: 0 0 24px rgba(91, 74, 158, 0.18);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--page-bg-start);
  background-image: linear-gradient(180deg, var(--page-bg-start) 0%,
    var(--page-bg-mid, var(--page-bg-end)) 60%, var(--page-bg-end) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg { max-width: 100%; }
a { color: var(--moonlight); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

:focus-visible {
  outline: 3px solid var(--moonlight);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--on-primary);
  padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Typography ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 3.4vw, 1.9rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

/* Display type never drops below 28px, and is never red. */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 9vw, 5rem);
  color: var(--display-ink);
  text-shadow: 0 2px 24px rgba(11, 16, 48, .65);
}
.display--cream { color: var(--text); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .75rem;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--pumpkin); border-radius: 2px; }

.lede { font-size: 1.06rem; color: var(--text-muted); max-width: 46ch; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--gap, 1rem); }
.row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
main { display: block; min-height: 50vh; }

.section { padding-block: clamp(1.75rem, 4vw, 3rem); }
.section__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.section__head h2 { margin: 0; white-space: nowrap; }
.horizon { flex: 1; height: 16px; color: var(--border); min-width: 40px; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(7, 10, 28, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
[data-theme='dusk'] .site-header { background: rgba(255, 244, 228, .92); }

.site-header__bar {
  display: flex; align-items: center; gap: .75rem;
  min-height: 60px; padding-block: .5rem;
}

.logo {
  display: inline-flex; align-items: center; gap: .4rem;
  white-space: nowrap; flex-shrink: 0; text-decoration: none;
  color: var(--gold);
}
.logo__word {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 1.4rem; line-height: 1; color: var(--gold);
  display: inline-flex; align-items: center; white-space: nowrap;
}
.logo--compact .logo__word { font-size: 1.15rem; }
.logo__eyes { display: inline-flex; align-items: center; margin-inline: 1px; }
.logo:hover .logo__word { color: var(--pumpkin); }

.location-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-pill);
  padding: .4rem .8rem; font-size: .85rem; font-weight: 600;
  cursor: pointer; font-family: var(--font-body);
}
.location-pill:hover { border-color: var(--moonlight); }

.header-spacer { flex: 1; }

.nav-desktop { display: none; gap: .25rem; }
.nav-desktop a {
  color: var(--text-muted); text-decoration: none; font-weight: 600;
  font-size: .92rem; padding: .5rem .7rem; border-radius: var(--radius-pill);
}
.nav-desktop a:hover { color: var(--text); background: rgba(157,184,232,.1); }
.nav-desktop a[aria-current='page'] { color: var(--gold); background: rgba(242,181,68,.12); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
}
.icon-btn:hover { color: var(--gold); border-color: var(--gold); }

.nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding-inline: 5px;
  border-radius: var(--radius-pill); background: var(--pumpkin);
  color: var(--on-primary); font-size: .68rem; font-weight: 800; margin-left: .3rem;
}
.nav-count:empty, .nav-count[hidden] { display: none; }

/* Presenting sponsor line */
.presenting {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem 0 .45rem; font-size: .72rem; color: var(--text-muted);
  border-top: 1px solid rgba(52, 64, 138, .4);
}
.presenting img { height: 22px; width: auto; max-width: 120px; object-fit: contain; }
.sponsor-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 4px; padding: .05rem .3rem;
}

/* ── Bottom tab bar (mobile) ─────────────────────────────────────────────── */

.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
  display: flex; justify-content: space-around;
  background: rgba(7, 10, 28, .95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
[data-theme='dusk'] .tabbar { background: rgba(255, 244, 228, .96); }
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .5rem .75rem; min-width: 64px; min-height: 52px;
  color: var(--text-muted); font-size: .68rem; font-weight: 600; text-decoration: none;
}
.tabbar a[aria-current='page'] { color: var(--gold); }
body:has(.tabbar) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--font-heading); font-weight: 700; font-size: .95rem;
  border-radius: var(--radius-pill); padding: .65rem 1.4rem;
  border: none; cursor: pointer; text-decoration: none;
  min-height: 44px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn--primary {
  background: linear-gradient(135deg, var(--pumpkin-start), var(--pumpkin-end));
  color: var(--on-primary);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(255,138,61,.4); color: var(--on-primary); }
.btn--secondary {
  background: transparent; color: var(--moonlight);
  border: 1.5px solid var(--moonlight);
}
.btn--secondary:hover { background: rgba(157,184,232,.14); transform: translateY(-1px); }
.btn--ghost {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-body);
}
.btn--ghost:hover { border-color: var(--moonlight); color: var(--text); }
.btn--sm { padding: .4rem .9rem; font-size: .85rem; min-height: 36px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden;
  backdrop-filter: blur(10px); box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  display: flex; flex-direction: column; position: relative;
}
a.card, .card a.card__link { text-decoration: none; color: inherit; }
.card:hover { box-shadow: var(--shadow-glow); transform: translateY(-3px); border-color: var(--moonlight); }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--silhouette-far); }
.card__art, .card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Daytime photos get a vignette so they sit inside the night theme. */
.card__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(7,10,28,.55) 100%),
              linear-gradient(180deg, transparent 55%, rgba(7,10,28,.75) 100%);
}
.card__body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.card__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; margin: 0; line-height: 1.25; }
.card__meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; font-size: .82rem; color: var(--text-muted); }
.card__badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .3rem; }

.card__save {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(7,10,28,.65); border: 1px solid rgba(157,184,232,.35);
  color: var(--text-muted); cursor: pointer; backdrop-filter: blur(6px);
}
.card__save:hover, .card__save[aria-pressed='true'] { border-color: var(--pumpkin); color: var(--pumpkin); }

/* Rails scroll horizontally on mobile, grid on desktop. */
.rail { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 280px; scroll-snap-align: start; }

.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Badges, chips, pills ────────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  border-radius: var(--radius-pill); padding: .2rem .55rem;
  font-size: .75rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent;
}
.badge svg { flex-shrink: 0; }
.badge--scare-0 { color: var(--scare-0-ink); background: color-mix(in srgb, var(--scare-0) 14%, transparent); border-color: color-mix(in srgb, var(--scare-0) 38%, transparent); }
.badge--scare-1 { color: var(--scare-1-ink); background: color-mix(in srgb, var(--scare-1) 14%, transparent); border-color: color-mix(in srgb, var(--scare-1) 38%, transparent); }
.badge--scare-2 { color: var(--scare-2-ink); background: color-mix(in srgb, var(--scare-2) 16%, transparent); border-color: color-mix(in srgb, var(--scare-2) 40%, transparent); }
.badge--scare-3 { color: var(--scare-3-ink); background: color-mix(in srgb, var(--scare-3) 14%, transparent); border-color: color-mix(in srgb, var(--scare-3) 40%, transparent); }
.badge--neutral { color: var(--text-muted); background: rgba(157,184,232,.1); border-color: var(--border); }
.badge--owner { color: var(--lantern); background: rgba(247,201,72,.13); border-color: rgba(247,201,72,.4); }
.badge--free { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }

.status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; font-weight: 700; border-radius: var(--radius-pill);
  padding: .25rem .65rem;
}
.status--open { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.status--closed { color: var(--bad); background: color-mix(in srgb, var(--bad) 13%, transparent); }
.status--soon { color: var(--moonlight); background: rgba(157,184,232,.12); }
.status--tba { color: var(--text-muted); background: rgba(157,184,232,.08); }

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--text-muted);
  font-family: var(--font-body); font-size: .86rem; font-weight: 600;
  padding: .45rem .9rem; min-height: 38px; cursor: pointer;
  white-space: nowrap; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--moonlight); color: var(--text); }
.chip[aria-pressed='true'], .chip.is-active {
  background: linear-gradient(135deg, rgba(255,138,61,.25), rgba(242,181,68,.15));
  border-color: var(--pumpkin); color: var(--gold);
}
[data-theme='dusk'] .chip[aria-pressed='true'], [data-theme='dusk'] .chip.is-active {
  background: rgba(180, 83, 26, .12); color: #8A3F10;
}

.filterbar {
  /* Pinned to the header's real height, which the offer line can change. */
  position: sticky; top: var(--header-h, 60px); z-index: 30;
  background: rgba(7,10,28,.9); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
[data-theme='dusk'] .filterbar { background: rgba(255,244,228,.94); }
.filterbar__scroll {
  display: flex; gap: .5rem; overflow-x: auto; padding-block: .6rem;
  scrollbar-width: none;
}
.filterbar__scroll::-webkit-scrollbar { display: none; }

/* ── Countdown ───────────────────────────────────────────────────────────── */

.countdown {
  display: inline-flex; align-items: stretch; gap: .5rem;
  background: rgba(18,24,58,.82); border: 1px solid var(--border);
  border-radius: 16px; padding: .7rem 1rem; backdrop-filter: blur(8px);
}
[data-theme='dusk'] .countdown { background: rgba(255,244,228,.9); }
.countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 3rem; }
.countdown__num { font-family: var(--font-heading); font-weight: 900; font-size: 1.75rem; color: var(--gold); line-height: 1; }
.countdown__label { font-size: .6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.countdown__sep { font-family: var(--font-heading); font-size: 1.4rem; color: var(--gold); align-self: flex-start; }
.countdown__note {
  display: flex; align-items: center; padding-left: .75rem;
  border-left: 1px solid var(--border); font-size: .82rem; color: var(--text-muted); max-width: 12rem;
}

/* ── Hero and scenes ─────────────────────────────────────────────────────── */

.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__inner { position: relative; z-index: 2; padding-block: clamp(2.5rem, 9vw, 6rem); }
.hero__text { max-width: 34ch; }
.hero__scrim {
  position: absolute; inset: -10% -20%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 30% 45%, rgba(7,10,28,.72) 0%, transparent 78%);
}
[data-theme='dusk'] .hero__scrim {
  background: radial-gradient(ellipse 62% 72% at 30% 45%, rgba(255,244,228,.86) 0%, transparent 76%);
}

.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; overflow: hidden; }
.scene__svg, .scene--header svg, .scene--footer svg { width: 100%; height: 100%; display: block; }

/* Hero layers are positioned independently so the composition survives every
   aspect ratio: the landscape hugs the bottom, the moon keeps its own corner. */
.scene--hero { min-height: 100%; }
.scene__sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-horizon) 100%);
}
[data-theme='dusk'] .scene__sky {
  background: linear-gradient(180deg, #F29E4C 0%, #8C4F8F 52%, #2A2350 100%);
}
.scene__layer { position: absolute; display: block; }
/* The scene SVGs paint through these, so Dusk gets its own silhouettes
   instead of Midnight's navy sitting on a sunset sky. */
.scene { --scene-near: var(--silhouette-near); --scene-far: var(--silhouette-far); }
.scene__stars { inset-inline: 0; top: 0; height: 62%; }
.scene__bats { inset-inline: 0; top: 0; height: 46%; }
.scene__land { inset-inline: 0; bottom: 0; height: clamp(150px, 34%, 300px); }
.scene__moonwrap {
  position: absolute; top: 4%; right: -6%;
  width: clamp(170px, 46%, 330px); aspect-ratio: 1;
}
@media (min-width: 720px) {
  .scene__moonwrap { top: 6%; right: 6%; width: clamp(220px, 28%, 340px); }
}
.scene__moonwrap svg { width: 100%; height: 100%; display: block; }
.scene--header { position: relative; height: 140px; }
/* The interior header keeps the sunset sky even though the page behind it
   is parchment, so Dusk still reads as an illustrated theme. */
.scene__sky-dusk { opacity: 0; }
[data-theme='dusk'] .scene__sky-dusk { opacity: 1; }
.scene--footer { position: relative; height: 120px; margin-top: -1px; }
@media (min-width: 720px) { .scene--footer { height: 160px; } }

.hero__search { display: flex; gap: .5rem; flex-wrap: wrap; max-width: 34rem; }
.hero__search input { flex: 1 1 14rem; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

label, .label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.hint { font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }
.required { color: var(--pumpkin); }

input[type='text'], input[type='email'], input[type='url'], input[type='tel'],
input[type='search'], input[type='date'], input[type='time'], input[type='number'],
select, textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--text); background: rgba(7,10,28,.45);
  border: 1px solid var(--border); border-radius: 12px;
  padding: .7rem .9rem; min-height: 44px;
}
[data-theme='dusk'] input, [data-theme='dusk'] select, [data-theme='dusk'] textarea { background: #fff; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--moonlight); outline-offset: 0; }
textarea { min-height: 7rem; resize: vertical; }
input[type='search'] { border-radius: var(--radius-pill); }

fieldset { border: 1px solid var(--border); border-radius: 14px; padding: 1rem; margin: 0 0 1rem; }
legend { font-family: var(--font-heading); font-weight: 700; padding-inline: .4rem; }

.field { margin-bottom: 1rem; }
.field--error input, .field--error textarea, .field--error select { border-color: var(--bad); }
.error-text { color: var(--bad); font-size: .85rem; font-weight: 600; margin-top: .3rem; }

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: clamp(1rem, 3vw, 1.6rem);
  backdrop-filter: blur(10px); box-shadow: var(--shadow-card);
}
.panel + .panel { margin-top: 1rem; }

/* Scare tiles: four large tappable choices with icon, number and label. */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 1rem; text-decoration: none; color: var(--text);
  min-height: 118px; cursor: pointer; text-align: left;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); color: var(--text); }
.tile__num { font-family: var(--font-heading); font-weight: 900; font-size: 1.6rem; line-height: 1; }
.tile__label { font-family: var(--font-heading); font-weight: 700; font-size: .98rem; }
.tile__blurb { font-size: .78rem; color: var(--text-muted); line-height: 1.35; }
.tile--0 { border-color: color-mix(in srgb, var(--scare-0) 40%, transparent); }
.tile--0 .tile__num, .tile--0 .tile__label { color: var(--scare-0-ink); }
.tile--1 { border-color: color-mix(in srgb, var(--scare-1) 40%, transparent); }
.tile--1 .tile__num, .tile--1 .tile__label { color: var(--scare-1-ink); }
.tile--2 { border-color: color-mix(in srgb, var(--scare-2) 42%, transparent); }
.tile--2 .tile__num, .tile--2 .tile__label { color: var(--scare-2-ink); }
.tile--3 { border-color: color-mix(in srgb, var(--scare-3) 42%, transparent); }
.tile--3 .tile__num, .tile--3 .tile__label { color: var(--scare-3-ink); }

/* ── Stars and reviews ───────────────────────────────────────────────────── */

.stars { display: inline-flex; gap: 1px; color: var(--scare-0); line-height: 1; }
.stars .star--off { color: var(--border); }
.rating-line { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }

.histogram { display: grid; gap: .3rem; }
.histogram__row { display: grid; grid-template-columns: 2.2rem 1fr 2.5rem; align-items: center; gap: .5rem; font-size: .82rem; }
.histogram__track { height: 8px; background: rgba(157,184,232,.14); border-radius: 4px; overflow: hidden; }
.histogram__fill { height: 100%; background: linear-gradient(90deg, var(--pumpkin-start), var(--pumpkin-end)); border-radius: 4px; }

.review { display: grid; grid-template-columns: 48px 1fr; gap: .75rem; padding-block: 1rem; border-top: 1px solid rgba(52,64,138,.4); }
.review__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--silhouette-far); }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.review__name { font-family: var(--font-heading); font-weight: 700; }
.review__when { font-size: .8rem; color: var(--text-muted); }
.owner-response {
  margin-top: .7rem; padding: .7rem .9rem; border-left: 3px solid var(--lantern);
  background: rgba(247,201,72,.07); border-radius: 0 10px 10px 0;
}
.owner-response__label { font-size: .75rem; font-weight: 700; color: var(--lantern); text-transform: uppercase; letter-spacing: .08em; }

/* ── OTP input ───────────────────────────────────────────────────────────── */

.otp { display: flex; gap: .5rem; justify-content: center; }
.otp input {
  width: 3rem; height: 3.6rem; text-align: center; font-size: 1.5rem;
  font-family: var(--font-heading); font-weight: 700; padding: 0; border-radius: 12px;
}
.otp.is-error input { border-color: var(--bad); animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.code-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: rgba(7,10,28,.55); border: 1px dashed var(--lantern);
  border-radius: 14px; padding: 1rem 1.2rem;
}
.code-card__code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 700;
  letter-spacing: .08em; color: var(--lantern);
}

/* ── Calendar ────────────────────────────────────────────────────────────── */

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 26rem; }
.calendar__dow { text-align: center; font-size: .7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; padding-bottom: .2rem; }
.calendar__day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: .85rem; font-weight: 600;
  background: rgba(157,184,232,.06); color: var(--text-muted); border: 1px solid transparent;
}
.calendar__day--open { background: rgba(157,184,232,.16); color: var(--text); cursor: pointer; }
.calendar__day--open:hover { border-color: var(--moonlight); }
.calendar__day--today { border-color: var(--moonlight); }
.calendar__day--owner-closed { text-decoration: line-through; color: var(--bad); }
.calendar__day--selected {
  background: linear-gradient(135deg, var(--pumpkin-start), var(--pumpkin-end));
  color: var(--on-primary); border-color: transparent;
}
.calendar__day--empty { background: transparent; }

/* ── Map ─────────────────────────────────────────────────────────────────── */

.map { position: relative; width: 100%; border-radius: var(--radius-card); overflow: hidden; background: var(--silhouette-far); border: 1px solid var(--border); }
.map--page { height: calc(100dvh - 190px); border-radius: 0; border-inline: none; }
.map--inline { aspect-ratio: 16 / 9; }
.map__placeholder { display: grid; place-items: center; height: 100%; color: var(--text-muted); font-size: .9rem; text-align: center; padding: 1rem; }
.map__card { position: absolute; inset-inline: 12px; bottom: 12px; z-index: 5; }

.split { display: grid; gap: 1rem; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }
  .split__map { position: sticky; top: calc(var(--header-h, 60px) + 58px); }
}

/* ── Trick-or-treat rows ─────────────────────────────────────────────────── */

.tot-row {
  display: grid; gap: .25rem .75rem; padding: .85rem 1rem;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); text-decoration: none; color: inherit;
  grid-template-columns: 1fr auto;
}
.tot-row:hover { border-color: var(--moonlight); color: inherit; }
.tot-row--today { border-color: var(--lantern); background: rgba(247,201,72,.08); }
.tot-row--past { opacity: .6; }
.tot-row__town { font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; }
.tot-row__hours { font-family: var(--font-heading); font-weight: 700; color: var(--gold); white-space: nowrap; }
.tot-row__meta { font-size: .82rem; color: var(--text-muted); grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem .7rem; }
.tot-row__lastyear { color: var(--text-muted); font-size: .82rem; font-style: italic; }

.date-group { margin-bottom: 1.5rem; }
.date-group__head { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; color: var(--gold); }

/* ── Fact strip, sessions, prices ────────────────────────────────────────── */

.factstrip { display: flex; flex-wrap: wrap; gap: .4rem; }
.session { border: 1px solid var(--border); border-radius: 16px; padding: 1rem; background: var(--surface); }
.session + .session { margin-top: .75rem; }
.session__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.session__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; margin: 0; }
.price-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .6rem; }
.price-table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: .8rem; padding-bottom: .2rem; }
.price-table td { padding: .25rem 0; border-top: 1px solid rgba(52,64,138,.35); }
.price-table td:last-child { text-align: right; font-weight: 700; }

.actionrow { display: flex; flex-wrap: wrap; gap: .5rem; }
.actionrow .btn { flex: 1 1 auto; min-width: 8.5rem; }

/* ── Sponsor slots ───────────────────────────────────────────────────────── */

.sponsor-strip {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 14px;
  padding: .7rem 1rem; background: var(--surface);
}
.sponsor-strip img { height: 40px; max-width: 160px; width: auto; object-fit: contain; }
.sponsor-strip__line { font-size: .9rem; color: var(--text-muted); }

/* ── Empty states and toasts ─────────────────────────────────────────────── */

.empty { text-align: center; padding: 2.5rem 1rem; }
.empty__art { margin-inline: auto; display: block; }
.empty h2 { margin-top: 1rem; }
.empty p { color: var(--text-muted); max-width: 40ch; margin-inline: auto; }

.toast-host { position: fixed; inset-inline: 0; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; }
.toast {
  background: var(--surface-raised); border: 1px solid var(--moonlight);
  color: var(--text); border-radius: var(--radius-pill);
  padding: .6rem 1.2rem; font-size: .9rem; font-weight: 600;
  box-shadow: var(--shadow-card); animation: float-up .3s ease-out;
}
@keyframes float-up { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer { position: relative; margin-top: 3rem; background: var(--silhouette-near); color: var(--text-muted); }
[data-theme='dusk'] .site-footer { background: var(--silhouette-near); color: #D8CCBE; }
.site-footer__inner { padding-block: 2rem 1.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 720px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer a { color: var(--moonlight); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer h3 { color: var(--text); font-size: .95rem; margin-bottom: .5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .9rem; }
.footer-legal { border-top: 1px solid rgba(52,64,138,.5); padding-block: 1rem; font-size: .8rem; }

/* ── Motion ──────────────────────────────────────────────────────────────── */

.bat { animation: bat-drift 24s ease-in-out infinite; transform-box: fill-box; }
.bat--1 { animation-duration: 22s; }
.bat--2 { animation-duration: 28s; animation-delay: 8s; }
.bat--3 { animation-duration: 18s; animation-delay: 4s; }
@keyframes bat-drift {
  0%   { transform: translate(0, 0) scaleX(1); }
  25%  { transform: translate(60px, -22px) scaleX(-1); }
  50%  { transform: translate(120px, 8px) scaleX(-1); }
  75%  { transform: translate(60px, -14px) scaleX(1); }
  100% { transform: translate(0, 0) scaleX(1); }
}
.fog { animation: fog-drift 20s ease-in-out infinite; }
.fog--2 { animation-duration: 26s; animation-delay: 6s; }
@keyframes fog-drift {
  0%, 100% { transform: translateX(0); opacity: .26; }
  50% { transform: translateX(70px); opacity: .14; }
}
.twinkle { animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .65; } 50% { opacity: .18; } }
.glow-window, .glow-lantern { animation: lantern-flicker 4.2s ease-in-out infinite; }
.glow-lantern { animation-duration: 5.1s; }
@keyframes lantern-flicker {
  0%, 100% { opacity: 1; } 10% { opacity: .86; } 22% { opacity: .96; }
  45% { opacity: .8; } 62% { opacity: 1; } 81% { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (min-width: 880px) {
  .nav-desktop { display: flex; }
  .tabbar { display: none; }
  body:has(.tabbar) { padding-bottom: 0; }
  .toast-host { bottom: 24px; }
  .rail > * { flex-basis: 300px; }
}

@media print {
  .site-header, .tabbar, .filterbar, .scene, .site-footer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ── Map pins ────────────────────────────────────────────────────────────── */

.map-pin {
  background: none; border: none; padding: 0; cursor: pointer; line-height: 0;
  filter: drop-shadow(0 2px 6px rgba(4, 7, 22, .6));
}
.map-pin:hover { transform: scale(1.1); }
.map-popup { font-family: var(--font-body); font-size: .88rem; color: #0B1030; }
.map-popup a { color: #2A3A78; font-weight: 600; }
.mapboxgl-popup-content { border-radius: 12px; padding: .7rem .9rem; }

/* ── Sponsorship-available slot and the build credit ─────────────────────── */

.presenting--open { border-top-color: rgba(242, 181, 68, .3); }
.presenting__offer {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--gold); text-decoration: none; font-weight: 600; font-size: .78rem;
}
.presenting__offer:hover { color: var(--pumpkin); text-decoration: underline; }

.built-by {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0; padding-block: 1rem;
  border-top: 1px solid rgba(52, 64, 138, .5);
  font-size: .85rem;
}
.built-by__label { color: var(--text-muted); }
.built-by__name {
  font-family: var(--font-heading); font-weight: 700;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--moonlight);
}
.built-by__name:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ── Mobile layout corrections ───────────────────────────────────────────── */

/* Grid and flex children refuse to shrink below their min-content width by
   default. An aspect-ratio box turns its min-height into a min-WIDTH, which is
   how a 420px-tall 16:9 map forced a 747px column inside a 343px page and made
   the whole document scroll sideways. */
.split > * { min-width: 0; }
.split__map { min-width: 0; }

/* Header: one row, always. The wordmark shrinks before anything wraps. */
.site-header__bar { flex-wrap: nowrap; gap: .5rem; }

.logo { min-width: 0; }
.logo__word { font-size: 1.05rem; }
@media (min-width: 400px) { .logo__word { font-size: 1.2rem; } }
@media (min-width: 520px) { .logo__word { font-size: 1.4rem; } }

.location-pill {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  gap: .3rem;
  padding-inline: .6rem;
}
.location-pill svg { flex-shrink: 0; }
.location-pill__town {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  /* Enough for "Wisconsin Rapids", the longest town in the picker. */
  max-width: 9.5rem;
}
/* "Near" is a nicety, not information — the pin icon already says location. */
.location-pill__near { display: none; }
@media (min-width: 520px) { .location-pill__near { display: inline; } }

/* The theme toggle must never be squeezed below a usable tap target. */
.site-header .icon-btn { flex: 0 0 auto; width: 40px; height: 40px; }

/* The offer line stays one line: a two-line header costs more than the words
   are worth on a phone. The longer pitch appears when there is room. */
.presenting { flex-wrap: nowrap; overflow: hidden; }
.presenting__offer { white-space: nowrap; }
.presenting__offer-long { display: none; }
@media (min-width: 620px) { .presenting__offer-long { display: inline; } }

/* The map page's map: sized from the viewport, never from an aspect ratio, so
   it cannot impose a minimum width. Map first on a map page. */
.map--page-inline {
  width: 100%;
  height: clamp(320px, 58vh, 620px);
}
@media (max-width: 1023px) {
  .split--map-first { display: flex; flex-direction: column; }
  .split--map-first .split__map { order: -1; }
}

/* Filter sheets and rails must not push the page wide. */
.filterbar__scroll { max-width: 100%; }
.rail { max-width: 100%; }

/* Nothing should ever scroll the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── Tap targets ─────────────────────────────────────────────────────────── */
/* WCAG 2.5.8 sets 24px as the floor; 44px is the comfortable target and these
   are the controls people jab at one-handed on a phone. */

.chip { min-height: 40px; }
.card__save { width: 44px; height: 44px; }
.presenting__offer { padding-block: .45rem; }
.logo { padding-block: .3rem; }
.tabbar a { min-height: 56px; }
.calendar__day--open { min-height: 40px; }
.otp input { min-height: 56px; }

/* Controls that sat just under the comfortable tap height. */
.location-pill { min-height: 38px; }
.btn--sm { min-height: 38px; }
.presenting { padding-block: .35rem .4rem; }
.presenting__offer { padding-block: .35rem; font-size: .76rem; }

/* A long section title must wrap rather than shove its horizon rule off the
   page — "The rules we hold ourselves to" pushed 18px past the right edge. */
.section__head { flex-wrap: wrap; }
.section__head h2 { white-space: normal; min-width: 0; }
@media (min-width: 560px) { .section__head h2 { white-space: nowrap; } }
.horizon { min-width: 32px; }

.presenting__offer { min-height: 38px; align-items: center; }

/* Header width budget at 375px: 343 bar − 40 toggle − 16 gaps = 287px shared
   between the wordmark and the location pill. Trimming both makes "Stevens
   Point" — the default and the longest common town — fit without truncating.
   Only "Wisconsin Rapids" still ellipses, which is the right thing to lose. */
@media (max-width: 399px) {
  .logo__word { font-size: .95rem; }
  .logo { gap: .3rem; }
  .location-pill { padding-inline: .5rem; gap: .25rem; font-size: .82rem; }
  .location-pill__town { max-width: 8.5rem; }
}