/* The narrative and city descent fill the scene; the questionnaire opens on arrival. */
:root{--story-type-scale:1.12;--panel-w:calc(100% / 3);--story-inset:clamp(26px,4.6vw,78px);--story-side-gutter:clamp(24px,3vw,60px);--story-mobile-panel:43%;--story-title-size:calc(var(--fs-hero) * var(--story-type-scale));}
.ascii-layer{opacity:.7;}
.stage{left:0;top:var(--nav-h);}
body.split .stage{left:var(--panel-w);}
.intro{top:calc(var(--nav-h) + clamp(28px,5vh,60px));padding:0 var(--gutter);}
.intro h1{max-width:none;font-size:var(--story-title-size);}
.story-scroll{position:absolute;left:50%;bottom:var(--story-scroll-bottom);transform:translateX(-50%);z-index:var(--z-ask);min-width:var(--story-scroll-min-width);min-height:var(--story-scroll-min-height);padding:var(--story-scroll-padding);background:var(--story-scroll-background);color:var(--ink);font:var(--story-scroll-weight) var(--fs-14)/1 var(--font-mono);letter-spacing:var(--ls-label);cursor:pointer;}
.story-scroll:hover{text-decoration:underline;text-underline-offset:var(--story-scroll-underline-offset);}
.stage[data-shop-link]{cursor:pointer;}
.story-chapter{position:absolute;opacity:0;visibility:hidden;}
#ws[data-chapter=yours] .story-yours,#ws[data-chapter=ours] .story-ours{opacity:1;visibility:visible;}
.story-chapter h2{position:relative;z-index:2;margin:0;font:var(--w-title) var(--story-title-size)/var(--lh-hero) var(--font-title);letter-spacing:var(--ls-tight);text-transform:uppercase;}
.story-side{position:absolute;inset:var(--nav-h) auto 0 0;width:calc(40% + var(--story-side-gutter));z-index:var(--z-ask);pointer-events:none;}
.story-side .story-chapter{inset:0;padding:0 var(--story-side-gutter) 0 calc(2 * var(--story-side-gutter));display:flex;align-items:center;}
.story-side .story-chapter h2{width:100%;min-width:0;text-align:left;}
/* Size this phrase to its words, retaining the shared heading size and vertical center. */
.story-side .story-craft h2{width:max-content;flex-shrink:0;}
.story-craft-line{display:block;white-space:nowrap;}
.ws-mapclip{left:0;top:var(--nav-h);transition:none;}
/* The clip and canvas move together through map-panel-transition.js. */
#cityMap[data-panel-moving] .maplibregl-control-container{position:absolute;inset:0;pointer-events:none;}
body.split .ws-mapclip{left:var(--panel-w);top:var(--nav-h);}
body.split:not(.settled) #cityMap.ws-map{transform:none;}
.ws-l{width:var(--panel-w);padding-left:var(--story-inset);padding-right:var(--story-inset);}
.ws-div,body.split .ws-div{left:var(--panel-w);opacity:0;}
.hud{display:none;}
@media(max-width:860px){
 :root{--story-inset:24px;--story-side-gutter:24px;--panel-h:var(--story-mobile-panel);--story-title-size:calc(clamp(30px,7.5vw,50px) * var(--story-type-scale));}
 .stage{left:0;top:var(--nav-h);bottom:0;}
 body.split .stage{left:0;top:var(--story-mobile-panel);}
 .intro{padding:0 24px;}
 /* Narrow screens keep readable, left-aligned titles above the shop. */
 .story-side{top:calc(var(--nav-h) + clamp(28px,5vh,60px));bottom:auto;width:100%;}
 .story-side .story-chapter{inset:0 0 auto;display:block;}
 .story-side .story-craft h2{width:100%;}
 .story-craft-line{display:inline;white-space:normal;}
 .ws-mapclip{left:0;top:var(--nav-h);}
 body.split .ws-mapclip{left:0;top:var(--story-mobile-panel);}
 .ws-l{width:100%;height:var(--story-mobile-panel);padding-top:calc(var(--nav-h) + 15px);}
}

/* Hidden phases keep their height, so adding the next phase never moves the first. */
.story-line{display:block;visibility:hidden;}
.story-line.on{visibility:inherit;}
.story-row{display:block;white-space:nowrap;}
.story-row .story-line{display:inline;}