/* ============================================================
   THE SUPERFLY TRAIL — v4 (hybrid: artwork + interactive overlay)
   ------------------------------------------------------------
   Architecture:
     [.trail-map-frame]
        ├─ <img class="trail-map-artwork">  (the illustrated map)
        └─ <svg class="trail-map-overlay">  (clickable pins + trail)

   The artwork is responsible for visual richness. The SVG
   overlay is responsible for interaction. Both scale together
   because the SVG viewBox matches the artwork's natural
   dimensions (1024 × 1500 portrait).
   ============================================================ */

:root {
  /* PARCHMENT THEME — the trail page is a "vintage atlas" experience,
     so we flip the dark site theme to a warm cream/parchment surface
     that visually extends the watercolor map artwork across the entire
     page. The map's cream paper edges blend seamlessly with the page
     background, creating one continuous illustrated surface. */
  --panel-bg:        #EFE6D2;   /* warm cream parchment (matches map paper) */
  --panel-bg-card:   #E5D9BC;   /* slightly aged for cards */
  --panel-rule:      #C9B894;   /* subtle paper rule */
  --panel-cream:     #2A1D0F;   /* dark serif text on parchment */
  --panel-cream-dim: #5A4530;
  --panel-cream-mut: #8A7558;
  --panel-gold:      #B57A45;
  --panel-gold-soft: #D9A86E;

  /* Map overlay tokens — match the artwork's palette */
  --map-trail:        #B26B33;
  --map-trail-bright: #D88F4A;
  --map-trail-glow:   rgba(178,107,51,0.25);
  --map-pin-ring:     #1B1208;
  --map-pin-cream:    #EFE6D2;

  --serif:  Georgia, 'Times New Roman', serif;
  --sans:   -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* PARCHMENT THEME OVERRIDES (trail page only) — the entire page surface
   becomes a richly illustrated vintage parchment background, with the
   trail sections sitting on top of it transparent so the atlas paper
   shows through. Cream fallback color in case the image fails. */
body {
  background-color: #EFE6D2 !important;
  background-image: url('../images/superfly-trail-paper.jpg') !important;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #2A1D0F;
}

/* Make every trail section transparent so the illustrated paper bg
   shows through. The map frame and footer keep their own bg. */
.trail-minihero,
.trail-stage,
.trail-controls-bar,
.trail-results,
.trail-chapters,
.trail-trade {
  background: transparent !important;
}
/* Individual cards keep a subtle cream wash for text readability
   over the busier parts of the paper illustration. */
.trail-chapter,
.trail-stop {
  background-color: rgba(248, 240, 220, 0.86) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* HEADER — full canonical layout (matches wholesale.css / home.css) but
   inverted for the parchment theme: cream gradient instead of dark,
   dark brown text instead of cream-dim. Same sticky behavior, same
   typography, same gold-on-hover, same .btn treatment. */
header {
  position: sticky; top: 0; z-index: 50;
  padding: 20px 56px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(239,230,210,0.97) 0%, rgba(239,230,210,0.85) 100%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--panel-rule);
}
header .brand {
  /* Wordmark logotype — bigger, more deliberate brand presence. */
  height: 48px;
  width: auto;
  display: block;
  /* No mix-blend-mode — the wordmark is forest green ink on transparent,
     renders naturally on the cream parchment header. */
  mix-blend-mode: normal;
  transition: opacity 0.3s ease;
}
header .brand:hover { opacity: 0.78; }
@media (max-width: 720px) {
  header .brand { height: 32px; }
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.header-nav a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #2A1D0F !important;
  text-decoration: none !important;
  transition: color 200ms ease;
}
.header-nav a:hover,
.header-nav a:focus {
  color: var(--panel-gold) !important;
}
.header-nav a.btn {
  border: 1px solid var(--panel-gold);
  color: var(--panel-gold) !important;
  padding: 10px 20px;
}
.header-nav a.btn:hover {
  background: var(--panel-gold);
  color: #FFF8E8 !important;
}

/* Dark-theme decorative overlays don't belong on parchment — hide them */
.texture-grain, .texture-overlay, .texture-warm, .dust {
  display: none !important;
}

/* Footer stays anchored on dark for visual grounding + brand cohesion
   with the rest of the site. */
footer {
  background: #15120E !important;
  color: #C9C4BB;
  padding: 64px 56px 28px;
}
footer h4 {
  color: #F4EFE6;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
footer a {
  color: #C9C4BB;
  text-decoration: none;
  transition: color 200ms ease;
}
footer a:hover {
  color: var(--panel-gold-soft);
}
footer .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto 48px;
}
footer .footer-brand p {
  color: #A8A39A;
  line-height: 1.6;
  font-size: 13px;
}
footer .footer-brand .brand-foot {
  height: 36px;
  width: auto;
  margin-bottom: 16px;
  display: block;
}
footer ul {
  list-style: none;
  padding: 0; margin: 0;
}
footer ul li {
  margin-bottom: 8px;
  font-size: 13px;
}
footer .footer-bottom {
  border-top: 1px solid #2A241A;
  padding-top: 24px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 11px;
  color: #8A857C;
  text-align: center;
}
footer .footer-bottom p {
  margin: 4px 0;
}
/* ─── Mobile hamburger button (parchment theme) ─────────────
   Hidden on desktop; shown on mobile when .header-nav is hidden.
   Three thin dark lines that morph into an X when the drawer is open. */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(42, 29, 15, 0.3);
  width: 42px; height: 42px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 3px;
  transition: border-color 200ms ease;
}
.nav-toggle:hover { border-color: var(--panel-gold); }
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: #2A1D0F;
  transition: transform 250ms ease, opacity 250ms ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Mobile drawer (parchment theme) ───────────────────────
   Fullscreen cream wash with the nav links centered, fading in
   when body.nav-open. */
