/* Screen-sized compositions, never fixed-height boxes around longer content. */
:root{--screen-height:100svh}
@supports(height:100dvh){:root{--screen-height:100dvh}}
.hero{height:var(--screen-height);min-height:440px}
.curved-gallery{min-height:var(--screen-height);padding-bottom:24px}
.curved-gallery .room{height:clamp(300px,calc(var(--screen-height) - 410px),540px)}
.visit-poster{min-height:var(--screen-height);display:flex;align-items:center;padding-block:clamp(28px,4.5svh,64px)}
.visit-poster .poster-inner{width:100%}
.hello-section{min-height:calc(var(--screen-height) - 30px);display:flex;align-items:center;padding-top:clamp(28px,4.5svh,64px)}
.hello-section .hello-inner{width:100%}
.about-section{min-height:var(--screen-height);display:grid;align-items:center;padding-bottom:clamp(36px,6svh,80px)}
.story-divider+.about-section{padding-top:clamp(36px,6svh,80px)}
.about-section .play-composition{width:100%;padding-top:0}
@media(min-width:651px){
 .visit-poster .poster-stage{min-height:0}
 .visit-poster .poster-title>strong{font-size:clamp(70px,min(12.3vw,19svh),184px)}
 .hello-section h2{font-size:clamp(60px,min(11vw,20svh),168px)}
 .hello-section .hello-heading{padding-top:clamp(30px,6svh,52px);padding-bottom:clamp(26px,5svh,40px)}
 .hello-section .hello-grid{padding-top:clamp(28px,5svh,40px);padding-bottom:clamp(32px,6svh,48px)}
}
@media(max-width:850px) and (min-width:651px){
 .curved-gallery .room{height:clamp(250px,calc(var(--screen-height) - 450px),500px)}
}
@media(max-width:650px){
 .curved-gallery .room{height:clamp(170px,calc(var(--screen-height) - 490px),320px)}
 .curved-gallery{padding-bottom:24px}
 .hello-section{min-height:calc(var(--screen-height) - 24px);padding-top:28px}
 .visit-poster{padding-block:30px}
 .about-section{padding-bottom:40px}
 .story-divider+.about-section{padding-top:36px}
}
@media(max-width:600px){
 .about-section .play-print{max-width:330px;width:min(100%,clamp(220px,36svh,330px))}
 .about-section .play-composition{gap:32px}
}
/* Short landscape screens use natural document flow, with all controls reachable. */
@media(max-height:600px) and (min-width:651px){
 .visit-poster,.hello-section,.about-section{min-height:0}
 .visit-poster{padding-block:28px}
 .visit-poster .poster-lamp-pair{max-width:640px;justify-self:center}
 .visit-poster .poster-title{margin-top:24px}
 .hello-section .hello-heading{padding-top:28px;padding-bottom:26px}
 .story-divider+.about-section{padding-top:36px}
 .about-section{padding-bottom:36px}
 .about-section .play-print{max-width:340px}
}