/*!
 * EaseAway Polish Layer — 2026-04-20
 * Visual upgrade from "template-generic" to "family travel concierge".
 * Load AFTER each page's inline <style>; this is additive and respects existing tokens.
 *
 * Design principles applied (per plan):
 *   - Glassmorphism on cards (depth without gimmick)
 *   - Warm palette: forest/terracotta/cream (instead of generic navy/coral)
 *   - Softer rounding (24px cards, 14px buttons) — friendly, not corporate
 *   - Hover lift + border-shift transitions (no pulse/shimmer anxiety triggers)
 *   - Real data only — no fake spinners, no AI-generated hero images
 *   - Typography up-weighted (Fraunces 800 for headlines) to stop looking like Bootstrap
 *   - Motion via CSS transitions only — no JS animation libs
 */

/* =========================================================================
   TOKENS (additive — do not overwrite existing page CSS unless explicitly)
   ========================================================================= */
:root {
  --ea-forest:       #1b2e1f;   /* Deep, nature-rooted. Primary text + brand anchor. */
  --ea-forest-soft:  #2d4a33;   /* Secondary text / nav hover */
  --ea-terracotta:   #e8734a;   /* Warm, family. Primary action color */
  --ea-terracotta-hover: #d65f37;
  --ea-cream:        #f9f7f2;   /* Background — softer than pure white */
  --ea-cream-deep:   #efeae0;   /* Section break */
  --ea-sand:         #e8dcc5;   /* Card border accent */
  --ea-amber-warn:   #c05621;   /* 70–90% budget */
  --ea-coral-alert:  #c53030;   /* >90% budget / past-cutoff flag */
  --ea-mint-ok:      #22543d;   /* healthy budget, verified data */

  --ea-glass-bg:     rgba(255, 255, 255, 0.72);
  --ea-glass-border: rgba(255, 255, 255, 0.45);
  --ea-glass-blur:   12px;

  --ea-radius-sm:    10px;
  --ea-radius-md:    18px;
  --ea-radius-lg:    24px;
  --ea-radius-pill:  999px;

  --ea-shadow-soft:  0 10px 30px -10px rgba(27, 46, 31, 0.12);
  --ea-shadow-lift:  0 18px 40px -14px rgba(27, 46, 31, 0.22);
  --ea-shadow-focus: 0 0 0 3px rgba(232, 115, 74, 0.25);

  --ea-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ea-ease-story:   cubic-bezier(0.22, 1, 0.36, 1);

  /* V2 palette extensions (DESIGN_V2.md §3) — warmth + field-guide depth */
  --ea-paper:        #fbf8f0;   /* Slightly warmer than cream */
  --ea-ink:          #0f1c10;   /* Deepest forest-black, display accent */
  --ea-dust-amber:   #c89e4d;   /* Weathered field-guide highlight */
  --ea-moss:         #5a7c3d;   /* Mid-tone topo green */
  --ea-clay:         #8b5a3c;   /* Warm clay-brown detail accent */
  --ea-rule-hair:    rgba(232, 220, 197, 0.8);
}

/* =========================================================================
   GLOBAL SURFACE — body background + typography polish
   Scoped so pages that opt in get it; unscoped pages keep their look.
   Add class="ea-polish" to <body> to enable on a page.
   ========================================================================= */
body.ea-polish {
  background:
    radial-gradient(circle at 85% -10%, rgba(232, 115, 74, 0.08) 0%, transparent 45%),
    radial-gradient(circle at -5% 100%, rgba(27, 46, 31, 0.06) 0%, transparent 50%),
    var(--ea-cream);
  color: var(--ea-forest);
  letter-spacing: -0.01em;
}

body.ea-polish h1,
body.ea-polish h2,
body.ea-polish .hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ea-forest);
}

/* =========================================================================
   GLASS CARDS — applies to anything with .ea-card OR .ea-polish .card
   ========================================================================= */
body.ea-polish .ea-card,
body.ea-polish .card,
body.ea-polish .hotel-card,
body.ea-polish .act-card-v2,
body.ea-polish .rest-card-v2 {
  background: var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(var(--ea-glass-blur));
  backdrop-filter: blur(var(--ea-glass-blur));
  border: 1px solid var(--ea-glass-border);
  border-radius: var(--ea-radius-lg);
  box-shadow: var(--ea-shadow-soft);
  transition: transform 0.25s var(--ea-ease),
              box-shadow 0.25s var(--ea-ease),
              border-color 0.2s var(--ea-ease);
}

body.ea-polish .ea-card:hover,
body.ea-polish .card:hover,
body.ea-polish .hotel-card:hover,
body.ea-polish .act-card-v2:hover,
body.ea-polish .rest-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: var(--ea-shadow-lift);
  border-color: var(--ea-terracotta);
}

/* =========================================================================
   BUTTONS — confident, rounded, action-oriented
   ========================================================================= */
body.ea-polish .ea-btn,
body.ea-polish .cta-button,
body.ea-polish .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--ea-radius-md);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;   /* no uppercase corporate spacing */
  text-transform: none;
  border: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--ea-terracotta), var(--ea-terracotta-hover));
  box-shadow: 0 4px 14px -4px rgba(232, 115, 74, 0.5);
  transition: transform 0.15s var(--ea-ease),
              box-shadow 0.2s var(--ea-ease),
              background 0.2s var(--ea-ease);
  text-decoration: none;
}

body.ea-polish .ea-btn:hover,
body.ea-polish .cta-button:hover,
body.ea-polish .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(232, 115, 74, 0.55);
}

body.ea-polish .ea-btn:active,
body.ea-polish .cta-button:active,
body.ea-polish .btn-primary:active {
  transform: translateY(0) scale(0.98);
}

body.ea-polish .ea-btn--ghost {
  background: transparent;
  color: var(--ea-forest);
  border: 1.5px solid var(--ea-sand);
  box-shadow: none;
}

body.ea-polish .ea-btn--ghost:hover {
  border-color: var(--ea-forest);
  background: var(--ea-cream-deep);
  box-shadow: none;
}

/* =========================================================================
   SCROLL-TRIGGERED REVEALS — set .ea-reveal on any element; pair with
   the IntersectionObserver boot script in the HTML page.
   ========================================================================= */
body.ea-polish .ea-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ea-ease),
              transform 0.6s var(--ea-ease);
  will-change: opacity, transform;
}

body.ea-polish .ea-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.ea-polish .ea-reveal[data-delay="1"].is-visible { transition-delay: 0.08s; }
body.ea-polish .ea-reveal[data-delay="2"].is-visible { transition-delay: 0.16s; }
body.ea-polish .ea-reveal[data-delay="3"].is-visible { transition-delay: 0.24s; }
body.ea-polish .ea-reveal[data-delay="4"].is-visible { transition-delay: 0.32s; }

/* Respect user preferences — no motion for those who opt out */
@media (prefers-reduced-motion: reduce) {
  body.ea-polish .ea-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.ea-polish *, body.ea-polish *::before, body.ea-polish *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   STORY HERO — used on index.html redesign
   ========================================================================= */
body.ea-polish .ea-hero {
  position: relative;
  padding: clamp(48px, 9vw, 120px) 24px clamp(40px, 7vw, 96px);
  overflow: hidden;
}

body.ea-polish .ea-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 820px) {
  body.ea-polish .ea-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

body.ea-polish .ea-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(232, 115, 74, 0.12);
  color: var(--ea-terracotta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--ea-radius-pill);
  margin-bottom: 22px;
}

body.ea-polish .ea-hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(36px, 6.5vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: var(--ea-forest);
  margin-bottom: 22px;
}

body.ea-polish .ea-hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ea-terracotta);
}

body.ea-polish .ea-hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--ea-forest-soft);
  margin-bottom: 28px;
  max-width: 560px;
}

@media (max-width: 820px) {
  body.ea-polish .ea-hero-sub { margin-left: auto; margin-right: auto; }
}

body.ea-polish .ea-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  body.ea-polish .ea-hero-ctas { justify-content: center; }
}

/* Hero photo mosaic — real Google Places photos of real landmarks in the 13 cities
   we cover. One large hero photo + smaller stacked photos, all attributed. */
body.ea-polish .ea-hero-photos {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

body.ea-polish .ea-hero-photo {
  position: relative;
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  box-shadow: var(--ea-shadow-soft);
  background: var(--ea-cream-deep);
  aspect-ratio: 1 / 1;
}

body.ea-polish .ea-hero-photo--lead {
  grid-row: span 2;
  aspect-ratio: 3 / 5;
}

body.ea-polish .ea-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ea-ease);
}

body.ea-polish .ea-hero-photo:hover img { transform: scale(1.04); }

body.ea-polish .ea-hero-photo-caption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: rgba(27, 46, 31, 0.82);
  color: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.3;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body.ea-polish .ea-hero-photo-caption b {
  display: block;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 1px;
}

body.ea-polish .ea-hero-photo-caption .sub {
  opacity: 0.82;
  font-size: 10.5px;
}

body.ea-polish .ea-hero-photo-note {
  font-size: 11px;
  color: var(--ea-forest-soft);
  font-style: italic;
  text-align: center;
  margin-top: 14px;
  opacity: 0.8;
}

@media (max-width: 820px) {
  body.ea-polish .ea-hero-photos { margin-top: 20px; }
}

/* --- Real destination photo grid (appears below vibe tiles) --- */
body.ea-polish .ea-destinations {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) 24px;
}

body.ea-polish .ea-destinations-head {
  text-align: center;
  margin-bottom: 24px;
}

body.ea-polish .ea-destinations-head h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin-bottom: 6px;
}

body.ea-polish .ea-destinations-head p {
  color: var(--ea-forest-soft);
  font-size: 14.5px;
}

body.ea-polish .ea-dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(18px, 2vw, 24px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* V2 editorial PLATE card (2026-04-24): photo on top, cream text block below
   with the city name, headline landmark, and 4 top picks pulled from real
   data/attractions.json. Replaces the old single-landmark overlay-on-photo
   design. Card is NO LONGER fixed aspect-ratio — content determines height
   within the grid row. */
body.ea-polish .ea-dest-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  background: var(--ea-paper);
  box-shadow: var(--ea-shadow-soft);
  cursor: pointer;
  transition: transform 0.25s var(--ea-ease), box-shadow 0.25s var(--ea-ease);
  text-decoration: none;
  color: var(--ea-forest);
  border: 1px solid var(--ea-rule-hair);
}
body.ea-polish .ea-dest-card__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ea-forest) 0%, var(--ea-forest-soft) 55%, var(--ea-terracotta) 140%);
}
body.ea-polish .ea-dest-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ea-ease);
}
body.ea-polish .ea-dest-card:hover .ea-dest-card__photo img { transform: scale(1.04); }
body.ea-polish .ea-dest-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.ea-polish .ea-dest-card__city {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--ea-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
body.ea-polish .ea-dest-card__landmark {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ea-forest-soft);
  margin: -4px 0 0;
}
body.ea-polish .ea-dest-card__landmark-rating {
  display: inline-block;
  margin-left: 6px;
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ea-dust-amber);
  letter-spacing: 0.02em;
}
body.ea-polish .ea-dest-card__picks {
  list-style: none;
  padding: 10px 0 0;
  margin: 0;
  border-top: 1px solid var(--ea-rule-hair);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.ea-polish .ea-dest-card__pick {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ea-forest);
  padding-left: 14px;
  position: relative;
  transition: color 0.2s var(--ea-ease);
}
body.ea-polish .ea-dest-card__pick::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--ea-dust-amber);
  font-weight: 700;
  font-size: 1.1rem;
  font-style: normal;
  line-height: 1.15;
}
body.ea-polish .ea-dest-card:hover .ea-dest-card__pick { color: var(--ea-ink); }
body.ea-polish .ea-dest-card__foot {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ea-forest-soft);
  opacity: 0.7;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.ea-polish .ea-dest-card__foot::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--ea-dust-amber);
  opacity: 0.6;
}