.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(239, 230, 210, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
body.nav-open .mobile-drawer {
  opacity: 1;
  pointer-events: auto;
}
.mobile-drawer-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 80px 24px;
}
.mobile-drawer a {
  font-family: 'Helvetica Neue LT Std', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #2A1D0F !important;
  text-decoration: none !important;
  padding: 12px 18px;
  transition: color 200ms ease;
}
.mobile-drawer a:hover,
.mobile-drawer a:focus { color: var(--panel-gold) !important; }
.mobile-drawer a.btn {
  border: 1px solid var(--panel-gold);
  color: var(--panel-gold) !important;
  padding: 14px 32px;
  margin-top: 18px;
}

@media (max-width: 720px) {
  header { padding: 14px 22px; }
  .header-nav { display: none; }
  .nav-toggle { display: flex; }   /* show the hamburger button */
  .mobile-drawer { display: block; } /* enable the drawer (still opacity:0 until body.nav-open) */
  footer { padding: 50px 24px 24px; }
  footer .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  /* ─── MAP LABELS — bumped on mobile (round 4) ───────────────
     Bumped ~28% from round 3 per user — still hard to read at the
     previous sizes. */
  .trail-map-overlay .map-pin__label    { font-size: 72px; }
  .trail-map-overlay .map-pin--flagship .map-pin__label { font-size: 96px; }
  .trail-map-overlay .map-pin__count    { font-size: 48px; }
  .trail-map-overlay .map-pin--flagship .map-pin__begin { font-size: 72px; }
  /* Thicker BLACK outline on mobile too so the white text stays
     legible against any artwork color underneath. Scaled with the
     bigger font sizes. */
  .trail-map-overlay .map-pin__label,
  .trail-map-overlay .map-pin__count,
  .trail-map-overlay .map-pin--flagship .map-pin__begin {
    stroke-width: 15;
  }
  .trail-map-overlay .map-pin--flagship .map-pin__label {
    stroke-width: 18;
  }
  /* Larger pin markers + hit area on mobile so tapping is easy */
  .trail-map-overlay .map-pin__hit { r: 40; }
  .trail-map-overlay .map-pin__ring { stroke-width: 1.5; }
}

/* ============================================================
   MINI HERO
   ============================================================ */
/* Screen-reader-only utility — visually hidden but exposed to assistive
   tech. Used for the H1 since the visible headline is the banner image. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   MINI HERO — heritage field-guide hero introducing the trail.
   Order: Banner → Headline → Subhead → Primary CTA → Secondary
   CTA row → Origin statement → (Map below)
   ============================================================ */
