/* =============================================================================
   Interior SCENE SYSTEM — a PINNED, stationary visual frame on every device.
   The stage is pinned (it does not move); [data-scene] layers cross-fade in place
   (clear opacity-only -> breath -> appear), driven by a scrubbed timeline (scenes.js).
   Phones use the SAME pinned frame; scenes.js splits dense blocks so each scene fits.
   FALLBACK (reduced-motion / very short <620h): no class added -> ordinary readable
   stacked sections. Document pages carry no [data-stage].
   ============================================================================= */

.stage{position:relative}

/* ---- pinned stationary frame + absolute cross-fading scene layers (desktop AND phone) ---- */
html.scenes-on .stage.stage-on{position:relative;height:100svh;min-height:560px;overflow:hidden}
html.scenes-on .stage.stage-on > .scene{position:absolute;inset:0;overflow:hidden;will-change:opacity,transform;isolation:isolate}
html.scenes-on .stage.stage-on > .scene > .wrap{min-height:100%;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--headclear) + clamp(6px,1.4vh,16px));padding-bottom:clamp(16px,3vh,42px)}
html.scenes-on .stage.stage-on > .scene.sec--light{background:var(--light)}
html.scenes-on .stage.stage-on > .scene.ihero--split > .wrap{justify-content:center}
html.scenes-on .stage.stage-on > .scene .wave{display:none}   /* the cross-fade is the transition */

/* avoid a flash of stacked scenes before the engine builds */
html.scenes-pending [data-stage] > [data-scene]:not(:first-child){opacity:0;visibility:hidden}

/* ---- anchored founder (desktop): stationary portrait left; text states change right ---- */
:root{--anchorw:clamp(260px,29vw,380px)}
html.scenes-on:not(.scenes-mobile) .stage--founder.stage-on > .anchor-media{position:absolute;left:var(--pad);top:0;bottom:0;
  width:var(--anchorw);z-index:1;display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--headclear);padding-bottom:clamp(18px,3.4vh,46px)}
html.scenes-on .stage--founder .anchor-media .portrait{margin:0}
html.scenes-on .stage--founder .anchor-media .founder-name{text-align:left}
html.scenes-on:not(.scenes-mobile) .stage--founder.stage-on > .scene--beside > .wrap{
  padding-left:calc(var(--pad) + var(--anchorw) + clamp(30px,3vw,64px));padding-right:var(--pad)}
html.scenes-on:not(.scenes-mobile) .stage--founder.stage-on > .scene:not(.scene--beside){z-index:2}
html.scenes-on:not(.scenes-mobile) .stage--founder.stage-on > .scene--beside .cols-4{grid-template-columns:1fr 1fr}
html.scenes-on:not(.scenes-mobile) .stage--founder.stage-on > .scene--beside .sec-head.center{text-align:left;margin-left:0}
html.scenes-on:not(.scenes-mobile) .stage--founder.stage-on > .scene--beside .sec-head.center .lead{margin-left:0}
html.scenes-on:not(.scenes-mobile) .stage--founder.stage-on > .scene--beside .phil{text-align:left;margin:0;max-width:none}
html.scenes-on:not(.scenes-mobile) .stage--founder.stage-on > .scene--beside .phil + .lead{text-align:left!important;margin-left:0}

/* ---- SHORT desktop/laptop (scene mode): tighten dense cards/grids so nothing clips at low heights ---- */
@media (min-width:900px) and (max-height:830px){
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .grid{gap:clamp(12px,1.4vw,18px)}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .card{padding:clamp(14px,1.3vw,20px)}
  html.scenes-on:not(.scenes-mobile) .stage.stage-on .sec-head{margin-bottom:2px}
}

