/* Landman Studios: Premiere Night
   A movie palace. The facade marquee names what's on Screen 1, crimson velvet carries the house,
   brass and bulbs are the light, and the videos are the only full-color things on the page. */

:root {
  --velvet: #7A1420;
  --velvet-deep: #4A0A12;
  --velvet-shine: #B42A38;
  --house: #160B0A;
  --house-raised: #24120F;
  --gold: #F6C453;
  --gold-hot: #FFE7A3;
  --brass: #C8963E;
  --brass-deep: #8A6424;
  --board: #FFF4DC;
  --board-shade: #F1DFB8;
  --ink: #1A1210;
  --letter-red: #C21F2C;
  --letter-red-deep: #9E1622; /* red print on ticket stock, where #C21F2C is too light */
  --text: #FBEBDD;
  --text-soft: #EBCDBB;
  --ticket-ivory: #FFF4DC;
  --ticket-rose: #F2B3A0;

  --f-sign: "Limelight", Georgia, serif;
  --f-marquee: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --section: clamp(4rem, 8vw, 7rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 1240px;
  /* big enough to own the room, small enough that marquee + screen fit one laptop viewport */
  --screen-max: clamp(640px, calc((100svh - 400px) * 16 / 9), 960px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-frame: 0 10px 24px rgb(0 0 0 / 0.38), 0 2px 4px rgb(0 0 0 / 0.3);
  --velvet-pleats: repeating-linear-gradient(90deg,
      var(--velvet-deep) 0,
      var(--velvet) 13px,
      var(--velvet-shine) 21px,
      var(--velvet) 29px,
      var(--velvet-deep) 42px);
  --carpet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F6C453' stroke-opacity='.09' stroke-width='1.5'%3E%3Cpath d='M36 6 66 36 36 66 6 36Z'/%3E%3Cpath d='M36 18 54 36 36 54 18 36Z'/%3E%3Ccircle cx='36' cy='36' r='5'/%3E%3Ccircle cx='0' cy='0' r='7'/%3E%3Ccircle cx='72' cy='0' r='7'/%3E%3Ccircle cx='0' cy='72' r='7'/%3E%3Ccircle cx='72' cy='72' r='7'/%3E%3C/g%3E%3C/svg%3E");

  color-scheme: dark;
  scrollbar-color: var(--brass) var(--house);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--house);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--house); }
::-webkit-scrollbar-thumb { background: var(--brass-deep); border: 3px solid var(--house); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--brass); }

