/* GLN 20 · July — a short film in scroll
   Layers: fonts → tokens → base → chrome → film (stacked default, .cine = the projected film)
           → room → booking → credits → footer → intro keyframes */

/* ---------- fonts (self-hosted latin subsets, SIL OFL) ---------- */
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  src: url("fonts/sofia-sans-extra-condensed-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime-400i-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
/* size-matched local fallbacks so a late font doesn't shove the layout */
@font-face { font-family: "Sofia Fallback"; src: local("Arial Narrow"), local("ArialNarrow"), local("Arial"); size-adjust: 84%; ascent-override: 100%; descent-override: 26%; }
@font-face { font-family: "Atkinson Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 103%; ascent-override: 94%; descent-override: 25%; }
@font-face { font-family: "Courier Fallback"; src: local("Courier New"), local("Courier"); size-adjust: 100%; }

/* ---------- tokens ---------- */
:root {
  --black: #0A0A0A;      /* film black */
  --white: #F3F0E6;      /* subtitle white */
  --grey: #9C998F;       /* projector grey, secondary text (6.9:1 on black) */
  --gold: #E9C46A;       /* the one accent: calls to action */
  --paper: #F3F0E6;      /* script page */
  --ink: #17160F;
  --line: rgba(243, 240, 230, .16);
  --error: #F4A58B;

  /* 1px up to 1440, growing to 1.5px (layout/display) and 1.28px (text) at 2560 */
  --u: clamp(1px, calc(1px + (100vw - 1440px) * .5 / 1120), 1.5px);
  --tu: clamp(1px, calc(1px + (100vw - 1440px) * .28 / 1120), 1.28px);
  --gut: max(16px, min(5vw, calc(72 * var(--u))));
  --navH: calc(64 * var(--u));
  --wide: calc(1720 * var(--u));

  --f-display: "Sofia Sans Extra Condensed", "Sofia Fallback", "Arial Narrow", sans-serif;
  --f-text: "Atkinson Hyperlegible Next", "Atkinson Fallback", Arial, sans-serif;
  --f-type: "Courier Prime", "Courier Fallback", "Courier New", monospace;
  --ease-film: cubic-bezier(.2, .6, .25, 1);
}
@media (max-width: 767px) { :root { --navH: 60px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); color: var(--white); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: hidden;
  background: var(--black); color: var(--white);
  font-family: var(--f-text); font-size: calc(17 * var(--tu)); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 16px;
  background: var(--gold); color: var(--black); font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 calc(20 * var(--u));
  font-family: var(--f-text); font-weight: 600; font-size: calc(15 * var(--tu)); letter-spacing: .01em;
  line-height: 1.1; text-decoration: none; border: 0; border-radius: 2px; cursor: pointer;
  transition: background-color .25s var(--ease-film), color .25s var(--ease-film), box-shadow .25s var(--ease-film);
}
.btn--gold { background: var(--gold); color: var(--black); }
.btn--gold:hover { background: #F2D48C; }
.btn--line { color: var(--white); background: transparent; box-shadow: inset 0 0 0 1px rgba(243, 240, 230, .45); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--white); }
.btn--big { min-height: max(52px, calc(60 * var(--u))); padding: 0 calc(34 * var(--u)); font-size: calc(17 * var(--tu)); }

/* ---------- chrome: top bar ---------- */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--navH); padding: 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color .45s var(--ease-film);
}
.site-head.is-solid, html:not(.cine) .site-head { background: var(--black); box-shadow: 0 1px 0 var(--line); }
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-display); font-weight: 700; font-size: calc(30 * var(--u));
  letter-spacing: .22em; margin-right: -.22em; text-decoration: none; color: var(--white);
}
.site-nav { display: flex; align-items: center; gap: calc(30 * var(--u)); }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: calc(15 * var(--tu)); text-decoration: none; color: var(--white);
  text-underline-offset: .3em;
}
.site-nav__link:hover { text-decoration: underline; }
.site-nav .btn { min-height: 40px; }
@media (max-width: 640px) { .site-nav__link { display: none; } .site-nav .btn { min-height: 44px; } }

