/* Film my site: direction B, "The Screening Room"
   An evening at a small independent cinema. Warm darkness, a lit screen,
   velvet red, brass, and type set like title cards and end credits. */

:root {
  --night: #160e0b;          /* the auditorium */
  --night-2: #1f1410;        /* a step up from the dark */
  --night-3: #2a1b15;        /* seat backs, panels */
  --velvet: #8c1a2b;         /* curtain and seat red */
  --velvet-deep: #4f0d18;
  --velvet-hi: #b02a3e;
  --brass: #d6a85a;          /* fittings, rules */
  --brass-dim: #9c7a45;
  --bulb: #ffe3a3;           /* lamps in the marquee */
  --bulb-hot: #fff6dc;
  --screen: #f3ead8;         /* the lit screen, ticket paper */
  --ink: #1d1310;            /* text on paper */
  --text: #efe2cc;           /* body text on the dark */
  --muted: #bfac90;          /* secondary text on the dark */
  --rule: rgba(214, 168, 90, 0.28);

  --f-marquee: "Limelight", "Bodoni Moda", Georgia, serif;
  --f-title: "Bodoni Moda", "Didot", Georgia, serif;
  --f-body: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 62ch;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* A whisper of film grain across the whole house, drawn with SVG noise */
body { position: relative; }
body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .75 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, video { max-width: 100%; display: block; }

a { color: var(--bulb); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--bulb-hot); }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  background: var(--bulb);
  color: var(--ink);
  padding: .6em 1em;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Placeholders for Kenn: visible, never invented */
mark.ph {
  display: inline-block;
  background: #ffd75e;
  color: #2a1a00;
  font-family: var(--f-body);
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
  padding: .12em .55em;
  border-radius: 999px;
  border: 1px dashed #7a5600;
  vertical-align: .08em;
  white-space: normal;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: 820px; }

/* ---------- Masthead and inline nav (no hamburger) ---------- */

.masthead {
  position: relative;
  z-index: 5;
  background: linear-gradient(var(--velvet-deep), #2c0810);
  border-bottom: 1px solid var(--brass-dim);
  box-shadow: 0 1px 0 rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.35);
}
.masthead__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
}
.wordmark {
  font-family: var(--f-marquee);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--bulb);
  text-decoration: none;
  letter-spacing: .02em;
  text-shadow: 0 0 14px rgba(255, 210, 120, .45);
}
.wordmark:hover { color: var(--bulb-hot); }

.nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.nav a {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding: 6px 0;
  display: inline-block;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--bulb); border-bottom-color: var(--brass); }
.nav .nav__order { color: var(--bulb); }

/* ---------- Shared bits ---------- */

.kicker, .reel {
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.1rem;
}
.reel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.reel::before, .reel::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--brass-dim);
}

h1, h2, h3 { font-family: var(--f-title); font-weight: 500; line-height: 1.12; margin: 0; }
h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: -.005em;
  color: var(--screen);
}

.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section__head { text-align: center; margin-bottom: clamp(36px, 6vw, 64px); }
.section__intro {
  max-width: 54ch;
  margin: 1.2rem auto 0;
  color: var(--muted);
  font-size: 1.15rem;
}

/* A brass hairline between reels, like a programme's rule */
.section + .section::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(420px, 60%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--brass-dim), transparent);
}

