/* Reference artwork is the source of the scene, rather than a CSS approximation. */
.header { left:24%; right:24%; height:80px; padding:0; }
.header>.wordmark { position:absolute; left:50%; transform:translateX(-50%); font:400 25px/1 var(--serif); letter-spacing:.18em; z-index:1; }
.header .desktop-nav { display:grid; grid-template-columns:1fr 1fr 1.5fr 1fr 1fr; width:100%; gap:0!important; font:400 17px/1.4 var(--serif); }
.header .desktop-nav a:nth-child(3) { grid-column:4; }
.header .desktop-nav a { text-align:center; }
.header .nav-cta { display:none; }
.header.scrolled { left:15%; right:15%; padding:0 30px; height:65px; }
.header.scrolled .wordmark { font-size:25px; }
/* Desktop stage fills the viewport; the mobile scene keeps its compact override below. */
.hero.theatre .stage-shell { height:100vh; height:100dvh; max-height:none; background:#c8d9e9 url('/assets/cinema-open.png') center/100% 100% no-repeat; }
.curtain-understudy { background:#ecc0d1 url('/assets/cinema-closed.png') center/100% 100% no-repeat; }
.stage-spotlight { display:none; }
.theatre .hero-copy { top:24%; left:0; width:100%; }
.theatre h1 { width:45%; margin:0 auto; line-height:0; transition:width 3.3s cubic-bezier(.45,0,.2,1); }
.calligraphic-title { display:block; width:100%; height:auto; }
.theatre:is([data-state="opening"],[data-state="open"]) .hero-copy { top:16%; }
.theatre .hero-copy { transition:top 3.3s cubic-bezier(.45,0,.2,1); }
.theatre:is([data-state="opening"],[data-state="open"]) h1 { width:32%; }
.stage-caption-slot { width:59%; max-width:1040px; margin:22px auto 0; }
.stage-caption-lead { font:400 clamp(29px,2.8vw,48px)/1.12 Georgia,'Times New Roman',serif; letter-spacing:-.055em; }
.stage-caption-body { font:400 clamp(18px,1.6vw,27px)/1.35 Georgia,'Times New Roman',serif; margin:12px auto 0; max-width:900px; letter-spacing:-.025em; }
.cinema-crown { bottom:13%; width:25px; height:22px; left:calc(50% - 12.5px); color:#820b20; }
.cloth-host { transition:opacity .45s ease; }
.theatre[data-state="open"] .cloth-host { opacity:0; }
@media(min-width:1700px) { .stage-caption-slot { margin-top:30px; } }
@media(max-width:1000px) and (min-width:761px) {
 .header { left:17%; right:17%; }
 .theatre h1 { width:57%; }
 .theatre:is([data-state="opening"],[data-state="open"]) h1 { width:43%; }
 .stage-caption-slot { width:61%; margin-top:35px; }
 .stage-caption-lead { font-size:29px; }
}
@media(max-width:760px) {
 .header,.header.scrolled { left:22px; right:22px; height:72px; }
 .header .desktop-nav { display:none; }
 .header>.wordmark,.header.scrolled .wordmark { font-size:23px; }
 .header .menu-toggle { margin-left:auto; font-size:12px; }
 .hero.theatre .stage-shell {
   --mobile-scene-height:clamp(250px,74vw,350px);
   height:auto; min-height:0; max-height:none;
   background:#c8d9e9;
 }
 .stage-shell::before {
   content:''; position:absolute; inset:0 0 auto;
   height:var(--mobile-scene-height); z-index:0;
   background:url('/assets/cinema-open.png') center/160% 100% no-repeat;
 }
 .stage-shell::after {
   content:''; position:absolute; left:0; right:0;
   top:calc(var(--mobile-scene-height) - 28px); height:29px; z-index:3;
   background:linear-gradient(transparent,#c8d9e9); pointer-events:none;
 }
 .cloth-host,.curtain-understudy { height:var(--mobile-scene-height); bottom:auto; }
 .curtain-understudy { background-size:100% 100%; }
 .theatre .hero-copy,
 .theatre:is([data-state="opening"],[data-state="open"]) .hero-copy {
   position:relative; top:auto; left:auto; width:100%;
   display:grid; grid-template-rows:calc(var(--mobile-scene-height) - 82px) auto;
   padding:82px 22px 64px; transition:none;
 }
 .theatre h1 { width:100%; max-width:390px; align-self:start; }
 .theatre:is([data-state="opening"],[data-state="open"]) h1 { width:94%; max-width:360px; }
 .stage-caption-slot { width:100%; max-width:440px; margin:0 auto; }
 .stage-caption-lead { font-size:clamp(25px,6.6vw,29px); line-height:1.12; text-wrap:balance; }
 .stage-caption-body { font-size:17px; line-height:1.4; margin-top:13px; text-wrap:pretty; }
 .cinema-crown { bottom:23px; width:23px; height:20px; left:calc(50% - 11.5px); }
 .header .menu-toggle { min-height:44px; padding-right:0; }
}