body.ea-polish .ea-dest-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ea-shadow-lift);
  border-color: var(--ea-sand);
}

/* V2 fallback: when the hero photo fails to load (expired session URL,
   404, etc.) the photo slot renders as a mini topographic plate with a
   "PLATE · FORTHCOMING" stamp. The card body below remains the same
   editorial layout — city name, landmark, picks — so no information is
   lost even when the photo's missing. */
body.ea-polish .ea-dest-card--no-photo .ea-dest-card__photo {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'><g fill='none' stroke='%235a7c3d' stroke-width='0.6' opacity='0.4'><path d='M-20 40 Q80 22 180 56 T420 40'/><path d='M-20 80 Q80 64 180 96 T420 76'/><path d='M-20 120 Q80 108 180 136 T420 116'/><path d='M-20 160 Q80 148 180 176 T420 156'/><path d='M-20 200 Q80 192 180 216 T420 196'/><path d='M-20 240 Q80 234 180 256 T420 236'/><path d='M-20 280 Q80 276 180 296 T420 276'/></g></svg>") center/cover,
    linear-gradient(165deg, #fbf8f0 0%, #f5efdf 50%, #ede4cd 100%);
  position: relative;
}
body.ea-polish .ea-dest-card--no-photo .ea-dest-card__photo::after {
  content: 'Plate · forthcoming';
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ea-dust-amber);
  opacity: 0.85;
  border: 1px solid var(--ea-dust-amber);
  padding: 3px 9px;
  border-radius: 2px;
  transform: rotate(2deg);
  background: rgba(251, 248, 240, 0.5);
  pointer-events: none;
}

/* =========================================================================
   SECTION: what EaseAway actually does (narrative 3-up)
   ========================================================================= */
body.ea-polish .ea-proof-row {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 820px) {
  body.ea-polish .ea-proof-row { grid-template-columns: 1fr; }
}

body.ea-polish .ea-proof-card {
  background: var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(var(--ea-glass-blur));
  backdrop-filter: blur(var(--ea-glass-blur));
  border: 1px solid var(--ea-glass-border);
  border-radius: var(--ea-radius-lg);
  padding: 28px;
  text-align: left;
}

body.ea-polish .ea-proof-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
}

body.ea-polish .ea-proof-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ea-forest);
  margin-bottom: 8px;
}

body.ea-polish .ea-proof-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ea-forest-soft);
}

/* =========================================================================
   VIBE TILES (Discovery Hub — Phase 7)
   ========================================================================= */
body.ea-polish .ea-vibes {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 24px;
}

body.ea-polish .ea-vibes-head {
  text-align: center;
  margin-bottom: 32px;
}

body.ea-polish .ea-vibes-head h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin-bottom: 6px;
}

body.ea-polish .ea-vibes-head p {
  color: var(--ea-forest-soft);
  font-size: 15px;
}

body.ea-polish .ea-vibes-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

@media (max-width: 1100px) {
  body.ea-polish .ea-vibes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  body.ea-polish .ea-vibes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

body.ea-polish .ea-vibe-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 22px;
  border-radius: var(--ea-radius-lg);
  border: 1.5px solid var(--ea-sand);
  background: var(--ea-glass-bg);
  -webkit-backdrop-filter: blur(var(--ea-glass-blur));
  backdrop-filter: blur(var(--ea-glass-blur));
  cursor: pointer;
  transition: transform 0.2s var(--ea-ease),
              box-shadow 0.2s var(--ea-ease),
              border-color 0.2s var(--ea-ease);
  text-decoration: none;
  color: var(--ea-forest);
}

body.ea-polish .ea-vibe-tile:hover {
  transform: translateY(-3px);
  border-color: var(--ea-terracotta);
  box-shadow: var(--ea-shadow-lift);
}

body.ea-polish .ea-vibe-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
}

body.ea-polish .ea-vibe-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

body.ea-polish .ea-vibe-cities {
  font-size: 12px;
  color: var(--ea-forest-soft);
  line-height: 1.45;
}

/* =========================================================================
   STAT STRIP — honest numbers from real data
   ========================================================================= */
body.ea-polish .ea-stats {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  text-align: center;
  border-top: 1px solid var(--ea-sand);
  border-bottom: 1px solid var(--ea-sand);
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--ea-radius-md);
}

@media (max-width: 820px) {
  body.ea-polish .ea-stats { grid-template-columns: repeat(2, 1fr); }
}

body.ea-polish .ea-stat-n {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--ea-forest);
  letter-spacing: -0.02em;
  line-height: 1;
}

body.ea-polish .ea-stat-l {
  font-size: 11px;
  color: var(--ea-forest-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* =========================================================================
   HONESTY NOTE — small italic subtext with a source-link feel
   ========================================================================= */
body.ea-polish .ea-source-note {
  font-size: 12px;
  color: var(--ea-forest-soft);
  font-style: italic;
  text-align: center;
  margin: 24px auto;
  max-width: 720px;
  padding: 0 24px;
  opacity: 0.8;
}

/* =========================================================================
   CTA BANNER — bottom of page, full bleed, warm
   ========================================================================= */
body.ea-polish .ea-cta-banner {
  max-width: 1100px;
  margin: clamp(40px, 6vw, 80px) auto;
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--ea-radius-lg);
  background: linear-gradient(135deg, var(--ea-forest) 0%, var(--ea-forest-soft) 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

body.ea-polish .ea-cta-banner::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(232, 115, 74, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

body.ea-polish .ea-cta-banner h2 {
  color: #fff;
  font-size: clamp(24px, 3.4vw, 36px);
  margin-bottom: 10px;
  position: relative;
}

body.ea-polish .ea-cta-banner p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 520px;
  margin: 0 auto 22px;
  font-size: 15px;
  line-height: 1.5;
  position: relative;
}

body.ea-polish .ea-cta-banner .ea-btn {
  position: relative;
}

/* =========================================================================
   EDITORIAL SCROLL-STORY LAYER — Session 1 (2026-04-21)
   Magazine-style vertical narrative for index.html. 4 chapters:
   morning coffee → afternoon trail → evening cutoff → CTA.
   Uses existing --ea-* tokens; no new tokens needed.
   Zero Tailwind, zero framework, zero infinite-pulse animations.
   ========================================================================= */

/* Chapter wrapper — one full editorial "spread" per viewport */
.ea-chapter {
  /* V2 (2026-04-24): chapters flow content-sized — no forced viewport height.
     The old 80vh/100vh values created 4+ viewports of whitespace before users
     reached any destination content. Editorial tempo comes from type + hairline
     dividers, not from forcing every section to own the screen. */
  min-height: auto;
  display: flex;
  align-items: center;
  padding: clamp(48px, 7vh, 96px) 6vw;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ea-ease), transform 0.9s var(--ea-ease);
  position: relative;
}
@media (max-width: 768px) {
  .ea-chapter {
    min-height: auto;
    padding: clamp(48px, 9vh, 88px) 6vw;
  }
}
.ea-chapter.visible,
.ea-chapter.is-visible,
.ea-chapter.ea-reveal--show {
  opacity: 1;
  transform: translateY(0);
}

/* Per-chapter background variants — subtle, warm, not corporate */
.ea-chapter--morning   { background: #fdfbf7; }
.ea-chapter--afternoon { background: #ffffff; }
.ea-chapter--evening   { background: #fcf6ef; }
.ea-chapter--cta       {
  background: var(--ea-forest);
  color: var(--ea-cream);
  text-align: center;
}
.ea-chapter--cta .ea-editorial-h,
.ea-chapter--cta .ea-editorial-p { color: var(--ea-cream); }

/* Asymmetric 2-column grid — stacks on mobile */
.ea-chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 820px) {
  .ea-chapter-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Flip variant — swap photo and text order (for alternating chapters) */
.ea-chapter-grid--flip .ea-chapter-text  { order: 2; }
.ea-chapter-grid--flip .ea-chapter-photo { order: 1; }
@media (max-width: 820px) {
  /* On mobile, always photo-above-text regardless of flip */
  .ea-chapter-grid--flip .ea-chapter-text  { order: 2; }
  .ea-chapter-grid--flip .ea-chapter-photo { order: 1; }
  .ea-chapter-grid .ea-chapter-text  { order: 2; }
  .ea-chapter-grid .ea-chapter-photo { order: 1; }
}

/* Tiny terracotta eyebrow label — editorial time stamp pattern */
.ea-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ea-terracotta);
  margin-bottom: 1.2rem;
}
.ea-chapter--cta .ea-eyebrow { color: #f4a87e; }

/* The editorial headline — Fraunces 800, sensible max */
.ea-editorial-h {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ea-forest);
  margin: 0 0 1.5rem;
}

/* Editorial body paragraph — breathing room, readable measure */
.ea-editorial-p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--ea-forest-soft);
  max-width: 38ch;
  margin: 0 0 1.8rem;
}
.ea-editorial-p strong {
  color: var(--ea-forest);
  font-weight: 700;
}

/* Feature photo — portrait 4:5 magazine crop */
.ea-feature-photo {
  aspect-ratio: 4 / 5;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--ea-shadow-lift);
  background: var(--ea-cream-deep);
  position: relative;
}
.ea-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Empty-state placeholder — shows when user hasn't dropped a real photo yet.
   Revised 2026-04-21: instead of a "broken-image" camera icon + hint, render
   a subtle warm-gradient card with NO text — reads as intentional negative
   space rather than missing content. Combined with .ea-chapter-photo--hide-empty
   below, the photo column collapses entirely when both the <img> fails AND
   we've marked the chapter as preferring full-width text. */
