/* LUME Network, version 2: the theater.
   Two ways to read: the walk-through (html.cinema) and the plain page (html.calm, also the no-JavaScript
   and reduced-motion default). Fonts are the same open-licensed files as version 1 (see ../CREDITS.md). */

@font-face { font-family: "League Gothic"; src: url("/assets/fonts/league-gothic-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda-latin-900-italic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/assets/fonts/bodoni-moda-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/assets/fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/assets/fonts/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/assets/fonts/caveat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --night: #07060a;
  --ink: #14110d;
  --cream: #eee5cf;
  --cream-dim: rgba(238, 229, 207, .78);
  --gold-hi: #f2bf33;
  --gold: #e5b329;
  --gold-deep: #b48401;
  --gold-ink: #7a5a00;
  --red: #6e0f14;
  --red-hi: #8f1a1f;
  --paper: #eee5cf;
  --paper-2: #e5dbc2;
  --paper-3: #d9cdb0;
  --ink-2: #4a453b;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --f-display: "League Gothic", "Arial Narrow", Impact, sans-serif;
  --f-mast: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --f-body: "Newsreader", Georgia, "Times New Roman", serif;
  --f-type: "Courier Prime", "Courier New", monospace;
  --f-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  /* the steady viewport height, set by the script (phone address bars don't move it) */
  --vh: 1vh;
  --vw: 1vw;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; background: var(--night); color: var(--cream); font-family: var(--f-body); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--gold-hi); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--cream); color: var(--ink); font: 700 14px var(--f-type); }
.skip-link:focus { top: 12px; }

