/* ═══════════════════════════════════════
   SIBL INVESTIGATION — UNIFIED STYLES
   ═══════════════════════════════════════ */
:root {
  --red: #d62828; --red-bright: #ff3b3b;
  --red-glow: rgba(214,40,40,0.55); --red-soft: rgba(214,40,40,0.10);
  --amber: #e6a430; --amber-glow: rgba(230,164,48,0.55);
  --blue: #4f7bc8; --blue-bright: #7aa1e8; --blue-glow: rgba(79,123,200,0.55);
  --bg: #06080e; --bg-deep: #03050a;
  --bg-card: rgba(11,15,26,0.78); --bg-card-solid: #0b0f1a;
  --text: #ecedf0; --text-mute: rgba(236,237,240,0.78);
  --text-dim: rgba(236,237,240,0.52); --text-faint: rgba(236,237,240,0.22);
  --border: rgba(255,255,255,0.10);
  --ease: cubic-bezier(0.4,0,0.2,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --nav-clearance: 110px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--sans); background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
  -ms-overflow-style: none; scrollbar-width: none;
  text-rendering: optimizeLegibility;
  touch-action: pan-y;
}
body::-webkit-scrollbar { display: none; }

/* Honor users who set "reduce motion" — keep static layout, drop pulsing
   loops and big arc fly-overs. We still allow opacity transitions for
   card fades because they're tied to scroll position, not autoplay. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.18s !important;
  }
  .hub-marker::before, .hub-marker::after,
  .westin-marker::before, .westin-marker::after,
  .bb-marker::before, .bb-marker::after,
  .salam-marker::after, .pm.pm-active { animation: none !important; }
  .salam-link-path, .westin-arc, .trail-arc, .arc-path { animation: none !important; }
}

/* ── PROGRESS BAR ── */
#progress-bar {
  position: fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--red), var(--amber));
  z-index: 9999; pointer-events: none;
  box-shadow: 0 0 10px var(--red-glow);
  transition: width 0.18s var(--ease-out);
}

/* ── BRAND LOGO ── */
#brand-logo {
  position: fixed;
  top: clamp(16px, 2.5vw, 24px);
  left: clamp(16px, 2.5vw, 24px);
  z-index: 9600; /* Higher than act navigation initially */
  width: clamp(120px, 10vw, 170px);
  opacity: 0.85;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), z-index 0.5s var(--ease-out), width 0.5s var(--ease-out);
  pointer-events: auto;
}
#brand-logo img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1); /* Ensure dark blue logo is pure white on dark BG */
}
#brand-logo.scrolled {
  z-index: 100; /* goes behind cards overlay (500) and other layers */
}

/* ── ACT NAVIGATION (desktop side panel - hidden) ── */
.act-nav {
  display: none;
}

/* ── ACT NAVIGATION (sticky wrapper) ── */
.act-nav-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  pointer-events: none;
}

.act-nav-mobile, .act-nav-extra {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 4px;
  background: rgba(6,8,14,0.55);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  pointer-events: auto;
}
/* On devices that can't accelerate backdrop-filter we'd otherwise see a
   transparent pill — fall back to a solid tint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .act-nav-mobile, .act-nav-extra { background: rgba(6,8,14,0.88); }
}
.act-btn-mobile {
  padding: 7px 12px;
  min-height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 100px;
  color: rgba(236,237,240,0.6);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  opacity: 0.45;
  transition: opacity 0.45s var(--ease-out), background 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.act-nav-extra {
  padding: 2px;
  gap: 2px;
}
.act-nav-extra .act-btn-mobile {
  padding: 4px 10px;
  font-size: 8px;
  letter-spacing: 0.8px;
  opacity: 0.32;
}
.act-nav-extra .act-btn-mobile:hover {
  opacity: 0.75;
}
.act-btn-mobile:hover {
  opacity: 0.85;
}
.act-btn-mobile.active:hover {
  opacity: 1;
}
.act-btn-mobile .amb-num {
  font-family: var(--serif);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
}
.act-btn-mobile.active {
  opacity: 1;
  background: rgba(214,40,40,0.22);
  border-color: rgba(214,40,40,0.45);
  color: #fff;
}
.act-btn-mobile.active .amb-num { color: #fff; }
.act-btn-mobile[data-act="3"].active {
  background: rgba(230,164,48,0.22);
  border-color: rgba(230,164,48,0.45);
}

/* ── SCROLLY LAYOUT ── */
#scrolly { position: relative; }
#sticky-map {
  position: sticky; top:0; height:100vh; height:100dvh;
  width:100%; overflow:hidden; z-index:0; isolation:isolate;
}
#map { position:absolute; inset:0; background:var(--bg); }

/* Cinematic vignette */
#sticky-map::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 30%, rgba(6,8,14,0.78) 100%),
    linear-gradient(180deg, rgba(6,8,14,0.32) 0%, transparent 18%, transparent 82%, rgba(6,8,14,0.45) 100%);
  pointer-events:none; z-index:450;
}
/* Subtle scanline texture. `mix-blend-mode: multiply` was creating an
   isolated compositor layer the full size of the sticky map and forcing
   the browser to re-blend every paint frame during scroll. The visual
   result was a ~2% darkening with horizontal lines — barely visible.
   Switched to a plain low-alpha overlay; same look, no compositor cost. */
#sticky-map::after {
  content:''; position:absolute; inset:0;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.022) 3px 4px);
  pointer-events:none; z-index:460;
}
#arc-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:400; overflow:visible; }
#cards-overlay { position:absolute; inset:0; z-index:500; pointer-events:none; }
#scroll-pipe { position:relative; z-index:1; pointer-events:none; }

.step { height:70vh; height:70dvh; }
.step.intro-step { height:100vh; height:100dvh; }
.step.outro-step { height:100vh; height:100dvh; }
.step.chapter-step { height:90vh; height:90dvh; }
.step.reveal-step { height:110vh; height:110dvh; }
.step.network-step { height:100vh; height:100dvh; }
.step.final-outro { height:100vh; height:100dvh; }
/* Act 3 scroll behavior is fully controlled by JS in map-engine.js
   (wheel / touch / keyboard). CSS scroll-snap is intentionally NOT set
   so it can't fight the programmatic smooth-scrolls. */

/* ── CARDS ──
   No backdrop-filter on any screen size: the card background is already
   ~95% opaque (you can't actually see through it), so the blur kernel
   was being computed against an almost-invisible window of map behind
   the card. Every scroll frame's opacity/transform change paid for that
   recompute. Tightened the gradient to ~97% to fully kill any seam.
   Shadow blur trimmed (80 → 36) — large soft-shadow areas are
   fill-rate-bound during scroll. */
.card {
  position:absolute; top:50%; left:clamp(16px,4vw,56px);
  transform:translate3d(0,-50%,0); width:clamp(300px,28vw,400px);
  padding:clamp(22px,2vw,28px) clamp(22px,2.2vw,30px);
  background: linear-gradient(155deg, rgba(16,22,38,0.97), rgba(6,9,18,0.985));
  border:1px solid var(--border); border-left:2px solid var(--red);
  border-radius:6px; opacity:0; pointer-events:none;
  will-change:opacity,transform;
  contain: layout paint;
  box-shadow: 0 14px 36px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.06);
  /* All centered cards share this guarantee: top-edge ≥ 100px after
     centering, so the fixed act-nav at the top can never cover them.
     See the intro/outro rule below for the derivation. */
  max-height: calc(100dvh - 200px);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.card::-webkit-scrollbar { display: none; }
