/* TITUSVILLE SPOOKS — the map and calendar
   Titusville Aglow's stylesheet (C:/foreverstill/titusville-aglow/css/aglow.css)
   carried over for October: its winter blue-black and gold become a night
   plum and pumpkin orange; snow becomes leaves; the train opening is gone.
   Variable names are Aglow's so the two stay easy to compare: --gold is the
   pumpkin, --ice is the moon-white text. Overrides for Spooks are at the end. */

:root {
  --night: #0b0710;
  --night-2: #140c1c;
  --night-3: #22142e;
  --ice: #f1e9ff;
  --ice-dim: #c3b3d9;
  --ice-faint: #8a7aa3;
  --gold: #f2a24a;
  --gold-bright: #ffc77a;
  --gold-glow: rgba(242, 162, 74, 0.35);
  --ember: #ff8a2a;
  --warm-white: #fff1e0;
  --panel-bg: rgba(16, 9, 24, 0.86);
  --hairline: rgba(242, 162, 74, 0.24);
  --shadow-deep: 0 24px 70px rgba(0, 0, 0, 0.55);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Montserrat', system-ui, sans-serif;
  --script: 'Cormorant Garamond', Georgia, serif;
  --display: 'Cinzel', Georgia, serif;
}

/* :where() keeps the reset as weak as Aglow's bare * was, so the map's own spacing still wins */
:where(#map-view, #panel, #preview, #calendar-view, .topbar, #reset-view, #journey, #filters, #reveal) * { box-sizing: border-box; margin: 0; padding: 0; }

body.arrived {
  color: var(--ice);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- leaves ---------- */
#leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.55;
  transition: opacity 0.7s ease;
}

/* Concept disclosure. Sits above everything and never hides: a shared preview
   link must always say what it is. Bottom-left, so it never collides with the
   skip hint (bottom-right) or the sound toggle (top-right). */
.concept-note {
  position: fixed;
  z-index: 99;
  bottom: 16px;
  left: 20px;
  max-width: min(46ch, calc(100vw - 40px));
  font-size: 0.58rem;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(195, 179, 217, 0.5);
  text-shadow: 0 1px 6px rgba(6, 3, 10, 0.9);
  pointer-events: none;
}
@media (max-width: 600px) {
  .concept-note { font-size: 0.5rem; letter-spacing: 0.1em; bottom: 12px; left: 14px; }
}

/* ---------- arrival reveal ---------- */
#reveal {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  /* Scrim over the aerial. The map is bright and busy — white street grid on
     snow — and at 0.1 in the centre the reveal copy was competing with it and
     losing. Carries enough weight now for the text to read, while still
     letting the town show through underneath. */
  background: radial-gradient(ellipse at 50% 45%, rgba(11, 7, 16, 0.58) 0%, rgba(11, 7, 16, 0.8) 100%);
  transition: opacity 1s var(--ease-out), visibility 1s;
}
#reveal.leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.reveal-stack { max-width: 640px; }
.reveal-stack > * {
  opacity: 0;
  transform: translateY(12px);
  animation: introRise 1.1s var(--ease-out) forwards;
}
.reveal-stack .intro-title  { animation-delay: 0.15s; }
.reveal-stack .intro-script { animation-delay: 0.5s; }
.reveal-stack .intro-season { animation-delay: 0.85s; }
.reveal-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  color: var(--ice);
  margin-top: 26px;
  animation-delay: 1.3s;
}
.reveal-body {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ice-dim);
  max-width: 460px;
  margin: 12px auto 0;
  animation-delay: 1.55s;
}
.reveal-cta {
  margin-top: 30px;
  padding: 14px 42px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(242, 162, 74, 0.07);
  backdrop-filter: blur(6px);
  transition: background 0.4s, box-shadow 0.4s;
  animation-delay: 2s;
}
.reveal-cta:hover {
  background: rgba(242, 162, 74, 0.16);
  box-shadow: 0 0 40px var(--gold-glow);
}

