/* DIANA · scroll-craft comparison build. Grammar: "The screening". Page styles only;
   scrollcraft.css is the mechanism and is not edited. */

@font-face { font-family: "Fira XC"; src: url("assets/fonts/fira-xc-800-greek.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Fira XC"; src: url("assets/fonts/fira-xc-800-latin.woff2") format("woff2"); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Fira XC"; src: url("assets/fonts/fira-xc-600-greek.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Fira XC"; src: url("assets/fonts/fira-xc-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Geologica"; src: url("assets/fonts/geologica-greek.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Geologica"; src: url("assets/fonts/geologica-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --sc-canvas: #0b0a0d;
  --sc-surface: #1c1013;
  --sc-ink: #f3ece4;
  --sc-ink-soft: #bcaea4;
  --sc-accent: #2c62d6;
  --sc-accent-ink: #fff7f1;
  --sc-font-display: "Fira XC", "Arial Narrow", sans-serif;
  --sc-font-text: "Geologica", system-ui, sans-serif;
  --sc-shadow-color: 225 45% 3%;

  --velvet: #1c1013;
  --wood: #15100d;
  --black: #060507;
  --paper: #ece8e2;
  --paper-ink: #16121a;
  --paper-soft: #5a4f53;
  --paper-accent: #1d47a8;
  --bulb: #ffd58a;
  --bar-h: 64px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

html { scroll-padding-top: var(--bar-h); }
body { font-family: var(--sc-font-text); background: var(--sc-canvas); color: var(--sc-ink); }
h1, h2, h3 { text-wrap: balance; }
.caps { font-family: var(--sc-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.9; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bulb); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* One button shape for the whole page: square, flat red. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 600 1rem/1 var(--sc-font-text); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(4, 8, 20, 0.35), 0 10px 24px -8px rgba(44, 98, 214, 0.55);
  transition: transform 140ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease);
  touch-action: manipulation;
}
.btn:hover { background: #3a72ea; transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ghost { background: rgba(6, 5, 7, 0.35); color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn--ghost:hover { background: color-mix(in oklab, currentColor 12%, transparent); }

/* ———————————————— The marquee bar (nav): the next screening, always ———————————————— */
.marquee {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 clamp(14px, 2vw, 28px);
  background: color-mix(in oklab, var(--black) 92%, transparent);
  box-shadow: 0 1px 0 rgba(255, 213, 138, 0.08);
}
.marquee__mark { font: 800 1.6rem/1 var(--sc-font-display); letter-spacing: 0.14em; text-decoration: none; }
.marquee__board {
  position: relative; flex: 1; min-width: 0; max-width: 760px; margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 16px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 9px, rgba(22, 18, 26, 0.07) 9px 10px),
    var(--paper);
  color: var(--paper-ink); text-decoration: none;
  font: 800 1.15rem/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden;
  box-shadow: 0 0 0 3px #2a2025, 0 0 0 4px rgba(255, 213, 138, 0.25);
  transition: transform 140ms var(--ease);
}
.marquee__board::before, .marquee__board::after {
  content: ""; position: absolute; left: 6px; right: 6px; height: 4px;
  background: radial-gradient(circle, var(--bulb) 1.5px, transparent 2px) 0 0 / 14px 4px repeat-x;
  opacity: 0.85;
}
.marquee__board::before { top: -8px; }
.marquee__board::after { bottom: -8px; }
.marquee__board:hover { transform: translateY(-1px); }
.marquee__board .when { color: var(--paper-accent); }
.marquee__board .t { overflow: hidden; text-overflow: ellipsis; }
.marquee__board.is-swapping .t, .marquee__board.is-swapping .when { animation: flipboard 420ms var(--ease); }
@keyframes flipboard { 0% { opacity: 0; transform: translateY(40%); } 100% { opacity: 1; transform: none; } }
.marquee nav ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.marquee nav a { text-decoration: none; font-size: 0.95rem; padding: 10px 0; transition: color 160ms var(--ease); }
.marquee nav a:hover { color: var(--bulb); }
.marquee .btn { min-height: 42px; }
.marquee__lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; flex: none; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.06em; text-decoration: none; transition: color 160ms var(--ease); }
.marquee__lang:hover { color: var(--bulb); }
.marquee__lang:active { opacity: 0.7; }
@media (max-width: 1080px) { .marquee nav { display: none; } }
@media (max-width: 720px) {
  :root { --bar-h: 58px; }
  .marquee { gap: 10px; }
  .marquee__mark { font-size: 1.25rem; letter-spacing: 0.1em; }
  .marquee .btn { display: none; }
  .marquee__board { font-size: 0.98rem; padding: 0 10px; height: 36px; }
}

