/* Danny Pandit Studios: one studio, two shows. A scroll story. */
:root {
  --ink: #050304;
  --text: #f6efe4;
  --muted: #b8aca1;
  --gold: #f2bf52;
  --gold-d: #b98522;
  --velvet: #8a1021;
  --velvet-h: #c11d32;
  --hot: #ff3d2e;
  --paper: #f4ead6;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --mr: 'Tiro Devanagari Marathi', 'Nirmala UI', serif;
  --led-h: 42px;
  --gut: clamp(16px, 5vw, 80px);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
[lang="mr"], .mr { font-family: var(--mr); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tag { margin: 0; font: 800 13px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }

/* ---------- LED board ---------- */
.led { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--led-h); display: flex; align-items: stretch;
  background: #0b0705; border-bottom: 1px solid rgba(242,191,82,.35); box-shadow: 0 6px 24px rgba(0,0,0,.6); }
.led__logo { display: grid; place-items: center; padding: 0 12px; border-right: 1px solid rgba(242,191,82,.25); }
.led__logo img { width: 40px; }
.led__board { position: relative; flex: 1; overflow: hidden; text-decoration: none; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.led__track { display: flex; align-items: center; gap: 18px; width: max-content; animation: led 46s linear infinite; }
.led__track span { font: 800 18px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); white-space: nowrap; text-shadow: 0 0 10px rgba(242,191,82,.45); }
.led__track span.mr { font: 400 19px/1 var(--mr); letter-spacing: 0; text-transform: none; }
.led__track i { font-style: normal; font-size: 8px; color: #ff5a3c; }
.led__board:hover .led__track { animation-play-state: paused; }
@keyframes led { to { transform: translateX(-50%); } }
.led__book { display: grid; place-items: center; padding: 0 20px; background: var(--gold); color: var(--ink); text-decoration: none; font: 900 17px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.progress { position: fixed; z-index: 61; top: var(--led-h); left: 0; right: 0; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--velvet-h), var(--gold)); }

/* ---------- pinned scenes: the section is tall, .pin sticks for its whole length ---------- */
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero { height: 240vh; }
.bridge { height: calc(var(--n, 3) * 75vh + 60vh); }
.split { height: 260vh; }
.nd { height: 230vh; }
.journey { height: 520vh; }
.pune { height: 620vh; }
.car { height: 280vh; }
.hype { height: 260vh; }
.storm { height: 300vh; }
.ruke { height: 260vh; }
.says { height: 420vh; }

/* ---------- 1 · hero ---------- */
.hero .pin { background: #000; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform-origin: 50% 30%; filter: saturate(1.1); }
.hero__shade { position: absolute; inset: 0; background:
  radial-gradient(ellipse 60% 70% at 50% 45%, rgba(0,0,0,0), rgba(0,0,0,.55) 100%),
  linear-gradient(180deg, rgba(5,3,4,.55), rgba(5,3,4,0) 30%, rgba(5,3,4,0) 60%, rgba(5,3,4,.95)); }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.hero__name { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-58%); text-align: center; pointer-events: none;
  font: 900 clamp(120px, 26vw, 470px)/.78 var(--display); letter-spacing: -.02em; }
.hero__line { display: block; white-space: nowrap; }
.hero__line--1 { color: var(--gold); text-shadow: 0 10px 60px rgba(0,0,0,.5); }
.hero__line--2 { color: transparent; -webkit-text-stroke: clamp(2px, .35vw, 5px) var(--paper); }
.hero__line .ch { display: inline-block; will-change: transform; }
.hero__danny { position: absolute; z-index: 3; left: 50%; bottom: 0; height: 90svh; width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.hero__studios { position: absolute; z-index: 5; left: var(--gut); top: calc(var(--led-h) + 22px); margin: 0; display: flex; align-items: center; gap: 12px;
  font: 900 clamp(22px, 2.4vw, 34px)/1 var(--display); letter-spacing: .3em; text-transform: uppercase; }
.hero__studios img { width: clamp(40px, 4vw, 56px); }
.hero__eyebrow { position: absolute; z-index: 5; right: var(--gut); top: calc(var(--led-h) + 30px); margin: 0; font: italic 400 clamp(18px, 1.6vw, 24px)/1 var(--serif); color: var(--paper); }
.hero__cue { position: absolute; z-index: 5; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; display: flex; align-items: center; gap: 10px;
  font: 800 12px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--paper); }
.hero__cue span { width: 20px; height: 32px; border: 1.5px solid rgba(246,239,228,.6); border-radius: 12px; position: relative; }
.hero__cue span::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--gold); animation: cue 1.6s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- bridges: one huge line at a time, dead centre ---------- */
.bridge .pin { display: grid; place-items: center; background: radial-gradient(ellipse 70% 60% at 50% 55%, #1a0a0c, #050304 70%); perspective: 900px; }
.bridge .pin::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background: conic-gradient(from 180deg at 50% -10%, transparent 168deg, rgba(255,226,170,.10) 176deg, rgba(255,240,210,.16) 180deg, rgba(255,226,170,.10) 184deg, transparent 192deg); }
.bl { grid-area: 1 / 1; margin: 0; padding: 0 var(--gut); text-align: center; max-width: 100%;
  font: 900 clamp(64px, 11.5vw, 210px)/.86 var(--display); letter-spacing: -.01em; text-transform: uppercase; opacity: 0; will-change: transform, opacity; }
.bl .ch { display: inline-block; will-change: transform, opacity, filter; }
.bl--sm { font: italic 400 clamp(38px, 5.6vw, 96px)/1.02 var(--serif); text-transform: none; letter-spacing: 0; color: var(--paper); }
.bl--hot { color: var(--gold); text-shadow: 0 0 80px rgba(242,191,82,.35); }
.bl--logo { display: flex; flex-direction: column; align-items: center; gap: 2vh; }
.bl--logo img { width: clamp(150px, 20vw, 300px); filter: drop-shadow(0 0 40px rgba(110,160,255,.5)); }
.bl--logo span { font: italic 400 clamp(34px, 4.6vw, 76px)/1 var(--serif); text-transform: none; color: var(--paper); }
.bl--date { font-size: clamp(64px, 14vw, 260px); color: var(--paper); font-variant-numeric: tabular-nums; }
.bl--date small, .bl--mr small { display: block; margin-top: 2vh; font: italic 400 clamp(28px, 3.4vw, 56px)/1 var(--serif); text-transform: none; color: var(--gold); letter-spacing: 0; }
.bl--mr { font: 400 clamp(64px, 11vw, 200px)/1.1 var(--mr); text-transform: none; color: var(--hot); text-shadow: 0 0 60px rgba(255,61,46,.4); }

/* ---------- split: the two shows ---------- */
.split .pin { display: flex; background: #000; }
.split__half { position: relative; flex: 1 1 50%; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(18px, 3.4vw, 56px) clamp(28px, 7vh, 80px); will-change: transform, flex-basis; }
.split__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.split__half::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.92)); }
.split__half--sr .split__media { object-position: 50% 30%; }
.split__half > span { position: relative; z-index: 1; }
.split__no { font: 800 14px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.split__title { margin: 12px 0 10px; font: 900 clamp(44px, 6.2vw, 112px)/.86 var(--display); text-transform: uppercase; }
.split__title small { font: italic 400 .5em/1 var(--serif); text-transform: none; color: var(--paper); }
.split__half--sr .split__title { color: #ff4fd0; text-shadow: 0 0 40px rgba(255,79,208,.35); }
.split__by { font: italic 400 clamp(18px, 1.7vw, 26px)/1.25 var(--serif); color: var(--paper); }
.split__half:hover .split__media { transform: scale(1.04); }
.split__vs { position: absolute; z-index: 3; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); width: clamp(64px, 7vw, 110px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--gold); color: var(--ink); font: italic 400 clamp(40px, 4vw, 64px)/1 var(--serif); box-shadow: 0 0 0 8px rgba(0,0,0,.6), 0 0 60px rgba(242,191,82,.5); }

/* ---------- Normal Day: the sign ---------- */
.nd .pin { background: #000; }
.nd__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nd__shade { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(0,0,0,.35), rgba(0,0,0,.9)); }
.neon { position: absolute; z-index: 3; left: 50%; top: 44%; display: inline-flex; flex-direction: column; align-items: flex-start; padding: 4px;
  font-size: clamp(9px, 1.9vw, 30px); transform: translate(-50%, -50%) rotate(-7deg); transform-origin: 50% -40%; }
.neon::before, .neon::after { content: ''; position: absolute; top: -60vh; width: 1px; height: 60vh; background: linear-gradient(transparent, rgba(255,255,255,.35)); }
.neon::before { left: 18%; } .neon::after { right: 18%; }
.neon__top { margin: 0 0 .2em .9em; font: 700 2.5em/1 'Comfortaa', var(--sans); color: #ffd6f0; letter-spacing: -.01em;
  text-shadow: 0 0 .06em #fff, 0 0 .18em #ff4fb8, 0 0 .45em #ff2aa6, 0 0 1em #ff2aa6; }
.neon__box { display: block; padding: .25em .7em .3em; border: .16em solid #bfe4ff; border-radius: .7em; background: rgba(8, 9, 18, .82);
  box-shadow: 0 0 .15em #fff inset, 0 0 .5em #39a0ff, 0 0 1.4em #2f8cff, 0 0 .6em #39a0ff inset; }
.neon__main { display: block; font: 400 5em/1 'Righteous', var(--display); letter-spacing: .02em; color: transparent; -webkit-text-stroke: .045em #fff2b8; white-space: nowrap;
  text-shadow: 0 0 .04em #ffe58a, 0 0 .14em #ffc21f, 0 0 .35em #ffb000, 0 0 .8em #ff9a00; }
.neon__tag { margin: .45em 0 0 2.2em; font: 400 1.55em/1 'Righteous', var(--display); color: #fff; letter-spacing: .02em; text-shadow: 0 0 .1em #fff, 0 0 .4em rgba(255,255,255,.6); }
.neon.is-on .neon__main, .neon.is-on .neon__top { animation: neonFlicker 7s infinite; }
.neon.is-on .neon__top { animation-delay: 2.3s; }
@keyframes neonFlicker { 0%, 91%, 100% { opacity: 1; } 92% { opacity: .45; } 93% { opacity: 1; } 95% { opacity: .7; } 96% { opacity: 1; } }
.nd__info { position: absolute; z-index: 4; left: 50%; bottom: clamp(26px, 7vh, 80px); transform: translateX(-50%); width: min(92vw, 760px); text-align: center; }
.nd__lede { margin: 12px 0 8px; font: italic 400 clamp(24px, 2.6vw, 40px)/1.15 var(--serif); color: var(--paper); text-shadow: 0 4px 30px #000; }
.nd__credit { margin: 0; font: 800 13px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---------- roll call (shared with roll.js) ---------- */
.roll { position: relative; height: 1100vh; background: #050304; }
.roll__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(ellipse 80% 45% at 50% 100%, rgba(140,20,35,.35), transparent 70%), linear-gradient(180deg, #050304, #0c0608 70%, #1a0c08); }
.roll__sticky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 15vh; background: linear-gradient(180deg, #3a1f10 0, #21120a 18%, #0e0705 100%);
  box-shadow: 0 -3px 0 #c8962e, 0 -14px 40px rgba(255,180,90,.28), 0 -40px 80px rgba(0,0,0,.5); }
.roll__spots i { position: absolute; top: -10vh; width: 40vw; height: 130vh; transform-origin: 50% 0; pointer-events: none; z-index: 1;
  background: conic-gradient(from 180deg at 50% 0%, transparent 168deg, rgba(255,226,170,.11) 176deg, rgba(255,240,210,.16) 180deg, rgba(255,226,170,.11) 184deg, transparent 192deg); mix-blend-mode: screen; }
.roll__spots i:nth-child(1) { left: 30vw; }
.roll__spots i:nth-child(2) { left: 5vw; transform: rotate(14deg); opacity: .5; background: conic-gradient(from 180deg at 50% 0%, transparent 170deg, rgba(110,160,255,.12) 180deg, transparent 190deg); }
.roll__spots i:nth-child(3) { left: 55vw; transform: rotate(-14deg); opacity: .5; background: conic-gradient(from 180deg at 50% 0%, transparent 170deg, rgba(170,120,255,.12) 180deg, transparent 190deg); }
.roll__head { position: absolute; z-index: 3; left: var(--gut); top: calc(var(--led-h) + clamp(20px, 5vh, 56px)); max-width: 640px; }
.roll__title { margin: 10px 0 0; font: 900 clamp(40px, 5.6vw, 84px)/.9 var(--display); text-transform: uppercase; }
.roll__title span { color: var(--gold); }
.roll__line { position: absolute; inset: 0; z-index: 2; perspective: 1400px; }
.roll__fig { position: absolute; left: 50%; bottom: 6vh; height: 60vh; width: auto; cursor: pointer; transform-origin: 50% 100%; will-change: transform, opacity, filter;
  border: 0; padding: 0; background: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.65)); }
.roll__fig img { height: 100%; width: auto; display: block; max-width: none; }
.roll__fig:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.roll__card { position: absolute; z-index: 4; right: clamp(20px, 6vw, 110px); top: 50%; transform: translateY(-50%); max-width: 380px; opacity: 0; pointer-events: none; }
.roll__no { margin: 0; font: 800 14px/1 var(--display); letter-spacing: .24em; color: var(--gold); }
.roll__name { margin: 10px 0 8px; font: 900 clamp(38px, 4.4vw, 68px)/.92 var(--display); text-transform: uppercase; }
.roll__views { margin: 0; font: italic 400 clamp(20px, 2vw, 28px)/1.25 var(--serif); color: var(--paper); }
.roll__views b { font: 900 1.4em/1 var(--display); font-style: normal; color: var(--gold); }
.roll__hint { margin: 14px 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.roll__final { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--led-h) + 6vh); margin: 0; text-align: center; opacity: 0;
  font: italic 400 clamp(30px, 3.6vw, 56px)/1.1 var(--serif); color: var(--paper); text-shadow: 0 6px 40px rgba(0,0,0,.9); }
.roll__final b { font: 900 1.2em/1 var(--display); font-style: normal; color: var(--gold); text-transform: uppercase; }
.roll__giant { position: absolute; z-index: 1; left: 0; right: 0; top: 38%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; opacity: 0; }
.roll__giant span { display: inline-block; font: 900 clamp(140px, 24vw, 380px)/.85 var(--display); text-transform: uppercase; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 2px rgba(242,191,82,.55); }
.roll__beam { position: absolute; z-index: 1; left: 50%; top: -12vh; width: 46vw; height: 125vh; margin-left: -23vw; transform-origin: 50% 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 180deg at 50% 0%, transparent 166deg, rgba(255,232,190,.18) 175deg, rgba(255,246,225,.28) 180deg, rgba(255,232,190,.18) 185deg, transparent 194deg); filter: blur(2px); }
.roll__beam::after { content: ''; position: absolute; left: 50%; bottom: 12vh; width: 34vw; height: 9vh; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,236,190,.55), rgba(255,220,160,0) 70%); }
.roll__burst { position: absolute; z-index: 4; left: 37%; bottom: 10vh; width: 60vw; height: 30vh; margin-left: -30vw; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 70%, rgba(255,250,235,.95), rgba(255,200,120,.5) 30%, rgba(255,160,80,0) 70%); }
.roll__confetti { position: absolute; inset: 0; z-index: 6; pointer-events: none; width: 100%; height: 100%; }

/* ---------- journey: a horizontal run of tickets and posters ---------- */
.journey .pin { background: linear-gradient(180deg, #0a0507, #140a08); display: flex; flex-direction: column; justify-content: center; }
.journey__label { position: absolute; left: var(--gut); top: calc(var(--led-h) + 26px); }
.journey__track { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); padding: 0 50vw 0 var(--gut); width: max-content; will-change: transform; }
.jcard { position: relative; flex: none; width: clamp(240px, 24vw, 380px); }
.jcard__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); background: #120a0c; }
.jcard__stub { margin-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: baseline; }
.jcard__d { grid-row: span 2; font: 900 clamp(48px, 4.6vw, 76px)/.8 var(--display); color: var(--gold); }
.jcard__m { font: 900 18px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.jcard__city { font: italic 400 clamp(18px, 1.6vw, 24px)/1.15 var(--serif); color: var(--paper); }
.jcard__note { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.jcard--big { width: clamp(300px, 32vw, 520px); }
.jcard--text { display: grid; place-items: center; aspect-ratio: auto; width: clamp(260px, 30vw, 460px); }
.jcard--text p { margin: 0; font: 900 clamp(56px, 6vw, 110px)/.86 var(--display); text-transform: uppercase; }
.jcard--text p span { color: var(--gold); }
.stamp { position: absolute; z-index: 2; right: -14px; top: 18px; padding: 8px 14px; border: 4px solid var(--hot); border-radius: 6px; color: var(--hot);
  font: 900 26px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-12deg) scale(2.4); opacity: 0; background: rgba(5,3,4,.55); mix-blend-mode: screen; }
.journey__bar { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(20px, 5vh, 44px); height: 2px; background: rgba(255,255,255,.1); }
.journey__bar i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--gold); }

/* ---------- Pune: four beats from a seat in the hall ---------- */
.pune .pin { background: #000; }
.beat { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.beat video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.beat::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 28%, rgba(0,0,0,0) 55%, rgba(0,0,0,.85)); }
.beat__line { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(30px, 9vh, 100px); margin: 0; text-align: center; padding: 0 var(--gut);
  font: 900 clamp(48px, 7vw, 130px)/.86 var(--display); text-transform: uppercase; text-shadow: 0 6px 50px rgba(0,0,0,.9); }
.beat__word { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%); text-align: center; pointer-events: none;
  font: 900 clamp(160px, 34vw, 640px)/.8 var(--display); color: transparent; -webkit-text-stroke: 3px rgba(255,255,255,.85); mix-blend-mode: overlay; }
/* the count: the hall seen only through the digits, then you fall through them */
.knock { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: #000; mix-blend-mode: multiply; pointer-events: none; }
.knock span { font: 900 clamp(150px, 31vw, 560px)/.8 var(--display); color: #fff; letter-spacing: -.02em; will-change: transform; white-space: nowrap; }
.pune__cap { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(30px, 8vh, 90px); margin: 0; text-align: center; opacity: 0; padding: 0 var(--gut);
  font: italic 400 clamp(22px, 2.4vw, 36px)/1.2 var(--serif); color: var(--paper); text-shadow: 0 4px 30px #000; }
.pune__cap b { font: 900 1.3em/1 var(--display); font-style: normal; color: var(--gold); }

/* ---------- the car: he breaks out of the frame ---------- */
.car .pin { background: radial-gradient(ellipse 70% 60% at 50% 60%, #22100a, #050304 75%); }
.car__back { position: absolute; z-index: 0; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.car__back span { font: 900 clamp(170px, 30vw, 560px)/.78 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.car__back span:first-child { color: var(--gold); }
.car__back span:last-child { color: transparent; -webkit-text-stroke: 3px rgba(244,234,214,.6); }
.car__frame { position: absolute; z-index: 1; left: 50%; top: 52%; height: 80svh; aspect-ratio: 9 / 16; transform: translate(-50%, -50%); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 6px var(--paper), 0 50px 120px rgba(0,0,0,.85); }
.car__frame video { width: 100%; height: 100%; object-fit: cover; }
.car__pop { position: absolute; z-index: 2; left: 50%; top: 52%; width: auto; max-width: none; pointer-events: none; opacity: 0; transform-origin: 50% 80%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.7)); }
.car__stats { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(16px, 4vh, 40px); display: flex; justify-content: center; gap: 10px; padding: 0 16px; }
.car__stats p { margin: 0; min-width: 140px; padding: 10px 14px; border-radius: 10px; background: rgba(5,3,4,.78); border: 1px solid rgba(242,191,82,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; }
.car__stats b { display: block; font: 900 30px/1 var(--display); color: var(--gold); }
.car__stats span { font-size: 12px; color: var(--muted); }

/* ---------- hype ---------- */
.hype .pin { background: #000; }
.hype__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hype__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.45) 55%, rgba(0,0,0,.2)), linear-gradient(0deg, rgba(0,0,0,.7), transparent 40%); }
.hype__nums { position: absolute; z-index: 2; left: var(--gut); top: 50%; transform: translateY(-46%); display: grid; gap: clamp(10px, 2.4vh, 28px); }
.num { margin: 0; opacity: 0; }
.num b { display: block; font: 900 clamp(84px, 11vw, 200px)/.8 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.num span { font: italic 400 clamp(18px, 1.7vw, 26px)/1.2 var(--serif); color: var(--paper); }
.num em { font-style: normal; color: var(--text); font-family: var(--sans); font-weight: 800; }
.hype__crown { position: absolute; z-index: 1; right: -2vw; bottom: -4vh; margin: 0; font: 900 clamp(120px, 22vw, 420px)/.8 var(--display); color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.35); pointer-events: none; }
.tracks { position: relative; padding: clamp(70px, 14vh, 140px) 0 clamp(70px, 12vh, 120px); background: #050304; overflow: hidden; }
.tracks > .tag, .tracks__title { padding: 0 var(--gut); }
.tracks__title { margin: 12px 0 30px; font: 900 clamp(56px, 8vw, 140px)/.86 var(--display); text-transform: uppercase; }
.tracks__row { display: flex; gap: 18px; padding: 0 var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tracks__row::-webkit-scrollbar { display: none; }
.trk { flex: none; width: clamp(260px, 30vw, 440px); scroll-snap-align: start; border: 0; padding: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.trk__img { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; }
.trk__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.trk__img::after { content: '▶'; position: absolute; left: 14px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); font-size: 16px; }
.trk:hover .trk__img img { transform: scale(1.06); }
.trk__t { display: block; margin-top: 12px; font: 900 clamp(24px, 2.2vw, 34px)/1 var(--display); text-transform: uppercase; }
.trk__m { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }

/* ---------- Shanpana Ruke Na ---------- */
.ruke .pin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 4vw, 70px); padding: calc(var(--led-h) + 3vh) var(--gut) 3vh;
  background: radial-gradient(ellipse 60% 70% at 25% 50%, #3a0a2c, #050304 70%); perspective: 1400px; }
.ruke__glow { position: absolute; left: 10%; top: 20%; width: 40vw; height: 60vh; border-radius: 50%; background: radial-gradient(#ff4fd0, transparent 65%); opacity: .25; filter: blur(40px); pointer-events: none; }
.ruke__poster { position: relative; margin: 0; justify-self: end; height: min(82svh, 860px); aspect-ratio: 2000 / 2498; border-radius: 8px; overflow: hidden; transform-style: preserve-3d;
  box-shadow: 0 0 0 6px var(--paper), 0 50px 120px rgba(0,0,0,.85), 0 0 160px rgba(255,79,208,.25); }
.ruke__poster img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 30%; }
.ruke__info { max-width: 640px; }
.ruke__title { margin: 12px 0 2px; font: 400 clamp(56px, 7vw, 120px)/1 var(--mr); }
.ruke__title b { font: 900 1.02em/1 var(--display); color: #ff4fd0; letter-spacing: .01em; }
.ruke__sub { margin: 0; font: 800 clamp(16px, 1.6vw, 22px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.ruke__credits { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: clamp(14px, 3vh, 28px) 0; }
.ruke__credits div { margin: 0; }
.ruke__credits dt { font: 800 11px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.ruke__credits dd { margin: 4px 0 0; font: 900 clamp(22px, 2.2vw, 32px)/1 var(--display); text-transform: uppercase; }
.ruke__credits div:first-child dd { color: var(--gold); }
.ruke__runs { list-style: none; margin: 0 0 clamp(16px, 3vh, 28px); padding: 0; display: grid; gap: 8px; }
.ruke__runs li { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.12); }
.ruke__runs b { font: 900 22px/1 var(--display); text-transform: uppercase; }
.ruke__runs span { font-size: 14px; color: var(--muted); }
.ruke__runs .is-next b { color: #ff4fd0; }
.ruke__runs .is-next span { color: var(--text); }
.ticket { display: grid; grid-template-columns: 1fr auto; border-radius: 10px; overflow: hidden; background: var(--paper); color: #2a1a12; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.ticket > div { padding: 14px 18px; }
.ticket__date { margin: 0 0 10px; font: 900 clamp(20px, 2vw, 28px)/1 var(--display); text-transform: uppercase; }
.cd { display: flex; gap: 6px; font: 700 11px/1 var(--sans); }
.cd span { background: #120a0c; color: var(--muted); border-radius: 4px; padding: 6px 8px; }
.cd b { display: block; font: 900 22px/1 var(--display); color: var(--gold); margin-bottom: 2px; }
.ticket__book { display: grid; place-content: center; text-align: center; padding: 12px 24px; background: var(--velvet); color: var(--paper); text-decoration: none; font-size: 12px; border-left: 3px dashed rgba(244,234,214,.6); }
.ticket__book b { font: 900 21px/1 var(--display); text-transform: uppercase; }
.ticket__book:hover { background: var(--velvet-h); }

/* ---------- what people say ---------- */
.says .pin { display: grid; place-items: center; background: radial-gradient(ellipse 70% 60% at 50% 50%, #1b0d06, #050304 70%); }
.say { grid-area: 1 / 1; margin: 0; padding: 0 var(--gut); text-align: center; opacity: 0; max-width: 1400px; }
.say p { margin: 0; font: 900 clamp(54px, 8.6vw, 160px)/.88 var(--display); text-transform: uppercase; }
.say p::before { content: '“'; color: var(--gold); }
.say p::after { content: '”'; color: var(--gold); }
.say .w { display: inline-block; }
.say cite { display: block; margin-top: 3vh; font: italic 400 clamp(20px, 2vw, 30px)/1 var(--serif); color: var(--gold); }
.says__press { position: absolute; left: 0; right: 0; bottom: clamp(18px, 5vh, 48px); margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding: 0 var(--gut); opacity: 0; }
.says__press span { font: 900 clamp(18px, 1.8vw, 26px)/1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.says__press::before { content: 'Featured by'; width: 100%; text-align: center; font: 800 12px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }

/* ---------- partner + finale ---------- */
.partner { position: relative; min-height: 120svh; display: flex; align-items: flex-end; overflow: hidden; }
.partner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.partner__shade { position: absolute; inset: 0; background: linear-gradient(180deg, #050304 0%, rgba(5,3,4,.35) 30%, rgba(5,3,4,.55) 60%, #050304 100%); }
.partner__in { position: relative; z-index: 1; padding: 0 var(--gut) clamp(60px, 12vh, 130px); max-width: 1100px; }
.partner__logos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 clamp(26px, 6vh, 60px); }
.partner__logos span { font: 900 clamp(18px, 1.8vw, 26px)/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--paper); }
.partner__title { margin: 0; font: 900 clamp(64px, 10vw, 190px)/.84 var(--display); text-transform: uppercase; }
.partner__lede { margin: 18px 0 26px; max-width: 560px; font: italic 400 clamp(20px, 2vw, 28px)/1.25 var(--serif); color: var(--paper); }
.partner__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; padding: 16px 26px; border-radius: 99px; border: 1.5px solid rgba(244,234,214,.6); text-decoration: none;
  font: 900 18px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; transition: background .3s, color .3s, transform .3s; }
.btn:hover { transform: translateY(-2px); background: var(--paper); color: var(--ink); }
.btn--hot { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.foot { padding: clamp(70px, 14vh, 140px) var(--gut) 50px; text-align: center; background: #050304; }
.foot__big { margin: 0; font: 900 clamp(48px, 8vw, 150px)/.86 var(--display); text-transform: uppercase; color: var(--gold); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 30px 0; }
.foot__links a { font: 800 16px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); text-decoration: none; }
.foot__links a:hover { color: var(--gold); }
.foot__note { max-width: 620px; margin: 0 auto; font-size: 13px; color: var(--muted); }

/* ---------- player ---------- */
.player { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(5,3,4,.92); padding: 16px; }
.player[hidden] { display: none; }
.player__box { position: relative; width: min(100%, 420px); }
.player__box.is-wide { width: min(100%, 1100px); }
.player__media { border-radius: 12px; overflow: hidden; background: #000; }
.player__media iframe { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 84svh; border: 0; }
.player__box.is-wide iframe { aspect-ratio: 16 / 9; }
.player__close { position: absolute; right: 0; top: -46px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.5); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .led__track span { font-size: 15px; }
  .led__book { padding: 0 14px; font-size: 15px; }
  .hero__name { font-size: 30vw; transform: translateY(-75%); }
  .hero__danny { height: 74svh; }
  .hero__eyebrow { display: none; }
  .split .pin { flex-direction: column; }
  .split__half { padding-bottom: 22px; }
  .split__title { font-size: 44px; margin: 6px 0; }
  .split__by { font-size: 16px; }
  .split__vs { width: 56px; font-size: 34px; }
  .neon { font-size: 2.2vw; }
  .roll__fig { height: 46vh; bottom: 8vh; }
  .roll__sticky::after { height: 17vh; }
  .roll__card { left: 16px; right: 16px; top: auto; bottom: 58vh; transform: none; max-width: none; }
  .roll__name { font-size: 34px; }
  .roll__head { top: calc(var(--led-h) + 14px); }
  .roll__title { font-size: 32px; }
  .roll__burst { left: 50%; } .roll__beam { width: 90vw; margin-left: -45vw; }
  .jcard { width: 68vw; } .jcard--big { width: 78vw; } .jcard--text { width: 72vw; }
  .car__frame { height: 64svh; }
  .car__stats p { min-width: 0; flex: 1; padding: 8px 10px; }
  .car__stats b { font-size: 22px; }
  .hype__nums { top: auto; bottom: 8vh; transform: none; }
  .ruke .pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 14px; padding-top: calc(var(--led-h) + 12px); }
  .ruke__poster { justify-self: center; height: 34svh; }
  .ruke__title { font-size: 44px; }
  .ruke__credits { margin: 10px 0; gap: 6px 18px; }
  .ruke__credits dd { font-size: 18px; }
  .ruke__runs { margin-bottom: 12px; }
  .ruke__runs li { grid-template-columns: 96px 1fr; padding: 6px 0; }
  .ruke__runs b { font-size: 16px; }
  .ruke__runs span { font-size: 12px; }
  .ticket > div { padding: 10px 12px; }
  .cd b { font-size: 17px; }
  .ticket__book { padding: 10px 14px; }
}

/* ---------- reduced motion: no pinning, everything readable in order ---------- */
.rm .pin { position: relative; height: auto; min-height: 100svh; }
.rm .hero, .rm .bridge, .rm .split, .rm .nd, .rm .journey, .rm .pune, .rm .car, .rm .hype, .rm .ruke, .rm .says, .rm .roll { height: auto; }
.rm .bridge .pin { display: flex; flex-direction: column; gap: 6vh; padding: 14vh 0; }
.rm .bl, .rm .say, .rm .num, .rm .pune__cap, .rm .car__stats p, .rm .says__press { opacity: 1; }
.rm .says .pin { display: flex; flex-direction: column; gap: 8vh; padding: 14vh 0; }
.rm .beat { position: relative; opacity: 1; height: 100svh; }
.rm .knock { display: none; }
.rm .journey__track { flex-wrap: wrap; width: auto; padding: 14vh var(--gut); }
.rm .car__pop { display: none; }
@media (prefers-reduced-motion: reduce) { .led__track { animation: none; } }

/* ---------- on tour ---------- */
.tour { height: 560vh; }
.tour .pin { background: #000; }
.tour__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.tour__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,3,4,.92), rgba(5,3,4,.55) 50%, rgba(5,3,4,.2)), linear-gradient(0deg, rgba(5,3,4,.7), transparent 40%); }
.tour__title { position: absolute; z-index: 2; left: var(--gut); top: calc(var(--led-h) + 3vh); margin: 0; font: 900 clamp(70px, 12vw, 230px)/.8 var(--display); text-transform: uppercase; color: var(--gold); }
.tour__list { position: absolute; z-index: 2; left: var(--gut); bottom: clamp(20px, 6vh, 60px); margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(4px, 1vh, 12px); }
.city { position: relative; display: flex; align-items: baseline; gap: 18px; }
.city b { width: 150px; flex: none; font: 800 15px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.city span { font: 900 clamp(34px, 5vw, 86px)/.92 var(--display); text-transform: uppercase; }
.city .stamp { position: relative; right: auto; top: auto; align-self: center; font-style: normal; font-size: 18px; transform: rotate(-8deg); opacity: 1; }
.rm .tour { height: auto; }
@media (max-width: 760px) { .city b { width: 92px; font-size: 12px; } .city span { font-size: 30px; } .city .stamp { font-size: 13px; padding: 4px 8px; } }
.car__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) brightness(.55) contrast(1.1); }
.ticket__venue { margin: -4px 0 10px; font-size: 12px; font-weight: 700; color: #6b4a3a; }
/* hero: background out of focus so only the cut-out Danny reads sharp */
.hero__bg { filter: none; object-position: 50% 8%; }
.hero__shade { background:
  radial-gradient(ellipse 34% 52% at 50% 92%, rgba(5,3,4,.9), rgba(5,3,4,0) 100%),
  radial-gradient(ellipse 60% 70% at 50% 45%, rgba(0,0,0,0), rgba(0,0,0,.55) 100%),
  linear-gradient(180deg, rgba(5,3,4,.5), rgba(5,3,4,0) 30%, rgba(5,3,4,0) 60%, rgba(5,3,4,.95)); }
.roll__fig { height: calc(60vh * var(--h, 1)); }
@media (max-width: 760px) { .roll__fig { height: calc(46vh * var(--h, 1)); } }
.nd__bg { filter: none; }
.neon { transform: none; font-size: clamp(8px, 1.42vw, 24px); }
@media (max-width: 760px) { .neon { font-size: 2.1vw; } }
.roll__final { padding: 0 16px; font-size: clamp(26px, 3vw, 48px); }
.car__pop { transform-origin: 50% 100%; }
@media (max-width: 760px) { .knock span { font-size: 23vw; } .beat__word { font-size: 30vw; } }

/* performance: compositor-only layers for everything that moves */
.pin { contain: layout paint; }
.hero__bg, .hero__danny, .hero__name, .bl, .beat, .beat video, .knock span, .car__frame, .car__pop, .journey__track, .ruke__poster, .split__half, .neon { will-change: transform, opacity; backface-visibility: hidden; }

/* ---------- the two shows, one after the other ---------- */
.shows { height: 330vh; }
.shows .pin { background: radial-gradient(ellipse 70% 70% at 30% 50%, #0d1a3a, #050304 70%); perspective: 1500px; transition: background .6s; }
.shows .pin.is-sr { background: radial-gradient(ellipse 70% 70% at 30% 50%, #3a0a2c, #050304 70%); }
.shows__glow { position: absolute; left: 6%; top: 18%; width: 44vw; height: 64vh; border-radius: 50%; background: radial-gradient(#39a0ff, transparent 65%); opacity: .22; filter: blur(40px); pointer-events: none; transition: background .6s; }
.shows .pin.is-sr .shows__glow { background: radial-gradient(#ff4fd0, transparent 65%); }
.show { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 4vw, 70px); padding: calc(var(--led-h) + 3vh) var(--gut) 3vh; transform-style: preserve-3d; }
.show--sr { opacity: 0; pointer-events: none; }
.show__poster { margin: 0; justify-self: end; height: min(80svh, 860px); aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 6px var(--paper), 0 50px 120px rgba(0,0,0,.85); will-change: transform, opacity; }
.show__poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.show--nd .show__poster { box-shadow: 0 0 0 6px var(--paper), 0 50px 120px rgba(0,0,0,.85), 0 0 160px rgba(57,160,255,.3); }
.show--sr .show__poster { box-shadow: 0 0 0 6px var(--paper), 0 50px 120px rgba(0,0,0,.85), 0 0 160px rgba(255,79,208,.3); }
.show__info { max-width: 640px; }
.show__no { margin: 0; font: 800 15px/1 var(--display); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.show__title { margin: 14px 0 12px; font: 900 clamp(56px, 7.4vw, 132px)/.86 var(--display); text-transform: uppercase; }
.show__title small { font: italic 400 .42em/1 var(--serif); text-transform: none; color: var(--paper); }
.show--nd .show__title { color: #ffd34d; text-shadow: 0 0 40px rgba(255,180,0,.35); }
.show--sr .show__title { font-family: var(--mr); font-weight: 400; line-height: 1.05; text-transform: none; }
.show--sr .show__title b { font: 900 1em/1 var(--display); color: #ff4fd0; }
.show__by { margin: 0 0 6px; font: italic 400 clamp(20px, 2vw, 30px)/1.25 var(--serif); color: var(--paper); }
.show__credit { margin: 0 0 22px; font: 800 13px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.show__go { display: inline-flex; padding: 14px 24px; border-radius: 99px; background: var(--gold); color: var(--ink); text-decoration: none; font: 900 16px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.show--sr .show__go { background: #ff4fd0; color: #fff; }

/* ---------- the bow ---------- */
.bow { height: 260vh; }
.bow .pin { background: #000; }
.bow__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bow__flash { position: absolute; inset: 0; z-index: 5; background: radial-gradient(ellipse at 50% 60%, #fff, #ffe7a3 40%, rgba(255,200,120,0) 75%); opacity: 0; pointer-events: none; }
.bow__word { position: absolute; z-index: 1; left: 0; right: 0; top: 46%; margin: 0; transform: translateY(-50%); display: flex; justify-content: center; gap: 3vw; pointer-events: none;
  font: 900 clamp(150px, 27vw, 500px)/.8 var(--display); letter-spacing: -.02em; }
.bow__word span:first-child { color: var(--gold); }
.bow__word span:last-child { color: transparent; -webkit-text-stroke: clamp(2px, .3vw, 5px) var(--paper); }
.bow__cast { position: absolute; z-index: 2; left: 50%; bottom: 0; width: min(88vw, 128svh); height: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.bow .confetti { z-index: 3; }
.bow__line { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--led-h) + 5vh); margin: 0; text-align: center; padding: 0 var(--gut);
  font: italic 400 clamp(26px, 3vw, 48px)/1.1 var(--serif); color: var(--paper); text-shadow: 0 6px 40px #000; }

/* ---------- car: one sharp frame ---------- */
.car__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.car__still { filter: none; }

/* ---------- tighter scenes: every scroll tick moves something ---------- */
.hero { height: 200vh; }
.bridge { height: calc(var(--n, 3) * 62vh + 50vh); }
.nd { height: 200vh; }
.journey { height: 440vh; }
.pune { height: 470vh; }
.car { height: 240vh; }
.tour { height: 330vh; }
.hype { height: 220vh; }
.ruke { height: 220vh; }
.says { height: 340vh; }

@media (max-width: 760px) {
  .show { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; gap: 14px; padding-top: calc(var(--led-h) + 14px); }
  .show__poster { justify-self: center; height: 44svh; }
  .show__title { font-size: 46px; margin: 8px 0; }
  .show--sr .show__title { font-size: 42px; }
  .show__by { font-size: 18px; }
  .show__credit { font-size: 11px; margin-bottom: 14px; }
  .bow__word { top: 40%; font-size: 30vw; }
  .bow__cast { width: 118vw; }
}
.rm .shows, .rm .bow { height: auto; }
.rm .show { position: relative; min-height: 100svh; }
.rm .show--sr { opacity: 1; pointer-events: auto; }
.beat--hall video { position: absolute; inset: 0; }
.says__vid { position: absolute; z-index: 2; right: clamp(16px, 4vw, 70px); bottom: clamp(70px, 14vh, 150px); width: clamp(150px, 15vw, 250px); margin: 0; transform: rotate(4deg); }
.says__vid video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 4px var(--paper), 0 30px 60px rgba(0,0,0,.7); }
.says__vid figcaption { margin-top: 10px; font: 800 11px/1.3 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); text-align: center; }
@media (max-width: 760px) { .says__vid { width: 120px; top: calc(var(--led-h) + 14px); bottom: auto; right: 12px; } }
.hype__card { position: absolute; z-index: 2; margin: 0; width: clamp(150px, 17vw, 280px); opacity: 0; }
.hype__card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 5px var(--paper), 0 30px 70px rgba(0,0,0,.75); }
.hype__card figcaption { margin-top: 10px; font: 800 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-align: center; }
.hype__card--a { right: clamp(170px, 22vw, 380px); top: calc(var(--led-h) + 8vh); }
.hype__card--b { right: clamp(16px, 4vw, 70px); top: calc(var(--led-h) + 22vh); }
@media (max-width: 760px) { .hype__card { width: 34vw; } .hype__card--a { right: 40vw; top: calc(var(--led-h) + 12px); } .hype__card--b { right: 12px; top: calc(var(--led-h) + 40px); } .hype__nums { bottom: 4vh; } .num b { font-size: 64px; } }
.rm .hype__card { opacity: 1; }
.bow__cast { width: min(66vw, 96svh); }
.bow__line { top: auto; bottom: clamp(18px, 4vh, 40px); z-index: 4; }
@media (max-width: 760px) { .bow__cast { width: 104vw; } }
.tour__sub { position: absolute; z-index: 2; left: var(--gut); top: calc(var(--led-h) + 3vh + clamp(60px, 10vw, 190px)); margin: 0; font: italic 400 clamp(20px, 2.2vw, 34px)/1.2 var(--serif); color: var(--paper); }
.tour__title { font-size: clamp(60px, min(12vw, 15vh), 230px); }
.tour__sub { top: calc(var(--led-h) + 3vh + clamp(52px, min(10vw, 12.5vh), 190px)); }
.tour__list { bottom: clamp(14px, 4vh, 50px); gap: clamp(2px, .6vh, 10px); }
.city span { font-size: clamp(24px, min(5vw, 6.4vh), 86px); }
.city .stamp { font-size: clamp(11px, 1.8vh, 18px); padding: 4px 10px; }
/* bridges with a real moment behind the words */
.bridge__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: .42; }
.bridge .pin:has(.bridge__bg)::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(5,3,4,.35), rgba(5,3,4,.9)); }
.bridge .bl { position: relative; z-index: 1; text-shadow: 0 6px 50px rgba(0,0,0,.7); }

/* ---------- car: DANNY! DANNY! and the photos of that night ---------- */
.car { height: 280vh; }
.car__back { gap: .5vh; }
.car__back span { font-size: clamp(80px, min(13vw, 22vh), 250px); line-height: .82; }
.car__back span:nth-child(1) { color: var(--gold); }
.car__back span:nth-child(2) { color: transparent; -webkit-text-stroke: 3px rgba(244,234,214,.55); }
.car__back span:nth-child(3) { color: var(--hot); opacity: .85; }
.car__photos { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.car__ph { position: absolute; margin: 0; opacity: 0; }
.car__ph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 5px var(--paper), 0 30px 60px rgba(0,0,0,.75); }
.car__ph--1 { left: 6vw; top: calc(var(--led-h) + 6vh); width: clamp(140px, 15vw, 250px); aspect-ratio: 3 / 4; }
.car__ph--2 { left: 12vw; bottom: 7vh; width: clamp(120px, 12vw, 200px); aspect-ratio: 9 / 16; }
.car__ph--3 { right: 6vw; top: calc(var(--led-h) + 5vh); width: clamp(150px, 16vw, 270px); aspect-ratio: 4 / 5; }
.car__ph--4 { right: 13vw; bottom: 9vh; width: clamp(170px, 19vw, 320px); aspect-ratio: 16 / 9; }
.car__ph--5 { left: 25vw; top: 50%; width: clamp(130px, 13vw, 220px); aspect-ratio: 4 / 3; }
.car__frame, .car__pop { z-index: 2; }
.car__pop { z-index: 3; }
.car__tag { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(14px, 3vh, 30px); margin: 0; text-align: center; font: 800 14px/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); opacity: 0; }
@media (max-width: 760px) {
  .car__ph--1 { left: 3vw; width: 30vw; } .car__ph--3 { right: 3vw; width: 30vw; }
  .car__ph--2, .car__ph--5 { display: none; } .car__ph--4 { right: 4vw; bottom: 6vh; width: 44vw; }
  .car__back span { font-size: 17vw; }
}
.rm .car__ph, .rm .car__tag { opacity: 1; }

/* ---------- night one: the first show ---------- */
.first { height: 640vh; }
.first .pin { background: #000; }
.fb { position: absolute; inset: 0; overflow: hidden; opacity: 0; }
.fb:first-child { opacity: 1; }
.fb__m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.15) 55%, rgba(0,0,0,0)), linear-gradient(0deg, rgba(0,0,0,.6), transparent 45%); }
.fb__cap { position: absolute; z-index: 2; left: var(--gut); bottom: clamp(36px, 10vh, 110px); max-width: min(820px, 88vw); }
.fb__cap--end { left: 0; right: 0; max-width: none; text-align: center; bottom: auto; top: 50%; transform: translateY(-50%); }
.fb__line { margin: 12px 0 0; font: 900 clamp(48px, min(7.4vw, 13vh), 136px)/.86 var(--display); text-transform: uppercase; text-shadow: 0 6px 50px rgba(0,0,0,.8); }
.fb__line--q { font: italic 400 clamp(46px, min(6.6vw, 12vh), 120px)/1 var(--serif); text-transform: none; color: var(--gold); }
.fb__sub { margin: 10px 0 0; font: italic 400 clamp(18px, 1.8vw, 26px)/1.2 var(--serif); color: var(--paper); }
.fb__dots { position: absolute; z-index: 3; right: var(--gut); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fb__dots li { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .3s, transform .3s; }
.fb__dots li.on { background: var(--gold); transform: scale(1.6); }
.rm .first { height: auto; }
.rm .fb { position: relative; height: 100svh; opacity: 1; }
/* hero name: sized by height too, so DANNY never slides under the LED bar */
.hero__name { font-size: clamp(100px, min(26vw, 34vh), 470px); top: calc(50% + var(--led-h) / 2); transform: translateY(-55%); }
@media (max-width: 760px) { .hero__name { font-size: min(30vw, 30vh); transform: translateY(-70%); } }

/* ---------- the whole studio: gallery ---------- */
.gallery { position: relative; padding: clamp(80px, 14vh, 150px) var(--gut) clamp(60px, 10vh, 110px); background: #050304; }
.gallery__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.gallery__title { margin: 12px 0 0; font: 900 clamp(52px, 8vw, 140px)/.86 var(--display); text-transform: uppercase; }
.gallery__title span { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; }
.chip { border: 1.5px solid rgba(244,234,214,.35); background: transparent; color: var(--paper); border-radius: 99px; padding: 10px 16px; cursor: pointer;
  font: 800 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; transition: background .25s, color .25s, border-color .25s; }
.chip:hover { border-color: var(--gold); }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.gallery__hint { margin: 22px 0 0; font: italic 400 18px/1 var(--serif); color: var(--muted); }
.grid { columns: 4 260px; column-gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(24px, 4vh, 44px); }
.tile { position: relative; display: block; break-inside: avoid; margin: 0 0 clamp(10px, 1.4vw, 18px); border-radius: 12px; overflow: hidden; background: #140b0c;
  opacity: 0; transform: translateY(60px) scale(.96); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 60ms); }
.tile.in { opacity: 1; transform: none; }
.tile.is-off { display: none; }
.tile img { width: 100%; height: auto; display: block; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .5s; }
.tile:hover img { transform: scale(1.06); }
.tile__cat { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 99px; background: rgba(5,3,4,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 800 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.tile:hover .tile__cat, .tile:focus-visible .tile__cat { opacity: 1; transform: none; }
.pswp__caption { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; padding: 0 16px; font: italic 400 18px/1.3 var(--serif); color: var(--paper); }
@media (max-width: 760px) { .grid { columns: 2 140px; } .tile__cat { opacity: 1; transform: none; font-size: 9px; } }
.rm .tile { opacity: 1; transform: none; }

/* ---------- Germany: the flight, then five cities ---------- */
.flight { position: relative; height: 640vh; }
.flight .pin { overflow: hidden; background: #03040b; }
.fl__sky { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 80% at 70% 0%, #17224d 0%, #080b1e 45%, #03040b 80%); }
.fl__stars { position: absolute; inset: -10%; opacity: .7; will-change: transform;
  background-image: radial-gradient(1.6px 1.6px at 30px 40px, rgba(255,255,255,.9) 50%, transparent 52%), radial-gradient(1px 1px at 120px 90px, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 200px 170px, rgba(255,240,210,.8) 50%, transparent 52%), radial-gradient(1px 1px at 80px 210px, rgba(255,255,255,.6) 50%, transparent 52%), radial-gradient(1.8px 1.8px at 170px 20px, rgba(255,255,255,.85) 50%, transparent 52%);
  background-size: 240px 240px; }
.fl__cloud { position: absolute; width: 80vw; height: 45vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(190,205,255,.13), rgba(190,205,255,.04) 60%, transparent); will-change: transform; }
.fl__cloud--1 { top: 4%; left: 50%; } .fl__cloud--2 { top: 48%; left: 10%; width: 100vw; } .fl__cloud--3 { top: 72%; left: 70%; }
.fl__card { position: absolute; inset: 0; z-index: 3; margin: 0; display: grid; place-content: center; text-align: center; gap: 2vh; opacity: 0; pointer-events: none; }
.fl__card span { font: 900 clamp(64px, min(12vw, 20vh), 220px)/.85 var(--display); text-transform: uppercase; color: var(--paper); }
.fl__arc { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; will-change: transform, opacity; }
.fl__path { fill: none; stroke: rgba(244,234,214,.28); stroke-width: 3; stroke-dasharray: 2 16; stroke-linecap: round; }
.fl__glow { fill: none; stroke: rgba(242,191,82,.22); stroke-width: 18; stroke-linecap: round; }
.fl__trail { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.fl__dot { fill: var(--gold); }
.fl__ring { fill: none; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: flRing 1.8s ease-out infinite; }
@keyframes flRing { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.fl__lbl { font: 900 38px/1 var(--display); letter-spacing: .14em; fill: var(--paper); }
.fl__plane { fill: var(--paper); }
.fl__head { position: absolute; z-index: 3; right: var(--gut); bottom: 9vh; margin: 0; text-align: right; opacity: 0; }
.fl__head .tag { display: block; margin-bottom: 2vh; }
.fl__head b, .fl__end b { display: block; font: 900 clamp(60px, min(10vw, 17vh), 190px)/.86 var(--display); text-transform: uppercase; color: var(--paper); }
.fl__hot { color: var(--gold) !important; }
.de { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.de__word { position: absolute; left: 50%; bottom: 1vh; margin: 0; transform: translateX(-50%); white-space: nowrap; font: 900 clamp(80px, 16vw, 300px)/1 var(--display); text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(244,234,214,.1); pointer-events: none; }
.de__box { position: absolute; aspect-ratio: 1; width: min(46vw, 76vh); right: 6vw; top: calc(50% + var(--led-h) / 2); transform: translateY(-50%);
  background: linear-gradient(rgba(244,234,214,.06) 1px, transparent 1px) 0 0 / 10% 10%, linear-gradient(90deg, rgba(244,234,214,.06) 1px, transparent 1px) 0 0 / 10% 10%; }
.de__box::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(242,191,82,.18); box-shadow: inset 0 0 120px rgba(23,34,77,.9); }
.de__map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.de__base { fill: none; stroke: rgba(244,234,214,.3); stroke-width: 3; stroke-dasharray: 2 14; stroke-linecap: round; }
.de__line { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; }
.de__dot { fill: var(--paper); } .de__dot.on { fill: var(--hot); }
.de__plane { fill: var(--paper); opacity: 0; }
.de__cities { margin: 0; padding: 0; list-style: none; }
.dc { position: absolute; transform: translate(-50%, calc(-100% - 22px)); text-align: center; white-space: nowrap; opacity: 0; }
.dc b { display: block; font: 900 clamp(22px, 2.6vw, 44px)/.9 var(--display); text-transform: uppercase; color: var(--paper); text-shadow: 0 4px 18px #000; }
.dc span { display: block; margin-top: 4px; font: 800 11px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.dc .stamp { position: absolute; left: 50%; top: -8px; right: auto; font-size: clamp(12px, 1.2vw, 18px); padding: 4px 9px; border-width: 3px; transform: translate(-10%, -100%) rotate(-10deg) scale(2.4); }
.de__photos { position: absolute; left: 7vw; top: calc(50% + var(--led-h) / 2); width: min(30vw, 50vh); aspect-ratio: 4 / 5; margin-top: calc(min(30vw, 50vh) * -.625); }
.dp { position: absolute; inset: 0; margin: 0; padding: 10px 10px 46px; background: #f6efe4; border-radius: 4px; box-shadow: 0 30px 70px rgba(0,0,0,.7); opacity: 0; will-change: transform, opacity; }
.dp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: italic 400 24px/1 var(--serif); color: #1a1414; }
.fl__end { position: absolute; inset: 0; z-index: 4; margin: 0; display: grid; place-content: center; text-align: center; pointer-events: none; opacity: 0; }
.fl__end b { font-size: clamp(64px, min(12vw, 20vh), 230px); text-shadow: 0 12px 50px #000, 0 0 2px #000; }
@media (max-width: 760px) {
  .fl__head { right: auto; left: var(--gut); bottom: auto; top: calc(var(--led-h) + 5vh); text-align: left; }
  .fl__lbl { font-size: 54px; }
  .de__box { width: min(86vw, 44vh); right: auto; left: 50%; top: calc(var(--led-h) + 6vh); transform: translateX(-50%); }
  .de__photos { left: 50%; top: auto; bottom: 4vh; width: min(50vw, 30vh); margin: 0 0 0 calc(min(50vw, 30vh) * -.5); }
  .dp { padding: 6px 6px 32px; } .dp figcaption { font-size: 17px; bottom: 8px; }
  .dc span { font-size: 9px; } .de__word { bottom: auto; top: 50%; }
}
.rm .flight { height: auto; } .rm .flight .pin { position: relative; height: 100vh; } .rm .de, .rm .dc, .rm .dp, .rm .fl__end { opacity: 1; }
.rm .dc .stamp { opacity: 1; transform: translate(-10%, -100%) rotate(-10deg); }

/* ---------- what people say: a tunnel of voices, then the wall ---------- */
.says { height: 460vh; }
.says .pin { display: block; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 50%, #1b0d06, #050304 70%); }
.says__core { position: absolute; inset: 0; clip-path: inset(calc(50% - 15vh) calc(50% - 8.5vh) round 14px); will-change: clip-path; }
.says__core video { width: 100%; height: 100%; object-fit: cover; display: block; }
.says__dim { position: absolute; inset: 0; background: #050304; opacity: 0; pointer-events: none; }
.tunnel { position: absolute; inset: 0; perspective: 1000px; transform-style: preserve-3d; pointer-events: none; }
.tq { position: absolute; left: 50%; top: 50%; white-space: nowrap; font: 900 clamp(26px, 3vw, 54px)/1 var(--display); text-transform: uppercase; color: var(--paper); opacity: 0; visibility: hidden; will-change: transform, opacity; text-shadow: 0 6px 30px rgba(0,0,0,.8); }
.tq:nth-child(3n) { color: var(--gold); } .tq:nth-child(4n) { color: var(--hot); }
.wall { position: absolute; inset: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 1.6vh 2.4vw;
  padding: calc(var(--led-h) + 3vh) max(var(--gut), calc(50vw - 640px)) 15vh; perspective: 1200px; text-align: center; }
.wq { font: 800 clamp(15px, min(1.7vw, 2.8vh), 28px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--paper); opacity: 0; will-change: transform, opacity; }
.wq--m { font-size: clamp(18px, min(2.2vw, 3.4vh), 36px); }
.wq--l { font-size: clamp(22px, min(3vw, 4.6vh), 50px); }
.wq--xl { font-size: clamp(30px, min(4.6vw, 7vh), 82px); line-height: .9; }
.wq--gold { color: var(--gold); } .wq--hot { color: var(--hot); }
.wq::before { content: '\201C'; color: var(--muted); } .wq::after { content: '\201D'; color: var(--muted); }
@media (max-width: 760px) {
  .wall { gap: 1vh 3vw; padding-bottom: 17vh; }
  .wq { font-size: clamp(12px, 3.4vw, 15px); } .wq--m { font-size: clamp(14px, 4vw, 18px); } .wq--l { font-size: clamp(17px, 5vw, 22px); } .wq--xl { font-size: clamp(24px, 7.4vw, 32px); }
  .tq { font-size: 22px; }
}
.rm .says { height: auto; } .rm .says .pin { position: relative; height: 100vh; } .rm .wq { opacity: 1; } .rm .says__core { clip-path: none; } .rm .says__dim { opacity: .8; } .rm .tunnel { display: none; }

/* bridge lines never overflow short screens; roll heading on one line per phrase */
.bl { font-size: clamp(54px, min(11.5vw, 18vh), 210px); }
.roll__head { max-width: min(900px, 70vw); }
.roll__title span { white-space: nowrap; }

/* ---------- the map of India: show by show, city by city ---------- */
.imap { position: relative; height: 820vh; }
.imap .pin { background: radial-gradient(ellipse 80% 70% at 50% 55%, #0d1430 0%, #060812 60%, #030407 100%); }
.im__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.im__land { fill: rgba(244,234,214,.035); stroke: rgba(244,234,214,.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.im__india { fill: rgba(242,191,82,.07); stroke: var(--gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0; }
.im__mh { fill: rgba(193,29,50,.32); stroke: #ff6b7d; stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: 0; }
.im__route { fill: none; stroke: var(--gold); stroke-linecap: round; }
.im__pin { opacity: 0; }
.im__pin circle.dot { fill: var(--paper); }
.im__pin circle.ring { fill: none; stroke: var(--gold); }
.im__pin.on circle.dot { fill: var(--gold); }
.im__pin text { font-family: var(--display); font-weight: 900; text-transform: uppercase; fill: var(--paper); paint-order: stroke; stroke: #05060d; letter-spacing: .02em; }
.im__pin text tspan { fill: var(--gold); }
.im__word { position: absolute; left: 0; right: 0; bottom: 2vh; margin: 0; text-align: center; pointer-events: none; }
.im__word span { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; font: 900 clamp(70px, 14vw, 260px)/1 var(--display); text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(244,234,214,.12); opacity: 0; }
.im__head { position: absolute; z-index: 3; left: var(--gut); top: calc(var(--led-h) + 7vh); margin: 0; opacity: 0; }
.im__head .tag { display: block; margin-bottom: 2vh; }
.im__head b, .im__end b { display: block; font: 900 clamp(48px, min(7vw, 13vh), 140px)/.88 var(--display); text-transform: uppercase; color: var(--paper); }
.im__card { position: absolute; z-index: 3; left: var(--gut); bottom: 8vh; display: grid; gap: 6px; padding: 20px 26px 22px; min-width: 300px; max-width: 420px; background: var(--paper); color: #1a1010;
  border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); opacity: 0; transform-origin: left bottom; }
.im__no { font: 800 12px/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--velvet); }
.im__d { font: 900 clamp(38px, 4vw, 60px)/.9 var(--display); text-transform: uppercase; }
.im__v { font: italic 400 clamp(20px, 1.8vw, 26px)/1.15 var(--serif); }
.im__n { font: 600 14px/1.35 var(--sans); color: #5a4840; }
.im__n:empty { display: none; }
.im__end { position: absolute; z-index: 4; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; pointer-events: none; opacity: 0; }
.im__end b { font-size: clamp(56px, min(10vw, 17vh), 200px); text-shadow: 0 12px 50px #000, 0 0 2px #000; }
@media (max-width: 760px) {
  .imap { height: 760vh; }
  .im__card { left: 50%; bottom: 3vh; min-width: 0; width: calc(100vw - 2 * var(--gut)); max-width: none; transform: translateX(-50%); padding: 14px 18px 16px; }
  .im__d { font-size: 34px; } .im__v { font-size: 19px; }
  .im__word { bottom: auto; top: 46%; } .im__word span { font-size: 17vw; }
}
.rm .imap { height: auto; } .rm .imap .pin { position: relative; height: 100vh; } .rm .im__india, .rm .im__mh, .rm .im__pin, .rm .im__end { opacity: 1; }

/* the world under the flight */
.fl__land { fill: rgba(244,234,214,.05); stroke: rgba(244,234,214,.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fl__in, .fl__de { fill: rgba(242,191,82,.22); stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.de__outline { fill: rgba(242,191,82,.07); stroke: rgba(242,191,82,.55); stroke-width: 2; stroke-linejoin: round; }
@media (min-width: 761px) { .fl__head { right: auto; left: var(--gut); text-align: left; } }
/* journey cards fit short screens (e.g. a 1400x600 laptop window) */
@media (min-width: 761px) {
  .jcard { width: clamp(200px, min(24vw, (100svh - var(--led-h) - 230px) * .8), 380px); }
  .jcard--big { width: clamp(230px, min(32vw, (100svh - var(--led-h) - 250px) * .8), 520px); }
  .jcard__d { font-size: clamp(40px, min(4.6vw, 9vh), 76px); }
}

/* ---------- studio.html: act cards ---------- */
.act .pin { background: radial-gradient(ellipse 75% 65% at 50% 45%, #3a0610 0%, #12040a 55%, #050304 100%); }
.bl--act { display: grid; justify-items: center; gap: 1.6vh; }
.bl--act i { font: italic 400 clamp(110px, min(22vw, 36vh), 380px)/.8 var(--serif); color: var(--gold); text-transform: none; letter-spacing: .02em; text-shadow: 0 0 60px rgba(242,191,82,.35); }
.bl--act small { font: 800 clamp(13px, 1.2vw, 18px)/1 var(--display); letter-spacing: .42em; text-transform: uppercase; color: var(--gold); }
.bl--act span { font: 900 clamp(46px, min(8vw, 13vh), 150px)/.9 var(--display); text-transform: uppercase; color: var(--paper); }

/* Germany scene without the home-show cards (6 Nov) */
.flight { height: 560vh; }
/* India map: 15 shows instead of 10 (9 Nov) */
.imap { height: 1060vh; }
@media (max-width: 760px) { .imap { height: 980vh; } }