/* One motion rhythm and content-driven geometry, from phones to laptops. */
:root{--motion-land:cubic-bezier(.16,1,.3,1);--motion-arrive:560ms}
html{scroll-padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.hero{display:flex;flex-direction:column;gap:28px;height:auto;min-height:max(750px,100svh);max-height:none;padding-top:clamp(112px,15svh,150px);padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.hero-meta,.hero-bottom{flex-shrink:0}
.hero-copy{position:relative;inset:auto;margin-block:auto;max-width:75%}
.hero-bottom{position:relative;inset:auto;margin-top:0}
.opening-aperture{display:none!important}
.hero-copy h1{animation:none!important}
.world-stage-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.world-stage-nav button{min-width:0;width:100%;gap:12px;justify-content:space-between}
.world-panel{scroll-margin-top:108px}
.world-portrait{animation:none!important}
.world-portrait video{aspect-ratio:auto;min-width:0;max-width:100%}
.chapter-rail a.active::after{width:100%;transform:scaleX(var(--progress,0));transform-origin:left}
:where(video,button,a,input,textarea,select){scroll-margin-block:110px 72px}
@media(prefers-reduced-motion:no-preference){
 .title-mask>span{animation:title-unmask 800ms 100ms var(--motion-land) both}
 .title-mask:nth-child(2)>span{animation-delay:180ms}
 .hero-copy>.eyebrow{animation-delay:80ms}
 .hero-description{animation-delay:240ms}
 .hero-actions{animation-delay:320ms}
 .hero-bottom{animation:serye-settle 600ms 400ms ease-out both}
}
@media(max-width:1050px){.hero-copy{max-width:90%}.world-stage-nav button{font-size:19px;padding:16px;gap:8px}}
@media(max-width:700px){
 .hero{min-height:100svh;gap:24px;padding:108px 6% calc(72px + env(safe-area-inset-bottom))}
 .hero-copy{position:relative;inset:auto;max-width:none;margin:clamp(56px,12svh,110px) 0 18px}
 .hero-copy h1{font-size:clamp(40px,10.3vw,65px)}
 .hero-bottom{position:relative;inset:auto;margin-top:auto;gap:18px;padding-top:18px}
 .hero-film-caption{min-width:0;gap:12px;align-items:center}
 .hero-film-caption>span{max-width:175px;font-size:8px;line-height:1.6}
 .hero-bottom .motion-control{flex-shrink:0}
 .world-stage-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .world-stage-nav button{font-size:17px;min-height:58px;padding:12px;gap:6px}
 .world-stage-nav button>span{letter-spacing:1px;font-size:8px;flex-shrink:0}
 .world-portrait{order:-1;margin:24px 20px 0}
 .world-narrative{padding:28px 20px 30px}
 .world-narrative h3{font-size:clamp(34px,10.5vw,46px);letter-spacing:-1.3px}
 .world-question{margin:24px 0;padding-left:16px}
 .world-question p{font-size:20px}
 .world-panel{scroll-margin-top:92px}
 .genesis-stage-content{padding-top:40px}
 .genesis-title-block{padding-top:clamp(100px,24svh,220px)}
 .participation-card{padding:26px 22px}
 .chapter-rail a{min-width:0}
 .story-dialog{scrollbar-gutter:stable}
 .form-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .form-row>*{min-width:0}
}
@media(max-width:360px){.form-row{grid-template-columns:minmax(0,1fr)}.hero-film-caption>span{max-width:145px}.hero-actions .button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-copy>*,.title-mask>span,.hero-bottom,.world-portrait{animation:none!important;transition:none!important}.hero-copy{transform:none}}