.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 {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip:focus { top: 1rem; }

.file-warning {
  margin: 0;
  padding: 0.75rem var(--gutter);
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  text-align: center;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

/* ---------- Shared type ---------- */

.sign-heading {
  margin: 0 0 0.6rem;
  font-family: var(--f-sign);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  color: var(--gold);
  text-wrap: balance;
}

.lede {
  margin: 0 0 2rem;
  max-width: 52ch;
  color: var(--text-soft);
  font-size: 1.125rem;
}

.text-link {
  font-family: var(--f-marquee);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  text-decoration-color: rgb(246 196 83 / 0.45);
  transition: text-decoration-color 0.2s, color 0.2s;
}
.text-link:hover { color: var(--gold-hot); text-decoration-color: currentColor; }

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  color: var(--gold);
  font: 800 1rem/1 var(--f-marquee);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.text-button:hover { background: var(--gold); color: var(--ink); }
.text-button[hidden] { display: none; }

/* ---------- Ticket: the primary action ---------- */

.ticket {
  --stock: var(--gold);
  --notch: 9px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem 0.8rem 2.1rem;
  background:
    linear-gradient(90deg, transparent calc(1.15rem - 1px), rgb(26 18 16 / 0.45) calc(1.15rem - 1px) calc(1.15rem + 1px), transparent calc(1.15rem + 1px)) 0 0 / 100% 7px repeat-y,
    var(--stock);
  color: var(--ink);
  font: 800 1.05rem/1 var(--f-marquee);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  -webkit-mask:
    radial-gradient(circle at 1.15rem 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 1.15rem 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle at 1.15rem 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at 1.15rem 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
  filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.35));
  transition: transform 0.25s var(--ease-out), background-color 0.2s;
  cursor: pointer;
}
.ticket:hover { --stock: var(--gold-hot); transform: translateY(-2px) rotate(-1deg); }
.ticket:active { transform: translateY(0) rotate(0); }
.ticket--small { --notch: 7px; padding: 0.55rem 1rem 0.55rem 1.7rem; font-size: 0.95rem; }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem var(--gutter);
  background: rgb(22 11 10 / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgb(200 150 62 / 0.35);
}

.brand {
  font-family: var(--f-sign);
  font-size: 1.35rem;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}

.topnav {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  margin-left: auto;
}
.topnav a {
  font-family: var(--f-marquee);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-soft);
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.topnav a:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- Facade & marquee ---------- */

.facade {
  padding: clamp(1rem, 2vw, 1.5rem) var(--gutter) 0;
  background:
    radial-gradient(60% 120% at 50% 0%, rgb(246 196 83 / 0.16), transparent 70%),
    var(--house);
  scroll-margin-top: 4rem;
}

.marquee {
  position: relative;
  width: min(100%, 900px);
  margin-inline: auto;
  padding: 26px 32px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2E1712, #1C0E0B);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.55);
}

/* The bulb ring: one bulb per 20px, spaced evenly to every corner */
.marquee__lights {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 5px rgb(246 196 83 / 0.75)) drop-shadow(0 0 16px rgb(246 196 83 / 0.3));
  pointer-events: none;
}
.marquee__bulbs {
  position: absolute;
  inset: 0;
  padding: 20px;
  border-radius: 18px;
  background:
    radial-gradient(circle, #FFF8E0 0 2.5px, var(--gold-hot) 3.5px, var(--gold) 5px, transparent 6px) 0 0 / 20px 20px space,
    linear-gradient(180deg, var(--brass), var(--brass-deep));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bulbs 2.8s ease-in-out infinite alternate;
}
@keyframes bulbs {
  from { opacity: 0.86; }
  to { opacity: 1; }
}

.marquee__sign {
  margin: 0 0 0.6rem;
  font-family: var(--f-sign);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1;
  text-align: center;
  color: var(--gold-hot);
  text-shadow: 0 0 6px rgb(255 231 163 / 0.7), 0 0 26px rgb(246 196 83 / 0.55);
}

.board {
  padding: clamp(0.6rem, 1.6vw, 1rem) clamp(0.9rem, 3vw, 2rem);
  border-radius: 4px;
  background: linear-gradient(180deg, #FFFBEF, var(--board) 45%, var(--board-shade));
  box-shadow:
    inset 0 0 0 3px #2B1712,
    inset 0 0 0 5px var(--brass-deep),
    inset 0 0 40px rgb(255 214 140 / 0.55),
    0 0 40px rgb(255 238 200 / 0.18);
  text-align: center;
}

.board__label,
.board__title {
  margin: 0;
  font-family: var(--f-marquee);
  text-transform: uppercase;
  text-wrap: balance;
}

.board__label {
  font-weight: 900;
  font-size: clamp(1rem, 2vw, 1.45rem);
  letter-spacing: 0.22em;
  line-height: 1.5;
  color: var(--letter-red);
  /* the rail each row of letters hangs on */
  background: linear-gradient(transparent calc(100% - 3px), rgb(26 18 16 / 0.14) 0) 0 0 / 100% 1.5em;
}

.board__title {
  --size: clamp(1.75rem, 4vw, 2.8rem);
  font-weight: 800;
  font-size: var(--size);
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: linear-gradient(transparent calc(100% - 3px), rgb(26 18 16 / 0.14) 0) 0 0 / 100% 1.18em;
  min-height: 1.18em;
}
.board__title[data-length="long"] { --size: clamp(1.45rem, 3.3vw, 2.6rem); }
.board__title[data-length="xlong"] { --size: clamp(1.25rem, 2.7vw, 2.1rem); }

/* Hung letters: each one is its own plastic piece on the rail */
.word { display: inline-block; white-space: nowrap; }
.tile {
  display: inline-block;
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
  animation: hang 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.board.is-clearing .tile {
  animation: unhang 0.22s ease-in forwards;
  animation-delay: calc(var(--i, 0) * 6ms);
}
@keyframes hang {
  from { opacity: 0; transform: translateY(-0.55em) rotate(calc(var(--r, 0deg) * 4)); }
  to { opacity: 1; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
}
@keyframes unhang {
  to { opacity: 0; transform: translateY(0.35em) rotate(calc(var(--r, 0deg) * -3)); }
}

/* ---------- Auditorium & Screen 1 ---------- */

.auditorium {
  padding: clamp(1.25rem, 2.2vw, 1.75rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(50% 60% at 50% 45%, rgb(255 240 210 / 0.07), transparent 70%),
    var(--house);
  scroll-margin-top: 4rem;
}

.stage {
  --leg: clamp(14px, 10vw, 150px);
  --valance: clamp(44px, 5vw, 70px);
  position: relative;
  width: min(100%, calc(var(--screen-max) + 2 * var(--leg)));
  margin-inline: auto;
  padding: calc(var(--valance) - 4px) var(--leg) 0;
}

.screen {
  position: relative;
  width: 100%;
  max-width: var(--screen-max);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow:
    0 0 0 6px #0B0605,
    0 0 90px rgb(255 240 210 / 0.12),
    0 30px 60px rgb(0 0 0 / 0.6);
  overflow: hidden;
  z-index: 1;
}
.screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tied-back curtain legs */
.leg {
  position: absolute;
  top: 0;
  bottom: -14px;
  width: calc(var(--leg) + 10px);
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.35), transparent 18%, transparent 70%, rgb(0 0 0 / 0.45)),
    var(--velvet-pleats);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.5));
}
.leg--left {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 97% 10%, 88% 28%, 66% 48%, 50% 60%, 58% 74%, 74% 88%, 84% 100%, 0 100%);
}
.leg--right {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%, 26% 88%, 42% 74%, 50% 60%, 34% 48%, 12% 28%, 3% 10%);
}
.cord {
  position: absolute;
  top: 58%;
  width: 46%;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--gold-hot), var(--brass) 55%, var(--brass-deep));
  box-shadow: 0 3px 5px rgb(0 0 0 / 0.45);
}
.leg--left .cord { left: 6%; transform: rotate(-8deg); }
.leg--right .cord { right: 6%; transform: rotate(8deg); }