.ea-feature-photo--empty {
  background: linear-gradient(160deg,
    var(--ea-cream-deep) 0%,
    var(--ea-sand) 55%,
    var(--ea-cream-deep) 100%);
  position: relative;
}
.ea-feature-photo--empty::after {
  /* Subtle diagonal weave — visual texture, not a placeholder marker */
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 22px,
      rgba(27, 46, 31, 0.04) 22px,
      rgba(27, 46, 31, 0.04) 23px
    );
  pointer-events: none;
}
/* Fallback: if <img> inside fails, do:
     this.style.display='none';
     this.parentNode.classList.add('ea-feature-photo--empty') */

/* Collapse the photo column entirely — so chapters read as pure editorial
   type when we don't have real photography. Apply .ea-chapter-grid--text-only
   to the grid (or toggle it via JS when no photos available). */
.ea-chapter-grid--text-only {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
}
.ea-chapter-grid--text-only .ea-chapter-photo { display: none; }
.ea-chapter-grid--text-only .ea-editorial-h { font-size: clamp(2.6rem, 7vw, 5.5rem); }
.ea-chapter-grid--text-only .ea-editorial-p { font-size: 1.3rem; max-width: 48ch; }

/* Closing-chapter CTA pill — forest button, warm hover */
.ea-cta-pill {
  display: inline-block;
  padding: 1.1rem 2.4rem;
  background: var(--ea-terracotta);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  border-radius: var(--ea-radius-lg);
  text-decoration: none;
  box-shadow: var(--ea-shadow-soft);
  transition: transform 0.2s var(--ea-ease), box-shadow 0.2s var(--ea-ease),
              background 0.2s var(--ea-ease);
  margin-top: 1rem;
}
.ea-cta-pill:hover {
  background: var(--ea-terracotta-hover);
  transform: translateY(-2px);
  box-shadow: var(--ea-shadow-lift);
}
.ea-cta-pill:focus-visible {
  outline: none;
  box-shadow: var(--ea-shadow-focus), var(--ea-shadow-lift);
}
.ea-chapter--cta .ea-cta-pill {
  background: var(--ea-cream);
  color: var(--ea-forest);
}
.ea-chapter--cta .ea-cta-pill:hover {
  background: #fff;
}

/* ------------------------------------------------------------------
   STAGGERED CHAPTER REVEAL — eyebrow → headline → paragraph → photo
   come in sequence as the chapter enters viewport. Adds visible motion
   without being gimmicky. Pure CSS transition-delay stagger.
   ------------------------------------------------------------------ */
.ea-chapter .ea-eyebrow,
.ea-chapter .ea-editorial-h,
.ea-chapter .ea-editorial-p,
.ea-chapter .ea-chapter-photo,
.ea-chapter .ea-cta-pill {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s var(--ea-ease),
    transform 0.8s var(--ea-ease);
}
.ea-chapter.is-visible .ea-eyebrow,
.ea-chapter.visible   .ea-eyebrow        { transition-delay: 0.05s;  opacity: 1; transform: none; }
.ea-chapter.is-visible .ea-editorial-h,
.ea-chapter.visible   .ea-editorial-h    { transition-delay: 0.18s;  opacity: 1; transform: none; }
.ea-chapter.is-visible .ea-editorial-p,
.ea-chapter.visible   .ea-editorial-p    { transition-delay: 0.34s;  opacity: 1; transform: none; }
.ea-chapter.is-visible .ea-chapter-photo,
.ea-chapter.visible   .ea-chapter-photo  { transition-delay: 0.24s;  opacity: 1; transform: none; }
.ea-chapter.is-visible .ea-cta-pill,
.ea-chapter.visible   .ea-cta-pill       { transition-delay: 0.52s;  opacity: 1; transform: none; }

/* Subtle gentle float on the feature photo — barely perceptible, adds life
   without being a "decorative animation" (<4s cycle, <6px amplitude). */
@keyframes ea-gentle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.ea-chapter.is-visible .ea-feature-photo,
.ea-chapter.visible   .ea-feature-photo {
  animation: ea-gentle-float 6s ease-in-out infinite;
}

/* Scroll indicator at the bottom of chapter 1 — hints there's more below */
.ea-scroll-hint {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ea-forest-soft);
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.ea-scroll-hint::after {
  content: '';
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--ea-forest-soft) 0%, transparent 100%);
  animation: ea-scroll-line 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes ea-scroll-line {
  0%   { transform: scaleY(0.2); opacity: 0.3; }
  50%  { transform: scaleY(1);   opacity: 1;   }
  100% { transform: scaleY(0.2); opacity: 0.3; }
}

/* Honor prefers-reduced-motion — scroll reveals become instant, float off */
@media (prefers-reduced-motion: reduce) {
  .ea-chapter,
  .ea-chapter .ea-eyebrow,
  .ea-chapter .ea-editorial-h,
  .ea-chapter .ea-editorial-p,
  .ea-chapter .ea-chapter-photo,
  .ea-chapter .ea-cta-pill {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .ea-chapter .ea-feature-photo { animation: none; }
  .ea-scroll-hint::after { animation: none; }
}

/* ================================================================
   MATRIX / BOTTOM-NAV / PAGE-SHELL LAYER (design.md §2.1–§2.3)
   Introduced 2026-04-22 for matrix.html.
   ================================================================ */

/* ----- Page shell ----- */
.ea-page-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--ea-glass-bg);
  backdrop-filter: blur(var(--ea-glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--ea-glass-blur)) saturate(1.4);
  border-bottom: 1px solid var(--ea-glass-border);
}
.ea-page-header__back,
.ea-page-header__profile {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ea-forest);
  background: transparent;
  border: none; cursor: pointer;
  transition: background 0.2s var(--ea-ease);
}
.ea-page-header__back:hover,
.ea-page-header__profile:hover { background: rgba(27, 46, 31, 0.06); }
.ea-page-header__back:focus-visible,
.ea-page-header__profile:focus-visible { outline: none; box-shadow: var(--ea-shadow-focus); }
.ea-page-header__logo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--ea-forest);
}

.ea-page-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 120px;
  background: var(--ea-cream);
  min-height: calc(100vh - 56px);
}

/* ----- Bottom nav (mobile-first, collapses to top-right on desktop) ----- */
.ea-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: space-around;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--ea-glass-bg);
  backdrop-filter: blur(var(--ea-glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--ea-glass-blur)) saturate(1.4);
  border-top: 1px solid var(--ea-glass-border);
}
.ea-bottom-nav__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 0.68rem; font-weight: 600;
  color: var(--ea-forest-soft);
  text-decoration: none;
  border: none; background: transparent; cursor: pointer;
  position: relative;
  transition: color 0.2s var(--ea-ease);
}
.ea-bottom-nav__item:hover { color: var(--ea-forest); }
.ea-bottom-nav__item svg { width: 22px; height: 22px; stroke-width: 1.8; }
.ea-bottom-nav__item.is-active { color: var(--ea-terracotta); }
.ea-bottom-nav__item.is-active::after {
  content: '';
  position: absolute; bottom: 2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ea-terracotta);
}
@media (min-width: 900px) {
  .ea-bottom-nav {
    position: static;
    border-top: none;
    justify-content: flex-end;
    gap: 8px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
  }
  .ea-bottom-nav__item {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.82rem;
    border-radius: var(--ea-radius-pill);
  }
  .ea-bottom-nav__item.is-active { background: rgba(232, 115, 74, 0.08); }
  .ea-bottom-nav__item.is-active::after { display: none; }
  .ea-page-body { padding-bottom: 60px; }
}

/* ----- Tag chips (§2.3) ----- */
.ea-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px;
  border-radius: var(--ea-radius-pill);
  font-size: 0.78rem; font-weight: 500; line-height: 1.2;
  background: transparent;
  border: 1.5px solid var(--ea-forest-soft);
  color: var(--ea-forest-soft);
  white-space: nowrap;
  transition: background 0.15s var(--ea-ease), color 0.15s var(--ea-ease);
}
.ea-tag-chip:hover { background: rgba(27,46,31,0.05); }
.ea-tag-chip--mint  { border-color: var(--ea-mint-ok);   color: var(--ea-mint-ok); }
.ea-tag-chip--sand  { border-color: var(--ea-sand);      color: var(--ea-forest-soft); background: rgba(232,220,197,0.25); }
.ea-tag-chip--coral { border-color: var(--ea-terracotta); color: var(--ea-terracotta); }

/* ----- Contextual Alert (Named Concept §0.5) ----- */
.ea-contextual-alert {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(232, 115, 74, 0.06);
  border: 1.5px solid var(--ea-terracotta);
  border-radius: var(--ea-radius-lg);
  margin: 20px 0;
}
.ea-contextual-alert__icon {
  flex: 0 0 28px;
  color: var(--ea-terracotta);
}
.ea-contextual-alert__icon svg { width: 22px; height: 22px; stroke-width: 2; }
.ea-contextual-alert__body-wrap { flex: 1; min-width: 0; }
.ea-contextual-alert__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ea-terracotta);
  margin-bottom: 4px;
}
.ea-contextual-alert__body {
  font-size: 0.92rem;
  color: var(--ea-forest);
  line-height: 1.5;
}
.ea-contextual-alert__body strong { font-weight: 700; }

/* ----- Suggest Rail + Cards (§2.3) ----- */
.ea-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 32px 0 14px;
}
.ea-section-header__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ea-forest);
}
.ea-section-header__action {
  font-size: 0.9rem; font-weight: 600;
  color: var(--ea-forest-soft);
  text-decoration: none;
}
.ea-section-header__action:hover { color: var(--ea-terracotta); }

.ea-suggest-rail {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 20px 18px;
  margin: 0 -20px;
  scrollbar-width: thin;
}
.ea-suggest-rail::-webkit-scrollbar { height: 8px; }
.ea-suggest-rail::-webkit-scrollbar-thumb { background: rgba(27,46,31,0.15); border-radius: 4px; }

.ea-suggest-card {
  flex: 0 0 auto;
  width: 280px;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  box-shadow: var(--ea-shadow-soft);
  scroll-snap-align: start;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ea-ease), box-shadow 0.25s var(--ea-ease);
}
.ea-suggest-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ea-shadow-lift);
}
.ea-suggest-card__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  display: block;
  background: linear-gradient(135deg, var(--ea-cream-deep), var(--ea-sand));
  object-fit: cover;
}
.ea-suggest-card__body { padding: 14px 16px 18px; }
.ea-suggest-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ea-forest);
  line-height: 1.2;
  margin-bottom: 4px;
}
.ea-suggest-card__loc {
  font-size: 0.82rem;
  color: var(--ea-forest-soft);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 5px;
}
.ea-suggest-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ----- Why This Fits (Named Concept §0.5) ----- */
.ea-why-fits {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--ea-glass-bg);
  backdrop-filter: blur(var(--ea-glass-blur));
  -webkit-backdrop-filter: blur(var(--ea-glass-blur));
  border: 1px solid var(--ea-glass-border);
  border-radius: var(--ea-radius-lg);
  box-shadow: var(--ea-shadow-soft);
}
.ea-why-fits__label {
  font-weight: 700;
  color: var(--ea-forest);
  margin-bottom: 6px;
  font-size: 0.92rem;
}
.ea-why-fits__body {
  font-size: 0.88rem;
  color: var(--ea-forest-soft);
  line-height: 1.55;
}