.btn {
  font-family: var(--f-body);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  padding: 1em 1.7em;
  border-radius: 2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.btn--primary {
  background: var(--velvet);
  color: #fff4e2;
  box-shadow: inset 0 0 0 1px var(--velvet-hi), 0 0 0 1px var(--brass-dim), 0 6px 18px rgba(0,0,0,.45);
}
.btn--primary:hover {
  background: var(--velvet-hi);
  box-shadow: inset 0 0 0 1px #c94457, 0 0 0 1px var(--brass), 0 0 26px rgba(255, 200, 110, .25);
}
.btn--primary:active { transform: translateY(1px); }
.btn--large { font-size: .95rem; padding: 1.1em 2.2em; }

.link-arrow {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
}
.link-arrow::after { content: " \2192"; color: var(--brass); }
.link-arrow:hover { color: var(--bulb); }

/* ---------- 1. Hero: curtains, valance and the marquee ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 4.4vw, 56px) 0 clamp(64px, 8vw, 96px);
  background:
    radial-gradient(ellipse 60% 55% at 50% 58%, rgba(255, 196, 110, .13), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(140, 26, 43, .28), transparent 70%),
    var(--night);
}
.curtain {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(0px, 7vw, 104px);
  background:
    linear-gradient(90deg, rgba(0,0,0,.0), rgba(0,0,0,.25)),
    repeating-linear-gradient(90deg,
      #3d0912 0, #6e1322 9px, #9b2236 15px, #6e1322 22px, #3d0912 30px);
  box-shadow: inset 0 -80px 60px -30px rgba(0,0,0,.55);
  z-index: 1;
}
.curtain--left { left: 0; border-right: 1px solid rgba(0,0,0,.6); }
.curtain--right { right: 0; transform: scaleX(-1); border-right: 1px solid rgba(0,0,0,.6); }
.valance {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  z-index: 2;
  background:
    radial-gradient(circle at 20px 0, #7d1626 19px, transparent 20px) 0 0 / 40px 30px repeat-x,
    linear-gradient(#5a0f1b, #5a0f1b) 0 0 / 100% 8px no-repeat;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.5));
}

.hero__inner {
  position: relative;
  z-index: 3;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 calc(var(--gutter) + clamp(0px, 7vw, 104px) * .6);
  text-align: center;
}
.hero__title {
  font-size: clamp(2.5rem, 5.2vw, 4.1rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--screen);
  text-wrap: balance;
}
.hero__title em {
  display: block;
  font-style: italic;
  color: var(--bulb);
  text-shadow: 0 0 34px rgba(255, 205, 120, .28);
}
.hero__sub {
  max-width: 64ch;
  margin: 1.1rem auto 0;
  font-size: clamp(1.06rem, 1.6vw, 1.22rem);
  color: var(--text);
}
.hero__small {
  margin: 1.6rem 0 0;
  font-size: .92rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* The marquee */
.boxoffice { margin: clamp(32px, 3vw, 36px) auto 0; max-width: 820px; }

.marquee {
  position: relative;
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(#2b1a12, #1a100c);
  box-shadow:
    inset 0 0 0 2px var(--brass-dim),
    inset 0 0 0 7px #120a07,
    inset 0 0 0 8px rgba(214,168,90,.35),
    0 30px 70px rgba(0,0,0,.6),
    0 0 90px rgba(255, 190, 100, .10);
  transition: box-shadow .8s var(--ease), filter .8s var(--ease);
}
/* Two interleaved rings of bulbs, chasing */
.marquee__bulbs, .marquee__bulbs::after {
  position: absolute;
  inset: 4px;
  border-radius: 7px;
  pointer-events: none;
}
.marquee__bulbs {
  --b: radial-gradient(circle, var(--bulb-hot) 0 2.5px, #ffcf70 3.5px, rgba(255,190,90,.35) 5px, transparent 6.5px);
  background:
    var(--b) 0 0 / 22px 10px repeat-x,
    var(--b) 0 100% / 22px 10px repeat-x,
    var(--b) 0 0 / 10px 22px repeat-y,
    var(--b) 100% 0 / 10px 22px repeat-y;
  animation: chase-a 1.2s steps(1) infinite;
}
.marquee__bulbs::after {
  content: "";
  inset: 0;
  background:
    var(--b) 11px 0 / 22px 10px repeat-x,
    var(--b) 11px 100% / 22px 10px repeat-x,
    var(--b) 0 11px / 10px 22px repeat-y,
    var(--b) 100% 11px / 10px 22px repeat-y;
  animation: chase-b 1.2s steps(1) infinite;
}
@keyframes chase-a { 0% { opacity: 1; } 50% { opacity: .28; } }
@keyframes chase-b { 0% { opacity: .28; } 50% { opacity: 1; } }

.marquee__board {
  position: relative;
  margin: 14px;
  padding: clamp(18px, 2.4vw, 22px) clamp(14px, 3vw, 34px) clamp(14px, 2vw, 18px);
  border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 34px),
    linear-gradient(#fbf3e1, #efe2c6);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 0 0 40px rgba(170, 120, 50, .35), 0 0 40px rgba(255, 220, 150, .25);
  color: var(--ink);
  overflow: hidden;
}
.marquee__brand {
  margin: 0 0 .45rem;
  font-family: var(--f-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--velvet);
}
.marquee__film-of {
  margin: 0;
  font-family: var(--f-title);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: #5a3d27;
}
.marquee__title {
  margin: .35rem 0 0;
  min-height: 1.2em;
  font-family: var(--f-marquee);
  font-size: var(--title-size, clamp(1.6rem, 6.4vw, 3.3rem));
  line-height: 1.12;
  color: #1a0f0b;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.marquee__line { display: inline; }
.marquee__title .ch {
  display: inline-block;
  white-space: pre;
}
.marquee__title .ch.is-new { animation: lamp-on .55s var(--ease) both; }
.marquee__title .ch.is-ghost { color: #a38d6d; }
@keyframes lamp-on {
  0% { opacity: 0; color: #fff; text-shadow: 0 0 18px #ffcf70; }
  30% { opacity: 1; }
  45% { opacity: .35; }
  60% { opacity: 1; color: #fff4d8; text-shadow: 0 0 14px #ffbe55; }
  100% { opacity: 1; }
}
.marquee__rule { margin: .6rem auto 0; width: 60%; height: 1px; }
.marquee__rule span { display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--velvet), transparent); }

/* The box office counter under the marquee */
.boxoffice__counter {
  margin: 0 auto;
  max-width: 720px;
  padding: 16px clamp(16px, 3vw, 28px) 22px;
  background: linear-gradient(var(--velvet-deep), #33080f);
  border: 1px solid var(--brass-dim);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  text-align: left;
}
.boxoffice__label {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bulb);
  margin-bottom: 8px;
}
.boxoffice__row { display: flex; gap: 10px; flex-wrap: wrap; }
.boxoffice__input {
  flex: 1 1 280px;
  min-width: 0;
  font: 500 1.05rem/1.3 var(--f-body);
  color: var(--text);
  background: #1a0b0b;
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  padding: .9em 1em;
}
.boxoffice__input::placeholder { color: #a4907a; }
.boxoffice__input:focus { outline: none; border-color: var(--bulb); box-shadow: 0 0 0 3px rgba(255, 227, 163, .35); }
.boxoffice__row .btn { flex: 0 0 auto; }
.boxoffice__links { margin: 16px 0 0; text-align: center; }

/* ---------- 2. Examples: the screen ---------- */

.film { margin: 0 auto clamp(64px, 8vw, 104px); }
.auditorium {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(18px, 3vw, 34px) 0;
}
/* the projector's spill of light behind the screen */
.auditorium::before {
  content: "";
  position: absolute;
  inset: -6% 4%;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 226, 170, .16), transparent 65%);
  pointer-events: none;
}
.screen {
  --maxh: min(620px, 72vh);
  position: relative;
  width: min(100%, calc(var(--maxh) * var(--ar-w) / var(--ar-h)));
  aspect-ratio: var(--ar-w) / var(--ar-h);
  background: #0b0605;
  border: 1px solid rgba(214,168,90,.55);
  box-shadow:
    0 0 0 8px #0d0806,
    0 0 0 9px rgba(214,168,90,.25),
    0 0 60px rgba(255, 220, 160, .18),
    0 40px 80px rgba(0,0,0,.6);
  transition: width .55s var(--ease), aspect-ratio .55s var(--ease);
}
.screen__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.film__card {
  text-align: center;
  margin-top: 28px;
}
.film__no {
  margin: 0 0 .2rem;
  font-family: var(--f-title);
  font-size: 1.5rem;
  letter-spacing: .3em;
  color: var(--brass);
}
.film__title {
  font-family: var(--f-title);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--screen);
}

.formats {
  border: 0;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.formats legend {
  float: left;
  margin-right: 8px;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 44px;
}
.formats label { position: relative; cursor: pointer; }
.formats input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.formats span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 64px;
  justify-content: center;
  padding: 0 16px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--text);
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.formats label:hover span { border-color: var(--brass); color: var(--bulb); }
.formats input:checked + span {
  background: var(--bulb);
  color: var(--ink);
  border-color: var(--bulb);
  box-shadow: 0 0 22px rgba(255, 210, 130, .35);
}
.formats input:focus-visible + span { outline: 3px solid var(--bulb); outline-offset: 3px; }

.examples__compare {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  color: var(--muted);
}

/* ---------- 3. How it works: three acts ---------- */

.acts {
  list-style: none;
  counter-reset: act;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.acts li {
  counter-increment: act;
  text-align: center;
  padding-top: 8px;
}
.acts li::before {
  content: counter(act, upper-roman);
  display: block;
  font-family: var(--f-title);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--bulb);
  margin-bottom: 18px;
  text-shadow: 0 0 22px rgba(255, 200, 110, .25);
}
.acts h3 {
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--screen);
  margin-bottom: .7rem;
}
.acts p { margin: 0; color: var(--text); }

/* ---------- 4. What makes it different: the credits roll ---------- */

.credits {
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.25) 30%, rgba(0,0,0,.25) 70%, transparent);
}
.credit-roll { margin: 0 auto; max-width: 940px; }
.credit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 48px);
  padding: 22px 0;
}
.credit dt {
  text-align: right;
  font-family: var(--f-body);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: .35em;
}
.credit dd {
  margin: 0;
  font-family: var(--f-title);
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--screen);
  max-width: 34ch;
}