/* Pinned acts hold their scroll height before the engine mounts, so the page does not jump on load. */
.street { height: 170vh; }
.room { height: 380vh; }
.credits { height: 190vh; }
@media (hover: hover) and (pointer: fine) and (min-width: 861px) { .foyer { height: 380vh; } }

/* ———————————————— 1 · The street (pinned walk-up, layered) ———————————————— */
.street .sc-stage, .street [data-sc-stage] { background: #050406; }
.street__plane { position: absolute; max-width: none; pointer-events: none; will-change: transform; }
.street__facade {
  inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%;
  transform-origin: 45% 18%;
  transform: translate3d(5vw, 0, 0) scale(calc(1.04 + var(--sc-p, 0) * 0.24));
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%);
  mask-image: linear-gradient(to right, transparent 0%, #000 20%);
  filter: saturate(1.05) contrast(1.04);
}
.street__lamp {
  inset: -10% 30% auto -10%; height: 70%;
  background: radial-gradient(closest-side, rgba(255, 190, 110, 0.20), transparent 72%);
  transform: translate3d(calc(var(--sc-p, 0) * -4vw), calc(var(--sc-p, 0) * -6vh), 0);
}
.street__branch { top: -9vh; width: clamp(280px, 28vw, 480px); height: auto; filter: blur(0.6px) brightness(0.92); }
.street__branch--l { left: -3vw; transform-origin: 0 0; transform: translate3d(calc(var(--sc-p, 0) * -24vw), calc(var(--sc-p, 0) * -6vh), 0) scale(calc(1.02 + var(--sc-p, 0) * 0.32)); }
.street__branch--r { right: -7vw; transform-origin: 100% 0; transform: translate3d(calc(var(--sc-p, 0) * 24vw), calc(var(--sc-p, 0) * -6vh), 0) scale(calc(1.02 + var(--sc-p, 0) * 0.32)); }
.street__haze {
  inset: auto -5% -2% -5%; height: 34%;
  background: linear-gradient(to top, rgba(6, 5, 7, 0.95), rgba(6, 5, 7, 0));
}
.street__scrim {
  position: absolute; inset: auto auto 0 0; width: min(70vw, 900px); height: 70%;
  background: radial-gradient(120% 100% at 0% 100%, rgba(6, 5, 7, 0.86) 0%, rgba(6, 5, 7, 0.6) 40%, transparent 72%);
  pointer-events: none;
}
.street__copy {
  position: absolute; left: clamp(20px, 5vw, 80px); bottom: clamp(36px, 9vh, 96px);
  max-width: min(560px, 86vw);
  transform: translate3d(0, calc(var(--sc-p, 0) * -7vh), 0);
  opacity: calc(1 - max(0, var(--sc-p, 0) - 0.62) * 2.6);
}
.street__copy h1 { margin: 0; font-size: clamp(3rem, 1.5rem + 4vw, 5.6rem); }
.street__copy h1 span { display: block; font-family: var(--sc-font-text); font-weight: 500; font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem); text-transform: none; letter-spacing: -0.01em; line-height: 1.3; margin-top: 14px; color: var(--sc-ink); }
.street__copy p { margin: 12px 0 26px; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); line-height: 1.55; color: var(--sc-ink-soft); max-width: 40ch; }
.street__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 720px) {
  /* The tall photo is width-fitted and lifted, so the sign clears the bar and the copy sits below the entrance. */
  .street__facade { bottom: auto; height: 177.8vw; object-fit: cover; object-position: 50% 0; transform-origin: 50% 66%; transform: translate3d(0, -68vw, 0) scale(calc(1 + var(--sc-p, 0) * 0.16)); -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); }
  .street__branch { width: 34vw; top: calc(var(--bar-h) - 7vh); }
  .street__branch--l { left: -17vw; }
  .street__branch--r { right: -17vw; }
  .street__scrim { width: 100%; height: 48%; background: linear-gradient(to top, rgba(6, 5, 7, 0.94) 0%, rgba(6, 5, 7, 0.7) 45%, transparent 100%); }
  .street__copy { left: 20px; right: 20px; bottom: 28px; }
  .street__copy .btn { flex: 1; }
}