/* ----- Empty state ----- */
.ea-empty-state {
  padding: 28px 22px;
  background: var(--ea-cream-deep);
  border-radius: var(--ea-radius-lg);
  text-align: center;
  color: var(--ea-forest-soft);
}
.ea-empty-state__icon { font-size: 1.8rem; margin-bottom: 10px; }
.ea-empty-state__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ea-forest);
  margin-bottom: 6px;
}
.ea-empty-state__body {
  font-size: 0.92rem;
  max-width: 36ch;
  margin: 0 auto 14px;
}
.ea-empty-state__cta {
  display: inline-block;
  padding: 9px 18px;
  background: var(--ea-forest);
  color: var(--ea-cream);
  border-radius: var(--ea-radius-pill);
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 0.2s var(--ea-ease);
}
.ea-empty-state__cta:hover { background: var(--ea-forest-soft); }

/* ================================================================
   TIMELINE LAYER (design.md §2.5 + §4.4) — Session 4, 2026-04-22
   Vertical rail, photo-dominant nodes, inline Pace Alerts,
   Safety Net chips. Used by timeline.html + (future) trip_planner
   refactor.
   ================================================================ */

.ea-timeline-hero {
  padding: 8px 0 10px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.ea-timeline-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ea-terracotta);
  width: 100%;
  margin-bottom: 2px;
}
.ea-timeline-section {
  padding: 22px 0 12px;
}
.ea-timeline-section__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ea-timeline-section__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4.2vw, 2.4rem);
  color: var(--ea-forest);
  line-height: 1.05;
}
.ea-timeline-section__time {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: rgba(27, 46, 31, 0.45);
}

/* The rail + nodes */
.ea-timeline {
  position: relative;
  padding-left: 28px;
  margin-top: 4px;
}
.ea-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--ea-forest-soft);
  opacity: 0.35;
  border-radius: 1px;
}
.ea-timeline__node {
  position: relative;
  margin-bottom: 18px;
  background: #fff;
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  box-shadow: var(--ea-shadow-soft);
  transition: transform 0.25s var(--ea-ease), box-shadow 0.25s var(--ea-ease);
}
.ea-timeline__node:hover {
  transform: translateY(-2px);
  box-shadow: var(--ea-shadow-lift);
}
.ea-timeline__node::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 18px;
  width: 12px;
  height: 12px;
  background: var(--ea-forest);
  border: 2px solid var(--ea-cream);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ea-forest-soft);
}
.ea-timeline__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--ea-cream-deep), var(--ea-sand));
  overflow: hidden;
}
.ea-timeline__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ea-timeline__photo-gradient {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 18px 14px;
  background: linear-gradient(transparent, rgba(27, 46, 31, 0.78));
  color: #fff;
}
.ea-timeline__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 3px;
}
.ea-timeline__meta {
  font-size: 0.82rem;
  opacity: 0.9;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ea-timeline__body {
  padding: 12px 16px 14px;
  font-size: 0.9rem;
  color: var(--ea-forest-soft);
}
.ea-timeline__body p { line-height: 1.55; }

/* Safety Net chip anchored to each node */
.ea-safety-net-chip {
  margin: 0 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--ea-cream-deep);
  border-radius: var(--ea-radius-pill);
  font-size: 0.82rem;
  color: var(--ea-forest);
}
.ea-safety-net-chip__pin {
  color: var(--ea-terracotta);
  font-size: 1rem;
}
.ea-safety-net-chip__label {
  flex: 1;
  font-weight: 600;
}
.ea-safety-net-chip__actions {
  display: flex;
  gap: 6px;
}
.ea-safety-net-chip__action {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(27, 46, 31, 0.08);
  color: var(--ea-forest);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.15s var(--ea-ease);
}
.ea-safety-net-chip__action:hover { background: rgba(27, 46, 31, 0.16); }
.ea-safety-net-chip__action svg { width: 15px; height: 15px; stroke-width: 2; }

/* Pace Alert — inline, coral-bordered, breaks the rail */
.ea-pace-alert {
  position: relative;
  margin: 0 0 18px 0;
  padding: 14px 18px;
  background: rgba(232, 115, 74, 0.08);
  border: 1.5px solid var(--ea-terracotta);
  border-radius: var(--ea-radius-lg);
}
.ea-pace-alert::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 16px;
  width: 12px; height: 12px;
  background: var(--ea-terracotta);
  border: 2px solid var(--ea-cream);
  border-radius: 50%;
}
.ea-pace-alert__head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
.ea-pace-alert__time {
  font-weight: 800;
  color: var(--ea-forest);
  font-size: 0.95rem;
}
.ea-pace-alert__label {
  font-weight: 700;
  color: var(--ea-terracotta);
  font-size: 0.95rem;
}
.ea-pace-alert__body {
  font-size: 0.88rem;
  color: var(--ea-forest);
  line-height: 1.5;
}
.ea-pace-alert__body strong { font-weight: 700; }

/* View-toggle chips for switching Timeline / Map / Narrative / Classic */
.ea-view-toggle {
  display: inline-flex;
  background: var(--ea-cream-deep);
  border-radius: var(--ea-radius-pill);
  padding: 4px;
  gap: 2px;
  margin-bottom: 14px;
}
.ea-view-toggle a {
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--ea-radius-pill);
  color: var(--ea-forest-soft);
  text-decoration: none;
  transition: all 0.15s var(--ea-ease);
}
.ea-view-toggle a.is-active {
  background: var(--ea-forest);
  color: var(--ea-cream);
}
.ea-view-toggle a:not(.is-active):hover {
  color: var(--ea-forest);
  background: rgba(27,46,31,0.05);
}

@media (prefers-reduced-motion: reduce) {
  .ea-timeline__node { transition: none; }
  .ea-timeline__node:hover { transform: none; }
}

/* ================================================================
   SAFE-HAVEN MAP LAYER (design.md §2.6 + §4.10) — Session 6, 2026-04-22
   Static SVG map with Safe Haven + Crowd Alert pins, route,
   callouts, and the "Find Safe Haven" glass CTA.
   ================================================================ */

.ea-safe-map {
  position: relative;
  margin: 14px 0 90px;
  padding: 18px 0 110px;
  background: linear-gradient(180deg, #f2ede2 0%, var(--ea-cream) 100%);
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
  box-shadow: var(--ea-shadow-soft);
}
.ea-safe-map__title {
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  color: var(--ea-forest);
  margin-bottom: 2px;
}
.ea-safe-map__sub {
  text-align: center;
  font-size: 0.95rem;
  color: var(--ea-forest-soft);
  margin-bottom: 16px;
}
.ea-safe-map__canvas {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 700px;
  aspect-ratio: 3 / 4;
  background: var(--ea-cream);
  border: 1px solid rgba(27, 46, 31, 0.08);
  border-radius: var(--ea-radius-lg);
  box-shadow: 0 24px 60px -20px rgba(27, 46, 31, 0.18);
  overflow: hidden;
  /* faint grid so the space reads as 'map' without faking streets */
  background-image:
    linear-gradient(rgba(27,46,31,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,46,31,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
}
.ea-safe-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ea-safe-map__route {
  fill: none;
  stroke: var(--ea-mint-ok);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 6;
  opacity: 0.7;
}

/* Pins (overlaid as positioned divs so labels flow naturally) */
.ea-map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
  z-index: 2;
}
.ea-map-pin__dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 6px 16px -4px rgba(27, 46, 31, 0.35);
  border: 3px solid var(--ea-cream);
  cursor: pointer;
  transition: transform 0.2s var(--ea-ease);
}
.ea-map-pin__dot:hover { transform: scale(1.08); }
.ea-map-pin--safe-haven   .ea-map-pin__dot { background: var(--ea-mint-ok); }
.ea-map-pin--crowd-alert .ea-map-pin__dot { background: var(--ea-terracotta); }
.ea-map-pin__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ea-forest);
  background: var(--ea-cream);
  padding: 2px 7px;
  border-radius: var(--ea-radius-pill);
  box-shadow: 0 2px 6px -2px rgba(27,46,31,0.2);
  white-space: nowrap;
}
.ea-map-pin--safe-haven   .ea-map-pin__label { color: var(--ea-mint-ok); }
.ea-map-pin--crowd-alert .ea-map-pin__label { color: var(--ea-terracotta); }

/* Callouts anchored to pins */
.ea-map-callout {
  position: absolute;
  max-width: 180px;
  padding: 10px 12px;
  background: var(--ea-glass-bg);
  backdrop-filter: blur(var(--ea-glass-blur));
  -webkit-backdrop-filter: blur(var(--ea-glass-blur));
  border: 1px solid var(--ea-glass-border);
  border-radius: var(--ea-radius-md);
  box-shadow: var(--ea-shadow-soft);
  font-size: 0.78rem;
  color: var(--ea-forest);
  line-height: 1.4;
  pointer-events: auto;
  z-index: 3;
}
.ea-map-callout--safe-haven   { border-left: 3px solid var(--ea-mint-ok); }
.ea-map-callout--crowd-alert { border-left: 3px solid var(--ea-terracotta); background: rgba(232, 115, 74, 0.08); }
.ea-map-callout__title {
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ea-map-callout--safe-haven .ea-map-callout__title   { color: var(--ea-mint-ok); }
.ea-map-callout--crowd-alert .ea-map-callout__title { color: var(--ea-terracotta); }
.ea-map-callout__body { color: var(--ea-forest-soft); }

/* Find Safe Haven CTA — bottom-anchored glass pill */
.ea-find-safe-haven-btn {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 14px 40px;
  background: var(--ea-glass-bg);
  backdrop-filter: blur(var(--ea-glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--ea-glass-blur)) saturate(1.4);
  border: 1px solid var(--ea-glass-border);
  border-radius: var(--ea-radius-pill);
  color: var(--ea-forest);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 32px -10px rgba(27, 46, 31, 0.3);
  cursor: pointer;
  transition: transform 0.2s var(--ea-ease), box-shadow 0.2s var(--ea-ease);
  z-index: 10;
  text-decoration: none;
}
.ea-find-safe-haven-btn:hover {
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 16px 40px -10px rgba(27, 46, 31, 0.4);
}
.ea-find-safe-haven-btn:focus-visible {
  outline: none;
  box-shadow: var(--ea-shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  .ea-map-pin__dot:hover,
  .ea-find-safe-haven-btn:hover { transform: none; }
  .ea-find-safe-haven-btn:hover { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ea-suggest-card { transition: none; }
  .ea-suggest-card:hover { transform: none; }
}

/* ================================================================
   SHELL APPLIED — body adjustments for legacy pages that now load
   the universal ea-shell.js. Adds clearance below the content so the
   fixed bottom nav doesn't overlap page content. On desktop (>=900px)
   the nav collapses to top-right via earlier media query, so no
   padding needed.
   ================================================================ */
body.ea-shell-applied {
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  body.ea-shell-applied {
    padding-bottom: 0;
  }
  /* Pin the injected nav to top-right on desktop */
  body.ea-shell-applied > .ea-bottom-nav[data-ea-injected="true"] {
    position: fixed;
    top: 12px;
    right: 18px;
    left: auto;
    bottom: auto;
    border-top: none;
    z-index: 70;
  }
}

/* ================================================================
   HYBRID LANGUAGE LAYER (2026-04-24)
   Per design decision recorded in CLAUDE_DESIGN_SETUP.md §12:
     - C "Warm Terminal" is the base (ledger blocks, structured rows)
     - B "Topo Map" accents on spatial views only (timeline rail, map)
     - A "Field Journal" accents on hero moments only (landing hero
       + hotel_detail hero)
   Tokens are all --ea-* from the existing palette. No new colors.
   ================================================================ */

/* ---- A · FIELD JOURNAL (hero accents; landing + hotel_detail only) ---- */

.ea-field-journal-hero {
  position: relative;
  padding: 48px 32px 40px;
  background:
    linear-gradient(var(--ea-cream), var(--ea-cream-deep));
  border-radius: var(--ea-radius-lg);
  overflow: hidden;
}
.ea-field-journal-hero::before {
  /* Paper-warmth noise texture (SVG data URL — no external asset) */
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0 0.78 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.ea-pull-quote {
  position: relative;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1.35;
  color: var(--ea-forest);
  max-width: 42ch;
  margin: 0 auto 20px;
  padding: 0 18px;
  text-align: center;
}
.ea-pull-quote::before,
.ea-pull-quote::after {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ea-terracotta);
  font-weight: 700;
  opacity: 0.85;
}
.ea-pull-quote::before { content: '\201C'; margin-right: 6px; }
.ea-pull-quote::after  { content: '\201D'; margin-left: 4px; }
.ea-pull-quote__attrib {
  display: block;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ea-forest-soft);
  opacity: 0.7;
  font-weight: 700;
  margin-top: 14px;
}
.ea-hairline-sand {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ea-sand) 20%,
    var(--ea-sand) 80%,
    transparent 100%
  );
  margin: 24px auto;
  max-width: 320px;
}