/* ---------- the small fixed strip ---------- */
.hud { position: fixed; left: 0; right: 0; top: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud__ticket-wrap { position: relative; margin-left: auto; }
.hud__mode, .hud__ticket, .hud__privacy {
  appearance: none; border: 1px solid rgba(229, 179, 41, .55); background: rgba(10, 8, 6, .72); color: var(--cream);
  font: 700 12px var(--f-type); letter-spacing: .06em; padding: 8px 12px; cursor: pointer; border-radius: 2px;
}
.hud__side { display: flex; align-items: flex-start; gap: 12px; }
.hud__privacy { display: inline-block; text-decoration: none; text-align: center; }
.hud__mode-calm, .hud__mode-short { display: none; }
.calm .hud__mode-cinema { display: none; }
.calm .hud__mode-calm { display: inline; }
.hud__ticket { display: inline-flex; align-items: center; gap: 8px; background: #f1e4c2; color: var(--red); border: 0; border-left: 2px dashed rgba(110, 15, 20, .45); padding: 7px 12px 7px 10px; }
.hud__ticket[hidden] { display: none; }
.hud__ticket.is-in { animation: ticket-in .35s ease-out; }
@keyframes ticket-in { from { transform: scale(.9); } to { transform: scale(1); } }
.hud__star { width: 16px; height: 16px; fill: var(--gold-deep); }
.hud__ticket-k { font: 400 17px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.hud__ticket-t { font: 700 11px var(--f-type); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.program-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; padding: 14px 16px 10px; background: #f1e4c2; color: var(--ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.program-pop[hidden] { display: none; }
.program-pop__h { margin: 0 0 6px; font: 400 22px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.program-pop ol { margin: 0; padding: 0; list-style: none; }
.program-pop a { display: block; padding: 6px 0; border-top: 1px dotted rgba(20, 17, 13, .35); color: var(--ink); font: 400 16px var(--f-body); text-decoration: none; }
.program-pop a:hover { color: var(--red); }

/* ======================================================================
   THE PLAIN PAGE (calm)
   ====================================================================== */
.calm .scroll-space, .calm .flash, .calm .cut, .calm .glow, .calm .flyer, .calm .cue, .calm .nudge,
.calm .outside__art, .calm .booth__art, .calm .booth__slot, .calm .booth__hole, .calm .inside, .calm .sprockets,
.calm .room, .calm .lobby__dim, .calm .lcard__art, .calm .frame--card { display: none; }
.calm .theater { max-width: 980px; margin: 0 auto; padding: 72px 16px 80px; }
.calm .outside { padding: 40px 0 8px; text-align: center; }
.calm .outside .sr-only { position: static !important; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; font: 400 clamp(54px, 12vw, 110px)/.9 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--gold-hi); }
.calm .poster__card, .calm .booth__glass, .calm .frame, .calm .lsign, .calm .lcard, .calm .page { margin: 28px 0; }
.calm .poster__card { margin-left: auto; margin-right: auto; padding: 36px 28px; border: 1px solid rgba(229, 179, 41, .45); background: #0e0c0a; }
.calm .booth__glass { display: grid; gap: 20px; }
.calm .program, .calm .notice { padding: 18px 20px; }
.calm .frame { position: relative; padding: 28px 24px; border: 1px solid rgba(229, 179, 41, .3); background: #0c0b09; }
.calm .clip__tag { display: none; }
.calm .page { padding: 0; border: 1px solid rgba(20, 17, 13, .3); }
.calm .page--cover { border-color: var(--gold); }
.calm .page__folio { display: none; }
.calm .who .founder__photo { width: 32%; max-width: 200px; }
.calm .roll__frames { max-width: 560px; }
.calm .exit { padding: 30px 0; }
.calm .steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* ======================================================================
   THE WALK-THROUGH (cinema)
   ====================================================================== */
.cinema body { overflow-x: hidden; }
.cinema .theater { position: fixed; inset: 0; overflow: hidden; background: var(--night); }
.cinema .scroll-space { height: 2000vh; }
.cinema .scene, .cinema .poster, .cinema .booth, .cinema .lobby, .cinema .playbill, .cinema .inside, .cinema .film, .cinema .exit { position: absolute; inset: 0; visibility: hidden; }
.cinema .is-shown { visibility: visible !important; }

/* ---------- outside ---------- */
.cinema .outside__art { position: absolute; inset: 0; overflow: hidden; }
.sky { position: absolute; inset: 0; background: linear-gradient(#020204 0%, #07060b 38%, #120f10 72%, #1b1511 100%); }
.cam { position: absolute; left: 0; top: 0; width: 1600px; height: 1200px; transform-origin: 0 0; will-change: transform; }
.facade, .lights, .lit { position: absolute; left: 0; top: 0; overflow: visible; max-width: none; }
.facade { width: 1600px; height: 1200px; }
.lit { width: 1600px; height: 1200px; }
.front { position: absolute; left: 0; top: 690px; width: 1600px; height: 510px; overflow: visible; max-width: none; }
.mq-now { font: 400 36px var(--f-display); letter-spacing: 9px; fill: var(--gold); }
.mq-title { font: 400 104px var(--f-display); letter-spacing: 12px; fill: #17130d; }
.mini-t { font: 400 30px var(--f-display); letter-spacing: 2px; fill: var(--gold); }
.mini-s { font: 700 9px var(--f-type); letter-spacing: 2.4px; fill: var(--cream); }
.booth-t { font: 400 19px var(--f-display); letter-spacing: 5px; fill: var(--gold); }
.leaf { position: absolute; top: 856px; width: 110px; height: 224px; overflow: visible; max-width: none; will-change: transform; }
.leaf--a { left: 899px; transform-origin: 0 50%; }
.leaf--b { left: 1011px; transform-origin: 100% 50%; }
.bulbs { position: absolute; transition: opacity .28s ease-out; }
.bulbs svg { width: 100%; height: 100%; overflow: visible; max-width: none; will-change: opacity; }
.bulbs[data-bulbs^="mq"] svg { animation: chase 1.2s linear infinite; }
.bulbs[data-bulbs="mq-b"] svg { animation-delay: -.8s; }
.bulbs[data-bulbs="mq-c"] svg { animation-delay: -.4s; }
@keyframes chase { 0%, 33.3% { opacity: .16; } 33.4%, 100% { opacity: 1; } }
.bulbs[data-bulbs^="sign"] svg { animation: blink 1.7s linear infinite; }
.bulbs[data-bulbs="sign-b"] svg { animation-delay: -.85s; }
@keyframes blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: .28; } }
.lights { transition: opacity .8s ease-out; }
.lights-off .lights, .lights-off .bulbs { opacity: 0; }
.outside.is-paused .bulbs svg { animation-play-state: paused; }
.outside__dim { position: absolute; inset: 0; background: #000; opacity: 0; will-change: opacity; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 85% 80% at 50% 48%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .55) 100%); }

/* ---------- the poster, up close ---------- */
.cinema .poster__card {
  position: absolute; left: 50%; top: 50%; width: var(--pw, 440px); height: var(--ph, 710px);
  margin: calc(var(--ph, 710px) / -2) 0 0 calc(var(--pw, 440px) / -2);
  transform-origin: 50% 50%; overflow: hidden;
}
.poster__card {
  max-width: 560px; margin-left: auto; margin-right: auto;
  background: radial-gradient(ellipse 80% 55% at 50% 30%, #241c12 0%, #0f0d0b 70%);
  box-shadow: inset 0 0 0 1px #6b4f0a, inset 0 0 0 7px #0f0d0b, inset 0 0 0 9px var(--gold), 0 30px 80px rgba(0, 0, 0, .7);
  color: var(--cream); text-align: center;
}
.cinema .poster__card { will-change: transform, opacity; }
.poster__in { padding: 8% 9% 7%; }
.cinema .poster__in { position: absolute; left: 0; right: 0; top: 0; }
.poster__star { width: 15%; height: auto; aspect-ratio: 56.2 / 54.4; margin: 0 auto 4%; fill: var(--gold-hi); }
.poster__title { margin: 0; }
.poster__logo { width: 82%; height: auto; margin: 0 auto; color: var(--cream); }
.poster__tag { margin: 6% 0 0; font: 900 calc(var(--pw, 440px) * .072)/1.08 var(--f-mast); }
.poster__deck { margin: 2.5% 0 0; font: italic 400 calc(var(--pw, 440px) * .045)/1.3 var(--f-body); color: var(--cream-dim); }
.poster__rule { width: 40%; height: 0; margin: 7% auto 6%; border-top: 1px solid rgba(229, 179, 41, .6); border-bottom: 1px solid rgba(229, 179, 41, .6); padding-top: 3px; }
.poster__k { margin: 0 0 3%; font: 700 calc(var(--pw, 440px) * .028) var(--f-type); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.poster__body { margin: 0; font: 400 calc(var(--pw, 440px) * .042)/1.5 var(--f-body); }
.poster__pull { margin: 5% 0 0; font: italic 700 calc(var(--pw, 440px) * .045)/1.25 var(--f-mast); color: var(--gold-hi); }

/* ---------- the ticket booth, up close ---------- */
.booth__art {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(255, 196, 120, .22), rgba(255, 196, 120, 0) 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 46px, rgba(0, 0, 0, .25) 46px 48px),
    linear-gradient(#1a120b, #0d0906);
}
.cinema .booth { will-change: transform, opacity; }
.cinema .booth__window {
  position: absolute; left: 50%; top: 50%; width: var(--bw, 760px); height: var(--bh, 640px);
  margin: calc(var(--bh, 640px) / -2) 0 0 calc(var(--bw, 760px) / -2);
  border: 12px solid transparent; border-radius: 48% 48% 6px 6px / 20% 20% 6px 6px;
  background: linear-gradient(#2a1c0f, #1a1109) padding-box, linear-gradient(135deg, #6b4f0a, #e0b030 35%, #8a6512 60%, #e0b030) border-box;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(0, 0, 0, .5);
}
.cinema .booth__glass {
  position: absolute; inset: 9% 6% 22%; border-radius: 46% 46% 4px 4px / 18% 18% 4px 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 4%; padding: 10% 5% 4%;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 244, 220, .07) 38%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(ellipse 70% 70% at 50% 60%, #5a3a1a, #23160b 75%);
  box-shadow: inset 0 0 0 2px rgba(229, 179, 41, .6), inset 0 0 50px rgba(0, 0, 0, .6);
}
.booth__hole { position: absolute; left: 50%; top: 5%; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%; border: 2px solid rgba(229, 179, 41, .8); background: repeating-conic-gradient(rgba(229, 179, 41, .55) 0 6deg, rgba(0, 0, 0, 0) 6deg 30deg); opacity: .8; }
.program, .notice { background: #f1e4c2; color: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.cinema .program, .cinema .notice { flex: 0 1 46%; padding: 3.2% 3.4%; }
.cinema .program { transform: rotate(-1.6deg); }
.cinema .notice { transform: rotate(1.2deg); }
.program__h { margin: 0 0 8px; font: 400 calc(clamp(26px, 3.2vw, 40px) * var(--bk, 1))/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.program__list { margin: 0; padding: 0; list-style: none; }
.program__list a { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; color: var(--ink); text-decoration: none; font: 400 calc(clamp(15px, 1.5vw, 19px) * var(--bk, 1))/1.25 var(--f-body); border-top: 1px dotted rgba(20, 17, 13, .3); }
.program__list .dots { flex: 1; border-bottom: 2px dotted rgba(20, 17, 13, .35); transform: translateY(-4px); }
.program__list a:hover { color: var(--red); }
.notice__h { margin: 0 0 6px; font: 400 calc(clamp(24px, 2.8vw, 34px) * var(--bk, 1))/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--red); }
.notice p { margin: 0 0 8px; font-size: calc(clamp(14px, 1.35vw, 17px) * var(--bk, 1)); line-height: 1.45; }
.notice a { color: var(--red); }
.cinema .booth__slot { position: absolute; left: 50%; top: 79%; width: var(--tw, 380px); height: calc(var(--th, 130px) + 8px); margin-left: calc(var(--tw, 380px) / -2); overflow: hidden; border-top: 6px solid #050403; }
.ticket { position: absolute; left: 0; top: 0; width: var(--tw, 380px); height: var(--th, 130px); display: flex; will-change: transform; }
.ticket__main, .flyer {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  background: #f3e6c2; color: var(--red);
  box-shadow: inset 0 0 0 3px #f3e6c2, inset 0 0 0 4px rgba(110, 15, 20, .55);
}
.ticket__main { flex: 1 1 74%; border-radius: 6px 0 0 6px; }
.ticket__k { font: 400 calc(var(--th, 130px) * .36)/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.ticket__t { font: italic 700 calc(var(--th, 130px) * .15)/1.1 var(--f-mast); color: var(--ink); }
.ticket__d { font: 700 calc(var(--th, 130px) * .085) var(--f-type); letter-spacing: .06em; color: var(--ink); opacity: .75; }
.ticket__stub { flex: 0 0 26%; display: flex; align-items: center; justify-content: center; border-left: 2px dashed rgba(110, 15, 20, .55); background: #ead9ad; color: var(--red); border-radius: 0 6px 6px 0; will-change: transform, opacity; }
.ticket__stub span { font: 400 calc(var(--th, 130px) * .16)/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.flyer { position: fixed; left: 0; top: 0; z-index: 55; visibility: hidden; pointer-events: none; border-radius: 6px; transform-origin: 0 0; will-change: transform, opacity; }
.calm .ticket { display: none; }

/* ---------- inside the auditorium ---------- */
.cinema .inside { background: #0a0507; overflow: hidden; }
.house { position: absolute; inset: 0; will-change: transform; transform-origin: 0 0; }
/* burgundy walls with gold fluting, darker toward the corners */
.house__walls {
  position: absolute; inset: -12%;
  background:
    radial-gradient(ellipse 55% 50% at 50% 46%, rgba(255, 190, 120, .12), rgba(0, 0, 0, 0) 72%),
    linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .7)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 54px, rgba(229, 179, 41, .1) 54px 56px, rgba(0, 0, 0, .28) 56px 64px, rgba(0, 0, 0, 0) 64px 110px),
    linear-gradient(90deg, #0f0506 0%, #2a0e11 22%, #3b1418 50%, #2a0e11 78%, #0f0506 100%);
}
/* the ceiling: a gold sunburst over the stage, and the glow of a chandelier */
.house__ceiling {
  position: absolute; left: -12%; right: -12%; top: -12%; height: calc(var(--ct, 200px) + 12%);
  background:
    radial-gradient(ellipse 22% 30% at 50% 22%, rgba(255, 214, 150, .28), rgba(255, 214, 150, 0) 70%),
    repeating-conic-gradient(from 0deg at 50% 100%, rgba(229, 179, 41, .16) 0deg 1.1deg, rgba(0, 0, 0, 0) 1.1deg 6.5deg),
    linear-gradient(#090304, #1c0a0c);
  -webkit-mask-image: radial-gradient(ellipse 70% 120% at 50% 100%, #000 35%, rgba(0, 0, 0, .35) 70%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 70% 120% at 50% 100%, #000 35%, rgba(0, 0, 0, .35) 70%, rgba(0, 0, 0, 0) 100%);
  border-bottom: 3px solid rgba(180, 132, 1, .55);
}
/* the opera boxes on each side wall (only where the walls are wide enough) */
.obox { position: absolute; top: 30%; height: 22%; display: none; }
.has-boxes .obox { display: block; }
.obox--l { left: calc(var(--wl, 300px) * .17); width: calc(var(--wl, 300px) * .56); }
.obox--r { right: calc(var(--wr, 300px) * .17); width: calc(var(--wr, 300px) * .56); }
.obox__arch { position: absolute; left: 0; right: 0; top: 0; height: 72%; border-radius: 50% 50% 0 0 / 34% 34% 0 0; background: radial-gradient(ellipse at 50% 85%, #55211a, #1d0909 72%); box-shadow: inset 0 0 0 3px #a77a10, inset 0 0 0 7px #230d07, inset 0 0 0 8px rgba(229, 179, 41, .45); }
.obox__lamp { position: absolute; left: 20%; right: 20%; top: 34%; height: 40%; background: radial-gradient(ellipse at 50% 55%, rgba(255, 205, 140, .55), rgba(255, 205, 140, 0) 70%); }
.obox__front { position: absolute; left: -7%; right: -7%; top: 62%; height: 38%; border-radius: 0 0 50% 50% / 0 0 65% 65%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 18px, rgba(229, 179, 41, .14) 18px 20px), linear-gradient(#5d1b17, #250909); box-shadow: inset 0 4px 0 #e0b030, inset 0 7px 0 #6b4f0a, 0 14px 24px rgba(0, 0, 0, .55); }
.house__sconces {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at calc(var(--wl, 300px) * .45) 21%, #fff1c9 0 4px, rgba(255, 206, 130, .55) 7px, rgba(255, 206, 130, .16) 40px, rgba(255, 206, 130, 0) 110px),
    radial-gradient(circle at calc(100% - var(--wr, 300px) * .45) 21%, #fff1c9 0 4px, rgba(255, 206, 130, .55) 7px, rgba(255, 206, 130, .16) 40px, rgba(255, 206, 130, 0) 110px),
    radial-gradient(circle at calc(var(--wl, 300px) * .45) 62%, #fff1c9 0 3px, rgba(255, 206, 130, .45) 6px, rgba(255, 206, 130, .12) 30px, rgba(255, 206, 130, 0) 90px),
    radial-gradient(circle at calc(100% - var(--wr, 300px) * .45) 62%, #fff1c9 0 3px, rgba(255, 206, 130, .45) 6px, rgba(255, 206, 130, .12) 30px, rgba(255, 206, 130, 0) 90px);
}
/* the carpet down the middle aisle */
.house__aisle { position: absolute; left: 0; right: 0; top: var(--sb, 75%); bottom: -12%; clip-path: polygon(47% 0, 53% 0, 66% 100%, 34% 100%); background: repeating-linear-gradient(0deg, rgba(229, 179, 41, .1) 0 2px, rgba(0, 0, 0, 0) 2px 34px), linear-gradient(#2a0508, #4c0b11); }
.house__dim { position: absolute; inset: -12%; background: #000; opacity: 0; will-change: opacity; }

/* the stage: a gold frame with a crest, velvet curtains, a valance, and footlights */
.prosc { position: absolute; background: #0d0806; }
.prosc__frame { position: absolute; inset: -30px; border: 24px solid transparent; border-image: linear-gradient(135deg, #6b4f0a, #e0b030 20%, #8a6512 42%, #f2bf33 62%, #9c7413 80%, #e0b030) 1; box-shadow: 0 0 0 3px #2a1a06, 0 0 0 7px #b48401, 0 0 0 9px #2a1a06, 0 0 90px 40px rgba(0, 0, 0, .6); pointer-events: none; }
.prosc__frame::before { content: ""; position: absolute; inset: -14px; border: 2px solid rgba(42, 26, 6, .75); }
.prosc__frame::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(255, 236, 180, .5); }
.prosc__crown { position: absolute; left: 50%; bottom: calc(100% + 36px); width: min(46%, 380px); height: auto; max-width: none; transform: translateX(-50%); overflow: visible; }
.prosc__screen { position: absolute; background: #1f1c18; box-shadow: 0 0 0 2px #050404; }
.prosc__screen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, #f6efdd, #d9cfb8 80%); box-shadow: 0 0 60px 20px rgba(246, 239, 221, .25); opacity: var(--lit, 0); }
.prosc__curtain {
  position: absolute; top: 0; bottom: 0; width: 51%; will-change: transform;
  background:
    linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .55)),
    linear-gradient(to top, rgba(255, 196, 120, .22), rgba(255, 196, 120, 0) 22%),
    repeating-linear-gradient(90deg, #3a0508 0, #6d0f15 1.2%, #a3242b 2.4%, #c2393f 2.9%, #8f1a1f 3.6%, #55090e 5%, #3a0508 5.8%);
}
.prosc__curtain::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-top: 3px solid #e0b030; background: repeating-linear-gradient(90deg, #f2bf33 0 2px, #8a6512 2px 4px); }
.prosc__curtain--l { left: 0; transform-origin: 0 50%; box-shadow: inset -10px 0 16px rgba(0, 0, 0, .5); }
.prosc__curtain--r { right: 0; transform-origin: 100% 50%; box-shadow: inset 10px 0 16px rgba(0, 0, 0, .5); }
.prosc__valance {
  position: absolute; left: -1%; right: -1%; top: 0; height: 13%;
  background:
    radial-gradient(ellipse 50% 100% at 50% 0, #a3242b 0 50%, #6e0f14 84%, rgba(0, 0, 0, 0) 86%) 0 100% / 64px 44% repeat-x,
    linear-gradient(#3e070b, #8f1a1f 62%, #6e0f14);
  border-top: 4px solid #e0b030; box-shadow: 0 8px 14px rgba(0, 0, 0, .45);
}
.prosc__valance::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; background: radial-gradient(circle at 50% 35%, #fff0b8 0 2px, #f2bf33 3px, #8a6512 5px, rgba(0, 0, 0, 0) 6px) 0 0 / 64px 16px repeat-x; }
.prosc__stage { position: absolute; left: -12%; right: -12%; top: calc(100% + 30px); height: calc(var(--vh) * 4.5); background: linear-gradient(#3a2414, #150b06); border-top: 4px solid #e0b030; box-shadow: 0 16px 34px rgba(0, 0, 0, .65); }
.prosc__stage::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 22px; background: radial-gradient(circle at 50% 50%, #fff3cc 0 2.5px, rgba(255, 214, 140, .6) 4px, rgba(255, 214, 140, 0) 11px) 0 0 / 34px 22px repeat-x; }
.prosc__stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: calc(100% + 30px); height: 70px; background: linear-gradient(to top, rgba(255, 200, 120, .16), rgba(255, 200, 120, 0)); }

/* the seats: rows on either side of the aisle, a little aisle light at each row's end;
   red velvet when the house lights are up, silhouettes in the dark */
.rows { position: absolute; inset: 0; pointer-events: none; }
.row { position: absolute; left: -22%; right: -22%; transform-origin: 50% 100%; will-change: transform, opacity; }
.row__half { position: absolute; top: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M8 100V40Q8 12 50 10Q92 12 92 40V100Z' fill='%23170809'/%3E%3Cpath d='M13 38Q15 17 50 15Q85 17 87 38' fill='none' stroke='%23ffc98f' stroke-opacity='.3' stroke-width='2.5'/%3E%3Cpath d='M50 26V100' stroke='%23000' stroke-opacity='.35' stroke-width='2'/%3E%3C/svg%3E") 0 100% / var(--sw) 100% repeat-x; }
.row__half--l { left: 0; right: calc(50% + var(--aisle)); background-position: right bottom; }
.row__half--r { left: calc(50% + var(--aisle)); right: 0; }
.row__half::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a3242b'/%3E%3Cstop offset='.55' stop-color='%236e0f14'/%3E%3Cstop offset='1' stop-color='%232e0609'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 100V40Q8 12 50 10Q92 12 92 40V100Z' fill='url(%23v)'/%3E%3Cpath d='M8 40Q8 12 50 10Q92 12 92 40' fill='none' stroke='%23e0b030' stroke-width='3'/%3E%3Cpath d='M50 24V100' stroke='%23000' stroke-opacity='.3' stroke-width='2'/%3E%3Cpath d='M20 30Q22 20 50 18' fill='none' stroke='%23fff' stroke-opacity='.18' stroke-width='3'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: inherit; background-size: inherit; opacity: var(--lights, 0); will-change: opacity; }
.row__half::after { content: ""; position: absolute; bottom: 6%; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #ffe2a0 0 25%, rgba(255, 190, 100, .5) 45%, rgba(255, 190, 100, 0) 72%); }
.row__half--l::after { right: -16px; }
.row__half--r::after { left: -16px; }
/* the seat in front of you, once you sit */
.seatback { position: absolute; left: -10%; right: -10%; bottom: -2%; height: 24%; will-change: transform; transform: translate3d(0, 110%, 0); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M6 100V36Q6 8 50 6Q94 8 94 36V100Z' fill='%23100506'/%3E%3Cpath d='M11 34Q13 13 50 11Q87 13 89 34' fill='none' stroke='%23ffc98f' stroke-opacity='.22' stroke-width='1.5'/%3E%3C/svg%3E") 50% 100% / 34% 100% repeat-x; }
.seatback::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238f1a1f'/%3E%3Cstop offset='.6' stop-color='%234e0a0e'/%3E%3Cstop offset='1' stop-color='%23200406'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 100V36Q6 8 50 6Q94 8 94 36V100Z' fill='url(%23v)'/%3E%3Cpath d='M6 36Q6 8 50 6Q94 8 94 36' fill='none' stroke='%23e0b030' stroke-width='1.6'/%3E%3Cpath d='M16 26Q20 13 50 11' fill='none' stroke='%23fff' stroke-opacity='.14' stroke-width='2'/%3E%3C/svg%3E") 50% 100% / 34% 100% repeat-x; opacity: var(--lights, 0); }

/* ---------- the film ---------- */
.cinema .film { background: #000; transform-origin: 0 0; will-change: transform, opacity; }
.cinema .gate { position: absolute; left: var(--gx); top: var(--gy); width: var(--gw); height: var(--gh); overflow: hidden; background: #000; }
.cinema .sprockets {
  position: absolute; top: calc(var(--hp) * -1); height: calc(100% + var(--hp) * 2); width: var(--sw);
  background-color: #110e0a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32'%3E%3Crect x='6' y='9' width='12' height='14' rx='3' fill='%23332a1f'/%3E%3C/svg%3E");
  background-size: var(--sw) var(--hp); background-repeat: repeat-y; will-change: transform;
}
.sprockets--l { left: calc(var(--gx) - var(--sw) - 4px); }
.sprockets--r { left: calc(var(--gx) + var(--gw) + 4px); }
.cinema .frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; visibility: hidden; will-change: transform; background: radial-gradient(ellipse 90% 80% at 50% 45%, #15130f, #0a0908 80%); box-shadow: inset 0 0 0 1px rgba(229, 179, 41, .3), inset 0 0 0 9px #0b0a08, inset 0 0 0 10px rgba(229, 179, 41, .14); }
.cinema .frame.is-shown { visibility: visible; }
.cinema .frame__in, .cinema .credits { position: absolute; left: 0; right: 0; top: 0; padding: 5.5% 8%; will-change: transform; }
.frame--card { display: flex; align-items: center; justify-content: center; text-align: center; }
.cinema .frame--card::before { content: ""; position: absolute; inset: 7% 9%; border: 2px solid rgba(229, 179, 41, .55); outline: 1px solid rgba(229, 179, 41, .3); outline-offset: 8px; }
.card__line { position: relative; margin: 0; padding: 0 10%; font: italic 900 clamp(48px, 7.5vw, 124px)/1.05 var(--f-mast); color: var(--cream); }
.frame--clip { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cinema .clip { position: relative; height: 80%; aspect-ratio: 4 / 3; max-width: 92%; overflow: hidden; background: #000; }
.clip__video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.clip__tag { position: absolute; left: 14px; top: 12px; padding: 4px 9px; background: var(--gold); color: var(--ink); font: 400 18px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; }
.clip__cap { max-width: 70ch; margin: 12px 6% 0; font: italic 400 14px/1.4 var(--f-body); color: var(--cream-dim); text-align: center; }
.standin { font: 700 11px var(--f-type); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-style: normal; margin-right: 4px; }
.kicker { margin: 0 0 10px; font: 700 13px var(--f-type); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.credits { text-align: center; }
.credit { margin: 0 auto calc(var(--vh) * 8); max-width: 34ch; }
.credit h3 { margin: 0 0 10px; font: 700 14px var(--f-type); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.credit p { margin: 0 0 6px; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.4; max-width: none; }
.credit__big { font: 400 clamp(34px, 3.6vw, 52px)/1.05 var(--f-display) !important; letter-spacing: .04em; text-transform: uppercase; }
.credit__big a { text-decoration: none; }
.credit--house { margin-bottom: 0; }
.credit__logo { width: min(320px, 70%); height: auto; margin: 0 auto 14px; color: var(--cream); }

/* ---------- the lobby: "In the app today" on four lobby cards ---------- */
.cinema .lobby { overflow: hidden; background: #140d08; }
.cinema .lobby__view { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.room { position: absolute; inset: 0; overflow: hidden; }
.cinema .lobby .room { left: -45%; right: -45%; will-change: transform; }
.room__wall {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 380px 300px at 360px -40px, rgba(255, 205, 130, .2), rgba(255, 205, 130, 0) 75%) 0 0 / 720px 100% repeat-x,
    linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .55)),
    repeating-linear-gradient(90deg, #26170d 0 168px, rgba(180, 132, 1, .45) 168px 170px, #1a0f08 170px 178px, rgba(180, 132, 1, .45) 178px 180px);
}
.room__frieze {
  position: absolute; left: 0; right: 0; top: 6%; height: 34px;
  border-top: 2px solid rgba(180, 132, 1, .7); border-bottom: 2px solid rgba(180, 132, 1, .7);
  background: #120b06 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cpath d='M0 15L15 3 30 15 45 3 60 15M0 15L15 27 30 15 45 27 60 15' fill='none' stroke='%23b48401' stroke-opacity='.75' stroke-width='1.5'/%3E%3C/svg%3E") 0 50% / 60px 30px repeat-x;
}
.room__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
  border-top: 5px solid #5a420a;
  background:
    linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 40%),
    repeating-linear-gradient(45deg, rgba(229, 179, 41, .13) 0 2px, rgba(0, 0, 0, 0) 2px 26px),
    repeating-linear-gradient(-45deg, rgba(229, 179, 41, .13) 0 2px, rgba(0, 0, 0, 0) 2px 26px),
    linear-gradient(#3d0a0f, #22050a);
}
.cinema .lobby__track { position: absolute; left: 0; top: 0; height: 100%; width: 1px; will-change: transform; }
.lobby__dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }
.cinema .bay { position: absolute; top: 50%; left: 0; width: var(--cw, 900px); height: var(--ch, 560px); margin-top: calc(var(--ch, 560px) / -2 + var(--vh) * 2); }

/* the sign over the lobby */
.lsign { text-align: center; color: var(--cream); background: rgba(14, 9, 5, .82); box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 9px rgba(14, 9, 5, .82), inset 0 0 0 10px rgba(229, 179, 41, .5), 0 30px 70px rgba(0, 0, 0, .6); padding: 6% 6%; }
.cinema .lsign { position: absolute; inset: 8% 4%; display: flex; flex-direction: column; justify-content: center; }
.lsign__k { margin: 0 0 12px; font: 700 14px var(--f-type); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.lsign__h { margin: 0; font: 400 clamp(64px, 11vw, 168px)/.86 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: #fff4d8; text-shadow: 0 0 18px rgba(255, 200, 110, .55), 0 0 2px rgba(255, 230, 170, .9); }
.lsign__deck { margin: 18px 0 0; font: italic 400 clamp(19px, 2vw, 26px)/1.35 var(--f-body); color: var(--cream-dim); }

/* a lobby card: cream card, gold frame, a little lamp above */
.lcard { color: var(--ink); }
.lcard__paper {
  border: 14px solid transparent;
  background: radial-gradient(ellipse 90% 70% at 50% 20%, #f8efd8, #ece0bf) padding-box, linear-gradient(135deg, #6b4f0a, #e0b030 30%, #8a6512 55%, #e0b030 80%, #6b4f0a) border-box;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(20, 17, 13, .25);
  padding: 30px 34px;
}
.cinema .lcard__paper { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 5%; align-items: center; overflow: hidden; }
.lcard__h { margin: 0 0 14px; font: 900 var(--fh, 46px)/1.04 var(--f-mast); color: var(--ink); }
.lcard__text p { margin: 0 0 12px; font-size: var(--fb, 21px); line-height: 1.45; }
.lcard .kicker { color: var(--gold-ink); }
.lamp { position: absolute; left: 50%; top: -30px; z-index: 2; width: 130px; height: 11px; margin-left: -65px; border-radius: 6px; background: linear-gradient(#f2bf33, #6b4f0a); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.lamp::after { content: ""; position: absolute; left: -70%; top: 9px; width: 240%; height: 300px; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 0, rgba(255, 228, 170, .3), rgba(255, 228, 170, 0) 75%); }
.calm .lamp { display: none; }
.ticks { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; padding: 0; list-style: none; font: 400 30px var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.cinema .lcard--profile .ticks { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lcard__art { display: flex; align-items: center; justify-content: center; min-height: 0; }

/* profile drawing: the four tiles pop in as you pass */
.pf { width: 100%; max-width: 340px; padding: 16px; border: 2px solid var(--ink); background: #fbf5e4; box-shadow: 6px 6px 0 rgba(20, 17, 13, .85); }
.pf__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pf__avatar { flex: none; width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--ink); background: repeating-linear-gradient(45deg, var(--ink) 0 2px, rgba(0, 0, 0, 0) 2px 6px); }
.pf__lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.pf__lines i { display: block; height: 9px; background: var(--ink); }
.pf__lines i:nth-child(1) { width: 70%; height: 12px; }
.pf__lines i:nth-child(2) { width: 95%; opacity: .45; }
.pf__lines i:nth-child(3) { width: 60%; opacity: .45; }
.pf__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1 / .78; border: 2px solid var(--ink); background: #efe3c3; color: var(--ink); transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.pf__tile svg { width: 38%; height: auto; }
.pf__tile b { font: 400 21px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.pf__tile:nth-child(2) { background: #e9d9ae; }
.pf__tile:nth-child(3) { background: #f3e8cc; }
.cinema .pf__tile { will-change: transform, opacity; }
.cinema .pf__tile:not(.is-on) { opacity: 0; transform: translate3d(0, 14px, 0) scale(.82); }

/* Discover: a phone whose feed swipes as you scroll */
.phone { width: min(230px, 92%); aspect-ratio: 9 / 18; padding: 9px; border-radius: 30px; background: #15110c; box-shadow: 0 0 0 2px #3a2f1e, 0 24px 40px rgba(0, 0, 0, .45); }
.phone__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 22px; background: #0d0b09; }
.feed { position: absolute; left: 0; top: 0; width: 100%; height: 300%; }
.cinema .feed { will-change: transform; }
.feed__item { position: relative; height: 33.3334%; overflow: hidden; }
.feed__item--a { background: radial-gradient(circle at 50% 38%, #fff1bf 0, #f2bf33 9%, rgba(242, 191, 51, .25) 24%, rgba(0, 0, 0, 0) 46%), linear-gradient(#5d0c12, #230408); }
.feed__item--b { background: linear-gradient(160deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .5)), repeating-linear-gradient(0deg, #2a221a 0 3px, #1c1712 3px 22px), linear-gradient(#3a2f22, #14110d); }
.feed__item--b::before { content: ""; position: absolute; left: 18%; top: 22%; width: 64%; height: 36%; background: #eee5cf; box-shadow: 0 0 0 6px #14110d, 0 0 0 8px var(--gold); transform: rotate(-4deg); }
.feed__item--c { background: radial-gradient(circle at 68% 30%, #eee5cf 0 11%, rgba(0, 0, 0, 0) 11.5%), linear-gradient(#e5b329, #b48401 70%, #6b4f0a); }
.feed__item--c::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: #14110d; clip-path: polygon(0 40%, 22% 10%, 40% 50%, 62% 0, 100% 45%, 100% 100%, 0 100%); }
.feed__play { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -16px 0 0 -10px; border-left: 28px solid rgba(255, 248, 230, .9); border-top: 16px solid transparent; border-bottom: 16px solid transparent; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.feed__bars { position: absolute; left: 12px; right: 30%; bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.feed__bars i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 248, 230, .9); }
.feed__bars i + i { width: 60%; opacity: .7; }

/* Messages: bubbles arrive as you pass */
.chat { width: 100%; max-width: 330px; padding: 14px 14px 18px; border: 2px solid var(--ink); border-radius: 16px; background: #fbf5e4; box-shadow: 6px 6px 0 rgba(20, 17, 13, .85); }
.chat__top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid rgba(20, 17, 13, .2); }
.chat__avatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: repeating-linear-gradient(45deg, var(--ink) 0 2px, rgba(0, 0, 0, 0) 2px 5px); }
.chat__top i { display: block; width: 46%; height: 10px; background: var(--ink); }
.bubble { display: flex; flex-direction: column; gap: 6px; width: 70%; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: #e6d8b1; transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.bubble i { display: block; height: 8px; border-radius: 4px; background: rgba(20, 17, 13, .55); }
.bubble i:last-child:not(:first-child) { width: 64%; }
.bubble--in { border-bottom-left-radius: 4px; }
.bubble--out { margin-left: auto; background: var(--gold); border-bottom-right-radius: 4px; }
.bubble--out i { background: rgba(20, 17, 13, .75); }
.cinema .bubble { will-change: transform, opacity; }
.cinema .bubble--in:not(.is-on) { opacity: 0; transform: translate3d(-24px, 10px, 0); }
.cinema .bubble--out:not(.is-on) { opacity: 0; transform: translate3d(24px, 10px, 0); }

/* Projects: the five steps light up like marquee bulbs */
.cinema .lcard--projects .lcard__paper { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 4%; }
.pull { margin: 16px 0 0; padding-left: 16px; border-left: 3px solid var(--gold); }
.pull p { margin: 0 !important; font: italic 700 var(--fq, 22px)/1.3 var(--f-mast) !important; color: var(--red); }
.pull footer { margin-top: 6px; font: 700 12px var(--f-type); letter-spacing: .12em; text-transform: uppercase; color: rgba(20, 17, 13, .7); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.steps li { border-top: 2px solid rgba(20, 17, 13, .3); padding-top: 12px; transition: opacity .35s ease; }
.steps__n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font: 400 24px/1 var(--f-display); color: var(--ink); background: radial-gradient(circle at 40% 35%, #fff4cf, #f2bf33 45%, #c48f0a); box-shadow: 0 0 0 2px #6b4f0a, 0 0 16px 4px rgba(242, 191, 51, .55); transition: background .3s ease, box-shadow .3s ease, color .3s ease; }
.steps h4 { margin: 8px 0 4px; font: 400 calc(var(--fb, 21px) * 1.3)/1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
.steps p { margin: 0; font-size: calc(var(--fb, 21px) * .78); line-height: 1.4; }
.cinema .steps li:not(.is-on) { opacity: .4; }
.cinema .steps li:not(.is-on) .steps__n { background: #3a3126; color: rgba(238, 229, 207, .55); box-shadow: 0 0 0 2px #6b4f0a; }

/* ---------- the program: "Meet the founders", pages you turn ---------- */
.cinema .playbill { overflow: hidden; }
.cinema .book { position: absolute; left: 50%; top: 50%; width: calc(var(--pgw) * var(--pgn)); height: var(--pgh); margin: calc(var(--pgh) / -2) 0 0 calc(var(--pgw) * var(--pgn) / -2); perspective: 2600px; will-change: transform, opacity; }
.page-leaf { position: absolute; top: 0; left: var(--spine); width: var(--pgw); height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face--back { transform: rotateY(180deg); }
.face__shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .08) 70%, rgba(0, 0, 0, 0)); }
.face--back .face__shade { background: linear-gradient(270deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .08) 70%, rgba(0, 0, 0, 0)); }
.page { color: var(--ink); background: radial-gradient(ellipse 90% 80% at 50% 40%, #f8f0da, #ebdfbf); }
.cinema .page { position: absolute; inset: 0; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.cinema .face--front .page::after, .cinema .face--back .page::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; }
.cinema .face--front .page::after { left: 0; background: linear-gradient(90deg, rgba(60, 40, 10, .28), rgba(60, 40, 10, 0)); }
.cinema .face--back .page::after { right: 0; background: linear-gradient(270deg, rgba(60, 40, 10, .28), rgba(60, 40, 10, 0)); }
.page__in { padding: 9% 9% 8%; font-size: var(--fs, 17px); }
.cinema .page__in { position: absolute; inset: 0; }
.page__head { margin: 0 0 4% ; padding-bottom: 6px; border-bottom: 1px solid rgba(20, 17, 13, .35); font: 700 11px var(--f-type); letter-spacing: .24em; text-transform: uppercase; color: rgba(20, 17, 13, .6); text-align: center; }
.page__folio { position: absolute; left: 0; right: 0; bottom: 3.5%; margin: 0; font: 700 11px var(--f-type); letter-spacing: .2em; text-align: center; color: rgba(20, 17, 13, .55); }
.page .kicker { color: var(--gold-ink); }
.page--cover { color: var(--cream); background: radial-gradient(ellipse 80% 60% at 50% 35%, #2a2015, #0f0d0b 75%); }
.cinema .page--cover { box-shadow: inset 0 0 0 10px #0f0d0b, inset 0 0 0 12px var(--gold), inset 0 0 0 16px #0f0d0b, inset 0 0 0 17px rgba(229, 179, 41, .55), 0 30px 70px rgba(0, 0, 0, .55); }
.page--cover .page__in { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12% 10%; }
.cover__star { width: 18%; height: auto; aspect-ratio: 56.2 / 54.4; fill: var(--gold-hi); margin-bottom: 7%; }
.page--cover .kicker { color: var(--gold); }
.cover__h { margin: 2% 0 0; font: 400 calc(var(--pgw, 440px) * .2)/.86 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #fff4d8; }
.cover__deck { margin: 6% 0 0; font: italic 400 calc(var(--pgw, 440px) * .045)/1.35 var(--f-body); color: var(--cream-dim); }
.cover__logo { width: 52%; height: auto; margin-top: 12%; color: var(--cream); }
.who { display: flex; align-items: flex-end; gap: 6%; margin-bottom: 5%; }
.who .founder__photo { flex: none; width: 40%; }
.founder__photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid var(--ink); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 38%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .5) 100%); }
.founder__name { margin: 0; font: 900 1.85em/1.02 var(--f-mast); }
.founder__role { margin: 4px 0 0; font: italic 400 1.05em var(--f-body); color: var(--red); }
.founder__story p { margin: 0 0 .7em; font-size: 1em; line-height: 1.5; }
/* the camera roll: the two founders across the top, the skating clip and Lisa on set side by side below */
.roll__frames { display: grid; grid-template-columns: minmax(0, .54fr) minmax(0, 1fr); gap: 12px 14px; margin-top: 1%; }
.roll__item { margin: 0; }
.roll__item--duo { grid-column: 1 / span 2; grid-row: 1; }
.roll__item--clip { grid-column: 1; grid-row: 2; }
.roll__item--set { grid-column: 2; grid-row: 2; align-self: center; }
/* in the walk the pictures spread down the whole page, clear of the page number;
   on a short page the script narrows them (--roll-w) until they fit */
.cinema .page--roll .page__in { display: flex; flex-direction: column; padding-bottom: calc(var(--pgh, 650px) * .035 + 26px); }
.cinema .roll__frames { flex: 1; min-height: 0; align-content: space-evenly; width: var(--roll-w, 100%); margin-left: auto; margin-right: auto; }
.roll__pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 2px solid var(--ink); }
.roll__pic--tall { aspect-ratio: 9 / 16; }
.roll__pic img, .roll__pic video { width: 100%; height: 100%; object-fit: cover; }
.roll__pic::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .5) 100%); }
.roll__item figcaption { margin-top: 5px; font: italic 400 .85em var(--f-body); color: rgba(20, 17, 13, .75); }
.note p { margin: 0 0 .8em; font-size: 1.12em; line-height: 1.5; }
.note__sign { display: flex; gap: 28px; margin-top: 1em !important; font: 700 2.2em/1 var(--f-hand) !important; color: var(--red); }

/* ---------- back in the lobby: the casting call sheet (moved over from version 1) ---------- */
.cinema .exit { overflow: hidden; background: #140d08; }
.exit__in { padding: 0 16px; }
.cinema .exit__in { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--vh) * 7) 16px calc(var(--vh) * 4); transform-origin: 50% 0; will-change: transform; }
.exit__sign { display: block; width: max-content; max-width: 100%; margin: 0 auto 40px; padding: 8px 20px 4px; font: 400 clamp(36px, 4vw, 54px)/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); border: 3px solid var(--gold); background: rgba(10, 7, 4, .6); transform: rotate(-2deg); }
.exit__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 56px; }
.clipboard {
  position: relative; width: 500px; max-width: 100%; padding: 54px 20px 22px; color: var(--ink);
  background: linear-gradient(160deg, #3a352d, #26231e 60%, #1f1c18);
  border-radius: 14px;
  box-shadow: 0 30px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.clipboard__nail { position: absolute; left: 50%; top: -26px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #5d564b; box-shadow: 0 2px 2px rgba(0, 0, 0, .6); }
.clipboard__clip {
  position: absolute; left: 50%; top: 14px; width: 180px; height: 54px; margin-left: -90px; z-index: 2;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-deep));
  box-shadow: 0 6px 8px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .18);
}
.clipboard__clip::before { content: ""; position: absolute; left: 50%; top: -18px; width: 56px; height: 30px; margin-left: -28px; border: 6px solid var(--gold-deep); border-bottom: 0; border-radius: 30px 30px 0 0; }
.callsheet {
  position: relative; background: var(--paper); padding: 34px 24px 24px;
  box-shadow: 0 2px 0 var(--paper-3), 0 4px 0 var(--paper-2);
  font-family: var(--f-type);
}
.callsheet p, .callsheet dl, .callsheet dd, .callsheet ol, .pinned-note p, .pinned-note h3 { margin: 0; }
.callsheet__title { margin: 0; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 58px; line-height: .95; text-align: center; letter-spacing: .02em; }
.callsheet__meta { margin: 14px 0 12px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 8px 0; }
.callsheet__meta div { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; }
.callsheet__meta dt { flex: 0 0 104px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; padding-top: 2px; }
.callsheet__how { font-size: 15px; line-height: 1.4; }
.lines { margin-top: 14px; padding: 0; list-style: none; }
.line { position: relative; display: flex; gap: 10px; border-bottom: 1px solid #8f8670; min-height: 46px; padding: 8px 0; }
.line__no { flex: 0 0 22px; font-weight: 700; font-size: 15px; color: var(--ink-2); padding-top: 4px; }
.line--active { background: linear-gradient(90deg, rgba(229, 179, 41, .16), rgba(229, 179, 41, 0)); padding-right: 4px; }
.line--active .line__no { color: var(--gold-ink); }
.line__fields { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-bottom: 6px; }
.field { display: block; }
.field__label { display: block; font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; padding: 0; }
.field__input {
  width: 100%; border: 0; border-bottom: 2px solid var(--ink); background: transparent; border-radius: 0;
  font-family: var(--f-hand); font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--ink);
  padding: 2px 2px 1px; -webkit-appearance: none; appearance: none;
}
.field__input:focus { outline: none; border-bottom-color: var(--gold-deep); background: rgba(229, 179, 41, .14); }
.field__input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.choices { border: 0; padding: 0; margin: 2px 0 0; min-width: 0; }
.choices legend { margin-bottom: 4px; padding: 0; }
.check { display: flex; align-items: center; gap: 8px; font-size: 16px; padding: 4px 0; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: 0 0 auto; }
.platforms { display: flex; gap: 18px; padding-left: 28px; }
.platforms.is-off { opacity: .45; }
/* a box only robots fill in (the sign-up script throws away any signature that has it filled) */
.line__trap { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.line__error { font-size: 14px; color: var(--ink); background: rgba(229, 179, 41, .28); padding: 6px 8px; border-left: 3px solid var(--gold-deep); }
.sign {
  align-self: flex-start; margin-top: 4px;
  background: var(--ink); color: var(--paper); border: 0; cursor: pointer;
  font-family: var(--f-type); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 18px 11px; box-shadow: 4px 4px 0 var(--gold);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.sign:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--gold); }
.sign:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gold); }
.sign:disabled { cursor: progress; opacity: .7; transform: none; }
.line__signed { flex: 1; display: flex; flex-direction: column; gap: 0; font-family: var(--f-hand); font-weight: 700; font-size: 28px; line-height: 1.1; padding: 2px 0 4px; }
.line__signed[hidden], .line__fields[hidden], .line__error[hidden], .callsheet__stamp[hidden] { display: none; }
.line__hand--email { font-size: 22px; }
.line__hand--wants { font-family: var(--f-type); font-weight: 400; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; color: var(--ink-2); }
.line--blank { min-height: 40px; }
.callsheet__preview { margin-top: 16px !important; font-size: 13.5px; line-height: 1.45; border: 1px solid var(--ink); padding: 10px 12px; background: var(--paper-2); }
.callsheet .callsheet__privacy { margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.callsheet__privacy a { color: var(--red); font-weight: 700; }
.callsheet__stamp {
  position: absolute; right: 22px; bottom: 150px; z-index: 3; pointer-events: none;
  font-family: var(--f-display); font-size: 58px; line-height: .9; text-transform: uppercase; text-align: center;
  color: var(--gold-deep); border: 4px solid var(--gold-deep); padding: 10px 16px 8px; background: rgba(238, 229, 207, .82);
  transform: rotate(-9deg);
}
.callsheet__stamp small { display: block; font-family: var(--f-type); font-weight: 700; font-size: 12px; letter-spacing: .08em; margin-top: 6px; color: var(--ink); text-transform: none; }
.callsheet__stamp.is-in { animation: stamp-in .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-9deg) scale(1.8); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }
.line__rub {
  align-self: flex-start; margin-top: 10px; background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--ink);
  font-family: var(--f-type); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: 3px;
}
.pinned-note {
  position: relative; width: 250px; margin-top: 70px; background: var(--paper); color: var(--ink); padding: 26px 20px 20px; transform: rotate(2.5deg);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .5); text-align: center;
}
.pinned-note h3 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 32px; line-height: .95; }
.pinned-note p { margin-top: 8px; }
.pinned-note a { font-family: var(--f-mast); font-weight: 900; font-size: 24px; color: var(--ink); }
.pinned-note__small { font-family: var(--f-type); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pinned-note__pin { position: absolute; left: 50%; top: 8px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-hi), var(--gold-deep)); box-shadow: 0 3px 4px rgba(0, 0, 0, .4); }

/* ---------- overlays ---------- */
.flash { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; will-change: opacity; background: radial-gradient(ellipse 70% 70% at 50% 50%, #fff0cc, #f2bb6a 70%, #c97d33); }
.cut { position: fixed; inset: 0; z-index: 58; pointer-events: none; opacity: 0; background: #000; transition: opacity .22s ease; }
.cut.is-on { opacity: 1; }
.glow { position: fixed; left: 0; top: 0; z-index: 20; width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax; pointer-events: none; opacity: 0; will-change: transform, opacity; background: radial-gradient(circle closest-side, rgba(255, 214, 150, .11), rgba(255, 214, 150, .04) 45%, rgba(255, 214, 150, 0)); transition: opacity .5s ease; }
.glow.is-on { opacity: 1; }

/* ---------- the scroll prompt ---------- */
.cue {
  position: fixed; left: 50%; bottom: max(30px, calc(env(safe-area-inset-bottom) + 22px)); z-index: 50;
  display: inline-flex; align-items: center; gap: 14px; padding: 14px 26px 14px 20px;
  appearance: none; cursor: pointer; border-radius: 40px; border: 1.5px solid rgba(242, 191, 51, .85);
  background: rgba(8, 6, 4, .78); color: var(--gold-hi);
  box-shadow: 0 0 0 6px rgba(242, 191, 51, .08), 0 14px 40px rgba(0, 0, 0, .6);
  opacity: 0; transform: translate3d(-50%, 14px, 0); pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
.cue.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); pointer-events: auto; }
.cue.is-on .cue__chev { animation: chev 1.6s ease-in-out infinite; }
.cue__text { font: 400 26px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.cue__icon { position: relative; flex: none; }
.cue__icon--mouse { width: 20px; height: 32px; border: 2px solid var(--gold-hi); border-radius: 10px; }
.cue__wheel { position: absolute; left: 50%; top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--gold-hi); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.cue__icon--touch { display: none; width: 22px; height: 34px; }
.cue__finger { position: absolute; left: 3px; bottom: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gold-hi); animation: swipe 1.6s ease-in-out infinite; }
@keyframes swipe { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateY(-16px); opacity: 1; } 100% { transform: translateY(-18px); opacity: 0; } }
.cue__chev { width: 14px; height: 14px; border-right: 2.5px solid var(--gold-hi); border-bottom: 2.5px solid var(--gold-hi); transform: rotate(45deg) translate(-3px, -3px); }
@keyframes chev { 0%, 100% { transform: rotate(45deg) translate(-3px, -3px); } 50% { transform: rotate(45deg) translate(3px, 3px); } }
.cue__touch { display: none; }
.nudge { position: fixed; left: 50%; bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)); z-index: 50; margin: 0; padding: 8px 16px; transform: translateX(-50%); border-radius: 20px; background: rgba(8, 6, 4, .7); font: 700 13px var(--f-type); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); opacity: 0; transition: opacity .6s ease; pointer-events: none; white-space: nowrap; }
.nudge::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.nudge.is-on { opacity: 1; }
@media (hover: none) and (pointer: coarse) {
  .cue__mouse, .cue__icon--mouse { display: none; }
  .cue__touch { display: inline; }
  .cue__icon--touch { display: block; }
}

/* ---------- phones and narrow windows ---------- */
@media (max-width: 760px) {
  .hud__mode, .hud__ticket, .hud__privacy { font-size: 11px; padding: 7px 9px; }
  .hud__side { flex-direction: column; align-items: stretch; gap: 6px; }
  .hud__side, .hud__ticket-wrap { flex-shrink: 0; }
  .hud__mode, .hud__privacy { white-space: nowrap; }
  .cinema .hud__mode-cinema { display: none; }
  .cinema .hud__mode-short { display: inline; }
  .hud__ticket-t { display: none; }
  .hud__ticket-wrap { margin-right: -4px; }
  .cue { gap: 12px; padding: 12px 20px 12px 16px; }
  .cue__text { font-size: 22px; }
  .cinema .booth__glass { flex-direction: column; inset: 8% 5% 24%; padding: 16% 5% 4%; gap: 12px; }
  .cinema .program, .cinema .notice { flex: none; width: 100%; padding: 12px 14px; }
  .booth__hole { width: 38px; height: 38px; margin-left: -19px; top: 4%; }
  .cinema .frame__in, .cinema .credits { padding: 9% 7%; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; padding-top: 8px; }
  .steps li h4 { grid-column: 2; margin: 0; font-size: 22px; }
  .steps li p { grid-column: 2; font-size: 14px; }
  .steps__n { grid-row: 1 / span 2; width: 32px; height: 32px; font-size: 19px; }
  .cinema .lcard__paper { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: 14px; padding: 18px 18px; border-width: 10px; }
  .cinema .lcard__art { order: -1; }
  .cinema .lcard--projects .lcard__paper { align-content: start; grid-template-rows: auto auto; }
  .pf { max-width: 250px; padding: 10px; }
  .pf__avatar { width: 40px; height: 40px; }
  .pf__tile b { font-size: 16px; }
  .phone { width: min(150px, 60%); border-radius: 22px; padding: 6px; }
  .phone__screen { border-radius: 16px; }
  .chat { max-width: 260px; padding: 10px 10px 12px; }
  .bubble { margin-top: 8px; padding: 9px 11px; }
  .lamp { width: 90px; margin-left: -45px; top: -22px; }
  .exit__row { gap: 28px; }
  .pinned-note { margin-top: 0; }
  .callsheet__title { font-size: 48px; }
  .roll__frames { gap: 8px 10px; }
  .cinema .clip { height: auto; width: 100%; max-width: none; }
}

/* ---------- a short screen held sideways (a phone): the booth's cards side by side, with less glass above them ---------- */
@media (orientation: landscape) and (max-height: 519px) {
  .cinema .booth__glass { flex-direction: row; inset: 6% 4% 21%; padding: 36px 3% 10px; gap: 3%; }
  .cinema .program, .cinema .notice { flex: 0 1 48%; width: auto; padding: 10px 14px; }
  .booth__hole { width: 28px; height: 28px; margin-left: -14px; top: 3%; }
  .cinema .program__h { font-size: calc(24px * var(--bk, 1)); }
  .cinema .notice__h { font-size: calc(22px * var(--bk, 1)); }
  .cinema .program__list a { padding: 4px 0; }
}

/* ---------- the privacy link at the foot of the plain page ---------- */
.plain-foot { padding: 0 16px 56px; text-align: center; font: 700 13px var(--f-type); letter-spacing: .06em; }
.cinema .plain-foot { display: none; }

/* ---------- the privacy page (privacy.html): a house notice, framed like a lobby card ---------- */
.privacy-page { padding: max(20px, env(safe-area-inset-top)) 16px 56px; }
.privacy-page__draft { max-width: 760px; margin: 0 auto 18px; font: 400 12px/1.45 var(--f-type); letter-spacing: .03em; color: rgba(238, 229, 207, .66); }
.privacy-page__wrap { max-width: 760px; margin: 0 auto; }
.privacy-page__back { display: inline-block; margin: 0 0 22px; font: 700 13px var(--f-type); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); }
.privacy-page__back--end { margin: 30px 0 0; }
.privacy-card { padding: clamp(28px, 5vw, 56px) clamp(20px, 5.5vw, 60px); background: var(--paper); color: var(--ink); border: 2px solid var(--gold-deep); outline: 1px solid rgba(229, 179, 41, .5); outline-offset: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.privacy-card__kicker { margin: 0; text-align: center; font: 700 12px var(--f-type); letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.privacy-card h1 { margin: 6px 0 4px; text-align: center; font: 400 clamp(60px, 11vw, 96px)/.95 var(--f-display); letter-spacing: .04em; text-transform: uppercase; }
.privacy-card__date { margin: 0 0 26px !important; text-align: center; font-style: italic; color: var(--ink-2); }
.privacy-card__parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 14px 0 0; font: 700 13px var(--f-type); letter-spacing: .12em; text-transform: uppercase; }
.privacy-part { scroll-margin-top: 16px; }
.privacy-part > h2 { margin: 34px 0 6px; padding-top: 26px; border-top: 2px solid var(--gold-deep); text-align: center; font: 400 clamp(34px, 6.5vw, 50px)/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.privacy-card h3 { margin: 30px 0 8px; padding-top: 18px; border-top: 1px solid rgba(20, 17, 13, .22); font: 700 13px var(--f-type); letter-spacing: .18em; text-transform: uppercase; color: var(--red); scroll-margin-top: 16px; }
.privacy-card ul { margin: 0 0 14px; padding-left: 1.25em; }
.privacy-card ul ul { margin: 8px 0 0; }
.privacy-card li { margin: 0 0 9px; font-size: 18px; line-height: 1.6; }
.privacy-card li::marker { color: var(--red); }
.privacy-card p { margin: 0 0 12px; font-size: 18px; line-height: 1.6; }
.privacy-card a { color: var(--red); }
.privacy-gap { padding: 10px 14px; border: 2px dashed var(--red-hi); background: rgba(143, 26, 31, .07); color: var(--red); font: 400 15px/1.5 var(--f-type) !important; }
.privacy-gap::before { content: "To fill in: "; font-weight: 700; }
span.privacy-gap { display: inline; padding: 1px 6px; font-style: normal !important; }
.privacy-gap--ok::before { content: "Needs your OK: "; }
.privacy-card--short { text-align: center; }
.privacy-card--short h1 { margin-bottom: 18px; }