/* ---------- 5. Prices: three tickets ---------- */

.tickets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
}
.ticket {
  --notch: 13px;
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: linear-gradient(170deg, #f7efde, #ece0c7);
  --m: radial-gradient(circle at 0 calc(100% - 92px), transparent var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
       radial-gradient(circle at 100% calc(100% - 92px), transparent var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
  -webkit-mask: var(--m);
  mask: var(--m);
  border-radius: 4px;
}
.tickets > .ticket-wrap { position: relative; filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)); display: flex; }
.ticket-wrap > .ticket { flex: 1; }
.ticket__body {
  padding: 30px 28px 26px;
  flex: 1;
  border-bottom: 2px dashed rgba(29, 19, 16, .35);
  margin: 0 18px;
  padding-left: 10px;
  padding-right: 10px;
}
.ticket__name {
  font-family: var(--f-title);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--velvet);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(29,19,16,.2);
}
.ticket ul { list-style: none; margin: 0; padding: 0; }
.ticket li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 1.02rem;
  line-height: 1.45;
}
.ticket li::before {
  content: "";
  position: absolute;
  left: 2px; top: .95em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--velvet);
}
.ticket__stub {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ticket__price {
  margin: 0;
  font-family: var(--f-title);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.ticket__price small {
  font-family: var(--f-body);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  vertical-align: .55em;
  color: #5a3d27;
}
.ticket--feature { background: linear-gradient(170deg, #fffaf0, #f6ead2); }
.ticket-wrap--feature { filter: drop-shadow(0 0 1px var(--brass)) drop-shadow(0 0 28px rgba(255, 210, 130, .28)) drop-shadow(0 22px 36px rgba(0,0,0,.6)); }
.ticket__stamp {
  position: absolute;
  z-index: 2;
  top: -14px; right: 16px;
  margin: 0;
  padding: 6px 14px;
  background: var(--velvet);
  color: #fff4e2;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  border: 1px solid var(--brass);
  transform: rotate(3deg);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.prices__note {
  max-width: 62ch;
  margin: clamp(32px, 5vw, 48px) auto 0;
  text-align: center;
  color: var(--muted);
}

/* ---------- 6. Where it plays: the showtimes board ---------- */

.showtimes {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.showtimes li {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 18px;
  background: #0f0806;
  border: 1px solid rgba(214,168,90,.35);
  border-radius: 2px;
  box-shadow: inset 0 0 18px rgba(0,0,0,.6);
}
.showtimes__where {
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}
.showtimes__fmt {
  font-family: var(--f-marquee);
  font-size: 1.05rem;
  color: var(--bulb);
  text-shadow: 0 0 10px rgba(255, 200, 110, .35);
}

/* ---------- 7. Order: the box office window ---------- */

.order {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(140, 26, 43, .30), transparent 70%);
  scroll-margin-top: 0;
}
.order:focus { outline: none; }
.orderform {
  position: relative;
  background: linear-gradient(#24160f, #1c110c);
  border: 1px solid var(--brass-dim);
  border-radius: 140px 140px 6px 6px / 70px 70px 6px 6px;
  padding: clamp(56px, 7vw, 76px) clamp(18px, 5vw, 56px) clamp(32px, 5vw, 48px);
  box-shadow: inset 0 0 0 6px #140b08, inset 0 0 0 7px rgba(214,168,90,.25), 0 30px 70px rgba(0,0,0,.5);
}
.field { margin: 0 0 26px; }
.field > label, .field legend {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bulb);
  margin-bottom: 10px;
  padding: 0;
}
.field > label.check {
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0;
}
.field--choices { border: 0; padding: 0; min-width: 0; }
.field input[type="url"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font: 400 1.05rem/1.4 var(--f-body);
  color: var(--text);
  background: #120906;
  border: 1px solid var(--brass-dim);
  border-radius: 2px;
  padding: .85em 1em;
  transition: border-color .2s, box-shadow .4s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder { color: #a4907a; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--bulb);
  box-shadow: 0 0 0 3px rgba(255, 227, 163, .35);
}
.field input.is-arrived {
  border-color: var(--bulb);
  box-shadow: 0 0 0 3px rgba(255, 227, 163, .45), 0 0 34px rgba(255, 210, 130, .35);
}
.field__help { margin: 8px 0 0; font-size: .95rem; color: var(--muted); }

.seats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.seat, .check { position: relative; cursor: pointer; display: block; }
.seat input, .check input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
}
.seat span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 76px;
  padding: 12px 10px;
  border: 1px solid var(--brass-dim);
  border-radius: 14px 14px 3px 3px;
  background: #1a0d0b;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.3;
  transition: background .2s, border-color .2s, color .2s;
}
.seat b { font-family: var(--f-title); font-weight: 600; font-size: 1.15rem; }
.seat:hover span { border-color: var(--brass); }
.seat input:checked + span {
  background: var(--velvet);
  border-color: var(--bulb);
  color: #fff4e2;
  box-shadow: 0 0 22px rgba(176, 42, 62, .45);
}
.seat input:focus-visible + span,
.check input:focus-visible + span { outline: 3px solid var(--bulb); outline-offset: 3px; }

.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; }
.check span {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 1.02rem;
  color: var(--text);
}
.check span::before {
  content: "";
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1px solid var(--brass);
  border-radius: 2px;
  background: #120906 center / 14px no-repeat;
  transition: background-color .15s;
}
.check input:checked + span::before {
  background-color: var(--bulb);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%231d1310' stroke-width='2.2'/%3E%3C/svg%3E");
  border-color: var(--bulb);
}
.check--consent span { align-items: flex-start; padding-top: 10px; }
.check--consent span::before { margin-top: 1px; }

.orderform__submit { text-align: center; margin-top: 34px; }
.orderform__soon {
  margin: 18px auto 0;
  min-height: 1px;
  font-family: var(--f-title);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--bulb);
}
.orderform__soon:empty { margin: 0; }
.orderform__soon small {
  display: block;
  font-family: var(--f-body);
  font-style: normal;
  font-size: .95rem;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- 8. Questions: programme notes ---------- */

.notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(32px, 6vw, 80px);
}
.note {
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
.note h3 {
  font-size: 1.4rem;
  font-weight: 500;
  font-style: italic;
  color: var(--screen);
  margin-bottom: .55rem;
}
.note p { margin: 0; color: var(--text); }

/* ---------- 9. Footer: the end card ---------- */

.endcard {
  position: relative;
  padding: clamp(64px, 9vw, 104px) 0 56px;
  text-align: center;
  background:
    linear-gradient(180deg, var(--night), #0e0806);
  border-top: 1px solid var(--rule);
}
.endcard__mark {
  margin: 0 0 22px;
  font-family: var(--f-marquee);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--bulb);
  text-shadow: 0 0 22px rgba(255, 200, 110, .3);
  line-height: 1.1;
}
.endcard__line {
  margin: 0 auto;
  max-width: 80ch;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 2.1;
}
.endcard__line .ph { text-transform: none; letter-spacing: .02em; font-size: 1em; }
.endcard__line a { color: var(--text); }
.endcard__line .dot { margin: 0 .5em; color: var(--brass); }

/* ---------- The house lights: projection overlay for the gesture ---------- */

.projection {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: #050302;
  opacity: 0;
  transition: opacity .7s ease;
  cursor: pointer;
}
.projection[hidden] { display: none; }
.projection.is-dark { opacity: 1; }
.projection__grain {
  position: absolute;
  inset: -50%;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-1%, 3%); }
}
.projection__card {
  position: relative;
  text-align: center;
  max-width: min(1000px, 100%);
  opacity: 0;
  transform: scale(1.04);
  filter: blur(6px);
  transition: opacity 1s ease, transform 2.6s var(--ease), filter 1s ease;
}
.projection.is-title .projection__card { opacity: 1; transform: scale(1); filter: blur(0); animation: flicker 2.4s linear 1; }
.projection.is-fading .projection__card { opacity: 0; transform: scale(.985); filter: blur(2px); transition-duration: .8s; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  8% { opacity: .86; }
  9% { opacity: 1; }
  41% { opacity: .92; }
  42% { opacity: 1; }
  77% { opacity: .9; }
}
.projection__presents {
  margin: 0 0 2.2rem;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--brass);
}
.projection__film-of {
  margin: 0;
  font-family: var(--f-title);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: var(--screen);
}
.projection__title {
  margin: .4rem 0 0;
  font-family: var(--f-marquee);
  font-size: clamp(2rem, 7vw, 5.2rem);
  line-height: 1.1;
  color: var(--bulb-hot);
  text-shadow: 0 0 40px rgba(255, 210, 130, .35);
  overflow-wrap: anywhere;
}
.skip-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .skip-keys { display: none; } .skip-touch { display: inline; } }
.projection__skip {
  margin: 3rem 0 0;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #8a785f;
}

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

