*{box-sizing:border-box}
html{background:#09121e}
body{margin:0;color:#fff2d9;font-family:DogeSans,system-ui,sans-serif}
button{touch-action:manipulation}
.picture-house{--screen-rgb:174 190 204;position:relative;min-height:680px;height:100svh;overflow:hidden;isolation:isolate}
.theatre-art{position:absolute;inset:0;z-index:-5}
.theatre{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.theatre-shade{position:absolute;inset:0;z-index:-4;background:linear-gradient(#07121c77,transparent 35%,transparent 75%,#030a1055);pointer-events:none}
.house-dimmer{position:absolute;inset:0;z-index:-3;background:#020815;opacity:0;transition:opacity 2.4s ease;pointer-events:none}
.picture-house[data-projection=playing] .house-dimmer{opacity:.3}
.practical-lights{position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:.85;transition:opacity 2.8s ease}
.house-lamp{position:absolute;border-radius:50%;background:radial-gradient(ellipse,#ffe0a570 0%,#ffbb4d28 27%,#ee95100c 47%,transparent 70%);animation:lamp-warmth var(--lamp-time,16s) ease-in-out infinite alternate;animation-delay:var(--lamp-delay,0s);animation-play-state:paused;transform:translate(-50%,-50%)}
.house-lamp.aisle-light{background:radial-gradient(ellipse,#ffcc7150,#ffb14316 40%,transparent 72%)}
.picture-house[data-room-motion=alive] .house-lamp{animation-play-state:running}
.picture-house[data-projection=playing] .practical-lights{opacity:.28}
@keyframes lamp-warmth{from{opacity:.48}to{opacity:.78}}
.screen-spill{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;background:radial-gradient(ellipse 75% 52% at 50% 86%,rgb(var(--screen-rgb) / .25),rgb(var(--screen-rgb) / .06) 62%,transparent 100%);mix-blend-mode:screen;transition:opacity 3s ease}
.picture-house[data-projection=playing] .screen-spill{opacity:1}
.projection-dust{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 3s ease}
.projection-dust i{position:absolute;width:2px;height:2px;border-radius:50%;background:#f5ecd5;box-shadow:0 0 4px #f5ecd566;animation:cinema-drift var(--drift-time) linear infinite;animation-play-state:paused}
.picture-house[data-projection=playing] .projection-dust{opacity:.28}
.picture-house[data-projection=playing] .projection-dust i{animation-play-state:running}
@keyframes cinema-drift{0%{transform:translate(0,12px);opacity:0}20%{opacity:.65}75%{opacity:.4}100%{transform:translate(17px,-36px);opacity:0}}
.picture-stage{position:absolute;top:clamp(96px,12svh,124px);left:50%;transform:translateX(-50%);width:min(64vw,calc(41svh * 16 / 9),960px)}
.house-label{text-align:center;font:700 10px/1.3 DogeSans,sans-serif;letter-spacing:2.5px;margin:0 0 14px;color:#dac39b;text-shadow:0 2px 6px #000}
/* A dark masking frame and a recessed projection surface, rather than a card. */
.screen{position:relative;aspect-ratio:16/9;background:#050b12;border:8px solid #090e15;border-top-width:10px;border-bottom-width:12px;border-radius:1px;box-shadow:0 -1px 0 #ad9c705c,1px 0 0 #5e5c4d,0 2px 0 #020509,0 10px 22px #000b,0 0 80px rgb(var(--screen-rgb) / .13);overflow:hidden;isolation:isolate;transition:box-shadow 2.8s ease}
.screen:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 28px #0002,inset 0 0 2px #000b;pointer-events:none;z-index:2}
.screen video{display:block;width:100%;height:100%;object-fit:contain;background:#03070d}
.screen-overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:0;background:#02071116;pointer-events:none}
/* A single familiar play control; the film title lives below the screen. */
.play-film{pointer-events:auto;display:grid;place-items:center;width:66px;height:66px;padding:0;background:none;color:#fff8eb;border:0;border-radius:50%;cursor:pointer}
.play-film svg{display:block;width:64px;height:64px;padding:21px 18px 21px 23px;border:1px solid #fff3d9b0;border-radius:50%;background:#071421cc;box-shadow:0 3px 22px #0005;transition:background .2s,transform .2s}
#play-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.play-film:hover svg{background:#14283deb;transform:scale(1.06);border-color:#ffdb91}
/* A quiet, attached cinema fascia keeps type off the busy audience artwork. */
.film-ticket{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:18px 22px 20px;color:#f4e8cf;background:#091522f2;border:1px solid #c3a46e35;border-top:0;box-shadow:0 8px 22px #0005;text-shadow:none}
.film-ticket h1{font:400 27px/1.2 Caprasimo,Georgia,serif;letter-spacing:-.5px;margin:0;text-wrap:balance}
.film-details{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-size:12px;line-height:1.5;color:#c1c8cc;margin:9px 0 0}
#film-runtime{white-space:nowrap;font-variant-numeric:tabular-nums}
.programme-button{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #bc9a656b;border-radius:3px;background:#162331;color:#f1dfbd;font:700 12px DogeSans,sans-serif;min-height:46px;padding:11px 14px;cursor:pointer;box-shadow:none;white-space:nowrap;transition:background .2s,border-color .2s}
.programme-button svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.25;fill:none}
.programme-button:hover{background:#243647;border-color:#d9b97d}
.seat-note{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));right:30px;color:#e4dbca;font-size:11px;text-shadow:0 2px 6px #000;padding:5px 0}
.film-loading{position:absolute;left:50%;top:16px;z-index:5;transform:translateX(-50%);padding:8px 13px;border:1px solid #bdad8540;background:#08121ce6;color:#fff0d0;font:12px DogeSans,sans-serif;pointer-events:none;white-space:nowrap}
.screen-message{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:radial-gradient(ellipse at 50% 75%,#1d2c37,#09121e 80%)}
.screen-message h2{font:clamp(30px,4.5vw,54px)/1.05 Caprasimo,Georgia,serif;letter-spacing:-1px;margin:5px 0 24px;color:#f6e9cc}
.screen-message p{font-size:14px;line-height:1.5;margin:0 0 20px;max-width:330px}
.screen-message .end-credit{font-size:9px;letter-spacing:2.5px;color:#bda77e;margin:0 0 12px}
.screen-message .message-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.screen-message button{border:1px solid #ccb17b;border-radius:2px;background:#e6c98f;color:#14202a;font:700 12px DogeSans,sans-serif;min-height:44px;padding:10px 18px;cursor:pointer}
.screen-message button+button{background:transparent;color:#f1dfbd;border-color:#9f8c6659}
.screen [hidden],.programme [hidden]{display:none!important}
.picture-house :focus-visible,.programme :focus-visible{outline:2px solid #f1c875;outline-offset:5px}
.cinema-noscript{position:relative;background:#fff5df;color:#28372e;padding:80px 30px;z-index:2}
.cinema-noscript a{color:inherit}
@media(max-width:700px) and (orientation:portrait){
 .picture-house{min-height:620px}
 .picture-stage{top:clamp(117px,15svh,140px);width:calc(100% - 32px)}
 .theatre{object-position:50% 100%}
 .house-label{font-size:9px;letter-spacing:1.9px;margin-bottom:13px}
 .screen{border:5px solid #090e15;border-bottom-width:8px}
 .film-ticket{grid-template-columns:minmax(0,1fr) auto;padding:16px;gap:10px 12px}
 .film-ticket>div{display:contents}
 .film-ticket h1{grid-column:1/-1;font-size:23px;line-height:1.25;text-wrap:initial}
 .film-details{grid-column:1;grid-row:2;font-size:11px;gap:5px;margin:0;max-width:none;align-self:center}
 .programme-button{grid-column:2;grid-row:2;align-self:center}
 .programme-button{font-size:11px;padding:9px 11px;gap:7px}
 .programme-button svg{width:15px;height:15px}
 .play-film{width:54px;height:54px}
 .play-film svg{width:52px;height:52px;padding:17px 14px 17px 19px}
 .seat-note{font-size:10px;right:20px;bottom:max(18px,env(safe-area-inset-bottom))}
}
@media(max-width:700px){
 .screen-message{padding:12px}.screen-message h2{font-size:32px;margin:0 0 17px}
 .screen-message .end-credit{font-size:8px;letter-spacing:1.8px;margin-bottom:10px}
 .screen-message p{font-size:12px}.screen-message button{font-size:11px;padding:9px 12px}
 .screen-message .message-actions{gap:8px}.film-loading{font-size:10px;top:8px;padding:5px 9px}
}
@media(max-height:500px) and (min-aspect-ratio:1/1){
 .picture-house{min-height:100svh}
 .theatre{object-position:50% 50%}
 .picture-stage{top:67px;width:min(52vw,calc(43svh * 16 / 9))}
 .house-label{font-size:8px;letter-spacing:1.7px;margin-bottom:7px}
 .screen{border-width:4px;border-bottom-width:6px}
 .film-ticket{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px;gap:7px 8px}
 .film-ticket>div{display:contents}
 .film-ticket h1{grid-column:1/-1;font-size:18px;white-space:normal}
 .film-details{grid-column:1;grid-row:2;font-size:10px;gap:5px;max-width:none;margin:0}
 .programme-button{grid-column:2;grid-row:2}
 .programme-button{font-size:10px;padding:7px 10px;min-height:40px;gap:6px}.programme-button svg{width:14px;height:14px}
 .seat-note{display:none}
 .play-film{width:48px;height:48px}.play-film svg{width:46px;height:46px;padding:15px 12px 15px 17px}
 .screen-message h2{font-size:28px;margin-bottom:13px}.screen-message p{font-size:12px;margin-bottom:10px}
 .screen-message .end-credit{font-size:7px;margin-bottom:7px}.screen-message button{font-size:10px;padding:7px 11px;min-height:36px}
}
@media(max-width:700px) and (max-height:700px) and (orientation:portrait){
 .picture-stage{top:90px}
 .film-ticket{display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px 16px}
 .film-ticket>div{display:contents}
 .film-ticket h1{grid-column:1/-1;font-size:22px;margin:0}
 .film-details{grid-column:1;grid-row:2;margin:0;font-size:10px;gap:5px;align-self:center}
 .programme-button{grid-column:2;grid-row:2;align-self:center}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .screen-spill,.projection-dust{display:none}
 .practical-lights{opacity:.55}
}

/* Revision 102: the projection stays on the back wall, clear of the audience. */
.picture-house{min-height:0;height:100svh}
.theatre{object-position:50% 50%}
.theatre-shade{background:linear-gradient(#07121c55,transparent 32%,transparent 70%,#020710dc)}
.picture-stage{top:clamp(82px,10svh,112px);width:min(68vw,calc(45svh * 16 / 9),1060px)}
.house-label{margin-bottom:11px}
.screen{box-shadow:0 -1px 0 #ad9c705c,1px 0 0 #5e5c4d,0 2px 0 #020509,0 7px 20px #0008,0 0 85px rgb(var(--screen-rgb) / .16)}
.film-ticket{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(900px,calc(100% - 64px));padding:12px 0 0;background:none;border:0;box-shadow:none;border-top:1px solid #e5d3ac30;gap:22px;text-shadow:0 2px 8px #000}
.film-ticket h1{font-size:26px}
.film-details{font-size:12px;margin-top:7px;color:#d1d0c6}
.programme-button{background:#0c1823b8;border-color:#d1b8826b;font-size:12px;min-height:48px;padding:12px 18px}
.seat-note{display:none}
@media(max-width:700px) and (orientation:portrait){
 .picture-house{min-height:560px}
 .theatre{object-position:50% 100%}
 .picture-stage{top:92px;width:calc(100% - 28px)}
 .house-label{font-size:8px;letter-spacing:1.6px;margin-bottom:10px}
 .film-ticket{width:calc(100% - 40px);bottom:max(24px,env(safe-area-inset-bottom));padding-top:14px;grid-template-columns:minmax(0,1fr) auto;gap:12px 14px}
 .film-ticket>div{display:block;min-width:0}
 .film-ticket h1{font-size:23px;line-height:1.18;text-wrap:balance}
 .film-details{font-size:10px;gap:4px 7px;margin:8px 0 0;line-height:1.4}
 .film-ticket .programme-button{grid-column:2;grid-row:1;min-height:48px;font-size:11px;padding:10px 12px;align-self:center}
}
@media(max-height:500px) and (min-aspect-ratio:1/1){
 .picture-stage{top:57px;width:min(56vw,calc(45svh * 16 / 9))}
 .house-label{font-size:7px;margin-bottom:7px}
 .film-ticket{bottom:12px;width:calc(100% - 48px);padding-top:7px;gap:20px}
 .film-ticket>div{display:block}
 .film-ticket h1{font-size:20px}
 .film-details{font-size:10px;margin-top:4px}
 .film-ticket .programme-button{grid-column:2;grid-row:1;min-height:40px;padding:8px 12px}
}

/* Revision 103: a projection on the screen painted into the theater. */
.theatre-wings{position:absolute;inset:-40px;z-index:-6;background:#17120e url(assets/cinema-open-wide-103.webp) center/cover no-repeat;filter:blur(32px) brightness(.6);pointer-events:none}
.theatre-art{pointer-events:none}
/* One geometry for the first paint and the initialized room. These coordinates
   align the projection with the screen painted into each background. */
.picture-house{container-type:size;--cinema-screen-width:min(68cqw,80cqh,1060px);--cinema-screen-top:clamp(92px,13cqh,140px);--cinema-art-width:1536;--cinema-art-height:1024;--cinema-native-x:382;--cinema-native-y:146;--cinema-native-width:771;--cinema-native-height:403;--room-edge:22px}
.theatre{inset:auto;width:calc(var(--cinema-screen-width) * var(--cinema-art-width) / var(--cinema-native-width));height:calc(var(--cinema-screen-width) * var(--cinema-art-height) / var(--cinema-native-width));left:calc((100% - var(--cinema-screen-width)) / 2 - var(--cinema-screen-width) * var(--cinema-native-x) / var(--cinema-native-width));top:calc(var(--cinema-screen-top) - var(--cinema-screen-width) * var(--cinema-native-y) / var(--cinema-native-width));object-fit:fill;object-position:initial;mask-image:linear-gradient(90deg,transparent,#000 var(--room-edge),#000 calc(100% - var(--room-edge)),transparent)}
@media(max-width:700px) and (orientation:portrait){.picture-house{--cinema-screen-width:min(calc(100cqw - 28px),84cqw);--cinema-screen-top:108px;--cinema-art-width:1024;--cinema-art-height:1536;--cinema-native-x:165;--cinema-native-y:283;--cinema-native-width:697;--cinema-native-height:344;--room-edge:0px}}
@media(max-height:500px) and (orientation:landscape){.picture-house{--cinema-screen-width:min(56cqw,80cqh);--cinema-screen-top:57px}}
.picture-stage{left:calc((100% - var(--cinema-screen-width)) / 2);top:var(--cinema-screen-top);width:var(--cinema-screen-width);height:calc(var(--cinema-screen-width) * var(--cinema-native-height) / var(--cinema-native-width));transform:none;visibility:visible}
.picture-house[data-room-ready=true] .picture-stage{visibility:visible}
.house-label{display:none}
.screen{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:#111414;transition:none}
.screen video{background:#111414;filter:brightness(.98) saturate(.97);transition:opacity .65s ease}
.screen:after{inset:0;z-index:2;box-shadow:inset 0 0 10px #261b0f66;opacity:.9;background:linear-gradient(115deg,#ffe6ae0c,transparent 40%,#fff0cb08);mix-blend-mode:soft-light}
.screen-overlay{background:transparent}
.screen[data-state=starting] video{opacity:.35}
.screen[data-state=playing] video{animation:projector-settle .75s ease both}
@keyframes projector-settle{from{opacity:.65}to{opacity:1}}
.practical-lights{opacity:.72}
.house-lamp{background:radial-gradient(ellipse,#ffe6b875 0%,#ffbd5c24 25%,#ee95100b 47%,transparent 70%);animation-name:lamp-current}
.house-lamp[hidden]{display:none}
@keyframes lamp-current{0%,100%{opacity:.43}45%{opacity:.58}70%{opacity:.48}}
.picture-house[data-projection=playing] .practical-lights{opacity:.37}
.picture-house[data-projection=playing] .house-dimmer{opacity:.16}
.screen-spill{background:radial-gradient(ellipse 62% 42% at 50% 83%,rgb(var(--screen-rgb) / .15),rgb(var(--screen-rgb) / .04) 55%,transparent 100%);opacity:.08}
.picture-house[data-projection=playing] .screen-spill{opacity:.6}
.projection-dust i{width:1px;height:1px;box-shadow:0 0 2px #f5ecd544}
.picture-house[data-projection=playing] .projection-dust{opacity:.17}
@media(max-width:700px) and (orientation:portrait){.theatre-wings{background-image:url(assets/cinema-open-portrait-103.webp)}}
@media(prefers-reduced-motion:reduce){.picture-stage,.screen video{transition:none}.screen[data-state=playing] video{animation:none}.practical-lights{opacity:.6}.house-lamp{opacity:.5}}

@property --projection-red{syntax:'<number>';inherits:true;initial-value:174}
@property --projection-green{syntax:'<number>';inherits:true;initial-value:190}
@property --projection-blue{syntax:'<number>';inherits:true;initial-value:204}
.picture-house{transition:--projection-red 1.8s ease,--projection-green 1.8s ease,--projection-blue 1.8s ease}
.screen-spill{background:radial-gradient(ellipse 62% 42% at 50% 83%,rgb(var(--projection-red,174) var(--projection-green,190) var(--projection-blue,204) / .15),rgb(var(--projection-red,174) var(--projection-green,190) var(--projection-blue,204) / .04) 55%,transparent 100%)}

@media(max-width:700px) and (orientation:portrait){.picture-house .screen{clip-path:polygon(1.7% 0,98.3% 0,100% 100%,0 100%)}.picture-house .theatre{mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}}

@media(max-height:500px) and (min-aspect-ratio:1/1){.film-ticket .programme-button{min-height:44px}}

@media(max-height:500px) and (min-aspect-ratio:1/1){.film-ticket{width:min(900px,calc(100% - max(24px,env(safe-area-inset-left)) - max(24px,env(safe-area-inset-right))))}}


/* Controls become available after their event handlers and programme are ready. */
.play-film:disabled,.programme-button:disabled{cursor:wait;opacity:.65}

/* The wide theatre fills the viewport from its first paint. Calibrate each axis
   against the painted screen; the movie itself keeps its original aspect ratio. */
@media(orientation:landscape){
 .picture-house{--cinema-full-height:max(100cqh,min(56cqw,112cqh));--room-edge:0px}
 .theatre{left:0;top:0;width:100%;height:var(--cinema-full-height);mask-image:none}
 .picture-stage{left:calc(100% * 382 / 1536);top:calc(var(--cinema-full-height) * 146 / 1024);width:calc(100% * 771 / 1536);height:calc(var(--cinema-full-height) * 403 / 1024)}
}