/* =========================================================================
   VFMBS · CINEMA LAYER
   Everything that makes the site feel like a night at the movies.
   Loads after style.css.
   ========================================================================= */
:root {
  --lb: 0px;
  --velvet: repeating-linear-gradient(90deg, #1f0204 0, #4a070c 1.3%, #7d1117 2.6%, #a61c23 3.3%, #c2282f 3.6%, #8e141b 4.4%, #4a070c 6%, #1f0204 7.4%);
  --tungsten: #ffe3b0;
  --paper: #ece5d4;
  --bass-red: #c8231e;
}

/* ---------------- Film layer, frame roll, grain fallback ---------------- */
.film-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9000; pointer-events: none; }
html.has-film .grain { display: none; }
html.frame-roll body { animation: frameRoll 0.62s steps(8) both; }
@keyframes frameRoll {
  0% { transform: translateY(-14vh); filter: blur(3px) brightness(1.8); }
  30% { transform: translateY(5vh); filter: blur(1px) brightness(1.3); }
  55% { transform: translateY(-2vh); }
  75% { transform: translateY(0.6vh); filter: none; }
  100% { transform: none; }
}

/* ---------------- Letterbox aspect bars ---------------- */
.letterbox-bars i { position: fixed; left: 0; right: 0; height: var(--lb); background: #000; z-index: 940; pointer-events: none; transition: height 0.9s var(--ease-io); }
.letterbox-bars i:first-child { top: 0; }
.letterbox-bars i:last-child { bottom: 0; }

/* ---------------- HUD ---------------- */
.hud { z-index: 950; gap: 14px; left: 20px; bottom: 14px; mix-blend-mode: normal; color: rgba(242, 237, 228, 0.55); text-shadow: 0 1px 2px #000; }
.hud-r { left: auto; right: 20px; }
.hud .scene { color: var(--gold); max-width: 32vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .snd { pointer-events: auto; display: inline-flex; align-items: flex-end; gap: 2px; font: inherit; color: inherit; letter-spacing: inherit; padding: 4px 8px; border: 1px solid rgba(242, 237, 228, 0.25); border-radius: 99px; background: rgba(0, 0, 0, 0.4); }
.hud .snd i { width: 2px; height: 3px; background: currentColor; margin-bottom: 3px; }
.hud .snd span { margin-left: 6px; }
.hud .snd.on { color: var(--gold); border-color: var(--gold); }
.hud .snd.on i { animation: eq 0.6s ease-in-out infinite alternate; }
.hud .snd.on i:nth-child(2) { animation-delay: -0.2s; }
.hud .snd.on i:nth-child(3) { animation-delay: -0.4s; }
.hud .snd.on i:nth-child(4) { animation-delay: -0.1s; }
@keyframes eq { from { height: 2px; } to { height: 10px; } }

/* ---------------- Viewfinder cursor ---------------- */
.vf { position: fixed; top: 0; left: 0; z-index: 9600; pointer-events: none; opacity: 0; transition: opacity 0.3s; will-change: transform, width, height; }
.vf.on { opacity: 1; }
.vf > i { position: absolute; width: 11px; height: 11px; border: 0 solid var(--cream); transition: border-color 0.2s, width 0.2s, height 0.2s; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8)); }
.vf > i:nth-child(1) { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; }
.vf > i:nth-child(2) { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
.vf > i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; }
.vf > i:nth-child(4) { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }
.vf.lock > i { border-color: var(--gold); width: 16px; height: 16px; }
.vf-x { position: absolute; left: var(--cx); top: var(--cy); width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--red-2); box-shadow: 0 0 8px var(--red-2); }
.vf.down .vf-x { transform: scale(2); }
.vf-l { position: absolute; left: 0; top: calc(100% + 6px); font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: var(--gold); white-space: nowrap; opacity: 0; transition: opacity 0.2s; text-shadow: 0 1px 2px #000; }
.vf.lock .vf-l { opacity: 1; }

/* ---------------- Rack focus: hover one, the rest fall out of focus ---------------- */
@media (hover: hover) {
  .rack > * { transition: filter 0.5s var(--ease), opacity 0.5s; }
  .rack:has(> :hover) > :not(:hover) { filter: blur(3px) brightness(0.55); }
  .reel-strip:has(.frame:hover) .frame:not(:hover) { filter: blur(2.5px) brightness(0.5) saturate(0.6); }
}

/* ---------------- Nav: credits typography ---------------- */
.nav-links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; }
.nav { top: calc(var(--bar-h)); }
.brand-word { letter-spacing: 0.14em; }

/* ---------------- Bass poster art ---------------- */
.art { background: var(--bg, #0d0b08) !important; }
.art .glow, .art .motif { display: none !important; }
.art svg.bass { position: absolute; inset: 0; width: 100%; height: 100%; }
.art::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; -webkit-mask-image: none; mask-image: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .42  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}
.art.has-img img { filter: grayscale(1) contrast(1.15) brightness(0.95); }
.art.has-img::after { content: ""; position: absolute; inset: 0; background: var(--acc); mix-blend-mode: multiply; opacity: 0.45; }
.art .beam { z-index: 1; background: linear-gradient(180deg, rgba(255, 227, 176, 0.25), transparent 70%); filter: blur(18px); }
.card-media::after, .ws-media::after, .cast-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 45%, transparent 70%); pointer-events: none; }
.card-label, .card-tag, .card-flag { z-index: 3; }
.modal-hero .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #161617 5%, transparent 65%); }
.page-hero > .art { left: 42%; opacity: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.page-hero > .art svg.bass { animation: posterPush 14s ease-out both; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 70% at 70% 0%, rgba(255, 227, 176, 0.18), transparent 70%); mix-blend-mode: screen; }
.page-hero > .art .motif { display: none; }