/* ---- B · TOPO MAP (spatial views only: timeline rail + map accents) ---- */

.ea-topo-rail {
  position: relative;
  padding-left: 56px;
  margin-top: 12px;
}
.ea-topo-rail::before {
  /* Dashed mint rail with draw-in animation on first paint */
  content: '';
  position: absolute;
  left: 20px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-image: linear-gradient(
    to bottom,
    var(--ea-mint-ok) 50%,
    transparent 50%
  );
  background-size: 2px 10px;
  background-repeat: repeat-y;
  opacity: 0.85;
  transform-origin: top;
  animation: ea-topo-draw 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ea-topo-draw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.ea-topo-node {
  position: relative;
  margin-bottom: 20px;
}
.ea-topo-node::before {
  content: '';
  position: absolute;
  left: -43px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ea-cream);
  border: 2px solid var(--ea-mint-ok);
  box-shadow: 0 0 0 3px rgba(34, 84, 61, 0.12);
  z-index: 2;
}
.ea-topo-node--accent::before {
  background: var(--ea-mint-ok);
  border-color: var(--ea-cream);
}
.ea-topo-day-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 22px;
  padding: 0 10px;
  background: var(--ea-forest);
  color: var(--ea-cream);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--ea-radius-pill);
  margin-bottom: 8px;
}

/* ---- C · WARM TERMINAL (structural base; everywhere) ---- */

.ea-ledger-panel {
  background: var(--ea-forest);
  color: var(--ea-cream);
  border-radius: var(--ea-radius-lg);
  padding: 24px 26px 22px;
  margin-bottom: 18px;
  box-shadow: var(--ea-shadow-soft);
}
.ea-ledger-panel__eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ea-terracotta);
  margin-bottom: 10px;
}
.ea-ledger-panel__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--ea-cream);
}
.ea-ledger-panel__lead {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(249, 247, 242, 0.88);
  margin-bottom: 16px;
  max-width: 60ch;
}
.ea-ledger-row {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(249, 247, 242, 0.1);
  font-size: 0.9rem;
}
.ea-ledger-row:last-child { border-bottom: none; }
.ea-ledger-row__label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: rgba(249, 247, 242, 0.6);
  letter-spacing: 0.02em;
}
.ea-ledger-row__value {
  font-weight: 500;
  color: var(--ea-cream);
  line-height: 1.5;
}
.ea-ledger-row__value strong {
  color: var(--ea-terracotta);
  font-weight: 700;
}
.ea-ledger-panel__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 22px;
  background: var(--ea-terracotta);
  color: var(--ea-cream);
  border: none;
  border-radius: var(--ea-radius-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ea-ease), transform 0.2s var(--ea-ease);
}
.ea-ledger-panel__action:hover {
  background: var(--ea-terracotta-hover);
  transform: translateY(-1px);
}
.ea-ledger-panel__action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 115, 74, 0.45);
}

/* Cream ledger card (per-stop rows, lives on cream page bg) */
.ea-ledger-card {
  background: #fff;
  border: 1px solid var(--ea-sand);
  border-radius: var(--ea-radius-md);
  padding: 18px 22px;
  margin-bottom: 14px;
  transition: border-color 0.2s var(--ea-ease), box-shadow 0.2s var(--ea-ease);
}
.ea-ledger-card:hover {
  border-color: var(--ea-forest-soft);
  box-shadow: var(--ea-shadow-soft);
}
.ea-ledger-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.ea-ledger-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--ea-forest);
}
.ea-ledger-card__meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ea-forest-soft);
  white-space: nowrap;
  padding-top: 4px;
}
.ea-ledger-card__desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ea-forest-soft);
  margin-bottom: 12px;
}
.ea-ledger-card__callout {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--ea-radius-sm);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-top: 8px;
}
.ea-ledger-card__callout--best-time {
  background: rgba(34, 84, 61, 0.08);
  border-left: 3px solid var(--ea-mint-ok);
  color: var(--ea-forest);
}
.ea-ledger-card__callout--season {
  background: rgba(192, 86, 33, 0.08);
  border-left: 3px solid var(--ea-amber-warn);
  color: var(--ea-forest);
}
.ea-ledger-card__callout-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-right: 6px;
  white-space: nowrap;
}
.ea-ledger-card__callout--best-time .ea-ledger-card__callout-label { color: var(--ea-mint-ok); }
.ea-ledger-card__callout--season    .ea-ledger-card__callout-label { color: var(--ea-amber-warn); }
.ea-ledger-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.ea-ledger-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--ea-radius-pill);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--ea-cream-deep);
  color: var(--ea-forest-soft);
  border: 1px solid var(--ea-sand);
}
.ea-ledger-card__chip--mint  { color: var(--ea-mint-ok); border-color: rgba(34, 84, 61, 0.3); }
.ea-ledger-card__chip--gps   { font-family: 'SF Mono', 'Menlo', monospace; font-size: 0.65rem; letter-spacing: 0; color: var(--ea-forest-soft); }
.ea-ledger-card__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 7px 16px;
  background: transparent;
  color: var(--ea-forest);
  border: 1.5px solid var(--ea-forest);
  border-radius: var(--ea-radius-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s var(--ea-ease);
}
.ea-ledger-card__action:hover {
  background: var(--ea-forest);
  color: var(--ea-cream);
}
.ea-ledger-card__action:focus-visible {
  outline: none;
  box-shadow: var(--ea-shadow-focus);
}

/* ---- Sticky time-of-day bucket header (for grouped sub-stops) ---- */

.ea-bucket-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px 12px;
  margin: 24px 0 10px;
  background: linear-gradient(var(--ea-cream), rgba(249, 247, 242, 0.95));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ea-sand);
}
.ea-bucket-header__glyph {
  font-size: 1.4rem;
  line-height: 1;
}
.ea-bucket-header__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ea-forest);
  text-transform: capitalize;
}
.ea-bucket-header__count {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ea-forest-soft);
  opacity: 0.7;
  margin-left: auto;
}

/* Reduced-motion: kill topo rail draw-in */
@media (prefers-reduced-motion: reduce) {
  .ea-topo-rail::before { animation: none; transform: scaleY(1); }
  .ea-ledger-card { transition: none; }
  .ea-ledger-panel__action { transition: none; }
  .ea-ledger-panel__action:hover { transform: none; }
}

/* ================================================================
   V2 MOTIF LIBRARY (DESIGN_V2.md §4)
   Field-guide motifs — paper warmth, topo contours, chapter markers,
   marginalia, roman numerals, stamp annotations.
   ================================================================ */

/* 4.1 Paper-warmth background (pulled out of .ea-field-journal-hero for reuse) */
.ea-paper-bg {
  position: relative;
  background-color: var(--ea-paper);
}
.ea-paper-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.28;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.88 0 0 0 0 0.78 0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  z-index: 0;
}
.ea-paper-bg > * { position: relative; z-index: 1; }

/* 4.2 Topographic contour background (subtle, map-adjacent surfaces only) */
.ea-topo-contour-bg {
  position: relative;
  background-color: var(--ea-cream);
}
.ea-topo-contour-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.12;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='none' stroke='%235a7c3d' stroke-width='0.8'><path d='M-20 60 Q80 40 180 80 T380 60'/><path d='M-20 110 Q80 92 180 128 T380 108'/><path d='M-20 160 Q80 144 180 176 T380 156'/><path d='M-20 210 Q80 196 180 224 T380 204'/><path d='M-20 260 Q80 248 180 272 T380 252'/><path d='M-20 310 Q80 300 180 320 T380 300'/><path d='M-20 360 Q80 352 180 368 T380 348'/></g></svg>");
  background-size: 400px 400px;
  z-index: 0;
}
.ea-topo-contour-bg > * { position: relative; z-index: 1; }

/* 4.3 Chapter marker (No. II / IV style) */
.ea-chapter-marker {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ea-dust-amber);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ea-chapter-marker::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--ea-dust-amber);
  opacity: 0.6;
}

/* 4.5 Marginalia (side-text, honest context without cluttering primary type) */
.ea-marginalia {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ea-forest-soft);
  opacity: 0.75;
  max-width: 32ch;
}

/* 4.6 Stamp annotation (3-letter rotary stamp, decorative only) */
.ea-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ea-dust-amber);
  border: 1px solid var(--ea-dust-amber);
  border-radius: 2px;
  opacity: 0.8;
  transform: rotate(-2deg);
  background: rgba(251, 248, 240, 0.7);
}

/* 4.7 Roman-numeral chapter header */
.ea-chapter-numeral {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1;
  color: var(--ea-forest);
  letter-spacing: 0.05em;
  opacity: 0.35;
  font-variant-numeric: lining-nums;
}

