.stage{
  position:relative; z-index:2;
  padding:24px 36px 40px;
  display:grid; grid-template-columns:1fr 460px; gap:28px;
  /* Fixed-viewport layout: stage exactly fills the screen below the nav.
     Timeline and reader scroll internally — the page itself never scrolls. */
  height:calc(100vh - 70px);
  align-items:stretch;
  transition:grid-template-columns .35s cubic-bezier(0.6,0,0.2,1);
}
/* Reader collapsed — timeline stretches to full width, reader hidden.
   Used when viewing the entire timeline; clicking any item below the
   eras lane re-expands the reader. */
.stage.reader-hidden{ grid-template-columns:1fr 0; gap:0 }
.stage.reader-hidden .reader{ display:none }
.timeline-wrap{
  position:relative;
  display:flex; flex-direction:column;
  min-height:0;     /* allow children to constrain height inside flex */
  overflow:hidden;
}
.timeline-wrap .canvas{
  flex:1;
  overflow-y:auto;  /* the timeline scrolls inside its own canvas */
  min-height:0;
}
.timeline-wrap .scene-title{ flex:none }

.scene-title{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px }
.scene-title h1{
  font-family:'Cormorant Garamond', serif; font-weight:500; font-size:34px; line-height:1;
  margin:0; color:var(--ivory); letter-spacing:0.005em;
}
.scene-title h1 em{ color:var(--gold); font-style:italic; font-weight:500 }
.scene-meta{ display:flex; align-items:center; gap:14px; color:var(--muted); font-size:11px; letter-spacing:0.18em; text-transform:uppercase }
.scene-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--muted); opacity:0.6 }

/* ========== timeline canvas (the stratified stack) ========== */
.canvas{
  position:relative;
  background:
    radial-gradient(1100px 380px at 50% 0%, rgba(20,28,56,0.55), transparent 75%),
    linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,0.04);
  border-radius:14px;
  padding:14px 16px 12px;
  overflow:hidden;
  user-select:none;
}
.canvas.panning{ cursor:grabbing }
.canvas:not(.panning){ cursor:grab }
.canvas::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:14px;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 50%, transparent 90%);
}

.timeline-stack{
  position:relative;
  display:flex; flex-direction:column;
  gap:6px;
}

.lane{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:32px;
  align-items:stretch;
}
.lane-label{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:10.5px; letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(245,217,154,0.55);
  text-align:right;
  padding:6px 14px 0 0;
  border-right:1px solid rgba(245,217,154,0.08);
  align-self:stretch;
  display:flex; align-items:center; justify-content:flex-end;
  white-space:nowrap;
}
.lane-track{
  position:relative;
  min-height:24px;
}

/* faded vertical gridlines per major year, drawn on each lane track */
.lane-track::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size:14.28% 100%;
}

/* ========== Eras lane ========== */
.lane-eras .lane-track{ overflow:visible }
.era-band{
  position:absolute; top:4px; bottom:4px;
  background:linear-gradient(180deg, rgba(var(--era-rgb), 0.42), rgba(var(--era-rgb), 0.10));
  border:1px solid rgba(var(--era-rgb), 0.55);
  border-radius:5px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0 8px;
  overflow:hidden;
  transition:filter .15s, transform .15s;
}
.era-band:hover{ filter:brightness(1.18); transform:translateY(-1px) }
.era-band.muted{ opacity:0.32 }
.era-band-label{
  font-family:'Cormorant Garamond', serif;
  font-style:italic; font-weight:500;
  font-size:10.5px; letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,247,227,0.95);
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* ========== Books lane ========== */
.lane-books{ }
.book-bar{
  position:absolute;
  height:6px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bar-color) 95%, transparent),
    color-mix(in srgb, var(--bar-color) 78%, transparent));
  border:1px solid color-mix(in srgb, var(--bar-color) 80%, transparent);
  border-radius:3px;
  cursor:pointer;
  transition:filter .15s, transform .15s;
  pointer-events:auto;
}
.book-bar:hover{ filter:brightness(1.4) }
/* Luminance-balanced palette — every kind sits at roughly equal visual
   weight so brightness reads as "kind", not "more important". */