/* Swagged valance across the top */
.valance {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--valance);
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.25), transparent 60%),
    var(--velvet-pleats);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 55% no-repeat,
    radial-gradient(50% 100% at 50% 0, #000 98%, transparent) 0 100% / clamp(70px, 9vw, 130px) 90% repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% 55% no-repeat,
    radial-gradient(50% 100% at 50% 0, #000 98%, transparent) 0 100% / clamp(70px, 9vw, 130px) 90% repeat-x;
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.5));
}
.valance::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(55% - 5px);
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 3px, var(--brass-deep) 3px 5px);
}

/* Traveler curtains: part once when the page opens */
.traveler {
  position: absolute;
  top: 0; bottom: 0;
  width: 51%;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.25), transparent 30%, rgb(0 0 0 / 0.35)),
    var(--velvet-pleats);
  z-index: 2;
  pointer-events: none;
  animation: part 1.5s var(--ease-out) 0.35s forwards;
}
.traveler--left { left: 0; transform-origin: left center; }
.traveler--right { right: 0; transform-origin: right center; }
@keyframes part {
  to { transform: scaleX(0.04); opacity: 0; visibility: hidden; }
}

.stage__lip {
  position: relative;
  z-index: 3;
  height: 14px;
  margin: 0 calc(var(--leg) * -1);
  background: linear-gradient(180deg, var(--gold) 0 2px, #5A3A1C 2px, #3B2412 70%, #1E120A);
  box-shadow: 0 10px 22px rgb(0 0 0 / 0.55);
}

.caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  width: min(100%, var(--screen-max));
  margin: 1.4rem auto 0;
}
.caption__now { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; min-width: 0; }
.caption__state {
  font-family: var(--f-marquee);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--house);
  background: var(--gold);
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
}
.caption__title {
  font-family: var(--f-marquee);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: 0.02em;
  color: var(--text);
}
.caption__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* ---------- Also playing ---------- */

.also {
  padding-block: var(--section);
  background:
    radial-gradient(80% 50% at 50% 0%, rgb(0 0 0 / 0.35), transparent 70%),
    radial-gradient(ellipse at 50% 30%, #8A1A27, var(--velvet) 55%, var(--velvet-deep));
}
.also__inner {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.screen2, .recent { scroll-margin-top: 5rem; }
.screen2 .lede, .recent .lede { margin-bottom: 1.5rem; }

.screen--tall {
  aspect-ratio: 9 / 16;
  max-width: 340px;
  margin: 0 0 1.25rem;
  border-radius: 6px;
  box-shadow:
    0 0 0 6px #120807,
    0 0 0 8px var(--brass-deep),
    0 24px 48px rgb(0 0 0 / 0.5);
}

/* ---------- Lobby cards ---------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.cards--recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--lobby { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card a,
.feature__poster {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--ink);
  padding: 7px;
  border-radius: 4px;
  background: linear-gradient(150deg, #F3CF7A, var(--brass) 35%, #7C5720 60%, #E2B861 85%, var(--brass-deep));
  box-shadow: var(--shadow-frame);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.card a:hover,
.feature__poster:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgb(0 0 0 / 0.45), 0 0 0 2px var(--gold-hot);
}

.card__frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0B0605;
  border: 3px solid #120807;
}
.card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.card a:hover .card__frame img,
.feature__poster:hover .card__frame img { transform: scale(1.04); }

/* Play mark appears on hover and focus */
.card__frame::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%231A1210'/%3E%3C/svg%3E") center / 28px no-repeat,
    var(--gold);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.5);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s, transform 0.35s var(--ease-out);
}
.card a:hover .card__frame::after,
.card a:focus-visible .card__frame::after,
.feature__poster:hover .card__frame::after,
.feature__poster:focus-visible .card__frame::after { opacity: 1; transform: scale(1); }

