/* 2.7: the accepted composition, reflowed without clipping or device-specific widths. */
:root{--gutter:clamp(18px,3.9vw,100px)}
html{overflow-x:clip;scroll-padding-block:20px}
body{min-width:0;overflow-wrap:break-word}
.experience{height:auto;min-height:100svh;overflow:clip}
.header{margin:0 var(--gutter);min-height:88px;height:auto;flex-basis:auto;flex-wrap:wrap;padding-block:10px;gap:clamp(10px,2vw,40px)}
.brand{min-width:0;max-width:60%}.brand svg.school-logo{width:clamp(164px,15vw,320px);max-width:100%;height:auto;max-height:none}
.header nav{margin-left:0;gap:clamp(18px,2.2vw,50px)}
.header nav button{font-size:clamp(14px,1vw,22px);min-height:48px;padding:12px 3px}
.login{min-width:96px;min-height:48px;font-size:clamp(14px,1vw,22px);padding:10px 22px;flex-shrink:0}
main{min-width:0;min-height:0;flex:1}
.hero{height:auto;min-height:calc(100svh - 136px);display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);grid-template-areas:'copy scene' 'controls controls';align-items:center;gap:16px clamp(8px,1.2vw,36px);padding:clamp(24px,3vh,60px) var(--gutter) 18px;max-width:3000px;margin-inline:auto}
.hero-copy{grid-area:copy;width:auto;padding:0;min-width:0;align-self:center}
.hero-copy h1{font-size:clamp(44px,5.3vw,150px);line-height:1.08;letter-spacing:-.055em;white-space:normal;text-wrap:balance}
.headline-line{white-space:normal}.hero-copy .hero-eyebrow{font-size:clamp(9px,.7vw,17px)!important;letter-spacing:.12em!important;flex-wrap:wrap;gap:8px}
.hero-copy>p:not(.hero-eyebrow){font-size:clamp(18px,1.6vw,38px);line-height:1.55;margin:24px 0 32px}
.explore{min-height:56px;font-size:clamp(16px,1.15vw,28px);max-width:100%;padding:10px clamp(20px,1.8vw,44px);gap:clamp(16px,2vw,42px);white-space:normal}
.scene{grid-area:scene;position:relative;right:auto;left:auto;bottom:auto;width:100%;height:auto;aspect-ratio:3/2;margin:clamp(36px,3vw,110px) 0 0;min-width:0;animation:none}
.scene-inner{width:100%;height:100%}.planet{top:-11%;width:47%;height:49%}
.island,#scene-fx{width:100%;height:100%}
.scene-controls{grid-area:controls;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0;padding-top:8px}
.world-control,.motion-controls{position:static;right:auto;left:auto;bottom:auto;min-width:0}
.world-control{min-height:48px;font-size:clamp(12px,.85vw,19px);max-width:100%;padding:0 4px 0 14px;gap:8px}
#world-name{min-width:0;white-space:normal;line-height:1.4}
.world-control button{min-width:48px;min-height:48px;width:48px;height:48px;flex-shrink:0}
.motion-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.motion-controls .motion-toggle,.story-replay{min-height:48px;width:auto;padding:0 14px;font-size:clamp(12px,.85vw,19px);gap:8px;justify-content:center}
.story-replay>span,.motion-toggle>span{display:inline}
.story-replay>svg{width:27px;height:27px}.motion-toggle svg{width:19px;height:19px}
.quality-control{display:flex;align-items:center;gap:8px;color:#e6efff;font-size:clamp(12px,.85vw,19px)}
.quality-control select{font:inherit;color:#e6efff;background:#092360;border:1px solid #d1e0ff55;border-radius:24px;min-height:48px;padding:8px 12px;max-width:100%;cursor:pointer}
.quality-control select:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.portal-hit{min-width:48px;min-height:48px}.portal-hint{pointer-events:none}
.footer{min-height:48px;padding:12px var(--gutter);flex-basis:auto;flex-shrink:0}.footer p{font-size:clamp(9px,.7vw,17px);letter-spacing:.15em;word-spacing:3px;text-align:center}
#sky-fx{contain:strict}.clouds{max-width:none;pointer-events:none}
dialog{width:min(580px,calc(100% - 24px));max-height:85vh;max-height:calc(100dvh - 24px);overflow:auto;padding:54px clamp(24px,4vw,48px) 28px;margin:auto}
dialog h2{font-size:clamp(25px,3vw,38px);overflow-wrap:break-word}
.dialog-links button,.dialog-action,.dialog-close{min-height:48px}.dialog-close{min-width:48px}
.planet canvas[hidden]{display:none!important}
/* Shadow belongs to the crisp island; do not re-shadow the transparent FX layer. */
#scene-fx{filter:none}
.hero[data-quality=light] .clouds-front{display:none}
.hero[data-quality=light] .scene-inner,.hero[data-quality=light] .planet{transform:none;transition:none}
.hero[data-quality=light] .world-control,.hero[data-quality=light] .story-replay,.hero[data-quality=light] .motion-toggle{backdrop-filter:none}
/* In the two-column layout, keep bright decorative islands out of the copy.
   Fade only the separate cloud images; the central interactive scene is untouched. */
@media(min-width:1101px) and (orientation:landscape){
 .hero>.clouds-back{mask-image:linear-gradient(90deg,transparent 0 50%,#000 62% 92%,transparent 100%),linear-gradient(transparent,#000 16%,#000 78%,transparent);mask-composite:intersect}
 .hero>.clouds-front{mask-image:linear-gradient(90deg,transparent 0 50%,#000 62% 92%,transparent 100%),linear-gradient(transparent 40%,#000 68%,#000 80%,transparent);mask-composite:intersect}
}
@media(max-width:1100px),(orientation:portrait){
 .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:'copy' 'scene' 'controls';gap:18px;min-height:0;padding-top:30px}
 .hero-copy{width:100%;max-width:760px}.hero-copy h1{font-size:clamp(32px,8.8vw,96px)}
 .hero-copy>p:not(.hero-eyebrow){font-size:clamp(17px,2.9vw,28px);margin:20px 0 26px}
 .scene{width:100%;max-width:1400px;margin:clamp(38px,6vw,90px) auto 0}
 .scene-controls{padding-top:10px;justify-content:center}.world-control{margin-right:auto}.quality-control{margin-left:auto}
 .clouds-back{top:auto;bottom:6%;width:130%;left:-15%}
}
@media(max-width:720px){
 .header{min-height:76px;gap:8px}.header nav{display:none}.mobile-menu{display:grid;place-items:center;min-width:48px;min-height:48px;width:48px;height:48px;padding:12px;margin-left:auto}
 .mobile-menu svg{width:24px;height:24px}.brand{max-width:calc(100% - 150px)}.brand svg.school-logo{width:190px}
 .login{min-width:78px;padding:10px 14px}.hero-copy .hero-eyebrow{font-size:9px!important}
 .scene-controls{gap:10px}.world-control{margin:0;flex:1 1 100%;justify-content:center}.motion-controls{flex:1 1 auto}.quality-control{margin-left:0}.quality-control>span{display:none}
 .motion-controls .motion-toggle{min-width:48px;padding:0 12px}.motion-toggle>span{display:none}
 .story-replay{padding:0 12px}.story-replay>span{display:inline;font-size:11px}
 .quality-control select{padding-inline:8px;font-size:12px}
 .footer>span{display:none}.footer{gap:0}
}
@media(max-width:340px){
 .header{flex-wrap:wrap}.brand{max-width:100%;flex-basis:100%}.brand svg.school-logo{width:156px}.mobile-menu{margin-left:0}.login{margin-left:auto}
 .hero{padding-top:24px}.hero-copy h1{font-size:clamp(26px,10vw,34px)}.hero-copy .hero-eyebrow{letter-spacing:.04em!important;line-height:1.7!important}
 .explore{font-size:clamp(12px,4vw,14px);gap:6px;padding-inline:10px}.explore svg{width:24px;height:24px;flex:none}
 .motion-controls{flex-basis:100%}.quality-control{width:100%;justify-content:center}.quality-control>span{display:inline}
}
@media(pointer:coarse){
 .quality-control select{font-size:clamp(16px,.85vw,19px)}
 .header button,.explore,.story-replay,.motion-controls .motion-toggle,.world-control button,.quality-control select,.dialog-action,.dialog-close,.dialog-links button{min-height:54px}
 .portal-hit{min-width:54px;min-height:54px}.hero .scene-inner,.planet{transform:none!important;transition:none!important}.portal-hint{display:none}
}
@media(min-width:1920px){
 .header{min-height:112px}.hero{min-height:calc(100svh - 176px);padding-bottom:24px}
 .scene-controls{gap:20px}.world-control,.motion-controls .motion-toggle,.story-replay,.quality-control select{min-height:60px}
 .world-control button{min-width:60px;min-height:60px;width:60px;height:60px}.explore{min-height:72px}
 .footer{min-height:64px}
}
@media(prefers-reduced-motion:reduce){.scene-inner,.planet{transform:none!important;transition:none!important}}