.story-body{margin:0;overflow:hidden;height:100vh}
.story-topbar{display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid var(--line);background:rgba(6,18,24,.9);position:relative;z-index:5}
.story-topbar .brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}
.story-topbar-title{flex:1;font-size:13px;letter-spacing:.04em;color:var(--muted)}
.story-stage{position:relative;height:calc(100vh - 57px);background:var(--ink);overflow:hidden}
.story-frame{position:absolute;inset:0;width:100%;height:100%;border:0}

.story-overlay{
  position:absolute;left:0;bottom:0;
  max-width:min(560px,86vw);
  margin:0 0 96px 40px;
  padding:22px 26px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(7,21,29,.72);
  backdrop-filter:blur(14px);
  opacity:0;
  filter:blur(6px);
  transform:translateY(8px);
  transition:opacity .5s ease, filter .5s ease, transform .5s ease;
  pointer-events:none;
}
.story-overlay.is-visible{opacity:1;filter:blur(0);transform:translateY(0)}
.story-badge{display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:999px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.story-badge.badge-highest{background:rgba(74,222,128,.16);color:#4ade80}
.story-badge.badge-lowest{background:rgba(248,113,113,.16);color:#f87171}
.story-badge.badge-outlier{background:rgba(225,189,104,.18);color:var(--gold)}
.story-badge.badge-intro,.story-badge.badge-outro{background:rgba(107,199,208,.16);color:var(--cyan)}
.story-kicker{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.story-headline{margin:6px 0 10px;font-size:clamp(22px,3vw,34px);line-height:1.15;color:var(--text)}
.story-copy{margin:0;font-size:14px;line-height:1.55;color:var(--text)}
.story-source{margin:10px 0 0;font-size:12px;letter-spacing:.02em;color:var(--muted)}

.story-status{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  padding:6px 14px;border-radius:999px;
  background:rgba(7,21,29,.8);border:1px solid var(--line);
  font-size:12px;color:var(--muted);
  transition:opacity .3s ease;
}
.story-status[hidden]{display:none}

.story-controls{
  position:absolute;right:40px;bottom:96px;
  display:flex;align-items:center;gap:10px;
}
.story-ctrl{
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--line);background:rgba(7,21,29,.72);
  color:var(--text);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.story-ctrl-play{width:auto;padding:0 16px;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.story-ctrl:hover,.story-ctrl:focus-visible{border-color:var(--gold);color:var(--gold)}
.story-dots{display:flex;gap:6px;margin-left:6px}
.story-dot{width:6px;height:6px;border-radius:999px;background:var(--line)}
.story-dot.is-active{background:var(--gold);width:16px;border-radius:4px}

@media (max-width:640px){
  /* Controls were still floating independently of the overlay's own
     footprint here (right:16px;bottom:150px) - fine for a short scene's
     text, but a longer one wraps to more lines at this width and its
     bottom edge (the source line) ends up UNDER the controls, confirmed via
     getBoundingClientRect() on a real device-width test: both boxes'
     y-ranges overlapped. A full-width fixed bar the overlay is guaranteed
     to sit above - regardless of how many lines its text wraps to - is the
     actual fix, not a bigger fixed offset that the next long scene breaks
     again. */
  .story-controls{
    position:fixed;left:0;right:0;bottom:0;
    justify-content:center;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(7,21,29,.9);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  .story-overlay{
    margin:0 16px;
    bottom:calc(58px + env(safe-area-inset-bottom));
    max-width:calc(100vw - 32px);
    max-height:calc(100dvh - 240px);
    overflow-y:auto;
  }
  /* The title was wrapping to 4-5 lines at this width (three flex children
     all fighting for ~375px), pushing the topbar to ~245px tall and eating
     the map. It's already restated as this scene's own kicker inside the
     overlay a moment later, so dropping it here loses nothing. */
  .story-topbar-title{display:none}
  .story-topbar{padding:10px 14px}
  .story-topbar .button{padding:0 10px;font-size:12px;white-space:nowrap}
}