/* A single laboratory, five reading stops. The document remains the scroll owner. */
.home-story{position:relative;height:520svh;margin:0 calc(50% - 50vw);background:#f7f5ee;isolation:isolate}
.story-stage{height:calc(100svh - 96px);min-height:540px;position:sticky;top:0;overflow:clip;background:radial-gradient(ellipse at 72% 48%,#fffefb 0,#f7f5ee 58%,#ebece3 120%)}
.story-stage::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -1px #c9cec5}
.story-topline{position:absolute;z-index:4;top:26px;left:4%;right:4%;display:flex;justify-content:space-between;gap:12px;color:#5b6a72;font:11px ui-monospace,monospace;letter-spacing:2px}
.story-topline b{color:var(--tot-blue)}
.story-copy{position:absolute;z-index:4;top:17%;left:max(4%,calc((100vw - 1200px)/2));width:35%;max-width:470px;pointer-events:none}
.story-copy h1,.story-copy h2{font-size:clamp(38px,4.6vw,68px);letter-spacing:-2.8px;line-height:1.17;margin:20px 0;color:var(--tot-ink);font-weight:800}
.story-copy em{color:var(--tot-blue);font-style:normal}
.story-copy p{max-width:355px;color:var(--tot-muted);line-height:1.9;font-size:16px}
.story-copy .lab-eyebrow{font-size:11px}.story-copy a{pointer-events:auto}.story-copy .site-actions{gap:10px;flex-wrap:wrap;margin-top:24px}
.story-chapter{display:none}.story-chapter.is-current{display:block;animation:story-arrive .35s both}
@keyframes story-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.story-floor{position:absolute;left:-25%;width:150%;height:65%;top:46%;transform:perspective(750px) rotateX(58deg) rotateZ(-10deg);background-color:#ecebe3;background-image:linear-gradient(#b9c0ba40 1px,transparent 1px),linear-gradient(90deg,#b9c0ba40 1px,transparent 1px);background-size:95px 95px;mask-image:radial-gradient(ellipse,#000 20%,transparent 69%);pointer-events:none}
.story-art{position:absolute;inset:0;pointer-events:none}
.story-hero{position:absolute;width:61%;height:auto;right:0;top:15%;filter:drop-shadow(0 30px 16px #293b3c18);will-change:transform,opacity}
.story-prop{position:absolute;filter:drop-shadow(0 12px 8px #293b3c16)}
.story-instrument{width:30%;right:6%;top:8%;opacity:.9}
.story-equipment{width:25%;left:32%;bottom:12%;transform:rotate(-6deg)}
.story-ramp{width:27%;right:-8%;bottom:9%;transform:rotate(4deg)}
#storyCanvas{position:absolute;width:100%;height:100%;inset:0;pointer-events:none}
.story-plaque{position:absolute;right:6%;top:58%;z-index:3;padding:14px 20px;border-left:2px solid var(--tot-blue);color:#33475c;font:11px/1.8 ui-monospace,monospace;letter-spacing:1px}
.story-meter{position:absolute;z-index:3;left:51%;top:10%;width:37%;max-width:455px;padding:22px 26px;border:1px solid #a1abae;border-radius:15px;background:linear-gradient(140deg,#fffef9,#e1e5dd);box-shadow:0 7px 0 #aab3b2,0 22px 30px #21353212;transform:rotate(-2deg)}
.story-meter::before,.story-meter::after{content:'+';position:absolute;top:8px;color:#71828b;font:12px monospace}.story-meter::before{left:9px}.story-meter::after{right:9px}
.story-meter-screen{background:#182d3d;color:#a8ded1;border-radius:6px;padding:18px;font:12px/1.8 ui-monospace,monospace;box-shadow:inset 0 3px 8px #0005}.story-meter-screen strong{display:block;font-size:26px;font-weight:500;color:#eff8e8;margin:8px 0}.story-bits{overflow-wrap:anywhere;letter-spacing:3px;font-size:11px;opacity:.7}.story-meter small{display:block;color:#526471;font:10px monospace;letter-spacing:2px;margin-top:14px}
.story-dock{position:absolute;z-index:6;left:4%;right:4%;bottom:24px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;border-top:1px solid #aeb7b5;padding-top:18px;background:linear-gradient(0deg,#f7f5eee8,transparent)}
.story-stops{display:flex;gap:6px}.story-stops button{background:transparent;color:#697680;border:0;border-radius:8px;min-height:44px;padding:8px 11px;font-size:12px}.story-stops button[aria-current=step]{color:var(--tot-blue);background:#e1e8ed;font-weight:700}.story-stops b{font:11px ui-monospace,monospace;margin-right:7px}
.story-scrub{display:flex;align-items:center;gap:14px}.story-scrub input{width:100%;accent-color:var(--tot-blue);cursor:ew-resize;min-height:44px}.story-scrub output{font:12px monospace;color:#65727b;min-width:38px}.story-skip{font-size:12px;color:#566779;white-space:nowrap}.story-note{position:absolute;z-index:5;bottom:101px;left:4%;color:#6d777a;font:11px/1.6 ui-monospace,monospace;max-width:55%}
.story-error{position:absolute;z-index:8;bottom:155px;left:4%;max-width:340px;background:#fffaf0;border:1px solid #bdac83;padding:16px;border-radius:12px}.story-error button{display:block;margin-top:12px;min-height:44px}
.story-nojs{padding:50px;max-width:550px;position:relative;z-index:9;background:#f7f5ee}
.home-story[data-chapter='3'] .story-copy,.home-story[data-chapter='4'] .story-copy{top:12%}
.home-story[data-chapter='3'] .story-copy h2{font-size:clamp(34px,3.5vw,48px)}
.controller-icon{width:88px;height:64px;font-size:12px;letter-spacing:1px;border-radius:8px;position:relative;background:#243d4c!important;color:#a8ddca!important;box-shadow:4px 5px 0 #bbc5c3!important;border:5px solid #e5e8df!important}.controller-icon::after{content:'';position:absolute;inset:-11px -8px;background:repeating-linear-gradient(90deg,#92a19c 0 3px,transparent 3px 10px);z-index:-1}
@media(min-width:1500px){.story-hero{width:55%;right:5%}.story-copy{top:22%}}
@media(max-width:760px){.home-story{height:490svh}.story-stage{height:calc(100svh - 76px);min-height:610px}.story-topline{top:18px;font-size:9px;letter-spacing:1px}.story-topline span:last-child{display:none}.story-copy,.home-story[data-chapter='3'] .story-copy,.home-story[data-chapter='4'] .story-copy{top:9%;left:6%;width:88%;max-width:none}.story-copy h1,.story-copy h2{font-size:36px;letter-spacing:-1.5px;line-height:1.17;margin:12px 0}.story-copy p{font-size:14px;line-height:1.7;max-width:92%;margin:8px 0}.story-copy .lab-eyebrow{margin:0;font-size:10px}.story-copy .site-actions{margin-top:14px}.story-copy .site-button{min-height:42px;font-size:13px;padding:10px 14px}.story-hero{width:115%;right:-8%;top:35%}.story-instrument{width:48%;top:30%;right:-1%}.story-equipment{width:45%;left:-12%;bottom:12%}.story-ramp{width:45%;right:-18%;bottom:11%}.story-floor{top:53%}.story-plaque{top:auto;bottom:21%;right:5%;font-size:9px;padding:7px 12px}.story-meter{top:39%;left:25%;width:69%;padding:14px 18px}.story-meter-screen{padding:10px;font-size:10px}.story-meter-screen strong{font-size:20px;margin:2px 0}.story-meter small{font-size:8px;margin-top:9px}.story-bits{font-size:9px}.story-dock{bottom:12px;left:5%;right:5%;grid-template-columns:1fr auto;gap:2px 12px;padding-top:8px}.story-stops{grid-column:1 / -1;justify-content:space-between;gap:0}.story-stops button{font-size:11px;padding:4px 7px}.story-stops b{display:none}.story-skip{font-size:10px}.story-note{bottom:110px;left:6%;max-width:88%;font-size:9px}.home-story[data-chapter='3'] .story-copy h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){.home-story{height:auto}.story-stage{position:relative}.story-chapter{animation:none}.story-art *{will-change:auto}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.home-story:not(.story-ready){height:auto}
.story-stage{transform:translateZ(0)}
.story-hero{top:10%}
@media(max-width:760px){.story-hero{top:35%}}

@media(max-height:700px) and (min-width:761px){.story-copy{top:13%}.story-copy h1,.story-copy h2{font-size:42px}.story-copy p{font-size:14px}.story-meter{top:10%;padding:14px 20px}.story-meter-screen{padding:10px}.story-note{bottom:85px}}

@media(max-width:760px){.story-instrument{top:38%}}

@media(min-width:761px) and (max-width:1023px){.story-meter small{font-size:9px;letter-spacing:1px}.story-bits{letter-spacing:1px}}

/* Reserve real content space rather than scaling every object from viewport width. */
.story-stage{--copy-end:320px;--scene-bottom:150px}
.story-art{inset:52px 3% var(--scene-bottom) 42%}
.story-hero{inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.story-instrument{width:40%;right:0;top:0}
.story-equipment{width:34%;left:-12%;bottom:0}
.story-ramp{width:34%;right:-15%;bottom:0}
.story-plaque{top:auto;bottom:112px;right:5%;padding:5px 12px;background:#f7f5eebf}
.story-copy,.home-story[data-chapter='3'] .story-copy,.home-story[data-chapter='4'] .story-copy{top:64px}
.story-copy h1,.story-copy h2{font-size:clamp(32px,min(4.6vw,7svh),68px);overflow-wrap:anywhere}
.story-copy p{line-height:1.7}
.story-meter{top:52px;left:auto;right:7%;width:42%;max-width:430px}
.story-scrub{min-width:0}.story-scrub input{min-width:0}
@media(min-width:761px) and (max-width:1050px){
 .story-stage{--scene-bottom:172px}
 .story-copy{width:37%}.story-copy .site-actions{gap:8px;margin-top:14px}
 .story-copy .site-button{font-size:13px;padding:10px 14px;min-height:44px}
 .story-dock{grid-template-columns:1fr auto;gap:2px 16px;bottom:12px;padding-top:8px}
 .story-stops{grid-column:1 / -1;justify-content:space-between}
 .story-note{bottom:124px;max-width:55%}.story-plaque{bottom:125px;font-size:9px}
 .story-topline{letter-spacing:1px;font-size:9px}
}
@media(max-width:760px){
 .story-stage{min-height:740px;--scene-bottom:155px}
 .story-copy,.home-story[data-chapter='3'] .story-copy,.home-story[data-chapter='4'] .story-copy{top:52px}
 .story-copy h1,.story-copy h2,.home-story[data-chapter='3'] .story-copy h2{font-size:clamp(28px,7vw,36px)}
 .story-art{inset:calc(var(--copy-end) + 12px) 0 var(--scene-bottom)}
 .story-hero{inset:0;width:100%;height:100%}
 .story-instrument{top:0;width:35%;right:3%}
 .story-equipment{left:-6%;width:32%;bottom:0}.story-ramp{right:-8%;width:32%;bottom:0}
 .story-meter{top:calc(var(--copy-end) + 12px);right:8%;left:8%;width:auto;padding:10px 16px}
 .story-meter-screen{padding:8px 12px}.story-meter-screen strong{font-size:18px;margin:0}
 .story-meter small{margin-top:6px}.story-plaque{bottom:137px;font-size:8px;right:6%}
 .story-note{bottom:110px}
}
/* A short landscape window cannot contain a readable pinned scene. Keep the
   whole stage in normal document flow; the same scrubber and stops still work. */
@media(max-height:699px) and (max-width:900px),(max-height:559px){
 .home-story{height:auto}.story-stage{position:relative;height:740px;min-height:740px}
 .story-copy h1,.story-copy h2{font-size:36px}
}
@media(prefers-reduced-motion:reduce){.home-story{height:auto}}
@media(min-width:761px) and (max-height:650px){
 .story-copy h1,.story-copy h2,.home-story[data-chapter='3'] .story-copy h2{font-size:32px;margin:12px 0}
 .story-copy .site-actions{margin-top:14px;gap:8px}
 .story-copy .site-button{font-size:13px;min-height:44px;padding:10px 14px}
}
.story-copy h1,.story-copy h2{letter-spacing:-.045em}
@media(min-width:761px){.story-equipment{left:0;width:28%}.story-ramp{right:-5%;width:28%}}