.intro-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-white);
  text-shadow: 0 0 34px rgba(242, 162, 74, 0.28), 0 2px 18px rgba(0, 0, 0, 0.6);
  animation-delay: 0.35s;
}
.intro-script {
  font-family: var(--script);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400;
  color: var(--gold);
  margin-top: 4px;
  animation-delay: 0.85s;
}
.intro-season {
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ice-dim);
  margin-top: 18px;
  animation-delay: 1.25s;
}
@keyframes introRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- top bar ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(rgba(11, 7, 16, 0.85), rgba(11, 7, 16, 0));
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.9s var(--ease-out) 0.5s, transform 0.9s var(--ease-out) 0.5s;
  pointer-events: none;
}
body.exploring .topbar { opacity: 1; transform: none; pointer-events: auto; }

.wordmark {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-white);
  white-space: nowrap;
}
.wordmark .script {
  font-family: var(--script);
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
  margin-left: 8px;
}

.view-toggle {
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(16, 9, 24, 0.6);
  backdrop-filter: blur(10px);
}
.view-toggle button {
  padding: 8px 18px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice-dim);
  transition: color 0.3s, background 0.3s;
}
.view-toggle button[aria-pressed='true'] {
  color: var(--night);
  background: var(--gold);
  font-weight: 600;
}

/* ---------- map stage ---------- */
#map-view {
  position: fixed;
  inset: 0;
  /* the map resolves OUT of the white-out rather than simply being uncovered:
     it starts blown out, soft and desaturated — indistinguishable from the
     white above it — and condenses into focus as that white lifts */
  transition: filter 2600ms var(--ease-out), opacity 2000ms var(--ease-out);
}
#map-view.resolving {
  filter: blur(18px) brightness(1.9) saturate(0.3) contrast(0.78);
  opacity: 0.28;
}

.map-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background: var(--night);
}
.map-stage.dragging { cursor: grabbing; }

.map-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.map-world img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* vignette over the map, under the UI */
.map-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(11, 7, 16, 0.5) 100%);
}

/* ---------- glowing destination markers ---------- */
.glow {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  transform: scale(calc(1 / var(--s, 1)));
  transform-origin: 50% 50%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1s var(--ease-out), filter 0.5s;
}
body.lit .glow { opacity: 1; }
.glow .halo { display: none; }
.glow .core {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--warm-white) 0%, var(--ember) 70%);
  box-shadow: 0 0 8px 1px rgba(255, 138, 42, 0.45);
  animation: haloBreathe 3.4s ease-in-out infinite;
  animation-delay: var(--stagger, 0s);
}
.glow .chip {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: var(--gold-bright);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.3s;
}
.glow:hover .chip,
.glow:focus-visible .chip,
.map-stage.zoomed .chip { opacity: 1; }

.glow:hover .core,
.glow:focus-visible .core { box-shadow: 0 0 22px 6px rgba(255, 138, 42, 0.85); }

.glow.dim { opacity: 0.14; filter: saturate(0.2); pointer-events: none; }
body.lit .glow.dim { opacity: 0.14; }
.glow.active .halo { animation-duration: 1.8s; }

@keyframes haloBreathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; }
}

/* ---------- route glow: light travels the drive-through road ---------- */
.route-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
/* the ember string: a faint line of tiny bulbs along the road, part of the
   calm map once the town is lit — the hint that the road itself is a
   destination. Clicking it (via the hit path) opens the event. */