.card__plate {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 7px;
  padding: 0.6rem 0.75rem 0.7rem;
  background: linear-gradient(180deg, #FFFBEF, var(--board));
  border-radius: 2px;
}
.card__title {
  font-family: var(--f-marquee);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.card__meta {
  font-size: 0.95rem;
  color: #5B3A2C;
  font-weight: 500;
}

/* State words: shown only on the card that's on Screen 1 */
.card__state {
  display: none;
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.12rem 0.45rem;
  font-family: var(--f-marquee);
  font-weight: 900;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--letter-red);
  border-radius: 2px;
}
.is-on-screen .card__state { display: inline-block; }
.card a.is-on-screen,
.feature__poster.is-on-screen { box-shadow: var(--shadow-frame), 0 0 0 3px var(--letter-red); }

/* ---------- Lobby ---------- */

.lobby {
  padding-block: var(--section);
  background: var(--carpet) 0 0 / 72px 72px, linear-gradient(180deg, var(--velvet-deep), var(--velvet) 18%, var(--velvet) 82%, var(--velvet-deep));
  scroll-margin-top: 3.5rem;
}

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.feature__poster { padding: 10px; }
.feature__poster > .card__state {
  position: absolute;
  left: 22px; top: 22px;
  margin: 0;
}
.feature__title {
  margin: 0;
  font-family: var(--f-sign);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1;
  color: var(--board);
}
.feature__meta {
  margin: 0.6rem 0 1rem;
  font-family: var(--f-marquee);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.feature__text > p:not([class]) { margin: 0 0 1.6rem; color: var(--text); max-width: 40ch; }

.coming-soon {
  margin-top: 2rem;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  background: linear-gradient(180deg, #FFFBEF, var(--board) 50%, var(--board-shade));
  box-shadow: inset 0 0 0 3px #2B1712, inset 0 0 0 5px var(--brass-deep), 0 10px 24px rgb(0 0 0 / 0.35);
  text-align: center;
  color: var(--ink);
}
.coming-soon p { margin: 0; font-family: var(--f-marquee); text-transform: uppercase; }
.coming-soon__label { font-weight: 900; font-size: 0.95rem; letter-spacing: 0.22em; color: var(--letter-red); }
.coming-soon__title { font-weight: 800; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.1; }
.coming-soon__note { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.08em; color: #5B3A2C; }

/* ---------- Box office: series passes ---------- */

.box-office {
  padding-block: var(--section);
  background:
    radial-gradient(70% 60% at 50% 0%, rgb(246 196 83 / 0.1), transparent 70%),
    var(--house-raised);
  scroll-margin-top: 3.5rem;
}

.passes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.pass {
  --stock: var(--gold);
  --notch: 12px;
  --stub: 3.1rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--stub) 1fr;
  background:
    linear-gradient(90deg, transparent calc(var(--stub) - 1px), rgb(26 18 16 / 0.4) calc(var(--stub) - 1px) calc(var(--stub) + 1px), transparent calc(var(--stub) + 1px)) 0 0 / 100% 9px repeat-y,
    var(--stock);
  color: var(--ink);
  border-radius: 8px;
  -webkit-mask:
    radial-gradient(circle at var(--stub) 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--stub) 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle at var(--stub) 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at var(--stub) 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.45));
  transition: transform 0.35s var(--ease-out);
}
.pass:hover { transform: translateY(-4px) rotate(-0.6deg); }
.pass--ivory { --stock: var(--ticket-ivory); }
.pass--rose { --stock: var(--ticket-rose); }

.pass__stub {
  display: grid;
  place-items: center;
}
.pass__stub span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-marquee);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--letter-red-deep);
}

