html.storm-document{scroll-padding-top:0}
.storm-opening{background:#080908}
.storm-opening #hero-scroll{height:auto;min-height:0}
.storm-opening #hub{scroll-margin-top:0}
.storm-opening #hero{height:100svh;min-height:620px;max-height:1400px;background:#000;overflow:hidden;isolation:isolate}
.storm-opening #hero-stage{position:absolute;inset:0;background:#000}
#storm-poster,#storm-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
#storm-poster{z-index:0;overflow:hidden;background:var(--storm-preview,#000) center/cover no-repeat}
#storm-poster img{position:absolute;display:block;max-width:none}
#storm-poster .storm-cloud{height:100%;width:auto;aspect-ratio:3;left:50%;top:0;transform:translateX(-50%)}
#storm-poster .storm-horn{left:8%;top:13%;width:59%;height:73%;object-fit:contain;object-position:center}
#storm-canvas{z-index:1;opacity:0;transition:opacity .6s ease;touch-action:pan-y;pointer-events:none}
[data-scene='live'] #storm-canvas{opacity:1;pointer-events:auto}
#storm-canvas:focus-visible{outline:1px solid #8b9fcb;outline-offset:-8px}
.storm-opening .site-header{padding-top:30px}
.storm-opening .wordmark-period{color:#adb8d1}
.storm-opening #hero .hero-eyebrow{display:flex;top:125px;left:var(--gutter);font-size:9px;letter-spacing:.23em;color:#9ba3b8;font-weight:450}
.storm-opening .hero-eyebrow .small-line{background:#7c88a1;width:24px}
.storm-opening .hero-copy{left:auto;right:var(--gutter);bottom:20%;width:38%;max-width:650px}
.storm-opening .hero-copy h1{font-size:clamp(76px,8.7vw,164px);font-weight:350;line-height:.9;letter-spacing:-.058em;color:#eae8e5}
.storm-opening .hero-copy em{font-size:1.13em;font-weight:400;letter-spacing:-.065em}
.storm-opening .hero-intro{position:static;margin-top:28px;width:auto;max-width:360px}
.storm-opening .hero-intro p{font-size:clamp(12px,1.12vw,16px);line-height:1.75;letter-spacing:.015em;color:#a4a7af;font-weight:350}
.storm-opening .hero-shade{display:none}
.storm-opening #hero-enter{position:absolute;z-index:3;left:50%;bottom:34px;display:grid;place-items:center;width:44px;height:44px;color:#8b92a2;transform:translateX(-50%)}
.storm-opening #hero-enter:hover{color:#e4e9f7}
.scene-choice{position:absolute;z-index:3;left:var(--gutter);bottom:36px;background:none;border:0;border-bottom:1px solid #68708355;color:#a7adbd;padding:10px 0;min-height:44px;font:400 10px/1.4 var(--sans);letter-spacing:.045em;cursor:pointer}
.scene-choice:hover{color:#f4f4f7;border-color:#8c9bbb}
.scene-choice:disabled{cursor:default;color:#7b8293}
.storm-opening [hidden]{display:none!important}
@media(max-aspect-ratio:5/4){
 #storm-poster .storm-horn{left:7%;top:13%;width:76%;height:59%}
 .storm-opening .hero-copy{width:50%;bottom:14%;right:var(--gutter)}
 .storm-opening .hero-copy h1{font-size:clamp(80px,11vw,135px)}
 .storm-opening .hero-intro{margin-top:22px}
}
@media(max-aspect-ratio:4/5){
 #storm-poster .storm-horn{left:5.5%;top:16%;width:86.5%;height:52%}
 .storm-opening #hero{min-height:700px;max-height:1400px}
 .storm-opening #hero .hero-eyebrow{top:104px;font-size:8px;letter-spacing:.17em}
 .storm-opening .hero-copy{width:79%;max-width:520px;bottom:107px;right:var(--gutter)}
 .storm-opening .hero-copy h1{font-size:clamp(65px,16.3vw,114px)}
 .storm-opening .hero-intro{margin-top:19px}
 .storm-opening .hero-intro p{font-size:11px;line-height:1.7}
 .storm-opening #hero-enter{left:auto;right:calc(var(--gutter) - 10px);transform:none;bottom:24px}
 .storm-opening .scene-choice{bottom:24px;font-size:9px}
}
@media(max-height:519px) and (min-aspect-ratio:4/5){
 #storm-poster .storm-horn{left:9%;top:22%;width:45%;height:66%}
 .storm-opening #hero{min-height:360px;height:100svh}
 .storm-opening .site-header{padding-block:18px}
 .storm-opening #hero .hero-eyebrow{display:none}
 .storm-opening .hero-copy{width:40%;bottom:22%;right:var(--gutter)}
 .storm-opening .hero-copy h1{font-size:clamp(45px,7vw,83px)}
 .storm-opening .hero-intro{margin-top:14px}
 .storm-opening .hero-intro p{font-size:10px;line-height:1.6}
 .storm-opening #hero-enter{bottom:10px}
 .storm-opening .scene-choice{bottom:10px}
}
@media(prefers-reduced-motion:reduce){#storm-canvas{transition:none}html{scroll-behavior:auto!important}}
@media(max-aspect-ratio:4/5) and (max-height:760px){
 #storm-poster .storm-horn{top:15%;height:44%}
 .storm-opening .hero-copy h1{font-size:clamp(56px,15vw,90px)}
}
@media(max-width:370px){.storm-opening .contact-section h2{font-size:clamp(44px,15vw,56px)}}
/* II — the complete rendered artwork occupies a shared world-space frame. */
#storm-poster .storm-horn{position:absolute;container-type:size;display:grid;place-items:center}
#storm-poster .storm-art-fit{position:relative;width:min(100cqw,85.87cqh);aspect-ratio:.8587}
#storm-poster .storm-art,#storm-poster .storm-art-preview{position:absolute;width:319.057%;height:auto;left:81.9057%;top:50.6849%;transform:translate(-50%,-50%);max-width:none}
.storm-opening .hero-copy{width:44%;max-width:740px;bottom:15%}
.storm-opening .hero-copy h1{font-size:clamp(64px,7.15vw,140px)}
.storm-opening .hero-intro{display:flex;align-items:center;gap:clamp(16px,2.3vw,36px);max-width:none}
.storm-opening .hero-intro p{flex:none}
.storm-opening #hero-enter{position:static;flex:none;transform:none;width:48px;height:48px;align-self:center}
.motion-word{display:inline-block;background:linear-gradient(110deg,#eae8e5 16%,#b2bcd7 37%,#fff 46%,#eae8e5 54%,#eae8e5 80%);background-size:270% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:motion-shimmer 7.8s ease-in-out infinite}
@keyframes motion-shimmer{0%,15%{background-position:100% 50%;transform:translateY(0)}48%{transform:translateY(-.025em)}75%,100%{background-position:0 50%;transform:translateY(0)}}
.scene-tilt{position:absolute;z-index:3;right:var(--gutter);bottom:24px;border:0;border-bottom:1px solid #68708355;background:none;color:#a7adbd;min-height:44px;font:400 10px/1.4 var(--sans);cursor:pointer}
#storm-canvas.storm-exit{position:fixed;top:var(--exit-top,0);left:0;z-index:8;opacity:1;pointer-events:none;transition:none;width:var(--exit-width);height:var(--exit-height)}
[data-scene='live'] #storm-poster{visibility:hidden;transition:visibility 0s .65s}
@media(max-aspect-ratio:5/4){.storm-opening .hero-copy{width:59%;bottom:12%}.storm-opening .hero-copy h1{font-size:clamp(62px,8.7vw,114px)}}
@media(max-aspect-ratio:4/5){
 #storm-poster .storm-horn{top:13%;height:57%}
 .storm-opening .hero-copy{width:82%;bottom:100px}
 .storm-opening .hero-copy h1{font-size:clamp(46px,11.7vw,82px)}
 .storm-opening .hero-intro{gap:12px;margin-top:20px}
 .storm-opening .hero-intro p{font-size:11px}
 .storm-opening #hero-enter{width:44px;height:44px}
}
@media(max-height:519px) and (min-aspect-ratio:4/5){.storm-opening .hero-copy{width:44%;bottom:19%}.storm-opening .hero-copy h1{font-size:clamp(36px,5.7vw,65px)}.storm-opening .hero-intro{gap:10px}.scene-tilt{bottom:10px}}
@media(max-aspect-ratio:4/5) and (max-height:760px){#storm-poster .storm-horn{top:12%;height:48%}.storm-opening .hero-copy{bottom:85px}.storm-opening .hero-copy h1{font-size:clamp(43px,11.7vw,70px)}}
@media(prefers-reduced-motion:reduce){.motion-word{animation:none;background:none;color:#eae8e5;transform:none}}
.storm-opening #hero .hero-intro{position:static;display:flex;align-items:center;width:auto;max-width:none}
.storm-opening #hero-enter{pointer-events:auto}
/* III — one perspective frame, including the complete native environment. */
#storm-poster .storm-art-fit{width:min(100cqw,calc(var(--storm-frame-aspect,.5224865)*100cqh));aspect-ratio:var(--storm-frame-aspect,.5224865)}
#storm-poster .storm-art,#storm-poster .storm-art-preview{width:var(--storm-art-width,498.9606%);left:var(--storm-art-left,38.39176%);top:var(--storm-art-top,31.93535%)}
.storm-opening .hero-copy,.storm-opening .hero-eyebrow,.storm-opening .site-header{transform:translateZ(0);backface-visibility:hidden}
/* Keep the typography above the traveling canvas during the held breakup. */
.storm-opening #hero[data-departing]{isolation:auto}
.storm-opening #hero[data-departing] .hero-copy,.storm-opening #hero[data-departing] .hero-eyebrow{z-index:9}
@media(min-aspect-ratio:4/5) and (max-aspect-ratio:5/4) and (min-height:520px){
 #storm-poster .storm-horn{height:51%}
 .storm-opening .hero-copy{bottom:8%}
}

@media(min-aspect-ratio:3/2) and (min-height:520px){
 #storm-poster .storm-horn{top:-18%;height:104%;width:72%;left:-1%}
}

@media(max-aspect-ratio:4/5){#storm-poster .storm-horn{top:15%;height:55%}}
@media(max-aspect-ratio:4/5) and (max-height:760px){#storm-poster .storm-horn{top:17%;height:43%}}

/* The suspended trumpet enters from beyond the top edge at every proportion.
   On portrait screens, reserve a separate lower area for the title and intro. */
@media(min-aspect-ratio:5/4) and (max-aspect-ratio:3/2) and (min-height:520px){
 #storm-poster .storm-horn{top:-18%;height:104%;width:72%;left:-4%}
}
@media(min-aspect-ratio:4/5) and (max-aspect-ratio:5/4) and (min-height:520px){
 #storm-poster .storm-horn{top:-20%;height:82%}
}
@media(max-aspect-ratio:4/5){
 .storm-opening #hero{min-height:540px}
 #storm-poster .storm-horn{top:-22%;height:calc(122% - clamp(220px,calc(40vw + 70px),360px));align-items:start}
 .storm-opening .hero-copy{bottom:clamp(24px,5svh,48px)}
 .storm-opening .site-header{text-shadow:0 1px 10px #000,0 1px 3px #000}
}
@media(max-height:519px) and (min-aspect-ratio:4/5){
 #storm-poster .storm-horn{top:-30%;height:120%;width:58%;left:-9%}
}