@media (max-width: 900px) {
  .acts { grid-template-columns: 1fr; max-width: 520px; }
  .tickets { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .notes { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}

@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .curtain { display: none; }
  .valance { height: 22px; background-size: 28px 22px, 100% 6px; background-image: radial-gradient(circle at 14px 0, #7d1626 13px, transparent 14px), linear-gradient(#5a0f1b, #5a0f1b); }
  .hero__inner { padding: 0 20px; }
  .masthead__inner { justify-content: center; padding: 12px 16px 10px; }
  .nav ul { justify-content: center; gap: 2px 16px; }
  .nav a { font-size: .72rem; letter-spacing: .16em; padding: 8px 0; }
  .marquee { padding: 12px; }
  .marquee__board { margin: 10px; }
  .marquee__brand { letter-spacing: .34em; }
  .boxoffice__row .btn { width: 100%; }
  .credit { grid-template-columns: 1fr; text-align: center; padding: 20px 0; }
  .credit dt { text-align: center; margin-bottom: 8px; padding-top: 0; }
  .credit dd { margin: 0 auto; }
  .seats { grid-template-columns: 1fr; }
  .seat span { min-height: 56px; flex-direction: row; gap: .5em; }
  .checks { grid-template-columns: 1fr; }
  .formats legend { float: none; width: 100%; line-height: 1.4; margin: 0 0 4px; text-align: center; }
  .screen { --maxh: 70vh; }
  .orderform { border-radius: 90px 90px 6px 6px / 44px 44px 6px 6px; }
  .showtimes li { padding: 10px 14px; }
}

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