.pass__body {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.15rem 1.15rem;
}
.pass__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 2px;
  margin-bottom: 0.9rem;
}
.pass__title {
  margin: 0 0 0.3rem;
  font-family: var(--f-marquee);
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pass__desc { margin: 0 0 1rem; font-size: 1rem; line-height: 1.5; color: #3B2620; }
.pass__actions { margin-top: auto; }
.pass__play {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-marquee);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--board);
  background: var(--ink);
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.pass__play::before {
  content: "";
  width: 0.9em; height: 0.9em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12-7.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pass__play:hover { background: var(--letter-red); color: #fff; }

/* ---------- Program notes ---------- */

.program {
  padding-block: var(--section);
  background: radial-gradient(ellipse at 30% 40%, #8A1A27, var(--velvet) 50%, var(--velvet-deep));
  scroll-margin-top: 3.5rem;
}
.program__inner {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.portrait { margin: 0; }
.portrait__frame {
  display: block;
  padding: 12px;
  border-radius: 4px;
  background: linear-gradient(150deg, #F3CF7A, var(--brass) 35%, #7C5720 60%, #E2B861 85%, var(--brass-deep));
  box-shadow: var(--shadow-frame);
}
.portrait__frame img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 4px solid #120807; }
.portrait__plate {
  width: max-content;
  max-width: 100%;
  margin: 1rem auto 0;
  padding: 0.45rem 1.1rem;
  background: linear-gradient(180deg, var(--gold-hot), var(--brass));
  color: var(--ink);
  border-radius: 3px;
  font-family: var(--f-marquee);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 6px 12px rgb(0 0 0 / 0.35);
}
.portrait__plate span { display: block; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.2em; }

.program__text > p { max-width: 62ch; margin: 0 0 1.1rem; }
.program__text > p:first-of-type { font-size: 1.25rem; line-height: 1.5; }

.notes {
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 2px solid rgb(246 196 83 / 0.5);
}
.notes > div {
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid rgb(246 196 83 / 0.28);
}
.notes dt {
  font-family: var(--f-marquee);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.notes dd { margin: 0.15rem 0 0; color: var(--text); }

/* ---------- The End ---------- */

.the-end {
  position: relative;
  padding: clamp(5rem, 10vw, 8rem) var(--gutter) 2.5rem;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.55), transparent 22%, transparent 75%, rgb(0 0 0 / 0.5)),
    var(--velvet-pleats);
  text-align: center;
  overflow: hidden;
}
/* the seam where the two halves of the curtain meet */
.the-end::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.25));
}
.the-end__inner {
  position: relative;
  width: min(100%, 640px);
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem);
  background: radial-gradient(closest-side, rgb(22 11 10 / 0.82), rgb(22 11 10 / 0.6));
  border-radius: 999px / 70%;
}
.the-end__title {
  margin: 0;
  font-family: var(--f-sign);
  font-size: clamp(3.5rem, 11vw, 6rem);
  line-height: 1;
  color: var(--gold-hot);
  text-shadow: 0 0 8px rgb(255 231 163 / 0.6), 0 0 34px rgb(246 196 83 / 0.45);
}
.the-end__thanks { margin: 1rem auto 1.75rem; max-width: 36ch; color: var(--text); font-size: 1.15rem; }
.the-end__fine { margin: 2.5rem 0 0; font-size: 0.95rem; color: var(--text-soft); }
.the-end__fine a { color: var(--gold); text-underline-offset: 0.25em; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .cards--lobby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passes { grid-template-columns: 1fr; max-width: 640px; }
  .pass__body { display: grid; grid-template-columns: 200px 1fr; column-gap: 1.1rem; align-items: start; }
  .pass__thumb { grid-row: span 3; margin-bottom: 0; }
}

@media (max-width: 860px) {
  .also__inner { grid-template-columns: 1fr; }
  .screen--tall { max-width: 320px; }
  .feature { grid-template-columns: 1fr; }
  .feature__text > p:not([class]) { max-width: 60ch; }
  .program__inner { grid-template-columns: 1fr; }
  .portrait { max-width: 300px; }
}

@media (max-width: 760px) {
  .topnav { display: none; }
  .topbar { justify-content: space-between; }
  .marquee { padding: 22px; border-radius: 14px; }
  .marquee__bulbs { padding: 14px; border-radius: 14px; background-size: 14px 14px, auto; }
  .stage { --leg: 14px; }
  .leg { width: 14px; clip-path: none; }
  .cord { display: none; }
  .caption { margin-top: 1.1rem; }
}

@media (max-width: 560px) {
  .cards--recent, .cards--lobby { grid-template-columns: 1fr; }
  .notes { grid-template-columns: 1fr; }
  .pass__body { display: flex; }
  .pass__thumb { margin-bottom: 0.9rem; }
  .brand { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .traveler { display: none; }
}