.card::before {
  content:''; position:absolute; top:-1px; left:-1px; width:40px; height:40px;
  background:linear-gradient(135deg, rgba(214,40,40,0.4), transparent 60%);
  border-radius:6px 0 0 0; pointer-events:none;
}
.card.active { pointer-events:auto; }

/* Intro / Outro cards */
.card.intro-card, .card.outro-card {
  left:50%;
  top: calc(50% + var(--nav-clearance) / 2);
  transform:translate3d(-50%,-50%,0);
  width:clamp(320px,44vw,540px); text-align:center;
  border-left:1px solid var(--border); border-top:2px solid var(--red);
  padding:clamp(28px,3.4vw,44px);
  background: linear-gradient(160deg, rgba(20,26,42,0.94), rgba(7,10,18,0.96));
  /* Center the card perfectly in the remaining viewport height below the upper navigation panel.
     This ensures it never overlaps with the upper panel even on short or wide screens. */
  max-height: calc(100dvh - var(--nav-clearance) - 40px);
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.card.intro-card::-webkit-scrollbar,
.card.outro-card::-webkit-scrollbar { display: none; }
.card.intro-card::before, .card.outro-card::before {
  background:linear-gradient(180deg, rgba(214,40,40,0.45), transparent 70%);
  width:100%; height:60px; border-radius:6px 6px 0 0;
}

/* Chapter card */
.card.chapter-card {
  left:auto; right:clamp(16px,4vw,56px);
  width:clamp(320px,32vw,480px); text-align:left;
  border:1px solid var(--border); border-top:2px solid var(--red);
  padding:clamp(28px,3vw,40px);
  background: linear-gradient(160deg, rgba(20,26,42,0.94), rgba(7,10,18,0.96));
}
.card.chapter-card::before {
  background:linear-gradient(180deg, rgba(214,40,40,0.45), transparent 70%);
  width:100%; height:60px; border-radius:6px 6px 0 0;
}

/* ── CARD COMPONENTS ── */
.card-tag {
  font-family:var(--mono); font-size:clamp(9.5px,0.78vw,10.5px);
  font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:var(--red); margin-bottom:clamp(14px,1.6vw,20px);
  display:flex; align-items:center; gap:10px;
}
.card-tag::before {
  content:''; display:block; width:18px; height:1px;
  background:linear-gradient(90deg, var(--red), transparent);
}
.intro-card .card-tag, .outro-card .card-tag { justify-content:center; }
.intro-card .card-tag::before, .outro-card .card-tag::before { display:none; }
.intro-card .card-tag {
  font-size: clamp(12.5px, 1.15vw, 15.5px);
  color: #ff5c5c;
  font-weight: 700;
  letter-spacing: 2.5px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.card-profile-row { display:flex; align-items:center; gap:clamp(14px,1.5vw,20px); margin-bottom:clamp(14px,1.6vw,20px); }
.card-photo-wrap {
  flex-shrink:0; width:clamp(58px,5.2vw,72px); height:clamp(58px,5.2vw,72px);
  border-radius:50%; border:2px solid rgba(255,255,255,0.18);
  overflow:hidden; background:rgba(255,255,255,0.04); position:relative;
  box-shadow: 0 0 0 1px rgba(214,40,40,0.2), 0 8px 22px rgba(0,0,0,0.55);
}
.card-photo { width:100%; height:100%; object-fit:cover; display:block; }
.card-name { font-size:clamp(17px,1.55vw,21px); font-weight:700; color:#fff; margin-bottom:5px; line-height:1.2; }
.card-designation { font-size:clamp(10.5px,0.92vw,12px); color:var(--text-mute); letter-spacing:1.2px; text-transform:uppercase; font-weight:500; }
.card-timestamp {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:clamp(11px,0.95vw,12.5px);
  color:var(--amber); padding:6px 12px;
  border:1px solid rgba(230,164,48,0.35); border-radius:3px;
  background:linear-gradient(135deg, rgba(230,164,48,0.16), rgba(230,164,48,0.06));
  margin-bottom:clamp(12px,1.4vw,18px); font-weight:600;
}
.card-timestamp::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 8px var(--amber-glow);
  animation:dotBlink 2.6s ease-in-out infinite;
}
.card-deceased-inline {
  margin-top:8px; display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:clamp(9.5px,0.82vw,10.5px);
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--red-bright); font-weight:600;
  padding:3px 8px; border:1px solid rgba(255,92,92,0.32);
  border-radius:2px; background:rgba(255,92,92,0.08);
}
.card-hint {
  font-family:var(--mono); font-size:clamp(9px,0.78vw,10px);
  color:var(--red); letter-spacing:2px; text-transform:uppercase;
  animation:hintPulse 2.6s ease-in-out infinite;
}
.detail-block { margin-bottom:clamp(12px,1.3vw,16px); }
.detail-value { font-size:clamp(13px,1.1vw,14.5px); color:rgba(255,255,255,0.96); line-height:1.55; font-weight:500; }
.detail-value.amber { font-family:var(--mono); color:var(--amber); font-weight:600; }
.detail-quote {
  font-size:clamp(13px,1.05vw,14px); color:var(--text-mute); line-height:1.7;
  border-left:2px solid rgba(214,40,40,0.35); padding-left:14px;
}
.deceased-badge {
  margin-top:clamp(12px,1.4vw,16px); padding:8px 14px;
  background:linear-gradient(135deg, rgba(214,40,40,0.14), rgba(214,40,40,0.04));
  border:1px solid rgba(214,40,40,0.32); border-radius:3px;
  font-family:var(--mono); font-size:9px; letter-spacing:2px;
  text-transform:uppercase; color:var(--red-bright); font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.deceased-badge::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--red-bright); box-shadow:0 0 8px rgba(255,92,92,0.7);
}

