/* Final layer for story pages, loaded after every other sheet.
 * One frame, one type scale, native scrolling. Rules hang off #story, so they win over
 * the older class-based overrides without !important.
 *
 * Desktop: the page scrolls natively through a tall #story while the stage stays pinned
 * under the sticky header; impuls.js picks the scene from the scroll position. Every scroll
 * position shows a whole scene, so there is no scroll snapping to fight the wheel or trackpad.
 * Only the illustration is zoomed to fit (fitStory in impuls.js),
 * the copy keeps its type scale. Phones keep the natural flow from story-motion.css.
 */

/* Type scale: the same on every scene and every audience. */
#story .scene .eyebrow{font-size:12px;letter-spacing:1px}
#story .scene h1,#story .scene h2{font-size:calc(var(--copy-fit,1) * clamp(36px,min(3.5vw,6.4svh),56px));font-weight:700;line-height:1.08;letter-spacing:-.04em;margin:.45em 0}
#story .scene>p{font-size:clamp(15px,min(1.2vw,2.2svh),17px);line-height:1.65;max-width:34em}

@media(min-width:761px){
  html:has(#story){scroll-padding-top:var(--header-h,96px)}

  /* Sticky header with a full-width background; the margins (and the inset border) stay as they were. */
  body[data-audience]>header{position:sticky;top:0;z-index:20;background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}

  /* One scroll step per scene after the first (--story-steps, set in story.njk), a few wheel notches each. */
  #story{--story-step:55svh;height:calc(100svh - var(--header-h,96px) + var(--story-steps,4) * var(--story-step));min-height:0}
  #story .stage{position:sticky;top:var(--header-h,96px);height:calc(100svh - var(--header-h,96px));min-height:0;overflow:hidden;padding-top:clamp(12px,3svh,29px);padding-bottom:0}
  #story .story-layout{flex:0 0 auto;min-height:0;max-height:none;margin:auto 0;padding-block:clamp(0px,2.5svh,32px) clamp(0px,1.5svh,20px);align-items:center}
  #story .story-controls{margin-top:clamp(8px,1.6svh,18px);padding-block:clamp(10px,1.8svh,20px)}
  #story .scene-copy{min-height:0;padding:0}
  #story .object-stage{height:auto;min-height:0;max-height:none;transform:none}
}

@supports not (height:100svh){
  @media(min-width:761px){
    #story{--story-step:55vh;height:calc(100vh - var(--header-h,96px) + var(--story-steps,4) * var(--story-step))}
    #story .stage{height:calc(100vh - var(--header-h,96px))}
  }
}

@media(max-width:760px){
  #story .scene h1,#story .scene h2{font-size:clamp(28px,8.4vw,36px);letter-spacing:-.035em;line-height:1.1}
  #story .scene>p{font-size:15px;line-height:1.6}
}