@charset "UTF-8";

:root {
  color-scheme: dark;
  --paper: #e9e2ce;
  --ink: #eee5d0;
  --gold: #cfad76;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", Georgia, serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --header: 48px;
  --seats: clamp(40px, 9dvh, 90px);
  --controls: 40px;
  --gap: 12px;
  --stage-height: calc(100dvh - var(--header) - var(--seats) - var(--controls) - var(--gap) - 24px);
}

* { box-sizing: border-box; }
html { height: 100%; background: #140d0d; overflow: hidden; }
body { margin: 0; width: 100%; height: 100dvh; overflow: hidden; color: var(--ink); font: 16px/1.5 var(--sans); display: grid; grid-template-rows: var(--header) minmax(0, 1fr) var(--seats); }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; border-radius: 0; }
a { color: inherit; text-underline-offset: 5px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button:disabled { cursor: default; opacity: .2; }
[hidden] { display: none !important; }
::selection { background: #bd714a; color: #fff7e5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 10px 16px; color: #17120e; background: var(--paper); z-index: 100; }
.skip-link:focus { top: 10px; }

/* The room is independent of every screening. */
.room { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, #3b2721, #1c1111 50%, #0d0a0b); }
.ceiling { position: absolute; inset: 0 0 auto; height: 15%; background: repeating-linear-gradient(0deg, transparent 0 24px, #c49b6808 25px, #06060655 27px 31px), linear-gradient(#0d0b0c, #1d1414); clip-path: polygon(0 0,100% 0,86% 100%,14% 100%); opacity: .6; }
.wall { position: absolute; top: 7%; bottom: 0; width: 11%; background: repeating-linear-gradient(90deg, #391b1a 0, #2c1515 20px, #1a1011 23px, #42201c 27px, #281515 29px, #281515 55px); box-shadow: inset 0 0 80px #0009; }
.wall-left { left: 0; clip-path: polygon(0 0,100% 13%,100% 86%,0 100%); }
.wall-right { right: 0; clip-path: polygon(0 13%,100% 0,100% 100%,0 86%); }
.sconce { position: absolute; top: 44%; width: 6px; height: 50px; border-radius: 2px; background: linear-gradient(90deg, #996b34, #e9ca8d 45%, #b88645); box-shadow: 0 0 20px #edba6655, 0 -36px 37px 15px #d49c4c16, 0 36px 37px 15px #d49c4c16; opacity: .7; }
.sconce-left { left: 4.5%; }.sconce-right { right: 4.5%; }
.screen-spill { position: absolute; inset: 15% 15% 20%; background: #e3bd7c; filter: blur(100px); opacity: .08; }
.floor { position: absolute; bottom: 0; width: 100%; height: 20%; background: radial-gradient(ellipse at 50% 0, #77634a20, transparent 65%), linear-gradient(transparent, #080708 90%); }
.house-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 2vw; }
.house-actions { display: flex; align-items: center; gap: 4px; }
.scene-video[data-cinematic] { cursor: pointer; }
.icon-button { width: 40px; height: 40px; flex-shrink: 0; display: inline-grid; place-items: center; border: 0; background: none; color: #bca98d; text-decoration: none; transition: color .2s; padding: 9px; }
.icon-button svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.icon-button:hover:not(:disabled) { color: #fff0cb; }
.house-header .icon-button { opacity: .6; }.house-header .icon-button:is(:hover, :focus-visible) { opacity: 1; }
.auditorium { position: relative; z-index: 1; align-self: center; justify-self: center; width: min(84vw, 1360px, calc(var(--stage-height) * 1.92)); min-width: 0; min-height: 0; max-height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) var(--controls); gap: var(--gap); }
.screen-surround { position: relative; width: 100%; aspect-ratio: 1.92; min-height: 0; border: 1px solid #826c4a60; padding: 6px; background: #080909; box-shadow: 0 0 0 4px #0c090a, 0 0 0 5px #71553720, 0 0 60px #dbc08813, 0 25px 80px #0009; }
.screen-surround::after { content: ""; height: 8px; position: absolute; top: calc(100% + 4px); left: -1.5%; width: 103%; background: linear-gradient(#71533725, #070606); border-top: 1px solid #a77c4925; }
.screen { position: relative; width: 100%; height: 100%; background: var(--paper); color: #292d25; overflow: hidden; outline: none; container-type: size; }
.scene, .scene > article { width: 100%; height: 100%; min-height: 0; }
.scene.entering { animation: frame-in .25s ease both; }
@keyframes frame-in { from { opacity: .4; } to { opacity: 1; } }
.screen h1, .screen h2, .screen p, .screen figure, .screen blockquote { margin: 0; }
.screen h1, .screen h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.05em; }
.screen h2 { font-size: clamp(28px, 5cqw, 64px); line-height: 1.1; }
.scene-frame { position: relative; padding: 6% 7%; background: var(--paper); }
.scene-frame.dark { background: #222b2b; color: #f0e5cc; }
.scene-kicker { font: 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .65; margin-bottom: 14px !important; }
.scene-heading { flex-shrink: 0; }
.body-copy { color: #5b5d4e; font-size: clamp(15px, 1.65cqw, 20px); line-height: 1.65; }
.dark .body-copy { color: #d1c9b6; }
.prose-window { position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden; margin-top: clamp(14px, 2.8cqh, 28px); }
.prose { position: absolute; inset: 0; column-fill: auto; column-gap: 28px; white-space: pre-line; }
.prose p { margin: 0 0 1em; orphans: 2; widows: 2; }
.page-count { position: absolute; bottom: 10px; right: 17px; z-index: 2; font: 10px var(--mono); color: #7d755e; }
.text-frame { display: flex; flex-direction: column; padding: 8% 11%; }
.text-frame:has(.prose-window) { padding-bottom: 7%; }
.text-frame .scene-heading { max-width: 15em; }
.split-frame { display: grid; grid-template-columns: 53% 47%; padding: 0; }
.split-copy { padding: 12% 11%; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.split-copy h2 { font-size: clamp(28px, 4.7cqw, 58px); }
.scene-image { width: 100%; height: 100%; object-fit: cover; min-height: 0; display: block; }
.image-frame { padding: 0; background: #141b20; }
.image-frame .scene-image { object-fit: contain; }
.video-frame { display: flex; flex-direction: column; padding: 0; background: #0b1013; }
.scene-video { display: block; flex: 1; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.screen .video-caption { flex-shrink: 0; padding: 8px 5%; color: #eee5d0; font-size: 13px; line-height: 1.5; }
.image-caption { position: absolute; left: 5%; right: 5%; bottom: 5%; font-size: clamp(12px, 1.4cqw, 18px); color: #fff2d6; text-shadow: 0 1px 8px #000; }
.quote-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8% 12%; }
.quote-frame blockquote { font: italic clamp(28px, 5.3cqw, 68px)/1.18 var(--serif); letter-spacing: -.045em; max-width: 18em; text-wrap: balance; }
.quote-frame .attribution { margin-top: 24px; font-size: 13px; color: #7d745d; }
.custom-frame { display: flex; flex-direction: column; }
.scene-frame.custom-frame.full-bleed { padding: 0; }
.custom-frame .scene-heading { margin-bottom: clamp(14px, 3cqh, 30px); }
.custom-frame h2 { font-size: clamp(27px, 4.7cqw, 58px); }
.custom-mount { min-height: 0; flex: 1; }
.cover { position: relative; isolation: isolate; display: flex; align-items: center; padding: 8% 9%; background: #283334; color: #ffedca; }
.cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cover.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #172026ad, #28252233 75%), linear-gradient(0deg, #18191d66, transparent 65%); z-index: -1; }

/* A short opening: house lights down, velvet across the screen, then reveal. */
.room::after { content: ""; position: absolute; inset: 0; background: #020204; opacity: 0; transition: opacity 1.4s ease; }
.sconce { z-index: 1; }
.audience { transition: filter 1.4s ease; }
.screen-spill { transition: opacity 1.6s ease; }
.screen-surround { transition: box-shadow 1.5s ease; }
.is-playing .room::after { opacity: .66; }
.is-playing .audience { filter: brightness(.36); }
.is-playing .screen-spill { opacity: .21; }
.is-playing .screen-surround { box-shadow: 0 0 0 4px #070708, 0 0 0 5px #71553716, 0 0 80px #e9d5a520, 0 25px 80px #000c; }
.is-playing .house-header .icon-button { opacity: .35; }
.is-playing .house-header .icon-button:is(:hover, :focus-visible) { opacity: 1; }
.projection-dimmer { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #030305; opacity: 0; transition: opacity 1s ease; }
.is-opening:not(.is-revealing) .projection-dimmer { opacity: 1; transition-duration: .5s; }
.curtains { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; visibility: hidden; }
.is-opening .curtains { visibility: visible; }
.curtain { position: absolute; top: 0; bottom: 0; width: 51%; background: repeating-linear-gradient(90deg, #351018 0%, #5a1b25 3%, #782b35 6%, #5b1c26 8%, #2c0d14 12%, #44131c 15%); box-shadow: inset 0 20px 45px #0007, inset 0 -5px 8px #16060b, 0 0 30px #0008; transition: transform 1.4s cubic-bezier(.3, 0, .16, 1); will-change: transform; }
.curtain::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0006, transparent 25%, #09020833 75%, #0005); border-bottom: 3px solid #a4743c33; }
.curtain-left { left: 0; transform: translateX(-103%); border-right: 1px solid #160810; }
.curtain-right { right: 0; transform: translateX(103%); background-position: 12px 0; border-left: 1px solid #160810; }
.curtains.is-closed .curtain { transform: translateX(0); transition-duration: .6s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.curtains.is-resetting .curtain { transition: none; }
.is-opening .scene { animation: none; }
.is-opening .screen-controls { opacity: .25; }
.cover h1 { font-size: clamp(36px, 8cqw, 112px); line-height: 1; white-space: pre-line; }
.cover-subtitle { font-size: clamp(14px, 1.6cqw, 20px); margin-top: 20px !important; max-width: 26em; }
.play-button { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; border-bottom: 1px solid #ebd4a273; padding: 9px 0; margin-top: clamp(20px, 5cqh, 38px); color: #ffedca; font-size: 14px; }
.play-button svg { width: 12px; height: 12px; fill: currentColor; }
.screen-message { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 25px; text-align: center; }
.screen-message h1 { font: 32px var(--serif); }.screen-message p { font-size: 14px; }

.screen-controls { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; }
.screen-controls .icon-button { opacity: .65; }.screen-controls .icon-button:is(:hover, :focus-visible) { opacity: 1; }
.screen-controls .icon-button:disabled { opacity: .2; }
.scene-progress { display: flex; align-items: center; gap: 4px; }
.scene-marker { position: relative; display: grid; place-items: center; width: 28px; height: 32px; padding: 0; border: 0; background: none; }
.scene-marker::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #a28a6866; }
.scene-marker[aria-current="step"]::after { background: #e3c38f; box-shadow: 0 0 0 4px #d0ab7230; }
.scene-marker:hover::after { background: #e3c38f; }
.expand-button { position: absolute; right: 0; }
.audience { grid-row: 3; position: relative; align-self: end; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: 2; mask-image: linear-gradient(transparent, #000 12%); }
.seat-row { position: absolute; display: flex; justify-content: center; gap: 9px; width: 100%; left: 0; }
.seat-row-back { top: 2px; transform: scale(.83); opacity: .85; }.seat-row-middle { top: 35%; transform: scale(.94); }.seat-row-front { top: 75%; }
.seat { position: relative; flex: 0 0 80px; height: 78px; border-radius: 23px 23px 7px 7px; background: linear-gradient(100deg, #281415, #3a1c1d 45%, #301719 70%, #180f12); border: 1px solid #a07e5c1d; border-top: 2px solid #9a775c3d; box-shadow: 3px -3px 15px #0006, inset 0 3px 5px #d0a37a07; }
.seat::before { content: ""; position: absolute; inset: 7px 8px 10px; border: 1px solid #a1705015; border-radius: 18px 18px 3px 3px; }
.seat::after { content: ""; position: absolute; width: 6px; height: 24px; bottom: 8px; right: -7px; background: #170e10; border-radius: 4px; border-top: 1px solid #805e3b3b; }
.aisle { flex: 0 0 100px; position: relative; }.aisle::after { content: ""; width: 5px; height: 3px; background: #b88b4c73; box-shadow: 0 0 8px #d3a55e4d; position: absolute; bottom: 12px; left: 10px; }
.seat-row-front .seat { background: linear-gradient(100deg, #1a1012, #271416 45%, #170e11); border-top-color: #8c695b36; }

.program-dialog { color-scheme: light; width: min(800px, calc(100vw - 40px)); height: min(570px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 24px 30px; border: 1px solid #bbab8c; background: var(--paper); color: #3d3b30; overflow: hidden; box-shadow: 0 40px 120px #0008; }
.program-dialog[open] { display: grid; grid-template-rows: 44px minmax(0, 1fr) auto; gap: 20px; }
.program-dialog::backdrop { background: #080709c9; backdrop-filter: blur(5px); }
.program-header { display: flex; justify-content: space-between; align-items: center; }.program-header h2 { font: 30px var(--serif); font-weight: 400; margin: 0; letter-spacing: -.03em; }.close-button { color: #776449; }.program-dialog .icon-button:hover { color: #30291d; }
.program-grid { display: grid; grid-template-columns: repeat(var(--program-columns, 3), minmax(0, 1fr)); gap: 24px; min-height: 0; align-items: stretch; }
.program-film { padding: 0; border: 0; background: none; text-align: left; display: flex; flex-direction: column; gap: 13px; min-width: 0; min-height: 0; color: #3d3b30; }
.mini-poster { position: relative; isolation: isolate; display: flex; align-items: center; width: 100%; flex: 1; min-height: 0; padding: 14%; color: #ffedca; background: #283334; overflow: hidden; box-shadow: 3px 5px 12px #30231425; }
.mini-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }.mini-poster::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#17202688,#28252222); }
.mini-poster > span { font: clamp(24px, 3vw, 38px)/1.05 var(--serif); letter-spacing: -.045em; white-space: pre-line; }
.program-film > strong { font-size: 13px; line-height: 1.4; font-weight: 400; }
.program-film:hover .mini-poster { outline: 1px solid #7e6844; outline-offset: 4px; }
.program-pagination { display: flex; align-items: center; justify-content: center; gap: 20px; font: 11px var(--mono); }
body.is-expanded { --seats: 8px; }.is-expanded .audience { opacity: 0; }.is-expanded .auditorium { width: min(96vw, 1600px, calc(var(--stage-height) * 1.92)); }

@media (max-width: 600px) and (orientation: portrait) {
  :root { --header: 40px; --seats: 54px; --gap: 8px; }
  .house-header { padding: 0 3vw; }.house-header .icon-button { height: 36px; }
  .auditorium, .is-expanded .auditorium { width: 94vw; height: calc(100% - 12px); }
  .screen-surround { height: 100%; aspect-ratio: auto; padding: 4px; }
  .wall { width: 5%; }.sconce { width: 4px; height: 30px; }.sconce-left { left: 1%; }.sconce-right { right: 1%; }
  .scene-frame { padding: 9% 8%; }.screen h2 { font-size: clamp(28px, 9cqw, 40px); }
  .body-copy { font-size: 16px; line-height: 1.65; }.prose-window { margin-top: 20px; }
  .cover { padding: 11% 8%; }.cover h1 { font-size: clamp(37px, 13cqw, 64px); }.play-button { font-size: 14px; margin-top: 28px; }
  .split-frame { padding: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 40%; }.split-copy { padding: 10% 9%; }.split-copy h2 { font-size: clamp(28px, 10cqw, 42px); }
  .quote-frame { padding: 12% 10%; }.quote-frame blockquote { font-size: clamp(28px, 10cqw, 42px); }
  .custom-frame { padding: 9% 8%; }.custom-frame .scene-heading { margin-bottom: 24px; }.custom-frame h2 { font-size: clamp(27px, 9cqw, 40px); }
  .seat { flex-basis: 60px; height: 65px; border-radius: 18px 18px 5px 5px; }.seat-row { gap: 6px; }.aisle { flex-basis: 65px; }
  .program-dialog { width: calc(100vw - 32px); padding: 18px 24px; }.program-dialog[open] { gap: 14px; }.program-grid { gap: 16px; }.mini-poster { padding: 10%; }.mini-poster > span { font-size: 38px; }
}
@media (max-height: 500px) {
  :root { --header: 32px; --seats: 28px; --controls: 32px; --gap: 6px; }
  .house-header .icon-button, .screen-controls .icon-button { width: 32px; height: 32px; padding: 7px; }
  .scene-frame { padding: 5% 7%; }.screen h2 { font-size: clamp(25px, 4.7cqw, 40px); }.body-copy { font-size: 15px; line-height: 1.5; }.prose-window { margin-top: 12px; }
  .cover { padding: 5% 8%; }.cover h1 { font-size: clamp(30px, 7cqw, 65px); }.play-button { margin-top: 14px; padding: 5px 0; font-size: 12px; }
  .split-frame { padding: 0; }.split-copy { padding: 9% 11%; }.custom-frame .scene-heading { margin-bottom: 14px; }
  .program-dialog { padding: 12px 24px; }.program-dialog[open] { grid-template-rows: 32px minmax(0, 1fr) auto; gap: 8px; }.program-header h2 { font-size: 25px; }.program-film { gap: 6px; }.program-film > strong { font-size: 11px; }.mini-poster > span { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* The extended screening always has an explicit route back to the 3D room. */
.theater-return { display:inline-flex;align-items:center;gap:8px;color:#bca98d;font:11px/1.4 var(--sans);text-decoration:none;padding:10px 0; }
.theater-return svg { width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round; }
.theater-return:hover { color:var(--ink); }