/* Homepage scroll story ("Covered"). Light-DOM parts only: the pinned stage, the
   captions docked at its bottom, the progress line, and the still list that is
   the story without motion. The art itself is styled inside story.js's shadow
   root. Decisions: docs/scroll-story-bowready.md. */

.story{position:relative; background:var(--paper)}
.story-track{position:relative}
.story-track[hidden]{display:none}
.story-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:#CFE6E2}
.story-art{position:absolute; inset:0}

/* Captions: one at a time, docked at the bottom. Nothing covers the middle. */
.story-layer{position:absolute; inset:0; pointer-events:none; z-index:5}
.story-layer > [data-seg]{opacity:0}
.story-layer > .on{pointer-events:auto}
.story-layer .story-cap,.story-layer .story-aside{position:absolute; left:max(16px,env(safe-area-inset-left,0px)); right:max(16px,env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px)); max-width:470px; box-shadow:0 14px 36px rgba(14,33,30,.24); will-change:transform,opacity}
.story-cap,.story-aside{border-radius:18px; padding:14px 18px 6px}
.story-cap{background:var(--surface); border-top:4px solid var(--teal)}
.story-aside{background:var(--spruce); color:var(--paper)}
.story-k{margin:0; font:500 11.5px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--teal)}
.story-aside .story-k{color:var(--teal-soft)}
.story-cap h3,.story-big{margin:8px 0 4px; font:700 25px/1.12 var(--display); letter-spacing:-.01em; color:inherit}
.story-cap p:not(.story-k),.story-aside p:not(.story-k):not(.story-big){margin:0 0 8px; font-size:16.5px; line-height:1.5}
.story-cap p:not(.story-k){color:var(--stone)}
.story-aside p:not(.story-k):not(.story-big){color:#CFE6E2}
.story-more{display:flex; justify-content:space-between; align-items:center; min-height:44px; border-top:1px solid var(--line); font-weight:600; color:var(--teal)}
.story-aside .story-more{color:var(--paper); border-color:rgba(246,245,241,.2)}
.story-more:hover{text-decoration:none}

.story-progress{position:absolute; left:0; right:0; top:calc(var(--hh,56px) - 2px); height:10px; z-index:4; opacity:0; transition:opacity .25s}
html.story-in-view .story-progress{opacity:1}
.story-progress svg{display:block; width:100%; height:10px; overflow:visible}

@media (min-width:900px){
  .story-layer .story-cap,.story-layer .story-aside{bottom:40px; left:max(40px,6vw)}
}
@media (orientation:landscape) and (max-height:520px){
  .story-layer .story-cap,.story-layer .story-aside{top:calc(var(--hh,56px) + 12px); bottom:auto; width:42%; max-width:none}
}

/* Without motion: the same story as a list. Stills are drawn into .story-still
   under reduced motion; with no JavaScript at all the captions read on their own. */
html.story-live .story-list{display:none}
.story-list{list-style:none; margin:0 auto; padding:32px 16px; max-width:560px; display:grid; gap:22px}
.story-still{display:none}
.story-still.on{display:block; position:relative; height:min(640px,85vh); border-radius:18px 18px 0 0; overflow:hidden}
.story-list .story-still.on + .story-cap{border-radius:0 0 18px 18px}
.story-list .story-cap{box-shadow:0 1px 0 var(--line)}

@media (prefers-reduced-motion:reduce){.story-progress{transition:none}}

/* Short phones (an iPhone SE is 667px tall): tighter captions, so more of the
   scene stays visible above them. story.js measures them for the layout. */
@media (max-height:760px) and (max-width:899px){
  .story-layer .story-cap,.story-layer .story-aside{padding:11px 14px 3px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); left:max(10px,env(safe-area-inset-left,0px)); right:max(10px,env(safe-area-inset-right,0px))}
  .story-layer .story-cap h3,.story-layer .story-big{font-size:21px; margin:5px 0 3px}
  .story-layer .story-cap p:not(.story-k),.story-layer .story-aside p:not(.story-k):not(.story-big){font-size:15px; line-height:1.42; margin-bottom:6px}
  .story-layer .story-more{min-height:40px}
}

/* The tour's pause control: a round icon button stacked right above the
   back-to-top button (same size and colour), so it costs no extra width. */
.story-tour-ctl{position:absolute; z-index:6; right:max(16px,env(safe-area-inset-right,0px));
  bottom:calc(var(--story-cap-h,190px) - 14px + 58px + env(safe-area-inset-bottom,0px));
  width:48px; height:48px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--spruce); color:var(--paper); box-shadow:0 8px 22px rgba(14,33,30,.28)}
.story-tour-ctl svg{width:22px; height:22px}
.story-tour-ctl .i-play{display:none}
.story-tour-ctl.paused .i-pause{display:none}
.story-tour-ctl.paused .i-play{display:inline}
.story-tour-ctl:hover{background:var(--teal)}
.story-tour-ctl:focus:not(:focus-visible){outline:none}
.story-tour-ctl:focus-visible{outline:2px solid var(--teal-bright); outline-offset:3px}
.story-tour-ctl[hidden]{display:none}
@media (min-width:900px){.story-tour-ctl{bottom:calc(16px + 58px + env(safe-area-inset-bottom,0px))}}

/* Thin captions while the story plays: headline plus one line, no chapter label
   (the progress line already says where you are). The still list keeps the label. */
.story-layer .story-cap,.story-layer .story-aside{padding:10px 16px 10px; border-top-width:3px}
.story-layer .story-k{display:none}
.story-layer .story-cap h3,.story-layer .story-big{margin:0 0 2px; font-size:20px; line-height:1.2}
.story-layer .story-cap p:not(.story-k){margin:0; font-size:15px; line-height:1.35}
.story-layer .story-more{display:inline-flex; gap:6px; min-height:36px; border-top:0; padding:0}
.story-layer .story-aside .story-more{color:var(--teal-soft)}
@media (max-height:760px) and (max-width:899px){
  .story-layer .story-cap,.story-layer .story-aside{padding:9px 14px 9px}
  .story-layer .story-cap h3,.story-layer .story-big{font-size:19px; margin:0 0 1px}
  .story-layer .story-cap p:not(.story-k){font-size:14.5px; margin:0}
}