.route-g .route-ember {
  fill: none;
  stroke: rgba(255, 196, 110, 0.55);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 0.5 7.5;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out), stroke 0.3s, stroke-width 0.3s;
  filter: drop-shadow(0 0 3px rgba(255, 138, 42, 0.5));
}
body.lit .route-g:not(.on) .route-ember {
  opacity: 0.7;
  animation: emberShimmer 4.5s ease-in-out infinite;
}
body.lit .route-g:not(.on):hover .route-ember {
  stroke: var(--gold-bright);
  stroke-width: 4.5;
}
.route-g.on .route-ember { opacity: 0; animation: none; }
@keyframes emberShimmer {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}
/* invisible wide hit area: the road is clickable directly */
.route-g .route-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 34;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: pointer;
}
/* soft warm bed under the lit road — breathes in with the route */
.route-g .route-under {
  fill: none;
  stroke: rgba(255, 138, 42, 0.16);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
.route-g.on .route-under { opacity: 1; }
/* the road itself, revealed by the traveling light (dash animation in JS) */
.route-g .route-lit {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 214, 140, 0.9))
          drop-shadow(0 0 13px rgba(255, 138, 42, 0.55));
  transition: opacity 0.5s ease;
}
.route-g.on .route-lit { opacity: 0.95; }
/* the light doing the traveling — headlights moving through the park */
.route-g .route-comet {
  fill: var(--warm-white);
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255, 243, 221, 1))
          drop-shadow(0 0 16px rgba(255, 138, 42, 0.85));
  transition: opacity 0.4s ease;
}
.route-g.on .route-comet { opacity: 1; }
.route-g.arrived .route-comet { opacity: 0; transition: opacity 0.8s ease; }
/* Santa at the end of the route: a warm pulse where the drive settles */
.route-g .route-santa { opacity: 0; transition: opacity 0.9s var(--ease-out); }
.route-g.arrived .route-santa { opacity: 1; }
.route-g .santa-core {
  fill: var(--warm-white);
  filter: drop-shadow(0 0 6px rgba(255, 214, 140, 1));
}
.route-g .santa-halo {
  fill: none;
  stroke: rgba(255, 138, 42, 0.75);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: santaPulse 2.2s ease-in-out infinite;
}
@keyframes santaPulse {
  0%   { transform: scale(0.55); opacity: 0.9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* hover preview card (desktop) */
#preview {
  position: fixed;
  z-index: 45;
  pointer-events: none;
  padding: 10px 16px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--panel-bg);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-deep);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 30px)) scale(0.96);
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
  text-align: center;
  max-width: 240px;
}
#preview.show { opacity: 1; transform: translate(-50%, calc(-100% - 34px)) scale(1); }
#preview .p-date {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--gold);
}
#preview .p-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--warm-white);
  margin: 2px 0;
}
#preview .p-time { font-size: 0.68rem; color: var(--ice-dim); letter-spacing: 0.1em; }

/* ---------- filters ---------- */
.filters {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 48;
  display: flex;
  gap: 6px;
  max-width: calc(100vw - 32px);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(16, 9, 24, 0.72);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.9s var(--ease-out) 0.9s;
  pointer-events: none;
}
.filters::-webkit-scrollbar { display: none; }
body.exploring .filters { opacity: 1; pointer-events: auto; }
.filters button {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ice-dim);
  white-space: nowrap;
  transition: color 0.3s, background 0.3s;
}
.filters button:hover { color: var(--ice); }
.filters button[aria-pressed='true'] {
  color: var(--night);
  background: var(--gold);
  font-weight: 600;
}

/* ---------- journey rail ---------- */
#journey {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 47;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out) 1.2s;
  pointer-events: none;
}
body.exploring #journey { opacity: 1; pointer-events: auto; }
.journey-label {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ice-faint);
  margin-bottom: 8px;
}
.chapter {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  text-align: left;
  transition: background 0.3s;
}
.chapter:hover { background: rgba(242, 162, 74, 0.08); }
.chapter .num {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--ice-faint);
  font-variant-numeric: tabular-nums;
}
.chapter .name {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice-dim);
  transition: color 0.3s;
}
.chapter:hover .name { color: var(--ice); }
.chapter[aria-pressed='true'] .name { color: var(--gold-bright); }
.chapter[aria-pressed='true'] .num { color: var(--gold); }
.chapter-tagline {
  min-height: 34px;
  max-width: 220px;
  margin-top: 10px;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ice-dim);
  font-family: var(--serif);
  opacity: 0;
  transition: opacity 0.4s;
}
.chapter-tagline.show { opacity: 1; }

