@font-face { font-family: "Inter"; src: url("/fonts/Inter-400Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-600SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-800ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("/fonts/BigShoulders.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }

/* Shared with the app (src/theme.ts): Paper by day, Cinema by night. The app's burnt orange #B5652A is only
   3.9:1 on cream, so buttons and links use deeper shades of it and the bright one stays for shapes. */
:root {
  color-scheme: light dark;
  --bg: #F7F3EA; --bg2: #EFE9DB; --card: #FFFDF8; --line: #E2DAC8; --line2: #CFC5AD;
  --ink: #2A2118; --ink2: #5C5142; --ink3: #6B6052;
  --accent: #B5652A; --btn: #9A5220; --btn-hover: #7E4318; --on-btn: #FFFFFF; --link: #8A4A1C;
  --soft: #F4E1CD; --soft-ink: #7A3F14;
  --gold: #F0C040; --gold-soft: #FAEBC2; --gold-ink: #6E5208;
  --caramel: #DDB185; --caramel-d: #CE9E70; --kernel: #F9E8D8;
  --tv: #5E6B45; --tv-soft: #E4E8D6; --tv-ink: #4A5736;
  --velvet: #7E2228; --velvet2: #A2333A;
  /* the always-dark surfaces: screen, credits, letterboard, footer */
  --night: #100C08; --night2: #1E1710; --night-line: #2E2418; --night-ink: #FFF8EC; --night-ink2: #CDBFAC; --night-ink3: #9A8C79;
  --glow: rgba(240, 192, 64, .30); --glow-o: .9;
  --shadow: 0 1px 2px rgba(60, 35, 10, .06), 0 12px 32px -10px rgba(60, 35, 10, .18);
  --shadow-lg: 0 2px 4px rgba(60, 35, 10, .06), 0 30px 60px -22px rgba(60, 35, 10, .34);
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --marquee: "Big Shoulders", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --wrap: 1140px;
  --r: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #100C08; --bg2: #17120D; --card: #1E1710; --line: #2E2418; --line2: #3E3020;
    --ink: #FFF8EC; --ink2: #D9CCBA; --ink3: #A89C8C;
    --accent: #F0C040; --btn: #F0C040; --btn-hover: #F7D370; --on-btn: #100C08; --link: #F2C95A;
    --soft: #3A2A14; --soft-ink: #F7D98A;
    --gold-soft: #33280F; --gold-ink: #F7D98A;
    --tv-soft: #262B1C; --tv-ink: #C3CFA6;
    --night: #0A0705; --night2: #17120D; --night-line: #2E2418;
    --glow: rgba(240, 180, 70, .22); --glow-o: 1;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -10px rgba(0, 0, 0, .6);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -22px rgba(0, 0, 0, .8);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--btn-hover); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; font-synthesis: none; line-height: 1.02; margin: 0 0 .45em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.9rem, 9.5vw, 5.4rem); }
h2 { font-size: clamp(2.3rem, 6.4vw, 3.7rem); }
h3 { font: 600 1.15rem/1.3 var(--sans); letter-spacing: -.01em; }
h1 em, h2 em, h3 em { font-style: italic; }
h1, h2 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 28px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
/* the condensed marquee label above each section */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 .95rem/1 var(--marquee); letter-spacing: .2em; text-transform: uppercase; color: var(--link); margin: 0 0 1.1em; }
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.muted { color: var(--ink3); }
.small { font-size: .88rem; }
.intro { max-width: 36em; color: var(--ink2); font-size: 1.1rem; }
.gold { color: var(--accent); }

.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--gold), var(--accent)); }
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { to { transform: scaleX(1); } }
}