.trail-minihero {
  background: var(--panel-bg);
  padding: clamp(8px, 1vw, 16px) 0 clamp(12px, 1.6vw, 18px);
  text-align: center;
}
.trail-minihero .container { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* Watercolor SUPERFLY TRAIL banner — the logotype itself.
   The 1536×1024 PNG has ~25% transparent padding at the top and bottom
   around the actual illustration. Strong negative margins compensate so
   the banner reads as a tight visual mark and the headline tucks up
   right beneath the illustration instead of sitting in empty paper. */
.trail-minihero__banner {
  display: block;
  width: min(680px, 88%);
  height: auto;
  margin: clamp(-50px, -4vw, -30px) auto clamp(-100px, -8vw, -65px);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Heritage serif headline — Whiskey Jill vintage display face. */
.trail-minihero__headline {
  font-family: 'Whiskey Jill', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.05;
  letter-spacing: 0.015em;
  color: #2A1D0F;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  position: relative;
  z-index: 2;
}

/* Constrained subhead — clean Helvetica, light weight, dim brown */
.trail-minihero__subhead {
  font-family: 'Helvetica Neue LT Std', sans-serif;
  font-weight: 300;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.55;
  color: #4A3820;
  max-width: 520px;
  margin: 0 auto clamp(20px, 2.4vw, 28px);
}

/* Primary CTA — copper button, the strongest element after the logo */
.trail-minihero__cta-wrap {
  margin-bottom: clamp(10px, 1.2vw, 14px);
}
.trail-minihero__cta-primary {
  display: inline-block;
  background: var(--map-trail);
  color: #FFF8E8 !important;
  font-family: 'Helvetica Neue LT Std', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 14px 34px;
  text-decoration: none !important;
  border: 1px solid var(--map-trail);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease,
              transform 0.2s ease, box-shadow 0.25s ease;
}
.trail-minihero__cta-primary:hover,
.trail-minihero__cta-primary:focus {
  background: #8E5526;
  border-color: #8E5526;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(178,107,51,0.28);
  color: #FFF8E8 !important;
}

/* Secondary CTA row — outlined ghost buttons, choose-your-journey */
.trail-minihero__cta-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto clamp(18px, 2.2vw, 26px);
}
.trail-minihero__cta-secondary {
  /* Semi-opaque parchment backdrop so the button reads clearly over the
     topographic texture on the page background. */
  background: rgba(239, 230, 210, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid var(--map-trail);
  color: var(--map-trail);
  font-family: 'Helvetica Neue LT Std', sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}
.trail-minihero__cta-secondary:hover,
.trail-minihero__cta-secondary:focus {
  background: var(--map-trail);
  color: #FFF8E8;
}
.trail-minihero__cta-secondary.is-active {
  background: var(--map-trail);
  color: #FFF8E8;
}

/* Origin statement — small, italic, not promotional */
.trail-minihero__origin {
  font-family: 'Helvetica Neue LT Std', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  color: #8A7558;
  text-align: center;
  margin: 0;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .trail-minihero { padding: 16px 0 12px; }
  .trail-minihero__banner { width: 92%; }
  .trail-minihero__cta-row { gap: 8px; padding: 0 16px; }
  .trail-minihero__cta-secondary {
    font-size: 9.5px; letter-spacing: 0.22em; padding: 8px 12px;
  }
}

/* ============================================================
   THE MAP STAGE
   ============================================================ */
.trail-stage {
  background: var(--panel-bg);
  padding: clamp(20px, 3vw, 36px) 0 clamp(36px, 5vw, 56px);
}
.trail-stage .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(12px, 2vw, 32px);
}

/* The frame containing both the artwork image and the SVG overlay */
.trail-map-frame {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  aspect-ratio: 1024 / 1536;   /* matches the actual artwork dimensions */
  background:
    radial-gradient(ellipse at 35% 25%, #E8DEC4 0%, #DFD1B2 60%, #CFC0A2 100%);
  border: 1px solid #BAA888;
  border-radius: 3px;
  box-shadow:
    0 36px 88px rgba(0,0,0,0.55),
    0 8px 20px rgba(0,0,0,0.3),
    inset 0 0 70px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* The artwork layer */
.trail-map-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;     /* if aspect ratios don't perfectly match, fill the frame */
  object-position: center;
  z-index: 1;
  /* Placeholder visible if image not yet present */
  background: transparent;
  /* If artwork fails to load, the alt text appears */
}
.trail-map-artwork[src=""],
.trail-map-artwork:not([src]) {
  display: none;
}

/* "Artwork pending" notice — visible when no image is loaded */
.trail-map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  z-index: 0;
  font-family: var(--serif);
  font-style: italic;
  color: #6B5A48;
  font-size: 18px;
  line-height: 1.5;
}
.trail-map-placeholder small {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8a7560;
}

/* The interactive SVG overlay layer */
.trail-map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;       /* default — pins re-enable below */
}

/* ============================================================
   TRAIL OVERLAY — VISIBLE by default (overlay is the source of truth)
   ============================================================ */
.trail-map-overlay .trail-glow {
  stroke: var(--map-trail-glow);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0;     /* glow only on selection */
  transition: opacity 0.35s ease;
}
.trail-map-overlay .trail-line {
  stroke: var(--map-trail);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0.95;  /* visible by default — overlay is authoritative */
  transition: opacity 0.35s ease, stroke-width 0.35s ease;
}
.trail-map-overlay .trail-line--spur {
  stroke-dasharray: 8 5;
  stroke-width: 2.6;
  opacity: 0.9;
}

