@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --black: #050405;
  --charcoal: #11100f;
  --velvet: #721428;
  --velvet-dark: #26070f;
  --velvet-light: #a12646;
  --purple: #7a3199;
  --magenta: #d92a99;
  --gold: #b68a3e;
  --gold-high: #e0bf79;
  --ivory: #e8dfcb;
  --emerald: #446c4c;
  --line: rgba(224, 191, 121, .32);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ivory);
  background:
    radial-gradient(circle at 50% 8%, rgba(122, 49, 153, .2), transparent 31rem),
    linear-gradient(180deg, #050405, #0b070a 52%, #030303);
  font-family: Inter, Arial, sans-serif;
}
button, input { font: inherit; }
a { color: inherit; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; padding: 12px 16px; color: #000; background: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header {
  position: relative;
  z-index: 40;
  padding: 18px 0;
  border-bottom: 1px solid rgba(224, 191, 121, .22);
  background: rgba(5, 4, 5, .94);
  backdrop-filter: blur(14px);
}
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; }
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mark img { display: block; width: 42px; height: 42px; object-fit: contain; filter: sepia(1) saturate(.55) brightness(1.35); }
.mark span { font: 600 13px/1.3 Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.navlinks { display: flex; align-items: center; gap: 25px; font: 500 10px Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.navlinks a { text-decoration: none; opacity: .76; transition: color .2s ease, opacity .2s ease; }
.navlinks a:hover, .navlinks a:focus-visible, .navlinks a.active { color: var(--gold-high); opacity: 1; }
.navlinks .contact { padding: 12px 16px; border: 1px solid var(--gold); color: var(--gold-high); opacity: 1; }
.mobile-menu { display: none; width: 46px; height: 46px; border: 1px solid var(--gold); color: var(--gold-high); background: #0b0809; font: 600 10px Cinzel, Georgia, serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

.show-hero { padding: 72px 0 42px; text-align: center; }
.eyebrow { margin: 0 0 16px; color: var(--gold-high); font: 600 10px Cinzel, Georgia, serif; letter-spacing: .3em; text-transform: uppercase; }
.show-hero h1 { margin: 0; font: 800 clamp(43px, 8vw, 96px)/.95 Cinzel, Georgia, serif; letter-spacing: -.035em; text-transform: uppercase; text-shadow: 0 5px 0 #1f0b15, 0 16px 45px #000; }
.show-hero h1 span { display: block; color: var(--magenta); }
.show-hero .lead { max-width: 700px; margin: 24px auto 0; color: #aa9e9f; font-size: 16px; line-height: 1.7; }

.theater-stage { padding: 18px 0 110px; perspective: 1500px; }
.screening-room {
  position: relative;
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: 70px clamp(28px, 6vw, 88px) 0;
  overflow: hidden;
  border: 2px solid #7b5721;
  border-radius: 26px 26px 8px 8px;
  background:
    linear-gradient(90deg, rgba(62, 15, 48, .54), transparent 20%, transparent 80%, rgba(62, 15, 48, .54)),
    radial-gradient(ellipse at 50% 10%, rgba(217, 42, 153, .12), transparent 48%),
    linear-gradient(180deg, #090609, #12090f 62%, #080606);
  box-shadow: 0 45px 110px #000, inset 0 0 90px #000;
}
.screening-room::before,
.screening-room::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(38px, 7vw, 100px);
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(224, 191, 121, .08) 0 1px, transparent 1px 17px),
    linear-gradient(90deg, #170d15, #281020 50%, #0d080c);
  border-color: rgba(182, 138, 62, .35);
}
.screening-room::before { left: 0; border-right: 1px solid; box-shadow: 18px 0 42px rgba(0, 0, 0, .75); }
.screening-room::after { right: 0; border-left: 1px solid; box-shadow: -18px 0 42px rgba(0, 0, 0, .75); }

.ceiling-lights {
  position: absolute;
  top: 17px;
  left: 15%;
  right: 15%;
  height: 22px;
  opacity: .32;
  background:
    radial-gradient(circle at 4% 50%, var(--gold-high) 0 1px, transparent 2px),
    radial-gradient(circle at 20% 50%, var(--gold-high) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 50%, var(--gold-high) 0 1px, transparent 2px),
    radial-gradient(circle at 52% 50%, var(--gold-high) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 50%, var(--gold-high) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 50%, var(--gold-high) 0 1px, transparent 2px),
    radial-gradient(circle at 100% 50%, var(--gold-high) 0 1px, transparent 2px);
  filter: drop-shadow(0 0 5px rgba(224, 191, 121, .55));
}

.sconce {
  position: absolute;
  z-index: 3;
  width: 34px;
  height: 72px;
  pointer-events: none;
}
.sconce.left { left: clamp(8px, 2vw, 28px); }
.sconce.right { right: clamp(8px, 2vw, 28px); }
.sconce.upper { top: 17%; }
.sconce.lower { top: 48%; }
.sconce::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 23px;
  height: 34px;
  transform: translateX(-50%);
  clip-path: polygon(19% 0, 81% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #2a1025, #8d2e83 48%, #311027);
  border-top: 2px solid var(--gold);
  box-shadow: 0 0 13px rgba(217, 42, 153, .48), 0 0 42px rgba(122, 49, 153, .38);
}
.sconce::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 4px;
  height: 34px;
  transform: translateX(-50%);
  background: linear-gradient(var(--gold-high), #5f3b0f);
  box-shadow: -8px 28px 0 -1px var(--gold), 8px 28px 0 -1px var(--gold);
}

.proscenium {
  position: relative;
  z-index: 5;
  padding: clamp(15px, 2.5vw, 28px);
  border: 2px solid var(--gold);
  background:
    linear-gradient(135deg, rgba(224, 191, 121, .14), transparent 25%),
    linear-gradient(110deg, #170b13, #070607 45%, #170b13);
  box-shadow: 0 0 0 6px #211309, 0 0 0 8px #765019, 0 25px 65px #000, inset 0 0 32px #000;
}
.proscenium::before,
.proscenium::after {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  width: clamp(12px, 2vw, 23px);
  border: 1px solid var(--gold);
  background: repeating-linear-gradient(90deg, #120a08 0 5px, #8f6427 6px 7px, #2a170a 8px 13px);
}
.proscenium::before { left: -16px; }
.proscenium::after { right: -16px; }
.marquee { margin: 0 0 15px; color: var(--gold-high); text-align: center; font: 700 clamp(11px, 1.5vw, 15px) Cinzel, Georgia, serif; letter-spacing: .3em; text-transform: uppercase; }

.screen-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid #050505;
  background: #000;
  box-shadow: 0 0 0 1px rgba(224, 191, 121, .55), 0 0 40px rgba(217, 42, 153, .14), inset 0 0 35px #000;
}
.screen-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.screen-curtain {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 35px;
  color: var(--ivory);
  text-align: center;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2%, transparent 2% 5%),
    radial-gradient(circle, rgba(217,42,153,.18), transparent 45%),
    linear-gradient(90deg, #220711, #5b1025 48%, #220711);
  transition: opacity .35s ease, visibility .35s ease;
}
.screen-curtain.hidden { opacity: 0; visibility: hidden; }
.screen-curtain strong { font: 800 clamp(24px, 4vw, 52px) Cinzel, Georgia, serif; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 4px 15px #000; }
.screen-curtain span { color: var(--gold-high); font: 600 10px Cinzel, Georgia, serif; letter-spacing: .22em; text-transform: uppercase; }

.player-console { padding: 18px 3px 0; }
.now-title-row { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 14px; }
.now-title-row p { margin: 0 0 6px; color: var(--gold-high); font: 600 9px Cinzel, Georgia, serif; letter-spacing: .24em; text-transform: uppercase; }
.now-title-row h2 { margin: 0; font: 700 clamp(17px, 2.5vw, 27px) Cinzel, Georgia, serif; }
.screen-status { display: inline-flex; align-items: center; gap: 8px; color: #b5aaa0; font: 600 9px Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
.screen-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 12px var(--magenta); }
.screen-status.playing::before { background: #68bc79; box-shadow: 0 0 12px #68bc79; }
.screen-status.unavailable::before { background: #9c2738; box-shadow: 0 0 10px #9c2738; }

.video-timeline { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 12px; color: #8f8383; font-size: 10px; font-variant-numeric: tabular-nums; }
input[type='range'] { width: 100%; accent-color: var(--magenta); cursor: pointer; }
.video-controls { display: grid; grid-template-columns: auto auto auto minmax(100px, 1fr) auto; align-items: center; gap: 9px; margin-top: 13px; }
.control-button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(224, 191, 121, .55);
  color: var(--gold-high);
  background: linear-gradient(180deg, #181112, #070606);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 3px 0 #020202;
  font: 700 9px Cinzel, Georgia, serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.control-button:hover, .control-button:focus-visible { border-color: var(--magenta); color: #fff; outline: none; box-shadow: 0 0 17px rgba(217,42,153,.2), 0 3px 0 #020202; }
.control-button.primary { color: #fff; border-color: #dd60b2; background: linear-gradient(180deg, #a82478, #4a1035); }
.control-button:disabled { opacity: .35; cursor: not-allowed; }
.volume-control { display: grid; grid-template-columns: auto minmax(75px, 1fr); align-items: center; gap: 10px; padding-left: 7px; color: #968988; font: 600 9px Cinzel, Georgia, serif; letter-spacing: .12em; text-transform: uppercase; }
.player-message { min-height: 18px; margin: 14px 0 0; color: #948789; text-align: center; font-size: 11px; line-height: 1.5; }

.program-panel {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(210px, .34fr) minmax(0, 1fr);
  gap: 22px;
  margin-top: 28px;
  padding: 22px;
  border: 1px solid rgba(224, 191, 121, .35);
  background: rgba(7, 5, 7, .92);
  box-shadow: inset 0 0 28px #000, 0 18px 38px rgba(0,0,0,.48);
}
.program-copy { padding: 8px 9px; }
.program-copy h2 { margin: 0; font: 700 clamp(24px, 3vw, 36px) Cinzel, Georgia, serif; text-transform: uppercase; }
.program-copy p:last-child { margin: 13px 0 0; color: #928688; font-size: 12px; line-height: 1.6; }
.screening-list { display: grid; gap: 8px; max-height: 265px; margin: 0; padding: 0 6px 0 0; overflow-y: auto; list-style: none; scrollbar-color: var(--gold) #120b0c; }
.screening-choice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(224, 191, 121, .22);
  color: var(--ivory);
  text-align: left;
  background: linear-gradient(95deg, rgba(113, 20, 40, .38), rgba(15, 8, 12, .95));
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.screening-choice:hover, .screening-choice:focus-visible { transform: translateX(-3px); border-color: var(--magenta); outline: none; box-shadow: 0 0 18px rgba(217,42,153,.17); }
.screening-choice.active { border-color: var(--gold); box-shadow: inset 4px 0 var(--magenta), 0 0 17px rgba(217,42,153,.14); }
.screening-choice:disabled { opacity: .47; cursor: not-allowed; transform: none; }
.screen-code { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-high); font: 700 9px Cinzel, Georgia, serif; }
.screening-copy { min-width: 0; }
.screening-title { display: block; overflow: hidden; font: 700 13px Cinzel, Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.screening-format { display: block; margin-top: 4px; color: #a58f96; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.screening-play { color: var(--magenta); font-size: 18px; }
.screening-unavailable { color: #bd7280; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.empty-list { padding: 25px 18px; color: #978a8d; text-align: center; line-height: 1.6; }

.seating-deck {
  position: relative;
  z-index: 4;
  margin: 24px calc(clamp(28px, 6vw, 88px) * -1) 0;
  padding: 30px 8% 38px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(224,191,121,.07) 8.2% 8.5%, transparent 8.7% 91%, rgba(224,191,121,.07) 91.2% 91.5%, transparent 91.7%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 54px),
    linear-gradient(180deg, #0c0809, #050404);
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 28px 55px #000;
}
.seat-row {
  --scale: .72;
  position: relative;
  display: grid;
  grid-template-columns: 14px repeat(2, minmax(66px, 112px)) 14px;
  justify-content: center;
  align-items: end;
  gap: clamp(17px, 4vw, 55px);
  width: calc(48% + var(--scale) * 31%);
  margin: -2px auto 0;
  transform: scale(var(--scale));
  transform-origin: center bottom;
}
.seat-row:nth-child(1) { --scale: .62; z-index: 1; }
.seat-row:nth-child(2) { --scale: .70; z-index: 2; }
.seat-row:nth-child(3) { --scale: .78; z-index: 3; }
.seat-row:nth-child(4) { --scale: .86; z-index: 4; }
.seat-row:nth-child(5) { --scale: .94; z-index: 5; }
.seat-row:nth-child(6) { --scale: 1; z-index: 6; }
.seat {
  position: relative;
  height: 74px;
  border: 1px solid #b13a54;
  border-radius: 31px 31px 17px 17px;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255,255,255,.13), transparent 43%),
    linear-gradient(90deg, #3a0713, #8b1932 18%, #a11f3c 50%, #7c142c 82%, #33060f);
  box-shadow: inset 0 -14px 18px rgba(0,0,0,.55), 0 9px 13px #000;
}
.seat::before,
.seat::after {
  content: '';
  position: absolute;
  bottom: -5px;
  width: 25px;
  height: 35px;
  border: 1px solid #8d263b;
  border-radius: 12px 12px 8px 8px;
  background: linear-gradient(90deg, #410914, #8d1932 55%, #39070f);
  box-shadow: 0 5px 8px #000;
}
.seat::before { left: -13px; }
.seat::after { right: -13px; transform: scaleX(-1); }
.aisle-light {
  align-self: end;
  width: 6px;
  height: 6px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: rgba(224,191,121,.5);
  box-shadow: 0 0 7px rgba(224,191,121,.35), 0 0 18px rgba(122,49,153,.25);
}
.room-note { position: relative; z-index: 5; margin: 0; padding: 18px 0 26px; color: #6f6466; text-align: center; font: 600 8px Cinzel, Georgia, serif; letter-spacing: .18em; text-transform: uppercase; }

.site-footer { padding: 28px 0 38px; color: #766d65; background: #050405; }
.footer { display: flex; justify-content: space-between; gap: 30px; padding-top: 25px; border-top: 1px solid rgba(224,191,121,.2); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 900px) {
  .mobile-menu { display: grid; place-items: center; }
  .navlinks { display: none; position: absolute; top: 58px; right: 0; left: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border: 1px solid var(--line); background: rgba(7,6,7,.98); box-shadow: 0 24px 55px rgba(0,0,0,.6); }
  .navlinks.open { display: flex; }
  .navlinks a { display: block; padding: 16px; border-bottom: 1px solid rgba(224,191,121,.15); opacity: 1; }
  .navlinks .contact { margin-top: 8px; text-align: center; }
  .program-panel { grid-template-columns: 1fr; }
  .video-controls { grid-template-columns: repeat(3, auto) 1fr; }
  .control-button.fullscreen { grid-column: 4; grid-row: 1; }
  .volume-control { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .wrap { width: calc(100% - 26px); }
  .mark span { display: none; }
  .show-hero { padding-top: 52px; }
  .screening-room { width: calc(100% - 12px); padding: 45px 20px 0; border-radius: 15px 15px 5px 5px; }
  .screening-room::before, .screening-room::after { width: 15px; }
  .sconce { display: none; }
  .proscenium { padding: 10px; }
  .proscenium::before { left: -9px; }
  .proscenium::after { right: -9px; }
  .marquee { margin-bottom: 9px; letter-spacing: .18em; }
  .screen-curtain { padding: 18px; }
  .now-title-row { flex-direction: column; gap: 9px; }
  .video-timeline { gap: 7px; }
  .video-controls { grid-template-columns: 1fr 1.25fr 1fr; }
  .video-controls .control-button { padding: 0 8px; font-size: 8px; }
  .control-button.fullscreen { grid-column: 1 / -1; grid-row: auto; }
  .volume-control { grid-column: 1 / -1; }
  .program-panel { margin-top: 18px; padding: 15px; }
  .screening-choice { grid-template-columns: 36px minmax(0,1fr) auto; gap: 9px; padding: 11px; }
  .seating-deck { margin-inline: -20px; padding-inline: 2%; }
  .seat-row { gap: 22px; grid-template-columns: 8px repeat(2, minmax(54px, 82px)) 8px; }
  .seat { height: 59px; }
  .footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}