/* ---------------- PRE-SHOW ---------------- */
.preshow { position: fixed; inset: 0; z-index: 10000; background: #000; display: grid; place-items: center; transition: background 1.2s ease 0.6s; }
.preshow.open { background: transparent; pointer-events: none; }
.preshow > .ps-gate, .preshow > .ps-leader { grid-area: 1 / 1; }
.ps-leader[hidden] { display: none !important; }
.ps-gate { position: relative; z-index: 3; text-align: center; padding: 20px; transition: opacity 0.5s, transform 0.5s, filter 0.5s; }
.ps-gate.out { opacity: 0; transform: scale(0.96); filter: blur(6px); }
.ps-logo { width: 84px; margin: 0 auto 28px; animation: logoFloat 4s ease-in-out infinite; box-shadow: 0 0 60px rgba(207, 174, 112, 0.25); }
@keyframes logoFloat { 50% { transform: translateY(-6px); } }
.ps-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin: 0 0 22px; }
.ps-rule { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 4vw, 48px); line-height: 1.15; color: var(--cream); margin: 0 0 40px; }
.ps-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ps-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 99px; background: var(--cream); color: #000; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; transition: transform 0.3s var(--ease), background 0.3s; }
.ps-btn:hover { transform: scale(1.04); background: var(--gold); }
.ps-btn.ghost { background: transparent; color: var(--cream); border: 1px solid var(--line-2); }
.ps-btn.ghost:hover { background: rgba(242, 237, 228, 0.08); }
.ps-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: pulse 1.2s infinite; }
.ps-meta { margin-top: 42px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; color: var(--dim); }
.ps-leader { position: relative; z-index: 3; width: min(64vmin, 480px); aspect-ratio: 1; display: grid; place-items: center; background: #1a1612; border-radius: 50%; box-shadow: 0 0 0 50vmax #0f0d0b; }
.ps-leader::before, .ps-leader::after { content: ""; position: absolute; background: rgba(242, 237, 228, 0.4); }
.ps-leader::before { left: -20%; right: -20%; top: 50%; height: 1px; }
.ps-leader::after { top: -20%; bottom: -20%; left: 50%; width: 1px; }
.ps-ring { position: absolute; inset: 4%; border-radius: 50%; border: 2px solid rgba(242, 237, 228, 0.8); }
.ps-ring.r2 { inset: 13%; border-width: 1px; opacity: 0.6; }
.ps-sweep { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(242, 237, 228, 0.3) var(--p, 0deg), transparent 0); }
.ps-leader b { position: relative; font-family: var(--display); font-weight: 400; font-size: min(40vmin, 300px); line-height: 1; color: var(--cream); }
.ps-leader.flash { animation: flash 0.18s steps(2) both; }
@keyframes flash { 0% { filter: brightness(1); } 50% { filter: brightness(8); } 100% { filter: brightness(20); opacity: 0; } }
.curtain-l, .curtain-r { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 16%, transparent 70%, rgba(0, 0, 0, 0.75)), var(--velvet); box-shadow: inset 0 -40px 60px rgba(0, 0, 0, 0.6); transition: transform 2.4s cubic-bezier(0.65, 0, 0.2, 1); opacity: 0; }
.curtain-l { left: 0; transform-origin: left center; }
.curtain-r { right: 0; transform-origin: right center; }
.curtain-l::after, .curtain-r::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: repeating-linear-gradient(90deg, #d8b36a 0 2px, #8a6a2c 2px 4px); -webkit-mask: linear-gradient(#000, rgba(0, 0, 0, 0.3)); mask: linear-gradient(#000, rgba(0, 0, 0, 0.3)); }
.preshow .ps-leader[hidden] ~ .curtain-l, .preshow .ps-leader[hidden] ~ .curtain-r { opacity: 0; }
.preshow.open .curtain-l, .preshow.open .curtain-r { opacity: 1; }
.preshow.open .curtain-l { animation: drawL 2.6s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
.preshow.open .curtain-r { animation: drawR 2.6s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
@keyframes drawL { 0% { transform: none; } 100% { transform: scaleX(0.08) skewY(-2deg); } }
@keyframes drawR { 0% { transform: none; } 100% { transform: scaleX(0.08) skewY(2deg); } }

/* ---------------- SC.01 THE THEATER ---------------- */
.theater { position: relative; height: 100svh; min-height: 680px; overflow: hidden; background: #030202; isolation: isolate; --sw: min(60vw, 118vh); }
.theater-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.theater-gl.no-gl { background: radial-gradient(60% 50% at 50% 38%, rgba(255, 227, 176, 0.18), transparent 70%), #030202; }
.valance { position: absolute; top: 0; left: 0; right: 0; height: 12vh; z-index: 4; background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent), var(--velvet); -webkit-mask: radial-gradient(60px 26px at 60px 100%, transparent 98%, #000) 0 0 / 120px 100%; mask: radial-gradient(60px 26px at 60px 100%, transparent 98%, #000) 0 0 / 120px 100%; box-shadow: 0 10px 30px #000; }
.drape { position: absolute; top: 0; bottom: 0; width: 11vw; z-index: 4; background: linear-gradient(90deg, rgba(0, 0, 0, 0.75), transparent 40%, rgba(0, 0, 0, 0.5)), linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 20%, transparent 70%, rgba(0, 0, 0, 0.8)), var(--velvet); background-size: auto, auto, 460% 100%; transform-origin: top; animation: sway 9s ease-in-out infinite alternate; }
.drape.l { left: 0; border-radius: 0 0 40% 0; }
.drape.r { right: 0; border-radius: 0 0 0 40%; animation-delay: -4s; }
@keyframes sway { to { transform: skewX(1.2deg); } }
.screen { position: absolute; z-index: 3; top: calc(var(--nav-h) + var(--bar-h) + 7vh); left: calc(50% - var(--sw) / 2); width: var(--sw); aspect-ratio: 2.39; background: #efe8da; color: #0c0c0c; overflow: hidden; container-type: inline-size; cursor: pointer; opacity: 0; box-shadow: 0 0 120px 20px rgba(255, 227, 176, 0.14), 0 0 2px rgba(255, 255, 255, 0.6); transition: opacity 1.6s ease; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(60, 40, 20, 0.35)); z-index: 3; }
.theater.lit .screen { opacity: 1; animation: screenOn 1.4s steps(10) both; }
@keyframes screenOn { 0% { filter: brightness(0); } 20% { filter: brightness(1.6); } 30% { filter: brightness(0.3); } 50% { filter: brightness(1.2); } 60% { filter: brightness(0.7); } 100% { filter: none; } }
.screen.splice { animation: splice 0.22s steps(4) both; }
@keyframes splice { 0% { filter: brightness(2.2); transform: translateY(-3%); } 40% { filter: brightness(0.6); transform: translateY(2%); } 70% { filter: brightness(1.2); transform: translateY(0); } 100% { filter: none; } }
.screen-inner { position: absolute; inset: 0; }
.screen-scratch { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.35; background: linear-gradient(90deg, transparent 0 31%, rgba(0, 0, 0, 0.25) 31.1% 31.2%, transparent 31.3% 72%, rgba(255, 255, 255, 0.5) 72.05% 72.15%, transparent 72.3%); animation: scratch 0.5s steps(3) infinite; }
@keyframes scratch { 33% { transform: translateX(3%); } 66% { transform: translateX(-5%); opacity: 0.1; } }
.sc { position: absolute; inset: 0; display: grid; grid-template-columns: 100%; grid-template-rows: 100%; place-items: center; animation: scIn 0.9s var(--ease) both; }
@keyframes scIn { from { opacity: 0; letter-spacing: 0.2em; filter: blur(6px); } }
.sc-presents { text-align: center; }
.sc-presents img { width: 9cqw; margin: 0 auto 2.2cqw; }
.sc-presents p { margin: 0; font-family: var(--mono); font-size: 1.35cqw; letter-spacing: 0.4em; text-transform: uppercase; }
.sc-presents span { display: block; margin-top: 1.6cqw; font-family: var(--serif); font-style: italic; font-size: 3.4cqw; }
.sc-title { text-align: center; }
.sc-k { display: block; font-family: var(--mono); font-size: 1.15cqw; letter-spacing: 0.35em; text-transform: uppercase; margin-bottom: 1.6cqw; color: #6b5a3a; }
.sc-title h2 { font-size: 5.6vw; margin: 0; font-family: var(--display); font-weight: 400; font-size: 9.5cqw; line-height: 0.84; text-transform: uppercase; }
.sc-title h2 em { font-family: var(--serif); font-style: italic; text-transform: none; color: var(--bass-red); font-size: 0.78em; }
.sc-feat { width: 100%; height: 100%; display: grid; grid-template-columns: 38% 1fr; }
.sc-poster { position: relative; overflow: hidden; }
.sc-poster svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: posterPush 6s linear both; }
@keyframes posterPush { from { transform: scale(1.18); } to { transform: scale(1); } }
.sc-copy { padding: 4cqw; display: flex; flex-direction: column; justify-content: center; }
.sc-copy h2 { font-size: 4.8vw; margin: 0 0 1.4cqw; font-family: var(--display); font-weight: 400; font-size: 8.6cqw; line-height: 0.86; text-transform: uppercase; }
.sc-copy p { margin: 0 0 2cqw; font-family: var(--serif); font-style: italic; font-size: 2.5cqw; max-width: 44cqw; line-height: 1.25; }
.sc-cta { font-family: var(--mono); font-size: 1.2cqw; letter-spacing: 0.25em; text-transform: uppercase; border-bottom: 2px solid; align-self: flex-start; }
.theater-ui { position: absolute; z-index: 7; left: 0; right: 0; top: calc(var(--nav-h) + var(--bar-h) + 7vh + var(--sw) / 2.39 + 3.5vh); display: grid; justify-items: center; gap: 18px; opacity: 0; transform: translateY(16px); transition: 1.2s var(--ease) 0.8s; }
.theater.lit .theater-ui { opacity: 1; transform: none; }
.house { display: flex; gap: 10px; align-items: center; color: rgba(242, 237, 228, 0.6); }
.house .sep { color: var(--dim); }
.rec-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red-2); box-shadow: 0 0 8px var(--red-2); animation: pulse 1.4s infinite; }
.seats { position: absolute; left: -3%; right: -3%; bottom: 0; height: 36vh; z-index: 5; pointer-events: none; }
.seats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 10%, rgba(255, 220, 160, 0.13), transparent 70%); }
.seat-row { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.6s var(--ease); }
.exit-sign { position: absolute; z-index: 5; right: 13vw; top: 20vh; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; font-weight: 700; color: #7dffb0; padding: 4px 8px; border: 1px solid rgba(125, 255, 176, 0.5); text-shadow: 0 0 8px #3ef08a; box-shadow: 0 0 24px rgba(62, 240, 138, 0.25); animation: exit 5s infinite; }
@keyframes exit { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.3; } 95% { opacity: 1; } 96% { opacity: 0.5; } }

/* ---------------- SC.02 MARQUEE ---------------- */
.marquee-scene { padding: clamp(80px, 12vw, 160px) var(--gutter); background: radial-gradient(60% 50% at 50% 50%, rgba(255, 190, 90, 0.08), transparent 70%); }
.marquee-sign { position: relative; max-width: 1080px; margin: 0 auto; padding: clamp(40px, 5vw, 64px) clamp(18px, 4vw, 56px) clamp(30px, 4vw, 46px); background: linear-gradient(180deg, #16120d, #0b0906); border: 12px solid #211b13; border-radius: 10px; box-shadow: 0 0 0 2px #3a2e1c, 0 40px 120px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(0, 0, 0, 0.8); }
.bulbs { position: absolute; --b: radial-gradient(circle, #fffbe8 0 3px, #ffd27a 4px, rgba(255, 190, 90, 0.4) 6px, transparent 8px); --o: radial-gradient(circle, #6b4a1e 0 3px, transparent 4px); background: var(--b) 0 50% / 36px 18px repeat-x, var(--o) 18px 50% / 36px 18px repeat-x; filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.7)); animation: chase 0.5s steps(1) infinite; }
.bulbs.top, .bulbs.bottom { left: -6px; right: -6px; height: 18px; }
.bulbs.top { top: -16px; }
.bulbs.bottom { bottom: -16px; animation-direction: reverse; }
.bulbs.left, .bulbs.right { top: 0; bottom: 0; width: 18px; background: var(--b) 50% 0 / 18px 36px repeat-y, var(--o) 50% 18px / 18px 36px repeat-y; animation-name: chaseV; }
.bulbs.left { left: -16px; }
.bulbs.right { right: -16px; animation-direction: reverse; }
@keyframes chase { 50% { background-position: 18px 50%, 36px 50%; } }
@keyframes chaseV { 50% { background-position: 50% 18px, 50% 36px; } }
.mq-crown { position: absolute; top: -48px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 26px; background: #0b0906; border: 3px solid var(--gold); border-radius: 60px 60px 8px 8px; box-shadow: 0 0 30px rgba(207, 174, 112, 0.35); white-space: nowrap; }
.mq-crown img { width: 28px; }
.mq-crown span { font-family: var(--display); font-size: 30px; letter-spacing: 0.12em; color: var(--gold); line-height: 1; }
.mq-crown em { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--cream); }
.mq-now { text-align: center; font-family: var(--display); font-size: clamp(34px, 5vw, 64px); letter-spacing: 0.2em; color: #ff5b4d; text-shadow: 0 0 6px #ff3b2e, 0 0 24px #ff3b2e, 0 0 60px rgba(255, 59, 46, 0.6); margin-bottom: 20px; animation: neon 6s infinite; }
@keyframes neon { 0%, 18%, 22%, 60%, 100% { opacity: 1; } 19%, 21% { opacity: 0.35; } 61% { opacity: 0.7; } }
.mq-rows { display: grid; gap: 14px; }
.mq-row { display: grid; gap: 6px; justify-items: center; padding: 16px 10px; width: 100%; background: linear-gradient(180deg, #fff8e6, #f1e3c3); border-radius: 4px; box-shadow: inset 0 0 40px rgba(255, 190, 90, 0.5), 0 0 40px rgba(255, 210, 140, 0.25); position: relative; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.mq-row::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 calc(50% - 1px), rgba(0, 0, 0, 0.18) calc(50% - 1px) 50%); pointer-events: none; }
.mq-row:hover { transform: scale(1.015); box-shadow: inset 0 0 40px rgba(255, 190, 90, 0.7), 0 0 60px rgba(255, 210, 140, 0.45); }
.mq-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.tile { display: inline-grid; place-items: center; min-width: 0.72em; height: 1.08em; padding: 0 0.04em; font-family: var(--display); font-size: clamp(26px, 4.4vw, 56px); line-height: 1; color: #111; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 0, 0, 0.08); transform: rotate(var(--r)); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
.mq-line.small .tile { font-size: clamp(16px, 2.2vw, 28px); color: #7a1d12; }
.sp { width: 0.4em; font-size: clamp(26px, 4.4vw, 56px); }
.mq-line.small .sp { font-size: clamp(16px, 2.2vw, 28px); }
.marquee-sign .tile { opacity: 0; transform: translateY(-80px) rotate(-30deg); }
.marquee-sign.hung .tile { animation: hang 0.8s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes hang { from { opacity: 0; transform: translateY(-80px) rotate(-30deg); } to { opacity: 1; transform: rotate(var(--r)); } }
.mq-all { display: block; text-align: center; margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }

/* ---------------- SC.03 THE REEL ---------------- */
.reel { padding: clamp(70px, 9vw, 130px) 0; overflow: hidden; }
.reel-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.reel-ctl { display: flex; align-items: center; gap: 12px; }
.reel-ctl .icon-btn { border: 1px solid var(--line-2); font-size: 22px; }
.reel-meter { width: 180px; height: 2px; background: var(--line-2); }
.reel-meter i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.reel-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 40px 0 60px; cursor: grab; user-select: none; }
.reel-viewport::-webkit-scrollbar { display: none; }
.reel-viewport.dragging { cursor: grabbing; }
.reel-film { display: inline-flex; flex-direction: column; min-width: 100%; padding: 0 var(--gutter); transform: rotate(-1.6deg); transform-origin: left center; }
.reel-film > * { background-color: #241509; }
.reel-film::before, .reel-film::after { content: ""; display: block; height: 30px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='30'><rect width='38' height='30' fill='%23241509'/><rect x='10' y='8' width='18' height='14' rx='3' fill='%23efe6d2'/></svg>") repeat-x; box-shadow: inset 0 1px rgba(255, 160, 60, 0.2); }
.reel-edge { font-family: var(--mono); font-size: 9px; letter-spacing: 0.25em; color: #d98a3a; white-space: nowrap; overflow: hidden; padding: 3px 12px; opacity: 0.8; }
.reel-strip { display: flex; gap: 16px; padding: 10px 16px 14px; }
.frame { flex: 0 0 clamp(250px, 26vw, 360px); transition: transform 0.5s var(--ease), filter 0.5s; }
.frame-img { position: relative; aspect-ratio: 4 / 3; border: 3px solid #0e0804; border-radius: 6px; overflow: hidden; background: #000; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6); }
.frame-img .art { transition: transform 1s var(--ease); }
.frame:hover { transform: translateY(-10px) scale(1.04); }
.frame:hover .frame-img { box-shadow: 0 0 0 1px var(--tungsten), 0 0 60px rgba(255, 227, 176, 0.35); }
.frame:hover .frame-img .art { transform: scale(1.08); }
.frame-badge { position: absolute; z-index: 3; top: 8px; right: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; background: var(--gold); color: #000; padding: 4px 8px; text-transform: uppercase; }
.frame-cap { display: grid; gap: 2px; padding: 12px 4px 0; color: #efe6d2; }
.frame-no { font-family: var(--mono); font-size: 10px; color: #d98a3a; letter-spacing: 0.2em; }
.frame-cap b { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 0.95; letter-spacing: 0.02em; }
.frame-cap span:last-child { font-size: 12px; color: #b9a98c; }

/* ---------------- SC.04 MAIN TITLES ---------------- */
.seq { position: relative; }
.seq-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.seq-card { isolation: isolate; position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; padding: 0 var(--gutter); clip-path: inset(0 0 0 calc((1 - min(1, var(--cp, 0) * 3.2)) * 100%)); --cp: 0; }
.seq-card.c1 { z-index: 1; clip-path: none; background: var(--cream); color: #0b0b0b; }
.seq-card.c2 { z-index: 2; background: #0b0b0b; color: var(--cream); }
.seq-card.c3 { z-index: 3; background: var(--bass-red); color: #0b0b0b; }
.seq-card.c4 { z-index: 4; background: #0b0b0b; color: var(--cream); }
.seq-card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(64px, 10.5vw, 190px); line-height: 0.84; text-transform: uppercase; position: relative; z-index: 2; }
.seq-card h2 span { display: block; transform: translateX(calc((1 - min(1, var(--cp, 0) * 3 + 0.02)) * -40vw)); transition: transform 0.2s linear; }
.seq-card h2 span:nth-child(2) { transform: translateX(calc((1 - min(1, var(--cp, 0) * 2.6)) * 40vw)); }
.seq-card h2 span:nth-child(3) { transform: translateX(calc((1 - min(1, var(--cp, 0) * 2.2)) * -40vw)); }
.seq-card.c1 h2 span { transform: none; }
.seq-card h2 em { font-family: var(--serif); font-style: italic; text-transform: none; font-size: 0.8em; }
.seq-card.c1 h2 em, .seq-card.c4 h2 em { color: var(--bass-red); }
.seq-card.c2 h2 em { color: var(--gold); }
.seq-card.c4 h2 em { color: var(--gold); }
.seq-art { position: relative; height: 70vh; order: 2; }
.seq-art.bars i { position: absolute; bottom: 0; width: 9%; background: #0b0b0b; transform-origin: bottom; transform: scaleY(calc(0.25 + var(--sp, 0) * 3)); max-height: 100%; }
.seq-art.bars i:nth-child(1) { left: 0; height: 60%; } .seq-art.bars i:nth-child(2) { left: 13%; height: 85%; background: var(--bass-red); } .seq-art.bars i:nth-child(3) { left: 26%; height: 45%; } .seq-art.bars i:nth-child(4) { left: 39%; height: 95%; } .seq-art.bars i:nth-child(5) { left: 52%; height: 30%; } .seq-art.bars i:nth-child(6) { left: 65%; height: 75%; } .seq-art.bars i:nth-child(7) { left: 78%; height: 55%; }
.seq-art.eye { display: grid; place-items: center; }
.seq-art.eye i { width: min(40vw, 60vh); aspect-ratio: 1; border-radius: 50%; background: var(--gold); transform: scale(calc(0.3 + var(--cp) * 0.9)); position: relative; }
.seq-art.eye i::after { content: ""; position: absolute; left: -4%; right: -4%; top: 47%; height: 6%; background: #0b0b0b; }
.seq-art.eye b { position: absolute; width: min(8vw, 12vh); aspect-ratio: 1; border-radius: 50%; background: #0b0b0b; left: calc(38% + var(--cp) * 14%); top: 28%; }
.seq-art.shards i { position: absolute; inset: 0; background: #0b0b0b; transform-origin: 50% 50%; }
.seq-art.shards i:nth-child(1) { clip-path: polygon(50% 50%, 100% 0, 100% 30%); transform: rotate(calc(var(--cp) * 40deg)); }
.seq-art.shards i:nth-child(2) { clip-path: polygon(50% 50%, 20% 0, 45% 0); transform: rotate(calc(var(--cp) * -30deg)); }
.seq-art.shards i:nth-child(3) { clip-path: polygon(50% 50%, 0 70%, 0 100%); transform: rotate(calc(var(--cp) * 25deg)); background: var(--cream); }
.seq-art.shards i:nth-child(4) { clip-path: polygon(50% 50%, 80% 100%, 100% 80%); transform: rotate(calc(var(--cp) * -45deg)); }
.seq-art.shards i:nth-child(5) { clip-path: circle(calc(4% + var(--cp) * 8%) at 50% 50%); background: var(--cream); }
.seq-art.vortex { display: grid; place-items: center; }
.seq-art.vortex i { position: absolute; aspect-ratio: 1; background: var(--cream); transform: rotate(calc(var(--cp) * 120deg + var(--k) * 12deg)); }
.seq-art.vortex i:nth-child(odd) { background: #0b0b0b; }
.seq-art.vortex i:nth-child(1) { width: min(46vw, 66vh); --k: 1; } .seq-art.vortex i:nth-child(2) { width: min(39vw, 56vh); --k: 2; } .seq-art.vortex i:nth-child(3) { width: min(32vw, 46vh); --k: 3; background: var(--gold); } .seq-art.vortex i:nth-child(4) { width: min(25vw, 36vh); --k: 4; } .seq-art.vortex i:nth-child(5) { width: min(18vw, 26vh); --k: 5; } .seq-art.vortex i:nth-child(6) { width: min(11vw, 16vh); --k: 6; }
.seq-art.vortex img { position: relative; width: min(7vw, 10vh); transform: scale(calc(0.5 + var(--cp))); }
.seq-slate { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--lb) + 26px); display: flex; justify-content: space-between; z-index: 6; color: var(--cream); }
.seq-slate span { background: rgba(0, 0, 0, 0.7); padding: 6px 10px; }

/* ---------------- SC.05 STORYBOARD ---------------- */
.storyboard .pipe-track { gap: 34px; align-items: center; }
.board { flex: 0 0 min(470px, 80vw); background: var(--paper); color: #141414; padding: 16px 16px 20px; transform: rotate(var(--rot)); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 0, 0, 0.3); position: relative; }
.board::before { content: ""; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff6a5a, #9a130c); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5); }
.board-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; border-bottom: 1px solid #141414; padding-bottom: 8px; margin-bottom: 10px; }
.board-frame { position: relative; aspect-ratio: 16 / 9; border: 2px solid #141414; overflow: hidden; background: #fff; }
.board-frame svg.bass { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(1) contrast(1.4) brightness(1.15); opacity: 0.85; }
.board-frame::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(20, 20, 20, 0.1) 0 1px, transparent 1px 5px); mix-blend-mode: multiply; }
.board-arrow { position: absolute; left: 8%; right: 8%; bottom: 10%; width: 84%; z-index: 2; fill: none; stroke: #d4261c; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.board-cam { position: absolute; z-index: 2; right: 10px; top: 8px; font-family: var(--serif); font-style: italic; font-size: 20px; color: #d4261c; transform: rotate(-4deg); }
.board-notes h3 { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 0.9; margin: 14px 0 2px; }
.board-sub { font-family: var(--serif); font-style: italic; font-size: 18px; color: #7a1d12; margin-bottom: 6px; }
.board-notes p { margin: 0; font-size: 14px; color: #3a3a3a; }

/* ---------------- SC.06 DEPARTURE BOARD ---------------- */
.departure { background: #080808; border: 1px solid #222; border-radius: 12px; padding: 14px; box-shadow: inset 0 0 40px #000; }
.board-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 10px; border-bottom: 1px solid #1a1a1a; flex-wrap: wrap; }
.board-row:last-child { border-bottom: 0; }
.board-lbl { font-family: var(--mono); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.board-val { display: flex; gap: 4px; }
.flap { position: relative; display: inline-grid; place-items: center; width: clamp(40px, 5vw, 64px); height: clamp(56px, 7vw, 88px); background: linear-gradient(180deg, #1d1d1d 50%, #151515 50%); border-radius: 5px; font-family: var(--display); font-size: clamp(40px, 5.4vw, 72px); color: #f5f0e4; box-shadow: 0 2px 0 #000, inset 0 1px rgba(255, 255, 255, 0.06); perspective: 200px; overflow: hidden; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: #000; }
.flap i { font-style: normal; }
.flap.flip i { animation: flip 0.07s linear; }
@keyframes flip { from { transform: rotateX(80deg); opacity: 0.4; } }

/* ---------------- SC.07 STARRING ---------------- */
.starring { overflow: hidden; }
.starring-word { font-family: var(--serif); font-style: italic; font-size: clamp(90px, 17vw, 280px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(207, 174, 112, 0.55); text-align: center; margin: 10px 0 30px; }
.billing { display: grid; border-top: 1px solid var(--line-2); }
.bill { display: grid; grid-template-columns: 60px 1fr auto auto; align-items: baseline; gap: 18px; padding: 20px 6px; border-bottom: 1px solid var(--line-2); text-align: left; }
.bill-no { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.2em; }
.bill-name { font-family: var(--display); font-size: clamp(48px, 8vw, 128px); line-height: 0.85; letter-spacing: 0.01em; transition: letter-spacing 0.6s var(--ease), color 0.4s; }
.bill:hover .bill-name { letter-spacing: 0.05em; color: var(--gold); }
.bill-as { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 20px; }
.bill-role { font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.8vw, 40px); color: var(--gold); }
.billing-fine { margin: 40px auto 0; max-width: 980px; text-align: center; font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: rgba(242, 237, 228, 0.5); transform: scaleY(1.9); transform-origin: top; }
.bill-peek { position: fixed; top: 0; left: 0; z-index: 800; width: 240px; aspect-ratio: 3 / 4; pointer-events: none; opacity: 0; transition: opacity 0.3s, transform 0.18s var(--ease); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8); border: 6px solid var(--cream); background: var(--cream); }
.bill-peek.on { opacity: 1; }
.bill-peek .art { position: absolute; inset: 0 0 34% 0; }
.bill-peek .peek-cap { position: absolute; left: 10px; right: 10px; bottom: 8px; color: #111; }
.bill-peek .peek-cap span { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bass-red); }
.bill-peek .peek-cap p { margin: 4px 0 0; font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------- SC.09 THE TRADES ---------------- */
.trades { background: var(--paper); color: #121212; padding: clamp(22px, 3vw, 40px); transform: rotate(-0.6deg); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7); position: relative; }
.trades::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/><feColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"); mix-blend-mode: multiply; }
.tp-mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; border-bottom: 4px double #121212; padding-bottom: 12px; }
.tp-mast > span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.tp-mast > span:last-child { text-align: right; }
.tp-mast h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 8vw, 118px); line-height: 0.9; letter-spacing: -0.03em; text-align: center; text-transform: uppercase; }
.tp-mast h2 em { color: var(--bass-red); text-transform: none; }
.tp-strap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 0; border-bottom: 1px solid #121212; margin-bottom: 22px; }
.tp-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 30px; }
.tp-lead { display: block; padding-right: 30px; border-right: 1px solid #121212; }
.tp-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bass-red); }
.tp-lead h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.4vw, 64px); line-height: 0.98; letter-spacing: -0.02em; margin: 8px 0 16px; }
.tp-lead:hover h3, .tp-item:hover h4 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tp-photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 14px; filter: grayscale(1) contrast(1.35); }
.tp-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0.35) 0.9px, transparent 1.3px) 0 0 / 4px 4px; mix-blend-mode: multiply; }
.tp-dek { font-family: var(--serif); font-size: 17px; line-height: 1.5; margin: 0 0 10px; column-count: 2; column-gap: 24px; column-rule: 1px solid rgba(0, 0, 0, 0.2); }
.tp-dek::first-letter { float: left; font-size: 3.4em; line-height: 0.8; padding: 4px 6px 0 0; }
.tp-more { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.tp-side { display: grid; gap: 18px; align-content: start; }
.tp-item { display: block; padding-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.25); }
.tp-item h4 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.08; margin: 6px 0; }
.tp-item p { margin: 0; font-size: 13px; color: #3a3a3a; }
.tp-box { border: 2px solid #121212; padding: 12px; font-size: 13px; }
.tp-box b { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; margin-bottom: 6px; }
.tp-box div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px dotted rgba(0, 0, 0, 0.4); padding: 5px 0; font-family: var(--mono); font-size: 11px; }

/* ---------------- SC.10 REVIEWS ---------------- */
.blurbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.blurb { margin: 0; text-align: center; }
.blurb .stars { color: var(--gold); font-size: 22px; letter-spacing: 6px; margin-bottom: 14px; }
.blurb blockquote { margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }
.blurb figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }

/* ---------------- SC.11 TICKET BOOTH ---------------- */
.booth { overflow: hidden; background: radial-gradient(50% 60% at 50% 70%, rgba(207, 174, 112, 0.14), transparent 70%); }
.big-ticket { position: relative; margin: 40px auto 0; width: min(820px, 94vw); display: grid; grid-template-columns: 1fr clamp(120px, 20%, 190px); transform-style: preserve-3d; }
.bt-main, .bt-stub { background: linear-gradient(135deg, #f7f1e3, #e6d6ad); color: #1a1408; position: relative; }
.bt-main { padding: clamp(22px, 4vw, 44px); border-radius: 16px 0 0 16px; overflow: hidden; }
.bt-main::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid rgba(26, 20, 8, 0.35); border-radius: 10px; pointer-events: none; }
.bt-admit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0.7; }
.bt-main b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(90px, 16vw, 200px); line-height: 0.8; margin: 10px 0; letter-spacing: 0.04em; }
.bt-sub { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.6vw, 20px); }
.bt-grid { display: flex; gap: 34px; margin-top: 20px; font-weight: 700; }
.bt-grid span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; font-weight: 400; }
.bt-stub { border-radius: 0 16px 16px 0; display: grid; place-items: center; align-content: center; gap: 8px; border-left: 3px dashed rgba(26, 20, 8, 0.45); cursor: grab; touch-action: none; transition: transform 0.5s var(--ease); background: linear-gradient(135deg, #e0c07a, #cfae70); }
.bt-stub span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; }
.bt-stub b { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 5vw, 60px); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.1em; }
.bt-stub em { font-style: normal; font-size: 28px; }
.big-ticket::before, .big-ticket::after { content: ""; position: absolute; right: calc(clamp(120px, 20%, 190px) - 16px); width: 32px; height: 32px; border-radius: 50%; background: var(--bg); z-index: 3; }
.big-ticket::before { top: -16px; }
.big-ticket::after { bottom: -16px; }
.big-ticket.torn .bt-stub { animation: tear 0.9s cubic-bezier(0.5, 0, 0.8, 0.4) forwards; }
@keyframes tear { 0% { transform: rotate(4deg); } 30% { transform: translate(30px, -10px) rotate(12deg); } 100% { transform: translate(160px, 90vh) rotate(70deg); opacity: 0; } }

/* ---------------- Misc page-wide polish ---------------- */
.section .h2, .section .h-display { text-wrap: balance; }
.btn-gold { box-shadow: 0 0 0 1px rgba(207, 174, 112, 0.3), 0 10px 40px -12px rgba(207, 174, 112, 0.7); }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .theater { --sw: 90vw; }
  .drape { width: 5vw; }
  .exit-sign { display: none; }
  .seats { height: 22vh; }
  .theater-ui .actions { flex-direction: column; align-items: stretch; padding: 0 20px; }
  .sc-feat { grid-template-columns: 34% 1fr; }
  .seq-card { grid-template-columns: 1fr; align-content: center; gap: 20px; }
  .seq-art { height: 34vh; order: 0; }
  .tp-grid, .blurbs { grid-template-columns: 1fr; }
  .tp-lead { border-right: 0; padding-right: 0; }
  .tp-dek { column-count: 1; }
  .tp-mast { grid-template-columns: 1fr; text-align: center; }
  .tp-mast > span:last-child { text-align: center; }
  .bill { grid-template-columns: 1fr; gap: 4px; }
  .bill-no, .bill-as { display: none; }
  .hud .scene { display: none; }
}
@media (max-width: 640px) {
  .bulbs.left, .bulbs.right { display: none; }
  .reel-film { transform: rotate(-1deg); }
  .board-row { justify-content: center; }
  .big-ticket { grid-template-columns: 1fr 96px; }
  .big-ticket::before, .big-ticket::after { right: 80px; }
  .bt-grid { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .seq-card { position: relative; clip-path: none !important; min-height: 100vh; }
  .seq-stage { position: relative; height: auto; }
  .seq-card h2 span { transform: none !important; }
  .marquee-sign .tile { opacity: 1; transform: rotate(var(--r)); }
  .drape { animation: none; }
  .theater .screen, .theater .theater-ui { opacity: 1; transform: none; }
}

/* ---------------- Ticket printer (RSVP) ---------------- */
.printer { position: relative; overflow: hidden; padding-top: 16px; margin-top: -4px; }
.printer .slot { position: absolute; top: 0; left: -2%; right: -2%; height: 16px; z-index: 5; border-radius: 8px; background: linear-gradient(180deg, #000, #1a1a1a); box-shadow: inset 0 4px 8px #000, 0 1px 0 rgba(255, 255, 255, 0.08); }
.printer .ticket { animation: print 1.7s steps(16) 0.2s both; }
@keyframes print { from { transform: translateY(-104%); } }
@media (max-width: 640px) {
  .house { flex-wrap: wrap; justify-content: center; text-align: center; padding: 0 24px; font-size: 10px; }
  .house .sep, #screen-count { display: none; }
}

/* =========================================================================
   ROUND 3 · header, LED sign, end credits, slates, type, page craft
   ========================================================================= */

/* ---------------- Pre-show footer ---------------- */
.preshow > .ps-foot { position: absolute; left: 28px; right: 28px; bottom: 26px; display: flex; justify-content: space-between; align-items: center; z-index: 4; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.ps-foot span { display: inline-flex; align-items: center; gap: 10px; }
.ps-foot img { width: 22px; }
.ps-snd { color: var(--gold); animation: pulse 1.4s infinite; }
.ps-skip { font: inherit; letter-spacing: inherit; color: var(--cream); border: 1px solid var(--line-2); padding: 8px 14px; border-radius: 99px; }

/* ---------------- Header: floating control deck ---------------- */
.nav { top: calc(var(--bar-h) + 12px); left: var(--gutter); right: var(--gutter); height: 60px; padding: 0 10px 0 16px; gap: 20px; border-radius: 999px; background: rgba(10, 9, 8, 0.42); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(242, 237, 228, 0.1); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8), inset 0 1px rgba(255, 236, 205, 0.08); transition: transform 0.5s var(--ease), background 0.4s, height 0.4s; }
.nav::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.5; }
.nav.solid { background: rgba(8, 7, 6, 0.82); border-color: rgba(242, 237, 228, 0.12); }
.nav.hide { transform: translateY(calc(-100% - var(--bar-h) - 20px)); }
.brand img { width: 34px; height: 34px; }
.brand-word { font-size: 24px; }
.nav-links { gap: 2px; }
.nav-links a { display: flex; align-items: flex-start; gap: 4px; padding: 8px 12px; border-radius: 99px; transition: background 0.3s, color 0.3s; }
.nav-links a sup { font-size: 8px; color: var(--gold); letter-spacing: 0.1em; opacity: 0.8; margin-top: -2px; }
.nav-links a::after { left: 50%; right: auto; width: 4px; height: 4px; border-radius: 50%; bottom: 0; transform: translateX(-50%) scale(0); background: var(--red-2); box-shadow: 0 0 8px var(--red-2); transition: transform 0.3s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after { transform: translateX(-50%) scale(1); }
.nav-links a:hover { background: rgba(242, 237, 228, 0.07); }
.nav-links a.active { color: var(--gold); }
.onair { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #ff6a5a; border: 1px solid rgba(255, 106, 90, 0.35); border-radius: 4px; padding: 4px 8px; text-shadow: 0 0 8px rgba(255, 64, 82, 0.6); }
.onair i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: pulse 1.2s infinite; }
.nav-ticket { position: relative; display: inline-flex; align-items: stretch; height: 42px; background: var(--gold); color: #120e06; font-weight: 800; -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; transition: transform 0.3s var(--ease), filter 0.3s; }
.nav-ticket:hover { filter: brightness(1.12) drop-shadow(0 0 16px rgba(207, 174, 112, 0.6)); }
.nav-ticket span { display: grid; place-items: center; padding: 0 14px 0 16px; }
.nt-a { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; border-right: 2px dashed rgba(18, 14, 6, 0.45); max-width: 70px; line-height: 1.2; text-align: center; }
.nt-b { font-family: var(--display); font-size: 22px; letter-spacing: 0.08em; padding-right: 18px !important; }
@media (max-width: 1320px) { .onair { display: none; } }
@media (max-width: 1180px) { .nav-ticket { display: none; } }
@media (max-width: 640px) { .nav { left: 10px; right: 10px; top: calc(var(--bar-h) + 8px); height: 54px; } }

/* Mobile menu: projection booth */
.mobile-menu { background: radial-gradient(80% 60% at 50% 0%, rgba(255, 227, 176, 0.12), transparent 60%), #050404; }
.mm-sprockets { position: absolute; top: 0; bottom: 0; width: 26px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='34'><rect width='26' height='34' fill='%23140d06'/><rect x='6' y='9' width='14' height='16' rx='3' fill='%23efe6d2' fill-opacity='.8'/></svg>") repeat-y; }
.mm-sprockets.l { left: 0; } .mm-sprockets.r { right: 0; }
.mm-head { margin-bottom: 14px; color: var(--gold); }
.mobile-menu a.big small { font-size: 10px; }

/* ---------------- Announcement: LED sign ---------------- */
.announce { background: #0a0806; color: #ffb347; padding: 0 46px 0 0; justify-content: flex-start; border-bottom: 1px solid #2a1d0c; box-shadow: inset 0 -10px 20px rgba(255, 150, 40, 0.05); }
.announce .live { flex-shrink: 0; height: 100%; display: inline-flex; align-items: center; padding: 0 12px; background: var(--red); color: #fff; letter-spacing: 0.2em; }
.announce .live::before { background: #fff; }
.led { flex: 1; min-width: 0; overflow: hidden; height: 100%; display: flex; align-items: center; border: 0 !important; position: relative; }
.led::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 0.9px, #0a0806 1.4px) 0 0 / 3px 3px; opacity: 0.55; }
.led-track { display: inline-flex; white-space: nowrap; animation: marquee 38s linear infinite; }
.led:hover .led-track { animation-play-state: paused; }
.led-item { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding-right: 60px; text-shadow: 0 0 6px rgba(255, 170, 60, 0.9), 0 0 16px rgba(255, 140, 30, 0.5); }
.led-item b { color: #ff5b3a; }
.led-item em { font-style: normal; color: #fff1d6; }
.announce button { color: #ffb347; }

/* ---------------- Type: letter-by-letter, light sweep, glitch ---------------- */
.split-line > span { transform: none !important; transition: none; }
.split-line .ch { display: inline-block; transform: translateY(110%) rotate(10deg); filter: blur(8px); opacity: 0; transition: transform 1s var(--ease), filter 0.9s var(--ease), opacity 0.6s; transition-delay: calc(var(--c) * 22ms); }
.in .split-line .ch, .split-line.in .ch, [data-split].in .ch { transform: none; filter: none; opacity: 1; }
h1 em, .h-display em, .h2 em, .ec-title em, .te-h em { display: inline-block; padding-right: 0.06em; }
:is(h1, .h-display, .h2, .ec-title, .te-h) em .ch,
:is(h1, .h-display, .h2, .ec-title, .te-h) em:not(:has(.ch)) {
  background: linear-gradient(100deg, #cfae70 0%, #cfae70 38%, #fff4d6 50%, #cfae70 62%, #a8864a 100%) 0 0 / 320% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: shimmer 4.8s linear infinite; animation-delay: calc(var(--c, 0) * 70ms);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
.h-display:hover, .h2:hover, .ec-title:hover, .bill-name:hover { animation: rgbsplit 0.4s steps(3) 1; }
@keyframes rgbsplit { 0% { text-shadow: 3px 0 rgba(255, 40, 60, 0.8), -3px 0 rgba(0, 220, 255, 0.8); } 33% { text-shadow: -4px 1px rgba(255, 40, 60, 0.8), 4px -1px rgba(0, 220, 255, 0.8); transform: translateX(2px); } 66% { text-shadow: 2px -1px rgba(255, 40, 60, 0.8), -2px 1px rgba(0, 220, 255, 0.8); transform: translateX(-1px); } 100% { text-shadow: none; transform: none; } }
.eyebrow { font-variant-numeric: tabular-nums; }
.lede { color: #b9b2a5; }
.lede::first-line { color: var(--cream); }

/* Focus-pull reveal: things arrive out of focus, then snap sharp */
.reveal { filter: blur(10px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1.1s var(--ease); }
.reveal.in { filter: none; }

/* ---------------- Page hero: title card ---------------- */
.page-hero { min-height: 86vh; }
.hero-word { position: absolute; z-index: -1; left: -2vw; bottom: 4vh; font-family: var(--display); font-size: 30vw; line-height: 0.78; color: transparent; -webkit-text-stroke: 1px rgba(242, 237, 228, 0.09); white-space: nowrap; pointer-events: none; user-select: none; }
.page-hero .h-display { font-size: clamp(64px, 11vw, 176px); text-shadow: 0 10px 60px rgba(0, 0, 0, 0.6); }
.slate { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + var(--bar-h) + 50px); width: min(380px, 30vw); transform: rotate(3deg); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.7)); z-index: 2; transition: transform 0.3s ease-out; }
.slate-top, .slate-bar { height: 34px; display: grid; grid-template-columns: repeat(6, 1fr); background: #111; border: 2px solid #111; overflow: hidden; }
.slate-top i, .slate-bar i { background: linear-gradient(90deg, transparent 0 50%, #f2ede4 50%) 0 0 / 100% 100%; transform: skewX(-30deg) scaleX(1.5); }
.slate-top i:nth-child(even), .slate-bar i:nth-child(even) { background: #111; }
.slate-top i:nth-child(odd), .slate-bar i:nth-child(odd) { background: #f2ede4; }
.slate-top { transform-origin: 3% 100%; transform: rotate(-26deg); transition: transform 0.28s cubic-bezier(0.6, 0, 0.9, 0.4); border-radius: 3px 3px 0 0; }
.slate.clap .slate-top { transform: rotate(0); }
.slate.clap .slate-body { animation: clapShake 0.3s 0.25s steps(3); }
@keyframes clapShake { 33% { transform: translate(2px, 1px); } 66% { transform: translate(-1px, -1px); } }
.slate-body { display: grid; grid-template-columns: repeat(3, 1fr); background: #141414; color: #f2ede4; border: 2px solid #111; border-top: 0; }
.slate-body div { padding: 8px 10px; border-right: 1px solid rgba(242, 237, 228, 0.25); border-bottom: 1px solid rgba(242, 237, 228, 0.25); font-family: var(--display); font-size: 22px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slate-body div.w { grid-column: 1 / -1; font-size: 18px; }
.slate-body span { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.slate-body div:nth-child(3n + 4) { border-right: 0; }
@media (max-width: 900px) { .slate { display: none; } .hero-word { font-size: 44vw; } }

/* ---------------- Filters as slate chips ---------------- */
.filter { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 4px; padding: 10px 14px; border-color: rgba(242, 237, 228, 0.16); }
.filter.on { background: var(--gold); border-color: var(--gold); color: #111; box-shadow: 0 0 20px -4px rgba(207, 174, 112, 0.7); }

/* ---------------- Events: perforated ticket stubs ---------------- */
.ev { grid-template-columns: 130px 260px 1fr auto; padding: 0; gap: 0; border-radius: 12px; background: linear-gradient(135deg, #15120e, #0e0c0a); border: 1px solid rgba(207, 174, 112, 0.18); overflow: visible; }
.ev > * { padding: 20px; }
.ev::before, .ev::after { content: ""; position: absolute; left: 118px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 1px solid rgba(207, 174, 112, 0.18); z-index: 2; }
.ev::before { top: -13px; clip-path: inset(50% 0 0 0); }
.ev::after { bottom: -13px; clip-path: inset(0 0 50% 0); }
.ev-date { align-self: stretch; display: grid; align-content: center; border-right: 2px dashed rgba(207, 174, 112, 0.35); padding-right: 20px; background: linear-gradient(180deg, rgba(207, 174, 112, 0.12), rgba(207, 174, 112, 0.03)); border-radius: 12px 0 0 12px; }
.ev-date .d { font-size: 76px; color: var(--cream); text-shadow: 0 0 30px rgba(255, 227, 176, 0.25); }
.ev-thumb.in-list { margin: 16px 0 16px 20px; padding: 0; width: calc(100% - 20px); height: calc(100% - 32px); aspect-ratio: auto; min-height: 150px; border-radius: 6px; }
.ev:hover { transform: translateY(-4px) rotate(-0.3deg); border-color: rgba(207, 174, 112, 0.5); box-shadow: 0 30px 60px -30px rgba(207, 174, 112, 0.4); }
.ev h3 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 2.6vw, 40px); line-height: 0.95; letter-spacing: 0.01em; }
.ev-actions { align-self: stretch; justify-content: center; border-left: 1px solid rgba(207, 174, 112, 0.14); }
@media (max-width: 1180px) { .ev { grid-template-columns: 110px 200px 1fr; } .ev::before, .ev::after { left: 98px; } .ev-actions { border-left: 0; border-top: 1px solid rgba(207, 174, 112, 0.14); } }
@media (max-width: 640px) { .ev { grid-template-columns: 84px 1fr; } .ev::before, .ev::after { left: 72px; } .ev > * { padding: 14px; } .ev-date .d { font-size: 50px; } }

/* ---------------- Workshops: episode cards ---------------- */
.ws { border-radius: 10px; background: #0f0d0b; border-color: rgba(242, 237, 228, 0.1); }
.ws-media::before { content: "EPISODIC"; position: absolute; z-index: 3; top: 10px; right: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em; color: #111; background: var(--cream); padding: 4px 7px; }
.ws-media .card-label { font-size: clamp(44px, 4vw, 60px); }
.ws-media::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent 60%); }
.ws-body h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; }
.ws:hover .ws-media .art { transform: scale(1.06); }
.ws-media .art { transition: transform 1s var(--ease); }
.ws-media { overflow: hidden; }
.ws .seat-bar, .facts { border-radius: 4px; }

/* ---------------- Team: casting board ---------------- */
.cast { gap: 26px; }
.cast-card { background: var(--cream); padding: 10px 10px 64px; border-radius: 2px; border: 0; aspect-ratio: 3 / 4.3; transform: rotate(calc((var(--r, 0) - 0.5) * 3deg)); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.8); transition: transform 0.5s var(--ease); }
.cast-card:nth-child(3n) { --r: 0.9; } .cast-card:nth-child(3n + 1) { --r: 0.2; } .cast-card:nth-child(3n + 2) { --r: 0.6; }
.cast-card:hover { transform: rotate(0) translateY(-8px) scale(1.02); z-index: 3; }
.cast-card .art { inset: 10px 10px 64px; }
.cast-card::after { inset: 10px 10px 64px; }
.cast-card::before { content: ""; position: absolute; top: -10px; left: 50%; width: 60px; height: 22px; margin-left: -30px; background: rgba(242, 237, 228, 0.55); transform: rotate(-3deg); z-index: 4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.cast-card .initials { top: 40%; }
.cast-info { left: 14px; right: 14px; bottom: 12px; color: #111; }
.cast-info .r { color: var(--bass-red); }
.cast-info .n { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: 0.02em; }
.cast-info .y { color: #6b6252; }
.cast-info .bio { display: none; }
.team-group-head h2 { font-size: clamp(44px, 6vw, 90px); }

/* ---------------- Section heads everywhere get a slate rule ---------------- */
.sec-head { position: relative; padding-top: 22px; }
.sec-head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, #f2ede4 0 18px, #111 18px 36px); transform: skewX(-30deg); opacity: 0.18; }

/* ---------------- End credits ---------------- */
.footer { margin-top: 0; padding-bottom: 0; background: #030303; border-top: 0; }
.end-credits { padding: clamp(90px, 12vw, 180px) 0 80px; text-align: center; background: radial-gradient(60% 40% at 50% 0%, rgba(207, 174, 112, 0.08), transparent 70%); }
.ec-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); margin: 0 0 20px; }
.ec-title { font-family: var(--display); font-weight: 400; font-size: clamp(60px, 11vw, 170px); line-height: 0.84; margin: 0 auto 70px; max-width: 1200px; color: var(--cream); }
.ec-title em { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 0.8em; }
.ec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; max-width: 1100px; margin: 0 auto; }
.cr { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; }
.cr-role { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.4vw, 20px); color: var(--muted); white-space: nowrap; }
.cr-dots { flex: 1; border-bottom: 1px dotted rgba(242, 237, 228, 0.25); transform: translateY(-4px); }
.cr-name { font-family: var(--display); font-size: clamp(28px, 2.6vw, 40px); letter-spacing: 0.06em; color: var(--cream); line-height: 1; white-space: nowrap; transition: color 0.3s, letter-spacing 0.4s var(--ease); }
a.cr-name:hover { color: var(--gold); letter-spacing: 0.1em; }
.ec-block { max-width: 900px; margin: 60px auto 0; font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242, 237, 228, 0.42); transform: scaleY(1.8); line-height: 1.35; }
.the-end { position: relative; min-height: 110vh; display: grid; place-items: center; overflow: hidden; text-align: center; isolation: isolate; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 227, 176, 0.12), transparent 70%), #080706; }
.iris { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #000; -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--ir, 120vmax), #000 calc(var(--ir, 120vmax) + 2px)); mask: radial-gradient(circle at 50% 50%, transparent var(--ir, 120vmax), #000 calc(var(--ir, 120vmax) + 2px)); }
.te-inner { position: relative; z-index: 2; }
.te-fin { font-family: var(--serif); font-style: italic; font-size: clamp(90px, 16vw, 250px); line-height: 0.9; margin: 0; color: var(--cream); text-shadow: 0 0 60px rgba(255, 227, 176, 0.3); }
.te-post { margin: 30px 0 10px; color: var(--gold); }
.te-h { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 5vw, 76px); margin: 0 0 8px; }
.te-h em { font-family: var(--serif); color: var(--gold); }
.te-sub { color: var(--muted); margin: 0 0 26px; }
.ticket-signup { position: relative; max-width: 640px; margin: 0 auto; padding: 8px; background: linear-gradient(135deg, #f7f1e3, #e6d6ad); border-radius: 12px; align-items: center; }
.ticket-signup .ts-admit { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #6b5a3a; padding: 0 16px; border-right: 2px dashed rgba(26, 20, 8, 0.35); white-space: nowrap; align-self: stretch; display: grid; place-items: center; }
.ticket-signup input[type="email"] { background: transparent; border: 0; color: #111; }
.ticket-signup input[type="email"]::placeholder { color: #8a7c62; }
.footer-bottom { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between; padding: 30px var(--gutter); border-top: 1px solid var(--line); margin: 0 auto; }
.footer-bottom p { flex: 1 1 400px; font-size: 11px; letter-spacing: 0.04em; }
.footer .giant { margin: 20px 0 -3vw; font-size: 26vw; -webkit-text-stroke: 1px rgba(207, 174, 112, 0.14); }
.footer .giant span { display: inline-block; background: linear-gradient(90deg, transparent 30%, rgba(207, 174, 112, 0.25) 50%, transparent 70%) -100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: sweepText 7s ease-in-out infinite; }
@keyframes sweepText { 0%, 40% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
@media (max-width: 900px) { .ec-grid { grid-template-columns: 1fr; } .cr-role { white-space: normal; text-align: left; } .ticket-signup { flex-direction: row; } .ticket-signup .ts-admit { display: none; } }
@media (max-width: 640px) { .ticket-signup { flex-direction: column; } .cr-name { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .split-line .ch { transform: none; filter: none; opacity: 1; } .reveal { filter: none; } .iris { display: none; } }

/* ---------------- Vanderbilt Greenlight wordmark ---------------- */
.brand-stack { display: grid; gap: 1px; font-family: var(--display); font-size: 15px; line-height: 0.95; letter-spacing: 0.2em; text-transform: uppercase; }
.brand-stack span:last-child { color: #2fbf71; }
.footer-bottom .brand-stack { font-size: 14px; }
.footer .giant { font-size: 17vw; }
.bt-main b { font-size: clamp(56px, 10vw, 130px); }
.mq-crown span { font-size: 24px; }

/* ---------------- Photo tone & framing (set in the admin) ---------------- */
.sc-poster .art { position: absolute; inset: 0; }
.art.has-img img { transition: transform 0.6s var(--ease); }
.art.tone-mono img { filter: grayscale(1) contrast(1.1); }
.art.tone-mono::after { display: none; }
.art.tone-original img { filter: none; }
.art.tone-original::after { display: none; }

/* =========================================================================
   PAGE TRANSITIONS (iris · clapperboard · reel change · whip pan)
   ========================================================================= */
.tx { position: fixed; inset: 0; z-index: 99990; pointer-events: none; }
.tx-iris { background: transparent; }
/* clapperboard slams down, then lifts away on the next page */
.tx-clap { display: grid; place-items: center; background: rgba(0, 0, 0, 0.92); transform: translateY(-100%); transition: transform 0.36s cubic-bezier(0.7, 0, 0.3, 1); }
.tx-clap.in { transform: none; }
.tx-clap.out { transform: translateY(-100%); transition-duration: 0.6s; }
.tx-board { width: min(560px, 86vw); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7)); }
.tx-stick { display: flex; height: 54px; background: #111; border-radius: 6px 6px 0 0; overflow: hidden; transform-origin: 3% 100%; transform: rotate(-24deg); transition: transform 0.16s cubic-bezier(0.8, 0, 1, 1); border: 2px solid #f2ede4; border-bottom: 0; }
.tx-clap.shut .tx-stick { transform: rotate(0); }
.tx-stick i { flex: 1; background: linear-gradient(115deg, #f2ede4 0 48%, #111 48% 100%); }
.tx-slate { background: #121212; border: 2px solid #f2ede4; border-radius: 0 0 8px 8px; padding: 18px 22px 16px; color: #f2ede4; font-family: var(--mono); }
.tx-prod { display: flex; align-items: baseline; gap: 14px; border-bottom: 1.5px solid rgba(242, 237, 228, 0.5); padding-bottom: 10px; }
.tx-prod span, .tx-grid span, .tx-foot { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #a8a296; }
.tx-prod b { font-family: var(--display); font-weight: 400; font-size: 40px; letter-spacing: 0.08em; }
.tx-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr; border-bottom: 1.5px solid rgba(242, 237, 228, 0.5); }
.tx-grid div { padding: 10px 10px 10px 0; display: grid; gap: 4px; }
.tx-grid div + div { border-left: 1.5px solid rgba(242, 237, 228, 0.5); padding-left: 12px; }
.tx-grid b { font-family: "Courier Prime", "Courier New", monospace; font-size: clamp(18px, 3vw, 26px); font-weight: 700; color: #fff; text-transform: uppercase; }
.tx-foot { display: flex; justify-content: space-between; padding-top: 10px; }
/* reel change: the cue mark in the top-right corner, then the flash */
.tx-reel .tx-cue { position: absolute; right: 7vw; top: 9vh; width: 5.5vmin; height: 5.5vmin; border-radius: 50%; background: radial-gradient(circle, #fff 0 40%, rgba(255, 255, 255, 0.85) 46%, transparent 70%); box-shadow: 0 0 24px 6px rgba(255, 255, 255, 0.35); animation: txCue 0.22s steps(1) 2; }
@keyframes txCue { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tx-reel.flash { background: #fffaf0; transition: background 0.1s; }
/* whip pan: light streaks tear across the frame */
.tx-whip { overflow: hidden; }
.tx-whip::before { content: ""; position: absolute; inset: 0; background: #050505; transform: translateX(105%); transition: transform 0.4s cubic-bezier(0.8, 0, 0.2, 1); }
.tx-whip i { position: absolute; left: 0; height: 2px; width: 70vw; background: linear-gradient(90deg, transparent, rgba(255, 244, 214, 0.9), transparent); transform: translateX(140vw); transition: transform 0.4s cubic-bezier(0.8, 0, 0.2, 1); filter: blur(1px); }
.tx-whip i:nth-child(1) { top: 18%; } .tx-whip i:nth-child(2) { top: 31%; height: 5px; transition-delay: 0.02s; } .tx-whip i:nth-child(3) { top: 47%; transition-delay: 0.04s; } .tx-whip i:nth-child(4) { top: 59%; height: 8px; opacity: 0.6; } .tx-whip i:nth-child(5) { top: 72%; transition-delay: 0.03s; } .tx-whip i:nth-child(6) { top: 86%; height: 3px; }
.tx-whip.cover::before { transform: none; }
.tx-whip.cover i { transform: translateX(-80vw); }
.tx-whip.cover.away::before { transform: translateX(-105%); transition-duration: 0.55s; }
.tx-whip.away i { transform: translateX(-160vw); }