/* AXIWALK mobile (v2.4.5)
   Reading sections: the 3D is a fixed band under the header and the copy scrolls BELOW it.
   Interludes (.interlude): the copy stops, a window opens, the 3D takes the whole screen and turns with the scroll,
   then it rises with its bottom edge and becomes the band again, bringing the next copy up with it.
   The canvas is full height; JS clips it (clip-path) to the band, the band + window, or the full screen. */
.interlude{display:none}
@media(max-width:760px){
 :root{
  --mobile-header:calc(58px + env(safe-area-inset-top,0px));
  --mobile-scene-height:clamp(200px,34svh,300px);
  --mobile-view:calc(100svh - var(--mobile-header) - var(--mobile-scene-height));
 }
 html{scroll-padding-top:calc(var(--mobile-header) + var(--mobile-scene-height) + 8px)}

 #stage,#labels{top:var(--mobile-header);height:calc(100svh - var(--mobile-header));max-height:none;overflow:hidden}
 #stage{z-index:35;background:var(--bg);clip-path:inset(0 0 calc(100% - var(--mobile-scene-height)) 0)}
 #labels{z-index:36;clip-path:inset(0 0 calc(100% - var(--mobile-scene-height)) 0)}
 .band-edge{position:fixed;left:0;right:0;top:0;height:1px;background:var(--line);z-index:37;pointer-events:none;will-change:transform}
 #veil{display:none}
 .elev,.drag-zone,.drag-hint{display:none!important}
 .pbar{z-index:41}

 main{padding-top:calc(var(--mobile-header) + var(--mobile-scene-height))}
 .step,.step.s130,.step.tall{min-height:var(--mobile-view);align-items:flex-start;padding-block:22px 34px}
 .step.tall>.card{position:relative;top:auto;bottom:auto}
 .step.auto,.foot{min-height:0;padding-top:22px!important}
 .hero{padding-bottom:84px}
 .cue{bottom:18px}

 /* interlude: an empty stretch of page that the 3D fills */
 .interlude{display:block;position:relative;height:175svh}

 .card,.card.wide,.hero .card,.faq-card{width:100%;background:var(--bg);border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
 .js .rv:not(.in),.js .split:not(.in) .wd>span{opacity:1;transform:none}
 .marquee{z-index:3}

 .cover,.proj-media .cover{width:100%;height:auto;aspect-ratio:16/9}
 .cover img{aspect-ratio:16/9;height:auto;object-fit:cover}
 .toggle{flex-wrap:wrap;width:100%}.toggle button{flex:1;white-space:normal}
 .proj-head{flex-wrap:wrap}

 .no-webgl main{padding-top:var(--mobile-header)}
 .no-webgl #labels,.no-webgl .interlude,.no-webgl .band-edge{display:none}
 .no-webgl .step,.no-webgl .step.s130,.no-webgl .step.tall{min-height:0}
 html.no-webgl{scroll-padding-top:calc(var(--mobile-header) + 8px)}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
 .interlude{height:100svh}
}