:root{--scroll-distance-scale:1.6}
.type-line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}.type-line>span,.type-line>em{display:block}.opening-bottom p>span{display:block}.scene-position{display:none}
.choreographed .preview-note{position:fixed;top:0;left:0;right:0;z-index:12}
.choreographed header{position:fixed;top:30px;z-index:8;padding-top:23px;padding-bottom:23px;background:linear-gradient(#0c1411a6,transparent)}
.choreographed .motion-toggle{z-index:13}
.choreographed .scroll-story{position:relative;height:440svh}
.choreographed .story-stage{position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden;isolation:isolate}
.choreographed .opening,.choreographed .approach{position:absolute;inset:0;min-height:0;padding:0;border:0;will-change:transform,opacity}
.choreographed .opening{display:flex;align-items:center;padding:110px 8.5% 82px}
.choreographed .opening-content{width:100%;margin:0;max-width:1280px}
.choreographed .opening h1{font-size:clamp(62px,7.6vw,112px);line-height:1.16;margin:22px 0 28px;transform-origin:0 0}
.choreographed .opening h1 .type-line{overflow:hidden}
.choreographed .opening-bottom{max-width:900px;align-items:center}
.choreographed .opening-bottom p{line-height:1.8}
.choreographed .approach{display:block}
.choreographed .approach-heading{position:absolute;left:8.5%;top:30%;width:38%;transform-origin:left center}
.choreographed .approach h2{font-size:clamp(42px,4.65vw,72px);margin-top:27px;letter-spacing:-.04em;line-height:1.15}
.choreographed .section-intro{margin-top:26px}
.choreographed .steps{position:absolute;inset:0;padding:0}
.choreographed .steps article{position:absolute;left:55%;top:30%;width:36.5%;display:block;border:0;padding:0;transform-origin:0 50%;will-change:transform,opacity}
.choreographed .step-number{display:block;font-size:clamp(70px,8vw,120px);font-weight:350;letter-spacing:-.055em;line-height:1;margin-bottom:30px;color:#c8a6818f}
.choreographed .steps h3{font-size:clamp(26px,3.1vw,44px);line-height:1.18;letter-spacing:-.035em;font-weight:400}
.choreographed .steps p{font-size:clamp(13px,1.15vw,16px);line-height:1.85;margin-top:24px;max-width:430px}
.choreographed .opening .chapter-index,.choreographed .approach .chapter-index{display:none}
.choreographed .scene-position{position:absolute;display:flex;gap:26px;align-items:center;left:8.5%;right:8.5%;bottom:33px;color:#b4baad;font-size:8px;letter-spacing:.1em}
.scene-track{height:1px;background:#c8a68135;flex:1;max-width:220px;margin-left:auto}.scene-track>span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}.scene-hint{letter-spacing:.02em;font-size:10px}
.choreographed .closing{min-height:100svh;padding-top:145px;padding-bottom:100px;align-content:center;border:0;overflow:hidden}
.choreographed .closing .invitation,.choreographed .closing form{will-change:transform,opacity}
.choreographed .closing h2{letter-spacing:-.035em;line-height:1.16}
.choreographed .closing h2 .type-line{white-space:nowrap}
.choreographed .wall-film video{will-change:transform}
@media(max-width:750px){
 .choreographed header{top:28px;padding:18px 7%}
 .choreographed .scroll-story{height:460svh}
 .choreographed .story-stage{min-height:600px}
 .choreographed .opening{padding:122px 7% 85px;align-items:center}
 .choreographed .opening h1{font-size:clamp(38px,10.7vw,68px);line-height:1.23;letter-spacing:-.027em;margin:25px 0 35px}
 .choreographed .opening-bottom p{font-size:14px}.choreographed .down{width:36px;height:36px}
 .choreographed .approach-heading{left:7%;top:21%;width:86%}
 .choreographed .approach h2{font-size:clamp(34px,9.5vw,50px);margin-top:16px;line-height:1.15}
 .choreographed .section-intro{font-size:11px;line-height:1.7;margin-top:17px}
 .choreographed .steps article{left:7%;top:49%;width:86%}
 .choreographed .step-number{font-size:48px;margin-bottom:19px}
 .choreographed .steps h3{font-size:clamp(24px,6.7vw,33px)}
 .choreographed .steps p{font-size:12px;line-height:1.75;margin-top:16px;max-width:100%}
 .choreographed .scene-position{left:7%;right:7%;bottom:26px;gap:16px;font-size:7px}.scene-track{max-width:90px}.scene-hint{font-size:8px}
 .choreographed .closing{padding-top:130px;padding-bottom:95px;gap:38px;min-height:100svh}
 .choreographed .closing h2{font-size:clamp(40px,11.5vw,64px)}
}
@media(max-height:720px) and (min-width:751px){.choreographed .opening h1{font-size:clamp(54px,6.8vw,90px)}.choreographed .opening{padding-top:120px;padding-bottom:80px}.choreographed .approach-heading,.choreographed .steps article{top:26%}.choreographed .step-number{font-size:70px;margin-bottom:22px}.choreographed .steps h3{font-size:30px}.choreographed .steps p{font-size:13px;margin-top:18px}}
@media(max-height:720px) and (max-width:750px){.choreographed .approach-heading{top:19%}.choreographed .section-intro{margin-top:12px}.choreographed .steps article{top:49%}.choreographed .step-number{font-size:35px;margin-bottom:13px}.choreographed .steps h3{font-size:24px}.choreographed .steps p{font-size:11px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.type-line>span,.type-line>em{transform:none!important;opacity:1!important;clip-path:none!important}.opening h1{font-size:clamp(44px,7.8vw,116px)}.wall-film video{display:none}}
/* Keep the decoded video on a stable surface while the text scene moves. */
.choreographed .wall-film{transform:none!important}
.choreographed .wall-film video{transform:none;will-change:auto}
.choreographed .opening h1{font-size:clamp(64px,9.1vw,128px)}
@media(max-height:720px) and (min-width:751px){.choreographed .opening h1{font-size:clamp(58px,8.6vw,108px)}}
@media(max-width:750px){.choreographed .opening h1{font-size:clamp(38px,11.4vw,70px)}}
/* Longer reading beats, with independent type and counter choreography. */
.choreographed .scroll-story{height:calc(100svh + 560svh * var(--scroll-distance-scale))}
.choreographed .step-title-mask{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.step-title-content{display:block}
.choreographed .step-number{position:relative}
.choreographed .step-number::after{content:'';position:absolute;left:104px;right:0;top:55%;height:1px;background:#c8a68159;transform:scaleX(var(--step-rule,0));transform-origin:left}
@media(max-width:750px){.choreographed .scroll-story{height:calc(100svh + 600svh * var(--scroll-distance-scale))}.choreographed .step-number::after{left:78px;top:55%}}
/* Let contact take over the same viewport before the held scene releases. */
.choreographed .closing-shell{position:relative;z-index:2;margin-top:calc(-1 * var(--scene-height,100svh))}
.choreographed .closing-shell .closing{position:sticky;top:0}