/* Ndala Theatre
   One world: a 1920s movie palace on a wet Toronto night.
   The walk-up is a fixed full-screen overlay; the lobby is an ordinary scrolling document beneath it. */

:root {
  --night: #070a12;
  --wall-top: #3a0d0e;
  --wall: #220708;
  --wall-deep: #160505;
  --bulb: #ffd48a;
  --bulb-hot: #ffe2ad;
  --ticket: #e9dcc0;
  --ink: #1b1410;
  --paper: #f7ecd9;        /* headings on the wall */
  --text: #d9c8b4;         /* body on the wall */
  --muted: #bfae99;
  --line: rgba(255, 212, 138, .18);
  --menu-red: #ff6b5a;

  --display: "Limelight", "Rockwell", serif;
  --board: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --body: "Big Shoulders Text", "Arial Narrow", sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

/* ---------- base + platform layer ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  background: var(--wall-deep);
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}
body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--body);
  color: var(--text);
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 190, 110, .16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 120px),
    linear-gradient(var(--wall-top), var(--wall) 50%, var(--wall-deep));
  background-attachment: scroll;
}
::selection { background: var(--bulb); color: var(--ink); }
:focus-visible { outline: 2px solid var(--bulb); outline-offset: 3px; }
button { font: inherit; color: inherit; }
button, a, summary, [role="button"] { touch-action: manipulation; }
button, summary, .frame, .pill, .ticket, .topbar a, .mark {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { text-wrap: balance; }

/* While the walk-up plays, the page underneath must not scroll or rubber-band. */
html.in-intro, html.in-intro body { overflow: hidden; overscroll-behavior: none; height: 100%; }
html.in-lobby .intro { display: none; }
html:has(dialog[open]) { overflow: hidden; }

/* =========================================================
   THE WALK-UP
   ========================================================= */
.intro { position: fixed; inset: 0; z-index: 20; background: var(--night); overflow: hidden; }
.street { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.blackout { position: absolute; inset: 0; background: #000; pointer-events: none; opacity: 1; transition: opacity 1.6s var(--ease-out); z-index: 5; }
.blackout.lifted { opacity: 0; }
.warmth { position: fixed; inset: 0; z-index: 30; background: #ffcf8a; opacity: 0; pointer-events: none; transition: opacity 1.4s var(--ease-out); }
.warmth.on { opacity: 1; transition: opacity 1.1s cubic-bezier(.7, 0, .84, 0); }

.bar { position: absolute; left: 0; right: 0; height: 11dvh; background: #000; z-index: 4; transition: transform 1.4s var(--ease-out); pointer-events: none; }
.bar.top { top: 0; }
.bar.bottom { bottom: 0; }
.intro.arrived .bar.top { transform: translateY(-100%); }
.intro.arrived .bar.bottom { transform: translateY(100%); }

.credit { position: absolute; left: 0; right: 0; bottom: 0; height: 11dvh; z-index: 6; display: flex; align-items: center; justify-content: center; gap: .9em; padding-bottom: env(safe-area-inset-bottom, 0px); font: 500 clamp(11px, 1.3vw, 15px)/1 var(--board); letter-spacing: .32em; text-transform: uppercase; color: #cfc6b4; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.credit.show { opacity: 1; }
.intro.arrived .credit { opacity: 0; transition-duration: .4s; }
.credit b { font: 400 1.25em/1 var(--display); letter-spacing: .12em; color: var(--bulb); }

.intro-chrome { position: absolute; z-index: 7; top: 0; right: 0; padding: max(14px, env(safe-area-inset-top, 0px)) var(--gutter) 0; }
.intro.inside .intro-chrome, .intro.inside .arrival { opacity: 0; pointer-events: none; transition: opacity .4s ease; }

.pill { font: 700 13px/1 var(--board); letter-spacing: .22em; text-transform: uppercase; color: #e8e2d4; background: rgba(7, 10, 18, .6); border: 1px solid rgba(255, 212, 138, .35); border-radius: 999px; padding: 13px 18px 12px; min-height: 44px; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s var(--ease-out); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pill:active { transform: scale(.97); background: rgba(255, 212, 138, .18); }

.arrival { position: absolute; z-index: 7; left: var(--gutter); right: var(--gutter); bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); display: grid; gap: 20px; max-width: 460px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 1s var(--ease-out) .5s, transform 1s var(--ease-out) .5s; }
@media (min-width: 720px) { .arrival { left: clamp(16px, 4vw, 64px); bottom: clamp(24px, 6vh, 64px); } }
.arrival::before { content: ""; position: absolute; z-index: -1; inset: -40vh -40vw -20vh -20vw; background: radial-gradient(ellipse at 20% 85%, rgba(5, 6, 10, .82), rgba(5, 6, 10, .5) 35%, rgba(5, 6, 10, 0) 65%); pointer-events: none; }
.intro.arrived .arrival { opacity: 1; transform: none; pointer-events: auto; }
.arrival h2 { margin: 0; font: 400 clamp(34px, 4.6vw, 60px)/1 var(--display); color: #fff3dc; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.arrival p { margin: 0; font: 500 clamp(16px, 1.35vw, 18px)/1.45 var(--body); color: #c9cfdb; max-width: 38ch; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }

.ticket { --notch: 9px; display: inline-grid; grid-template-columns: auto auto; align-items: stretch; border: 0; padding: 0; cursor: pointer; background: none; color: var(--ink); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); transition: transform .35s var(--ease-out); }
.ticket:active { transform: scale(.97); transition-duration: .12s; }
.ticket span { display: grid; align-content: center; background: var(--ticket);
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.ticket .stub { background: var(--bulb); font: 800 11px/1.05 var(--board); letter-spacing: .2em; text-transform: uppercase; text-align: center; padding: 12px 14px; border-right: 2px dashed rgba(27, 20, 16, .45); }
.ticket .main { font: 800 20px/1 var(--board); letter-spacing: .14em; text-transform: uppercase; padding: 14px 24px 13px 20px; }
.ticket .main small { display: block; font: 500 11px/1.2 var(--body); letter-spacing: .16em; margin-top: 5px; color: #5b4a3a; }

/* =========================================================
   THE LOBBY
   ========================================================= */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: env(safe-area-inset-top, 0px) var(--gutter) 0; min-height: calc(56px + env(safe-area-inset-top, 0px)); background: rgba(28, 7, 7, .88); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mark { border: 0; background: none; padding: 10px 0; min-height: 44px; cursor: pointer; font: 400 20px/1 var(--display); color: var(--bulb); letter-spacing: .02em; white-space: nowrap; transition: opacity .15s ease; }
.mark:active { opacity: .7; }
.topbar nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font: 700 13px/1 var(--board); letter-spacing: .2em; text-transform: uppercase; color: #e4d6bf; text-decoration: none; border-radius: 3px; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.topbar nav a:active { background: rgba(255, 212, 138, .12); }

main { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 8vh, 88px) var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px)); }

.hero { display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: clamp(36px, 6vh, 64px); }
.bulbs { height: 10px; width: min(560px, 80%); background: radial-gradient(circle, #ffe7b8 0 3px, rgba(255, 200, 120, .25) 4px, transparent 5px) 0 50% / 18px 10px repeat-x; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.now { margin: 0; font: 400 clamp(46px, 9vw, 92px)/.95 var(--display); color: #fff0d2; letter-spacing: .02em; }
.hero h1 { margin: 6px 0 0; font: 800 clamp(16px, 2vw, 20px)/1 var(--board); letter-spacing: .32em; text-transform: uppercase; color: var(--bulb); }
.lead { margin: 0; font: 500 clamp(16px, 1.6vw, 18px)/1.45 var(--body); color: var(--text); max-width: 46ch; }

.section-h { font: 800 15px/1 var(--board); letter-spacing: .32em; text-transform: uppercase; color: var(--bulb); margin: 0 0 22px; display: flex; align-items: center; gap: 14px; }
.section-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 212, 138, .4), transparent); }

/* Feature posters */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 32px); margin-bottom: clamp(56px, 9vh, 96px); }
.frame { all: unset; cursor: pointer; display: grid; gap: 12px; align-content: start; -webkit-tap-highlight-color: transparent; }
.frame:focus-visible .case { outline: 2px solid var(--bulb); outline-offset: 4px; }
.case { position: relative; padding: clamp(7px, 1vw, 12px); background: linear-gradient(145deg, #d8b46a, #8a6a2c 45%, #e3c27c 70%, #7a5a22); border-radius: 3px; box-shadow: 0 24px 40px rgba(0, 0, 0, .55); transition: transform .5s var(--ease-out), box-shadow .5s ease; }
.case::before { content: ""; position: absolute; left: 50%; top: -40px; width: 140%; height: 70px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(255, 220, 160, .3), transparent 70%); pointer-events: none; }
.case img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); background: #120806; }
.frame:active .case { transform: scale(.98); transition-duration: .12s; }
.cap { display: grid; gap: 4px; }
.cap b { font: 800 clamp(16px, 1.6vw, 19px)/1.1 var(--board); letter-spacing: .06em; text-transform: uppercase; color: var(--paper); }
.cap small { font: 500 14px/1.3 var(--body); color: var(--muted); }

/* Concessions + filmography */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 4vw, 56px); align-items: start; }
.menuboard { background: #0d0d0f; border: 10px solid #2b2b2e; border-radius: 6px; padding: 26px clamp(18px, 3vw, 26px) 22px; box-shadow: inset 0 0 0 1px #000, 0 20px 40px rgba(0, 0, 0, .5); background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 34px); }
.menuboard-title { margin: 0 0 18px; text-align: center; font: 800 30px/1 var(--board); letter-spacing: .3em; text-transform: uppercase; color: #fff; }
.menuboard dl { margin: 0; display: grid; gap: 18px; }
.menuboard dt { font: 800 13px/1 var(--board); letter-spacing: .3em; color: var(--menu-red); text-transform: uppercase; margin-bottom: 8px; }
.menuboard dd { margin: 0; font: 700 19px/1.5 var(--board); letter-spacing: .1em; color: #f4f1ea; text-transform: uppercase; }

.credit-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.credit-row h3 { margin: 0; font: 800 20px/1.1 var(--board); letter-spacing: .05em; text-transform: uppercase; color: var(--paper); }
.credit-row .period { font: 500 13px/1.4 var(--board); letter-spacing: .14em; text-transform: uppercase; color: var(--bulb); white-space: nowrap; }
.credit-row p { grid-column: 1 / -1; margin: 0; font: 500 16px/1.45 var(--body); color: var(--muted); }
.credit-row p b { font-weight: 700; color: var(--text); }
.credit-row details { grid-column: 1 / -1; }
.credit-row summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 12px/1 var(--board); letter-spacing: .18em; text-transform: uppercase; color: #d7c7ae; list-style: none; }
.credit-row summary::-webkit-details-marker { display: none; }
.credit-row summary::before { content: ""; width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .2s var(--ease-out); }
.credit-row details[open] summary::before { transform: rotate(90deg); }
.credit-row ul { margin: 0 0 4px; padding-left: 18px; font: 500 16px/1.5 var(--body); color: #cdbfac; }
.credit-row li + li { margin-top: 4px; }

/* Box office */
.boxoffice { margin-top: clamp(56px, 9vh, 88px); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: center; text-align: center; padding: 28px; border: 1px solid rgba(255, 212, 138, .25); border-radius: 6px; background: rgba(0, 0, 0, .25); }
.boxoffice h2 { margin: 0; font: 400 28px/1 var(--display); color: #fff0d2; }
.boxoffice-links { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: center; }
.boxoffice a { display: inline-flex; align-items: center; min-height: 44px; font: 700 14px/1 var(--board); letter-spacing: .18em; text-transform: uppercase; color: #e4d6bf; text-decoration: underline; text-decoration-color: rgba(255, 212, 138, .4); text-underline-offset: 6px; }
.boxoffice .email { font: 500 16px/1 var(--body); color: var(--muted); letter-spacing: .02em; -webkit-user-select: all; user-select: all; }

/* =========================================================
   LOBBY CARD (dialog)
   ========================================================= */
.card { position: fixed; margin: 0; padding: 0; border: 0; color: var(--text); background: #120807; overflow: hidden; display: none; flex-direction: column;
  inset: 0 0 0 auto; width: min(460px, 100vw); height: 100dvh; max-height: none; max-width: none;
  border-left: 1px solid rgba(255, 212, 138, .2); box-shadow: -20px 0 50px rgba(0, 0, 0, .55);
  transform: translateX(105%); transition: transform .5s var(--ease-out), display .5s allow-discrete, overlay .5s allow-discrete; }
.card[open] { display: flex; transform: none; }
@starting-style { .card[open] { transform: translateX(105%); } }
.card::backdrop { background: rgba(5, 2, 2, 0); transition: background .4s ease, display .4s allow-discrete, overlay .4s allow-discrete; }
.card[open]::backdrop { background: rgba(5, 2, 2, .6); }
@starting-style { .card[open]::backdrop { background: rgba(5, 2, 2, 0); } }
.card-handle { display: none; }
.card-body { overflow-y: auto; overscroll-behavior: contain; padding: max(24px, env(safe-area-inset-top, 0px)) 28px calc(32px + env(safe-area-inset-bottom, 0px)); flex: 1; }
.card-top { display: flex; justify-content: flex-end; }
.card-close { border: 1px solid rgba(255, 212, 138, .3); background: transparent; border-radius: 999px; padding: 0 16px; min-height: 44px; cursor: pointer; font: 700 12px/1 var(--board); letter-spacing: .2em; text-transform: uppercase; color: #e6dccb; }
.card-close:active { transform: scale(.97); }
.card-poster { width: min(220px, 55%); aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; margin: 8px 0 22px; box-shadow: 0 16px 30px rgba(0, 0, 0, .5); }
.card-kind { font: 700 13px/1 var(--board); letter-spacing: .22em; text-transform: uppercase; color: var(--bulb); }
.card h2 { margin: 8px 0 10px; font: 400 clamp(30px, 6vw, 36px)/1.05 var(--display); color: #fff1d8; }
.card p { margin: 0; font: 500 17px/1.55 var(--body); color: #d7cfc0; max-width: 60ch; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 22px; padding: 0; list-style: none; }
.chips li { font: 700 12px/1 var(--board); letter-spacing: .12em; text-transform: uppercase; padding: 8px 10px 7px; border: 1px solid rgba(255, 212, 138, .28); border-radius: 3px; color: #e9dfcc; }
.card-links { display: flex; flex-wrap: wrap; gap: 10px; }
.cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--bulb); color: var(--ink); text-decoration: none; border-radius: 3px; font: 800 14px/1 var(--board); letter-spacing: .16em; text-transform: uppercase; transition: background .15s ease, transform .12s var(--ease-out); }
.cta.ghost { background: transparent; color: var(--bulb); box-shadow: inset 0 0 0 1px rgba(255, 212, 138, .5); }
.cta:active { transform: scale(.97); }

.noscript { max-width: 60ch; margin: 40px auto; padding: 0 16px; font: 500 18px/1.5 var(--body); }

/* =========================================================
   PHONES
   ========================================================= */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .bar, .credit { height: 8dvh; }
  .credit { letter-spacing: .2em; }
  .ticket .main { font-size: 18px; padding: 13px 18px 12px 16px; }
  .topbar nav a { padding: 0 9px; letter-spacing: .14em; font-size: 12px; }
  .mark { font-size: 17px; }
  .menuboard dd { font-size: 17px; }
  .boxoffice { flex-direction: column; }

  /* Lobby card becomes a bottom sheet */
  .card { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 88dvh; border-left: 0; border-top: 1px solid rgba(255, 212, 138, .2); border-radius: 16px 16px 0 0; box-shadow: 0 -20px 50px rgba(0, 0, 0, .55); transform: translateY(105%); }
  .card[open] { transform: translateY(var(--drag, 0px)); }
  @starting-style { .card[open] { transform: translateY(105%); } }
  .card.dragging { transition: none; }
  .card-handle { display: grid; place-items: center; height: 28px; flex: none; touch-action: none; cursor: grab; }
  .card-handle span { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 212, 138, .35); }
  .card-body { padding-top: 4px; }
  .card-poster { width: 132px; margin: 0 0 18px; }
}
@media (max-width: 380px) {
  .topbar nav a { padding: 0 7px; letter-spacing: .1em; }
  .mark { font-size: 15px; }
}

/* =========================================================
   HOVER: only for precise pointers, so taps never leave a stuck state
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .pill:hover { background: rgba(255, 212, 138, .14); border-color: var(--bulb); color: #fff; }
  .ticket:hover { transform: translateY(-2px) rotate(-1.2deg); }
  .topbar nav a:hover { color: var(--bulb); }
  .mark:hover { color: var(--bulb-hot); }
  .frame:hover .case { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 34px 50px rgba(0, 0, 0, .6); }
  .credit-row summary:hover { color: var(--bulb); }
  .boxoffice a:hover { color: var(--bulb); text-decoration-color: var(--bulb); }
  .card-close:hover { border-color: var(--bulb); color: var(--bulb); }
  .cta:hover { background: var(--bulb-hot); }
  .cta.ghost:hover { background: rgba(255, 212, 138, .1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01s !important; transition-delay: 0s !important; animation-duration: .01s !important; }
}