/* =========================================================
   THE FILM
   Default (no JS / reduced motion): a stacked sequence of stills with subtitles.
   ========================================================= */
.film { padding-top: var(--navH); }
.title-card {
  min-height: calc(86vh - var(--navH)); display: grid; place-items: center;
  padding: 10vh var(--gut) 8vh; text-align: center;
}
.title-card__inner { display: flex; flex-direction: column; align-items: center; }
.presents { font-size: calc(17 * var(--tu)); letter-spacing: .08em; color: var(--white); margin: 0 0 .6em; }
.title { font-family: var(--f-display); line-height: .78; }
.title__word {
  display: block; font-size: clamp(170px, 30vw, calc(560 * var(--u)));
  font-weight: 300; letter-spacing: .035em; margin-right: -.035em; font-kerning: normal;
  padding-bottom: .19em; /* room for the J and y descenders */
}
.ch { display: inline-block; }
.logline {
  max-width: 30em; margin: .9em auto 0; text-wrap: balance;
  font-size: clamp(17px, calc(21 * var(--tu)), 30px); line-height: 1.4; color: var(--white);
}
.title-card__actions { margin: 1.6em 0 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cue { display: none; }

.shot {
  position: relative; margin: 0 auto calc(64 * var(--u));
  width: min(100% - 2 * var(--gut), var(--wide));
}
.kb { position: relative; aspect-ratio: 2.39 / 1; overflow: hidden; background: #000; }
.kb picture, .kb img { width: 100%; height: 100%; }
.kb img { object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.veil { display: none; }
.sub { margin: 1em auto 0; text-align: center; max-width: 36em; }
.sub__line { display: block; font-size: calc(19 * var(--tu)); line-height: 1.4; }
.sub__line + .sub__line { margin-top: .3em; }
.sdh { color: var(--grey); }
.tag {
  position: absolute; top: calc(14 * var(--u)); left: calc(16 * var(--u)); z-index: 2;
  font-size: calc(13.5 * var(--tu)); letter-spacing: .02em; color: rgba(243, 240, 230, .88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.card { padding: calc(110 * var(--u)) var(--gut) calc(56 * var(--u)); text-align: center; }
.card__title { font-family: var(--f-display); display: flex; flex-direction: column; align-items: center; line-height: .9; }
.card__num { font-size: clamp(34px, 4vw, calc(72 * var(--u))); font-weight: 300; letter-spacing: .14em; margin-right: -.14em; color: var(--grey); margin-bottom: .25em; }
.card__name { font-size: clamp(72px, 11vw, calc(200 * var(--u))); font-weight: 350; letter-spacing: .02em; }
.grain, .bar-bottom, .reel { display: none; }
@media (max-width: 767px) { .kb { aspect-ratio: 4 / 5; } }

/* ---------- .cine: the projected film (sticky stage, scrubbed by GSAP) ---------- */
.cine .film { padding-top: 0; position: relative; height: calc(100vh + var(--D, 33) * 34vh); }
.cine .stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--black);
  /* 2.39:1 letterbox; bars never thinner than the top bar */
  --frameH: min(calc(100vw / 2.39), calc(100vh - 2 * var(--navH)));
  --barMax: calc((100vh - var(--frameH)) / 2);
  --bar: calc(var(--barMax) * (1 - var(--open, 0)));
}
@media (orientation: portrait) {
  .cine .stage { --frameH: min(calc(100vw * 9 / 16), calc(100vh - 2 * var(--navH))); }
}
@media (orientation: portrait) and (max-width: 767px) {
  .cine .stage { --frameH: min(calc(100vw * 1.25), calc(100vh - 2 * var(--navH) - 64px)); }
}
.cine .screen {
  position: absolute; inset: 0;
  clip-path: inset(var(--bar) 0 var(--bar) 0);
}
.cine .shot, .cine .card, .cine .title-card {
  position: absolute; inset: 0; margin: 0; width: auto; min-height: 0; padding: 0;
}
.cine .shot, .cine .card { opacity: 0; visibility: hidden; }
.cine .shot--first { opacity: 1; visibility: visible; }
.cine .kb { position: absolute; inset: 0; aspect-ratio: auto; transform-origin: 50% 50%; background: none; }
/* the hero frame matches the timeline's first camera position, so GSAP taking over never jumps */
.cine #s01 .kb { transform: translate(-2.5%, 1.5%) scale(1.16); }
.cine .veil { display: block; position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(ellipse 46% 58% at 50% 50%, rgba(10, 10, 10, .95), rgba(10, 10, 10, .45)); }
.vignette { display: none; }
.cine .vignette { display: block; position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(ellipse 75% 85% at 50% 50%, transparent 55%, rgba(0, 0, 0, .42) 100%); }
.cine .sub {
  position: absolute; left: 6%; right: 6%; margin: 0; max-width: none;
  bottom: calc(var(--bar) + var(--frameH) * .075);
}
.cine .sub__line {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: 30em;
  opacity: 0; visibility: hidden; text-wrap: balance;
  font-weight: 500; font-size: clamp(17px, calc(var(--frameH) * .036), 44px); line-height: 1.3;
  color: var(--white); letter-spacing: .005em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .6);
}
.cine .sub__line + .sub__line { margin-top: 0; }
.cine .sdh { color: #DAD6CB; }
.cine .tag { top: calc(max(var(--bar), var(--navH)) + 16 * var(--u)); left: var(--gut); }

.cine .title-card { z-index: 4; top: var(--barMax); bottom: var(--barMax); display: grid; place-items: center; text-align: center; }
.cine .title-card__inner { padding: 0 var(--gut); }
.cine .presents { font-size: clamp(15px, calc(var(--frameH) * .022), 26px); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.cine .title__word { font-size: calc(var(--frameH) * .52); text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.cine .logline { font-size: clamp(16px, calc(var(--frameH) * .026), 32px); max-width: 32em; margin-top: calc(var(--frameH) * .012); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.cine .title-card__actions { margin-top: 1.4em; }
.cine .cue {
  display: block; margin: calc(var(--frameH) * .05) 0 0; text-align: center;
  font-size: clamp(16px, calc(var(--frameH) * .028), 34px); color: #DAD6CB; font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

.cine .card { background: var(--black); display: grid; place-items: center; text-align: center; }
.cine .card__num { font-size: calc(var(--frameH) * .075); }
.cine .card__name { font-size: calc(var(--frameH) * .24); }

.cine .grain {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 8; mix-blend-mode: overlay; opacity: .42;
}

/* bottom bar: chapter, reel, skip, timecode */
.cine .bar-bottom {
  display: flex; align-items: center; gap: calc(28 * var(--u));
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
  height: var(--barMax); padding: 0 var(--gut);
  font-size: calc(14 * var(--tu)); color: var(--grey);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.bar-bottom p { margin: 0; }
.bar-bottom__chapter {
  font-family: var(--f-display); font-size: calc(24 * var(--tu)); font-weight: 400;
  letter-spacing: .05em; color: var(--white); min-width: 7.5em; white-space: nowrap;
}
.bar-bottom__skip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: var(--grey); text-underline-offset: .3em; white-space: nowrap;
}
.bar-bottom__skip:hover { color: var(--white); }
.bar-bottom__tc {
  font-family: var(--f-type); font-size: calc(17 * var(--tu)); letter-spacing: .06em;
  color: var(--white); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cine .reel { display: block; flex: 1; height: 1px; background: rgba(243, 240, 230, .16); position: relative; }
.cine .bar-bottom .reel { order: 1; }
.bar-bottom__chapter { order: 0; }
.bar-bottom__skip { order: 2; }
.bar-bottom__tc { order: 3; }
.reel i { position: absolute; inset: 0; background: var(--white); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (max-width: 767px) {
  .cine .bar-bottom { flex-wrap: wrap; align-content: center; row-gap: 6px; column-gap: 12px; }
  .bar-bottom__chapter { min-width: 0; flex: 1; font-size: 22px; }
  .cine .bar-bottom .reel { order: 4; flex: 0 0 100%; }
  .bar-bottom__skip { order: 5; font-size: 15px; }
  .bar-bottom__tc { font-size: 16px; }
  .cine .title-card__actions { display: none; }
}

/* =========================================================
   THE ROOM — a script page and a set drawing
   ========================================================= */
.room {
  position: relative; max-width: calc(var(--wide) + 2 * var(--gut)); margin: 0 auto;
  padding: calc(170 * var(--u)) var(--gut) calc(150 * var(--u));
}
.room:focus { outline: none; }
.room__head { max-width: 58em; margin-bottom: calc(80 * var(--u)); }
.room__title {
  font-family: var(--f-display); font-weight: 350; line-height: .9;
  font-size: clamp(52px, 7.4vw, calc(136 * var(--u))); letter-spacing: .005em; margin-bottom: .28em;
}
.room__lede { font-size: calc(20 * var(--tu)); color: var(--grey); max-width: 32em; margin: 0; }
.room__grid {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: calc(80 * var(--u)); align-items: start;
}

.script {
  position: relative; width: 100%;
  background: var(--paper); color: var(--ink);
  font-family: var(--f-type); font-size: calc(16.5 * var(--tu)); line-height: 1.5;
  padding: calc(84 * var(--u)) 7% calc(76 * var(--u)) max(64px, 12%);
}
/* three-hole punch, the screenplay kind */
.script::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(40 * var(--u)); width: calc(22 * var(--u));
  background:
    radial-gradient(circle at 50% 11%, var(--black) 0 calc(8 * var(--u)), transparent calc(8.6 * var(--u))),
    radial-gradient(circle at 50% 50%, var(--black) 0 calc(8 * var(--u)), transparent calc(8.6 * var(--u))),
    radial-gradient(circle at 50% 89%, var(--black) 0 calc(8 * var(--u)), transparent calc(8.6 * var(--u)));
}
.script p { margin: 0 0 1.5em; }
.script__page { position: absolute; top: calc(38 * var(--u)); right: calc(56 * var(--u)); }
.script .script__page { margin: 0; }
.script__slug { font: inherit; font-weight: 700; text-transform: uppercase; margin: 0 0 1.5em; }
.script__dialogue { margin: 0 0 1.5em; padding-left: 10ch; }
.script .script__dialogue p { margin: 0; }
.script .script__char { padding-left: 11ch; text-transform: uppercase; }
.script .script__paren { padding-left: 5ch; }
.script .script__line { max-width: 35ch; }
.script .script__transition { text-align: right; text-transform: uppercase; }
.script .script__note {
  font-family: var(--f-text); font-size: calc(14.5 * var(--tu)); line-height: 1.45; color: #55534A;
  margin: 2.4em 0 0; padding-top: 1em; border-top: 1px solid rgba(23, 22, 15, .22);
}

.set { margin: 0; }
.cine .set { position: sticky; top: calc(var(--navH) + 5vh); }
.set__art { position: relative; aspect-ratio: 1000 / 800; }
.set__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.set__lines .draw { stroke-opacity: .72; }
.set__lines .thin { stroke-width: 1.2; stroke-opacity: .45; }
.set__lines .dim { stroke-width: 1.2; stroke-opacity: .5; }
.set__lines .panel { fill: rgba(243, 240, 230, .14); stroke-opacity: 1; stroke-width: 2.4; }
.set__pipe .pipe { stroke: var(--white); stroke-width: 4; }
.set__pipe .fitting { fill: var(--black); stroke: var(--white); stroke-width: 3; }
.set__waves .wave { stroke-opacity: .8; }
.set__label {
  position: absolute; left: var(--x); top: var(--y); margin: 0; transform: translateY(-50%);
  font-family: var(--f-type); font-size: calc(14.5 * var(--tu)); line-height: 1.25; color: var(--white);
  white-space: nowrap; background: var(--black); padding: 2px 6px;
}
.set__label--c { transform: translate(-50%, -50%); }
.set__label--r { transform: translate(-100%, -50%); }
.set__label--big { font-family: var(--f-display); font-size: calc(28 * var(--tu)); letter-spacing: .03em; background: none; padding: 0; }
.set__cap { font-size: calc(15 * var(--tu)); color: var(--grey); margin: 1.4em 0 0; max-width: 40em; }

.room__facts {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(88 * var(--u));
  margin-top: calc(130 * var(--u)); padding-top: calc(56 * var(--u)); border-top: 1px solid var(--line);
}
.absent__title, .spec__title {
  font-family: var(--f-text); font-size: calc(16 * var(--tu)); font-weight: 600; color: var(--grey); margin-bottom: 1.1em;
}
.absent__list {
  list-style: none; margin: 0; padding: 0;
  font-family: var(--f-display); font-weight: 300; line-height: 1.02;
  font-size: clamp(42px, 5.4vw, calc(100 * var(--u)));
}
.absent__list li { display: inline; white-space: nowrap; }
.absent__list li::after { content: ".\00a0 "; color: var(--grey); }
.spec__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(48 * var(--u)); align-items: start; }
.spec__fig { order: 2; width: calc(150 * var(--u)); height: auto; }
.spec__list { margin: 0; }
.spec__list > div {
  display: grid; grid-template-columns: minmax(7em, .45fr) 1fr; gap: 1em;
  padding: .7em 0; border-bottom: 1px solid var(--line);
}
.spec__list dt { color: var(--grey); }
.spec__list dd { margin: 0; }
.spec__note { font-size: calc(14.5 * var(--tu)); color: var(--grey); margin-top: 1.1em; }

@media (max-width: 1100px) {
  .room__grid { grid-template-columns: minmax(0, 1fr); }
  .cine .set { position: relative; top: 0; }
  .script { width: 100%; max-width: 46em; }
  .room__facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .script { font-size: 15.5px; padding: 44px 20px 40px 46px; }
  .script::before { left: 14px; width: 16px; background:
    radial-gradient(circle at 50% 8%, var(--black) 0 6px, transparent 6.5px),
    radial-gradient(circle at 50% 50%, var(--black) 0 6px, transparent 6.5px),
    radial-gradient(circle at 50% 92%, var(--black) 0 6px, transparent 6.5px); }
  .script__page { top: 16px; right: 18px; }
  .script__dialogue { padding-left: 3ch; }
  .script .script__char { padding-left: 6ch; }
  .script .script__paren { padding-left: 3ch; }
  .set__label { font-size: 12px; padding: 1px 3px; }
  .set__label--big { font-size: 17px; }
  .set__label--hide-sm { display: none; }
  .spec__body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .spec__fig { width: 96px; }
}

/* =========================================================
   BOOK A SCREENING
   ========================================================= */
.book {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: calc(110 * var(--u));
  max-width: calc(var(--wide) + 2 * var(--gut)); margin: 0 auto;
  padding: calc(150 * var(--u)) var(--gut) calc(170 * var(--u));
  border-top: 1px solid var(--line);
}
.book:focus { outline: none; }
.book__title {
  font-family: var(--f-display); font-weight: 350; line-height: .88;
  font-size: clamp(60px, 8.6vw, calc(160 * var(--u))); margin-bottom: .3em;
}
.book__lede { font-size: calc(20 * var(--tu)); max-width: 28em; }
.venue { margin: calc(44 * var(--u)) 0 0; }
.venue > div { display: grid; grid-template-columns: 5.5em 1fr; gap: 1em; padding: .7em 0; border-top: 1px solid var(--line); }
.venue dt { color: var(--grey); }
.venue dd { margin: 0; }
.venue a { text-underline-offset: .25em; }

.booking { display: grid; gap: calc(34 * var(--u)); align-content: start; position: relative; }
.booking fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.booking legend, .field__label {
  padding: 0; font-size: calc(15.5 * var(--tu)); font-weight: 600; color: var(--grey);
}
.booking legend { margin-bottom: .8em; }
.chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: max(46px, calc(54 * var(--u))); min-width: calc(84 * var(--u)); padding: 0 calc(14 * var(--u));
  border: 1px solid rgba(243, 240, 230, .34); border-radius: 2px;
  font-family: var(--f-type); font-size: calc(16.5 * var(--tu)); line-height: 1.15; color: var(--white);
  transition: background-color .2s var(--ease-film), color .2s var(--ease-film), border-color .2s var(--ease-film);
}
.chip span small { font-size: .8em; color: inherit; opacity: .8; }
.chip:hover span { border-color: var(--white); }
.chip input:checked + span { background: var(--white); color: var(--black); border-color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.chip--day span { min-height: max(56px, calc(66 * var(--u))); min-width: calc(88 * var(--u)); }

.field { display: grid; gap: 6px; }
.field__opt { font-weight: 400; }
.field__input {
  width: 100%; min-height: 48px; padding: 10px 0; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(243, 240, 230, .42); background: transparent; color: var(--white);
  font: inherit; font-size: calc(18 * var(--tu)); color-scheme: dark;
}
textarea.field__input { resize: vertical; min-height: 88px; line-height: 1.5; }
select.field__input { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--white) 50%), linear-gradient(-45deg, transparent 50%, var(--white) 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
select.field__input option { background: var(--black); color: var(--white); }
.field__input:focus { outline: none; border-bottom-color: var(--gold); box-shadow: 0 1px 0 0 var(--gold); }
.field__input[aria-invalid="true"] { border-bottom-color: var(--error); }
.field__error { color: var(--error); font-size: calc(15 * var(--tu)); margin: .5em 0 0; }
.field--date { max-width: 20em; }
.booking__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(34 * var(--u)); }
.booking__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px calc(24 * var(--u)); margin-top: calc(6 * var(--u)); }
.booking__note { margin: 0; color: var(--grey); font-size: calc(15 * var(--tu)); }

.ticket:empty { display: none; }
.ticket {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: calc(10 * var(--u));
  background: var(--paper); color: var(--ink); font-family: var(--f-type); font-size: calc(16 * var(--tu)); line-height: 1.45;
  /* punched notches at the tear line */
  -webkit-mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent 11px, #000 11.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent 11px, #000 11.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent 11px, #000 11.5px) top / 100% 51% no-repeat,
                radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent 11px, #000 11.5px) bottom / 100% 51% no-repeat;
  --stub: calc(150 * var(--u));
}
.ticket__main { padding: calc(28 * var(--u)) calc(32 * var(--u)); }
.ticket__stub {
  width: var(--stub); padding: calc(28 * var(--u)) calc(20 * var(--u)); border-left: 2px dashed rgba(23, 22, 15, .35);
  display: flex; flex-direction: column; justify-content: space-between; text-align: center;
}
.ticket__kicker { font-weight: 700; text-transform: uppercase; margin: 0 0 .6em; }
.ticket__when { font-family: var(--f-display); font-size: calc(40 * var(--u)); line-height: 1; font-weight: 500; margin: 0 0 .25em; }
.ticket p { margin: 0 0 .4em; }
.ticket__demo { font-family: var(--f-text); font-size: calc(14.5 * var(--tu)); color: #4C4A42; margin-top: .9em !important; }
.ticket__no { font-size: calc(19 * var(--u)); font-weight: 700; white-space: nowrap; }

@media (max-width: 1023px) {
  .book { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .booking__row { grid-template-columns: minmax(0, 1fr); }
  .chip span { min-width: 64px; }
  .ticket { --stub: 96px; font-size: 15px; }
  .ticket__when { font-size: 30px; }
}

/* =========================================================
   END CARD + CREDITS
   ========================================================= */
.credits { position: relative; }
.endcard {
  position: relative; height: 100vh; min-height: 420px; display: grid; place-items: center; overflow: hidden;
  background: var(--black); text-align: center;
}
.endcard__inner { position: relative; z-index: 1; padding: 0 var(--gut); }
.endcard__mark {
  margin: 0; font-family: var(--f-display); font-weight: 600; line-height: .8;
  font-size: clamp(120px, 21vw, calc(400 * var(--u))); letter-spacing: .26em; margin-right: -.26em;
}
.endcard__line { margin: 1.3em 0 0; font-size: calc(19 * var(--tu)); color: var(--grey); }
.grain--end { display: none; }
.cine .grain--end { display: block; position: absolute; inset: 0; z-index: 2; }

.roll {
  position: relative; z-index: 2; text-align: center;
  max-width: calc(1180 * var(--u) + 2 * var(--gut)); margin: 0 auto;
  padding: calc(40 * var(--u)) var(--gut) calc(220 * var(--u));
}
.roll__title {
  font-family: var(--f-display); font-weight: 400; font-size: calc(46 * var(--u)); letter-spacing: .12em; margin: 0 -.12em calc(110 * var(--u)) 0;
}
.roll__sub { font-family: var(--f-text); font-size: calc(16 * var(--tu)); font-weight: 600; color: var(--grey); margin: 0 0 1.6em; }
.roll__group { margin: 0 0 calc(120 * var(--u)); }
.roll__group > div {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(44 * var(--u));
  align-items: baseline; margin-bottom: calc(18 * var(--u));
}
.roll__group dt { grid-column: 1; text-align: right; color: var(--grey); font-size: calc(16 * var(--tu)); }
.roll__group dd {
  grid-column: 2; margin: 0; text-align: left;
  font-family: var(--f-display); font-weight: 400; font-size: calc(34 * var(--u)); line-height: 1.2; letter-spacing: .015em;
}
.roll__group dd + dd { margin-top: .1em; }
.roll__group a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
.roll__group a:hover { color: var(--gold); }
.roll__group--photos > div { margin-bottom: calc(10 * var(--u)); }
.roll__group--photos dd { font-size: calc(28 * var(--u)); }
.roll__note { color: var(--grey); font-size: calc(16 * var(--tu)); margin: 0 auto calc(80 * var(--u)); max-width: 30em; }
.roll__end { margin: 0; }
@media (max-width: 640px) {
  .roll__group dt { font-size: 14px; }
  .roll__group dd { font-size: 23px; }
  .roll__group--photos dd { font-size: 21px; }
  .roll__group > div { column-gap: 16px; }
}

/* comfortable touch targets for inline links on small screens */
@media (max-width: 767px) {
  .roll__group a, .site-foot a, .venue a { display: inline-block; padding: 11px 0; }
  .roll__group--photos > div { margin-bottom: 0; }
}

/* credits roll over the held end card */
.cine .endcard { position: sticky; top: 0; }

/* ---------- footer ---------- */
.site-foot {
  position: relative; z-index: 3; background: var(--black);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding: calc(48 * var(--u)) var(--gut) calc(56 * var(--u)); border-top: 1px solid var(--line);
  font-size: calc(15 * var(--tu)); color: var(--grey);
}
.site-foot p { margin: 0; }
.site-foot__demo { color: var(--white); }
.site-foot__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.site-foot__meta a { text-underline-offset: .25em; }

/* =========================================================
   INTRO (CSS only, so the cold open never waits for a CDN)
   starts on .go (display font loaded or 350 ms), removed on .intro-done
   ========================================================= */
@keyframes gln-flick { 0% { opacity: 0 } 18% { opacity: .85 } 30% { opacity: .25 } 46% { opacity: 1 } 62% { opacity: .7 } 100% { opacity: 1 } }
@keyframes gln-type  { 0% { opacity: 0 } 35% { opacity: 1 } 55% { opacity: .3 } 75% { opacity: 1 } 100% { opacity: 1 } }
@keyframes gln-up    { from { opacity: 0; transform: scale(1.04) } to { opacity: 1; transform: none } }
@keyframes gln-in    { from { opacity: 0 } to { opacity: 1 } }

.cine:not(.intro-done) .presents span,
.cine:not(.intro-done) .title .ch,
.cine:not(.intro-done) .logline,
.cine:not(.intro-done) .title-card__actions,
.cine:not(.intro-done) .cue,
.cine:not(.intro-done) #s01 picture { opacity: 0; }
.cine .presents span { display: inline-block; }
.cine.go:not(.intro-done) .presents span { animation: gln-flick .46s linear 0s both; }
.cine.go:not(.intro-done) .title .ch { animation: gln-type .3s linear calc(150ms + var(--i) * 100ms) both; }
.cine.go:not(.intro-done) #s01 picture { animation: gln-up 1s var(--ease-film) .2s both; }
.cine.go:not(.intro-done) .logline { animation: gln-flick .4s linear .72s both; }
.cine.go:not(.intro-done) .title-card__actions { animation: gln-in .32s ease-out .9s both; }
.cine.go:not(.intro-done) .cue { animation: gln-in .35s ease-out 1.05s both; }

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

/* ---------- language switch: EN / 中文 ---------- */
.lang { display: flex; align-items: center; flex: none; margin-left: calc(-12 * var(--u)); }
.lang__btn {
  min-width: 44px; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer;
  font: 400 calc(14 * var(--tu))/1 var(--f-type); color: var(--grey); text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.lang__btn:hover { color: var(--white); }
.lang__btn[aria-pressed="true"] { color: var(--white); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .45em; }
.lang__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lang__btn[lang="zh-CN"] { font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif; }
.lang__sep { color: #55534A; font-size: calc(13 * var(--tu)); }
@media (max-width: 640px) { .lang { margin-left: -8px; } .site-nav { gap: 8px; } }

/* ---------- 简体中文 ---------- */
:root:lang(zh) {
  --f-display: "Sofia Sans Extra Condensed", "Noto Sans SC", "Noto Sans SC Fallback", sans-serif;
  --f-text: "Atkinson Hyperlegible Next", "Noto Sans SC", "Noto Sans SC Fallback", sans-serif;
  --f-type: "Courier Prime", "Noto Sans SC", "Noto Sans SC Fallback", monospace;
}
:lang(zh) body { line-height: 1.8; }
:lang(zh) p, :lang(zh) dd { text-wrap: pretty; }
:lang(zh) .presents { letter-spacing: .2em; margin-right: -.2em; }
:lang(zh) .title { line-height: 1.1; }
:lang(zh) .title__word { letter-spacing: .08em; margin-right: -.08em; padding-bottom: .06em; font-size: clamp(120px, 22vw, calc(400 * var(--u))); }
:lang(zh) .cine .title__word { font-size: calc(var(--frameH) * .36); }
:lang(zh) .logline { line-height: 1.6; max-width: 24em; }
:lang(zh) .sub__line, :lang(zh) .cine .sub__line { letter-spacing: .02em; font-weight: 400; line-height: 1.4; max-width: 24em; }
:lang(zh) .card__title { line-height: 1.25; }
:lang(zh) .card__num { letter-spacing: 0; margin-right: 0; }
:lang(zh) .card__name { font-weight: 300; letter-spacing: .12em; margin-right: -.12em; font-size: clamp(60px, 8.5vw, calc(160 * var(--u))); }
:lang(zh) .cine .card__num { font-size: calc(var(--frameH) * .06); }
:lang(zh) .cine .card__name { font-size: calc(var(--frameH) * .18); }
:lang(zh) .bar-bottom__chapter { font-size: calc(20 * var(--tu)); letter-spacing: .1em; }
:lang(zh) .room__title, :lang(zh) .book__title { font-weight: 300; line-height: 1.3; letter-spacing: .02em; font-size: clamp(38px, 5.4vw, calc(100 * var(--u))); text-wrap: balance; }
:lang(zh) .room__lede, :lang(zh) .book__lede { line-height: 1.8; max-width: 30em; }
:lang(zh) .script { line-height: 1.8; }
:lang(zh) .script__slug, :lang(zh) .script .script__char, :lang(zh) .script .script__transition, :lang(zh) .ticket__kicker { text-transform: none; }
:lang(zh) .script .script__char { padding-left: 16ch; }
:lang(zh) .set__label { line-height: 1.4; }
:lang(zh) .set__label--big { font-size: calc(22 * var(--tu)); font-weight: 400; letter-spacing: 0; }
:lang(zh) .absent__list { font-size: clamp(30px, 3.8vw, calc(70 * var(--u))); line-height: 1.4; }
:lang(zh) .ticket__when { font-size: calc(30 * var(--u)); line-height: 1.3; font-weight: 400; }
:lang(zh) .roll__title { letter-spacing: .3em; margin-right: -.3em; font-size: calc(38 * var(--u)); }
:lang(zh) .roll dt, :lang(zh) .roll dd { letter-spacing: .04em; line-height: 1.5; }
:lang(zh) .roll dd { font-size: calc(28 * var(--u)); }
:lang(zh) em, :lang(zh) i, :lang(zh) cite { font-style: normal; }