/* When a region/city is selected, highlight the matching segment(s) */
.trail-map-overlay.is-highlighting .trail-line { opacity: 0.4; }
.trail-map-overlay.is-highlighting .trail-segment.is-active .trail-line {
  opacity: 1;
  stroke-width: 4.2;
}
.trail-map-overlay.is-highlighting .trail-segment.is-active .trail-glow {
  opacity: 1;
}

/* ============================================================
   STATE BORDER (overlay-driven, visible always)
   ============================================================ */
.trail-map-overlay .map-state-line {
  stroke: var(--map-pin-ring);
  stroke-width: 1.2;
  stroke-dasharray: 6 4;
  fill: none;
  opacity: 0.7;
}
.trail-map-overlay .map-state-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.12em;
  fill: #6F8867;
  text-anchor: middle;
}

/* ============================================================
   OVERLAY CARTOUCHE STATS (live from data)
   ============================================================ */
.trail-map-overlay .cartouche-stats-bg {
  fill: var(--map-pin-cream);
  stroke: var(--map-pin-ring);
  stroke-width: 0.8;
  opacity: 0.92;
}
.trail-map-overlay .cartouche-stats-num {
  font-family: var(--serif);
  font-size: 42px;
  fill: var(--map-pin-ring);
  text-anchor: middle;
  /* Force LINING figures (tabular). Without this the serif font falls
     back to old-style numerals where "8" and "6" have ascenders that
     rise above cap-height while "1, 2, 0" sit at x-height — the "8"
     appears noticeably taller than its neighbors. Lining-nums + tabular-
     nums = all digits same height AND same width, so the count-up tick
     animation doesn't shift the centering either. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}
.trail-map-overlay .cartouche-stats-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--map-pin-ring);
  text-anchor: middle;
}
.trail-map-overlay .cartouche-divider {
  stroke: var(--map-pin-ring);
  stroke-width: 0.6;
  opacity: 0.4;
}

/* ============================================================
   CITY MARKERS (clickable hotspots, sit on top of the artwork)
   ============================================================ */
.trail-map-overlay .map-pin {
  cursor: pointer;
  pointer-events: auto;       /* opt in for interactivity */
  outline: none;
}
.trail-map-overlay .map-pin__hit {
  /* the invisible hit area for clicks */
  fill: transparent;
  stroke: none;
}
.trail-map-overlay .map-pin__halo {
  fill: var(--map-trail);
  opacity: 0;
  transition: opacity 0.25s ease, r 0.25s ease;
}
.trail-map-overlay .map-pin:hover .map-pin__halo,
.trail-map-overlay .map-pin:focus .map-pin__halo {
  opacity: 0.22;
}
.trail-map-overlay .map-pin.is-active .map-pin__halo {
  opacity: 0.35;
}

/* ─────────────────────────────────────────────────────────────
   UNIFIED PIN MARKER — one design for every stop on the trail:
     • Copper-stroked cream-filled circle (the ring)
     • Type-specific silhouette icon inside (glass / bottle / split / star)
   Brookings flagship uses the same structure with a slightly larger
   ring (set via the SVG r attribute in JS).
   ───────────────────────────────────────────────────────────── */
.trail-map-overlay .map-pin__ring {
  fill: var(--map-pin-cream);
  stroke: var(--map-trail);
  stroke-width: 1;
  transition: stroke-width 0.2s ease, r 0.2s ease;
}
.trail-map-overlay .map-pin:hover .map-pin__ring,
.trail-map-overlay .map-pin:focus .map-pin__ring {
  stroke-width: 1.6;
}
.trail-map-overlay .map-pin.is-active .map-pin__ring {
  stroke-width: 2;
}

/* Silhouette icon inside the ring — copper fill so it reads cleanly
   against the cream interior. Same color as the ring stroke for
   visual cohesion. */
.trail-map-overlay .map-pin__icon {
  fill: var(--map-trail);
  pointer-events: none;
  transition: fill 0.2s ease;
}
.trail-map-overlay .map-pin:hover .map-pin__icon,
.trail-map-overlay .map-pin:focus .map-pin__icon,
.trail-map-overlay .map-pin.is-active .map-pin__icon {
  fill: var(--panel-gold);
}

/* Visible city LABEL + STOP COUNT (overlay-driven, ALWAYS visible).
   Cartographic text-stroke treatment: each text element paints a thick
   cream halo BEHIND its glyphs (via paint-order: stroke fill), so the
   typography reads clearly over any artwork without needing a heavy
   plaque rectangle. Much more like a real atlas. The .map-pin__label-bg
   rect from JS is left transparent — we keep it for backwards
   compatibility but no longer rely on it for legibility. */
.trail-map-overlay .map-pin__label-bg {
  fill: none;
  stroke: none;
}
.trail-map-overlay .map-pin__label {
  font-family: var(--serif);
  font-size: 18px;
  fill: #FFFFFF;
  font-weight: 400;
  paint-order: stroke fill;
  stroke: #000000;
  stroke-width: 4.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.trail-map-overlay .map-pin--flagship .map-pin__label {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.04em;
  stroke-width: 5.5;
}
.trail-map-overlay .map-pin__count {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: #FFFFFF;
  opacity: 1;
  paint-order: stroke fill;
  stroke: #000000;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.trail-map-overlay .map-pin--flagship .map-pin__begin {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  fill: #FFFFFF;
  paint-order: stroke fill;
  stroke: #000000;
  stroke-width: 4.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Hover/active just emphasizes the marker — label always visible */
.trail-map-overlay .map-pin:hover .map-pin__label,
.trail-map-overlay .map-pin.is-active .map-pin__label {
  fill: var(--map-trail);
  font-weight: 700;
}

/* Calibration mode — adds visible debugging info to pin positions.
   Toggle by adding ?calibrate=1 to the URL. */
.trail-map-overlay.is-calibrating .map-pin__ring,
.trail-map-overlay.is-calibrating .map-pin__halo { opacity: 1 !important; }
.trail-map-overlay.is-calibrating .map-pin__crosshair {
  stroke: #ff0066;
  stroke-width: 1;
  fill: none;
}
.trail-map-overlay .map-pin__crosshair { display: none; }
.trail-map-overlay.is-calibrating .map-pin__crosshair { display: block; }

/* ============================================================
   CONTROL BAR (below map) — same as v3
   ============================================================ */
.trail-controls-bar {
  background: var(--panel-bg);
  padding: 26px 0;
  border-top: 1px solid var(--panel-rule);
  border-bottom: 1px solid var(--panel-rule);
}
.trail-controls-bar .container {
  max-width: 1100px; margin: 0 auto;
  padding: 0 clamp(12px, 2vw, 32px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.trail-controls-bar__search { position: relative; flex: 1 1 280px; max-width: 420px; }
.trail-controls-bar__search input {
  width: 100%;
  background: var(--panel-bg-card); border: 1px solid var(--panel-rule);
  color: var(--panel-cream);
  font-family: var(--sans); font-size: 14px;
  padding: 12px 14px 12px 38px; border-radius: 3px;
}
.trail-controls-bar__search input::placeholder { color: var(--panel-cream-mut); font-style: italic; }
.trail-controls-bar__search input:focus { outline: none; border-color: var(--panel-gold); }
.trail-controls-bar__search::before {
  content: "⌕"; position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%); color: var(--panel-gold-soft); font-size: 16px;
  pointer-events: none;
}
.trail-controls-bar__filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trail-controls-bar__chip {
  /* Semi-opaque backdrop so filter chips stand out against the topo
     texture in the background. */
  background: rgba(14, 13, 11, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid var(--panel-rule);
  color: var(--panel-cream-dim);
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s; line-height: 1;
}
.trail-controls-bar__chip:hover { border-color: var(--panel-gold-soft); color: var(--panel-cream); }
.trail-controls-bar__chip.is-active { background: var(--panel-gold); border-color: var(--panel-gold); color: var(--panel-bg); }
.trail-controls-bar__divider { width: 1px; height: 16px; background: var(--panel-rule); margin: 0 4px; }
.trail-controls-bar__locate {
  margin-left: auto;
  /* Semi-opaque backdrop for the "use my location" button so it reads
     over the topo texture. */
  background: rgba(14, 13, 11, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid var(--panel-gold-soft);
  color: var(--panel-gold-soft);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 3px; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.trail-controls-bar__locate:hover { background: var(--panel-gold-soft); color: var(--panel-bg); }
.trail-controls-bar__locate:disabled { opacity: 0.5; cursor: wait; }

/* ============================================================
   RESULTS + CHAPTERS + TRADE + STATUS (same patterns as v3)
   ============================================================ */
.trail-results { background: var(--panel-bg); padding: clamp(40px, 5vw, 60px) 0; }
.trail-results .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(12px, 2vw, 32px); }
.trail-results__header {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 28px;
}
.trail-results__heading {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2;
  color: var(--panel-cream); margin: 0;
}
.trail-results__heading em { color: var(--panel-gold); font-style: italic; }
.trail-results__sub {
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--panel-cream-mut); margin: 0;
}
.trail-results__close {
  background: transparent; border: none; color: var(--panel-gold-soft);
  font-family: var(--sans); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.trail-results__close:hover { color: var(--panel-gold); }
.trail-results__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
@media (min-width: 720px)  { .trail-results__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .trail-results__grid { grid-template-columns: repeat(3, 1fr); } }
.trail-stop {
  background: var(--panel-bg-card); border: 1px solid var(--panel-rule);
  border-radius: 4px; padding: 22px 20px;
  transition: border-color 0.25s, transform 0.25s;
}
.trail-stop:hover { border-color: var(--panel-gold-soft); transform: translateY(-2px); }
.trail-stop__badges { display: flex; gap: 6px; margin-bottom: 12px; }
.trail-stop__badge {
  font-family: var(--sans); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; color: var(--panel-bg);
}
.trail-stop__badge.type-pour { background: var(--panel-gold); }
.trail-stop__badge.type-bottle { background: #7a9a7a; }
.trail-stop__name { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.22; color: var(--panel-cream); margin: 0 0 4px 0; }
.trail-stop__location { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--panel-gold-soft); margin: 0 0 10px 0; }
.trail-stop__address { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--panel-cream-dim); margin: 0; }
.trail-stop__description {
  font-family: var(--serif); font-style: italic; font-size: 13.5px;
  line-height: 1.55; color: var(--panel-cream-mut);
  margin: 10px 0 0 0; padding-top: 10px; border-top: 1px solid var(--panel-rule);
}
.trail-stop__action {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--panel-gold-soft); text-decoration: none;
  margin-top: 14px; transition: color 0.2s, gap 0.2s;
}
.trail-stop__action:hover { color: var(--panel-gold); gap: 10px; }
.trail-results__empty {
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--panel-cream-mut); text-align: center; padding: 60px 24px;
  grid-column: 1 / -1;
}

.trail-chapters { background: var(--panel-bg-card); padding: clamp(50px, 7vw, 80px) 0; border-top: 1px solid var(--panel-rule); }
.trail-chapters .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.trail-chapters__intro { text-align: center; max-width: 680px; margin: 0 auto clamp(36px, 5vw, 56px) auto; }
.trail-chapters__eyebrow {
  display: inline-block;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--panel-gold); margin-bottom: 14px;
}
.trail-chapters__heading {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 3.5vw, 36px);
  color: var(--panel-cream); margin: 0 0 12px 0;
}
.trail-chapters__sub { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--panel-cream-dim); margin: 0; }
.trail-chapters__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.trail-chapter {
  background: var(--panel-bg); border: 1px solid var(--panel-rule);
  padding: 22px 20px; border-radius: 4px; cursor: pointer;
  transition: background 0.3s, transform 0.3s, border-color 0.3s;
  text-align: left; font-family: inherit;
}
.trail-chapter:hover, .trail-chapter:focus { border-color: var(--panel-gold); transform: translateY(-2px); outline: none; }
.trail-chapter__num { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--panel-gold-soft); margin: 0 0 4px 0; }
.trail-chapter__name { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--panel-cream); margin: 0 0 8px 0; }
.trail-chapter__meta { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--panel-cream-mut); margin: 0 0 12px 0; }
.trail-chapter__copy { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--panel-cream-dim); margin: 0; }
.trail-chapter.is-active { background: linear-gradient(180deg, rgba(181,122,69,0.14) 0%, var(--panel-bg) 80%); border-color: var(--panel-gold); }
.trail-chapter.is-active .trail-chapter__name { color: var(--panel-gold-soft); }