/* ———————————————— 2 · The box office ———————————————— */
.boxoffice { background: var(--velvet); padding-block: clamp(96px, 12vw, 180px); }
.boxoffice__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.boxoffice h2 { font-size: clamp(3rem, 1.6rem + 5vw, 6.5rem); margin: 0; }
.boxoffice__copy p { margin: 22px 0 0; color: var(--sc-ink-soft); max-width: 42ch; font-size: 1.08rem; line-height: 1.6; }
.boxoffice__copy p strong { color: var(--sc-ink); font-weight: 600; }
.stubs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 30px 0; }
.stub {
  --c: #f2c6c0;
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 22px 20px 26px; min-height: 270px;
  background: var(--c); color: #2a1a1c;
  box-shadow: var(--sc-e2);
  -webkit-mask: radial-gradient(circle 9px at 0 62%, transparent 98%, #000) , radial-gradient(circle 9px at 100% 62%, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transform: rotate(var(--r, 0deg));
  transition: transform 260ms var(--ease);
}
.stub:nth-child(1) { --c: #f2c6c0; --r: -3deg; }
.stub:nth-child(2) { --c: #cfe4c9; --r: 1.5deg; }
.stub:nth-child(3) { --c: #f1df9b; --r: -1deg; }
.stub__head { font: 600 0.82rem/1 var(--sc-font-display); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; }
.stub__days { font: 800 1.35rem/1.05 var(--sc-font-display); text-transform: uppercase; margin-top: 8px; }
.stub__price { font: 800 clamp(2.8rem, 2rem + 2.4vw, 4.2rem)/1 var(--sc-font-display); margin-top: auto; font-variant-numeric: tabular-nums; }
.stub__kind { font-size: 0.85rem; border-top: 2px dashed rgba(42, 26, 28, 0.35); padding-top: 12px; margin-top: 14px; }
.stub__stamp {
  position: absolute; top: 18px; right: 14px; display: none;
  padding: 6px 10px; border: 2.5px solid var(--sc-accent); color: var(--sc-accent);
  font: 800 1rem/1 var(--sc-font-display); letter-spacing: 0.08em; text-transform: uppercase;
  transform: rotate(9deg); opacity: 0.9;
}
.stub.is-today { transform: rotate(0deg) translateY(-18px); box-shadow: var(--sc-e3); }
.stub.is-today .stub__stamp { display: block; }
@media (hover: hover) and (pointer: fine) { .stub:hover { transform: rotate(0deg) translateY(-8px); } .stub.is-today:hover { transform: translateY(-22px); } }
@media (max-width: 860px) {
  .boxoffice__wrap { grid-template-columns: 1fr; }
  .stubs { grid-template-columns: 1fr; gap: 10px; padding: 8px 0; }
  .stub { min-height: 0; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head price" "days price" "kind kind"; align-items: end; padding: 18px; }
  .stub__head { grid-area: head; } .stub__days { grid-area: days; margin: 0; } .stub__price { grid-area: price; margin: 0; }
  .stub__kind { grid-area: kind; }
  .stub.is-today { transform: none; }
  .stub__stamp { top: auto; bottom: 16px; right: 16px; }
}

/* ———————————————— 3 · The foyer (pan rail of posters) ———————————————— */
.foyer .sc-stage, .foyer [data-sc-stage] { background: var(--wood); display: flex; align-items: center; }
.rail { display: flex; align-items: flex-start; gap: clamp(28px, 3.2vw, 56px); padding: calc(var(--bar-h) + 24px) clamp(20px, 5vw, 80px) 24px; width: max-content; }
.rail__lead { width: min(440px, 80vw); flex: none; align-self: center; }
.rail__lead h2 { font-size: clamp(2.8rem, 1.6rem + 4vw, 5.6rem); margin: 0; }
.rail__lead p { color: var(--sc-ink-soft); margin: 18px 0 0; line-height: 1.6; max-width: 34ch; }
.rail__lead p b { color: var(--sc-ink); font-weight: 600; }
.poster { width: clamp(250px, 23vw, 380px); flex: none; }
.poster__frame {
  display: block; width: 100%; padding: 10px; background: #2a1f18;
  box-shadow: var(--sc-e3), inset 0 1px 0 rgba(255, 213, 138, 0.18);
  transition: transform 220ms var(--ease);
}
.poster__frame img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: #0e0a08; }
.poster__frame:hover { transform: translateY(-6px); }
.poster__frame:active { transform: translateY(-2px) scale(0.99); }
.poster h3 { margin: 18px 0 4px; font-size: 1.7rem; }
.poster .label { margin: 0; font-size: 0.95rem; color: var(--sc-ink-soft); }
.poster .times { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.poster .times li { padding: 5px 8px; background: rgba(243, 236, 228, 0.08); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.poster .times li.is-past { opacity: 0.72; }
.rail__note { width: min(320px, 70vw); flex: none; align-self: center; color: var(--sc-ink-soft); line-height: 1.6; }
.rail__note b { display: block; color: var(--sc-ink); font: 800 2rem/1 var(--sc-font-display); text-transform: uppercase; margin-bottom: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .rail > .poster {
    --in: min(1, max(0, var(--e, 0) * 9 - var(--k, 0) * 1.1 + 0.6));
    opacity: calc(0.86 + var(--in) * 0.14);
    transform: translate3d(calc((1 - var(--in)) * 48px), 0, 0);
  }
}
/* Phones rebuild this section when the script runs; keeping it hidden until then avoids a load-time layout shift. */
@media (hover: none) and (pointer: coarse), (max-width: 860px) { .foyer:not(.is-swipe) .rail { visibility: hidden; } }
.foyer.is-swipe [data-sc-stage] { display: block; }
.foyer.is-swipe .rail__lead { width: auto; padding: 64px 20px 0; }
.foyer.is-swipe .rail {
  width: auto; padding: 28px 20px 64px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none;
}
.foyer.is-swipe .rail::-webkit-scrollbar { display: none; }
.foyer.is-swipe .rail > * { scroll-snap-align: start; }
.foyer.is-swipe .rail > .poster { opacity: 1; transform: none; }
@media (max-width: 720px) {
  .poster { width: 62vw; }
  .rail { padding-top: calc(var(--bar-h) + 16px); }
}

/* ———————————————— 5 · The room (peak) ———————————————— */
.room .sc-stage, .room [data-sc-stage] { background: var(--black); }
.room__media { position: absolute; inset: 0; }
.room__media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room__dark { background: #040305; opacity: calc(min(1, max(0, (var(--sc-p, 0) - 0.06) * 2.4)) * 0.5); pointer-events: none; }
.room__beam {
  position: absolute; inset: 0; pointer-events: none;
  filter: blur(22px);
  mix-blend-mode: screen;
  opacity: calc(min(1, max(0, (var(--sc-p, 0) - 0.38) * 7)) * 0.75);
}
.room__beam i {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255, 246, 228, 0.34), rgba(255, 246, 228, 0.1) 55%, rgba(255, 246, 228, 0.02));
}
.room__screen {
  position: absolute; overflow: hidden; background: #111; pointer-events: none;
  opacity: min(1, max(0, (var(--sc-p, 0) - 0.42) * 7));
  box-shadow: 0 0 60px rgba(255, 240, 215, 0.12);
}
.room__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.room__screen.is-playing { pointer-events: auto; z-index: 3; opacity: 1; }
.room__trailer { margin-top: 16px; min-height: 44px; }
.room__trailer .i-stop, .room__trailer[aria-pressed="true"] .i-play { display: none; }
.room__trailer[aria-pressed="true"] .i-stop { display: block; }
.room__screen img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95) contrast(1.02); }
.room__screen.is-cut img { animation: reel 520ms steps(1) 1, settle 600ms var(--ease) 1; }
@keyframes reel { 0% { opacity: 0; } 18% { opacity: 0.6; } 30% { opacity: 0.15; } 45% { opacity: 1; } }
@keyframes settle { from { transform: scale(1.03); } to { transform: none; } }
.room__intro { position: absolute; left: clamp(20px, 5vw, 80px); bottom: clamp(40px, 12vh, 120px); margin: 0; }
.room__intro h2 { margin: 0; font-size: clamp(2.6rem, 1.4rem + 4vw, 5.4rem); }
.room__now {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, max-content); align-items: end; gap: 20px 40px;
  padding: 0 clamp(20px, 5vw, 80px) clamp(20px, 4vh, 40px);
}
.room__title h2 { margin: 0; font-size: clamp(2.2rem, 1.2rem + 3vw, 4.4rem); }
.room__title p { margin: 8px 0 0; color: var(--sc-ink-soft); font-size: 0.98rem; }
.room__title .when { display: block; font: 600 1.1rem/1.2 var(--sc-font-text); color: var(--bulb); margin-bottom: 8px; }
.reels { display: grid; gap: 8px; justify-items: end; min-width: 0; max-width: 100%; }
.reels__cap { margin: 6px 0 0; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }
/* One row each: right-aligned when it fits, swipeable when the window is narrower. Never wraps onto the title. */
.reels__days, .reels__shows {
  display: flex; flex-wrap: nowrap; gap: 8px; justify-content: safe flex-end;
  max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.reels__days::-webkit-scrollbar, .reels__shows::-webkit-scrollbar { display: none; }
.reels__days button, .reels__shows button { flex: none; }
.reels__shows button span { white-space: nowrap; }
.reels button { cursor: pointer; touch-action: manipulation; border: 0; }
/* Days: letterboard tabs. Outlined caps; the chosen day is lit like the marquee. */
.reels__days button {
  min-height: 44px; padding: 0 16px;
  background: rgba(6, 5, 7, 0.55); color: var(--sc-ink);
  box-shadow: inset 0 0 0 1.5px rgba(243, 236, 228, 0.55);
  font: 600 1.05rem/1 var(--sc-font-display); letter-spacing: 0.06em; text-transform: uppercase;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease), box-shadow 160ms var(--ease);
}
.reels__days button:hover { box-shadow: inset 0 0 0 1.5px var(--sc-ink); background: rgba(243, 236, 228, 0.1); }
.reels__days button:active { transform: scale(0.97); }
.reels__days button[aria-pressed="true"] { background: var(--paper); color: var(--paper-ink); box-shadow: 0 0 0 3px rgba(255, 213, 138, 0.35), 0 6px 18px -6px rgba(255, 213, 138, 0.5); }
/* Screenings: ticket chips. A time block and a title; the one on screen is blue. */
.reels__shows button {
  display: inline-grid; grid-template-columns: auto auto; align-items: stretch;
  min-height: 48px; padding: 0; overflow: hidden;
  background: rgba(243, 236, 228, 0.14); color: var(--sc-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.35);
  font: 500 0.98rem/1 var(--sc-font-text); text-align: left;
  transition: background-color 160ms var(--ease), transform 140ms var(--ease), box-shadow 160ms var(--ease);
}
.reels__shows button b {
  display: grid; place-items: center; padding: 0 12px;
  background: rgba(243, 236, 228, 0.16);
  font: 800 1.15rem/1 var(--sc-font-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  border-right: 2px dashed rgba(6, 5, 7, 0.45);
}
.reels__shows button span { display: grid; align-items: center; padding: 0 14px; }
.reels__shows button:hover { background: rgba(243, 236, 228, 0.22); transform: translateY(-2px); }
.reels__shows button:active { transform: translateY(0) scale(0.98); }
.reels__shows button[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -8px rgba(44, 98, 214, 0.7); }
.reels__shows button[aria-pressed="true"] b { background: #1f4cb0; }
.reels__shows button.is-past { opacity: 0.5; }
@media (max-width: 860px) {
  .room__media { inset: var(--bar-h) 0 auto 0; height: 46svh; }
  .room__media > * { object-position: 50% 42%; }
  .room__intro { bottom: auto; top: calc(var(--bar-h) + 46svh + 24px); }
  .room__now { grid-template-columns: 1fr; padding-bottom: calc(84px + env(safe-area-inset-bottom)); gap: 14px; }
  .reels, .reels__days, .reels__shows { justify-items: start; justify-content: flex-start; }
  /* One swipeable row each, so a full week never pushes the title up onto the screen. */
  .reels { width: 100%; min-width: 0; }
  .reels__days, .reels__shows {
    flex-wrap: nowrap; overflow-x: auto; width: 100%;
    margin-right: calc(-1 * clamp(20px, 5vw, 80px)); padding-right: clamp(20px, 5vw, 80px);
    scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .reels__days::-webkit-scrollbar, .reels__shows::-webkit-scrollbar { display: none; }
  .reels__days button, .reels__shows button { flex: none; scroll-snap-align: start; }
  .reels__shows button span { white-space: nowrap; }
}

/* ———————————————— 6 · The week + how to get here (paper) ———————————————— */
.week { background: var(--paper); color: var(--paper-ink); padding-block: clamp(96px, 11vw, 170px); --sc-ink: var(--paper-ink); --sc-ink-soft: var(--paper-soft); }
.week ::selection { background: var(--paper-accent); color: #fff; }
.week__wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(40px, 6vw, 110px); }
.week h2 { font-size: clamp(2.8rem, 1.6rem + 4vw, 5.6rem); margin: 0 0 8px; }
.week__dates { margin: 0 0 40px; color: var(--paper-soft); font-size: 1.1rem; }
.tt-day + .tt-day { margin-top: 30px; }
.tt-day h3 { margin: 0 0 6px; font: 800 1.35rem/1 var(--sc-font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.tt-day h3 span { color: var(--paper-accent); }
.tt-day ul { list-style: none; margin: 0; padding: 0; }
.tt-day li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(22, 18, 26, 0.12); font-size: 1.05rem; }
.tt-day li b { font-variant-numeric: tabular-nums; font-weight: 700; }
.tt-day li.is-past { color: var(--paper-soft); }
.visit h3 { font: 800 1.9rem/1 var(--sc-font-display); text-transform: uppercase; margin: 0 0 18px; }
.visit dl { margin: 0; display: grid; gap: 16px; }
.visit dt { font-size: 0.85rem; color: var(--paper-soft); }
.visit dd { margin: 2px 0 0; font-size: 1.1rem; line-height: 1.45; }
.visit dd a { text-underline-offset: 0.2em; }
.visit .btn { margin-top: 28px; background: var(--paper-accent); }
.visit .btn:hover { background: #2556c4; }
.visit__sticky { position: sticky; top: calc(var(--bar-h) + 24px); }
@media (max-width: 900px) { .week__wrap { grid-template-columns: 1fr; } .visit__sticky { position: static; } }

/* ———————————————— 7 · End credits (close) ———————————————— */
.credits .sc-stage, .credits [data-sc-stage] { background: var(--black); }
.credits__roll {
  position: absolute; left: 50%; top: 0; width: min(680px, 88vw);
  transform: translate3d(-50%, calc(62svh - var(--sc-p, 0) * (var(--roll, 900px) - 30svh)), 0);
  text-align: center;
}
.credits__roll .cr { margin: 0 0 30px; }
.credits__roll .cr dt { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.credits__roll .cr dd { margin: 6px 0 0; font-size: 1.25rem; line-height: 1.4; }
.credits__roll .cr dd small { display: block; font-size: 0.8rem; color: var(--sc-ink-soft); margin-top: 6px; line-height: 1.5; }
.credits__roll .cr a { text-decoration: none; border-bottom: 1px solid rgba(243, 236, 228, 0.3); }
.credits__roll .cr a:hover { border-color: var(--bulb); }
.credits__name { font-size: clamp(4rem, 2rem + 8vw, 9rem); letter-spacing: 0.12em; margin: 0 0 56px; }
.credits__end { margin-top: 60px; display: grid; gap: 22px; justify-items: center; }
.credits__end .caps { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); letter-spacing: 0.08em; }
.credits__end p { margin: 0; color: var(--sc-ink-soft); }
.credits__legal { font-size: 0.82rem; color: var(--sc-ink-soft); margin-top: 18px; line-height: 1.6; }
.credits__legal a { color: inherit; }

/* Mobile call bar after the hero */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--black); transform: translateY(110%); transition: transform 280ms var(--ease); }
.callbar.is-on { transform: none; }
.callbar .btn { width: 100%; min-height: 52px; }
@media (max-width: 720px) { .callbar { display: block; } body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); } }

/* ———————————————— Reduced motion: the same evening, held still ———————————————— */
@media (prefers-reduced-motion: reduce) {
  .street__plane, .street__copy, .credits__roll { transform: none !important; }
  .street__facade { transform: translate3d(5vw, 0, 0) scale(1.04) !important; }
  .street__copy { opacity: 1 !important; }
  @media (max-width: 720px) { .street__facade { transform: translate3d(0, -68vw, 0) !important; } }
  .room__dark { opacity: 0.45; } .room__beam { opacity: 0.8; } .room__screen { opacity: 1; }
  .credits__roll { position: relative; left: auto; top: auto; margin: 0 auto; padding-top: calc(var(--bar-h) + 20px); }
  .credits__roll .cr { margin-bottom: 14px; }
  .credits__name { font-size: 3.4rem; margin-bottom: 20px; }
  .marquee__board.is-swapping .t, .marquee__board.is-swapping .when, .room__screen.is-cut img { animation: none; }
}