/* Shared scroll duration adapted to responsive safe zones. */
.experience.motion-restored{height:175svh;min-height:1190px}
.experience.motion-restored>.hero{position:sticky;top:0}
.experience.motion-restored .landscape{will-change:transform}
.experience.motion-restored .copy,.experience.motion-restored .character-stage{will-change:transform}
.experience.motion-restored .character-note{opacity:0;will-change:transform,opacity}
.ending .ending-sticker{display:block;width:210px;height:210px;object-fit:contain;margin:36px auto 25px}
@media(max-width:760px){.experience.motion-restored{min-height:1295px}}
@media(prefers-reduced-motion:reduce){
 .experience.motion-restored{height:auto;min-height:0}
 .experience.motion-restored>.hero{position:relative}
 .experience.motion-restored .landscape,.experience.motion-restored .copy{transform:none!important;will-change:auto}
 .experience.motion-restored .copy{opacity:1!important}
 .experience.motion-restored .character-stage{transform:translateX(-50%)!important;will-change:auto}
 .experience.motion-restored .character-note{opacity:1!important;transform:none!important;will-change:auto}
}

/* Compact physical viewports: fit the scene itself, not only its scroll wrapper. */
@media(max-height:779px){
 .experience.motion-restored{height:auto;min-height:0}
 .experience>.hero{height:100svh;min-height:0;max-height:none;--actor-size:min(42svh,80vw,300px);--contact-line:88%}
 .experience.motion-restored>.hero{position:relative}
 .hero .landscape{background-size:cover;background-position:64% 60%}
 .hero header{top:18px;left:7%;right:7%}
 .hero .copy{left:8%;top:17%;max-width:84%;width:auto;padding:6px 0}
 .hero .eyebrow{font-size:8px;line-height:1.3;letter-spacing:1px;margin-bottom:12px}
 .hero h1{font-size:clamp(28px,5.5svh,42px);line-height:1.12;letter-spacing:-1.8px}
 .hero .intro{font-size:11px;line-height:1.5;margin-top:12px;margin-bottom:0}
 .hero .links{margin-top:12px;gap:18px;font-size:9px;line-height:1.4}
 .hero .links a{padding-bottom:5px}
 .hero .links b{margin-left:8px}
 .hero .character-stage{width:var(--actor-size);max-width:none;left:60%;top:calc(var(--contact-line) - var(--actor-size) * .8611111111)}
 .hero .character-note{display:none}
 .hero footer{display:none}
}
@media(max-height:779px) and (min-width:600px){
 .experience>.hero{--actor-size:min(58svh,38vw,400px);--contact-line:84%}
 .hero .copy{left:7%;top:22%;max-width:47%;width:47%}
 .hero h1{font-size:clamp(24px,min(7svh,4.8vw),52px)}
 .hero .intro{font-size:clamp(11px,2svh,14px)}
 .hero .character-stage{left:77%}
}
@media(max-height:499px) and (max-width:599px){
 .hero header{top:12px}
 .hero .brand{font-size:9px;letter-spacing:1px}
 .hero .brand span{font-size:8px;margin-top:4px}
 .hero .edition{font-size:7px;letter-spacing:.4px}
 .hero .edition b{font-size:14px;margin-left:6px}
 .hero .intro{display:none}
 .hero .eyebrow{margin-bottom:8px}
 .hero h1{font-size:28px}
 .hero .links{margin-top:8px}
}
@media(max-height:359px) and (max-width:599px){.hero .copy{top:16%}.hero h1{font-size:24px}}
@media(max-height:319px) and (max-width:599px){.hero h1{font-size:20px}.hero .eyebrow{display:none}}