/* ---------- detail panel (desktop) ---------- */
#panel {
  position: fixed;
  top: 76px;
  right: 24px;
  bottom: 84px;
  z-index: 52;
  width: min(400px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--panel-bg);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  opacity: 0;
  transform: translateX(28px);
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), visibility 0.5s;
}
#panel.open { opacity: 1; transform: none; visibility: visible; }

.panel-media {
  flex: 0 0 auto;
  height: 128px;
  position: relative;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(255, 138, 42, 0.35), transparent 60%),
    radial-gradient(ellipse at 75% 20%, rgba(242, 162, 74, 0.18), transparent 55%),
    linear-gradient(160deg, var(--night-3), var(--night-2));
}
.panel-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 243, 221, 0.5) 1px, transparent 1.5px);
  background-size: 90px 70px;
  opacity: 0.35;
}
.panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(11, 7, 16, 0.6);
  color: var(--ice);
  font-size: 1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.3s;
}
.panel-close:hover { background: rgba(242, 162, 74, 0.25); }

.panel-body { flex: 1; overflow-y: auto; padding: 22px 24px 26px; }
.panel-date {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--gold);
}
.panel-title {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--warm-white);
  margin: 6px 0 4px;
}
.panel-when { font-size: 0.76rem; color: var(--ice-dim); letter-spacing: 0.06em; }

.panel-meta { margin: 16px 0; display: grid; gap: 9px; }
.panel-meta .row { display: flex; gap: 10px; font-size: 0.78rem; line-height: 1.45; }
.panel-meta .k {
  flex: 0 0 84px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice-faint);
  padding-top: 2px;
}
.panel-meta .v { color: var(--ice); }

.panel-desc { font-size: 0.82rem; line-height: 1.65; color: var(--ice-dim); margin: 14px 0; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.badge {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.badge.free { border-color: rgba(138, 194, 136, 0.4); color: #a9d8a7; }

.panel-links { display: flex; gap: 8px; margin: 16px 0 4px; flex-wrap: wrap; }
.panel-links a, .panel-links .link-dead {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.panel-links a {
  color: var(--night);
  background: var(--gold);
  font-weight: 600;
}
.panel-links .link-dead {
  color: var(--ice-faint);
  border: 1px solid rgba(107, 128, 153, 0.3);
  cursor: not-allowed;
}

.related-label {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ice-faint);
  margin: 18px 0 8px;
}
.related-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.related-item:hover { border-color: var(--hairline); background: rgba(242, 162, 74, 0.06); }
.related-item .r-date { font-size: 0.6rem; letter-spacing: 0.2em; color: var(--gold); font-weight: 700; }
.related-item .r-title { font-family: var(--serif); font-size: 1rem; color: var(--ice); }

.demo-note {
  margin-top: 20px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed rgba(107, 128, 153, 0.4);
  font-size: 0.64rem;
  line-height: 1.5;
  color: var(--ice-faint);
}

/* ---------- the frosted window pane (route events) ----------
   Looking at the park through a frosted window on a winter night:
   milky glass, a gold window frame, frost creeping in from the corners,
   and the media header as a live window onto the route itself. */
#panel.frost {
  background: linear-gradient(155deg,
    rgba(176, 199, 226, 0.16) 0%,
    rgba(21, 32, 50, 0.68) 36%,
    rgba(16, 9, 24, 0.86) 100%);
  backdrop-filter: blur(26px) saturate(1.25);
  border-color: rgba(246, 216, 150, 0.35);
  box-shadow: var(--shadow-deep),
    inset 0 0 0 1px rgba(233, 240, 250, 0.07),
    inset 0 14px 60px rgba(233, 240, 250, 0.05);
}
#panel.frost .panel-media {
  height: 168px;
  box-shadow: inset 0 0 0 1px rgba(246, 216, 150, 0.28),
    inset 0 0 34px rgba(11, 7, 16, 0.55);
}
#panel.frost .panel-title { text-shadow: 0 0 24px rgba(242, 162, 74, 0.35); }
.pane-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.pane-route {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(255, 214, 140, 0.9))
          drop-shadow(0 0 8px rgba(255, 138, 42, 0.5));
}
.pane-comet {
  fill: var(--warm-white);
  filter: drop-shadow(0 0 4px rgba(255, 243, 221, 1))
          drop-shadow(0 0 10px rgba(255, 138, 42, 0.9));
}
.pane-frost {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(150px 115px at 0% 0%, rgba(233, 240, 250, 0.17), transparent 70%),
    radial-gradient(170px 125px at 100% 0%, rgba(233, 240, 250, 0.12), transparent 70%),
    radial-gradient(150px 120px at 0% 100%, rgba(233, 240, 250, 0.09), transparent 70%),
    radial-gradient(180px 135px at 100% 100%, rgba(233, 240, 250, 0.14), transparent 70%);
}
@media (max-width: 767px) {
  #panel.frost .panel-media { height: 112px; }
}