/* Field-guide cover block (top of index.html) */
.ea-cover {
  /* V2 (2026-04-24): compact — the cover used to own a full viewport of vertical
     space before any content. Now it's an editorial imprint block, not a hero. */
  padding: clamp(32px, 5vh, 60px) clamp(20px, 5vw, 60px) 28px;
  text-align: center;
  position: relative;
}
.ea-cover__imprint {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ea-forest-soft);
  opacity: 0.7;
  margin-bottom: 18px;
}
.ea-cover__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.05;
  color: var(--ea-ink);
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin: 0 auto 14px;
}
.ea-cover__kicker {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--ea-forest-soft);
  max-width: 48ch;
  margin: 0 auto 22px;
  line-height: 1.65;
}
.ea-cover__edition {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ea-clay);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.ea-cover__edition::before,
.ea-cover__edition::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ea-clay);
  opacity: 0.5;
}
.ea-cover__signin-cta {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ea-cover__signin-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-coral, #e8734a);
  padding: 10px 22px;
  border-radius: var(--radius-pill, 20px);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity 0.15s, transform 0.15s;
}
.ea-cover__signin-link:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.ea-cover__browse-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--ea-forest-soft, #4a5568);
  text-decoration: none;
  opacity: 0.72;
}
.ea-cover__browse-link:hover { opacity: 1; text-decoration: underline; }

/* Editorial field-guide index (replaces tile grid on 15-city section) */
.ea-field-index {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.ea-field-index__region {
  margin-bottom: 56px;
}
.ea-field-index__region-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ea-rule-hair);
}
.ea-field-index__region-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ea-ink);
  line-height: 1;
}
.ea-field-index__region-count {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ea-forest-soft);
  opacity: 0.6;
}
.ea-field-index__entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.ea-field-index__entry {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 14px 16px 16px;
  border-radius: var(--ea-radius-md);
  transition: background 0.25s var(--ea-ease), transform 0.25s var(--ea-ease);
  position: relative;
}
.ea-field-index__entry:hover {
  background: rgba(232, 220, 197, 0.3);
  transform: translateX(2px);
}
.ea-field-index__entry::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 16px;
  opacity: 0;
  transition: all 0.25s var(--ea-ease);
  color: var(--ea-terracotta);
  font-weight: 700;
}
.ea-field-index__entry:hover::before {
  opacity: 1;
  left: -18px;
}
.ea-field-index__entry-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ea-ink);
  margin-bottom: 4px;
}
.ea-field-index__entry-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--ea-forest-soft);
  line-height: 1.5;
}
.ea-field-index__entry-stamp {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* Editorial vibe entries (replaces tile grid on vibe picker) */
.ea-vibe-list {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px 28px;
}
.ea-vibe-entry {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  padding: 10px 4px;
  transition: transform 0.25s var(--ea-ease);
}
.ea-vibe-entry:hover { transform: translateY(-2px); }
.ea-vibe-entry__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ea-vibe-entry__icon svg { width: 40px; height: 40px; }
.ea-vibe-entry__body { flex: 1; min-width: 0; }
.ea-vibe-entry__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ea-ink);
  margin-bottom: 2px;
  line-height: 1.2;
}
.ea-vibe-entry__cities {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--ea-forest-soft);
  line-height: 1.5;
}

/* Stat marginalia line (replaces boxy stat strip) */
.ea-stat-line {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 40px);
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: var(--ea-forest-soft);
  border-top: 1px solid var(--ea-rule-hair);
  border-bottom: 1px solid var(--ea-rule-hair);
}
.ea-stat-line strong {
  font-weight: 600;
  color: var(--ea-ink);
  font-style: normal;
}
.ea-stat-line__sep {
  display: inline-block;
  margin: 0 10px;
  color: var(--ea-dust-amber);
  opacity: 0.7;
}

/* Section eyebrow label (standalone, used outside .ea-chapter) */
.ea-section-eyebrow {
  text-align: center;
  margin-bottom: 36px;
}
.ea-section-eyebrow__h {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--ea-ink);
  margin: 10px 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.ea-section-eyebrow__p {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--ea-forest-soft);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .ea-field-index__entry { transition: none; }
  .ea-field-index__entry:hover { transform: none; }
  .ea-field-index__entry::before,
  .ea-field-index__entry:hover::before { transition: none; }
  .ea-vibe-entry { transition: none; }
  .ea-vibe-entry:hover { transform: none; }
}

/* ================================================================
   CHAPTER PHOTO ENHANCEMENTS (2026-04-24)
   Captions below each scroll-story photo + wide banner variant for
   the CTA chapter. Adds hand-lettered-feel italic captions so users
   know what landmark they're looking at (travel is visual; context
   matters).
   ================================================================ */

.ea-feature-photo__cap {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ea-forest-soft);
  opacity: 0.78;
  margin-top: 10px;
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}
.ea-feature-photo__cap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1px;
  background: var(--ea-dust-amber);
  opacity: 0.7;
}

/* Wide banner variant for the CTA chapter — 16:9 instead of 4:5 */
.ea-feature-photo--banner {
  aspect-ratio: 16 / 9;
  max-width: 880px;
  width: 100%;
}
.ea-feature-photo--banner img {
  transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ea-chapter.is-visible .ea-feature-photo--banner img,
.ea-chapter.visible   .ea-feature-photo--banner img {
  /* slow subtle zoom-in when the CTA chapter enters viewport —
     drifts over ~8 seconds, non-distracting */
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .ea-feature-photo--banner img { transition: none !important; transform: none !important; }
}

/* ================================================================
   MOTION PASS (2026-04-24) — more liveliness without anxiety.
   4 additions: Ken-Burns drift on all chapter photos, count-up on
   stat numbers, hairline draw-in on sand dividers, word-stagger
   reveal on Fraunces headlines. All prefers-reduced-motion-safe.
   ================================================================ */

/* 1. Ken-Burns slow drift — all chapter photos, not just the CTA banner.
   Photo starts at scale 1.02, rotated slightly, slowly drifts to 1.08
   over 14 seconds once the chapter becomes visible. Movement is slow
   enough to read as breathing, not animation. Different transform-origin
   per chapter keeps it from feeling mechanical. */
.ea-chapter .ea-feature-photo img {
  transform: scale(1.02);
  transition: transform 14s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}
.ea-chapter--morning   .ea-feature-photo img { transform-origin: 35% 60%; }
.ea-chapter--afternoon .ea-feature-photo img { transform-origin: 65% 45%; }
.ea-chapter--evening   .ea-feature-photo img { transform-origin: 50% 35%; }
.ea-chapter.is-visible .ea-feature-photo img,
.ea-chapter.visible   .ea-feature-photo img {
  transform: scale(1.08);
}
/* CTA banner is wider — use shallower scale so edges don't push content */
.ea-chapter--cta .ea-feature-photo--banner img {
  transform: scale(1.01);
}
.ea-chapter--cta.is-visible .ea-feature-photo--banner img,
.ea-chapter--cta.visible   .ea-feature-photo--banner img {
  transform: scale(1.05);
}

/* 2. Count-up on stat numbers. JS adds .is-counting class when the
   stat-line enters viewport; each <strong> starts at 0 and walks up. */
.ea-stat-line strong {
  transition: color 0.3s var(--ea-ease);
}
.ea-stat-line.is-counting strong {
  color: var(--ea-terracotta);
}
.ea-stat-line.is-counted strong {
  color: var(--ea-ink);
}

/* 3. Hairline draw-in — divider scales from 0 to 100% width when its
   reveal fires. Fast (0.9s) because it's thin. */
.ea-hairline-sand {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.ea-hairline-sand.is-drawn,
.ea-reveal.is-visible .ea-hairline-sand,
.ea-reveal.is-visible + .ea-hairline-sand {
  transform: scaleX(1);
}

/* 4. Word-stagger reveal on editorial headlines. JS splits each headline
   into word spans with --i custom property; each word fades + rises
   with a stagger. Subtle 0.08s cascade — reads as one motion, not
   word-by-word flicker. */
.ea-editorial-h .ea-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ea-ease-story), transform 0.7s var(--ea-ease-story);
  transition-delay: calc(var(--i, 0) * 0.08s + 0.2s);
}
.ea-editorial-h .ea-word--space {
  width: 0.28em;
}
.ea-chapter.is-visible .ea-editorial-h .ea-word,
.ea-chapter.visible   .ea-editorial-h .ea-word {
  opacity: 1;
  transform: translateY(0);
}

/* Light cursor-follow parallax on destination grid photos —
   CSS-only, uses transform on hover for a subtle 3px shift */
body.ea-polish .ea-dest-card__photo {
  overflow: hidden;
}
body.ea-polish .ea-dest-card__photo img {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
body.ea-polish .ea-dest-card:hover .ea-dest-card__photo img {
  transform: scale(1.06);
}

/* Vibe entry — small rotation on hover for more life (editorial stamp feel) */
body.ea-polish .ea-vibe-entry {
  transition: transform 0.28s var(--ea-ease);
}
body.ea-polish .ea-vibe-entry:hover .ea-vibe-entry__icon {
  transform: rotate(-3deg) scale(1.05);
}
body.ea-polish .ea-vibe-entry__icon {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .ea-chapter .ea-feature-photo img { transition: none !important; transform: none !important; }
  .ea-stat-line strong { transition: none; }
  .ea-hairline-sand { transform: scaleX(1); transition: none; }
  .ea-editorial-h .ea-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.ea-polish .ea-dest-card__photo img { transition: none; }
  body.ea-polish .ea-vibe-entry__icon { transition: none; }
  body.ea-polish .ea-vibe-entry:hover .ea-vibe-entry__icon { transform: none; }
}

/* ================================================================
   EDITORIAL PROSE (about / privacy / terms) — 2026-04-25
   Magazine-style long-form reading: max-width 65ch, Fraunces section
   heads, hairline dividers between blocks, generous breathing.
   ================================================================ */

.ea-editorial-prose {
  max-width: 65ch;
  margin: 0 auto;
  padding: 24px clamp(20px, 5vw, 40px) 60px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ea-forest);
}
.ea-editorial-prose .ea-prose-block {
  padding: 36px 0 8px;
}
.ea-editorial-prose .ea-prose-block:first-child {
  padding-top: 24px;
}
.ea-editorial-prose .ea-chapter-marker {
  margin-bottom: 18px;
  display: inline-flex;
}
.ea-editorial-prose .ea-prose-h {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.18;
  color: var(--ea-ink);
  letter-spacing: -0.01em;
  margin: 8px 0 18px;
  max-width: 22ch;
}
.ea-editorial-prose p {
  margin-bottom: 14px;
}
.ea-editorial-prose p:last-child {
  margin-bottom: 0;
}
.ea-editorial-prose strong {
  color: var(--ea-ink);
  font-weight: 700;
}
.ea-editorial-prose a {
  color: var(--ea-terracotta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ea-ease);
}
.ea-editorial-prose a:hover {
  color: var(--ea-terracotta-hover);
}
.ea-editorial-prose .ea-prose-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.ea-editorial-prose .ea-prose-list li {
  position: relative;
  padding: 8px 0 8px 22px;
  border-bottom: 1px solid var(--ea-rule-hair);
  font-size: 0.95rem;
}
.ea-editorial-prose .ea-prose-list li:last-child { border-bottom: none; }
.ea-editorial-prose .ea-prose-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: 6px;
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ea-dust-amber);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
}
.ea-editorial-prose .ea-prose-numbered {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  counter-reset: ea-prose-step;
}
.ea-editorial-prose .ea-prose-numbered li {
  counter-increment: ea-prose-step;
  position: relative;
  padding: 18px 0 18px 64px;
  border-top: 1px solid var(--ea-rule-hair);
}
.ea-editorial-prose .ea-prose-numbered li:last-child {
  border-bottom: 1px solid var(--ea-rule-hair);
}
.ea-editorial-prose .ea-prose-numbered li::before {
  content: counter(ea-prose-step, upper-roman);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ea-dust-amber);
  letter-spacing: 0.05em;
  width: 50px;
  text-align: left;
}
.ea-editorial-prose .ea-prose-numbered__head {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ea-ink);
  margin-bottom: 4px;
}
.ea-editorial-prose .ea-hairline-sand {
  margin: 8px auto;
  max-width: 240px;
}