/* ── DIGITAL CLOCK ── */
.digital-clock {
  position: fixed;
  bottom: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  z-index: 1000;
  font-family: var(--mono);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  color: var(--red);
  text-shadow: 0 0 10px rgba(214, 40, 40, 0.4), 0 0 30px rgba(214, 40, 40, 0.2);
  letter-spacing: 2px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  background: linear-gradient(135deg, rgba(14,20,38,0.7), rgba(5,7,12,0.85));
  padding: 10px 24px;
  border: 1px solid rgba(214, 40, 40, 0.25);
  border-radius: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.digital-clock.visible {
  opacity: 1;
  transform: translateY(0);
}
.digital-clock.counting {
  color: #fff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 30px rgba(214, 40, 40, 0.8);
  transform: translateY(0) scale(1.05);
  transition: transform 0.1s, color 0.1s, text-shadow 0.1s;
}

/* Intro specifics */
.intro-main-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4), 0 0 30px rgba(214, 40, 40, 0.65);
  margin-top: 0;
  margin-bottom: clamp(14px, 1.8vw, 24px);
  animation: npFadeIn 0.8s ease-out both;
}
.intro-ghost-num {
  font-size:clamp(100px,12vw,160px); font-weight:800; color:rgba(214,40,40,0.06);
  line-height:1; position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  pointer-events:none; user-select:none; letter-spacing:-8px; z-index:0;
}
.intro-inner { position:relative; z-index:1; }
.intro-stamp {
  display:inline-block; font-family:var(--mono); font-size:9px;
  letter-spacing:4px; text-transform:uppercase; color:var(--red);
  border:1.5px solid rgba(214,40,40,0.4); padding:4px 14px;
  margin-bottom:20px; transform:rotate(-1.5deg); background:rgba(214,40,40,0.06);
}
.intro-headline {
  font-size:clamp(20px,2.4vw,30px); font-weight:700; letter-spacing:-0.5px;
  line-height:1.25; color:#fff; margin-bottom:8px;
}
.intro-rule { width:44px; height:1px; background:linear-gradient(90deg, transparent, var(--red), transparent); margin:18px auto; }
.intro-subtext {
  font-family:var(--mono); font-size:clamp(10.5px,0.95vw,12px);
  color:var(--text-mute); letter-spacing:1.3px; text-transform:uppercase;
  line-height:1.65; margin-bottom:clamp(20px,2vw,26px); font-weight:500;
}
.scroll-cue {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--text-dim);
  animation:hintPulse 3s ease-in-out infinite;
}
.scroll-arrow { font-size:18px; color:var(--red); animation:arrowBounce 2.2s ease-in-out infinite; }

/* Chapter */
.chapter-eyebrow {
  font-family:var(--mono); font-size:clamp(10px,0.9vw,12px);
  letter-spacing:3.2px; text-transform:uppercase; color:#fff;
  text-shadow: 0 0 4px #ff5c5c, 0 0 10px rgba(255, 92, 92, 0.8), 0 0 20px rgba(214, 40, 40, 0.5);
  margin-bottom:clamp(14px,1.4vw,18px); font-weight:900;
  display:flex; align-items:center; gap:10px;
}
.chapter-eyebrow::before { content:''; width:18px; height:1px; background:linear-gradient(90deg, var(--red-bright), transparent); }
.chapter-title {
  font-size:clamp(21px,2.3vw,31px);
  font-weight:700; letter-spacing:-0.4px; line-height:1.22;
  color:#fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.15), 0 0 20px rgba(214, 40, 40, 0.5);
  margin-bottom:clamp(12px,1.4vw,16px);
}
.chapter-body { font-size:clamp(12px,1.05vw,14px); color:var(--text-mute); line-height:1.72; font-weight:400; }