/* ---------- calendar view ---------- */
#calendar-view {
  position: fixed;
  inset: 0;
  z-index: 46;
  overflow-y: auto;
  background: linear-gradient(var(--night), var(--night-2));
  padding: 96px 24px 120px;
}
#calendar-view[hidden] { display: none; }
.cal-inner { max-width: 760px; margin: 0 auto; }
.cal-heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-white);
  margin-bottom: 6px;
}
.cal-sub { font-size: 0.8rem; color: var(--ice-dim); margin-bottom: 36px; }
.cal-day { margin-bottom: 34px; }
.cal-date {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 10px;
}
.cal-date .d-num {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.cal-date .d-name {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ice-dim);
}
.cal-event {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  border-radius: 12px;
  transition: background 0.3s;
}
.cal-event:hover { background: rgba(242, 162, 74, 0.07); }
.cal-event .e-time {
  flex: 0 0 88px;
  font-size: 0.72rem;
  color: var(--gold-bright);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.cal-event .e-main { flex: 1; min-width: 0; }
.cal-event .e-title { font-family: var(--serif); font-size: 1.15rem; color: var(--ice); }
.cal-event .e-venue { font-size: 0.7rem; color: var(--ice-faint); margin-top: 2px; }
.cal-event .e-map {
  flex: 0 0 auto;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.3s;
}
.cal-event:hover .e-map, .cal-event:focus-visible .e-map { opacity: 1; }
.cal-empty { font-size: 0.8rem; color: var(--ice-faint); font-style: italic; padding: 8px 12px; }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .wordmark { font-size: 0.85rem; letter-spacing: 0.16em; }
  .wordmark .script { display: none; }
  .view-toggle button { padding: 8px 12px; font-size: 0.62rem; }

  /* journey becomes a horizontal strip above the filters */
  #journey {
    left: 0;
    right: 0;
    top: auto;
    bottom: 74px;
    transform: none;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 16px;
  }
  #journey::-webkit-scrollbar { display: none; }
  .journey-label { display: none; }
  .chapter-tagline { display: none; }
  .chapter {
    flex: 0 0 auto;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: rgba(16, 9, 24, 0.72);
    backdrop-filter: blur(10px);
    padding: 7px 14px;
  }
  .chapter .name { font-size: 0.85rem; }

  .filters { bottom: 14px; border-radius: 14px; }

  /* detail panel becomes a bottom sheet */
  #panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 72vh;
    border-radius: 20px 20px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    transform: translateY(100%);
  }
  #panel.open { transform: none; }
  #panel::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: rgba(233, 240, 250, 0.25);
    z-index: 3;
  }
  .panel-media { height: 84px; }
  #preview { display: none; }

  #calendar-view { padding: 84px 16px 100px; }
  .cal-event .e-time { flex-basis: 64px; font-size: 0.66rem; }
  .cal-event { gap: 10px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  #leaves { display: none; }
}



