/* ============================================================
   ICTW UNIVERSE — 3D map page styling
   ============================================================ */

/* Force [hidden] attribute to actually hide elements even when
   their class sets display: flex/grid. (Joel 2026-04-30 fix.) */
[hidden] { display: none !important; }

/* Defensive — when the modal dialog isn't open, no descendants render.
   Prevents the cinematic backdrop pseudo from bleeding onto the map. */
.character-world:not([open]) { display: none !important; }
.character-world:not([open])::before,
.character-world:not([open])::after { display: none !important; content: none !important; }

/* ============================================================
   SHAREABLE SACRED OBJECT — gold rule "Download a card to share"
   ============================================================ */
.cw-sacred-share {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px 18px;
  background: rgba(194, 158, 70,0.16);
  border: 1px solid rgba(194, 158, 70,0.55);
  border-radius: 6px;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cw-sacred-share:hover {
  background: rgba(194, 158, 70,0.32);
  color: var(--ivory, #F4EDD7);
  border-color: var(--bronze-hi, #E1CD9B);
}

/* ============================================================
   MOBILE PASS — touch-friendly tweaks for tween phones (Joel
   2026-04-30 mandate: tween audience is on phones).
   ============================================================ */
@media (max-width: 720px) {
  /* Larger touch targets on tour controls */
  .throughline-secondary,
  .throughline-skip,
  .reset-view,
  .watch-intro-again {
    padding: 12px 16px;
    font-size: 11px;
  }
  /* Stack tour controls vertically so they fit the narrow strip */
  .throughline-controls {
    bottom: 16px;
    flex-wrap: wrap;
    max-width: calc(100vw - 24px);
    justify-content: center;
  }
  /* Bigger Continue button */
  .throughline-continue {
    padding: 12px 22px;
    width: calc(100% - 16px);
  }
  /* Modal — full-screen with one column instead of side-by-side */
  .cw-content {
    grid-template-columns: 1fr !important;
    grid-template-rows: 36vh 1fr;
  }
  .cw-portrait {
    height: 36vh;
  }
  .cw-text {
    padding: 18px 18px 60px;
    font-size: 15px;
  }
  .cw-name {
    font-size: 38px !important;
  }
  /* Question buttons — single column, bigger tap targets */
  .cw-questions-grid { grid-template-columns: 1fr; }
  .cw-q-btn {
    padding: 14px 18px;
    font-size: 14px;
  }
  /* Today's hero card slimmer on phone */
  .todays-hero {
    top: 64px;
    right: 8px;
    max-width: 200px;
    padding: 8px 12px;
  }
  .todays-hero-name { font-size: 16px; }
  .todays-hero-blurb { font-size: 11px; line-height: 1.35; }
  /* Throughline card on phone — MINIMAL: just era + title (CEO 2026-05-08 v3:
     "I'm just talking about the pop-ups when you walk through the timeline").
     Picture, blurb, date, num, all hidden so the card is a compact
     bottom-strip that doesn't cover the map. */
  .throughline-card {
    top: auto !important;
    bottom: calc(110px + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    right: auto !important;
    max-width: none !important;
    width: max-content !important;
    min-width: 220px;
    padding: 10px 18px !important;
    transform: translateX(-50%) !important;
    flex-direction: row;
    gap: 0;
    text-align: center;
  }
  .throughline-card-img,
  .throughline-card-num,
  .throughline-card-date,
  .throughline-card-blurb {
    display: none !important;
  }
  .throughline-card-text {
    align-items: center !important;
    text-align: center;
    gap: 2px !important;
  }
  .throughline-card-meta { justify-content: center; }
  .throughline-card-era { font-size: 11px; letter-spacing: 0.04em; }
  .throughline-card-name { font-size: 22px !important; line-height: 1.1; margin: 0 !important; }
  /* Portal entry button — full width */
  .cw-portal-entry {
    padding: 14px 16px;
  }
  .cw-portal-entry-cta {
    font-size: 15px;
  }
  /* Era plate — smaller on phone */
  .throughline-era-plate {
    top: 64px;
    right: 8px;
    max-width: 200px;
    padding: 8px 12px;
  }
  .throughline-era-plate-title { font-size: 14px; }
  /* Map intro on phone — smaller text */
  .map-intro-headline { font-size: 28px; }
  .map-intro-line { font-size: 15px; }
  /* HUD title on phone — collapse to a single line */
  .u3d-hud-title { padding: 12px 16px; }
  .u3d-hud-h1 { font-size: 22px; }
  .u3d-hud-eyebrow { font-size: 9px; }
  .u3d-hud-tagline { font-size: 11px; }
  .u3d-hud-roadmap { font-size: 10px; }
  /* CEO 2026-05-08 v5: same vertical level + side-by-side at 375px.
     Both buttons must shrink to fit. The watch-intro becomes a compact
     icon+label; throughline keeps the gold pulse but slimmer text. */
  .watch-intro-again {
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    left: 12px !important; right: auto !important;
    padding: 8px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
    max-width: 42vw !important;     /* never exceeds half the viewport */
    white-space: nowrap;
  }
  /* Throughline button — bottom-right on phone, slim. */
  .throughline-btn {
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    right: 12px !important;
    transform: none !important;
    padding: 9px 14px !important;
    flex-direction: row !important;
    gap: 6px;
    max-width: 50vw !important;
    white-space: nowrap;
  }
  /* On mobile, the sub-text "From Adam to Revelation" hides so the
     button stays compact alongside watch-intro on the same row. */
  .throughline-btn-sub { display: none !important; }
  .throughline-btn-text { font-size: 11px !important; letter-spacing: 0.10em !important; }
  .throughline-btn-icon { font-size: 11px !important; }

  /* CEO 2026-05-08 v2: mobile popup MINIMAL — just era + title.
     No picture, no paragraph, no scripture, no actions. Tap title to enter
     the character's full page; tap close X to dismiss. */
  .character-world .cw-portrait,
  .character-world .cw-blurb,
  .character-world .cw-story,
  .character-world .cw-funfact,
  .character-world .cw-connections,
  .character-world .cw-appears-in,
  .character-world .cw-chat,
  .character-world .cw-date,
  .character-world .cw-scripture-row,
  .character-world .cw-actions,
  .character-world .cw-role,
  .character-world .cw-hero {
    display: none !important;
  }
  /* mobile popup: smaller dialog */
  /* Dialog itself shrinks to content size, centered, with rounded edges.
     min-height needs to be unset because a sitewide rule sets 100vh. */
  .character-world {
    width: 92vw !important;
    max-width: 360px !important;
    height: auto !important;
    max-height: 60vh !important;
    min-height: 0 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  .character-world .cw-content {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
    max-height: 60vh !important;
    min-height: 0 !important;
  }
  .character-world .cw-text {
    padding: 28px 22px !important;
    font-size: 15px;
    text-align: center;
  }
  .character-world .cw-name {
    font-size: 30px !important;
    margin: 14px 0 12px !important;
    line-height: 1.1;
  }
  .character-world .cw-tags {
    justify-content: center;
  }
  .character-world .cw-scripture-row {
    justify-content: center;
    text-align: center;
    margin-top: 8px;
  }
  .character-world .cw-actions {
    justify-content: center;
    margin-top: 18px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .throughline-btn-text { font-size: 13px; }
  .throughline-btn-sub { font-size: 10px; }
  /* Today's hero & era plate must NOT collide with HUD */
  .todays-hero { top: 124px; }
  .throughline-era-plate { top: 124px; }
}
/* Tiny phones: collapse Today's Hero card to a single chip */
@media (max-width: 420px) {
  .todays-hero { padding: 6px 10px; max-width: 170px; }
  .todays-hero-eyebrow { font-size: 8px; letter-spacing: 0.28em; }
  .todays-hero-name { font-size: 14px; }
  .todays-hero-blurb { display: none; }
  .todays-hero-cta { font-size: 9px; }
}

/* ============================================================
   IPAD / TABLET — landscape keeps two-column modal, portrait is
   single column with portrait at top. Plus larger tap targets.
   (Joel mandate 2026-04-30: must work great on iPad + Kindle Fire.)
   ============================================================ */
@media (min-width: 720px) and (max-width: 1100px) {
  .cw-content {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .cw-name { font-size: 44px; }
  .cw-text { padding: 28px; font-size: 16px; }
  .cw-q-btn { padding: 16px 18px; font-size: 14px; }
  /* HUD title compact on tablet */
  .u3d-hud-h1 { font-size: 32px; }
  .u3d-hud-tagline { font-size: 13px; }
  .throughline-btn { padding: 14px 22px; }
}
@media (min-width: 720px) and (max-width: 1100px) and (orientation: portrait) {
  /* iPad portrait — modal flips to single column */
  .cw-content {
    grid-template-columns: 1fr;
    grid-template-rows: 42vh 1fr;
  }
  .cw-portrait { height: 42vh; }
}

/* ============================================================
   GLOBAL TOUCH TUNING — ensure every interactive element on the
   universe is at least 44×44px, the iOS / Material accessibility
   minimum for touch targets.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .cw-q-btn, .cw-reactor-btn, .cw-whisper-toggle, .cw-sacred-card,
  .author-link, .btn, .map-intro-skip, .reset-view, .random-life-btn,
  .watch-intro-again, .throughline-btn, .throughline-secondary,
  .throughline-skip, .throughline-continue, .cw-position-prev,
  .cw-position-next, .todays-hero {
    min-height: 44px;
  }
  .cw-close { width: 52px; height: 52px; }
  /* Larger emoji reactor on touch — easier to tap */
  .cw-reactor-emoji { font-size: 26px; }
  /* Bigger close button label position on touch */
  .cw-close { top: 18px; right: 18px; font-size: 28px; }
}

/* ============================================================
   IOS 100VH FIX — Safari's address bar resize causes 100vh to be
   wrong. Use 100dvh where supported with a 100vh fallback.
   ============================================================ */
.universe-3d-page,
.u3d-stage,
.character-world,
.character-world .cw-content {
  min-height: 100vh;
  min-height: 100dvh;
}
.u3d-stage {
  height: 100vh;
  height: 100dvh;
}

/* Prevent rubber-band scroll on iOS while inside the universe.
   The 3D canvas swallows touches; HUD elements float above. */
body.universe-3d-page {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* ============================================================
   WATCH INTRO — corner pill that triggers the cinematic intro.
   Joel mandate 2026-05-06: intro no longer auto-plays, so this is
   the entry point. Bumped size + subtle gold pulse for findability.
   ============================================================ */
.watch-intro-again {
  position: fixed;
  /* CEO 2026-05-08 v3: 200 was too high, 28 was too low. Middle ground:
     watch-intro lives in the bottom-LEFT corner at 32px so it's always
     visible and clearly separated from the centered "Walk the Timeline"
     button which sits higher up. */
  bottom: calc(32px + env(safe-area-inset-bottom));
  left: 32px;
  z-index: 25;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  background: rgba(5, 5, 5,0.78);
  border: 1px solid rgba(194, 158, 70,0.65);
  border-radius: 999px;
  padding: 13px 22px;
  color: var(--ivory, #F4EDD7);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 0 1px rgba(194, 158, 70,0.10) inset,
    0 0 22px rgba(194, 158, 70,0.18);
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
  animation: watch-intro-pulse 3.4s ease-in-out infinite;
}
@keyframes watch-intro-pulse {
  0%, 100% { box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 0 1px rgba(194, 158, 70,0.10) inset,
    0 0 22px rgba(194, 158, 70,0.18); }
  50% { box-shadow:
    0 8px 24px rgba(0,0,0,0.45),
    0 0 0 1px rgba(194, 158, 70,0.20) inset,
    0 0 38px rgba(194, 158, 70,0.42); }
}
.watch-intro-again::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bronze-hi, #E1CD9B);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(194, 158, 70,0.85);
}
.watch-intro-again:hover {
  background: rgba(194, 158, 70,0.22);
  border-color: var(--bronze-hi, #E1CD9B);
  color: var(--ivory, #F4EDD7);
  transform: translateY(-1px);
  animation-play-state: paused;
}

/* ============================================================
   THROUGHLINE NUDGE — appears after intro, points to Walk button
   ============================================================ */
.throughline-nudge {
  position: fixed;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 27;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  font-family: 'Belda', serif;
  font-style: italic;
  color: var(--bronze-hi, #E1CD9B);
  font-size: 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.95);
}
.throughline-nudge-arrow {
  font-size: 20px;
  color: rgba(220,38,38,0.95);
  animation: nudge-bob 1.2s ease-in-out infinite;
}
@keyframes nudge-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
.throughline-btn.is-glowing {
  box-shadow: 0 12px 56px rgba(255,120,80,0.95), inset 0 0 36px rgba(255,255,255,0.40), 0 0 96px rgba(220,38,38,0.55);
}

/* ============================================================
   TODAY'S HERO — featured-of-the-day card in upper-right
   ============================================================ */
.todays-hero {
  position: fixed;
  top: 90px;
  right: 32px;
  z-index: 26;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(194, 158, 70,0.22) 0%, rgba(26, 39, 54,0.85) 100%);
  border: 1px solid rgba(194, 158, 70,0.42);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Belda', serif;
  color: var(--ivory, #F4EDD7);
  max-width: 280px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 32px rgba(194, 158, 70,0.18);
  transition: transform 0.2s, box-shadow 0.3s, border-color 0.3s;
}
.todays-hero:hover {
  transform: translateY(-2px);
  border-color: var(--bronze-hi, #E1CD9B);
  box-shadow: 0 16px 56px rgba(0,0,0,0.65), 0 0 56px rgba(194, 158, 70,0.42);
}
.todays-hero-eyebrow {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 2px;
}
.todays-hero-name {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ivory, #F4EDD7);
  line-height: 1;
  margin: 2px 0 4px;
}
.todays-hero-blurb {
  font-family: 'Belda', serif;
  font-size: 13px;
  color: rgba(244, 237, 215,0.78);
  line-height: 1.45;
  margin-bottom: 6px;
}
.todays-hero-cta {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
}
@media (max-width: 720px) {
  .todays-hero { top: 78px; right: 16px; max-width: 220px; padding: 10px 14px; }
  .todays-hero-name { font-size: 18px; }
  .todays-hero-blurb { font-size: 12px; }
}

/* ============================================================
   MAP INTRO — black-screen cinematic title card
   ============================================================ */
.map-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.map-intro-inner {
  max-width: 880px;
  position: relative;
}
.map-intro-line {
  font-family: 'Belda', serif;
  font-size: clamp(18px, 1.9vw, 24px);
  color: rgba(244, 237, 215,0.92);
  margin: 0 0 18px;
  line-height: 1.55;
  text-shadow: 0 0 64px rgba(194, 158, 70,0.32);
  /* Hidden until GSAP fades them in — prevents the flash-then-disappear
     bug Joel reported on 2026-05-01. */
  opacity: 0;
}
.map-intro-headline {
  /* Override below has the type styling; this rule just covers the
     initial-hidden state to prevent flicker. */
}
.map-intro-line--1,
.map-intro-line--2 {
  font-style: italic;
  color: rgba(244, 237, 215,0.85);
}
.map-intro-headline {
  opacity: 0;       /* hidden until GSAP fades it in (2026-05-01 flicker fix) */
  font-family: 'Belda', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(32px, 4.4vw, 56px);
  color: var(--ivory, #F4EDD7);
  line-height: 1.15;
  margin: 36px 0 36px;
  text-shadow: 0 4px 36px rgba(0,0,0,0.95), 0 0 96px rgba(194, 158, 70,0.45);
}
.map-intro-headline em {
  color: var(--bronze-hi, #E1CD9B);
  font-style: italic;
  font-weight: 400;
}
.map-intro-line--3 {
  font-family: 'Belda', serif;
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(244, 237, 215,0.78);
  margin-top: 30px;
}
.map-intro-line--cta {
  margin-top: 28px;
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--bronze-hi, #E1CD9B);
}
.map-intro-line--cta span {
  color: var(--ivory, #F4EDD7);
}
.map-intro-skip {
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(194, 158, 70,0.45);
  border-radius: 999px;
  padding: 10px 22px;
  color: rgba(244, 237, 215,0.78);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  opacity: 0;
}
.map-intro-skip:hover {
  background: rgba(194, 158, 70,0.18);
  border-color: var(--bronze-hi, #E1CD9B);
  color: var(--ivory, #F4EDD7);
  opacity: 1 !important;
}
@media (max-width: 720px) {
  .map-intro { padding: 24px; }
  .map-intro-skip { bottom: -80px; padding: 8px 18px; font-size: 10px; }
}

.universe-body.universe-3d-page {
  background: #050505;
  color: var(--ivory, #F4EDD7);
  overflow: hidden;
  margin: 0;
}
/* The Verse-of-the-Week chip is global from site.js — hide it on the
   immersive 3D page so it doesn't break the cinematic frame. */
.universe-3d-page .votw { display: none !important; }
.universe-body.universe-3d-page::before { opacity: 0; }

.universe-3d-page nav.site-nav {
  position: fixed;
  background: linear-gradient(180deg, rgba(5, 5, 5,0.9), rgba(5, 5, 5,0.0));
  border-bottom: none;
  z-index: 60;
}
.universe-3d-page nav.site-nav .nav-links a { color: rgba(244, 237, 215,0.86); }
.universe-3d-page nav.site-nav .nav-links a:hover { color: var(--bronze-hi, #E1CD9B); }

/* The 3D stage — entire viewport */
.u3d-stage {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, #1A2736 0%, #0F1620 35%, #050505 80%),
    #050505;
}

#u3dCanvas {
  display: block;
  width: 100%; height: 100%;
  cursor: grab;
  /* Block browser default touch gestures so OrbitControls handles
     pinch-zoom and two-finger pan on trackpad/touchscreen. */
  touch-action: none;
}
#u3dCanvas:active { cursor: grabbing; }

/* Loading state */
.u3d-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 10;
  background: radial-gradient(ellipse at center, rgba(5, 5, 5,0.65), rgba(5, 5, 5,0.95));
  transition: opacity 0.6s ease;
}
.u3d-loading-spark {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bronze-hi, #E1CD9B);
  box-shadow: 0 0 28px rgba(194, 158, 70,0.85), 0 0 60px rgba(194, 158, 70,0.45);
  animation: u3d-spark 1.2s ease-in-out infinite;
  margin-bottom: 22px;
}
@keyframes u3d-spark {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50%      { opacity: 1.0;  transform: scale(1.25); }
}
.u3d-loading-text {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(244, 237, 215,0.85);
}

/* HUD — overlays the 3D stage */
.u3d-hud {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 20;
}
.u3d-hud > * { pointer-events: auto; }

/* Title block at top-left */
.u3d-hud-title {
  position: absolute;
  top: 100px; left: 40px;
  max-width: 460px;
}
.u3d-hud-eyebrow {
  display: block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.u3d-hud-h1 {
  font-family: 'Belda', serif;
  font-weight: 400; font-style: italic;
  font-size: clamp(40px, 5vw, 76px);
  color: var(--ivory, #F4EDD7);
  line-height: 0.98;
  margin: 0 0 14px;
  text-shadow: 0 8px 32px rgba(0,0,0,0.85);
}
.u3d-hud-tagline {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 237, 215,0.85);
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}
/* ROADMAP framing — makes it clear this is the trajectory of the whole series */
.u3d-hud-roadmap {
  margin: 18px 0 0;
  font-family: 'Belda', serif;
  font-size: 13px;
  color: rgba(244, 237, 215,0.86);
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9);
  line-height: 1.4;
}
.u3d-roadmap-num {
  font-family: 'Belda', serif; font-style: italic;
  color: var(--bronze-hi, #E1CD9B);
  font-size: 14px;
}
.u3d-roadmap-sep { color: rgba(194, 158, 70,0.5); }
.u3d-roadmap-now {
  font-style: italic;
  color: rgba(244, 237, 215,0.78);
}
.u3d-roadmap-now strong {
  color: var(--ivory, #F4EDD7);
  font-style: normal;
}

/* Roadmap legend — bottom-left key explaining what the pins mean */
.u3d-legend {
  position: absolute;
  bottom: 28px; left: 32px;
  background: rgba(5, 5, 5,0.62);
  border: 1px solid rgba(194, 158, 70,0.3);
  border-radius: 6px;
  padding: 14px 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 25;
  max-width: 320px;
  font-family: 'Belda', serif;
}
.u3d-legend-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px;
  color: rgba(244, 237, 215,0.85);
  margin: 6px 0;
  line-height: 1.4;
}
.u3d-legend-row strong { color: var(--ivory, #F4EDD7); font-style: normal; }
.u3d-legend-label { font-style: italic; }
.u3d-legend-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
}
.u3d-legend-dot--hero {
  background: radial-gradient(circle, #FBF8ED 0%, #E1CD9B 50%, #8E7236 100%);
  box-shadow: 0 0 14px rgba(194, 158, 70,0.85);
}
.u3d-legend-dot--char {
  background: radial-gradient(circle, #E1CD9B 0%, #C29E46 70%, transparent 100%);
}
.u3d-legend-dot--event {
  background: linear-gradient(135deg, #E1CD9B 0%, #6F5A1E 100%);
  border-radius: 2px;
  transform: rotate(45deg);
  width: 12px; height: 12px;
}
@media (max-width: 720px) {
  .u3d-legend { bottom: 16px; left: 16px; padding: 10px 12px; max-width: 260px; }
  .u3d-legend-row { font-size: 10.5px; gap: 10px; }
  .u3d-hud-roadmap { font-size: 11px; }
}

/* Era jump buttons — bottom strip */
.u3d-hud-eras {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  background: rgba(5, 5, 5,0.78);
  border: 1px solid rgba(194, 158, 70,0.32);
  border-radius: 999px;
  padding: 8px 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: calc(100% - 32px);
  overflow-x: auto;
  scrollbar-width: none;
}
.u3d-hud-eras::-webkit-scrollbar { display: none; }
.u3d-hud-era {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}
.u3d-hud-era:hover { background: rgba(194, 158, 70,0.18); }
.u3d-hud-era-num {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
}
.u3d-hud-era-name {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(244, 237, 215,0.88);
}

/* Reset-view button */
.u3d-hud-controls {
  position: absolute;
  top: 100px; right: 40px;
}
.u3d-hud-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(5, 5, 5,0.78);
  border: 1px solid rgba(194, 158, 70,0.42);
  color: var(--bronze-hi, #E1CD9B);
  font-size: 20px;
  font-family: 'Belda', serif;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s, transform 0.3s;
}
.u3d-hud-btn:hover {
  background: rgba(194, 158, 70,0.25);
  transform: scale(1.08);
}

/* Hover label that floats with cursor over a pin */
.u3d-hover-label {
  position: fixed;
  z-index: 30;
  background: rgba(5, 5, 5,0.92);
  border: 1px solid rgba(194, 158, 70,0.42);
  border-radius: 4px;
  padding: 10px 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 18px rgba(194, 158, 70,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.u3d-hover-label.is-active { opacity: 1; }
.u3d-hover-label .u3d-hover-name {
  display: block;
  font-family: 'Belda', serif;
  font-size: 16px;
  color: var(--ivory, #F4EDD7);
  margin-bottom: 2px;
}
.u3d-hover-label .u3d-hover-date {
  display: block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
}

/* Region-entry overlay — appears when user clicks the map */
.region-entry {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
}
.region-entry.is-active { pointer-events: none; }
.region-entry-inner {
  text-align: center;
  padding: 48px 56px;
  background: radial-gradient(ellipse 90% 100% at 50% 50%, rgba(5, 5, 5,0.72) 0%, rgba(5, 5, 5,0) 80%);
  max-width: 80vw;
}
.region-entry-eyebrow {
  display: block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.48em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 16px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.95);
}
.region-entry-name {
  font-family: 'Belda', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 120px);
  color: var(--ivory, #F4EDD7);
  line-height: 0.96;
  margin: 0 0 18px;
  text-shadow:
    0 8px 36px rgba(0,0,0,0.95),
    0 0 64px rgba(194, 158, 70,0.35);
}
.region-entry-era {
  font-family: 'Belda', serif;
  font-size: clamp(15px, 1.4vw, 19px);
  color: rgba(244, 237, 215,0.86);
  margin: 0 auto;
  max-width: 640px;
  line-height: 1.5;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9);
}

/* Mobile */
@media (max-width: 720px) {
  .u3d-hud-title { top: 80px; left: 20px; max-width: 75vw; }
  .u3d-hud-h1 { font-size: 36px; }
  .u3d-hud-controls { top: 80px; right: 20px; }
  .u3d-hud-eras { bottom: 16px; padding: 6px 8px; }
  .u3d-hud-era { padding: 6px 10px; }
  .u3d-hud-era-name { font-size: 11px; }
  .region-entry-inner { padding: 32px 24px; }
}

/* ============================================================
   CHARACTER WORLD MODAL — same as previous build
   ============================================================ */
.character-world {
  border: none; padding: 0; margin: 0;
  width: 100%; height: 100%;
  max-width: 100vw; max-height: 100vh;
  background: linear-gradient(135deg, #1A2736 0%, #050505 100%);
  color: var(--ivory, #F4EDD7);
  overflow: hidden;
}

/* CEO 2026-05-08: "Watch the intro" pill removed from the entire site —
   the cinematic intro auto-plays once on first visit, no replay button needed. */
.watch-intro-again { display: none !important; }

/* CEO 2026-05-08 v2: when a character popup is open, the bottom-center
   "Walk the Timeline" button used to float on top of the popup's right
   panel (its action buttons and scripture row). Disappear while the
   dialog is open so the user can read the popup cleanly; the button
   reappears the moment they close. Same for the one-time nudge text.
   Uses :has() — Chrome 105+, Safari 15.4+, Firefox 121+ (well covered). */
body:has(dialog.character-world[open]) .throughline-btn,
body:has(dialog.character-world[open]) .throughline-nudge {
  display: none !important;
}

/* CEO 2026-05-08 v4: belt + suspenders. Hide the throughline-card picture
   (and number/date/blurb) on every touch device AND every viewport ≤ 900px,
   regardless of whatever else cascades later in the file. This catches
   phones in portrait/landscape AND iPads in portrait — Joel saw the
   picture on his iPhone where it should already have been hidden, so
   we're now redundantly nuking it from two directions. Desktop browsers
   with a real mouse keep the full rich card. */
@media (max-width: 900px) {
  .throughline-card-img,
  .throughline-card-num,
  .throughline-card-date,
  .throughline-card-blurb {
    display: none !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  .throughline-card-img,
  .throughline-card-num,
  .throughline-card-date,
  .throughline-card-blurb {
    display: none !important;
  }
}
.character-world::backdrop { background: rgba(5, 5, 5,0.96); backdrop-filter: blur(6px); }
.character-world[open] { animation: cw-fade-in 0.5s var(--ease-sacred, ease); }
@keyframes cw-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.cw-close {
  position: fixed;
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  background: rgba(244, 237, 215,0.08);
  border: 1px solid rgba(194, 158, 70,0.35);
  border-radius: 50%;
  font-size: 24px;
  color: var(--ivory, #F4EDD7);
  cursor: pointer; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.cw-close:hover {
  background: rgba(194, 158, 70,0.25);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: scale(1.1);
}
.cw-content {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  height: 100vh; overflow: hidden;
}
/* Soft branded backdrop instead of plain black for the contain bands.
   Joel 2026-04-30: don't waste the bands; brand them. */
.cw-portrait {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(194, 158, 70,0.12) 0%, transparent 70%),
    linear-gradient(180deg, #050505 0%, #1A2736 50%, #050505 100%);
  overflow: hidden;
}
.cw-portrait-frame { position: relative; width: 100%; height: 100%; }
.cw-portrait-frame img:not(.cw-portrait-mark) {
  width: 100%; height: 100%;
  /* Show the WHOLE generated image, never crop the head off.
     Joel 2026-04-30: portraits were getting cut at the framing. */
  object-fit: contain;
  object-position: center;
  display: block;
  position: relative;
  z-index: 2;
}
/* Wordmark behind the contained portrait — visible in the top band */
.cw-portrait-mark {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: min(60%, 280px);
  height: auto;
  opacity: 0.50;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
/* Rotating Scripture-or-inspiring caption — visible in the bottom band */
.cw-portrait-quote {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: min(86%, 540px);
  margin: 0;
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-shadow: 0 2px 16px rgba(0,0,0,0.90);
}
.cw-portrait-quote::before {
  content: '✦';
  display: block;
  color: var(--bronze-hi, #E1CD9B);
  font-size: 12px;
  letter-spacing: 0.4em;
  opacity: 0.92;
}
.cw-portrait-quote-text {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: clamp(13px, 1.25vw, 17px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ivory, #F4EDD7);
}
.cw-portrait-quote-ref {
  font-family: 'Belda', system-ui, sans-serif;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
}
.cw-portrait-frame img:not([src]),
.cw-portrait-frame img[src=""] { display: none; }
.cw-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 35%, rgba(194, 158, 70,0.18) 0%, transparent 70%),
    linear-gradient(135deg, #1A2736 0%, #050505 100%);
  font-family: 'Belda', serif; text-align: center; padding: 40px;
}
.cw-placeholder .cwp-initial {
  font-size: clamp(120px, 18vw, 240px);
  font-weight: 400;
  color: var(--bronze, #C29E46);
  text-shadow: 0 12px 48px rgba(0,0,0,0.7), 0 0 56px rgba(194, 158, 70,0.45);
  line-height: 1;
}
.cw-placeholder .cwp-name {
  font-family: 'Belda', serif; font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  color: rgba(244, 237, 215,0.85);
  margin-top: 18px;
}
.cw-placeholder .cwp-pending {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(194, 158, 70,0.65); margin-top: 22px;
}
.cw-portrait-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(5, 5, 5,0.55) 100%);
}
.cw-text {
  padding: clamp(28px, 3.6vw, 56px);
  overflow-y: auto;
  color: var(--ivory, #F4EDD7);
}
.cw-text::-webkit-scrollbar { width: 10px; }
.cw-text::-webkit-scrollbar-track { background: rgba(5, 5, 5,0.5); }
.cw-text::-webkit-scrollbar-thumb { background: rgba(194, 158, 70,0.4); border-radius: 6px; }
.cw-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cw-era, .cw-date, .cw-role, .cw-hero {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 3px;
}
.cw-era { background: rgba(194, 158, 70,0.16); border: 1px solid rgba(194, 158, 70,0.42); color: var(--bronze-hi, #E1CD9B); }
.cw-date { background: rgba(244, 237, 215,0.06); border: 1px solid rgba(244, 237, 215,0.18); color: rgba(244, 237, 215,0.85); }
.cw-role { background: rgba(244, 237, 215,0.06); border: 1px solid rgba(244, 237, 215,0.18); color: rgba(244, 237, 215,0.85); }
.cw-hero { background: linear-gradient(135deg, #E1CD9B, #C29E46); color: #1A2736; border: none; }
.cw-name {
  font-family: 'Belda', serif;
  font-weight: 400;
  font-size: clamp(34px, 4vw, 56px);
  color: var(--bronze, #C29E46);
  line-height: 1.04;
  margin: 0 0 14px;
  text-shadow: 0 6px 24px rgba(0,0,0,0.7);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.cw-blurb {
  font-family: 'Belda', serif; font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(244, 237, 215,0.92);
  margin: 0 0 22px; line-height: 1.5;
}
.cw-story {
  font-family: 'Belda', serif;
  font-size: 17px;
  color: rgba(244, 237, 215,0.85);
  line-height: 1.7;
  margin: 0 0 28px;
}
.cw-funfact {
  background: linear-gradient(180deg, rgba(194, 158, 70,0.18) 0%, rgba(194, 158, 70,0.08) 100%);
  border-left: 3px solid var(--bronze, #C29E46);
  padding: 18px 22px;
  border-radius: 0 4px 4px 0;
  margin: 0 0 28px;
}
.cw-funfact-label {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  display: block; margin-bottom: 8px;
}
.cw-funfact p {
  font-family: 'Belda', serif; font-style: italic;
  font-size: 16px; color: var(--ivory, #F4EDD7);
  margin: 0; line-height: 1.55;
}
.cw-scripture-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(194, 158, 70,0.16);
  border-bottom: 1px solid rgba(194, 158, 70,0.16);
  margin: 0 0 16px;
}
.cw-scripture-label {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(194, 158, 70,0.78);
}
.cw-scripture {
  font-family: 'Belda', serif; font-style: italic;
  font-size: 16px; color: var(--ivory, #F4EDD7);
}
.cw-connections, .cw-appears-in { margin: 0 0 16px; }
.cw-connections-label, .cw-appears-in-label {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(194, 158, 70,0.78);
  display: block; margin-bottom: 14px;
}
.cw-connections-grid, .cw-appears-in-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.cw-connection-chip, .cw-appears-in-chip {
  display: inline-flex; align-items: center;
  gap: 8px; padding: 6px 14px 6px 6px;
  background: rgba(244, 237, 215,0.06);
  border: 1px solid rgba(194, 158, 70,0.28);
  border-radius: 999px;
  font-family: 'Belda', serif; font-size: 13px;
  color: rgba(244, 237, 215,0.92);
  text-decoration: none; cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.cw-connection-chip:hover, .cw-appears-in-chip:hover {
  background: rgba(194, 158, 70,0.18);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: translateY(-1px);
}
.cw-connection-chip .chip-thumb,
.cw-appears-in-chip .chip-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #1A2736, #050505);
  font-family: 'Belda', serif; color: var(--bronze-hi, #E1CD9B);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 400;
  flex-shrink: 0; overflow: hidden;
}
.cw-connection-chip .chip-thumb img,
.cw-appears-in-chip .chip-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
}
.cw-connection-chip .chip-rel {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(194, 158, 70,0.68); margin-left: 4px;
}
.cw-actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
/* Disabled "Coming Soon" CTA — non-clickable but visually present */
.cw-read-book.btn-disabled {
  background: rgba(194, 158, 70,0.10) !important;
  border: 1px dashed rgba(194, 158, 70,0.45) !important;
  color: rgba(244, 237, 215,0.85) !important;
  cursor: default !important;
  pointer-events: none;
  font-style: italic;
}
.cw-read-book.btn-disabled::before { content: '⌛  '; opacity: 0.6; }
.cw-chat {
  background: rgba(194, 158, 70,0.06);
  border: 1px solid rgba(194, 158, 70,0.22);
  border-radius: 6px; padding: 22px;
  margin-top: 16px;
}
.cw-chat-intro {
  font-family: 'Belda', serif; font-style: italic;
  font-size: 16px; color: var(--ivory, #F4EDD7);
  margin: 0 0 16px; line-height: 1.5;
}
.cw-chat-questions { display: flex; flex-direction: column; gap: 10px; }
.cw-chat-question {
  text-align: left; padding: 12px 18px;
  background: rgba(244, 237, 215,0.04);
  border: 1px solid rgba(194, 158, 70,0.32);
  border-radius: 4px;
  font-family: 'Belda', serif;
  font-size: 14px;
  color: rgba(244, 237, 215,0.92);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.cw-chat-question:hover {
  background: rgba(194, 158, 70,0.16);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: translateX(3px);
}
.cw-chat-note {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(194, 158, 70,0.55);
  margin: 16px 0 0;
}
@media (max-width: 980px) {
  .cw-content { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; }
  .cw-text { padding: 24px; }
  .cw-name { font-size: 48px; }
}

/* ============================================================
   TIMELINE POSITION — chronological position card at top of every modal
   ============================================================ */
.cw-position {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: rgba(5, 5, 5,0.42);
  border: 1px solid rgba(194, 158, 70,0.22);
  border-radius: 5px;
}
.cw-position-row {
  display: flex; align-items: baseline;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(194, 158, 70,0.16);
}
.cw-position-num {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--bronze-hi, #E1CD9B);
  text-shadow: 0 0 18px rgba(194, 158, 70,0.32);
}
.cw-position-of {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(244, 237, 215,0.85);
}
.cw-position-era {
  margin-left: auto;
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(244, 237, 215,0.78);
}
.cw-position-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cw-position-prev,
.cw-position-next {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(5, 5, 5,0.55);
  border: 1px solid rgba(194, 158, 70,0.22);
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Belda', serif;
  color: rgba(244, 237, 215,0.92);
  text-align: left;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.cw-position-next { justify-content: flex-end; }
.cw-position-prev:hover, .cw-position-next:hover {
  background: rgba(194, 158, 70,0.18);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: translateY(-1px);
}
.cw-position-arrow {
  font-size: 18px;
  color: var(--bronze-hi, #E1CD9B);
  flex-shrink: 0;
}
.cw-position-detail { display: flex; flex-direction: column; }
.cw-position-detail--right { text-align: right; }
.cw-position-detail-label {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.30em; text-transform: uppercase;
  color: rgba(194, 158, 70,0.65);
}
.cw-position-detail-name {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ivory, #F4EDD7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}

/* ============================================================
   QUESTION PANEL — six tappable buttons that reveal each
   section of the character's story (Joel's mandate, 2026-04-30:
   make the modal a video-game dialog, not a wall of text).
   ============================================================ */
.cw-questions {
  margin: 0 0 16px;
  padding: 0;
}
.cw-questions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cw-q-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 11px 14px;
  background: rgba(26, 39, 54,0.55);
  border: 1px solid rgba(194, 158, 70,0.32);
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Belda', serif;
  color: rgba(244, 237, 215,0.92);
  font-size: 13px;
  line-height: 1.3;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-q-btn:hover {
  background: rgba(194, 158, 70,0.18);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: translateY(-1px);
}
.cw-q-btn.is-answered {
  background: linear-gradient(135deg, rgba(194, 158, 70,0.22) 0%, rgba(26, 39, 54,0.55) 100%);
  border-color: rgba(194, 158, 70,0.55);
  opacity: 0.78;
}
.cw-q-btn-icon {
  font-size: 14px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}
.cw-q-btn-text {
  font-style: italic;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .cw-questions-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   STRANGER WHISPER — tappable tile revealing how the Stranger
   shows up in this character's story specifically
   ============================================================ */
.cw-whisper { margin: 0 0 14px; }
.cw-whisper-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(26, 39, 54,0.85) 0%, rgba(5, 5, 5,0.92) 100%);
  border: 1px solid rgba(194, 158, 70,0.45);
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Belda', serif;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.cw-whisper-toggle:hover {
  background: linear-gradient(135deg, rgba(26, 39, 54,0.95) 0%, rgba(194, 158, 70,0.20) 100%);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: translateX(2px);
}
.cw-whisper-toggle.is-open {
  background: linear-gradient(135deg, rgba(194, 158, 70,0.20) 0%, rgba(26, 39, 54,0.95) 100%);
}
.cw-whisper-icon {
  font-size: 18px;
  color: var(--bronze-hi, #E1CD9B);
  flex-shrink: 0;
}
.cw-whisper-eyebrow {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  flex: 1;
}
.cw-whisper-cta {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(244, 237, 215,0.78);
}
.cw-whisper-toggle.is-open .cw-whisper-cta { display: none; }

/* Multi-sighting stack — each tap reveals one more whisper.
   (Joel mandate 2026-05-01: "more of them. Don't delete any.") */
.cw-whisper-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.cw-whisper-line {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ivory, #F4EDD7);
  margin: 0;
  padding: 16px 22px;
  background: rgba(194, 158, 70,0.10);
  border-left: 3px solid var(--bronze-hi, #E1CD9B);
  border-radius: 0 4px 4px 0;
  line-height: 1.55;
  text-shadow: 0 0 24px rgba(194, 158, 70,0.18);
}
.cw-whisper-line + .cw-whisper-line {
  /* subsequent sightings: a hair more transparent border to layer them visually */
  border-left-color: rgba(194, 158, 70,0.65);
}
.cw-whisper-more {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  background: rgba(5, 5, 5,0.55);
  border: 1px dashed rgba(194, 158, 70,0.45);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.cw-whisper-more:hover {
  background: rgba(194, 158, 70,0.18);
  border-style: solid;
  border-color: var(--bronze-hi, #E1CD9B);
  color: var(--ivory, #F4EDD7);
  transform: translateY(-1px);
}
.cw-whisper-more-icon {
  font-size: 13px;
  color: var(--bronze-hi, #E1CD9B);
}

/* ============================================================
   EMOJI REACTOR — "How does this story make you feel?"
   ============================================================ */
.cw-reactor {
  margin: 18px 0;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(26, 39, 54,0.42) 0%, rgba(5, 5, 5,0.62) 100%);
  border: 1px solid rgba(194, 158, 70,0.30);
  border-radius: 6px;
}
.cw-reactor-prompt {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin: 0 0 12px;
}
.cw-reactor-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.cw-reactor-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px 8px;
  background: rgba(5, 5, 5,0.45);
  border: 1px solid rgba(194, 158, 70,0.18);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  font-family: 'Belda', system-ui, sans-serif;
}
.cw-reactor-btn:hover {
  background: rgba(194, 158, 70,0.16);
  border-color: rgba(194, 158, 70,0.55);
  transform: translateY(-2px);
}
.cw-reactor-btn.is-picked {
  background: rgba(194, 158, 70,0.28);
  border-color: var(--bronze-hi, #E1CD9B);
  box-shadow: 0 0 0 2px rgba(194, 158, 70,0.30);
}
.cw-reactor-emoji {
  font-size: 22px;
  line-height: 1;
}
.cw-reactor-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 237, 215,0.78);
}
.cw-reactor-thanks {
  margin: 12px 0 0;
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(244, 237, 215,0.85);
  text-align: center;
}
@media (max-width: 600px) {
  .cw-reactor-row { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   SACRED OBJECT HUNT — find one hidden artifact per character
   ============================================================ */
.cw-sacred { margin: 0 0 14px; }
.cw-sacred-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: left;
  padding: 16px 22px;
  border-radius: 6px;
  font-family: 'Belda', serif;
  border: 1px solid rgba(194, 158, 70,0.36);
  background: rgba(5, 5, 5,0.55);
  cursor: default;
}
button.cw-sacred-card { cursor: pointer; transition: background 0.3s, transform 0.2s, border-color 0.3s; }
button.cw-sacred-card:hover {
  background: rgba(194, 158, 70,0.18);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: scale(1.01);
}
.cw-sacred-card--hidden {
  background: linear-gradient(135deg, rgba(26, 39, 54,0.55) 0%, rgba(5, 5, 5,0.92) 100%);
  border: 1px dashed rgba(194, 158, 70,0.55);
}
.cw-sacred-card--reveal,
.cw-sacred-card--found {
  background: linear-gradient(135deg, rgba(194, 158, 70,0.30) 0%, rgba(194, 158, 70,0.10) 100%);
  border: 1px solid rgba(194, 158, 70,0.65);
  box-shadow: 0 0 28px rgba(194, 158, 70,0.25), inset 0 0 32px rgba(194, 158, 70,0.08);
}
.cw-sacred-spark {
  font-size: 22px;
  color: var(--bronze-hi, #E1CD9B);
  text-shadow: 0 0 18px rgba(255,218,140,0.95);
  animation: sacred-spark-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes sacred-spark-pulse {
  0%,100% { opacity: 0.65; transform: scale(0.95); }
  50%     { opacity: 1.0;  transform: scale(1.20); }
}
.cw-sacred-icon {
  font-size: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.7));
}
.cw-sacred-content { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cw-sacred-eyebrow {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
}
.cw-sacred-name {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ivory, #F4EDD7);
}
.cw-sacred-line {
  font-family: 'Belda', serif;
  font-size: 13px;
  color: rgba(244, 237, 215,0.80);
  line-height: 1.5;
}

/* ============================================================
   PORTAL ENTRY — "Step inside [name]'s story" button
   ============================================================ */
.cw-portal-entry {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 18px 24px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, var(--bronze, #C29E46) 0%, var(--bronze-hi, #E1CD9B) 50%, #E1CD9B 100%);
  border: 2px solid rgba(255,222,140,0.95);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Belda', serif;
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 0 32px rgba(194, 158, 70,0.65), inset 0 0 24px rgba(255,255,255,0.18);
  animation: portal-pulse 2.4s ease-in-out infinite;
}
@keyframes portal-pulse {
  0%, 100% { box-shadow: 0 0 32px rgba(194, 158, 70,0.55), inset 0 0 24px rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 0 48px rgba(255,222,140,0.85), inset 0 0 32px rgba(255,255,255,0.30); }
}
.cw-portal-entry:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 0 56px rgba(255,222,140,0.95), inset 0 0 36px rgba(255,255,255,0.32);
}
.cw-portal-entry-icon {
  font-size: 30px;
  color: #1A2736;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.cw-portal-entry-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cw-portal-entry-eyebrow {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.46em; text-transform: uppercase;
  color: #1A2736;
}
.cw-portal-entry-cta {
  font-family: 'Belda', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: #1A2736;
}

/* ============================================================
   CINEMATIC MODE (Option A) — full-bleed environmental backdrop
   with slow Ken Burns zoom; bio panel floats on right side.
   ============================================================ */
.character-world.is-cinematic { }
.character-world.is-cinematic::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--scene-bg);
  background-size: cover;
  background-position: center 40%;
  z-index: 0;
  animation: ken-burns 32s ease-in-out infinite alternate;
}
.character-world.is-cinematic::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 5,0) 0%, rgba(5, 5, 5,0.30) 35%, rgba(5, 5, 5,0.85) 65%, rgba(5, 5, 5,0.95) 100%);
  pointer-events: none;
}
@keyframes ken-burns {
  0%   { transform: scale(1.0)  translate(0, 0); }
  100% { transform: scale(1.12) translate(-4%, -2%); }
}
.character-world.is-cinematic .cw-content {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr minmax(420px, 580px);
}
.character-world.is-cinematic .cw-portrait {
  background: transparent;
}
.character-world.is-cinematic .cw-portrait-frame img {
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.85));
  -webkit-mask-image: radial-gradient(ellipse 78% 92% at 50% 60%, #000 50%, rgba(0,0,0,0.8) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 78% 92% at 50% 60%, #000 50%, rgba(0,0,0,0.8) 78%, transparent 100%);
}
.character-world.is-cinematic .cw-portrait-vignette {
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(5, 5, 5,0.4) 100%);
}
.character-world.is-cinematic .cw-text {
  background: linear-gradient(180deg, rgba(5, 5, 5,0.55) 0%, rgba(5, 5, 5,0.75) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ============================================================
   DIORAMA HOST (Option C) — full-screen 3D parallax scene
   ============================================================ */
.diorama-host {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: #050505;
  display: none;
  overflow: hidden;
}
.diorama-host.is-active { display: block; }
.diorama-host canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.diorama-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(5, 5, 5,0.78);
  border: 1px solid rgba(194, 158, 70,0.55);
  color: var(--ivory, #F4EDD7);
  font-size: 24px;
  cursor: pointer;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, transform 0.3s;
}
.diorama-close:hover {
  background: rgba(194, 158, 70,0.32);
  transform: scale(1.08);
}
.diorama-panel {
  position: absolute;
  bottom: 60px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  max-width: 720px;
  text-align: center;
  padding: 28px 36px;
  background: linear-gradient(180deg, rgba(5, 5, 5,0.70) 0%, rgba(5, 5, 5,0.92) 100%);
  border-top: 1px solid rgba(194, 158, 70,0.45);
  border-bottom: 1px solid rgba(194, 158, 70,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}
.diorama-eyebrow {
  display: block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.46em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 10px;
}
.diorama-name {
  font-family: 'Belda', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  color: var(--ivory, #F4EDD7);
  line-height: 1;
  margin: 0 0 12px;
  text-shadow: 0 0 48px rgba(194, 158, 70,0.45);
}
.diorama-blurb {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 17px;
  color: rgba(244, 237, 215,0.92);
  margin: 0 0 14px;
}
.diorama-story {
  font-family: 'Belda', serif;
  font-size: 15px;
  color: rgba(244, 237, 215,0.78);
  line-height: 1.55;
  margin: 0 0 18px;
}
.diorama-back {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  background: rgba(194, 158, 70,0.18);
  border: 1px solid rgba(194, 158, 70,0.55);
  border-radius: 999px;
  padding: 10px 20px;
  color: var(--ivory, #F4EDD7);
  cursor: pointer;
  transition: background 0.25s;
}
.diorama-back:hover { background: rgba(194, 158, 70,0.35); }

/* ============================================================
   FUTURE-BOOK BADGE — every non-hero modal makes the roadmap clear
   ============================================================ */
.cw-future-book {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 8px 14px;
  background: rgba(194, 158, 70,0.08);
  border-left: 3px solid rgba(194, 158, 70,0.45);
  border-radius: 0 3px 3px 0;
  font-family: 'Belda', serif;
}
.cw-future-book-icon {
  font-size: 18px;
  color: var(--bronze-hi, #E1CD9B);
  flex-shrink: 0;
}
.cw-future-book-text {
  font-size: 13px;
  color: rgba(244, 237, 215,0.92);
  line-height: 1.45;
}
.cw-future-book-text strong {
  color: var(--ivory, #F4EDD7);
  font-style: normal;
}
.cw-future-book-text em {
  color: var(--bronze-hi, #E1CD9B);
  font-style: italic;
}

/* ============================================================
   ENRICHED MODAL SECTIONS — accomplishments / how God sees them /
   lesson for tweens / "Who YOU are" identity card.
   ============================================================ */
.cw-enriched { display: flex; flex-direction: column; gap: 16px; margin: 0 0 16px; }
.cw-section { padding: 0; }
.cw-section-label {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(194, 158, 70,0.78);
  display: block; margin-bottom: 10px;
}
.cw-section-label--gold { color: var(--bronze-hi, #E1CD9B); }

.cw-accomplishments-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cw-accomplishments-list li {
  font-family: 'Belda', serif; font-size: 15px; line-height: 1.55;
  color: rgba(244, 237, 215,0.92);
  padding-left: 22px; position: relative;
}
.cw-accomplishments-list li::before {
  content: '✦'; color: var(--bronze, #C29E46);
  position: absolute; left: 0; top: 1px;
  font-size: 13px;
}

.cw-howgod {
  background:
    linear-gradient(135deg, rgba(194, 158, 70,0.20) 0%, rgba(194, 158, 70,0.06) 100%);
  border: 1px solid rgba(194, 158, 70,0.32);
  border-radius: 6px;
  padding: 22px 26px;
  position: relative;
}
.cw-howgod::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(194, 158, 70,0.08);
}
.cw-howgod-text {
  font-family: 'Belda', serif; font-style: italic;
  font-size: 17px; line-height: 1.6;
  color: var(--ivory, #F4EDD7);
  margin: 0;
}

.cw-lesson-text {
  font-family: 'Belda', serif;
  font-size: 16px; line-height: 1.65;
  color: rgba(244, 237, 215,0.92);
  margin: 0;
  border-left: 3px solid rgba(194, 158, 70,0.42);
  padding-left: 18px;
}

/* "Who YOU are" — the formation card. The most important block. */
.cw-youare {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(194, 158, 70,0.22) 0%, transparent 70%),
    linear-gradient(180deg, rgba(26, 39, 54,0.55) 0%, rgba(5, 5, 5,0.85) 100%);
  border: 1px solid rgba(194, 158, 70,0.4);
  border-radius: 8px;
  padding: 26px 30px;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), inset 0 0 80px rgba(194, 158, 70,0.08);
}
.cw-youare-lines { display: flex; flex-direction: column; gap: 10px; }
.cw-youare-line {
  font-family: 'Belda', serif;
  font-size: 16px; line-height: 1.55;
  color: rgba(244, 237, 215,0.94);
  margin: 0;
}
.cw-youare-line.cw-youare-final {
  font-style: italic;
  font-size: 19px;
  color: var(--ivory, #F4EDD7);
  margin-top: 6px;
  text-shadow: 0 0 28px rgba(194, 158, 70,0.32);
}

/* Story paragraphs — multiple paragraphs spaced like a novel */
.cw-story-para {
  font-family: 'Belda', serif;
  font-size: 17px;
  color: rgba(244, 237, 215,0.85);
  line-height: 1.7;
  margin: 0 0 14px;
}
.cw-story-para:last-child { margin-bottom: 0; }

/* Multiple fun-fact items */
.cw-funfact-item {
  font-family: 'Belda', serif; font-style: italic;
  font-size: 15px; line-height: 1.55;
  color: var(--ivory, #F4EDD7);
  margin: 0 0 8px;
  padding-left: 14px;
  border-left: 2px solid rgba(194, 158, 70,0.32);
}
.cw-funfact-item:last-child { margin-bottom: 0; }

/* ============================================================
   STRANGER REVEAL — the most cherished moment on the site.
   Sustained light + 3 lines of formation truth.
   ============================================================ */
.stranger-reveal {
  position: fixed; inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 90% 90% at 50% 50%, rgba(5, 5, 5,0.78) 0%, rgba(5, 5, 5,0.96) 90%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.stranger-reveal.is-active { opacity: 1; }
.stranger-reveal-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, rgba(255,218,140,0.42) 0%, rgba(194, 158, 70,0.18) 28%, transparent 60%);
  pointer-events: none;
  filter: blur(2px);
}
.stranger-reveal-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  padding: 48px 56px;
}
.stranger-reveal-eyebrow {
  display: block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.52em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 18px;
}
.stranger-reveal-name {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: clamp(64px, 9vw, 120px);
  color: var(--ivory, #F4EDD7);
  line-height: 0.96;
  margin: 0 0 32px;
  text-shadow: 0 8px 40px rgba(0,0,0,0.95), 0 0 96px rgba(194, 158, 70,0.55);
}
.stranger-reveal-lines { display: flex; flex-direction: column; gap: 14px; }
.stranger-reveal-line {
  font-family: 'Belda', serif;
  font-size: clamp(18px, 1.6vw, 22px);
  color: rgba(244, 237, 215,0.92);
  margin: 0;
  line-height: 1.55;
  text-shadow: 0 2px 18px rgba(0,0,0,0.95);
}
.stranger-reveal-line.stranger-reveal-final {
  font-style: italic;
  font-size: clamp(22px, 2vw, 28px);
  color: var(--bronze-hi, #E1CD9B);
  margin-top: 8px;
}
.stranger-reveal-line.stranger-reveal-final em {
  color: var(--ivory, #F4EDD7);
  font-style: italic;
}

/* ============================================================
   AMBIENT AFFIRMATIONS — quiet phrases drifting in periodically
   ============================================================ */
.ambient-affirmation {
  position: fixed;
  z-index: 50;
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 19px);
  color: rgba(244, 237, 215,0.88);
  text-shadow: 0 2px 18px rgba(0,0,0,0.95), 0 0 32px rgba(194, 158, 70,0.28);
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  max-width: 280px;
  line-height: 1.4;
}
.ambient-affirmation.is-active { opacity: 1; }
.ambient-affirmation::before {
  content: '✦';
  display: block;
  color: var(--bronze-hi, #E1CD9B);
  font-size: 11px;
  margin-bottom: 8px;
  letter-spacing: 0.4em;
}

/* ============================================================
   REGION ENTRY identity line (added to existing block)
   ============================================================ */
.region-entry-identity {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--bronze-hi, #E1CD9B);
  margin: 16px auto 0;
  max-width: 640px;
  line-height: 1.55;
  text-shadow: 0 2px 18px rgba(0,0,0,0.95), 0 0 32px rgba(194, 158, 70,0.32);
}

/* ============================================================
   RESET VIEW — small button top-left of the map
   ============================================================ */
.reset-view {
  position: fixed;
  /* CEO 2026-05-08: lives at top:76 / left:18 — same spot as the universal
     .page-back pill on other pages. /timeline/ skips .page-back since the
     reset-view (Zoom to World) belongs in that corner here. */
  top: 76px; left: 18px;
  z-index: 26;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  background: rgba(5, 5, 5,0.72);
  border: 1px solid rgba(194, 158, 70,0.42);
  border-radius: 999px;
  padding: 8px 16px;
  color: rgba(244, 237, 215,0.92);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.25s, transform 0.2s, border-color 0.25s;
}
.reset-view:hover {
  background: rgba(194, 158, 70,0.22);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .reset-view { top: 64px; left: 12px; padding: 6px 12px; font-size: 9px; }
}

/* ============================================================
   COMPACT NAV BELT — top-center: Tour, Surprise, 8 Eras dropdown
   Intentionally small so it doesn't shadow pins beneath it.
   ============================================================ */
.nav-belt {
  position: fixed;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 26;
}
.nav-pill {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: rgba(5, 5, 5,0.78);
  border: 1px solid rgba(194, 158, 70,0.45);
  border-radius: 999px;
  padding: 7px 14px;
  color: rgba(244, 237, 215,0.92);
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.25s, transform 0.2s, border-color 0.25s;
}
.nav-pill:hover {
  background: rgba(194, 158, 70,0.22);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: translateY(-1px);
}
.nav-pill--tour {
  background: linear-gradient(135deg, var(--bronze, #C29E46) 0%, var(--bronze-hi, #E1CD9B) 100%);
  color: #1A2736;
  border-color: var(--bronze-hi, #E1CD9B);
  box-shadow: 0 0 14px rgba(194, 158, 70,0.42);
}
.nav-pill--tour:hover {
  background: linear-gradient(135deg, var(--bronze-hi, #E1CD9B) 0%, #F4EDD7 100%);
  color: #1A2736;
}
.nav-pill--surprise {
  background: rgba(194, 158, 70,0.18);
  border-color: rgba(194, 158, 70,0.55);
}
.nav-eras-wrap { position: relative; }
.nav-eras-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(5, 5, 5,0.94);
  border: 1px solid rgba(194, 158, 70,0.42);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  z-index: 27;
}
.nav-era-item {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 8px 12px;
  color: rgba(244, 237, 215,0.86);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.nav-era-item:hover {
  background: rgba(194, 158, 70,0.20);
  color: var(--ivory, #F4EDD7);
}

/* ============================================================
   ERA BELT (legacy — kept for back-compat, now unused)
   ============================================================ */
.era-belt {
  position: fixed;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(5, 5, 5,0.78);
  border: 1px solid rgba(194, 158, 70,0.32);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 26;
  max-width: calc(100% - 64px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.era-pill {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 237, 215,0.78);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.era-pill:hover {
  background: rgba(194, 158, 70,0.18);
  color: var(--ivory, #F4EDD7);
  border-color: rgba(194, 158, 70,0.42);
}
.era-pill--tour {
  background: linear-gradient(135deg, var(--bronze, #C29E46) 0%, var(--bronze-hi, #E1CD9B) 100%);
  color: #1A2736;
  border-color: var(--bronze-hi, #E1CD9B);
  font-weight: 700;
  box-shadow: 0 0 18px rgba(194, 158, 70,0.45);
}
.era-pill--tour:hover {
  background: linear-gradient(135deg, var(--bronze-hi, #E1CD9B) 0%, #F4EDD7 100%);
  color: #1A2736;
  transform: scale(1.03);
}
.era-pill--surprise {
  background: rgba(194, 158, 70,0.18);
  border-color: rgba(194, 158, 70,0.55);
  color: var(--ivory, #F4EDD7);
}
.era-pill--surprise:hover {
  background: rgba(194, 158, 70,0.32);
  transform: scale(1.05) rotate(-2deg);
}
@media (max-width: 900px) {
  .era-belt {
    top: 76px;
    padding: 6px 8px;
    gap: 3px;
    max-width: calc(100% - 24px);
  }
  .era-pill { font-size: 9px; padding: 6px 10px; letter-spacing: 0.18em; }
}
@media (max-width: 600px) {
  /* On phones, hide individual era pills; only show the Tour button */
  .era-belt .era-pill:not(.era-pill--tour) { display: none; }
}

/* (Creature cameo CSS removed 2026-04-30) */

/* ============================================================
   WALK THE THROUGHLINE — bottom-center button that triggers the
   Indiana-Jones-style red-line journey from Adam to Revelation
   ============================================================ */
.throughline-btn {
  position: fixed;
  /* CEO 2026-05-08 v3: middle ground between 28 (too low) and 200 (too high).
     Sits comfortably above the bottom edge with iOS safe-area room, but
     not so high it floats away from the bottom of the page. */
  bottom: calc(110px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 26;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 28px;
  background: linear-gradient(135deg, #8D2A25 0%, #DA6B3A 50%, #EAB194 100%);
  border: 2px solid rgba(255,200,140,0.85);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Belda', system-ui, sans-serif;
  color: #FBF8ED;
  box-shadow: 0 8px 32px rgba(220,38,38,0.55), inset 0 0 18px rgba(255,255,255,0.18);
  transition: transform 0.2s, box-shadow 0.3s;
  animation: throughline-pulse 2.6s ease-in-out infinite;
}
@keyframes throughline-pulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(220,38,38,0.55), inset 0 0 18px rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 12px 56px rgba(255,120,80,0.85), inset 0 0 28px rgba(255,255,255,0.32); }
}
.throughline-btn:hover {
  transform: translateX(-50%) translateY(-2px) scale(1.02);
}
.throughline-btn-icon {
  display: none;
}
.throughline-btn-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
}
.throughline-btn-sub {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(255,248,232,0.86);
  letter-spacing: 0.06em;
}

/* The traveling card that shows each character as we fly past.
   Anchored to BOTTOM-RIGHT so it stays out of the red trail's path
   across the map. (Joel report 2026-05-07: was top-50/left-40, was
   covering the line as it drew west-to-east.) */
.throughline-card {
  position: fixed;
  right: 32px;
  bottom: 110px;
  z-index: 30;
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding: 22px 26px;
  background: rgba(5, 5, 5,0.92);
  border: 1px solid rgba(220,38,38,0.55);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 460px;
  width: min(460px, 38vw);
  box-shadow: 0 20px 64px rgba(0,0,0,0.78), 0 0 64px rgba(220,38,38,0.18);
  pointer-events: none;
  opacity: 0;
}
.throughline-card.is-active { opacity: 1; }
.throughline-card-img {
  width: 160px !important;
  height: 200px !important;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 28%;     /* bias toward the face */
  flex-shrink: 0;
  border: 2px solid rgba(220,38,38,0.65);
  box-shadow: 0 12px 36px rgba(0,0,0,0.6), 0 0 32px rgba(220,38,38,0.25);
  background: #1A2736;
  display: block;
  max-width: 160px !important;     /* fight the global responsive-img rule */
}
.throughline-card-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.throughline-card-meta { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.throughline-card-num {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(255,200,140,0.85);
}
.throughline-card-era {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(244, 237, 215,0.85);
}
.throughline-card-name {
  font-family: 'Belda', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  color: var(--ivory, #F4EDD7);
  margin: 4px 0 2px;
  line-height: 1.0;
  text-shadow: 0 4px 24px rgba(0,0,0,0.85);
}
.throughline-card-date {
  font-family: 'Belda', serif;
  font-size: 14px;
  color: rgba(244, 237, 215,0.78);
  letter-spacing: 0.04em;
}
.throughline-card-blurb {
  font-family: 'Belda', serif;
  font-size: 14px;
  color: rgba(244, 237, 215,0.85);
  line-height: 1.5;
  margin: 8px 0 0;
  font-style: italic;
}
@media (max-width: 720px) {
  .throughline-card { left: 12px; right: 12px; max-width: none; width: auto; padding: 14px 18px; gap: 14px; }
  .throughline-card-img { width: 100px; height: 130px; }
  .throughline-card-name { font-size: 22px; }
}

/* Era transition nameplate — small subtle chip in top-right corner.
   (Joel 2026-04-30 fix: was MASSIVE and bleeding across screen.) */
.throughline-era-plate {
  position: fixed;
  top: 88px;
  right: 32px;
  z-index: 31;
  text-align: right;
  pointer-events: none;
  padding: 10px 16px;
  background: rgba(5, 5, 5,0.85);
  border: 1px solid rgba(220,38,38,0.55);
  border-radius: 6px;
  max-width: 280px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
.throughline-era-plate-eyebrow {
  display: block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.36em; text-transform: uppercase;
  color: rgba(255,200,140,0.78);
  margin-bottom: 4px;
}
.throughline-era-plate-title {
  font-family: 'Belda', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--ivory, #F4EDD7);
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85);
}

/* Closing finale at end of the tour */
.throughline-finale {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(5, 5, 5,0.92) 0%, rgba(5, 5, 5,0.98) 90%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 40px;
}
.throughline-finale-title {
  font-family: 'Belda', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 96px);
  color: var(--ivory, #F4EDD7);
  margin: 0 0 24px;
  line-height: 1.05;
  text-shadow: 0 8px 48px rgba(0,0,0,0.95), 0 0 96px rgba(220,38,38,0.55);
}
.throughline-finale-title em {
  color: var(--bronze-hi, #E1CD9B);
  font-style: italic;
}
.throughline-finale-line {
  font-family: 'Belda', serif;
  font-size: clamp(17px, 1.8vw, 22px);
  color: rgba(244, 237, 215,0.92);
  margin: 0 0 12px;
  line-height: 1.55;
  max-width: 720px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.95);
}
.throughline-finale-line.throughline-finale-final {
  margin-top: 14px;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--bronze-hi, #E1CD9B);
}
.throughline-finale-line.throughline-finale-final strong {
  color: var(--ivory, #F4EDD7);
  font-style: italic;
}
.throughline-skip {
  position: fixed;
  top: 90px; right: 32px;
  z-index: 30;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.30em; text-transform: uppercase;
  background: rgba(5, 5, 5,0.85);
  border: 1px solid rgba(220,38,38,0.55);
  border-radius: 999px;
  padding: 8px 16px;
  color: rgba(255,200,140,0.92);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.throughline-skip:hover {
  background: rgba(220,38,38,0.30);
  color: #fff;
}

/* Tour controls grouped at bottom-center as a single horizontal row */
.throughline-controls {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 28;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Pause + Back are secondary controls — same gold pill style, smaller */
.throughline-secondary {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.30em; text-transform: uppercase;
  background: rgba(5, 5, 5,0.85);
  border: 1px solid rgba(194, 158, 70,0.55);
  border-radius: 999px;
  padding: 10px 18px;
  color: rgba(244, 237, 215,0.92);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.25s, transform 0.2s, border-color 0.25s;
  /* Override the position:fixed from any earlier rule */
  position: static !important;
  top: auto !important; left: auto !important;
}
.throughline-secondary:hover {
  background: rgba(194, 158, 70,0.22);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: translateY(-1px);
}
/* Whole-story toggle — slightly tinted so it reads as a "special" control,
   and pulses subtly when engaged. */
.throughline-wholestory {
  border-color: rgba(194, 158, 70,0.85);
  background: rgba(194, 158, 70,0.10);
}
.throughline-wholestory:hover {
  background: rgba(194, 158, 70,0.30);
}
.throughline-wholestory[title="Return to guided pace"] {
  background: rgba(255,42,42,0.18);
  border-color: rgba(255,90,90,0.85);
  color: var(--ivory, #F4EDD7);
  animation: ws-pulse 1.6s ease-in-out infinite;
}
@keyframes ws-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,42,42,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(255,42,42,0.0); }
}

/* The "Continue ▶" button — sits inside .throughline-controls now */
.throughline-continue {
  position: static;
  z-index: 28;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #8D2A25 0%, #DA6B3A 50%, #EAB194 100%);
  border: 2px solid rgba(255,200,140,0.95);
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Belda', system-ui, sans-serif;
  color: #FBF8ED;
  box-shadow: 0 12px 40px rgba(220,38,38,0.65), inset 0 0 24px rgba(255,255,255,0.20);
  transition: transform 0.2s, box-shadow 0.3s, opacity 0.3s;
}
.throughline-continue.is-ready {
  animation: throughline-pulse 1.6s ease-in-out infinite;
}
.throughline-continue.is-loading {
  opacity: 0.55;
  cursor: default;
  background: linear-gradient(135deg, #8D2A25 0%, #8D2A25 50%, #DA6B3A 100%);
  border-color: rgba(255,200,140,0.45);
  box-shadow: 0 8px 24px rgba(120,38,38,0.45), inset 0 0 18px rgba(255,255,255,0.10);
}
.throughline-continue.is-ready:hover {
  transform: translateY(-2px) scale(1.03);
}
.throughline-continue.is-loading:hover {
  transform: none;
}
.throughline-continue-label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
}
.throughline-continue-arrow {
  display: none;
}
.throughline-continue-sub {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(255,248,232,0.92);
  letter-spacing: 0.06em;
  margin-top: 2px;
}
/* CEO 2026-05-08 v3: removed an older mobile @media block that
   re-exposed the throughline-card image. The single source of truth
   for mobile throughline-card styling now lives near the top of this
   file (".throughline-card on phone — MINIMAL"). */

/* ============================================================
   SHOW ALL CONNECTIONS — caption panel (the throughline message)
   ============================================================ */
.web-caption {
  position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  text-align: center;
  max-width: 720px;
  padding: 22px 36px;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 90% 100% at 50% 50%, rgba(5, 5, 5,0.78) 0%, rgba(5, 5, 5,0.32) 80%, transparent 100%);
}
.web-caption.is-active { opacity: 1; }
.web-caption-eyebrow {
  display: block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.46em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 10px;
}
.web-caption-line {
  font-family: 'Belda', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  color: var(--ivory, #F4EDD7);
  line-height: 1.06;
  margin: 0 0 12px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.95), 0 0 64px rgba(194, 158, 70,0.32);
}
.web-caption-sub {
  font-family: 'Belda', serif;
  font-size: clamp(14px, 1.3vw, 16px);
  color: rgba(244, 237, 215,0.86);
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.95);
}
.web-caption-sub em {
  color: var(--bronze-hi, #E1CD9B);
  font-style: italic;
}

/* ============================================================
   SHOW ALL CONNECTIONS toggle — bottom right
   ============================================================ */
.web-toggle {
  position: fixed;
  bottom: 28px; right: 32px;
  z-index: 26;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  background: rgba(5, 5, 5,0.72);
  border: 1px solid rgba(194, 158, 70,0.42);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Belda', system-ui, sans-serif;
  color: rgba(244, 237, 215,0.92);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.web-toggle:hover {
  background: rgba(194, 158, 70,0.18);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: translateY(-1px);
}
.web-toggle.is-active {
  background: linear-gradient(135deg, rgba(194, 158, 70,0.45) 0%, rgba(194, 158, 70,0.25) 100%);
  border-color: var(--bronze-hi, #E1CD9B);
  color: var(--ivory, #F4EDD7);
  box-shadow: 0 0 24px rgba(194, 158, 70,0.45);
}
.web-toggle-icon {
  color: var(--bronze-hi, #E1CD9B);
  font-size: 13px;
  letter-spacing: 0;
}
@media (max-width: 720px) {
  .web-toggle { bottom: 18px; right: 14px; padding: 8px 14px; font-size: 10px; letter-spacing: 0.24em; }
}

/* ============================================================
   PROGRESS CHIP — top-right; tracks lives visited; the kid's journey
   ============================================================ */
.progress-chip {
  position: fixed;
  top: 96px; right: 32px;
  z-index: 28;
  background: rgba(5, 5, 5,0.72);
  border: 1px solid rgba(194, 158, 70,0.36);
  border-radius: 8px;
  padding: 14px 18px;
  min-width: 220px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Belda', serif;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.progress-chip-row {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.progress-chip-eyebrow {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
}
.progress-chip-count {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ivory, #F4EDD7);
  text-shadow: 0 0 16px rgba(194, 158, 70,0.32);
}
.progress-chip-bar {
  height: 4px;
  background: rgba(194, 158, 70,0.18);
  border-radius: 2px;
  overflow: hidden;
}
.progress-chip-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bronze, #C29E46) 0%, var(--bronze-hi, #E1CD9B) 100%);
  width: 0%;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(194, 158, 70,0.55);
  transition: width 0.6s ease;
}
.progress-chip-treasure {
  display: block;
  margin-top: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 0 0;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  background: none;
  border: none;
  border-top: 1px dashed rgba(194, 158, 70,0.32);
  cursor: pointer;
  transition: color 0.3s, transform 0.2s;
}
.progress-chip-treasure:hover {
  color: var(--ivory, #F4EDD7);
  transform: translateX(2px);
}
.progress-chip-treasure-count {
  color: var(--ivory, #F4EDD7);
  font-style: italic;
  font-size: 13px;
}

/* ============================================================
   TREASURE ROOM — full-screen modal showing every collected
   sacred object, with the rest of the 90 placeholders waiting
   ============================================================ */
.treasure-room {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: linear-gradient(180deg, rgba(26, 39, 54,0.97) 0%, rgba(5, 5, 5,0.98) 100%);
  overflow-y: auto;
  display: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.treasure-room.is-active { display: block; }
.treasure-room-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(194, 158, 70,0.35) 0%, transparent 70%);
  pointer-events: none;
}
.treasure-room-close {
  position: fixed;
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(244, 237, 215,0.08);
  border: 1px solid rgba(194, 158, 70,0.45);
  color: var(--ivory, #F4EDD7);
  font-size: 24px; cursor: pointer;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.treasure-room-close:hover {
  background: rgba(194, 158, 70,0.25);
  border-color: var(--bronze-hi, #E1CD9B);
  transform: scale(1.1);
}
.treasure-room-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 32px 80px;
  text-align: center;
}
.treasure-room-eyebrow {
  display: block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.46em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 16px;
}
.treasure-room-title {
  font-family: 'Belda', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  color: var(--ivory, #F4EDD7);
  margin: 0 0 12px;
  text-shadow: 0 6px 32px rgba(0,0,0,0.7), 0 0 96px rgba(194, 158, 70,0.32);
}
.treasure-room-tally {
  font-family: 'Belda', serif;
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(244, 237, 215,0.86);
  margin: 0 0 40px;
}
.treasure-room-tally strong {
  color: var(--bronze-hi, #E1CD9B);
  font-style: italic;
  font-size: 1.4em;
}
.treasure-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  margin: 0 auto 40px;
}
.treasure-tile {
  background: rgba(5, 5, 5,0.55);
  border: 1px solid rgba(194, 158, 70,0.20);
  border-radius: 8px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.treasure-tile.is-found {
  background: linear-gradient(180deg, rgba(194, 158, 70,0.30) 0%, rgba(194, 158, 70,0.08) 100%);
  border-color: rgba(194, 158, 70,0.55);
  cursor: pointer;
  box-shadow: 0 0 24px rgba(194, 158, 70,0.18);
}
.treasure-tile.is-found:hover {
  transform: translateY(-2px);
  border-color: var(--bronze-hi, #E1CD9B);
  box-shadow: 0 0 36px rgba(194, 158, 70,0.32);
}
.treasure-tile-icon {
  font-size: 36px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
}
.treasure-tile.is-locked .treasure-tile-icon {
  font-size: 28px;
  color: rgba(194, 158, 70,0.32);
}
.treasure-tile-name {
  font-family: 'Belda', serif;
  font-size: 13px;
  color: var(--ivory, #F4EDD7);
  text-align: center;
  font-style: italic;
}
.treasure-tile.is-locked .treasure-tile-name {
  color: rgba(244, 237, 215,0.85);
}
.treasure-tile-from {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  text-align: center;
}
.treasure-tile.is-locked .treasure-tile-from {
  color: rgba(194, 158, 70,0.32);
}
.treasure-room-foot {
  font-family: 'Belda', serif;
  color: rgba(244, 237, 215,0.85);
  font-size: 14px;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .progress-chip { top: 76px; right: 16px; padding: 10px 14px; min-width: 180px; }
}

/* ============================================================
   BADGE UNLOCK — celebratory card when a milestone is reached
   ============================================================ */
.badge-unlock {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  width: min(540px, 88vw);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(26, 39, 54,0.94) 0%, rgba(5, 5, 5,0.96) 100%);
  border: 1px solid rgba(194, 158, 70,0.55);
  border-radius: 10px;
  padding: 36px 40px;
  box-shadow: 0 24px 72px rgba(0,0,0,0.7), 0 0 120px rgba(194, 158, 70,0.35);
}
.badge-unlock.is-active { opacity: 1; }
.badge-unlock-glow {
  position: absolute; inset: -1px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 0%, rgba(194, 158, 70,0.45) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(8px);
}
.badge-unlock-inner { position: relative; z-index: 1; }
.badge-unlock-eyebrow {
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.46em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 12px;
  display: block;
}
.badge-unlock-title {
  font-family: 'Belda', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  color: var(--ivory, #F4EDD7);
  margin: 0 0 14px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.7), 0 0 64px rgba(194, 158, 70,0.4);
}
.badge-unlock-line {
  font-family: 'Belda', serif;
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(244, 237, 215,0.92);
  margin: 0;
  line-height: 1.55;
}

/* ============================================================
   STARTUP HINT — one-time roadmap framing for brand-new visitors
   ============================================================ */
.startup-hint {
  position: fixed;
  bottom: 96px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(26, 39, 54,0.92) 0%, rgba(5, 5, 5,0.96) 100%);
  border: 1px solid rgba(194, 158, 70,0.45);
  border-radius: 8px;
  padding: 22px 32px;
  max-width: 540px;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0,0,0,0.65), 0 0 80px rgba(194, 158, 70,0.18);
}
.startup-hint.is-active { opacity: 1; }
.startup-hint-eyebrow {
  display: block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--bronze-hi, #E1CD9B);
  margin-bottom: 12px;
}
.startup-hint-line {
  font-family: 'Belda', serif;
  font-size: 14px;
  color: rgba(244, 237, 215,0.92);
  margin: 4px 0;
  line-height: 1.5;
}
.startup-hint-line strong { color: var(--ivory, #F4EDD7); font-style: normal; }
.startup-hint-line.startup-hint-cta {
  font-style: italic;
  font-size: 15px;
  color: var(--bronze-hi, #E1CD9B);
  margin-top: 10px;
}

/* ============================================================
   SPARKLE TRAIL — gold motes following the cursor
   ============================================================ */
.sparkle-mote {
  position: fixed;
  width: 10px; height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 35;
  filter: blur(0.5px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* ============================================================
   SOFT EDGES — Joel's mandate: nothing rectangular, no hard borders.
   Apply a feathered organic mask to the modal portrait + character chips.
   ============================================================ */
.cw-portrait-frame img {
  -webkit-mask-image: radial-gradient(ellipse 88% 92% at 50% 50%, #000 55%, rgba(0,0,0,0.85) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 88% 92% at 50% 50%, #000 55%, rgba(0,0,0,0.85) 78%, transparent 100%);
}
.chip-thumb {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 50%, #000 70%, transparent 100%);
}

/* ============================================================
   RANDOM LIFE — "Surprise me" floating button.
   Placed top-LEFT (below nav) so it doesn't collide with Today's
   Hero card on the right. (Joel 2026-04-30: was overlapping.)
   ============================================================ */
.random-life-btn {
  position: fixed;
  /* Stacks below Reset-View on the left so it doesn't collide
     with Today's Hero on the right. (Joel fix 2026-04-30) */
  top: 144px;
  left: 32px;
  z-index: 25;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(26, 39, 54,0.78) 0%, rgba(5, 5, 5,0.88) 100%);
  border: 1px solid rgba(194, 158, 70,0.55);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  font-family: 'Belda', system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.random-life-btn:hover {
  transform: translateY(-1px);
  border-color: var(--bronze-hi, #E1CD9B);
  background: linear-gradient(135deg, rgba(26, 39, 54,0.95) 0%, rgba(194, 158, 70,0.18) 100%);
}
.random-life-btn .random-life-icon { font-size: 18px; line-height: 1; }
.random-life-btn .random-life-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ivory, #F4EDD7);
}
.random-life-btn .random-life-sub {
  font-family: 'Belda', serif; font-style: italic;
  font-size: 10px; color: rgba(244, 237, 215,0.85);
}
@media (max-width: 700px) {
  .random-life-btn {
    top: auto; left: 16px; bottom: 90px;
    flex-direction: row; align-items: center; gap: 8px;
  }
  .random-life-btn .random-life-sub { display: none; }
}

/* ============================================================
   PHOTO MODE — small camera button bottom-right
   ============================================================ */
.photo-mode-btn {
  position: fixed;
  bottom: 28px;
  right: 32px;
  z-index: 25;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: rgba(5, 5, 5,0.78);
  border: 1px solid rgba(194, 158, 70,0.55);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  font-family: 'Belda', system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ivory, #F4EDD7);
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.photo-mode-btn:hover {
  transform: translateY(-1px);
  background: rgba(194, 158, 70,0.20);
  border-color: var(--bronze-hi, #E1CD9B);
}
.photo-mode-btn .photo-mode-icon { font-size: 18px; line-height: 1; }
.photo-mode-btn .photo-mode-label {
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase;
  text-align: left;
}
.photo-mode-btn .photo-mode-sub {
  display: block;
  font-family: 'Belda', serif; font-style: italic;
  font-size: 10px; color: rgba(244, 237, 215,0.85);
  margin-top: 1px;
  text-align: left;
}
.photo-mode-btn-stack {
  display: flex; flex-direction: column; align-items: flex-start;
}
@media (max-width: 700px) {
  .photo-mode-btn .photo-mode-sub { display: none; }
}

.photo-flash {
  position: fixed; inset: 0;
  background: rgba(255, 250, 230, 0.95);
  z-index: 9999;
  pointer-events: none;
}

/* ============================================================
   STRANGER REVEAL MODAL (Joel mandate 2026-05-05).
   Full-screen takeover when the kid clicks the ✦ Stranger pin
   that materialized at Bethlehem after they walked through 3+
   hero stories. The payoff: Same Man. Every story. Jesus.
   ============================================================ */
.stranger-reveal-modal {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(26, 39, 54, 0.96) 0%, rgba(0, 0, 0, 0.98) 100%);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow-y: auto;
  transition: opacity 0.6s ease;
  backdrop-filter: blur(8px);
}
.stranger-reveal-modal.open {
  opacity: 1;
  pointer-events: auto;
}
.stranger-reveal-close {
  position: absolute;
  top: 22px; right: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(225, 205, 155, 0.35);
  color: #F4EDD7;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, transform 0.2s;
}
.stranger-reveal-close:hover {
  background: rgba(225, 205, 155, 0.20);
  transform: scale(1.08);
}
.stranger-reveal-inner {
  max-width: 1080px;
  width: 100%;
  text-align: center;
  padding: clamp(40px, 7vh, 90px) clamp(16px, 4vw, 40px);
}
.stranger-reveal-eyebrow {
  display: inline-block;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: #E1CD9B;
  margin-bottom: 18px;
  text-shadow: 0 0 28px rgba(225, 205, 155, 0.30);
}
.stranger-reveal-h2 {
  font-family: 'Belda', serif;
  font-weight: 800;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.04;
  color: #F4EDD7;
  margin: 0 0 20px;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.65);
}
.stranger-reveal-h2 em {
  font-style: italic;
  color: #E1CD9B;
}
.stranger-reveal-lede {
  font-family: 'Belda', serif;
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.6;
  color: rgba(244, 237, 215, 0.92);
  max-width: 640px;
  margin: 0 auto 36px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}
.stranger-reveal-lede strong {
  color: #F4EDD7;
  font-style: normal;
  font-weight: 700;
}
.stranger-reveal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 auto 36px;
  max-width: 980px;
}
.stranger-reveal-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(225, 205, 155, 0.35);
  text-decoration: none;
  background: #050505;
  transition: transform 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.stranger-reveal-frame:hover {
  transform: translateY(-3px);
  border-color: rgba(225, 205, 155, 0.85);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(225, 205, 155, 0.18);
}
.stranger-reveal-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.stranger-reveal-frame-label {
  position: absolute;
  bottom: 8px; left: 12px;
  font-family: 'Belda', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #F4EDD7;
  background: rgba(0, 0, 0, 0.62);
  padding: 4px 10px;
  border-radius: 2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.stranger-reveal-cta {
  display: inline-block;
  padding: 14px 30px;
  background: #E1CD9B;
  color: #0F1620;
  font-family: 'Belda', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
  box-shadow: 0 12px 32px rgba(225, 205, 155, 0.30);
}
.stranger-reveal-cta:hover {
  transform: translateY(-2px);
  background: #fcefb4;
  box-shadow: 0 18px 42px rgba(225, 205, 155, 0.45);
}
@media (max-width: 760px) {
  .stranger-reveal-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .stranger-reveal-h2 { font-size: clamp(30px, 7vw, 44px); }
  .stranger-reveal-lede { font-size: 16px; }
  .stranger-reveal-cta { padding: 12px 24px; font-size: 12px; letter-spacing: 2px; }
}