/* ============================================================
   Compare modal — shared by hotel / destination / activity flows
   Lifted from hotel_results.html so all 3 surfaces share one source.
   ============================================================ */
.compare-check{position:absolute;top:8px;right:8px;background:rgba(255,255,255,0.95);padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;z-index:10;display:flex;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.compare-check input{width:14px;height:14px;cursor:pointer;accent-color:#4299e1}
.compare-check input:focus-visible{outline:2px solid #1b2e1f;outline-offset:2px}
.compare-bar{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(135deg,#1b2e1f,#2d5a3d);padding:14px 40px;z-index:200;box-shadow:0 -4px 20px rgba(0,0,0,0.3)}
.compare-bar-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:16px}
.compare-bar-inner span{color:#fff;font-size:15px;font-weight:600}
.compare-btn{background:linear-gradient(135deg,#e8734a,#ed8936);color:#fff;border:none;padding:10px 28px;border-radius:25px;font-size:14px;font-weight:700;cursor:pointer;transition:transform 0.2s}
.compare-btn:hover{transform:scale(1.05)}
.compare-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.compare-clear-btn{background:transparent;color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.3);padding:8px 20px;border-radius:25px;font-size:13px;cursor:pointer}
.compare-clear-btn:hover{color:#fff;border-color:rgba(255,255,255,0.6)}
.compare-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:300;display:flex;align-items:center;justify-content:center}
.compare-modal-inner{background:#fffefb;border-radius:16px;max-width:95vw;max-height:90vh;overflow:auto;width:900px;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.compare-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e8e2d8;position:sticky;top:0;background:#fffefb;z-index:10;border-radius:16px 16px 0 0}
.compare-modal-header h2{font-size:20px;color:#2d5a3d;margin:0;font-family:'Fraunces',Georgia,serif}
.compare-close{background:none;border:none;font-size:28px;color:#718096;cursor:pointer;padding:0 8px;line-height:1}
.compare-close:hover{color:#2d5a3d}
.compare-close:focus-visible{outline:2px solid #2d5a3d;outline-offset:2px;border-radius:4px}
.compare-content{padding:0}
.compare-table-wrap{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;font-size:13px}
.compare-table th{padding:16px 12px;text-align:center;vertical-align:top;border-bottom:2px solid #e8e2d8;min-width:200px}
.compare-table td{padding:10px 12px;text-align:center;border-bottom:1px solid #f5f0e8}
.compare-label{text-align:left;font-weight:600;color:#2d3748;background:#faf7f2;white-space:nowrap}
.compare-photo{width:100%;max-width:180px;height:120px;object-fit:cover;border-radius:10px;margin-bottom:8px}
.compare-photo--placeholder{background:linear-gradient(135deg,#e8e2d8,#f5f0e8);display:flex;align-items:center;justify-content:center;color:#a8a092;font-size:24px}
.compare-hotel-name{font-size:14px;font-weight:700;color:#2d5a3d}
.compare-dest{font-size:12px;color:#718096}
.compare-price{font-size:18px;font-weight:800;color:#2d7a4d}
.compare-yes{color:#38a169}
.compare-no{color:#e53e3e;opacity:0.4}
.compare-plan-btn{background:linear-gradient(135deg,#4299e1,#3182ce);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:transform 0.2s}
.compare-plan-btn:hover{transform:translateY(-1px)}
.compare-plan-btn:focus-visible{outline:2px solid #1b2e1f;outline-offset:2px}
.compare-chip{display:inline-block;background:#f5f0e8;color:#4a6b52;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;margin:1px 2px}
@media (prefers-reduced-motion: reduce){
  .compare-btn,.compare-plan-btn,.compare-bar{transition:none !important;animation:none !important}
  .compare-btn:hover,.compare-plan-btn:hover{transform:none}
}

/* ============================================================
   Contextual Alert (rain / tired / hungry pivot)
   Static coral left border. NEVER pulses, glows, or animates.
   ============================================================ */
.ea-contextual-alert{
  background:#fffefb;
  border:1px solid #e8e2d8;
  border-left:4px solid var(--ea-terracotta,#e8734a);
  border-radius:12px;
  padding:14px 18px;
  margin:0 0 16px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.ea-contextual-alert__label{
  font-family:'Fraunces',Georgia,serif;
  font-size:14px;
  font-weight:700;
  color:#1b2e1f;
  margin:0;
  flex-shrink:0;
}
.ea-contextual-alert__hint{font-size:12px;color:#718096;margin:0 8px 0 0}
.ea-contextual-alert__buttons{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.ea-pivot-btn{
  background:#fffefb;
  border:1.5px solid #e8e2d8;
  color:#2d5a3d;
  padding:8px 14px;
  border-radius:18px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s,border-color 0.2s;
  font-family:'Inter',sans-serif;
}
.ea-pivot-btn:hover{background:#f5f0e8;border-color:#2d5a3d}
.ea-pivot-btn:focus-visible{outline:2px solid #2d5a3d;outline-offset:2px}
.ea-pivot-btn--dismiss{color:#a8a092;border:none;background:transparent;font-size:11px;text-decoration:underline;padding:6px 8px}
@media (prefers-reduced-motion: reduce){
  .ea-pivot-btn{transition:none !important}
}

/* ============================================================
   Trip progress strip + end-of-trip summary card
   ============================================================ */
.ea-progress-strip{
  background:#fffefb;
  border:1px solid #e8e2d8;
  border-radius:10px;
  padding:10px 14px;
  margin:0 0 16px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
}
.ea-progress-strip__label{font-weight:700;color:#1b2e1f;font-family:'Fraunces',Georgia,serif}
.ea-progress-strip__bar{flex:1;height:6px;background:#f5f0e8;border-radius:3px;overflow:hidden;min-width:120px}
.ea-progress-strip__fill{height:100%;background:linear-gradient(90deg,#1b2e1f,#2d5a3d);border-radius:3px}
.ea-progress-strip__pct{font-size:12px;color:#718096;font-weight:600;min-width:48px;text-align:right}

.ea-trip-summary{
  background:linear-gradient(135deg,#f0faf3,#faf7f2);
  border:1px solid #e0ebe3;
  border-radius:16px;
  padding:24px 28px;
  margin:0 0 20px;
}
.ea-trip-summary__title{font-family:'Fraunces',Georgia,serif;font-size:20px;color:#1b2e1f;margin:0 0 8px}
.ea-trip-summary__sub{font-size:13px;color:#4a6b52;margin:0 0 16px}
.ea-trip-summary__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:18px}
.ea-trip-summary__stat{background:#fffefb;border-radius:10px;padding:10px 12px;text-align:center}
.ea-trip-summary__stat-num{font-size:22px;font-weight:800;color:#2d5a3d;font-family:'Fraunces',Georgia,serif}
.ea-trip-summary__stat-label{font-size:11px;color:#718096;text-transform:uppercase;letter-spacing:0.04em;margin-top:2px}
.ea-trip-summary__review{margin-top:12px}
.ea-trip-summary__q{font-size:14px;color:#1b2e1f;margin:0 0 8px;font-weight:600}
.ea-trip-summary__thumbs{display:flex;gap:8px;margin-bottom:12px}
.ea-thumb-btn{background:#fffefb;border:1.5px solid #e8e2d8;border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer;transition:all 0.2s}
.ea-thumb-btn.is-active[data-vote="up"]{background:#38a169;color:#fff;border-color:#38a169}
.ea-thumb-btn.is-active[data-vote="down"]{background:#e8734a;color:#fff;border-color:#e8734a}
.ea-thumb-btn:focus-visible{outline:2px solid #2d5a3d;outline-offset:2px}
.ea-trip-summary__notes{width:100%;border:1px solid #e8e2d8;border-radius:8px;padding:8px 10px;font-family:'Inter',sans-serif;font-size:13px;color:#1b2e1f;background:#fffefb;margin-bottom:12px;resize:vertical;min-height:60px}
.ea-trip-summary__notes:focus-visible{outline:2px solid #2d5a3d;outline-offset:1px;border-color:#2d5a3d}
.ea-trip-summary__submit{background:#2d5a3d;color:#fff;border:none;padding:10px 22px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif}
.ea-trip-summary__submit:hover{background:#1b2e1f}
.ea-trip-summary__submit:focus-visible{outline:2px solid #1b2e1f;outline-offset:2px}
.ea-trip-summary--saved{text-align:center;padding:30px 20px}

/* ============================================================
   Trip Planner — editorial layout (accordion side-nav + sticky HUD)
   Activates via class `tp-editorial` on #plannerBody.
   Honors prefers-reduced-motion (no expand/collapse animations).
   ============================================================ */
@media (min-width: 980px){
  #plannerBody.tp-editorial{
    display:grid;
    grid-template-columns: 260px minmax(0,1fr);
    gap: 24px;
    align-items: start;
  }
  /* 2026-05-03: include .dest-hero (the actual class used in trip_planner.html
     at L991) — was only matching .dest-hero-card which doesn't exist in the
     emitted markup. Result was the destination stats card falling into
     column 1 and overlapping the sticky sidebar. */
  #plannerBody.tp-editorial > .dest-hero,
  #plannerBody.tp-editorial > .dest-hero-card,
  #plannerBody.tp-editorial > .dest-hero-photo,
  #plannerBody.tp-editorial > .days-indicator,
  #plannerBody.tp-editorial > #tabContent {
    grid-column: 2;
    min-width: 0;
  }
  #plannerBody.tp-editorial > .section-tabs#secTabs{
    grid-column: 1;
    grid-row: 1 / span 99;
    position: sticky;
    top: 90px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fffefb;
    border: 1px solid #e8e2d8;
    border-radius: 14px;
    padding: 10px;
    margin: 0 0 16px;
  }
  #plannerBody.tp-editorial .sec-tab{
    text-align: left;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 14px;
    font-weight: 600;
    color: #4a6b52;
    background: transparent;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s;
    line-height: 1.3;
  }
  #plannerBody.tp-editorial .sec-tab:hover{background:#f5f0e8}
  #plannerBody.tp-editorial .sec-tab.active{
    background: linear-gradient(135deg,#1b2e1f,#2d5a3d);
    color: #fff;
  }
  #plannerBody.tp-editorial .sec-tab.active .tab-count{color:#cbe2d2}
  /* Sticky HUD inserted by JS appears at the bottom of the side-nav */
  #plannerBody.tp-editorial .tp-hud{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e8e2d8;
    font-size: 12px;
    color: #4a6b52;
  }
  #plannerBody.tp-editorial .tp-hud__title{
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    color: #1b2e1f;
    font-size: 13px;
    margin: 0 0 6px;
  }
  #plannerBody.tp-editorial .tp-hud__stat{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dotted #f5f0e8}
  #plannerBody.tp-editorial .tp-hud__stat:last-child{border-bottom:none}
  #plannerBody.tp-editorial .tp-hud__safety{margin-top:8px;font-size:11px;line-height:1.5}
  #plannerBody.tp-editorial .tp-hud__safety a{color:#e8734a;text-decoration:none;font-weight:600}
  #plannerBody.tp-editorial .tp-hud__safety a:hover{text-decoration:underline}
}

/* ============================================================
   "Near here" panel — connects itinerary stops to nearby
   restaurants/coffee/groceries/sub-stops/activities.
   ============================================================ */
.ea-near-panel{
  background:#fffefb;
  border:1px solid #e8e2d8;
  border-radius:14px;
  padding:16px 18px;
  margin:14px 0;
}
.ea-near-panel__title{
  font-family:'Fraunces',Georgia,serif;
  font-size:15px;
  font-weight:700;
  color:#1b2e1f;
  margin:0 0 4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.ea-near-panel__sub{font-size:11px;color:#718096;margin:0 0 12px}
.ea-near-panel__bucket{margin-bottom:14px}
.ea-near-panel__bucket-h{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;font-weight:700;color:#4a6b52;margin:0 0 6px}
.ea-near-panel__items{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.ea-near-item{
  background:#faf7f2;
  border:1px solid #e8e2d8;
  border-radius:8px;
  padding:8px 10px;
  font-size:12px;
  line-height:1.4;
}
.ea-near-item__name{font-weight:700;color:#1b2e1f;margin-bottom:2px}
.ea-near-item__meta{color:#718096;font-size:11px}
.ea-near-item__dist{color:#e8734a;font-weight:700}
.ea-near-empty{font-size:11px;color:#a8a092;font-style:italic}

/* ============================================================
   Transit card — public-transit guidance for NYC, Boston.
   ============================================================ */
.ea-transit-card{
  background:linear-gradient(135deg,#fffefb,#f0faf3);
  border:1px solid #cbe2d2;
  border-left:3px solid #2d5a3d;
  border-radius:12px;
  padding:14px 18px;
  margin:0 0 16px;
  font-size:13px;
}
.ea-transit-card__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ea-transit-card__title{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:15px;color:#1b2e1f;margin:0}
.ea-transit-card__verified{font-size:10px;color:#718096;text-transform:uppercase;letter-spacing:0.06em}
.ea-transit-card__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:8px}
.ea-transit-card__pill{background:#fffefb;border:1px solid #cbe2d2;color:#2d5a3d;padding:3px 10px;border-radius:14px;font-size:11px;font-weight:600;display:inline-block;margin:2px 3px 0 0}
.ea-transit-card__plan-link{display:inline-block;margin-top:10px;background:#2d5a3d;color:#fff;text-decoration:none;padding:7px 14px;border-radius:6px;font-size:12px;font-weight:700}
.ea-transit-card__plan-link:hover{background:#1b2e1f}
.ea-transit-card__plan-link:focus-visible{outline:2px solid #1b2e1f;outline-offset:2px}
.ea-transit-card__details{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed #cbe2d2;font-size:12px;line-height:1.55}
.ea-transit-card__details.open{display:block}
.ea-transit-card__expand{background:none;border:none;color:#2d5a3d;font-size:11px;font-weight:600;cursor:pointer;padding:6px 0 0;text-decoration:underline}
@media (max-width: 979px){
  /* Mobile: keep horizontal scroll tabs (existing behavior). HUD hides. */
  #plannerBody.tp-editorial .tp-hud{display:none}
}
@media (prefers-reduced-motion: reduce){
  #plannerBody.tp-editorial .sec-tab{transition:none !important}
}

/* ============================================================
   Cultural Briefing card
   ============================================================ */
.ea-culture-card{
  background:linear-gradient(135deg,#fffefb,#f0faf3);
  border:1px solid #cbe2d2;
  border-left:3px solid #2d5a3d;
  border-radius:12px;
  padding:14px 18px;
  margin:0 0 16px;
  font-size:13px;
  color:#1b2e1f;
}
.ea-culture-card__head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ea-culture-card__flag{font-size:18px}
.ea-culture-card__title{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:15px;color:#1b2e1f;margin:0}
.ea-culture-card__verified{font-size:10px;color:#718096;text-transform:uppercase;letter-spacing:0.06em;margin-left:auto}
.ea-culture-card__row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;line-height:1.5}
.ea-culture-card__row strong{color:#2d5a3d;font-weight:700}
.ea-culture-card__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ea-culture-card__chip{background:#fffefb;border:1px solid #cbe2d2;color:#2d5a3d;padding:3px 9px;border-radius:14px;font-size:11px;font-weight:600}
.ea-culture-card__expand{background:none;border:none;color:#2d5a3d;font-size:11px;font-weight:600;cursor:pointer;padding:6px 0 0;text-decoration:underline}
.ea-culture-card__expand:focus-visible{outline:2px solid #2d5a3d;outline-offset:2px;border-radius:4px}
.ea-culture-card__details{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed #cbe2d2;font-size:12px;line-height:1.6}
.ea-culture-card__details.open{display:block}
.ea-culture-card__details dt{font-weight:700;color:#1b2e1f;margin-top:8px}
.ea-culture-card__details dd{margin:0 0 4px;color:#4a5568}

/* ============================================================
   Per-tab filter-chip strip (Phase A1)
   "Near my hotel" / "Near my stops" / "Near my restaurants" / etc.
   Sticky, horizontally scrollable on mobile, honors reduced-motion.
   ============================================================ */
.tp-filter-chips{
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(180deg,#fffefb 0%,#fffefb 80%,rgba(255,254,251,0.6) 100%);
  border-bottom:1px solid #e8e2d8;
  padding:10px 0 12px;
  margin:0 0 14px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.tp-filter-chips__label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:700;
  color:#718096;
  margin-right:6px;
  flex-shrink:0;
}
.tp-filter-chip{
  background:#fffefb;
  border:1.5px solid #e8e2d8;
  color:#4a6b52;
  padding:6px 14px;
  border-radius:18px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
  font-family:'Inter',sans-serif;
  white-space:nowrap;
}
.tp-filter-chip:hover{background:#f5f0e8;border-color:#2d5a3d}
.tp-filter-chip:focus-visible{outline:2px solid #2d5a3d;outline-offset:2px}
.tp-filter-chip.is-active{
  background:linear-gradient(135deg,#1b2e1f,#2d5a3d);
  color:#fff;
  border-color:#1b2e1f;
}
.tp-filter-chip.is-active:hover{background:linear-gradient(135deg,#0e1a10,#1b2e1f)}
.tp-filter-empty{
  background:#faf7f2;
  border:1px dashed #cbe2d2;
  border-radius:10px;
  padding:18px 20px;
  text-align:center;
  color:#4a6b52;
  font-size:13px;
  margin:14px 0;
}
.tp-filter-empty__hint{font-size:11px;color:#a8a092;margin-top:4px}
.tp-card-distance{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  color:#e8734a;
  background:#fff5ef;
  border:1px solid #ffd9c2;
  padding:1px 6px;
  border-radius:8px;
  margin-left:6px;
}
@media (max-width: 767px){
  .tp-filter-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}
@media (prefers-reduced-motion: reduce){
  .tp-filter-chip{transition:none !important}
}

/* ============================================================
   Day-section grouped itinerary (Phase A6)
   Day 1 / Day 2 / Day 3 with travel-distance pill per day.
   Each section collapsible. Locked items show 🔒.
   ============================================================ */
.day-section{
  background:#fffefb;
  border:1px solid #e8e2d8;
  border-radius:12px;
  padding:14px 18px;
  margin:0 0 14px;
}
.day-section__header{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
  padding-bottom:8px;
  border-bottom:1px dashed #e8e2d8;
}
.day-section__title{
  font-family:'Fraunces',Georgia,serif;
  font-weight:700;
  font-size:18px;
  color:#1b2e1f;
  margin:0;
}
.day-section__meta{
  font-size:11px;
  color:#718096;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.day-section__pill{
  background:#f0faf3;
  border:1px solid #cbe2d2;
  color:#2d5a3d;
  padding:2px 10px;
  border-radius:14px;
  font-size:11px;
  font-weight:700;
}
.day-section__items{display:flex;flex-direction:column;gap:6px}
.day-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  background:#faf7f2;
  border-radius:8px;
  font-size:13px;
}
.day-item__time{
  font-size:10px;
  text-transform:uppercase;
  font-weight:700;
  color:#4a6b52;
  min-width:60px;
}
.day-item__name{flex:1;color:#1b2e1f;font-weight:600}
.day-item__lock{font-size:14px;color:#e8734a}
.day-item__remove{background:none;border:none;color:#a8a092;font-size:14px;cursor:pointer;padding:2px 6px}
.day-item__remove:hover{color:#e53e3e}
.day-item__lock-toggle{background:none;border:none;color:#a8a092;font-size:14px;cursor:pointer;padding:2px 6px}
.day-item__lock-toggle:hover{color:#e8734a}
.day-cluster-bar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin:0 0 14px;
}
.day-cluster-btn{
  background:linear-gradient(135deg,#2d5a3d,#1b2e1f);
  color:#fff;
  border:none;
  padding:8px 18px;
  border-radius:20px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  font-family:'Inter',sans-serif;
}
.day-cluster-btn:hover{background:linear-gradient(135deg,#1b2e1f,#0e1a10)}
.day-cluster-btn:focus-visible{outline:2px solid #1b2e1f;outline-offset:2px}
.day-cluster-btn:disabled{background:#cbe2d2;color:#718096;cursor:not-allowed}
.day-cluster-hint{font-size:11px;color:#718096}