.trail-status { background: var(--panel-bg); padding: 10px 24px; font-family: var(--sans); font-size: 13px; color: var(--panel-cream-dim); text-align: center; }
.trail-status.is-error { color: #d99a9a; }

.trail-trade { background: var(--panel-bg); padding: clamp(60px, 8vw, 100px) 0; text-align: center; border-top: 1px solid var(--panel-rule); }
.trail-trade .container { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.trail-trade__heading { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 4vw, 42px); color: var(--panel-cream); margin: 16px 0 18px 0; }
.trail-trade__body { font-family: var(--sans); font-size: 15px; line-height: 1.7; color: var(--panel-cream-dim); margin: 0 0 28px 0; }
.trail-trade__cta {
  display: inline-block; background: var(--panel-gold); border: 1px solid var(--panel-gold);
  color: var(--panel-bg); font-family: var(--sans); font-size: 13px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 16px 32px; border-radius: 3px; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.trail-trade__cta:hover { background: #C68A52; border-color: #C68A52; }

@media (max-width: 760px) {
  .trail-controls-bar__locate { margin-left: 0; width: 100%; }
  .trail-map-overlay .map-pin__tooltip-name { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .trail-map-overlay .trail-glow,
  .trail-map-overlay .trail-line,
  .trail-map-overlay .map-pin__ring,
  .trail-map-overlay .map-pin__halo { transition: none !important; }
}

/* ============================================================
   PREMIUM ANIMATION PASS
   Heritage-atlas feel: nothing flashy, everything deliberate.
   ============================================================ */

/* ─── 1. Parchment background ──────────────────────────────
   NOTE: previously this lived on a body::before pseudo-element with
   position:fixed so it could be transformed (Ken-Burns drift effect).
   iOS Safari refuses to render fixed pseudo-elements with background-
   images reliably — the background disappeared entirely on mobile.
   Reverted to body { background-image } (set above near the top of
   this file, lines ~45-53) which works on every browser. The Ken-Burns
   drift is sacrificed; could be re-added later with a JS-driven
   transform on a real DOM element if the effect is missed. */

/* ─── 2. Hero stack cascades in on page load ───────────────── */
.trail-minihero__banner,
.trail-minihero__headline,
.trail-minihero__subhead,
.trail-minihero__cta-wrap,
.trail-minihero__cta-row,
.trail-minihero__origin {
  opacity: 0;
  transform: translateY(8px);
  animation: hero-fade-up 0.7s cubic-bezier(0.2, 0.65, 0.3, 1) forwards;
}
.trail-minihero__banner   { animation-delay: 0.05s; }
.trail-minihero__headline { animation-delay: 0.20s; }
.trail-minihero__subhead  { animation-delay: 0.35s; }
.trail-minihero__cta-wrap { animation-delay: 0.50s; }
.trail-minihero__cta-row  { animation-delay: 0.65s; }
.trail-minihero__origin   { animation-delay: 0.80s; }
@keyframes hero-fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── 2b. Map artwork fades in softly ───────────────────────
   The illustrated parchment map appears like ink absorbing into
   paper — opacity 0 → 1 with a subtle saturation rise so it feels
   like the artwork is "developing" onto the page. */
.trail-map-artwork {
  animation: artwork-develop 0.6s ease-out 0.05s backwards;
}
@keyframes artwork-develop {
  from {
    opacity: 0;
    filter: saturate(0.4);
  }
  to {
    opacity: 1;
    filter: saturate(1);
  }
}

/* ─── 2c. The whole page subtly fades in from cream ──────────
   Body starts at 0.65 opacity (warm cream paper visible) and lifts
   to full over 0.5s — gives the impression the page is being drawn
   onto fresh paper. Doesn't delay interactivity (content is still
   visible/clickable from frame 1). */
body {
  animation: page-paper-warmup 0.5s ease-out backwards;
}
@keyframes page-paper-warmup {
  from { opacity: 0.65; }
  to   { opacity: 1; }
}

/* ─── 3. Trail line draws outward from Brookings ─────────────
   Initialized via stroke-dasharray = path total length set in JS,
   then dashoffset animates to 0 to "ink" the line. With segments
   ordered to start at Brookings (see TRAIL_SEGMENTS in JS), the
   line appears to fan OUTWARD from the brand's home.
   Delayed until 1.4s so Brookings (the origin pin) gets a clear
   solo moment BEFORE the trail begins fanning out from it. */
.trail-map-overlay .trail-line.is-drawing {
  animation: trail-draw 2.0s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  animation-delay: 1.4s;
}
.trail-map-overlay .trail-glow.is-drawing {
  animation: trail-draw 2.0s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  animation-delay: 1.4s;
}
@keyframes trail-draw {
  to { stroke-dashoffset: 0; }
}

/* ─── 4. Pins fade in radially outward from Brookings ───────
   Each .map-pin gets a --pin-delay CSS variable set inline by JS
   (sorted by distance from the Brookings pin). The keyframe applies
   the same fade+scale to every pin; only the delay differs.
   IMPORTANT: animation is gated behind .is-revealing which JS adds
   AFTER setting --pin-delay. Without this gate, the animation would
   start the moment the pin is appended (with default --pin-delay of 0s)
   and the later --pin-delay change would be ignored — all pins would
   pop in simultaneously instead of staggered. */
.trail-map-overlay .map-pin {
  opacity: 0;
  transform-origin: center center;
}
.trail-map-overlay .map-pin.is-revealing {
  animation: pin-pop-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: var(--pin-delay, 0s);
}
@keyframes pin-pop-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── 4a. BROOKINGS — the origin pin gets a solo moment ─────
   Lands EARLY (before the trail starts drawing), drops in from
   above with a satisfying overshoot, and emits a one-time gold
   halo bloom so the user understands this is where the trail
   begins. Class .map-pin--origin is added by JS to the first pin
   after the distance-sort (which IS Brookings, distance = 0). */
.trail-map-overlay .map-pin.is-revealing.map-pin--origin {
  animation: origin-arrive 0.9s cubic-bezier(0.34, 1.45, 0.5, 1) forwards;
  animation-delay: 0.5s;
}
@keyframes origin-arrive {
  0%   { opacity: 0; transform: translateY(-22px) scale(0.4); }
  55%  { opacity: 1; transform: translateY(0) scale(1.22); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Halo bloom — temporarily inflates the cream halo around Brookings
   to draw the eye, then settles back to the resting size. */
.trail-map-overlay .map-pin--origin.is-revealing .map-pin__halo {
  animation: origin-halo-bloom 1.8s ease-out 0.7s forwards;
}
@keyframes origin-halo-bloom {
  0%   { opacity: 0; r: 8; }
  35%  { opacity: 0.55; r: 58; }
  100% { opacity: 0.18; r: 26; }
}

/* ─── 4b. City labels appear just AFTER their marker ─────────
   Each label/count/begin element animates with an additional 150ms
   delay from its pin's delay, so the label seems to "settle in"
   after the marker arrives. Also gated behind .is-revealing on the
   parent .map-pin so the delays are honored. */
.trail-map-overlay .map-pin__label-bg,
.trail-map-overlay .map-pin__label,
.trail-map-overlay .map-pin__count,
.trail-map-overlay .map-pin--flagship .map-pin__begin {
  opacity: 0;
}
.trail-map-overlay .map-pin.is-revealing .map-pin__label-bg,
.trail-map-overlay .map-pin.is-revealing .map-pin__label,
.trail-map-overlay .map-pin.is-revealing .map-pin__count,
.trail-map-overlay .map-pin--flagship.is-revealing .map-pin__begin {
  animation: label-settle-in 0.35s ease-out forwards;
  animation-delay: calc(var(--pin-delay, 0s) + 0.15s);
}
@keyframes label-settle-in {
  to { opacity: 1; }
}

/* ─── 5. Pin hover bloom — confident, alive ────────────────── */
.trail-map-overlay .map-pin__halo {
  transition: opacity 0.35s ease, r 0.35s ease;
}
.trail-map-overlay .map-pin:hover .map-pin__halo,
.trail-map-overlay .map-pin:focus .map-pin__halo {
  opacity: 0.32;
  r: 26;
}
.trail-map-overlay .map-pin.is-active .map-pin__halo {
  opacity: 0.45;
  r: 28;
}
.trail-map-overlay .map-pin__icon {
  transition: fill 0.25s ease;
}

/* ─── 6. Chapter cards reveal on scroll ─────────────────────
   Initial state hidden; JS adds .is-in-view via IntersectionObserver
   when the card scrolls into the viewport. */
.trail-chapter {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.65, 0.3, 1),
              transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1);
}
.trail-chapter.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 7. Flagship pulse — Brookings only.
   Slow gold sonar ring expanding outward every ~6 seconds. Says
   "this is the origin" without being noisy. Delayed 2s after page
   load so the pin's pop-in animation finishes first. */
.trail-map-overlay .map-pin__pulse {
  fill: none;
  stroke: var(--panel-gold);
  stroke-width: 0;
  opacity: 0;
  pointer-events: none;
  animation: flagship-pulse 6s ease-out infinite;
  animation-delay: 2s;
}
@keyframes flagship-pulse {
  0%   { r: 14; opacity: 0;    stroke-width: 0; }
  6%   { opacity: 0.55;        stroke-width: 1.8; }
  85%  { r: 36; opacity: 0;    stroke-width: 0; }
  100% { r: 36; opacity: 0;    stroke-width: 0; }
}

/* ─── 8. Respect reduced-motion preference ──────────────────
   Users who've requested less motion get the final states
   immediately with no animation. */
@media (prefers-reduced-motion: reduce) {
  body,
  .trail-map-artwork,
  .trail-minihero__banner,
  .trail-minihero__headline,
  .trail-minihero__subhead,
  .trail-minihero__cta-wrap,
  .trail-minihero__cta-row,
  .trail-minihero__origin,
  .trail-map-overlay .map-pin,
  .trail-map-overlay .map-pin__label-bg,
  .trail-map-overlay .map-pin__label,
  .trail-map-overlay .map-pin__count,
  .trail-map-overlay .map-pin--flagship .map-pin__begin {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .trail-chapter {
    opacity: 1 !important;
    transform: none !important;
  }
  .trail-map-overlay .trail-line.is-drawing,
  .trail-map-overlay .trail-glow.is-drawing {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .trail-map-overlay .map-pin__pulse {
    animation: none !important;
    opacity: 0 !important;
  }
}