/* LifePass Map Story – page frame. Sizes come from the design system's tokens, scaled by the
   surface factor. Trying the Mobile base (×1) at every width for now (it was Desktop ×1.25 on wide
   screens; set --ui-scale back to var(--type-scale-desktop) below to compare). At the marketing
   site's breakpoint the story panel moves from the left edge to the bottom. */
html, body { margin: 0; }
* { box-sizing: border-box; }
body {
  --ui-scale: var(--type-scale-mobile);
  --story-gutter: calc(var(--space-800) * var(--ui-scale));
  background: var(--color-freedom-900);
  color: var(--text-on-photo);
  font-family: var(--font-body);
}
/* On a phone the gutter is the design system's phone gutter, 16 (the mobile app kit's --app-gutter),
   on every side. The lockup's line keeps the same space either side (story.jsx). */
@media (max-width: 820px) {
  body { --ui-scale: var(--type-scale-mobile); --story-gutter: calc(var(--space-400) * var(--ui-scale)); }
}

/* The scroll track: one screen of scrolling per beat. Empty – the story itself is fixed on top. */
.story-track section { height: 100vh; }

.story-layer { position: fixed; inset: 0; pointer-events: none; }
.story-map { position: fixed; inset: 0; background: var(--color-freedom-900); }

.mapboxgl-marker > * { transition: opacity .6s ease; }

/* Kiosk tags and group pins fade with the map's layers on the first step (see applyOverlay in story.jsx). */
.story-map .mapboxgl-marker > * { opacity: var(--story-overlay, 1); }
/* Group pins hidden for the beats before Connection (see showGround in story.jsx). */
.story-map .mapboxgl-marker[data-story-off] > * { opacity: 0; }