/* #reveal sets display:grid, which overrides the hidden ATTRIBUTE — the UA
   rule for [hidden] is weaker than an id rule — so the reveal was on screen
   from page load, merely hidden behind #intro, and appeared the moment the
   hero faded rather than on its own beat. */
#reveal[hidden] { display: none; }



/* The December strip under the journey. Five across so the month reads as a
   block the eye can scan, and narrow enough to stay inside the left rail. */
.day-label { margin-top: 18px; }
.day-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  max-width: 176px;
}
.day {
  font-family: var(--serif);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ice-dim);
  padding: 5px 0;
  border-radius: 6px;
  text-align: center;
  transition: background 0.25s, color 0.25s;
}
.day:hover:not(:disabled) { background: rgba(242, 162, 74, 0.1); color: var(--ice); }
.day[aria-pressed="true"] {
  color: var(--night);
  background: var(--gold-bright);
}
/* nothing on that day: still shown, so the shape of the month reads, but inert */
.day.empty { color: rgba(226, 236, 248, 0.16); cursor: default; }
@media (max-width: 900px) { .day-label, .day-grid { display: none; } }

/* The way back to the whole map. Top centre: the wordmark holds the left and
   the view switcher the right, and the filters own the bottom, so this is the
   one piece of clear air — and it is where the eye goes when something has
   changed. Hidden whenever the view already IS the full map, so it never
   becomes furniture. */
#reset-view {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 52;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(242, 162, 74, 0.42);
  background: rgba(9, 14, 24, 0.82);
  backdrop-filter: blur(7px);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), background 0.25s;
}
#reset-view.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#reset-view:hover { background: rgba(242, 162, 74, 0.16); }
#reset-view[hidden] { display: none; }
.reset-arrow { font-size: 0.9rem; line-height: 1; }
@media (max-width: 640px) {
  #reset-view { top: auto; bottom: 74px; font-size: 0.62rem; padding: 8px 16px; }
}


/* ───────────── TITUSVILLE SPOOKS ─────────────
   Hidden under the intro until the portal opens onto it; the leaves, the
   disclosure and the chrome wait for the arrival too. */
#map-view { visibility: hidden; }
#map-view.is-on { visibility: visible; }
#leaves { opacity: 0; transition: opacity 1.2s ease; }
body.arrived #leaves { opacity: 0.9; }
.concept-note { opacity: 0; transition: opacity 1s ease; }
body.arrived .concept-note { opacity: 1; }
/* the spare room around the whole map is the map's own dark edge colour */
.map-stage { background: #2d231f; }
.map-vignette { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(20, 12, 10, 0.5) 100%); }
/* type: Spooks' capitals for names, its italic for the whispered lines */
.intro-title, .wordmark, .cal-heading { font-family: var(--display); }
.intro-title .town, .wordmark .town { color: #6f7bff; text-shadow: 0 0 18px rgba(70, 90, 255, 0.55); }
.intro-script, .wordmark .script { font-style: italic; }
.intro-script { font-size: clamp(1.35rem, 3vw, 2rem); margin-top: 8px; }
.wordmark .script { font-size: 1.05rem; }
/* PHONES (Chrissy, 2026-10-20: "fix the phone stuff"): at the foot of the
   screen the disclaimer sat on the filter bar and Back to the full map sat on
   the journey chips (and on an open event's sheet). Both go up top instead,
   under the bar, where only the map is: the disclaimer across the width, the
   way back centred beneath it. */
@media (max-width: 640px) {
  .concept-note { top: 58px; bottom: auto; left: 14px; right: 14px; max-width: none; font-size: 0.48rem; letter-spacing: 0.08em; text-align: center;
    padding: 5px 10px; border-radius: 8px; background: rgba(11, 7, 16, 0.62); color: rgba(195, 179, 217, 0.8); }   /* readable over the bright streets */
  #reset-view { top: 100px; bottom: auto; }
}