/* Outro */
.outro-num {
  font-size:clamp(56px,6.4vw,92px); font-weight:800; color:var(--red);
  line-height:1; margin-bottom:8px; letter-spacing:-3px;
  background:linear-gradient(180deg, var(--red), #8c1818);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.outro-headline { font-size:clamp(16px,1.6vw,21px); font-weight:700; color:#fff; margin-bottom:12px; line-height:1.35; }
.outro-body { font-size:clamp(12px,1vw,13.5px); color:var(--text-mute); line-height:1.7; }
.outro-alert {
  margin-top:clamp(14px,1.6vw,20px); padding:12px 16px;
  background:linear-gradient(135deg, rgba(214,40,40,0.12), rgba(214,40,40,0.04));
  border:1px solid rgba(214,40,40,0.3); border-radius:4px;
  font-size:clamp(11px,1vw,12.5px); color:var(--text-mute); line-height:1.6; text-align:left;
}

/* ── REVEAL LAYER ── */
#reveal-layer {
  position:absolute; inset:0; z-index:350; pointer-events:none;
  opacity:0; transition:opacity 0.7s var(--ease-out);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#reveal-layer.visible { opacity:1; }
.room-bg { position:absolute; inset:0; background: radial-gradient(ellipse 65% 75% at 50% 55%, rgba(22,28,42,0.5), rgba(3,5,10,0.94)), linear-gradient(180deg, #0a0d16, #04060b); }
.room-vignette { position:absolute; inset:0; background:radial-gradient(ellipse 55% 50% at 50% 50%, transparent, rgba(0,0,0,0.7)); pointer-events:none; }
.room-salam {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(180px,28vw,260px); display:flex; flex-direction:column;
  align-items:center; gap:clamp(12px,1.6vw,18px);
}
.room-salam-frame {
  position:relative; width:clamp(140px,22vw,220px); height:clamp(140px,22vw,220px);
  border-radius:50%; overflow:hidden; border:2px solid var(--red);
  box-shadow: 0 0 0 6px rgba(214,40,40,0.08), 0 0 70px rgba(214,40,40,0.4);
  background:var(--bg-card-solid);
}
.room-salam-frame img { width:100%; height:100%; object-fit:cover; }
.room-salam-frame .xh {
  position:absolute; width:22px; height:22px; border-color:var(--red); border-style:solid; border-width:0;
  filter:drop-shadow(0 0 6px var(--red-glow));
}
.room-salam-frame .xh.tl { top:-12px; left:-12px; border-top-width:1.5px; border-left-width:1.5px; }
.room-salam-frame .xh.tr { top:-12px; right:-12px; border-top-width:1.5px; border-right-width:1.5px; }
.room-salam-frame .xh.bl { bottom:-12px; left:-12px; border-bottom-width:1.5px; border-left-width:1.5px; }
.room-salam-frame .xh.br { bottom:-12px; right:-12px; border-bottom-width:1.5px; border-right-width:1.5px; }
.room-salam-label { font-family:var(--mono); font-size:clamp(8.5px,0.78vw,10px); letter-spacing:3.5px; text-transform:uppercase; color:var(--red); text-align:center; font-weight:600; }
.room-salam-name { font-size:clamp(15px,1.5vw,19px); color:#f0f1f5; text-align:center; font-weight:700; }
.room-salam-role { font-family:var(--mono); font-size:clamp(9px,0.8vw,10.5px); letter-spacing:1.6px; text-transform:uppercase; color:var(--text-dim); text-align:center; font-weight:500; margin-top:2px; }
.room-stamp {
  position:absolute; top:clamp(18px,2.4vw,30px); left:clamp(18px,2.4vw,30px);
  font-family:var(--mono); font-size:clamp(8.5px,0.78vw,10px); letter-spacing:3px;
  text-transform:uppercase; color:var(--red);
  border:1.5px solid rgba(214,40,40,0.45); padding:6px 14px; font-weight:600;
  background:rgba(5,7,12,0.75); backdrop-filter:blur(8px); border-radius:2px;
}
.room-stamp::before {
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--red); margin-right:8px; vertical-align:middle;
  animation:dotBlink 1.8s ease-in-out infinite; box-shadow:0 0 8px var(--red-glow);
}

/* ── DOCS STAGE ── */
#docs-stage {
  position:absolute; inset:0; z-index:340; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.7s var(--ease-out);
}
#docs-stage.visible { opacity:1; }
.docs-stack { position:relative; width:clamp(320px,50vw,560px); max-width:80vw; height:clamp(260px,36vh,360px); }
.doc {
  position:absolute; width:clamp(150px,18vw,220px); height:clamp(200px,25vw,290px);
  background:linear-gradient(180deg, #f0eadc, #e8e1cf); color:#1b1812;
  padding:clamp(12px,1.4vw,18px); box-shadow:0 32px 70px rgba(0,0,0,0.78);
  font-size:8px; line-height:1.4; overflow:hidden;
}
.doc::after {
  content:'RESIGNED'; position:absolute; top:22px; right:14px;
  font-size:7px; font-weight:800; letter-spacing:1.5px;
  color:rgba(214,40,40,0.85); transform:rotate(-8deg); z-index:2;
}
.doc::before {
  content:''; position:absolute; top:14px; right:14px; width:46px; height:46px;
  border:2px solid rgba(214,40,40,0.7); border-radius:50%; transform:rotate(-8deg);
}
.doc .doc-title { font-size:clamp(8.5px,0.78vw,10px); font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#2a241a; margin-bottom:5px; padding-right:48px; }
.doc .doc-sub { font-size:clamp(7px,0.65vw,8.5px); letter-spacing:1px; color:#5a4e3a; margin-bottom:clamp(12px,1.4vw,18px); padding-right:48px; }
.doc .doc-lines { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.doc .doc-lines span { display:block; height:3px; background:rgba(30,24,16,0.25); border-radius:1px; }
.doc .doc-sig { position:absolute; left:14px; bottom:18px; }
.doc .doc-sig .sig-mark { font-family:'Brush Script MT',cursive; font-size:22px; color:#0d2964; transform:rotate(-4deg); }
.doc .doc-sig .sig-name { font-size:7px; letter-spacing:1px; color:#2a241a; border-top:1px solid rgba(30,24,16,0.45); padding-top:3px; }
.doc-1 { left:0; top:30px; transform:rotate(-6deg); }
.doc-2 { left:50%; top:0; margin-left:-105px; transform:rotate(1.5deg); z-index:2; }
.doc-3 { right:0; top:30px; transform:rotate(5deg); }

/* ── NETWORK LAYER (ACT III) ── */
#network-layer {
  position:absolute; inset:0; z-index:600; pointer-events:none;
  opacity:0; visibility:hidden;
  /* Was 0.8s — too long for fast scroll-through. With 0.3s the
     layer is fully visible by the time the user has glanced at
     the first panel, eliminating the half-faded "blink" against
     the still-visible map underneath. */
  transition:opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
  background: var(--bg);
}
#network-layer.visible { opacity:1; visibility:visible; pointer-events:auto; }

/* ══════════════════════════════════════════════════════
   ACT III PANELS — compact, dynamic, no internal scroll
   ══════════════════════════════════════════════════════ */

.net-panel {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  /* `safe center` falls back to flex-start when content would otherwise
     overflow the box — prevents the top of a tall panel from slipping
     up behind the fixed nav on shorter / windowed wide screens. */
  align-items: safe center;
  justify-content: safe center;
  /* Reserve room for the top nav */
  padding: clamp(96px, 8vw, 120px) clamp(20px, 4vw, 44px) clamp(20px, 4vw, 44px) clamp(20px, 4vw, 44px);
  pointer-events:none;
  overflow:hidden;
}
#net-panel-7 {
  padding-top: clamp(120px, 11vw, 150px);
}
.net-panel * { box-sizing:border-box; }

/* Outer panel shells */
.np3 {
  width:100%;
  max-width: 1080px;
  max-height: 100%;
  display:flex;
  margin: 0 auto;
}
.np3-stage {
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap: clamp(10px, 1.6vw, 18px);
  margin: 0 auto;
}
/* ── Live network graph panel (iframe embed) ── */
.np3-network {
  flex-direction: column;
  width: 100%;
  max-width: min(1800px, 100%);
  height: 100%;
  max-height: 100%;
  gap: 0;
  align-items: stretch;
}
.np3-network-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 2px 12px;
  text-align: center;
  flex-shrink: 0;
}
.np3-network-hint-icon { font-size: 14px; line-height: 1; }
.np3-network-frame-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #06080e;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.np3-network-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #06080e;
  color-scheme: dark;
}

.np3-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.np3-side { min-width:0; display:flex; flex-direction:column; align-items:center; gap:clamp(8px, 1.2vw, 12px); }
.np3-viz  { min-width:0; display:flex; flex-direction:column; gap: clamp(12px, 1.5vw, 18px); width: 100%; max-width: 640px; margin: 0 auto; }

/* Shared text bits */
.np3-tag {
  font-family:var(--mono); font-size:clamp(10px, 1.1vw, 14px);
  letter-spacing:2.6px; text-transform:uppercase;
  color:var(--amber); font-weight:600;
  margin-bottom:4px;
}
.np3-fig {
  font-family: var(--serif);
  font-size: clamp(64px, 9vw, 110px);
  font-weight:800; line-height:1; letter-spacing:-2.5px;
  color:#fff;
  display:inline-flex; align-items:baseline; white-space:nowrap;
  margin: 4px 0 8px;
}
.np3-fig-unit {
  font-size: 0.42em; font-weight:600; letter-spacing:0;
  margin-left:3px; color: var(--text-mute);
  -webkit-text-fill-color: var(--text-mute);
}
.np3-fig-blue   { background:linear-gradient(180deg,#9ec0ff,#4f7bc8 60%,#23477f); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.np3-fig-red    { background:linear-gradient(180deg,#ff9a9a,#d62828 60%,#7f1818); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.np3-fig-amber  { background:linear-gradient(180deg,#ffd17a,#e6a430 60%,#a8761a); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.np3-fig-purple { background:linear-gradient(180deg,#c8b1ff,#a78bfa 60%,#6e44d9); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.np3-fig-sky    { background:linear-gradient(180deg,#a4dcff,#38bdf8 60%,#0671a3); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }

.np3-h3 {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight:700; color:#fff;
  line-height:1.3; letter-spacing:-0.2px;
  margin: 0 0 8px;
}
.np3-p {
  font-size: clamp(13px, 1.5vw, 18px);
  color: var(--text-mute);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
}
.np3-p em { font-style:normal; color:#fff; font-weight:500; }
.np3-foot {
  font-family: var(--mono);
  font-size: clamp(10px, 0.9vw, 13px);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--amber); font-weight: 600;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ── STAGE PANELS (transition + architecture) ── */
.np3-stage-tag {
  font-family: var(--mono);
  font-size: clamp(12px, 1.2vw, 16px);
  letter-spacing: 5px; text-transform: uppercase;
  color: var(--amber); font-weight: 700;
}
.np3-stage-title {
  font-family: var(--serif);
  font-size: clamp(34px, 5.5vw, 68px);
  font-weight: 800; color: #fff;
  letter-spacing: -1.2px; line-height: 1.1;
  margin: 8px 0 16px;
}
.np3-stage-lead {
  font-size: clamp(14px, 1.5vw, 19px);
  color: var(--text-mute);
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto;
}
.np3-stage-cue {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--amber); opacity: 0.7;
  animation: hintPulse 3s ease-in-out infinite;
  margin-top: 6px;
}
.np3-amber {
  color: var(--amber); font-weight: 700;
}

/* Architecture panel actor pills */
.np3-actors {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; max-width: 640px;
  margin: 4px 0;
}
.np3-actor {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
  animation: npFadeIn 0.5s ease-out both;
}
.np3-actor-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.np3-actor-hero {
  background: linear-gradient(135deg, rgba(214,40,40,0.18), rgba(230,164,48,0.10));
  border-color: rgba(214,40,40,0.55);
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 700;
  letter-spacing: -0.2px; text-transform: none;
  padding: 10px 18px;
}
.np3-actor-hero .np3-actor-dot {
  background: var(--red); box-shadow: 0 0 12px var(--red-glow);
}
.np3-link {
  font-family: var(--mono);
  font-size: clamp(14px, 1.4vw, 18px);
  color: rgba(255,255,255,0.35);
  margin: 2px 0 -2px;
}

/* ── BAR CHARTS (compact) ── */
.np3-bars {
  display: flex; flex-direction: column;
  gap: clamp(5px, 0.7vw, 9px);
}
.np3-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1.2fr;
  align-items: center;
  gap: clamp(6px, 0.9vw, 12px);
  animation: npFadeIn 0.45s ease-out both;
  animation-delay: var(--d, 0ms);
}
.np3-row-name {
  font-size: clamp(10px, 0.8vw, 12px);
  color: var(--text-mute);
  text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.np3-row-track {
  height: 9px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
  display: block;
  min-width: 0;
}
.np3-row-fill {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  animation: bar-grow 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes bar-grow { to { width: var(--w, 0%); } }
.np3-row-fill.blue       { background: linear-gradient(90deg,#2563EB,#7AA1E8); }
.np3-row-fill.blue-soft  { background: linear-gradient(90deg,#3a4f8a,#6b86c8); opacity:0.7; }
.np3-row-fill.red        { background: linear-gradient(90deg,#DC2626,#ff6b6b); }
.np3-row-fill.red-soft   { background: linear-gradient(90deg,#7f1818,#b94a4a); opacity:0.75; }
.np3-row-fill.purple     { background: linear-gradient(90deg,#7C3AED,#a78bfa); }
.np3-row-val {
  font-family: var(--mono);
  font-size: clamp(10px, 0.82vw, 12px);
  font-weight: 600; color: #fff;
  text-align: left;
  white-space: nowrap;
}
.np3-row-agg {
  border-top: 1px dashed rgba(255,255,255,0.10);
  padding-top: 6px; margin-top: 2px;
}
.np3-row-agg .np3-row-name { color: rgba(255, 255, 255, 0.45); font-style: italic; }
.np3-row-agg .np3-row-val  { color: rgba(255, 255, 255, 0.6); }

/* ── DIRECTORS GRID ── */
.np3-dirs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 0.8vw, 10px);
}
.np3-dir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 14px);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  animation: npFadeIn 0.4s ease-out both;
  animation-delay: var(--d, 0ms);
  min-width: 0;
}
.np3-dir-main {
  background: linear-gradient(135deg, rgba(230,164,48,0.12), rgba(214,40,40,0.06));
  border-color: rgba(230,164,48,0.4);
  grid-column: 1 / -1;
  box-shadow: 0 0 0 1px rgba(230,164,48,0.18), 0 8px 22px rgba(230,164,48,0.08);
}
.np3-dir-main .np3-dir-name {
  font-size: clamp(14px, 1.3vw, 17px);
}
.np3-dir-name {
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1;
}
.np3-dir-tags {
  display: flex; gap: 6px; flex-shrink: 0;
}
.np3-dir-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.25);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: clamp(9.5px, 0.82vw, 11px);
  font-weight: 700; color: #fff;
  letter-spacing: 0.4px;
}
.np3-dir-pill small {
  font-size: 0.78em; color: var(--text-dim); font-weight: 600;
}
.np3-dir-dot { width: 6px; height: 6px; border-radius: 50%; }
.np3-dot-r { background: #DC2626; }
.np3-dot-b { background: #2563EB; }

/* ── ADDRESSES ── */
.np3-addr { gap: clamp(8px, 1vw, 12px); }
.np3-addr-card {
  padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.4vw, 18px);
  background: rgba(124,58,237,0.07);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 10px;
  animation: npFadeIn 0.5s ease-out both;
}
.np3-addr-card-after {
  background: rgba(56,189,248,0.06);
  border-color: rgba(56,189,248,0.25);
}
.np3-addr-pin {
  font-size: clamp(15px, 1.4vw, 18px);
  margin-bottom: 4px;
  filter: grayscale(0.2);
}
.np3-addr-place {
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 700; color: #fff;
  margin-bottom: 2px;
}
.np3-addr-meta {
  font-family: var(--mono);
  font-size: clamp(9.5px, 0.82vw, 11px);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--amber); font-weight: 600;
  margin-bottom: 8px;
}
.np3-addr-chips {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
}
.np3-addr-arrow {
  font-family: var(--mono);
  font-size: clamp(9px, 0.82vw, 10.5px);
  text-align: center;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.np3-chip {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: clamp(9px, 0.78vw, 10.5px);
  color: var(--text-mute);
  letter-spacing: 0.4px;
  white-space: nowrap;
  animation: npFadeIn 0.4s ease-out both;
  animation-delay: var(--d, 0ms);
}
.np3-chip-sky {
  background: rgba(56,189,248,0.08);
  border-color: rgba(56,189,248,0.25);
  color: #cfeefd;
}
.np3-chip-more {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.18);
  color: var(--amber);
  font-style: italic;
}

/* ── BRANCHES ── */
.np3-brs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.4vw, 16px);
}
.np3-br {
  padding: clamp(12px, 1.4vw, 18px) clamp(12px, 1.6vw, 20px);
  background: rgba(56,189,248,0.06);
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: 6px;
  animation: npFadeIn 0.5s ease-out both;
  animation-delay: var(--d, 0ms);
  min-width: 0;
}
.np3-br-name {
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 700; color: #fff;
}
.np3-br-total {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800; color: #38bdf8;
  letter-spacing: -1px; line-height: 1;
}
.np3-br-meta {
  font-family: var(--mono);
  font-size: clamp(9px, 0.78vw, 10.5px);
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-dim);
}
.np3-br-chips {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════
   FINAL SUMMARY (Act 3 closer)
   ══════════════════════════════════════════════════════ */
.np3-final {
  flex-direction: column; align-items: center;
  text-align: center;
  gap: clamp(10px, 1.6vw, 18px);
  width: 100%; max-width: 980px;
  margin: 0 auto;
}
.np3-final-tag {
  font-family: var(--mono);
  font-size: clamp(9.5px, 0.85vw, 11px);
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--amber); font-weight: 600;
}
.np3-final-head {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 38px);
  line-height: 1.18;
  color: #fff; letter-spacing: -0.5px;
  margin: 0 0 2px;
}
.np3-final-accent {
  background: linear-gradient(90deg, var(--red), var(--amber));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 8px;
}
.np3-final-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
  width: 100%;
}
.np3-cell {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: clamp(10px, 1.4vw, 18px) clamp(8px, 1.2vw, 16px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 6px;
  animation: npFadeIn 0.5s ease-out both;
  min-width: 0;
}
.np3-cell-strong {
  background: linear-gradient(135deg, rgba(230,164,48,0.10), rgba(214,40,40,0.06));
  border-color: rgba(230,164,48,0.32);
}
.np3-cell-hero {
  background: linear-gradient(135deg, rgba(230,164,48,0.20), rgba(230,164,48,0.04));
  border-color: rgba(230,164,48,0.55);
  box-shadow: 0 0 0 1px rgba(230,164,48,0.18), 0 14px 40px rgba(230,164,48,0.14);
}
.np3-cell-num {
  font-family: var(--serif);
  font-weight: 800; line-height: 1;
  font-size: clamp(22px, 3.2vw, 46px);
  letter-spacing: -1.4px;
  color: #fff;
  display: inline-flex; align-items: baseline;
  white-space: nowrap;
}
.np3-cell-hero .np3-cell-num {
  background: linear-gradient(180deg, #ffd17a, var(--amber) 60%, #b87a18);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.np3-cell-unit {
  font-size: 0.42em; font-weight: 600;
  margin-left: 3px;
  color: var(--text-mute);
  -webkit-text-fill-color: var(--text-mute);
}
.np3-cell-cap {
  font-family: var(--mono);
  font-size: clamp(8.5px, 0.76vw, 10.5px);
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-dim); line-height: 1.4;
}
.np3-final-foot {
  display: flex; flex-direction: column; gap: 3px;
  align-items: center;
  margin-top: clamp(2px, 0.6vw, 8px);
}
.np3-final-route {
  font-family: var(--mono); font-size: clamp(9px, 0.8vw, 11px);
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-dim);
}
.np3-final-name {
  font-family: var(--serif);
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 700; color: var(--red);
  letter-spacing: -0.3px;
}
.np3-final-role {
  font-family: var(--mono); font-size: clamp(9px, 0.8vw, 11px);
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-mute);
}
.np3-final-end {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  margin-top: 2px;
}

@keyframes npFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════════
   MOBILE — fully stacked, compact, charts visible
   ══════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .net-panel {
    /* Padding clears the 2-row mobile act-nav (~134-164px from
       viewport top depending on notch) and leaves a small bottom
       gutter. No overflow scroll — content is sized below to fit. */
    padding: calc(108px + env(safe-area-inset-top, 0px))
             12px
             calc(14px + env(safe-area-inset-bottom, 0px))
             12px;
    /* `safe center` keeps short content centered but pins tall
       content to the start (below the padding) so its top never
       slips behind the nav. */
    align-items: safe center;
    /* Inherit base overflow:hidden — no internal scroll. Each
       panel is sized to fit the viewport on every phone. */
  }
  #net-panel-7 {
    padding-top: calc(128px + env(safe-area-inset-top, 0px)) !important;
  }
  .np3 { max-height: 100%; }
  .np3-stage { gap: 10px; padding-top: 0; }
  .np3-network { gap: 6px; }
  .np3-network-hint { font-size: 9px; letter-spacing: 1px; padding: 0 8px; }
  .np3-network-hint-icon { font-size: 12px; }
  .np3-network-frame-wrap { border-radius: 10px; }
  .np3-split {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* ── Mobile compaction: every panel fits within the viewport
     (no internal scroll). Sized to clear 460dvh portrait phones
     after the 108+inset top padding and 14+inset bottom padding. */
  .np3-split { gap: 10px; max-width: 100%; }
  .np3-side { text-align: center; align-items: center; gap: 2px; }
  .np3-tag { font-size: 9.5px; letter-spacing: 2px; margin-bottom: 0; }
  .np3-fig { font-size: clamp(34px, 10vw, 50px); letter-spacing: -1.2px; margin: 0 0 2px; }
  .np3-h3 { font-size: clamp(13px, 3.6vw, 15px); margin: 0 0 4px; line-height: 1.25; }
  .np3-p { font-size: 11.5px; line-height: 1.4; max-width: 340px; margin: 0 auto; }

  .np3-stage { gap: 6px; }
  .np3-stage-tag { font-size: 10px; letter-spacing: 3.5px; }
  .np3-stage-title { font-size: clamp(22px, 6.5vw, 28px); letter-spacing: -0.6px; margin: 4px 0 6px; }
  .np3-stage-lead { font-size: 12.5px; line-height: 1.5; max-width: 320px; }

  .np3-bars { gap: 4px; }
  .np3-row {
    grid-template-columns: 1.1fr 2fr 1.2fr;
    gap: 6px;
  }
  .np3-row-name { font-size: 9.5px; }
  .np3-row-val  { font-size: 9.5px; text-align: left; }
  .np3-row-track { height: 6px; }
  .np3-foot { font-size: 9px; padding-top: 6px; letter-spacing: 1.2px; }

  .np3-dirs { grid-template-columns: 1fr 1fr; gap: 4px; }
  .np3-dir { padding: 5px 7px; gap: 5px; border-radius: 6px; }
  .np3-dir-main { padding: 6px 9px; }
  .np3-dir-name { font-size: 10px; }
  .np3-dir-main .np3-dir-name { font-size: 12px; }
  .np3-dir-pill { padding: 1.5px 5px; font-size: 9px; gap: 3px; }
  .np3-dir-pill small { font-size: 0.72em; }

  .np3-addr { gap: 6px; }
  .np3-addr-card { padding: 7px 10px; border-radius: 8px; }
  .np3-addr-pin { font-size: 14px; margin-bottom: 2px; }
  .np3-addr-place { font-size: 12px; margin-bottom: 0; }
  .np3-addr-meta { font-size: 9px; margin-bottom: 4px; letter-spacing: 1px; }
  .np3-addr-arrow { font-size: 9px; letter-spacing: 1.2px; }
  .np3-chip { font-size: 9px; padding: 1.5px 6px; }

  .np3-brs { grid-template-columns: 1fr 1fr; gap: 6px; }
  .np3-br { padding: 8px 9px; gap: 3px; border-radius: 9px; }
  .np3-br-name { font-size: 11px; }
  .np3-br-total { font-size: 19px; letter-spacing: -0.6px; }
  .np3-br-meta { font-size: 8.5px; letter-spacing: 1px; }
  .np3-br-chips { gap: 3px; }

  .np3-actors { gap: 5px; max-width: 100%; }
  .np3-actor { padding: 4px 9px; font-size: 9.5px; letter-spacing: 1px; }
  .np3-actor-hero { font-size: 13px; padding: 6px 12px; }
  .np3-link { font-size: 13px; margin: 0; }

  /* Final summary */
  .np3-final { gap: 8px; }
  .np3-final-tag { font-size: 9.5px; letter-spacing: 3px; }
  .np3-final-head { font-size: clamp(18px, 5.4vw, 24px); line-height: 1.15; }
  .np3-final-accent { display: block; margin-left: 0; margin-top: 1px; }
  .np3-final-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
  .np3-cell-hero { grid-column: 1 / -1; }
  .np3-cell { padding: 8px 5px; gap: 3px; min-width: 0; }
  .np3-cell-num { font-size: clamp(18px, 6.4vw, 24px); letter-spacing: -0.8px; }
  .np3-cell-unit { font-size: 0.5em; margin-left: 1.5px; }
  .np3-cell-cap { font-size: 8.5px; letter-spacing: 0.9px; line-height: 1.3; }
  .np3-cell-hero .np3-cell-num { font-size: clamp(22px, 7.5vw, 30px); }
  .np3-final-name { font-size: 17px; }
  .np3-final-route { font-size: 8.5px; line-height: 1.5; }
  .np3-final-role { font-size: 8.5px; letter-spacing: 1.6px; }
  .np3-final-end { font-size: 8.5px; letter-spacing: 3px; }
  .np3-final-foot { gap: 2px; }
}

/* Narrow phones (320-380px wide). Tunes below the mobile defaults
   above so content still fits without internal scroll. The previous
   values predated the mobile compaction and were *larger* than the
   default clamps — they actively pushed content back over the
   viewport. */
@media (max-width: 380px) {
  .np3-fig { font-size: 32px; }
  .np3-stage-title { font-size: 20px; }
  .np3-h3 { font-size: 12.5px; }
  .np3-p { font-size: 11px; line-height: 1.4; }
  .np3-stage-lead { font-size: 11.5px; }
  .np3-row-name { font-size: 9px; }
  .np3-row-val { font-size: 9px; }
  .np3-foot { font-size: 8.5px; }
  .np3-dir-name { font-size: 9.5px; }
  .np3-dir-main .np3-dir-name { font-size: 11px; }
  .np3-br-total { font-size: 17px; }
}

/* ── MAP MARKERS ── */
.hub-marker {
  position:relative; width:34px; height:34px;
  background:radial-gradient(circle at 35% 35%, #ff5757, var(--red) 60%, #851414);
  border-radius:50%; border:2.5px solid rgba(255,255,255,0.88);
  box-shadow: 0 0 26px 6px var(--red-glow), 0 4px 16px rgba(0,0,0,0.8);
}
/* One pulse ring instead of two staggered ones — the second ring was
   doubling the per-frame composite cost for a barely noticeable
   "ripple" overlap. Slowed slightly (3s) so the single ring still
   reads as a deliberate beat, not a fast blink. */
.hub-marker::before {
  content:''; position:absolute; inset:-15px; border-radius:50%;
  border:1.5px solid rgba(214,40,40,0.55); animation:hubPulse 3s ease-out infinite;
}
.hub-label, .westin-label, .bb-label, .salam-label {
  position:absolute; top:42px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:2.4px; text-transform:uppercase; pointer-events:none;
  padding:3px 8px; background:rgba(6,8,14,0.6); border-radius:2px;
}
.hub-label { color:rgba(255,255,255,0.75); }
.westin-marker {
  position:relative; width:32px; height:32px;
  background:radial-gradient(circle at 35% 35%, #ffce6e, var(--amber) 60%, #b87a18);
  border-radius:50%; border:2.5px solid rgba(255,255,255,0.92);
  box-shadow: 0 0 22px 6px var(--amber-glow), 0 4px 14px rgba(0,0,0,0.7);
}
.westin-label { color:var(--amber); top:40px; }
.bb-marker {
  position:relative; width:30px; height:30px;
  background:radial-gradient(circle at 35% 35%, #93b5f5, var(--blue) 60%, #2d4f8a);
  border-radius:50%; border:2.5px solid rgba(255,255,255,0.92);
  box-shadow: 0 0 22px 6px var(--blue-glow), 0 4px 14px rgba(0,0,0,0.75);
  display:flex; align-items:center; justify-content:center;
  font-size:8.5px; font-weight:800; color:#fff;
}
.bb-label { color:var(--blue-bright); top:40px; }
.salam-marker {
  width:44px; height:44px; border-radius:50%; border:2.5px solid var(--red);
  box-shadow: 0 0 0 3px rgba(214,40,40,0.2), 0 0 26px var(--red-glow);
  background:var(--bg-card-solid); position:relative; overflow:visible;
}
.salam-marker img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.salam-label { color:var(--red); top:50px; }

/* Person markers */
.pm {
  width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,0.4);
  background:rgba(12,17,35,0.85); overflow:hidden; position:relative;
  transition:width 0.4s var(--ease-out), height 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  box-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.pm-img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.pm-num { position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:rgba(220,225,238,0.7); background:rgba(12,17,35,0.9); border-radius:50%; }
.pm.pm-active { border-color:rgba(255,255,255,0.95); width:50px; height:50px; box-shadow: 0 0 0 3px rgba(255,255,255,0.18), 0 0 24px rgba(255,255,255,0.32); z-index:10; }
.pm.pm-deceased { border-color:rgba(255,80,80,0.6); }
.pm.pm-deceased.pm-active { border-color:rgba(255,92,92,0.95); }

/* SVG arcs — all paths are now static dashed curves on every screen
   size. The flowing-dash (`dashFlow`) keyframe was the single biggest
   SVG repaint cost in this view: it forced a full SVG re-rasterization
   per frame for the entire arc region, on every arc, indefinitely. The
   journalism reads fine without it — the active arc still pops via
   stroke color, width, opacity and drop-shadow; the salam→Westin link
   and DGFI→Westin arc still pop via color and the 2-2.2 stroke width. */
.arc-path {
  fill:none;
  transition:stroke 0.5s var(--ease-out), stroke-width 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}
.salam-link-path { fill:none; stroke:var(--red); stroke-width:2; stroke-dasharray:4 4; opacity:0; filter:drop-shadow(0 0 5px var(--red-glow)); transition:opacity 0.6s var(--ease-out); }
.salam-link-path.visible { opacity:1; }
.westin-arc { fill:none; stroke-width:2.2; stroke-dasharray:6 6; opacity:0; transition:opacity 0.6s var(--ease-out); }
.westin-arc.visible { opacity:1; }
.trail-arc { fill:none; stroke:rgba(230,164,48,0.78); stroke-width:1.5; stroke-dasharray:3 5; opacity:0; transition:opacity 0.6s var(--ease-out); }
.trail-arc.visible { opacity:1; }

/* ── ANIMATIONS ── */
@keyframes hintPulse { 0%,100%{opacity:0.45} 50%{opacity:1} }
@keyframes arrowBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes dotBlink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
@keyframes hubPulse { 0%{transform:scale(0.5);opacity:0.9} 100%{transform:scale(3.4);opacity:0} }
@keyframes dashFlow { to{stroke-dashoffset:0} }
@keyframes markerPulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,0.45)} 70%{box-shadow:0 0 0 14px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }
@keyframes markerPulseDeceased { 0%{box-shadow:0 0 0 0 rgba(255,80,80,0.5)} 70%{box-shadow:0 0 0 14px rgba(255,80,80,0)} 100%{box-shadow:0 0 0 0 rgba(255,80,80,0)} }
@keyframes shimmerGlow { 0%,100%{opacity:0.7} 50%{opacity:1} }

/* Leaflet overrides */
.leaflet-control-attribution { font-size:8px!important; opacity:0.25!important; background:transparent!important; color:rgba(255,255,255,0.4)!important; }
.leaflet-control-attribution a { color:rgba(255,255,255,0.4)!important; }
.leaflet-control-zoom { display:none!important; }
.leaflet-marker-icon, .leaflet-marker-shadow {
  transition: opacity 0.6s var(--ease-out);
}
#network-layer { transition: opacity 0.3s cubic-bezier(0.16,1,0.3,1); }

/* ── MOBILE ── */
@media (max-width: 680px) {
  .card {
    left:12px!important; right:12px!important; width:auto!important;
    top:auto!important; bottom:18px!important;
    max-height:52dvh!important; overflow-y:auto!important;
    padding:18px 20px!important;
    background:linear-gradient(160deg, rgba(14,18,32,0.96), rgba(5,8,16,0.98))!important;
    border-radius:10px!important;
    border:1px solid rgba(255,255,255,0.1)!important; border-left:2px solid var(--red)!important;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.55)!important;
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .card::-webkit-scrollbar { display:none; }
  :root {
    --nav-clearance: 135px;
  }
  .card.intro-card, .card.outro-card {
    left:12px!important; right:12px!important;
    top: calc(50% + var(--nav-clearance) / 2)!important; bottom:auto!important;
    transform: translate3d(0, -50%, 0)!important;
    max-height: calc(100dvh - var(--nav-clearance) - 30px)!important;
    border-left:1px solid rgba(255,255,255,0.1)!important;
    border-top:2px solid var(--red)!important;
    text-align:center!important; padding:22px!important;
  }
  .card.chapter-card {
    left:12px!important; right:12px!important;
    bottom:18px!important; top:auto!important;
  }
  .card-name { font-size:16px!important; }
  .card-photo-wrap { width:54px!important; height:54px!important; }
  .intro-headline { font-size:18px!important; }
  .intro-rule { margin:14px auto!important; background:linear-gradient(90deg, transparent, var(--red), transparent)!important; }
  .scroll-cue { align-items:flex-start!important; }
  .intro-card .scroll-cue, .outro-card .scroll-cue { align-items:center!important; }
  .outro-num { font-size:56px!important; }
  .chapter-title { font-size:22px!important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.2), 0 0 20px rgba(214, 40, 40, 0.65)!important; }
  .pm { width:30px!important; height:30px!important; }
  .pm.pm-active { width:40px!important; height:40px!important; }
  .hub-marker,.westin-marker,.bb-marker { width:26px!important; height:26px!important; }
  .salam-marker { width:36px!important; height:36px!important; }
  .hub-label,.westin-label,.bb-label,.salam-label { font-size:7.5px!important; top:32px!important; padding:2px 6px!important; }
  .salam-label { top:40px!important; }
  .act-nav-wrapper {
    top: max(54px, calc(40px + env(safe-area-inset-top)))!important;
  }
  #brand-logo {
    top: max(14px, env(safe-area-inset-top))!important;
    left: 16px!important;
    width: clamp(95px, 20vw, 125px)!important;
  }
  #brand-logo.scrolled {
    z-index: 100!important;
  }
  .room-salam-frame { width:130px; height:130px; }
}
@media (max-width:380px) {
  .card { max-height:48dvh!important; padding:14px 16px!important; }
  .intro-headline { font-size:16px!important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE PERFORMANCE
   ─────────────────────────────────────────────────────
   Targets the heavy effects that turn scrolling into a slideshow
   on phones. The desktop look is unchanged — these overrides only
   apply at the same breakpoint the existing mobile styles use.
   Key wins:
     • Drop backdrop-filter from cards & nav (the dominant cost on
       every scroll frame because card opacity/transform updates
       force a backdrop recompute).
     • Stop the 18 SVG paths' infinite stroke-dashoffset animations
       (each tick = one full SVG repaint).
     • Remove the mix-blend-mode overlay (forces an isolated
       compositor layer covering the whole sticky map).
     • Cut the marker pulse loops down to one element.
   ══════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* Nav pill — keep the dark tint but drop the blur. */
  .act-nav-mobile, .act-nav-extra {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(6,8,14,0.92) !important;
  }

  /* Digital clock — drop blur. */
  .digital-clock {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8,10,18,0.88) !important;
  }

  /* SVG arcs — kill the remaining animations (salam-link, westin-arc).
     `.arc-path` and `.trail-arc` are already static globally, but
     listing them here is a safety net for any future addition. */
  .arc-path,
  .salam-link-path,
  .westin-arc,
  .trail-arc { animation: none !important; }

  /* Inner radial gradient on the vignette is the priciest part — keep
     only the top/bottom linear bands on mobile. */
  #sticky-map::before {
    background: linear-gradient(180deg, rgba(6,8,14,0.32) 0%, transparent 18%, transparent 82%, rgba(6,8,14,0.45) 100%) !important;
  }

  /* Disable DGFI HQ marker pulsing on mobile to save GPU cycles */
  .hub-marker::before { animation: none !important; display: none !important; }

  /* Reduce shadow blur radii — fewer pixels to soft-fill on every paint. */
  .hub-marker { box-shadow: 0 0 12px 2px var(--red-glow), 0 2px 8px rgba(0,0,0,0.6) !important; }
  .westin-marker { box-shadow: 0 0 10px 2px var(--amber-glow), 0 2px 7px rgba(0,0,0,0.6) !important; }
  .bb-marker { box-shadow: 0 0 10px 2px var(--blue-glow), 0 2px 7px rgba(0,0,0,0.6) !important; }
  .salam-marker { box-shadow: 0 0 0 2px rgba(214,40,40,0.18), 0 0 12px var(--red-glow) !important; }

  /* GPU promotion for the sticky map root so its overlays don't keep
     forcing full-document repaints during scroll. */
  #sticky-map { transform: translateZ(0); }
  /* And isolate per-card paint so card transforms don't repaint siblings. */
  .card { contain: layout paint style !important; }

  /* The dot-blink + hint-pulse loops are subtle text fades — drop them
     on mobile, they're not worth the per-frame repaint. */
  .room-stamp::before,
  .card-timestamp::before { animation: none !important; }
  .scroll-cue,
  .scroll-arrow,
  .card-hint,
  .np3-stage-cue { animation: none !important; }
}

/* ── SCROLL NAV CONTROLS (floating up/down buttons) ── */
.scroll-nav-controls {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  top: 55%;
  transform: translateY(-50%);
  z-index: 9700;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
}

.scroll-nav-btn {
  width: clamp(40px, 3.2vw, 48px);
  height: clamp(40px, 3.2vw, 48px);
  border-radius: 50%;
  background: rgba(16, 22, 38, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(236, 237, 240, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.scroll-nav-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
}

.scroll-nav-btn:hover {
  background: rgba(214, 40, 40, 0.85);
  border-color: rgba(214, 40, 40, 0.45);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(214, 40, 40, 0.35);
}

.scroll-nav-btn:hover svg {
  transform: scale(1.05);
}

.scroll-nav-btn:active {
  transform: scale(0.95);
}

.scroll-nav-btn.disabled {
  opacity: 0.18;
  pointer-events: none;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 680px) {
  .scroll-nav-controls {
    top: 50%;
    right: 12px;
    gap: 8px;
  }
  .scroll-nav-btn {
    width: 38px;
    height: 38px;
    background: rgba(16, 22, 38, 0.85) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  }
  .scroll-nav-btn svg {
    width: 16px;
    height: 16px;
  }
}