/* header */
.top { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); transition: background .3s, border-color .3s; }
.js .top { background: transparent; border-color: transparent; }
.js .top.scrolled { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); border-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 400 1.6rem/1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.brand picture { display: block; flex: none; }
.brand img { width: 36px; height: 37px; transition: transform .6s var(--spring); }
.brand:hover { color: var(--ink); }
.brand:hover img { transform: rotate(-10deg) scale(1.08); }
.brand em { color: var(--accent); }
.nav { display: flex; align-items: center; gap: 4px 22px; font-size: .92rem; font-weight: 600; }
.nav a { color: var(--ink2); text-decoration: none; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav a.active::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 640px) {
  .nav .hide-s { display: none; }
  .nav { gap: 14px; }
}
@media (max-width: 340px) { .top .brand .word { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font: 600 1rem/1.2 var(--sans); text-decoration: none; border: 1.5px solid var(--btn); transition: background .2s, color .2s, border-color .2s, box-shadow .3s, transform .35s var(--ease); }
.btn.primary { background: var(--btn); color: var(--on-btn); box-shadow: 0 6px 18px -8px var(--btn); }
.btn.primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--on-btn); box-shadow: 0 12px 28px -10px var(--btn); }
.btn.ghost { color: var(--ink); background: color-mix(in srgb, var(--card) 60%, transparent); border-color: var(--line2); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn.big { padding: 17px 30px; font-size: 1.05rem; }
.btn .arrow { display: inline-block; transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateY(3px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Always-dark surfaces take the Cinema tokens in both modes, so text and buttons on them keep their contrast. */
.hero, .strip, .credits, .night, .letterboard, .finale, .foot, .js .top.on-dark, .js.lights-down .top {
  --ink: var(--night-ink); --ink2: var(--night-ink2); --ink3: #A89C8C;
  --accent: var(--gold); --btn: var(--gold); --btn-hover: #F7D370; --on-btn: #100C08; --link: #F2C95A;
  --card: var(--night2); --line: var(--night-line); --line2: #3E3020;
  color: var(--ink);
}
.js .top.on-dark .brand em { color: var(--gold); }
.js .top.scrolled.on-dark { background: color-mix(in srgb, var(--night) 84%, transparent); border-color: var(--night-line); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- hero: the auditorium, dark in both modes ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 112px 0 56px; margin-top: -69px; background: var(--night); }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* the light thrown back off the screen into the room; --gx/--gy follow the pointer (site.js) */
.screenlight { position: absolute; width: 1100px; height: 800px; left: var(--gx, 72%); top: var(--gy, 18%); translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 150, .16), rgba(181, 101, 42, .07) 55%, transparent); transition: left 1.4s var(--ease), top 1.4s var(--ease); }
.hero-inner { display: grid; gap: 44px; align-items: center; }
.status { display: inline-flex; align-items: center; gap: 10px; font: 600 .8rem/1.3 var(--sans); color: var(--ink2); background: rgba(255, 248, 236, .06); border: 1px solid var(--line2); border-radius: 999px; padding: 7px 14px 7px 10px; margin-bottom: 26px; animation: fade-up .8s var(--ease) both; }
/* a tiny film reel that turns three times */
.reel { width: 14px; height: 14px; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--night) 0 1.5px, transparent 2px), conic-gradient(var(--gold) 0 40deg, #9A7A2A 40deg 80deg, var(--gold) 80deg 160deg, #9A7A2A 160deg 200deg, var(--gold) 200deg 280deg, #9A7A2A 280deg 320deg, var(--gold) 320deg); animation: spin 1.2s linear 3; }
@keyframes spin { to { rotate: 1turn; } }
/* opening titles: the headline fades up out of the dark and its spacing settles */
.title-card { color: var(--ink); font-size: clamp(2.8rem, 6.4vw, 4.4rem); animation: titlecard .7s .15s var(--ease) both; }
.title-card em { color: var(--gold); display: block; }
@keyframes titlecard { from { opacity: 0; letter-spacing: .05em; filter: blur(6px); } }
.lede { font-size: clamp(1.06rem, 2.2vw, 1.2rem); color: var(--ink2); max-width: 31em; margin: 6px 0 30px; }
.hero .note { margin-top: 18px; font-size: .88rem; color: var(--ink3); max-width: 34em; }
@media (max-width: 599px) { .hero .note { display: none; } }
.rise { animation: fade-up .9s var(--ease) both; }
.r1 { animation-delay: .35s; } .r2 { animation-delay: .5s; } .r3 { animation-delay: .65s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }

/* the screen, the beam and the back row */
.theatre { position: relative; width: 100%; max-width: 560px; height: 400px; margin: 0 auto; }
.screen-wall { position: absolute; left: 2%; right: 2%; top: 0; height: 236px; border-radius: 2px; padding: 18px; background: radial-gradient(120% 90% at 50% 40%, #FFFBF2, #EADBBE); box-shadow: inset 0 0 40px rgba(120, 80, 30, .18), 0 0 0 6px #1A140F, 0 0 0 7px #2E2418, 0 0 70px 10px rgba(255, 214, 150, .22), 0 40px 90px -20px rgba(255, 200, 120, .35); animation: screen-on 1.2s .2s var(--ease) both; z-index: 1; }
@keyframes screen-on { 0% { opacity: 0; filter: brightness(.3); } 30% { opacity: 1; filter: brightness(1.15); } 40% { filter: brightness(.8); } 100% { opacity: 1; filter: none; } }
.beam { position: absolute; left: -10%; right: -10%; top: 40px; bottom: 60px; clip-path: polygon(47% 100%, 53% 100%, 92% 8%, 8% 8%); background: linear-gradient(to top, rgba(255, 236, 190, .2), rgba(255, 236, 190, .03) 80%); transition: translate .8s var(--ease); z-index: 2; pointer-events: none; }
.dust { position: absolute; inset: 0; opacity: .7; background: radial-gradient(circle, rgba(255, 244, 220, .9) 0 1px, transparent 1.5px) 0 0 / 70px 60px, radial-gradient(circle, rgba(255, 244, 220, .6) 0 .8px, transparent 1.3px) 23px 31px / 53px 47px; -webkit-mask-image: linear-gradient(to top, #000, transparent 85%); mask-image: linear-gradient(to top, #000, transparent 85%); }
/* what is on the screen: the app's title sheet, in its daytime colours, guessing before you rate */
.sheet { display: grid; grid-template-columns: auto 1fr; gap: 16px; height: 100%; color: #2A2118; }
.sheet-poster { height: 100%; aspect-ratio: 2 / 3; box-shadow: 0 6px 16px -6px rgba(42, 33, 24, .5); }
.sheet-body { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.sheet-k { margin: 0; font: 700 .72rem/1 var(--marquee); letter-spacing: .16em; text-transform: uppercase; color: #6B6052; }
.sheet-t { margin: 0; font: 400 clamp(1.5rem, 4.4vw, 2rem)/1 var(--display); }
.sheet-for { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; font: 600 .8rem/1 var(--sans); color: #5C5142; }
.sheet-for b { font: 800 1.5rem/1 var(--marquee); color: #9A5220; font-variant-numeric: tabular-nums; }
.gut { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; align-items: end; height: 34px; margin-top: 4px; }
.gut i { display: block; height: calc(30% + var(--n) * 7%); border-radius: 3px; background: #E2DAC8; }
.gut i:nth-child(1) { --n: 1; } .gut i:nth-child(2) { --n: 2; } .gut i:nth-child(3) { --n: 3; } .gut i:nth-child(4) { --n: 4; } .gut i:nth-child(5) { --n: 5; }
.gut i:nth-child(6) { --n: 6; } .gut i:nth-child(7) { --n: 7; } .gut i:nth-child(8) { --n: 8; } .gut i:nth-child(9) { --n: 9; } .gut i:nth-child(10) { --n: 10; }
.gut i:nth-child(-n+8) { animation: fill-bar .25s calc(1.5s + var(--n) * .07s) var(--ease) both; }
.gut i:nth-child(8) { animation-name: fill-head; }
@keyframes fill-bar { to { background: #B5652A; } }
@keyframes fill-head { to { background: #9A5220; transform: scaleY(1.08); } }
.sheet-said { margin: 6px 0 0; white-space: nowrap; font: 600 clamp(.7rem, 2.4vw, .82rem)/1.2 var(--sans); color: #5C5142; animation: fade-up .6s 2.4s var(--ease) both; }
.sheet-said b { font: 800 1.1rem/1 var(--marquee); color: #2A2118; }
.sheet-said .said { display: inline-block; color: #9A5220; font-size: 1.35rem; animation: pop .7s 2.7s var(--spring) both; }
.sheet-said .to { color: #B5652A; }
@keyframes pop { from { opacity: 0; scale: .3; } }
.row { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px; z-index: 3; }
/* the seats fade into the dark; an overlay rather than a mask, which would also clip the heads above the row */
.row::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 46%; background: linear-gradient(transparent, var(--night)); pointer-events: none; }
.seat { position: relative; width: 19%; height: 86px; border-radius: 34% 34% 10px 10px / 40% 40% 10px 10px; background: linear-gradient(#5E1C21, #3A1014 80%); box-shadow: inset 0 3px 0 rgba(255, 214, 160, .32), inset 0 14px 18px -8px rgba(255, 190, 130, .16), inset 0 -10px 18px rgba(0, 0, 0, .45); }
.seat::after { content: ""; position: absolute; left: 14%; right: 14%; top: 12px; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, .3); }
.viewer { position: absolute; left: 50%; top: -52px; width: 50px; height: 58px; margin-left: -25px; border-radius: 48% 48% 42% 42%; background: #070504; box-shadow: inset 0 3px 2px rgba(255, 226, 180, .28); }
.viewer.v2 { width: 44px; margin-left: -22px; top: -46px; } .viewer.v3 { width: 54px; margin-left: -27px; top: -58px; border-radius: 50% 50% 40% 40%; }
.tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #FFF8EC; color: #2A2118; font: 600 .8rem/1 var(--sans); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); white-space: nowrap; transition: translate .7s var(--ease); }
.tag i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 800 .66rem/1 var(--sans); font-style: normal; color: #FFF; background: #7A3F14; }
.tag.you i { background: var(--gold); color: #2A2118; }
.tag small { display: none; font: 600 .7rem/1 var(--sans); color: #6B6052; padding-left: 6px; border-left: 1px solid #E2DAC8; }
.tag:hover small { display: inline; }
.t1 { left: 1%; bottom: 112px; animation: pop .7s 3.1s var(--spring) both; }
.t2 { right: 0; bottom: 118px; animation: pop .7s 3.3s var(--spring) both; }
.t2 i { background: #5E6B45; }
.t3 { left: calc(50% - 42px); bottom: 128px; animation: pop .7s 2.9s var(--spring) both; }
/* the bucket on the armrest, and a few kernels that pop out of it, twice */
.bucket { position: absolute; left: 50%; margin-left: -42px; bottom: 6px; width: 84px; z-index: 5; transition: translate .7s var(--ease); }
.bucket img { width: 84px; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.kernel { position: absolute; left: 40%; top: 14%; width: 13px; height: 12px; border-radius: 50% 45% 50% 48%; background: radial-gradient(circle at 60% 60%, #DDB185 0 30%, #F9E8D8 34%); box-shadow: 0 0 0 1.5px #111; opacity: 0; }
.k1 { animation: kernel 1.1s 3.6s ease-out 2; --kx: -26px; --kr: -160deg; }
.k2 { animation: kernel 1.2s 4.1s ease-out 2; --kx: 18px; --kr: 200deg; left: 55%; }
.k3 { animation: kernel 1s 4.5s ease-out 2; --kx: -6px; --kr: 120deg; left: 30%; }
@keyframes kernel { 0% { opacity: 1; transform: none; } 45% { transform: translate(calc(var(--kx) * .6), -54px) rotate(calc(var(--kr) * .5)); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--kx), -6px) rotate(var(--kr)); } }
@media (min-width: 560px) { .theatre { height: 440px; } .screen-wall { height: 268px; padding: 22px; } }
@media (min-width: 960px) {
  .hero { min-height: min(92svh, 860px); display: flex; align-items: center; padding: 120px 0 80px; }
  .hero-inner { grid-template-columns: 1.12fr .95fr; gap: 48px; width: 100%; }
}

/* ---------- the film strip: made-up posters, moved along by the scroll (site.js) ---------- */
.strip { position: relative; background: #070504; padding: 26px 0; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip::before, .strip::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 248, 236, .82) 9px 21px, transparent 21px 30px); opacity: .55; }
.strip::before { top: 8px; } .strip::after { bottom: 8px; }
.js .strip { overflow: hidden; }
.strip-track { display: flex; gap: 18px; width: max-content; margin: 0; padding: 0 18px; list-style: none; will-change: transform; transform: translateX(calc(var(--shift, 0) * -1px)); }
.strip .poster { width: 150px; flex: none; }
@media (min-width: 760px) { .strip .poster { width: 184px; } .strip-track { gap: 22px; } }

/* ---------- posters: flat, made-up art, nothing borrowed ---------- */
.poster { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; isolation: isolate; background: #2A2118; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); }
.poster .art, .poster .art::before, .poster .art::after { position: absolute; inset: 0; content: ""; }
.pt { position: absolute; left: 0; right: 0; bottom: 0; padding: 38px 10px 10px; font: 400 1.32rem/1 var(--display); color: #FFF8EC; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); background: linear-gradient(transparent, rgba(10, 6, 3, .55)); }
.pt small { display: block; margin-top: 5px; font: 700 .62rem/1 var(--marquee); letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.stub { position: absolute; top: 9px; right: 9px; padding: 4px 8px; border-radius: 4px; font: 800 .74rem/1 var(--marquee); letter-spacing: .06em; text-transform: uppercase; color: #2A2118; background: #FFF8EC; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
/* Northbound: rails running into an orange evening */
.p-north { background: linear-gradient(#F29E4C, #E0663A 46%, #2A1C1A 46.5%); }
.p-north .art { background: radial-gradient(circle at 50% 46%, #FFE2A6 0 9%, transparent 9.5%); }
.p-north .art::before { background: #FFE2A6; clip-path: polygon(49.2% 47%, 50.2% 47%, 36% 100%, 28% 100%); }
.p-north .art::after { background: #FFE2A6; clip-path: polygon(49.8% 47%, 50.8% 47%, 72% 100%, 64% 100%); }
/* Midnight at the Lido: a moon over pool tiles */
.p-lido { background: #0E3B4A; }
.p-lido .art { background: radial-gradient(circle at 70% 18%, #FFF4D6 0 9%, transparent 9.5%), linear-gradient(transparent 52%, #1C7A86 52%); }
.p-lido .art::before { top: 52%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 16px), repeating-linear-gradient(rgba(255, 255, 255, .16) 0 1px, transparent 1px 16px); }
.p-lido .art::after { inset: 46% 52% auto 8%; height: 7px; border-radius: 3px; background: #F2EADA; }
/* A Quiet Heist: a keyhole */
.p-heist { background: radial-gradient(circle at 50% 42%, #A32F2A, #5E1414 70%); }
.p-heist .art::before { inset: 26% 38% auto; aspect-ratio: 1; border-radius: 50%; background: #120A08; }
.p-heist .art::after { background: #120A08; clip-path: polygon(46% 40%, 54% 40%, 60% 66%, 40% 66%); }
/* Paper Moons: two crescents on deep blue */
.p-paper { background: #1D2A4D; }
.p-paper .art { background: radial-gradient(circle at 38% 28%, #1D2A4D 0 17%, transparent 17.5%), radial-gradient(circle at 30% 30%, #F4E6C8 0 18%, transparent 18.5%), radial-gradient(circle at 70% 54%, #1D2A4D 0 11%, transparent 11.5%), radial-gradient(circle at 65% 56%, #E3B76A 0 12%, transparent 12.5%); }
/* Harbour Lane: a row of houses on the quay */
.p-harbour { background: linear-gradient(#BFD8E0, #E6EEE8 50%); }
.p-harbour .art::before { inset: 30% 0 32%; background: repeating-linear-gradient(90deg, #E9A23B 0 20%, #C4553B 20% 40%, #F3E2C4 40% 60%, #6F8F6B 60% 80%, #D9785E 80% 100%); clip-path: polygon(0 20%, 10% 0, 20% 20%, 20% 10%, 30% 0, 40% 10%, 40% 25%, 50% 8%, 60% 25%, 60% 12%, 70% 2%, 80% 12%, 80% 18%, 90% 4%, 100% 18%, 100% 100%, 0 100%); }
.p-harbour .art::after { inset: 68% 0 0; background: repeating-linear-gradient(#2B4A6B 0 6px, #335878 6px 9px); }
/* Static: rings from a dish in the night */
.p-static { background: #20123A; }
.p-static .art { background: repeating-radial-gradient(circle at 50% 38%, transparent 0 14px, rgba(200, 170, 255, .28) 14px 16px); }
.p-static .art::before { inset: 34% 44% auto; aspect-ratio: 1; border-radius: 50%; background: #E8D8FF; box-shadow: 0 0 22px #B48CFF; }
/* Sixteen Summers: a striped sunset */
.p-summer { background: linear-gradient(#FFD27A, #F59A5A 55%, #D65F6B); }
.p-summer .art { background: radial-gradient(circle at 50% 54%, #FFF1C4 0 24%, transparent 24.5%); }
.p-summer .art::after { top: 50%; background: repeating-linear-gradient(transparent 0 8px, #D65F6B 8px 12px); }
/* Ghost Light: one bulb left burning on an empty stage */
.p-ghost { background: radial-gradient(circle at 50% 30%, #4A3624, #140E0A 65%); }
.p-ghost .art { background: radial-gradient(circle at 50% 30%, rgba(255, 220, 150, .55) 0 8%, transparent 26%), linear-gradient(transparent 74%, #2A1C12 74%); }
.p-ghost .art::before { inset: 33% 49.3% 26%; background: #0A0705; }
.p-ghost .art::after { inset: 25% 45% auto; aspect-ratio: 1; border-radius: 50%; background: #FFF2CC; box-shadow: 0 0 16px 4px rgba(255, 220, 150, .8); }

/* ---------- sections ---------- */
.band { position: relative; padding: 88px 0; transition: opacity .9s var(--ease), background-color .9s; }
.band.alt { background: var(--bg2); }
@media (prefers-color-scheme: dark) {
  .band.alt { background: #1A140E; }
  .credits, .marquee { box-shadow: 0 0 0 1px #3E3020, 0 30px 80px -30px rgba(240, 192, 64, .18); }
}
@media (min-width: 900px) { .band { padding: 120px 0; } }
.head { margin-bottom: 44px; }
.head h2 { max-width: 13em; }
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 8px; }

/* ---------- how it works: a phone that plays along ---------- */
.story { display: grid; gap: 36px; }
.stage { position: relative; display: grid; justify-items: center; gap: 18px; margin: 0; }
.phone { position: relative; width: 272px; height: 548px; border-radius: 44px; padding: 10px; background: #1A140F; box-shadow: var(--shadow-lg), inset 0 0 0 2px #3A2E24; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #050302; z-index: 3; }
.screens { position: relative; height: 100%; border-radius: 35px; overflow: hidden; background: var(--bg); }
.screen { position: absolute; inset: 0; padding: 50px 18px 18px; display: flex; flex-direction: column; gap: 11px; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .55s; }
.screen.is-on, html:not(.js) .screen:first-child { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .1s, transform .55s var(--ease) .1s; }
.sc-k { font: 600 .62rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin: 2px 0 0; }
.sc-q { font: 800 1.2rem/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.sc-sub { font-size: .76rem; color: var(--ink3); margin: -6px 0 0; line-height: 1.4; }
.sc-btn { margin-top: auto; text-align: center; font: 600 .86rem/1 var(--sans); color: var(--on-btn); background: var(--btn); border-radius: 999px; padding: 13px; }
.stage figcaption { font-size: .82rem; color: var(--ink3); text-align: center; }
.dots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dots li { width: 8px; height: 8px; border-radius: 99px; background: var(--line2); transition: width .5s var(--ease), background .3s; }
.dots li.is-on { width: 26px; background: var(--accent); }

/* screen 1: the gut score */
.mini-title { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.mini-title .mini { width: 34px; border-radius: 4px; box-shadow: none; }
.mini-title b { display: block; font: 600 .86rem/1.2 var(--sans); }
.mini-title span { font-size: .68rem; color: var(--ink3); }
.bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; align-items: end; height: 96px; margin-top: 4px; }
.bars i { display: block; height: calc(22% + var(--n) * 7.8%); border-radius: 5px; background: var(--line); transition: background .25s, transform .4s var(--spring); }
.bars i:nth-child(1) { --n: 1; } .bars i:nth-child(2) { --n: 2; } .bars i:nth-child(3) { --n: 3; } .bars i:nth-child(4) { --n: 4; } .bars i:nth-child(5) { --n: 5; }
.bars i:nth-child(6) { --n: 6; } .bars i:nth-child(7) { --n: 7; } .bars i:nth-child(8) { --n: 8; } .bars i:nth-child(9) { --n: 9; } .bars i:nth-child(10) { --n: 10; }
.is-on .bars i:nth-child(-n+8), html:not(.js) .bars i:nth-child(-n+8) { background: var(--accent); transition-delay: calc(.7s + var(--n) * .06s); }
.is-on .bars i:nth-child(8) { transform: scaleY(1.06); }
.big-score { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin: 0; color: var(--ink3); font: 600 .9rem/1 var(--sans); }
.big-score b { font: 800 2.6rem/1 var(--marquee); color: var(--ink); min-width: 1ch; text-align: center; opacity: 0; transition: opacity .4s 1.3s; }
.is-on .big-score b, html:not(.js) .big-score b { opacity: 1; }
.row-btn { display: grid; gap: 2px; padding: 11px 12px; border-radius: 14px; border: 1px dashed var(--line2); }
.row-btn b { font: 600 .82rem/1.2 var(--sans); }
.row-btn span { font-size: .68rem; color: var(--ink3); line-height: 1.35; }

/* screen 2: a prediction that explains itself */
.banner { width: 100%; aspect-ratio: 16 / 7; border-radius: 14px; box-shadow: none; }
.predict { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--soft); color: var(--soft-ink); font: 600 .74rem/1 var(--sans); }
.predict b { font: 800 1.9rem/1 var(--marquee); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.predict em { margin-left: auto; font-style: normal; font-size: .64rem; padding: 4px 8px; border-radius: 99px; background: var(--card); color: var(--ink2); }
.why { display: grid; gap: 6px; margin: -4px 0 0; padding: 0; list-style: none; font-size: .72rem; color: var(--ink2); }
.why li { display: flex; gap: 8px; align-items: center; opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .5s var(--spring); }
.why b { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--tv-soft); color: var(--tv-ink); font-size: .74rem; }
.why .minus b { background: var(--soft); color: var(--soft-ink); }
.is-on .why li, html:not(.js) .why li { opacity: 1; transform: none; }
.is-on .why li:nth-child(1) { transition-delay: .6s; } .is-on .why li:nth-child(2) { transition-delay: .8s; } .is-on .why li:nth-child(3) { transition-delay: 1s; }
.crowd { margin: auto 0 0; font-size: .7rem; color: var(--ink3); }

/* screen 3: the deck, the top card flicked onto the watchlist */
.deck { position: relative; height: 236px; margin-top: 2px; }
.dcard { position: absolute; inset: 0 18px; width: auto; aspect-ratio: auto; border-radius: 16px; transition: transform .7s var(--ease), opacity .5s; }
.dcard.back { transform: scale(.92) translateY(10px); opacity: .7; }
.dtag, .dfor { position: absolute; left: 10px; font: 600 .66rem/1 var(--sans); padding: 5px 8px; border-radius: 99px; }
.dtag { top: 10px; background: rgba(255, 248, 236, .9); color: #2A2118; }
.dfor { bottom: 10px; background: #F0C040; color: #2A2118; font-weight: 800; }
.stamp { position: absolute; top: 40px; right: 12px; padding: 5px 9px; border: 2.5px solid #C3E6A8; border-radius: 6px; color: #C3E6A8; font: 800 1.1rem/1 var(--marquee); letter-spacing: .1em; text-transform: uppercase; rotate: 12deg; opacity: 0; transition: opacity .3s; }
.is-on .dcard:not(.back) .stamp { opacity: 1; transition-delay: 1.2s; }
.is-on .dcard:not(.back) { transform: translateX(150%) rotate(16deg); transition: transform .8s 1.7s var(--ease); }
.is-on .dcard.back { transform: none; opacity: 1; transition-delay: 1.9s; }
.deck-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font: 600 .78rem/1 var(--sans); text-align: center; }
.deck-btns span { padding: 11px 0; border-radius: 99px; border: 1px solid var(--line2); color: var(--ink2); }
.deck-btns .yes { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.moods { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -4px; }
.moods span { font: 600 .64rem/1 var(--sans); padding: 6px 8px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); color: var(--ink2); }

/* screen 4: friends, sorted by taste match */
.friends { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.friends li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--spring); }
.is-on .friends li, html:not(.js) .friends li { opacity: 1; transform: none; }
.is-on .friends li:nth-child(2) { transition-delay: .15s; } .is-on .friends li:nth-child(3) { transition-delay: .3s; }
.friends div { flex: 1; min-width: 0; }
.friends b { display: block; font: 600 .82rem/1.2 var(--sans); }
.friends span { font-size: .66rem; color: var(--ink3); }
.friends em { font: 800 1.1rem/1 var(--marquee); font-style: normal; color: var(--link); font-variant-numeric: tabular-nums; }
.av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; font: 800 .72rem/1 var(--sans); font-style: normal; color: #FFF; }
.a1 { background: #7A3F14; } .a2 { background: #5E6B45; } .a3 { background: #3F5E8A; } .a4 { background: #F0C040; color: #2A2118; }
.worth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: -4px; }
.worth .poster { border-radius: 8px; }
.worth b { position: absolute; left: 5px; bottom: 5px; padding: 3px 5px; border-radius: 5px; font: 800 .7rem/1 var(--marquee); color: #2A2118; background: #F0C040; }
.sent { display: flex; gap: 8px; align-items: flex-start; margin: auto 0 0; padding: 9px 10px; border-radius: 14px; background: var(--soft); color: var(--soft-ink); font-size: .66rem; line-height: 1.35; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .6s var(--spring); }
.sent .av { width: 22px; height: 22px; font-size: .6rem; }
.sent b { display: block; font-size: .7rem; }
.is-on .sent, html:not(.js) .sent { opacity: 1; transform: none; transition-delay: .9s; }

/* the steps beside the phone; the number sits in a film-leader dial that sweeps while it plays */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.steps-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.step { --nw: 2.3rem; position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); transition: border-color .4s, box-shadow .4s, opacity .4s; overflow: hidden; }
.step-btn { display: flex; width: 100%; align-items: center; gap: 14px; padding: 18px 20px 0; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.step-n { position: relative; display: grid; place-items: center; flex: none; width: var(--nw); height: var(--nw); border-radius: 50%; font: 800 1.15rem/1 var(--marquee); color: var(--ink3); border: 1.5px solid var(--line2); transition: color .4s, border-color .4s; }
.step-n::before { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: conic-gradient(color-mix(in srgb, var(--accent) 28%, transparent) calc(var(--p) * 1turn), transparent 0); }
.step h3 { margin: 0; font: 600 1.15rem/1.25 var(--sans); }
.step-btn:focus-visible { outline-offset: -2px; border-radius: var(--r); }
.step-body { padding: 8px 20px 18px calc(34px + var(--nw)); }
.step-body p { color: var(--ink2); margin: 0 0 10px; font-size: .97rem; }
.tag-s { display: inline-flex; align-items: center; gap: 6px; font: 700 .72rem/1 var(--marquee); letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.tag-s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag-s.now { background: var(--tv-soft); color: var(--tv-ink); }
.step-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); }
.js .step:not(.is-on) h3, .js .step:not(.is-on) .step-body p { color: var(--ink3); }
.step.is-on { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); }
.step.is-on .step-n { color: var(--link); border-color: var(--accent); }
.auto .step.is-on .step-bar { animation: fill 5.5s linear forwards; }
.auto .step.is-on .step-n::before { animation: sweep 5.5s linear forwards; }
.auto.paused .step.is-on .step-bar, .auto.paused .step.is-on .step-n::before { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
@keyframes sweep { to { --p: 1; } }
@media (min-width: 900px) {
  .story { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .stage { position: sticky; top: max(90px, calc(50svh - 300px)); order: 2; }
  .steps-list { gap: 0; }
  .js .steps-list { padding: 4vh 0 24vh; }
  .js .step { min-height: 40vh; display: flex; flex-direction: column; justify-content: center; border-color: transparent; background: transparent; box-shadow: none; }
  .js .step.is-on { border-color: transparent; box-shadow: none; }
  .js .step:not(.is-on) .tag-s { color: var(--ink3); background: transparent; }
  .step-btn { cursor: default; }
  .step h3 { font: 400 clamp(1.9rem, 3.2vw, 2.5rem)/1.05 var(--display); }
  .step { --nw: 2.9rem; }
  .step-n { font-size: 1.4rem; }
  .step-body p { font-size: 1.05rem; max-width: 26em; }
}

/* ---------- break it down: the categories, set as end credits ---------- */
.credits-wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .credits-wrap { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.credits-wrap .head { margin-bottom: 0; }
.credits { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; padding: 40px 18px; background: var(--night); box-shadow: var(--shadow-lg); }
.credits .grain { z-index: -1; }
.credits::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 50% at 50% 0, rgba(255, 214, 150, .1), transparent); }
.credits dl { margin: 0; display: grid; gap: 18px; }
.credits div { display: grid; gap: 4px; text-align: center; }
.credits dt { text-align: center; font: 700 .82rem/1.3 var(--marquee); letter-spacing: .16em; text-transform: uppercase; color: #E39A5C; }
.credits dd { margin: 0; font: 400 1.18rem/1.25 var(--display); color: var(--ink); }
.credits .gap { margin-top: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.js .credits div { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js .credits.in div { opacity: 1; transform: none; }
.js .credits.in div:nth-child(2) { transition-delay: .12s; } .js .credits.in div:nth-child(3) { transition-delay: .24s; } .js .credits.in div:nth-child(4) { transition-delay: .36s; }
.js .credits.in div:nth-child(5) { transition-delay: .48s; } .js .credits.in div:nth-child(6) { transition-delay: .6s; } .js .credits.in div:nth-child(7) { transition-delay: .72s; }
.js .credits.in div:nth-child(8) { transition-delay: .9s; } .js .credits.in div:nth-child(9) { transition-delay: 1.02s; }
@media (min-width: 640px) { .credits { padding: 52px 40px; } .credits dd { font-size: 1.32rem; } }

/* ---------- movie night: the house lights go down (site.js) ---------- */
body { transition: background-color 1s var(--ease); }
html.lights-down body { background: var(--night); }
.js.lights-down .top.scrolled { background: color-mix(in srgb, var(--night) 84%, transparent); border-color: var(--night-line); }
.js.lights-down .top .brand em { color: var(--gold); }
.lights-down main > section:not(.night), .lights-down .strip { opacity: .04; }
@media (max-width: 959px) { .lights-down main > section:not(.night), .lights-down .strip { opacity: 0; } }
.lights-down .band.alt { background-color: transparent; }
.night { position: relative; isolation: isolate; background: var(--night); }
.night-stick { position: relative; overflow: hidden; padding: 96px 0 104px; }
.night .grain, .night-stick::before { -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.night .grain { z-index: -1; }
.night-stick::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 70% 60%, rgba(240, 192, 64, .12), transparent 70%); }
.night-inner { display: grid; gap: 48px; align-items: center; }
.night h2 em { color: var(--gold); }
.night .intro em { color: var(--ink); }
.beats { counter-reset: b; display: grid; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.beats li { counter-increment: b; position: relative; padding-left: 50px; color: var(--ink2); font-size: .98rem; transition: opacity .4s; }
.beats li::before { content: counter(b); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line2); font: 800 1.05rem/1 var(--marquee); color: var(--ink3); transition: border-color .4s, color .4s, background .4s; }
.beats b { display: block; color: var(--ink); font-weight: 600; }
.beats li.is-on::before { border-color: var(--gold); background: var(--gold); color: #100C08; }
.js .beats li:not(.is-on), .js .beats li:not(.is-on) b { color: var(--ink3); }
.replay { margin-top: 22px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line2); background: none; color: var(--ink); font: 600 .9rem/1 var(--sans); cursor: pointer; }
.replay:hover { border-color: var(--ink); }
.replay[aria-disabled="true"] { opacity: .6; cursor: default; }

.mn-stage { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 2.4vw, 22px); padding: 34px 0 132px; font-size: clamp(7.5px, 2.3vw, 12.5px); }
.mphone { position: relative; width: 12em; flex: none; }
.mphone.mid { translate: 0 -16px; z-index: 1; }
.who { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; font: 600 1.1em/1 var(--sans); color: var(--ink2); }
.who .av { width: 2.1em; height: 2.1em; font-size: .9em; }
.mscreen { position: relative; height: 24em; border-radius: 2.2em; overflow: hidden; background: #F7F3EA; box-shadow: 0 0 0 .55em #1A140F, 0 0 0 calc(.55em + 1.5px) #3A2E24, 0 30px 60px -20px rgba(0, 0, 0, .8); }
.code { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55em; padding: 1em; background: #F7F3EA; color: #2A2118; transition: opacity .25s, transform .4s var(--ease); }
.lobby { position: absolute; top: 1.4em; margin: 0; font: 800 1.15em/1 var(--sans); }
.go { margin-top: .6em; padding: .7em 1.2em; border-radius: 99px; background: #9A5220; color: #FFF; font: 600 .95em/1 var(--sans); }
.code small { font: 600 .9em/1 var(--sans); color: #6B6052; }
.code b { font: 800 2.3em/1 var(--marquee); letter-spacing: .12em; }
.code .in { display: flex; gap: .3em; }
.code .av { width: 2.2em; height: 2.2em; font-size: .85em; }
.mcard { position: absolute; inset: 1em .9em 1em; width: auto; aspect-ratio: auto; border-radius: 1.2em; transition: transform .8s var(--ease), opacity .5s; }
.mcard.c-a { z-index: 2; }
.mcard.p-lido .art { background: radial-gradient(circle at 76% 12%, #FFF4D6 0 8%, transparent 8.5%), linear-gradient(transparent 52%, #1C7A86 52%); }
.mt { position: absolute; left: 0; right: 0; bottom: 0; padding: 3em .7em 3em; font: 400 1.22em/1 var(--display); color: #FFF8EC; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); text-wrap: balance; background: linear-gradient(transparent, rgba(10, 6, 3, .8) 55%); }
.mfor { position: absolute; z-index: 1; left: .8em; bottom: .8em; padding: .45em .7em; border-radius: 99px; background: #F0C040; color: #2A2118; font: 800 1em/1 var(--sans); }
.vote { position: absolute; top: 24%; padding: .35em .6em; border: 2px solid; border-radius: .4em; font: 800 1.5em/1 var(--marquee); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.yes .vote { left: 1em; color: #C3E6A8; rotate: -12deg; }
.no .vote { right: 1em; color: #FFB4A0; rotate: 12deg; }
.mmatch { position: absolute; left: .9em; right: .9em; top: 1.6em; z-index: 4; padding: 1.1em .4em .8em; border-radius: .9em; text-align: center; background: radial-gradient(circle, #FFF2C2 0 .18em, transparent .22em) 0 .3em / .8em .6em repeat-x, #F0C040; color: #2A2118; font: 800 1.4em/1 var(--marquee); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .6s var(--spring); }
.pick { position: absolute; left: 50%; bottom: 0; display: flex; align-items: center; gap: 14px; width: max-content; max-width: 100%; padding: 12px 18px 12px 12px; border-radius: 18px; background: #FFF8EC; color: #2A2118; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(240, 192, 64, .5); translate: -50% 0; opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .5s, transform .7s var(--spring); z-index: 5; }
.pick .poster { width: 52px; border-radius: 5px; flex: none; }
.pick small { display: block; font: 700 .8rem/1 var(--marquee); letter-spacing: .16em; text-transform: uppercase; color: #9A5220; }
.pick b { display: block; font: 400 1.5rem/1.1 var(--display); margin: 3px 0 4px; }
.clock { display: inline-flex; align-items: center; gap: 6px; font: 600 .82rem/1 var(--sans); color: #5C5142; }
.clock i { position: relative; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; }
.clock i::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 1.5px; height: 5px; background: currentColor; transform-origin: 50% 100%; }
/* phases, set by site.js: 1 the code, 2 the first card, 3 the second card, 4 the match */
.mn-stage:not([data-phase="1"]) .code { opacity: 0; transform: scale(.94); pointer-events: none; }
.mn-stage[data-phase="2"] .c-a .vote, .mn-stage[data-phase="3"] .c-b .vote { opacity: 1; }
.mn-stage[data-phase="3"] .c-a.yes, .mn-stage[data-phase="4"] .c-a.yes { transform: translateX(140%) rotate(14deg); }
.mn-stage[data-phase="3"] .c-a.no, .mn-stage[data-phase="4"] .c-a.no { transform: translateX(-140%) rotate(-14deg); }
.mn-stage[data-phase="4"] .c-b .art { filter: brightness(.6); }
.mn-stage[data-phase="4"] .mmatch { opacity: 1; transform: none; transition-delay: .2s; }
.mn-stage[data-phase="4"] .pick { opacity: 1; transform: none; transition-delay: .5s; }
.mn-stage[data-phase="4"] .clock i::after { animation: tick .9s .9s ease-out both; }
@keyframes tick { from { rotate: -300deg; } }
@media (min-width: 960px) {
  .night-inner { grid-template-columns: .85fr 1.15fr; gap: 56px; }
  .js .night { height: 280vh; }
  .js .night-stick { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; }
  .js .night-stick > .wrap { width: 100%; }
}

/* ---------- what's on: the marquee letterboard ---------- */
.marquee { position: relative; padding: 22px 14px; border-radius: 18px; background: linear-gradient(#3A2A18, #2A1D10); box-shadow: var(--shadow-lg), inset 0 0 0 2px #5A4226; }
/* lit bulbs; when the board scrolls into view the two rows blink in turn a few times, then all stay lit */
.bulbs { position: relative; display: block; height: 14px; background: radial-gradient(circle, #FFF2C2 0 3px, #F0C040 3.5px 5px, transparent 5.5px) 0 50% / 24px 14px space no-repeat; filter: drop-shadow(0 0 4px rgba(240, 192, 64, .7)); }
.bulbs::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #6E5520 0 5px, transparent 5.5px) 0 50% / 24px 14px space no-repeat; opacity: 0; }
.bulbs.b-top { margin-bottom: 16px; } .bulbs.b-bottom { margin-top: 16px; }
.marquee.in .bulbs::after { animation: chase 1s steps(1) 4; }
.marquee.in .bulbs.b-bottom::after { animation-delay: .5s; }
@keyframes chase { 0% { opacity: 1; } 50% { opacity: 0; } }
.letterboard { position: relative; display: grid; gap: 30px; padding: 30px 22px; border-radius: 6px; background: repeating-linear-gradient(#141010 0 13px, #070505 13px 15px); box-shadow: inset 0 0 40px rgba(0, 0, 0, .8); }
@media (min-width: 800px) {
  .letterboard { grid-template-columns: 1fr 1fr; gap: 34px 40px; padding: 40px 38px; }
  .letterboard .wide-col { grid-column: 1 / -1; padding-bottom: 30px; border-bottom: 2px solid #000; }
  .letterboard .wide-col ul { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .letterboard li { white-space: nowrap; }
  .marquee { padding: 24px 22px; }
}
.letterboard h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; font: 800 1.7rem/1 var(--marquee); letter-spacing: .08em; text-transform: uppercase; color: #FFFDF6; }
.letterboard h3 small { font: 700 .66rem/1 var(--marquee); letter-spacing: .16em; padding: 5px 8px; border-radius: 3px; color: #100C08; background: #C3E6A8; }
.letterboard .col:nth-child(2) h3 { color: var(--gold); } .letterboard .col:nth-child(2) h3 small { background: var(--gold); }
.letterboard .col:nth-child(3) h3 { color: #CDBFAC; } .letterboard .col:nth-child(3) h3 small { background: #CDBFAC; }
.letterboard ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.letterboard li { font: 600 1.06rem/1.25 var(--marquee); letter-spacing: .07em; text-transform: uppercase; color: #F4EFE6; text-shadow: 0 1px 0 rgba(0, 0, 0, .8); }
.letterboard li:nth-child(odd) { rotate: -.4deg; } .letterboard li:nth-child(3n) { rotate: .3deg; }
.letterboard .col:nth-child(3) li { color: #CDBFAC; }
.js .letterboard li { opacity: 0; transform: translateY(-6px); transition: opacity .5s var(--ease), transform .6s var(--spring); }
.js .marquee.in li { opacity: 1; transform: none; }
.js .marquee.in li:nth-child(2) { transition-delay: .1s; } .js .marquee.in li:nth-child(3) { transition-delay: .2s; } .js .marquee.in li:nth-child(4) { transition-delay: .3s; }
.js .marquee.in li:nth-child(5) { transition-delay: .4s; } .js .marquee.in li:nth-child(6) { transition-delay: .5s; } .js .marquee.in li:nth-child(7) { transition-delay: .6s; } .js .marquee.in li:nth-child(8) { transition-delay: .7s; }

/* ---------- small on purpose: admit one ---------- */
.small-wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .small-wrap { grid-template-columns: 1fr 1fr; gap: 72px; } }
.small-wrap .actions { margin-top: 8px; }
.ticket { --paper: #F6DFA4; --notch: 14px; position: relative; display: flex; max-width: 460px; width: 100%; margin: 0 auto; rotate: 1.5deg; color: #2A2118; filter: drop-shadow(0 22px 30px rgba(60, 35, 10, .28)); transition: transform .6s var(--ease), rotate .6s var(--ease); }
.ticket:hover { rotate: 0deg; }
.ticket-main { flex: 1; min-width: 0; padding: 26px 22px 22px 24px; background: var(--paper); border-radius: 10px 0 0 10px;
  -webkit-mask: radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 100% 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat; }
.admit { margin: 0; font: 900 clamp(2.4rem, 8vw, 3.1rem)/.9 var(--marquee); letter-spacing: .06em; text-transform: uppercase; color: #8A3A14; }
.serial { margin: 8px 0 18px; padding-bottom: 14px; border-bottom: 1.5px dashed rgba(138, 74, 28, .4); font: 700 .8rem/1 var(--marquee); letter-spacing: .16em; text-transform: uppercase; color: #5C4A30; }
.ticket ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ticket li { display: flex; align-items: baseline; gap: 12px; font-size: .95rem; color: #4A3F2E; }
.ticket .qty { flex: none; width: 2.6em; text-align: right; font: 800 1.25rem/1 var(--marquee); text-transform: uppercase; color: #8A3A14; }
.ticket-stub { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; width: 78px; flex: none; padding: 26px 0; border-left: 2px dashed rgba(138, 74, 28, .45); border-radius: 0 10px 10px 0; background: var(--paper); transition: transform .6s var(--spring);
  -webkit-mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat; }
.ticket-stub span { writing-mode: vertical-rl; rotate: 180deg; font: 800 .82rem/1 var(--marquee); letter-spacing: .2em; text-transform: uppercase; color: #8A3A14; }
/* a barcode of uneven bars, running down the stub */
.barcode { display: block; width: 26px; flex: 1; max-height: 120px; opacity: .8; background-repeat: repeat-y; background-size: 100% 26px;
  background-image: linear-gradient(#2A2118 0 2px, transparent 2px 5px, #2A2118 5px 6px, transparent 6px 8px, #2A2118 8px 11px, transparent 11px 14px, #2A2118 14px 15px, transparent 15px 17px, #2A2118 17px 19px, transparent 19px 22px, #2A2118 22px 23px, transparent 23px); }
@media (max-width: 479px) { .ticket-stub { width: 50px; } .barcode { width: 18px; } .ticket-main { padding: 22px 16px 18px 18px; } }
.ticket:hover .ticket-stub { transform: translateX(8px) rotate(4deg); }
@media (prefers-color-scheme: dark) { .ticket { --paper: #EED494; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .6)); } }
.js .ticket li { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .ticket.in li { opacity: 1; transform: none; }
.js .ticket.in li:nth-child(2) { transition-delay: .1s; } .js .ticket.in li:nth-child(3) { transition-delay: .2s; } .js .ticket.in li:nth-child(4) { transition-delay: .35s; }
.js .ticket.in li:nth-child(5) { transition-delay: .45s; } .js .ticket.in li:nth-child(6) { transition-delay: .55s; }

/* ---------- the finale: a spotlight before the credits ---------- */
.finale { position: relative; isolation: isolate; overflow: hidden; padding: 120px 0 72px; text-align: center; background: var(--night); }
.finale::after { content: ""; position: absolute; left: 50%; bottom: 40px; z-index: -1; width: 620px; max-width: 120%; height: 120px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 226, 170, .14), transparent); }
.finale::before { content: ""; position: absolute; left: 50%; top: -6%; z-index: -1; width: 760px; height: 110%; translate: -50% 0; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); filter: blur(14px); -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); background: linear-gradient(rgba(255, 236, 190, .16), rgba(255, 236, 190, .04) 60%, transparent 92%); }
.finale h2 { font-size: clamp(2.6rem, 8vw, 4.4rem); }
.finale h2 em { color: var(--gold); }
.finale p { color: var(--ink2); max-width: 30em; margin: 0 auto 28px; }
.finale .actions { justify-content: center; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- prose pages ---------- */
.doc { padding: 44px 0 72px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(2.6rem, 8vw, 3.6rem); margin-bottom: .3em; }
.doc .meta { color: var(--ink3); font-size: .92rem; margin-bottom: 2em; }
.doc h2 { font-size: clamp(1.7rem, 4vw, 2rem); margin-top: 1.8em; padding-top: .2em; }
.doc h3 { margin-top: 1.6em; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 1em; }
.doc li { margin-bottom: .45em; }
.doc li::marker { color: var(--accent); }
.doc p, .doc li { color: var(--ink2); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc code { font-size: .88em; background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; }
/* the eyebrow of the account-deletion page is a cinema exit sign */
.eyebrow.exit { padding: 7px 12px; border-radius: 4px; color: #FFFFFF; background: #1F7A4C; letter-spacing: .24em; box-shadow: 0 0 18px rgba(46, 204, 113, .35); }
.eyebrow.exit::before { content: "\2190"; width: auto; height: auto; background: none; opacity: 1; font: 800 1rem/1 var(--sans); }
.summary { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 18px 20px 4px; margin: 0 0 2em; }
.toc { background: var(--bg2); border-radius: var(--r); padding: 16px 20px; margin: 0 0 2em; font-size: .92rem; }
.toc ol { margin: .4em 0 0; columns: 2 220px; column-gap: 28px; }
.toc a { text-decoration: none; }
.table { width: 100%; overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--ink); background: var(--bg2); }
td { color: var(--ink2); }
tr:last-child td { border-bottom: 0; }
@media (max-width: 600px) {
  .stack thead { display: none; }
  .stack tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .stack tr:last-child { border-bottom: 0; }
  .stack td { display: block; border: 0; padding: 3px 14px; }
  .stack td::before { content: attr(data-l) ": "; font-weight: 600; color: var(--ink); }
  .stack td:first-child::before { content: none; }
  .stack td:first-child { font-weight: 600; color: var(--ink); }
}
.steps { counter-reset: s; list-style: none; padding: 0 !important; margin: 0 0 1em; }
.steps li { counter-increment: s; position: relative; padding-left: 40px; margin-bottom: .8em; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%; background: var(--soft); color: var(--soft-ink); font: 800 .95rem/27px var(--marquee); text-align: center; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; margin-bottom: 10px; transition: border-color .3s; }
details[open] { border-color: var(--line2); }
summary { position: relative; cursor: pointer; padding: 15px 28px 15px 0; font-weight: 600; color: var(--ink); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); rotate: 45deg; transition: rotate .3s var(--ease); }
details[open] > summary::after { rotate: 225deg; margin-top: -2px; }
details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.contact { display: grid; gap: 14px; margin: 1.4em 0 2em; }
@media (min-width: 600px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact .card { padding-bottom: 14px; }
.contact .card h2 { margin: 0 0 .5em; font: 600 1.15rem/1.3 var(--sans); }
.contact a { font-weight: 600; word-break: break-word; }

/* ---------- 404: a wild goose chase ---------- */
.lost { text-align: center; padding: 64px 0 100px; overflow: hidden; }
.lost .tiles { display: flex; justify-content: center; gap: 10px; margin: 0 0 40px; }
.lost .tiles span { display: grid; place-items: center; width: clamp(64px, 18vw, 96px); aspect-ratio: 3 / 4; border-radius: 6px; background: repeating-linear-gradient(#141010 0 13px, #070505 13px 15px); color: #FFFDF6; font: 900 clamp(3rem, 12vw, 4.6rem)/1 var(--marquee); box-shadow: var(--shadow); }
.lost .tiles .fallen { rotate: 24deg; translate: 6px 18px; color: var(--gold); }
.lost h1 { font-size: clamp(2.6rem, 8vw, 3.8rem); }
.lost .muted { max-width: 30em; margin-left: auto; margin-right: auto; }
.lost .actions { justify-content: center; margin-top: 26px; }
.goose { display: block; width: 76px; height: 62px; margin: 6px auto 0; color: var(--ink); animation: waddle 3.2s .6s ease-out both; }
.goose .eye { fill: var(--bg); }
@keyframes waddle { 0% { transform: translateX(-46vw); } 20%, 40%, 60%, 80% { rotate: -4deg; } 30%, 50%, 70%, 90% { rotate: 4deg; } 100% { transform: none; rotate: 0deg; } }

/* footer: the end credits, dark in both modes */
.foot { background: var(--night); padding: 24px 0 26px; font-size: .9rem; }
.foot a { color: var(--ink); }
.foot a:hover { color: #FFFFFF; }
.foot :focus-visible { outline-color: var(--gold); }
.endcredits { display: grid; gap: 10px; margin: 0 auto 56px; padding: 40px 0 44px; max-width: 640px; border-bottom: 1px solid rgba(255, 248, 236, .1); }
.endcredits div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.endcredits dt { text-align: right; font: 700 .78rem/1.3 var(--marquee); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.endcredits dd { margin: 0; font: 400 1.2rem/1.3 var(--display); color: var(--ink); }
.endcredits a { text-decoration-color: rgba(255, 248, 236, .3); }
.endcredits .tmdb { display: inline-block; vertical-align: middle; }
.endcredits .tmdb img { width: 96px; height: 12px; }
.foot .cols { display: grid; gap: 28px; }
@media (min-width: 720px) { .foot .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h2 { font: 700 .82rem/1.4 var(--marquee); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); margin: 0 0 12px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 7px; }
.foot .brand { color: var(--ink); margin-bottom: 12px; }
.foot .brand em { color: var(--gold); }
.foot p { color: var(--ink2); }
.foot .legal { border-top: 1px solid rgba(255, 248, 236, .12); margin-top: 30px; padding-top: 18px; font-size: .82rem; }
.foot .legal p { margin: 0 0 .3em; color: var(--ink3); }
.stinger { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 72px 0 8px; font: italic 400 1.15rem/1 var(--display); color: var(--ink3); }
.pop { position: relative; width: 16px; height: 15px; border-radius: 50% 45% 50% 48%; background: radial-gradient(circle at 60% 60%, #DDB185 0 30%, #F9E8D8 34%); box-shadow: 0 0 0 1.5px #111; }
.stinger.in .pop { animation: stinger-pop .9s .3s var(--spring) both; }
@keyframes stinger-pop { 0% { transform: translateY(0); } 40% { transform: translateY(-26px) rotate(160deg); } 100% { transform: rotate(360deg); } }
@media (max-width: 480px) {
  .endcredits div { grid-template-columns: 1fr; gap: 2px; text-align: center; }
  .endcredits dt { text-align: center; }
  .endcredits div + div { margin-top: 8px; }
}

/* scroll reveal, only when site.js runs so the page never hides content without it */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .ticket.reveal { transform: translateY(26px) rotate(-3deg); }
.js .ticket.reveal.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .reveal, .js .ticket li, .js .credits div, .js .letterboard li, .js .ticket.reveal { opacity: 1; transform: none; }
  .strip, .js .strip { overflow-x: auto; }
  .strip-track { transform: none; }
  .gut i:nth-child(-n+8) { background: #B5652A; }
  .lights-down main > section:not(.night), .lights-down .strip { opacity: 1; }
  html.lights-down body { background: var(--bg); }
}