/* ---- PHONE / TABLET-PORTRAIT: same pinned frame, single column, dense blocks split by the engine ---- */
@media (max-width:899px){
  html.scenes-on .stage.stage-on > .scene > .wrap{padding-top:calc(var(--headclear) + clamp(8px,2vh,18px));padding-bottom:clamp(14px,2.6vh,30px)}
  html.scenes-on .stage.stage-on .grid.cols-2,
  html.scenes-on .stage.stage-on .grid.cols-3,
  html.scenes-on .stage.stage-on .grid.cols-4{grid-template-columns:1fr;gap:clamp(12px,3vw,20px)}
  html.scenes-on .stage.stage-on .ihero--split .ihero-grid{grid-template-columns:1fr;gap:clamp(16px,4.5vw,26px)}
  html.scenes-on .stage.stage-on .hiw-step{grid-template-columns:1fr;gap:clamp(14px,4vw,22px)}
  /* founder on phones: portrait pinned as a compact top strip; text states change below it */
  html.scenes-mobile .stage--founder.stage-on > .anchor-media{position:absolute;left:0;right:0;top:0;bottom:auto;width:auto;height:auto;z-index:3;
    display:flex;flex-direction:row;align-items:center;gap:12px;justify-content:flex-start;
    padding:calc(var(--headclear) - 10px) var(--gutter) 10px;background:linear-gradient(180deg,rgba(0,19,64,.92),rgba(0,19,64,0))}
  html.scenes-mobile .stage--founder .anchor-media .portrait{max-width:72px;border-radius:12px}
  html.scenes-mobile .stage--founder .anchor-media .founder-name{font-size:10px;letter-spacing:.1em}
  html.scenes-mobile .stage--founder.stage-on > .scene--beside > .wrap{padding-left:var(--gutter);padding-right:var(--gutter);
    padding-top:calc(var(--headclear) + clamp(92px,15vh,120px));justify-content:flex-start}
  html.scenes-mobile .stage--founder.stage-on > .scene--beside .cols-4{grid-template-columns:1fr}
  html.scenes-mobile .stage--founder.stage-on > .scene--beside .sec-head.center{text-align:left}
  html.scenes-mobile .stage--founder.stage-on > .scene--beside .phil{text-align:left;max-width:none}
  /* keep each composed state within the phone frame (no clip): tighten dense states */
  html.scenes-on .stage.stage-on > .scene > .wrap{padding-bottom:clamp(10px,2vh,20px)}
  html.scenes-mobile .paper-sheet{padding:16px;box-shadow:0 16px 40px -26px rgba(0,8,32,.6)}
  html.scenes-mobile .paper-mast{padding-bottom:10px;margin-bottom:12px}
  html.scenes-mobile .docstate .d-area{padding:8px 0}
  html.scenes-mobile .d-foot{margin-top:12px;padding-top:10px}
  html.scenes-mobile .hiw-step{gap:14px}
  html.scenes-mobile .ps-num{margin-bottom:10px}
  html.scenes-mobile .stage--founder.stage-on > .scene--beside > .wrap{padding-top:calc(var(--headclear) + clamp(78px,12vh,98px))}
  html.scenes-mobile .stage--founder .checks{gap:9px}
}

/* ---- SHORTER PHONES (<=860px tall, e.g. 375x812, 360x780): one compact rule so every pinned scene still fits
   without clipping — tighter top clearance, gaps and display type; body copy stays >=15px. 390x844 and taller
   are unchanged in practice; the homepage does not load this file. ---- */
@media (max-width:899px) and (max-height:860px){
  html.scenes-on .stage.stage-on > .scene > .wrap{padding-top:calc(var(--headclear) - 12px);padding-bottom:10px}
  html.scenes-on .stage.stage-on h1{font-size:clamp(30px,8.4vw,36px)}
  html.scenes-on .stage.stage-on h2{font-size:clamp(23px,6.6vw,26px)}
  html.scenes-on .stage.stage-on .closing h2{font-size:clamp(23px,6.6vw,26px)}
  html.scenes-on .stage.stage-on .lead,html.scenes-on .stage.stage-on .ihero-sub,html.scenes-on .stage.stage-on .prose p{font-size:15px;line-height:1.5}
  html.scenes-on .stage.stage-on .grid{gap:10px}
  html.scenes-on .stage.stage-on .card{padding:14px 16px}
  html.scenes-on .stage.stage-on .checks li{line-height:1.38}
  html.scenes-on .stage.stage-on .ihero-actions{margin-top:16px}
  /* founder chapters (Meet the Founder, consolidated About): the compact rule above must not pull the text up under the
     pinned portrait strip (owner 2026-10-02 review: headings overlapped the portrait at 390x844) */
  html.scenes-mobile .stage--founder .anchor-media .portrait{max-width:58px;border-radius:10px}
  html.scenes-mobile .stage--founder.stage-on > .scene--beside > .wrap{padding-top:calc(var(--headclear) + 64px)}
}