.book-bar.kind-narrative { --bar-color:#b5a386 }
.book-bar.kind-law       { --bar-color:#c89e6d }
.book-bar.kind-poetry    { --bar-color:#9b7ebd }
.book-bar.kind-wisdom    { --bar-color:#7baa84 }
.book-bar.kind-prophecy  { --bar-color:#5b87c2 }
.book-bar.kind-gospel    { --bar-color:#cba368 }
.book-bar.kind-epistle   { --bar-color:#6f93c4 }
.book-bar.kind-apocalypse{ --bar-color:#c4756f }

/* Centered label that sits underneath each book ribbon. Text size is fixed,
   independent of bar width — so even a 30-year prophecy bar still gets a
   readable name. */
.book-label{
  position:absolute;
  transform:translateX(-50%);
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:'Cormorant Garamond', serif;
  font-weight:600; font-size:11px;
  letter-spacing:0.005em;
  color:var(--ivory-dim);
  white-space:nowrap;
  transition:color .15s, text-shadow .15s;
}
.book-label:hover{
  color:var(--ivory-strong);
  text-shadow:0 0 8px color-mix(in srgb, var(--bar-color) 60%, transparent);
}

/* ========== Events lane ========== */
.event-pin{
  position:absolute;
  top:4px;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer;
  background:none; border:none; padding:0;
  font:inherit; color:inherit;
}
.event-pin-dot{
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle, #f5d99a 0%, #c89642 55%, #6b4818 100%);
  box-shadow:
    0 0 0 2px rgba(7,11,24,0.95),
    0 0 10px rgba(245,217,154,0.6);
  transition:transform .15s, box-shadow .15s;
}
.event-pin:hover .event-pin-dot{
  transform:scale(1.4);
  box-shadow:0 0 0 2px rgba(7,11,24,0.95), 0 0 16px rgba(255,247,227,1);
}
.event-pin.featured .event-pin-dot{
  width:12px; height:12px;
  background:radial-gradient(circle, #fff7e3 0%, #f5d99a 35%, #b8853a 90%);
  box-shadow:0 0 0 2px rgba(7,11,24,0.95), 0 0 18px rgba(255,247,227,0.85);
}

/* Christ-events — blood-red inner, white outer ring, soft white halo.
   Wins over .featured so birth/crucifixion still read as Jesus first,
   hero second. Color: #8b0000 (a deep, almost-dried-blood red) instead
   of the brighter #c41e3a crimson, paired with a faint blood-warm halo
   so it doesn't read as pink. */
.event-pin.jesus .event-pin-dot{
  width:12px; height:12px;
  background:radial-gradient(circle, #6b0000 0%, #8b0000 35%, #ffffff 50%, #ffffff 100%);
  box-shadow:
    0 0 0 2px rgba(7,11,24,0.95),
    0 0 14px rgba(255,255,255,0.85),
    0 0 5px rgba(139,0,0,0.7);
}
.event-pin.jesus.featured .event-pin-dot{
  width:14px; height:14px;
}
.event-pin.jesus:hover .event-pin-dot{
  transform:scale(1.35);
  box-shadow:
    0 0 0 2px rgba(7,11,24,0.95),
    0 0 22px rgba(255,255,255,1),
    0 0 9px rgba(139,0,0,0.95);
}
.event-pin.muted{ opacity:0.32 }

/* ===== Reading-panel link highlights =====
   When the reader's current ref ties to a timeline item, glow it. Same
   book → soft glow. Same chapter (±2) → strong glow + scale boost. */
.event-pin.linked-book .event-pin-dot{
  background:radial-gradient(circle, #fff7e3 0%, #f5d99a 40%, #b8853a 90%);
  box-shadow:0 0 0 2px rgba(7,11,24,0.95), 0 0 14px rgba(245,217,154,0.55);
}
.event-pin.linked-book .event-pin-label{
  color:var(--ivory-strong);
}
.event-pin.linked .event-pin-dot{
  width:13px; height:13px;
  background:radial-gradient(circle, #ffffff 0%, #fff7e3 40%, #f5d99a 80%);
  box-shadow:
    0 0 0 2px rgba(7,11,24,0.95),
    0 0 22px rgba(255,247,227,1),
    0 0 6px rgba(245,217,154,0.9);
  animation:linkedPulse 2.1s ease-in-out infinite;
}
.event-pin.linked .event-pin-label{
  color:#fff7e3; font-weight:600;
  text-shadow:0 0 10px rgba(245,217,154,0.6);
}
@keyframes linkedPulse{
  0%, 100% { box-shadow:0 0 0 2px rgba(7,11,24,0.95), 0 0 16px rgba(255,247,227,0.85), 0 0 4px rgba(245,217,154,0.7) }
  50%      { box-shadow:0 0 0 2px rgba(7,11,24,0.95), 0 0 26px rgba(255,247,227,1),    0 0 10px rgba(245,217,154,1) }
}

/* Books — soft glow when reader is anywhere in the book */
.book-bar.linked-book, .book-bar.linked{
  filter:brightness(1.5) saturate(1.2);
  box-shadow:0 0 14px rgba(245,217,154,0.45);
}
.book-label.linked-book, .book-label.linked{
  color:#fff7e3 !important;
  text-shadow:0 0 8px rgba(245,217,154,0.6);
}

/* People — same pattern: lit when reader is in the chapter their life ties to */
.person-bar.linked-book{
  filter:brightness(1.3);
  box-shadow:0 0 10px rgba(245,217,154,0.35);
}
.person-bar.linked{
  filter:brightness(1.7) saturate(1.2);
  box-shadow:0 0 16px rgba(245,217,154,0.6);
}
.person-label.linked-book{ color:var(--ivory-strong) }
.person-label.linked{
  color:#fff7e3;
  text-shadow:0 0 8px rgba(245,217,154,0.55);
}

/* Study mode — items unrelated to the reader's current passage fade to
   the background so the linked items pop. Only applied when the reader
   is open AND zoomed in tight (see applyLinks() in timeline.js). */
.event-pin.dimmed,
.book-bar.dimmed,
.book-label.dimmed,
.person-bar.dimmed,
.person-label.dimmed{
  opacity:0.3;
  filter:saturate(0.6);
  transition:opacity .2s ease, filter .2s ease, box-shadow .2s ease, text-shadow .2s ease;
}
.event-pin.dimmed:hover,
.book-bar.dimmed:hover,
.book-label.dimmed:hover,
.person-bar.dimmed:hover,
.person-label.dimmed:hover{
  opacity:0.85;
  filter:saturate(1);
}
/* Jesus styling adds bright white halos that survive a 30% opacity drop
   too well — kill the halos when dimmed so the dot/bar visibly recedes. */
.event-pin.jesus.dimmed .event-pin-dot{
  box-shadow:0 0 0 2px rgba(7,11,24,0.95) !important;
}
.person-bar.jesus.dimmed{
  box-shadow:none !important;
}
.person-bar.jesus.dimmed::before,
.person-bar.jesus.dimmed::after{
  box-shadow:none !important;
}
.person-label.jesus.dimmed{
  text-shadow:none !important;
  font-weight:500;
}
.event-pin.custom .event-pin-dot{
  background:radial-gradient(circle, #f5d99a, #6e8fb5 60%, transparent);
}
.event-pin-label{
  margin-top:3px;
  font-family:'Cormorant Garamond', serif;
  font-size:10.5px; font-weight:500;
  color:rgba(255,247,227,0.78);
  letter-spacing:0.005em;
  white-space:nowrap;
  max-width:140px; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}
.event-pin.featured .event-pin-label{
  color:var(--ivory-strong);
  font-weight:600;
  text-shadow:0 0 8px rgba(245,217,154,0.4);
}
.event-pin-label em{ font-style:italic; color:var(--gold-2) }

/* ========== People lane ========== */
.person-bar{
  position:absolute;
  height:6px;
  background:linear-gradient(90deg,
    rgba(245,217,154,0.5) 0%,
    rgba(245,217,154,0.18) 50%,
    rgba(245,217,154,0.4) 100%);
  border:1px solid rgba(245,217,154,0.32);
  border-radius:3px;
  cursor:pointer;
  transition:filter .15s;
  pointer-events:auto;
}
.person-bar:hover{ filter:brightness(1.4) }
.person-bar::before, .person-bar::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%;
  background:#f5d99a;
  box-shadow:0 0 6px rgba(245,217,154,0.7);
  pointer-events:none;
}
.person-bar::before{ left:-3px }
.person-bar::after { right:-3px }

.person-label{
  position:absolute;
  transform:translateX(-50%);
  background:transparent; border:none; padding:0;
  cursor:pointer;
  font-family:'Cormorant Garamond', serif;
  font-style:italic; font-weight:500; font-size:11px;
  letter-spacing:0.005em;
  color:var(--ivory-dim);
  white-space:nowrap;
  transition:color .15s, text-shadow .15s;
}
.person-label:hover{
  color:var(--ivory-strong);
  text-shadow:0 0 8px rgba(245,217,154,0.5);
}

/* Christ's lifespan — blood-red core bar with a white border + halo, so
   his ~34-year ribbon visually echoes the same story his event pins
   tell (crimson inner, white outer). End-cap dots inherited from the
   base rule are recoloured to match. */
.person-bar.jesus{
  height:7px;
  background:linear-gradient(90deg,
    rgba(160,16,32,0.95) 0%,
    rgba(107,0,16,0.85) 50%,
    rgba(160,16,32,0.95) 100%);
  border:1.5px solid rgba(255,255,255,0.95);
  box-shadow:
    0 0 10px rgba(255,255,255,0.55),
    0 0 4px rgba(139,0,0,0.6);
  z-index:2;
}
.person-bar.jesus::before,
.person-bar.jesus::after{
  background:#ffffff;
  box-shadow:0 0 6px rgba(255,255,255,0.9), 0 0 3px rgba(139,0,0,0.7);
}
.person-bar.jesus:hover{
  filter:brightness(1.15);
  box-shadow:
    0 0 14px rgba(255,255,255,0.8),
    0 0 6px rgba(139,0,0,0.85);
}
.person-label.jesus{
  color:#ffffff;
  font-weight:700;
  text-shadow:
    0 0 6px rgba(255,255,255,0.5),
    0 0 3px rgba(139,0,0,0.7);
}
.person-label.jesus:hover{
  color:#ffffff;
  text-shadow:
    0 0 10px rgba(255,255,255,0.85),
    0 0 4px rgba(139,0,0,0.9);
}

/* ========== Empires lane ========== */
.empire-bar{
  position:absolute;
  height:14px;
  background:linear-gradient(90deg, rgba(110,166,230,0.6), rgba(110,166,230,0.28));
  border:1px solid rgba(110,166,230,0.45);
  border-radius:3px;
  padding:0 8px;
  font-family:'Inter', sans-serif;
  font-size:9.5px; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  color:#e7eef9;
  display:flex; align-items:center;
  cursor:default;
  white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 0 12px rgba(110,166,230,0.18);
}
.empire-bar.lane-1{
  background:linear-gradient(90deg, rgba(110,166,230,0.4), rgba(110,166,230,0.18));
}

.archy-pin{
  position:absolute; top:2px;
  transform:translateX(-50%);
  width:18px; height:18px;
  display:grid; place-items:center;
  background:rgba(7,11,24,0.85);
  border:1px solid rgba(245,217,154,0.45);
  border-radius:3px;
  font-family:'Cormorant Garamond', serif;
  font-size:10px; font-weight:600;
  color:rgba(245,217,154,0.85);
  cursor:pointer;
  box-shadow:0 0 8px rgba(245,217,154,0.18);
  transition:all .15s;
  padding:0;
}
.archy-pin:hover{
  transform:translateX(-50%) translateY(-2px) scale(1.2);
  box-shadow:0 0 14px rgba(245,217,154,0.55);
  z-index:6;
}
.archy-pin.type-tablet      { color:#d99a3f; border-color:rgba(217,154,63,0.55) }
.archy-pin.type-inscription { color:#9da7b8; border-color:rgba(157,167,184,0.55) }
.archy-pin.type-scroll      { color:#e9d6a8; border-color:rgba(233,214,168,0.55) }
.archy-pin.type-structure   { color:#7fb585; border-color:rgba(127,181,133,0.55) }
.archy-pin.type-relic       { color:#c97a7a; border-color:rgba(201,122,122,0.55) }

/* ========== World lane ========== */
.world-pin{
  position:absolute;
  top:4px;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer;
  background:none; border:none; padding:0;
  font:inherit; color:inherit;
}
.world-pin-dot{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--world-color, #9cc4f1);
  box-shadow:0 0 0 2px rgba(7,11,24,0.95), 0 0 8px var(--world-color, rgba(110,166,230,0.5));
  transition:transform .15s;
}
.world-pin:hover .world-pin-dot{ transform:scale(1.4) }
.world-pin-label{
  margin-top:3px;
  font-family:'Inter', sans-serif;
  font-size:9.5px;
  color:rgba(255,255,255,0.65);
  white-space:nowrap;
  max-width:120px; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}

/* ========== Year-axis lane ========== */
.lane-axis .lane-track{ overflow:visible }
.axis-tick{
  position:absolute; top:0; bottom:0;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.axis-tick-line{
  width:1px; height:6px;
  background:rgba(255,255,255,0.25);
  display:block;
}
.axis-tick-label{
  font-family:'JetBrains Mono';
  font-size:9.5px; letter-spacing:0.18em;
  color:rgba(255,255,255,0.5);
  margin-top:2px;
  white-space:nowrap;
}
.axis-tick.zero .axis-tick-line{ background:var(--gold) }
.axis-tick.zero .axis-tick-label{ color:var(--gold) }

/* ========== Threads (SVG overlay) ========== */
.threads{
  position:absolute; inset:0; pointer-events:none; z-index:3;
}
.thread-arc{
  fill:none;
  stroke:rgba(245,217,154,0.55);
  stroke-width:1.4;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(245,217,154,0.5));
  transition:stroke .2s, opacity .2s;
  pointer-events:stroke; cursor:pointer;
}
.thread-arc:hover{ stroke:rgba(255,247,227,0.95); stroke-width:2 }
.thread-arc.custom{ stroke:rgba(157,126,200,0.6); stroke-dasharray:4 3 }
.thread-end{
  fill:#fff7e3;
  filter:drop-shadow(0 0 6px rgba(245,217,154,0.7));
  pointer-events:none;
}
svg.threads{
  position:absolute; inset:0; pointer-events:none; z-index:3;
}
svg.threads .thread-arc{ pointer-events:stroke }

/* ========== preview card (shared between event/book/person hovers) ========== */
.event-preview{
  position:fixed;
  width:280px;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(40,28,12,0.97), rgba(22,16,8,0.94));
  border:1px solid rgba(245,217,154,0.5);
  border-radius:8px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.65),
    0 0 24px rgba(245,217,154,0.2);
  pointer-events:none;
  opacity:0; transform:translateY(-4px);
  transition:opacity .15s, transform .15s;
  z-index:30;
}
.event-preview.visible{ opacity:1; transform:translateY(0) }
.event-preview .pv-yr{
  font-family:'JetBrains Mono';
  font-size:10px; letter-spacing:0.18em; color:var(--gold);
  text-transform:uppercase; margin-bottom:5px;
}
.event-preview .pv-ttl{
  font-family:'Cormorant Garamond', serif;
  font-size:18px; font-weight:600;
  color:var(--ivory-strong); margin-bottom:6px;
  line-height:1.2;
}
.event-preview .pv-ttl em{ font-style:italic; color:var(--gold-2); font-weight:500 }
.event-preview .pv-sub{
  font-size:12px; color:#c2b594; line-height:1.45;
  margin-bottom:8px;
}
.event-preview .pv-ref{
  font-family:'JetBrains Mono';
  font-size:9.5px; letter-spacing:0.14em;
  color:var(--gold-2);
  border-top:1px solid rgba(245,217,154,0.18);
  padding-top:8px;
}
.event-preview .pv-cta{
  display:block; margin-top:6px;
  font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold);
}

/* ========== scrubber (floating bottom pill) ========== */
.scrubber{
  position:fixed;
  left:24px; right:24px; bottom:36px;
  z-index:25;
  height:48px;
  background:linear-gradient(180deg, rgba(20,28,56,0.92), rgba(10,15,34,0.94));
  border:1px solid rgba(233,192,115,0.28);
  border-radius:999px;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    0 0 24px rgba(233,192,115,0.08),
    inset 0 1px 0 rgba(245,217,154,0.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex; align-items:center; padding:0 14px; gap:10px;
}
.scrub-arrow{
  width:30px; height:30px; flex:none;
  padding:0;
  border-radius:50%;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(233,192,115,0.22);
  color:var(--gold-2);
  cursor:pointer;
  display:grid; place-items:center;
  transition:all .15s;
  user-select:none;
}
.scrub-arrow svg{ display:block }
.scrub-arrow:hover{
  border-color:rgba(245,217,154,0.6);
  background:rgba(245,217,154,0.1);
  color:#fff7e3;
  box-shadow:0 0 12px rgba(245,217,154,0.25);
}
.scrub-arrow:active{ transform:scale(0.92) }
.scrub-track{ flex:1; position:relative; height:22px; cursor:grab }
.scrub-track:active{ cursor:grabbing }
.scrub-track .line{ position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(233,192,115,0.18); transform:translateY(-50%) }
.scrub-tick{ position:absolute; top:50%; width:1px; height:7px; background:rgba(233,192,115,0.28); transform:translate(-50%,-50%) }
.scrub-tick.major{
  width:2px; height:16px;
  background:rgba(245,217,154,0.95);
  box-shadow:0 0 6px rgba(245,217,154,0.55);
}
.scrub-window{
  position:absolute; top:0; bottom:0;
  background:linear-gradient(180deg, rgba(233,192,115,0.22), rgba(233,192,115,0.08));
  border:1px solid rgba(233,192,115,0.55); border-radius:6px;
  box-shadow:0 0 14px rgba(233,192,115,0.22);
  cursor:grab;
  min-width:14px;
}
.scrub-window:active{ cursor:grabbing }
.scrub-end{ font-family:'JetBrains Mono'; font-size:10px; color:var(--muted); letter-spacing:0.18em; min-width:56px; text-align:center }
.zoom{ display:flex; align-items:center; gap:6px; color:var(--muted); padding-left:6px; border-left:1px solid rgba(255,255,255,0.06); margin-left:4px; padding-right:0 }
.zoom button{
  width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08); color:var(--ivory-dim); cursor:pointer; font-size:14px;
  display:grid; place-items:center;
  transition:all .15s;
}
.zoom button:hover{ border-color:rgba(245,217,154,0.5); color:var(--gold-2) }

/* push status bar above scrubber so they don't overlap */
.status-bar{ bottom:0 }

/* leave space below the timeline so floating scrubber doesn't cover content */
.stage{ padding-bottom:90px }

/* ========== status bar ========== */
.status-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 36px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
  font-size:10px; color:var(--muted); letter-spacing:0.2em; text-transform:uppercase;
  pointer-events:none;
}
.status-bar b{ color:var(--ivory-dim); font-weight:500 }

/* ========== responsive ========== */
@media (max-width: 1200px) {
  .stage{ grid-template-columns:1fr; padding:18px 18px 60px }
  .reader{
    position:fixed; right:0; top:70px; bottom:0; width:min(440px, 92vw); z-index:20;
    transform:translateX(100%); transition:transform .35s cubic-bezier(0.6,0,0.2,1);
  }
  .reader.open{ transform:translateX(0) }
  .scene-meta{ display:none }
}
@media (max-width: 800px) {
  .lane{ grid-template-columns:64px 1fr; gap:6px }
  .lane-label{ font-size:9px; letter-spacing:0.14em }
  .nav{ flex-wrap:wrap; gap:12px; padding:14px 18px }
  .search{ flex:1 }
  .era-filters{ order:5; flex:0 0 100% }
}

/* =========================================================
   Floating legend — minimal museum card. Drag the header
   to move; collapse via the − button. Position persists.
   ========================================================= */
.legend{
  position:fixed; left:24px; bottom:96px; z-index:6;
  width:178px;
  background:linear-gradient(180deg, rgba(19,26,54,0.92), rgba(12,18,40,0.94));
  border:1px solid rgba(233,192,115,0.22);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(245,217,154,0.06);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:'Inter', sans-serif; font-size:10.5px; color:var(--ivory-dim);
  user-select:none;
  transition:opacity .2s;
}
.legend.dragging{ opacity:0.9; cursor:grabbing }
.legend-head{
  display:flex; align-items:center; gap:6px;
  padding:7px 10px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  cursor:grab;
}
.legend-head:active{ cursor:grabbing }
.legend-grip{ color:rgba(233,192,115,0.4); font-size:11px; letter-spacing:-0.05em; line-height:1 }
.legend-title{
  flex:1;
  font-size:9px; letter-spacing:0.32em; color:var(--gold); text-transform:uppercase;
}
.legend-collapse{
  width:18px; height:18px; padding:0;
  display:grid; place-items:center;
  background:transparent; border:1px solid rgba(233,192,115,0.18); border-radius:4px;
  color:var(--gold-2); font-size:13px; line-height:1; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.legend-collapse:hover{ border-color:rgba(245,217,154,0.5); background:rgba(245,217,154,0.08) }
.legend-body{ padding:8px 12px 10px; display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow-y:auto }
.legend.collapsed .legend-body{ display:none }
.legend.collapsed .legend-collapse{ font-size:14px; transform:translateY(-1px) }
.legend-sec-title{
  font-size:8.5px; letter-spacing:0.28em; color:var(--gold); text-transform:uppercase;
  margin-bottom:4px;
}
.legend-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:3px 10px }
.legend-list li{ display:flex; align-items:center; gap:6px; line-height:1.4 }

/* Book genre swatches — same gradient/border recipe as .book-bar */
.lg-bar{
  flex:none;
  width:14px; height:6px; border-radius:2px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bar-color) 70%, transparent),
    color-mix(in srgb, var(--bar-color) 55%, transparent));
  border:1px solid color-mix(in srgb, var(--bar-color) 60%, transparent);
}
.lg-bar.k-narrative { --bar-color:#b5a386 }
.lg-bar.k-law       { --bar-color:#c89e6d }
.lg-bar.k-poetry    { --bar-color:#9b7ebd }
.lg-bar.k-wisdom    { --bar-color:#7baa84 }
.lg-bar.k-prophecy  { --bar-color:#5b87c2 }
.lg-bar.k-gospel    { --bar-color:#cba368 }
.lg-bar.k-epistle   { --bar-color:#6f93c4 }
.lg-bar.k-apocalypse{ --bar-color:#c4756f }

/* Event swatches — match the actual .event-pin-dot styles */
.lg-dot{
  flex:none;
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle, #f5d99a 0%, #c89642 55%, #6b4818 100%);
  box-shadow:0 0 0 1.5px rgba(7,11,24,0.95), 0 0 6px rgba(245,217,154,0.45);
}
.lg-dot.lg-featured{
  background:radial-gradient(circle, #fff7e3 0%, #f5d99a 35%, #b8853a 90%);
  box-shadow:0 0 0 1.5px rgba(7,11,24,0.95), 0 0 8px rgba(255,247,227,0.7);
}
.lg-dot.lg-jesus{
  background:radial-gradient(circle, #6b0000 0%, #8b0000 35%, #ffffff 50%, #ffffff 100%);
  box-shadow:0 0 0 1.5px rgba(7,11,24,0.95), 0 0 8px rgba(255,255,255,0.7), 0 0 3px rgba(139,0,0,0.6);
}
.lg-dot.lg-custom{
  background:radial-gradient(circle, #f5d99a, #6e8fb5 60%, transparent);
  box-shadow:0 0 0 1.5px rgba(7,11,24,0.95);
}

/* Connection swatches */
.lg-arc{
  flex:none;
  width:18px; height:8px;
  border-top:1.5px solid rgba(245,217,154,0.7);
  border-radius:9px 9px 0 0;
  filter:drop-shadow(0 0 3px rgba(245,217,154,0.5));
}
.lg-glow{
  flex:none;
  width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle, #fff7e3 0%, #f5d99a 50%, transparent 100%);
  box-shadow:0 0 8px rgba(245,217,154,0.85);
}

/* Connections section spans full width since each row is wider */
.legend-sec:last-child .legend-list{ grid-template-columns:1fr }

@media (max-width: 800px) {
  .legend{ left:12px; bottom:78px; width:160px }
}