/* ==========================================================================
   Piyush Mehta — One Night
   Dark club palette; each vibe swaps the two "lighting gel" colours (--a, --b).
   ========================================================================== */

@property --a { syntax: '<color>'; inherits: true; initial-value: #ff6a3d; }
@property --b { syntax: '<color>'; inherits: true; initial-value: #ff2e88; }

:root {
  --bg: #060507;
  --bg-2: #0d0b0f;
  --panel: #121015;
  --panel-2: #19161d;
  --line: rgba(244, 239, 230, 0.12);
  --line-2: rgba(244, 239, 230, 0.22);
  --ink: #f4efe6;
  --ink-2: rgba(244, 239, 230, 0.72);
  --ink-3: rgba(244, 239, 230, 0.48);
  --on-a: #0b0a0c;
  --a: #ff6a3d;
  --b: #ff2e88;
  --kick: 0;
  --f-display: 'Anybody', 'Archivo', system-ui, sans-serif;
  --f-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --hud-h: 64px;
  --nav-h: 54px;
  --r: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  transition: --a 1.2s var(--ease), --b 1.2s var(--ease);
}
body[data-vibe="retro"]     { --a: #ff6a3d; --b: #ff2e88; }
body[data-vibe="bollywood"] { --a: #ffb000; --b: #e0115f; }
body[data-vibe="afro"]      { --a: #f2c14e; --b: #1fd18b; }
body[data-vibe="house"]     { --a: #3d7bff; --b: #b04dff; }
body { transition: --a 1.2s var(--ease), --b 1.2s var(--ease), background-color .9s ease, color .9s ease; }

*, *::before, *::after { box-sizing: border-box; }
/* clip, not hidden: hidden on html AND body turns body into a scroll box and breaks every sticky pin */
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-body); font-size: 17px; line-height: 1.55;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip;
}
img, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--a); color: var(--on-a); }
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); letter-spacing: .02em; }
.display { font-family: var(--f-display); }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
kbd { font-family: var(--f-mono); font-size: .78em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; margin: 0 2px; color: var(--ink-2); }

/* Logo as a mask so it can take any colour */
.logo-mask {
  display: block; aspect-ratio: 2207 / 1023; background: currentColor;
  -webkit-mask: url(../assets/brand/logo.svg?v=3) center / contain no-repeat;
  mask: url(../assets/brand/logo.svg?v=3) center / contain no-repeat;
}

/* ---------------------------------------------------------------- stage */
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; image-rendering: auto; background: var(--bg); }
.no-webgl #stage { background: radial-gradient(80% 60% at 50% -10%, color-mix(in srgb, var(--a) 35%, transparent), transparent 70%), radial-gradient(60% 50% at 80% 110%, color-mix(in srgb, var(--b) 25%, transparent), transparent 70%), var(--bg); }
.fx-grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.fx-flash { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 40%, var(--a), var(--b) 60%, transparent 85%); mix-blend-mode: screen; }

main { position: relative; z-index: 2; }
main:focus { outline: none; }
section { position: relative; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .3s, color .3s, box-shadow .3s, border-color .3s; }
.btn-solid { background: var(--a); color: var(--on-a); box-shadow: 0 0 0 0 var(--a); }
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 10px 40px -8px var(--a); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--a); color: var(--a); }
.btn-sm { height: 38px; padding: 0 18px; font-size: 12px; }
.btn-lg { height: 60px; padding: 0 34px; font-size: 14px; }
.link-btn { color: var(--a); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- cursor */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; mix-blend-mode: difference; }
.cursor-dot, .cursor-ring { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 6px; height: 6px; background: #fff; }
.cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.7); display: grid; place-items: center;
  transition: width .3s var(--ease), height .3s var(--ease), background-color .3s, border-color .3s; }
.cursor-label { font-style: normal; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .2s; }
.cursor.is-label .cursor-ring { width: 78px; height: 78px; background: #fff; border-color: #fff; }
.cursor.is-label .cursor-label { opacity: 1; }
.cursor.is-down .cursor-ring { width: 26px; height: 26px; }
.cursor { transition: opacity .2s; }
.cursor.is-hidden { opacity: 0; }
@media (pointer: coarse) { .cursor { display: none; } }
@media (pointer: fine) { body.has-cursor, body.has-cursor * { cursor: none !important; } }

/* ---------------------------------------------------------------- boot (no gate: the page powers on by itself) */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; translate: 0 34px; } to { opacity: 1; translate: 0 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- HUD */
.hud { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: var(--hud-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 var(--gutter);
  background: linear-gradient(to bottom, rgba(6,5,7,.7), rgba(6,5,7,0)); transition: color .9s, background .9s, transform .6s var(--ease); }
body.is-booting .hud { transform: translateY(-120%); }
body.is-booting .energy { transform: translateY(120%); }
.hud-logo { width: 104px; color: var(--ink); justify-self: start; }
.hud-logo .logo-mask { width: 100%; }
.hud-clock { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(10,9,12,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#clock { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
#phase { color: var(--a); }
.clock-sep { color: var(--ink-3); }
.clock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--b); box-shadow: 0 0 10px var(--b); transform: scale(calc(.7 + var(--kick) * .7)); }
.hud-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.vibe-switch { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(10,9,12,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.vibe-switch button { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; color: var(--ink-2); transition: background-color .3s, color .3s; }
.vibe-switch button:hover { color: var(--ink); }
.vibe-switch button[aria-checked="true"] { background: var(--a); color: var(--on-a); }
.sound-toggle { display: flex; align-items: center; gap: 9px; white-space: nowrap; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(10,9,12,.5); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sound-toggle[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--a) 60%, transparent); }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 2px; height: 14px; background: currentColor; border-radius: 2px; transform-origin: bottom; transform: scaleY(.2); }
.sound-toggle[aria-pressed="true"] .eq i { background: var(--a); }

/* ---------------------------------------------------------------- energy nav */
.energy { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; height: var(--nav-h); display: grid; grid-template-columns: minmax(0, 340px) 1fr; align-items: center; gap: 20px; padding: 0 var(--gutter);
  background: linear-gradient(to top, rgba(6,5,7,.75), rgba(6,5,7,0)); transition: transform .6s var(--ease), color .9s; }
.np { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-label { color: var(--ink-3); }
.np-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a); flex: none; animation: blink 1s steps(2) infinite; }
#np-text { overflow: hidden; text-overflow: ellipsis; }
@keyframes blink { 50% { opacity: .2; } }
.energy-track { position: relative; height: 34px; }
.energy-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.energy-path-bg { fill: none; stroke: var(--line-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.energy-path { fill: none; stroke: var(--a); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px var(--a)); }
.energy-marks { position: absolute; inset: 0; }
.energy-mark { position: absolute; top: 0; bottom: 0; width: 26px; margin-left: -13px; display: flex; align-items: flex-end; justify-content: center; }
.energy-mark::before { content: ''; position: absolute; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.energy-mark span { position: absolute; bottom: calc(100% + 6px); font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.energy-mark:hover span, .energy-mark:focus-visible span { opacity: 1; transform: none; }
.energy-head { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 40%, transparent), 0 0 18px var(--a); left: 0; pointer-events: none; }

/* ---------------------------------------------------------------- shared type */
.label { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 28px; }
.label-time { color: var(--on-a); background: var(--a); padding: 3px 8px; border-radius: 5px; letter-spacing: .08em; font-weight: 600; }
.h-xl { font-weight: 850; font-variation-settings: 'wdth' 66; text-transform: uppercase; font-size: clamp(44px, 7.4vw, 124px); line-height: .88; margin: 0; letter-spacing: -.005em; }
.h-xxl { font-weight: 900; font-variation-settings: 'wdth' 60; text-transform: uppercase; font-size: clamp(64px, 12vw, 210px); line-height: .84; margin: 0; }
.h-lg { font-weight: 800; font-variation-settings: 'wdth' 72; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 68px); line-height: .92; margin: 0 0 18px; }
.lede { font-size: clamp(17px, 1.35vw, 21px); color: var(--ink-2); max-width: 34em; margin: 22px 0 0; }

/* ---------------------------------------------------------------- hero */
.hero { height: 270vh; }
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-fill { position: absolute; inset: 0; opacity: 0; }
.hero-fill video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.05); }
.hero-fill-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,5,7,.55), rgba(6,5,7,.2) 40%, rgba(6,5,7,.85)), linear-gradient(90deg, color-mix(in srgb, var(--a) 30%, transparent), color-mix(in srgb, var(--b) 30%, transparent)); mix-blend-mode: normal; }
.hero-logo { position: absolute; inset: 0;
  -webkit-mask: url(../assets/brand/logo.svg?v=3) center / contain no-repeat; mask: url(../assets/brand/logo.svg?v=3) center / contain no-repeat; background: #111; }
.hero-logo video { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; filter: saturate(1.3) contrast(1.15) brightness(1.15); }
.hero-logo-tint { position: absolute; inset: 0; background: linear-gradient(100deg, var(--a), var(--b)); mix-blend-mode: color; opacity: .55; }
.hero-logo-outline { position: absolute; inset: 0; color: var(--a); opacity: .0; transform: translate(calc(var(--kick) * -10px), 0); mix-blend-mode: screen; pointer-events: none; }
/* LED portrait wall */
.led-wrap { position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 62vw; cursor: crosshair;
  -webkit-mask: linear-gradient(90deg, transparent, #000 20%); mask: linear-gradient(90deg, transparent, #000 20%); }
.led { position: absolute; inset: 0; width: 100%; height: 100%; }
.led-fallback { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.no-led .led { display: none; }
.no-led .led-fallback { display: block; }
.led-tag { position: absolute; z-index: 4; top: calc(var(--hud-h) + 3vh); right: var(--gutter); display: flex; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(6,5,7,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fadein 1s ease 1.4s backwards; }
.led-live { color: #ff3c3c; animation: blink 1.2s steps(2) infinite; }
#led-cap { transition: opacity .35s; }
#led-cap.swap { opacity: 0; }
.led-hint { position: absolute; z-index: 4; right: var(--gutter); bottom: calc(var(--nav-h) + 4vh); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0; animation: fadein 1s ease 1.8s backwards; }
.led-hint-touch { display: none; }
@media (pointer: coarse) { .led-hint-mouse { display: none; } .led-hint-touch { display: inline; } }

.hero-left { position: absolute; z-index: 3; left: var(--gutter); bottom: calc(var(--nav-h) + 5vh); width: min(46vw, 780px); pointer-events: none; }
.hero-left a, .hero-left button { pointer-events: auto; }
.hero-left > * { animation: rise 1.1s var(--ease) backwards; } /* backwards: lets GSAP fade them on scroll */
.hero-left > :nth-child(1) { animation-delay: .25s; }
.hero-left > :nth-child(2) { animation-delay: .4s; }
.hero-left > :nth-child(3) { animation-delay: .65s; }
.hero-left > :nth-child(4) { animation-delay: .8s; }
.hero-left > :nth-child(5) { animation-delay: .95s; }
.hero-kicker { display: flex; gap: 22px; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 3vh; }
.hero-kicker span + span::before { content: '·'; margin-right: 22px; color: var(--a); }
.hero-logo-wrap { position: relative; width: 100%; aspect-ratio: 2207 / 1023; transform-origin: 35.5% 70.9%; will-change: transform; }
.hero-line { font-weight: 700; font-variation-settings: 'wdth' 88; font-size: clamp(22px, 2.3vw, 40px); line-height: 1.04; margin: 3.2vh 0 0; max-width: 17em; text-transform: none; }
.hero-line em { font-style: italic; color: var(--a); font-variation-settings: 'wdth' 110; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3vh; }
.drop-btn { gap: 12px; padding-left: 14px; }
.mini-rec { width: 26px; height: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle, var(--a) 0 9%, #0b0a0c 10% 14%, var(--b) 15% 32%, #121014 33% 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 2px rgba(11,10,12,.3); animation: spin 1.8s linear infinite; animation-play-state: paused; }
.drop-btn:hover .mini-rec, body.sound-on .mini-rec { animation-play-state: running; }
.hero-note { margin: 14px 0 0; font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }
.hero-note-on { display: none; }
body.sound-on .hero-note-on { display: inline; }
body.sound-on .hero-note-off { display: none; }
.scroll-cue { display: none; position: absolute; right: var(--gutter); bottom: calc(var(--nav-h) + 5vh); display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.scroll-cue-line { width: 1px; height: 46px; background: linear-gradient(var(--a), transparent); animation: cue 1.6s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------------------------------------------------------------- story */
.story { padding: 11vh 0 7vh; }
.story-text { font-weight: 560; font-variation-settings: 'wdth' 92; font-size: clamp(28px, 4.1vw, 66px); line-height: 1.07; margin: 0; max-width: 18.5em; letter-spacing: -.01em; }
.story-text .w { opacity: .14; transition: opacity .25s linear, color .4s; }
.story-text .w.on { opacity: 1; }
.story-text .w.hot { color: var(--a); }
.story-collage { position: relative; height: clamp(520px, 105vh, 1100px); margin: 6vh auto; max-width: 1600px; }
.sc { position: absolute; margin: 0; overflow: hidden; border-radius: 6px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); background: var(--panel); }
.sc img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sc:hover img { transform: scale(1.05); }
.sc figcaption { position: absolute; left: 12px; bottom: 10px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; background: rgba(6,5,7,.65); padding: 4px 8px; border-radius: 4px; }
.sc-1 { left: 4%; top: 4%; width: 40%; aspect-ratio: 1080 / 715; }
.sc-2 { right: 6%; top: 0; width: 26%; aspect-ratio: 960 / 1201; }
.sc-3 { left: 30%; top: 48%; width: 27%; aspect-ratio: 777 / 828; z-index: 2; }
.sc-4 { right: 18%; top: 58%; width: 19%; aspect-ratio: 678 / 960; filter: grayscale(1) contrast(1.1); }
.crowds { margin: 4vh 0 7vh; display: grid; gap: 1.2vh; }
.crowd { font-weight: 800; font-variation-settings: 'wdth' 70; text-transform: uppercase; font-size: clamp(26px, 3.6vw, 60px); line-height: .98; margin: 0; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.4fr); gap: .5em; align-items: baseline; padding: .35em 0; border-bottom: 1px solid var(--line); }
.crowd .g { font-size: 1.25em; line-height: .9; }
.crowd .g { color: var(--a); font-style: italic; font-variation-settings: 'wdth' 96; }
.crowd:nth-child(2) .g { color: var(--b); }
.crowd:nth-child(3) .g { background: linear-gradient(90deg, var(--a), var(--b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.crowd-end { font-size: clamp(18px, 1.6vw, 24px); color: var(--ink-2); margin: 3vh 0 0; }
.crowd-end strong { color: var(--ink); font-weight: 700; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin: 0; }
.fact { padding: 28px 24px 0 0; border-right: 1px solid var(--line); margin-right: 24px; }
.fact:last-child { border-right: 0; }
.fact dt { font-weight: 900; font-variation-settings: 'wdth' 60; font-size: clamp(64px, 8vw, 132px); line-height: .85; color: var(--ink); }
.fact dd { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; max-width: 14em; }

/* ---------------------------------------------------------------- decks */
.decks { padding: 9vh 0 6vh; }
.decks-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; margin-bottom: 36px; }
.decks-head .lede { margin: 0; }
.decks-muted { font-size: 13px; color: var(--ink-2); margin: -30px 0 30px; }
.rig { display: grid; grid-template-columns: 1fr minmax(320px, 420px) 1fr; gap: clamp(12px, 2vw, 28px); align-items: center; max-width: 1480px; margin: 0 auto; padding: clamp(14px, 2vw, 28px);
  background: linear-gradient(180deg, #17151a, #0e0c10); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 60px 120px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06); width: calc(100% - 2 * var(--gutter)); }
.deck { display: grid; gap: 14px; }
.deck-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--ink-3); }
.deck-id { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink); font-weight: 600; }
.deck[data-deck="B"] .deck-id { border-color: var(--b); color: var(--b); }
.deck[data-deck="A"] .deck-id { border-color: var(--a); color: var(--a); }
.deck-vibes { display: flex; gap: 4px; }
.deck-vibes button { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink-3); }
.deck-vibes button[aria-checked="true"] { color: var(--on-a); background: var(--ink); border-color: var(--ink); }
.deck[data-deck="A"] .deck-vibes button[aria-checked="true"] { background: var(--a); border-color: var(--a); }
.deck[data-deck="B"] .deck-vibes button[aria-checked="true"] { background: var(--b); border-color: var(--b); color: #fff; }
.deck-bpm b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.platter { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #2a282d 0 64%, #3c3a40 65%, #1b1a1e 70%, #2f2d33 98%, #0b0a0d 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 24px 50px -20px rgba(0,0,0,.9); cursor: grab; outline-offset: 6px; touch-action: none; }
.platter:active { cursor: grabbing; }
.platter-dots { position: absolute; inset: 1.5%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.35) 0 1deg, transparent 1deg 6deg); -webkit-mask: radial-gradient(circle, transparent 0 96%, #000 96.5%); mask: radial-gradient(circle, transparent 0 96%, #000 96.5%); opacity: .55; }
.vinyl { position: absolute; inset: 6%; border-radius: 50%; background:
  conic-gradient(from 30deg, rgba(255,255,255,.0), rgba(255,255,255,.08) 10%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 50%, rgba(255,255,255,.07) 60%, rgba(255,255,255,0) 70%),
  repeating-radial-gradient(circle, #0c0c0d 0 1.5px, #18181a 2px 3px);
  box-shadow: 0 0 0 2px #050506, 0 10px 30px rgba(0,0,0,.7); will-change: transform; }
.vinyl-label { position: absolute; inset: 31%; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 70%, transparent); }
.deck[data-deck="B"] .vinyl-label { box-shadow: 0 0 0 3px color-mix(in srgb, var(--b) 70%, transparent); }
.vinyl-label-logo { background: radial-gradient(circle, var(--b), color-mix(in srgb, var(--b) 60%, #000)); display: grid; place-items: center; }
.vinyl-label-logo .logo-mask { width: 72%; color: #fff; }
.vinyl-label::before { content: ''; position: absolute; left: 50%; top: 4%; width: 3%; height: 18%; background: rgba(255,255,255,.85); border-radius: 2px; transform: translateX(-50%); }
.vinyl-spindle { position: absolute; left: 50%; top: 50%; width: 4%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #ddd, #777); }
.deck-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
.sync { padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line-2); }
.sync.on { color: var(--on-a); background: var(--ink); border-color: var(--ink); }
.mixer { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #0f0e12, #0a090c); border: 1px solid var(--line); }
.screen { border-radius: 10px; background: #050707; border: 1px solid rgba(255,255,255,.06); padding: 8px 10px 6px; box-shadow: inset 0 0 30px rgba(0,0,0,.8); }
.scope { width: 100%; height: 64px; }
.screen-row { display: flex; justify-content: space-between; font-size: 11px; color: color-mix(in srgb, var(--a) 80%, #fff); letter-spacing: .08em; margin-top: 4px; }
.screen-row b { font-weight: 600; }
.mixer-mid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 14px; align-items: center; }
.vu { display: flex; gap: 4px; height: 110px; }
.vu-col { display: flex; flex-direction: column-reverse; gap: 3px; width: 9px; }
.vu-col i { flex: 1; border-radius: 2px; background: #1e1c21; transition: background-color .06s; }
.vu-col i.on { background: #3ce07a; box-shadow: 0 0 6px #3ce07a; }
.vu-col i:nth-child(n+7).on { background: #ffd23c; box-shadow: 0 0 6px #ffd23c; }
.vu-col i:nth-child(n+9).on { background: #ff3c3c; box-shadow: 0 0 6px #ff3c3c; }
.knob-wrap, .tempo-wrap { display: grid; justify-items: center; gap: 6px; }
.knob { position: relative; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a474f, #1c1a1f 70%); box-shadow: 0 10px 20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.15); cursor: ns-resize; touch-action: none; }
.knob-cap { position: absolute; inset: 0; border-radius: 50%; transform: rotate(0deg); }
.knob-cap::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 18px; margin-left: -1.5px; background: var(--a); border-radius: 2px; box-shadow: 0 0 8px var(--a); }
.knob-ring { position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient(from 225deg, var(--line-2) 0 270deg, transparent 270deg); -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 63% 66%, transparent 67%); mask: radial-gradient(circle, transparent 0 62%, #000 63% 66%, transparent 67%); }
.knob-label { font-size: 10px; letter-spacing: .14em; color: var(--ink-3); }
.knob-label b { color: var(--ink); font-weight: 600; }
.knob-ends { display: flex; justify-content: space-between; width: 92px; font-size: 9px; color: var(--ink-3); letter-spacing: .1em; }
.tempo-wrap input { width: 100%; }
.pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pad { position: relative; aspect-ratio: 1.25; touch-action: manipulation; border-radius: 10px; background: linear-gradient(180deg, #1f1d23, #151318); border: 1px solid rgba(255,255,255,.07); font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 8px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.4); transition: transform .08s, background-color .2s, color .2s, box-shadow .2s; }
.pad kbd { position: absolute; top: 6px; right: 6px; font-size: 9px; padding: 0 4px; border-radius: 3px; }
.pad:hover { color: var(--ink); border-color: color-mix(in srgb, var(--a) 50%, transparent); }
.pad.hit { transform: translateY(2px) scale(.98); background: var(--a); color: var(--on-a); box-shadow: 0 0 30px -4px var(--a), inset 0 0 0 1px rgba(255,255,255,.3); }
.pad-hot { border-color: color-mix(in srgb, var(--b) 60%, transparent); color: var(--ink); }
.pad-hot.hit { background: var(--b); color: #fff; box-shadow: 0 0 30px -4px var(--b); }
.xfader { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-3); }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 30px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: #050506; box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.06); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: #050506; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 30px; margin-top: -12px; border-radius: 5px; background: linear-gradient(90deg, #8f8c95, #e9e7ec 45%, #8f8c95); box-shadow: 0 4px 10px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.2); border: 0; }
input[type="range"]::-moz-range-thumb { width: 26px; height: 30px; border-radius: 5px; background: linear-gradient(90deg, #8f8c95, #e9e7ec 45%, #8f8c95); border: 0; }
.rig-keys { margin-top: 18px; text-align: center; font-size: 12px; color: var(--ink-3); }

/* ---------------------------------------------------------------- floor / LED wall */
.floor { padding: 8vh 0 5vh; }
.floor-head { margin-bottom: 32px; }
.ledwall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 0 var(--gutter); max-width: 1680px; margin: 0 auto; }
.tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: #000; cursor: pointer; isolation: isolate; }
.tile:nth-child(6n+2), .tile:nth-child(6n+5) { transform: translateY(40px); }
.tile > img, .tile > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .35s; }
.tile:hover > img, .tile:hover > video { transform: scale(1.06); }
.tile::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle, transparent 0 55%, rgba(0,0,0,.55) 56%) 0 0 / 4px 4px; opacity: .55; mix-blend-mode: multiply; }
.tile::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.75)); }
.tile-cap { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 4; font-size: 11px; letter-spacing: .06em; line-height: 1.35; }
.tile-cap b { display: block; font-family: var(--f-display); font-size: 15px; letter-spacing: 0; font-weight: 700; font-variation-settings: 'wdth' 85; text-transform: uppercase; margin-bottom: 2px; }
.tile-badge { position: absolute; top: 10px; left: 10px; z-index: 4; font-size: 10px; letter-spacing: .12em; padding: 3px 7px; border-radius: 4px; background: rgba(0,0,0,.6); }
.tile-badge.rec::before { content: '● '; color: #ff3c3c; }
.tile.swap > img, .tile.swap > video { opacity: 0; }
.tile-flash { position: absolute; inset: 0; z-index: 5; background: var(--a); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.tile.glow .tile-flash { animation: tileflash .5s ease-out; }
@keyframes tileflash { 0% { opacity: .65; } 100% { opacity: 0; } }
.floor-foot { margin-top: 70px; text-align: center; }

/* ---------------------------------------------------------------- drop */
.drop { height: 440vh; }
.drop-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; text-align: center; }
.drop-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; z-index: 0; pointer-events: none; -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); filter: saturate(1.1) contrast(1.05); }
.drop-label { position: absolute; top: calc(var(--hud-h) + 4vh); left: 50%; transform: translateX(-50%); margin: 0; }
.drop-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.drop-count span { grid-area: 1 / 1; font-weight: 900; font-variation-settings: 'wdth' 50; font-size: 60vh; line-height: 1; color: color-mix(in srgb, var(--a) 10%, transparent); -webkit-text-stroke: 4px var(--a); text-shadow: 0 0 60px color-mix(in srgb, var(--a) 50%, transparent); opacity: 0; transform: scale(.6); }
.drop-pre { font-weight: 900; font-variation-settings: 'wdth' 62; text-transform: uppercase; font-size: clamp(56px, 10vw, 180px); line-height: .86; margin: 0; position: absolute; }
.drop-with { position: absolute; top: 24vh; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); opacity: 0; margin: 0; }
.drop-names { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.drop-names li { grid-area: 1 / 1; font-weight: 900; text-transform: uppercase; font-size: clamp(52px, 12.5vw, 240px); line-height: .9; opacity: 0; white-space: nowrap; letter-spacing: -.01em; font-variation-settings: 'wdth' 100; will-change: transform, opacity; max-width: 96vw; }
.drop-names li:nth-child(odd) { color: var(--a); }
.drop-names li:nth-child(even) { color: var(--ink); }
.drop-names.is-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: .1em .4em; padding: 16vh 6vw; }
.drop-names.is-cloud li { grid-area: auto; font-size: clamp(26px, 4.4vw, 76px); opacity: 1 !important; transform: none !important; font-variation-settings: 'wdth' 70; }
.drop-post { position: absolute; bottom: calc(var(--nav-h) + 6vh); left: 50%; transform: translateX(-50%); width: min(720px, 90vw); color: var(--ink-2); font-size: clamp(15px, 1.25vw, 19px); opacity: 0; margin: 0; }

/* ---------------------------------------------------------------- rooms */
.rooms { padding: 8vh 0 5vh; }
.board { margin: 36px 0 44px; border-radius: 16px; background: #0a090b; border: 1px solid var(--line); padding: clamp(14px, 2vw, 26px); box-shadow: inset 0 0 60px rgba(0,0,0,.6); }
.board-head, .board-row { display: grid; grid-template-columns: 2.4fr 1.6fr 1fr; gap: clamp(8px, 1.5vw, 20px); }
.board-head { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--a); padding: 0 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.board-row { padding: 6px 0; }
.flaps { display: flex; gap: 2px; overflow: hidden; }
.flap { position: relative; display: inline-grid; place-items: center; width: clamp(14px, 1.45vw, 24px); height: clamp(22px, 2.2vw, 36px); background: linear-gradient(180deg, #1d1b20 0 49%, #151317 51%); border-radius: 3px; font-family: var(--f-mono); font-weight: 600; font-size: clamp(12px, 1.3vw, 21px); color: #f3eadb; text-transform: uppercase; flex: none; }
.flap::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.7); }
.flap.flip { animation: flip .09s linear; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(80deg); filter: brightness(.6); } 100% { transform: rotateX(0); } }
.flaps.type .flap { color: var(--a); }
.board-foot { margin-top: 14px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.blink { color: var(--b); animation: blink 1.2s steps(2) infinite; }
.formats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.format { padding: 26px 22px 30px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); transition: border-color .3s, transform .4s var(--ease), background-color .3s; }
.format:hover { border-color: var(--a); transform: translateY(-4px); background-color: color-mix(in srgb, var(--a) 6%, transparent); }
.format-n { font-size: 12px; color: var(--a); margin: 0 0 40px; }
.format h3 { font-weight: 800; font-variation-settings: 'wdth' 74; text-transform: uppercase; font-size: clamp(24px, 2vw, 32px); line-height: .95; margin: 0 0 12px; }
.format p:last-child { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.marquee { margin-top: 5vh; overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 40s linear infinite; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.marquee-track span::after { content: '✦'; margin-left: 56px; color: var(--a); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- archive */
.archive { padding: 8vh 0 0; }
.archive-head { margin-bottom: 40px; }
.archive-head .h-xl { max-width: 15em; }
.wall { position: relative; height: 100vh; height: 100svh; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.wall.dragging { cursor: grabbing; }
.wall-inner { position: absolute; inset: 0; }
.flyer { position: absolute; left: 0; top: 0; will-change: transform; border-radius: 4px; overflow: hidden; background: #111; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); transition: box-shadow .3s; }
.flyer img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; transition: transform .5s var(--ease), filter .4s; filter: saturate(.9) brightness(.92); }
.flyer:hover img { transform: scale(1.04); filter: none; }
.flyer[data-y]::after { content: attr(data-y); position: absolute; top: 8px; right: 8px; font: 600 10px/1 var(--f-mono); letter-spacing: .14em; padding: 4px 6px; border-radius: 3px; background: var(--a); color: var(--on-a); }
.wall-hint { position: absolute; left: 50%; bottom: calc(var(--nav-h) + 4vh); transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; background: rgba(6,5,7,.75); border: 1px solid var(--line); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wall-hint span { color: var(--a); }

/* ---------------------------------------------------------------- records */
.records { padding: 9vh 0 5vh; }
.sleeves { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); margin: 56px 0 16vh; }
.sleeve { position: relative; text-align: left; }
.sleeve-art { position: relative; aspect-ratio: 1; margin-right: 18%; z-index: 2; }
.sleeve-cover { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; background: var(--panel); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); z-index: 2; }
.sleeve-cover img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); filter: saturate(1.1); }
.sleeve-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--a) 35%, transparent), transparent 55%, color-mix(in srgb, var(--b) 35%, transparent)); mix-blend-mode: overlay; }
.sleeve-cover.typeset { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, var(--b), #19050d 70%); }
.sleeve-cover.typeset span { font-family: var(--f-display); font-weight: 900; font-variation-settings: 'wdth' 58; font-size: clamp(40px, 5vw, 84px); line-height: .82; text-transform: uppercase; text-align: center; color: var(--ink); }
.sleeve-disc { position: absolute; top: 3%; bottom: 3%; left: 3%; aspect-ratio: 1; border-radius: 50%; z-index: 1; background: repeating-radial-gradient(circle, #0c0c0d 0 1.5px, #19191b 2px 3px); box-shadow: 0 20px 40px rgba(0,0,0,.6); transition: transform .9s var(--ease); }
.sleeve-disc::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: var(--a); box-shadow: inset 0 0 0 6px rgba(0,0,0,.2); }
.sleeve:hover .sleeve-disc, .sleeve:focus-within .sleeve-disc { transform: translateX(22%) rotate(120deg); }
.sleeve-meta { margin-top: 22px; padding-right: 18%; }
.sleeve-kind { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a); margin: 0 0 6px; }
.sleeve h3 { font-family: var(--f-display); font-weight: 850; font-variation-settings: 'wdth' 70; text-transform: uppercase; font-size: clamp(28px, 2.6vw, 42px); line-height: .92; margin: 0 0 8px; }
.sleeve-with { color: var(--ink-2); font-size: 14.5px; margin: 0 0 16px; }
.sleeve-play { position: absolute; z-index: 3; inset: 0; margin-right: 18%; }
.sleeve-play span { position: absolute; left: 16px; bottom: 16px; width: 58px; height: 58px; border-radius: 50%; background: var(--a); color: var(--on-a); display: grid; place-items: center; transition: transform .3s var(--ease); box-shadow: 0 10px 30px -6px var(--a); }
.sleeve-play:hover span { transform: scale(1.1); }
.mentor { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.mentor-media { position: relative; aspect-ratio: 720 / 640; border-radius: 10px; overflow: hidden; background: var(--panel); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); }
.mentor-media video { width: 100%; height: 100%; object-fit: cover; }
.mentor-copy p:not(.label) { color: var(--ink-2); font-size: clamp(17px, 1.3vw, 20px); max-width: 32em; margin: 0 0 26px; }
.mentor-copy em { color: var(--a); font-style: italic; }

/* ---------------------------------------------------------------- booking */
.book { padding: 9vh 0 8vh; }
.book-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 90px); align-items: start; }
.book-intro { position: sticky; top: calc(var(--hud-h) + 30px); }
.book-points { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 10px; font-size: 13px; letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; }
.book-points li::before { content: '→'; color: var(--a); margin-right: 10px; }
.book-form { display: grid; gap: 26px; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-radius: 22px; background: rgba(13,11,15,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend, .field > span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; padding: 0; }
.opt { color: var(--ink-3); text-transform: none; letter-spacing: .04em; }
.chip { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14.5px; color: var(--ink-2); transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--a); color: var(--ink); }
.chip.on { background: var(--a); border-color: var(--a); color: var(--on-a); }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.field { display: grid; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line-2); padding: 8px 0 10px; border-radius: 0; transition: border-color .2s; color-scheme: dark; }
.field select option { background: var(--panel); }
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--a); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field.err input { border-color: #ff4d4d; }
.book-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.book-route { font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; max-width: 30em; margin: 0; }
.book-err { margin: -8px 0 0; font-size: 12.5px; color: #ff6b6b; letter-spacing: .02em; }
.book-err:empty { display: none; }
.book-done:empty { padding: 0; border: 0; min-height: 0; }
.field.err > span { color: #ff6b6b; }
.book-done { margin: 0; padding: 16px 18px; border-radius: 12px; background: color-mix(in srgb, var(--a) 14%, transparent); border: 1px solid color-mix(in srgb, var(--a) 50%, transparent); color: var(--ink); }

/* ---------------------------------------------------------------- lights on */
.lights { padding: 11vh 0 calc(var(--nav-h) + 40px); min-height: 100vh; position: relative; z-index: 2; }
.lights-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 40px 0 12vh; }
.lights-logo { width: 100%; color: currentColor; opacity: .95; }
.lights-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

body.lights-on { --ink: #121014; --ink-2: rgba(18,16,20,.72); --ink-3: rgba(18,16,20,.5); --line: rgba(18,16,20,.14); --line-2: rgba(18,16,20,.28); color: var(--ink); background-color: #f4efe6; }
body.lights-on .hud { background: none; }
body.lights-on .energy { background: linear-gradient(to top, rgba(244,239,230,.95), rgba(244,239,230,0)); }
body.lights-on .hud-clock, body.lights-on .vibe-switch, body.lights-on .sound-toggle { background: rgba(255,255,255,.55); }
body.lights-on .fx-grain { opacity: .04; }
body.lights-on .btn-solid { background: #121014; color: #f4efe6; }
body.lights-on :focus-visible { outline-color: #121014; }
body.lights-on #phase { color: #121014; }

/* ---------------------------------------------------------------- lightbox */
.lightbox { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; background: rgba(4,3,5,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 70px 16px 50px; }
.lightbox[hidden] { display: none; }
.lb-stage { max-width: min(1100px, 94vw); max-height: calc(100vh - 140px); display: grid; place-items: center; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 8px; box-shadow: 0 40px 100px rgba(0,0,0,.8); }
.lb-stage iframe { width: min(1100px, 94vw); aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; box-shadow: 0 40px 100px rgba(0,0,0,.8); }
.lb-close { position: absolute; top: 18px; right: var(--gutter); font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; }
.lb-close:hover { border-color: var(--a); color: var(--a); }
.lb-caption { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .08em; color: var(--ink-2); margin: 0; }


/* ---------------------------------------------------------------- crowd, hype, sound pill, tickers */
.crowdfx { position: absolute; left: 0; right: 0; bottom: 0; height: 36vh; z-index: 2; pointer-events: none; overflow: hidden; }
.crowdfx-drop { z-index: 1; height: 32vh; }
.cf { position: absolute; left: 50%; bottom: -2px; width: max(104%, 1100px); height: auto; translate: -50% 0; will-change: transform, opacity; }
.cf-back { bottom: 7%; width: max(100%, 1050px); opacity: .8; filter: brightness(.7) drop-shadow(0 -1px 0 color-mix(in srgb, var(--b) 55%, transparent)); }
.cf-front, .cf-hands { filter: drop-shadow(0 -1.5px 0 color-mix(in srgb, var(--a) 85%, transparent)) drop-shadow(0 -6px 14px color-mix(in srgb, var(--a) 40%, transparent)); }
.cf-hands { opacity: 0; }
.cf-co2 { position: absolute; bottom: 0; height: 72vh; width: auto; translate: -50% 0; transform-origin: 50% 100%; opacity: 0; transform: scaleY(.2); pointer-events: none; mix-blend-mode: screen; }
.cf-co2.l { left: 14%; } .cf-co2.c { left: 50%; height: 80vh; } .cf-co2.r { left: 86%; }
.cf-co2.go { animation: co2 1.9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes co2 { 0% { opacity: 0; transform: scaleY(.15); } 12% { opacity: .95; transform: scaleY(1); } 55% { opacity: .7; } 100% { opacity: 0; transform: scaleY(1.12) translateY(-8%); } }
.cf-flash { position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0 6%, rgba(220,235,255,.45) 14%, transparent 60%); opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 3; }
.cf-flash.go { animation: camflash .45s ease-out; }
@keyframes camflash { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.3); } }
.confetti-rain { position: fixed; inset: 0; z-index: 64; pointer-events: none; overflow: hidden; mix-blend-mode: screen; opacity: 0; transition: opacity .5s ease; }
.confetti-rain.go { opacity: 1; }
.confetti-rain video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tapzone { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle at 50% 52%, rgba(6,5,7,.05) 0 18%, rgba(6,5,7,.5) 70%); transition: opacity .5s ease; }
.tapzone[hidden] { display: none; }
.tapzone.out { opacity: 0; pointer-events: none; }
.tapzone-inner { display: grid; justify-items: center; gap: 18px; text-align: center; translate: 0 -2vh; animation: fadein .6s ease both; }
.tapzone-btn { position: relative; width: clamp(110px, 12vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--a); display: grid; place-items: center; box-shadow: 0 0 80px -10px var(--a); transform: scale(calc(1 + var(--kick, 0) * .08)); }
.tapzone-btn .eq { height: 34px; gap: 5px; }
.tapzone-btn .eq i { width: 6px; height: 34px; background: var(--on-a); animation: eqbar .45s ease-in-out infinite alternate; }
.tapzone-btn .eq i:nth-child(2) { animation-delay: -.2s; } .tapzone-btn .eq i:nth-child(3) { animation-delay: -.33s; } .tapzone-btn .eq i:nth-child(4) { animation-delay: -.1s; } .tapzone-btn .eq i:nth-child(5) { animation-delay: -.4s; }
.tapzone-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--a); animation: tapring2 1.6s ease-out infinite; }
.tapzone-ring.r2 { animation-delay: .8s; }
@keyframes tapring2 { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.3); opacity: 0; } }
.tapzone-title { font-weight: 900; font-variation-settings: 'wdth' 64; text-transform: uppercase; font-size: clamp(34px, 5vw, 76px); line-height: .9; margin: 6px 0 0; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.tapzone-sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; max-width: 90vw; }
.drop-pre, .drop-names, .drop-with, .drop-post, .drop-label { z-index: 2; }
.hype { position: fixed; inset: 0; z-index: 65; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.hype-word { grid-area: 1 / 1; font-weight: 900; font-variation-settings: 'wdth' 120; font-size: clamp(64px, 15vw, 260px); line-height: .9; text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 3px var(--a); text-shadow: 0 0 60px color-mix(in srgb, var(--a) 60%, transparent); animation: hype 1.25s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes hype { 0% { opacity: 0; transform: scale(.55) rotate(-4deg); } 18% { opacity: 1; transform: scale(1.06) rotate(-2deg); color: color-mix(in srgb, var(--a) 22%, transparent); } 60% { opacity: .9; } 100% { opacity: 0; transform: scale(1.22) rotate(0); } }
.sound-pill { position: fixed; z-index: 72; left: 50%; bottom: calc(var(--nav-h) + 14px); transform: translateX(-50%) scale(calc(1 + var(--kick, 0) * .06)); display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--a); color: var(--on-a); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--a) 22%, transparent), 0 18px 50px -10px var(--a); animation: fadein .6s ease both; }
.sound-pill[hidden] { display: none; }
.sound-pill .eq i { background: var(--on-a); animation: eqbar .5s ease-in-out infinite alternate; }
.sound-pill .eq i:nth-child(2) { animation-delay: -.2s; } .sound-pill .eq i:nth-child(3) { animation-delay: -.35s; } .sound-pill .eq i:nth-child(4) { animation-delay: -.1s; } .sound-pill .eq i:nth-child(5) { animation-delay: -.42s; }
@keyframes eqbar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.ticker { position: relative; z-index: 2; overflow: hidden; padding: 18px 0; border-block: 1px solid var(--line); background: rgba(6,5,7,.55); transform: rotate(-1.2deg); margin: 4vh -2vw; }
.ticker-track { display: flex; gap: 0; width: max-content; animation: marquee 32s linear infinite; }
.ticker-track span { font-weight: 850; font-variation-settings: 'wdth' 70; text-transform: uppercase; font-size: clamp(30px, 4.6vw, 72px); line-height: 1; padding: 0 .45em; color: var(--ink); }
.ticker-track span:nth-child(3n+2) { color: transparent; -webkit-text-stroke: 1.5px var(--a); }
.ticker-track span:nth-child(3n) { color: var(--a); }
.ticker-track span::after { content: '✦'; font-size: .45em; vertical-align: middle; margin-left: .9em; color: var(--b); -webkit-text-stroke: 0; }
.ticker-hot { transform: rotate(1.2deg); background: var(--a); border: 0; }
.ticker-hot .ticker-track span { color: var(--on-a); }
.ticker-hot .ticker-track span:nth-child(3n+2) { color: transparent; -webkit-text-stroke: 1.5px var(--on-a); }
.ticker-hot .ticker-track span::after { color: var(--on-a); }

/* ---------------------------------------------------------------- beat check */
.beatcheck { display: grid; grid-template-columns: 1.1fr auto 1fr; gap: clamp(20px, 4vw, 60px); align-items: center; margin-top: 10vh; }
.beatcheck-copy p:not(.label) { color: var(--ink-2); max-width: 26em; margin: 0; }
.tap-pad { position: relative; width: clamp(150px, 16vw, 210px); aspect-ratio: 1; border-radius: 28px; background: linear-gradient(180deg, #221f27, #141217); border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.45), 0 30px 60px -25px rgba(0,0,0,.9); display: grid; place-items: center; touch-action: manipulation; transition: transform .08s; }
.tap-pad .tap-ring { position: absolute; inset: 10px; border-radius: 20px; border: 2px solid color-mix(in srgb, var(--a) 40%, transparent); }
.tap-pad.kick .tap-ring { animation: tapring .35s ease-out; }
@keyframes tapring { 0% { border-color: var(--a); box-shadow: 0 0 30px -4px var(--a), inset 0 0 20px -6px var(--a); } 100% { border-color: color-mix(in srgb, var(--a) 40%, transparent); box-shadow: none; } }
.tap-pad.hit { transform: translateY(3px) scale(.97); background: var(--a); }
.tap-pad.hit .tap-word, .tap-pad.hit .tap-count { color: var(--on-a); }
.tap-word { font-weight: 900; font-variation-settings: 'wdth' 70; font-size: clamp(36px, 4vw, 54px); text-transform: uppercase; }
.tap-count { position: absolute; bottom: 18px; font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }
.tap-rank { font-weight: 800; font-variation-settings: 'wdth' 76; text-transform: uppercase; font-size: clamp(22px, 2.2vw, 34px); line-height: 1; margin: 0 0 10px; }
.tap-detail { font-size: 12px; color: var(--ink-2); margin: 0; line-height: 1.6; }

/* ---------------------------------------------------------------- VJ booth */
.vj { padding: 8vh 0 5vh; }
.vj-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 32px; }
.vj-head .lede { margin: 0; }
.vj-rig { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); gap: clamp(14px, 2vw, 26px); max-width: 1500px; margin: 0 auto; padding: 0 var(--gutter); align-items: start; }
.vj-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; border: 10px solid #121015;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 120px -30px rgba(0,0,0,.95), 0 0 120px -40px var(--a); }
.vj-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vj-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.vj-osd { position: absolute; z-index: 2; left: 14px; right: 14px; top: 12px; display: flex; gap: 14px; font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px #000; }
.vj-osd #vj-bpm { margin-left: auto; }
.vj-rec { color: #ff4040; animation: blink 1s steps(2) infinite; }
.no-vj .vj-screen { background: url(../assets/img/photos/booth-red.webp) center / cover; }
.vj-panel { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: linear-gradient(180deg, #121015, #0b0a0d); border: 1px solid var(--line); }
.vj-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 0; }
.vj-sources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.vj-src { display: grid; gap: 4px; text-align: left; }
.vj-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 8px; background-size: cover; background-position: center; border: 2px solid transparent; filter: saturate(.8) brightness(.8); transition: filter .2s, border-color .2s; }
.vj-src .mono { font-size: 9px; letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vj-src:hover .vj-thumb { filter: none; }
.vj-src[aria-checked="true"] .vj-thumb { border-color: var(--a); filter: none; box-shadow: 0 0 20px -4px var(--a); }
.vj-src[aria-checked="true"] .mono { color: var(--ink); }
.vj-fxs { display: flex; flex-wrap: wrap; gap: 6px; }
.vj-fx { font-size: 11px; letter-spacing: .06em; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--ink-2); text-transform: uppercase; }
.vj-fx:hover { color: var(--ink); border-color: var(--a); }
.vj-fx[aria-checked="true"] { background: var(--b); border-color: var(--b); color: #fff; }
.vj-auto { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 4px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.vj-auto-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.vj-auto.on { color: var(--ink); border-color: var(--a); }
.vj-auto.on .vj-auto-dot { background: var(--a); box-shadow: 0 0 10px var(--a); animation: blink 1s steps(2) infinite; }

/* ---------------------------------------------------------------- crate (record coverflow) */
.crate { padding: 8vh 0 5vh; }
.crate-head { margin-bottom: 30px; }
.crate-stage { position: relative; height: clamp(360px, 58vh, 600px); perspective: 1400px; perspective-origin: 50% 40%; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: -4px; }
.crate-stage:active { cursor: grabbing; }
.crate-track { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.sleeve2 { position: absolute; width: clamp(220px, 38vh, 380px); aspect-ratio: 1; left: 0; top: 0; translate: -50% -50%; transform-style: preserve-3d; will-change: transform; }
.sleeve2-cover { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; background: var(--panel); box-shadow: 0 30px 60px -20px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.06); z-index: 2; }
.sleeve2-cover img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.sleeve2-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75)), linear-gradient(120deg, rgba(255,255,255,.12), transparent 40%); }
.sleeve2-type { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-weight: 900; font-variation-settings: 'wdth' 58; font-size: clamp(40px, 6vh, 70px); line-height: .85; text-transform: uppercase; background: radial-gradient(circle at 30% 20%, var(--b), #19050d 70%); padding: 20px; }
.sleeve2-title { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sleeve2-disc { position: absolute; top: 3%; bottom: 3%; left: 3%; aspect-ratio: 1; border-radius: 50%; z-index: 1; background: conic-gradient(from 30deg, rgba(255,255,255,0), rgba(255,255,255,.08) 10%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 50%, rgba(255,255,255,.07) 60%, rgba(255,255,255,0) 70%), repeating-radial-gradient(circle, #0c0c0d 0 1.5px, #19191b 2px 3px); box-shadow: 0 20px 40px rgba(0,0,0,.6); }
.sleeve2-label { position: absolute; inset: 32%; border-radius: 50%; background: var(--a) center / cover; box-shadow: 0 0 0 4px rgba(0,0,0,.35); }
.sleeve2.is-current .sleeve2-cover { box-shadow: 0 40px 80px -20px rgba(0,0,0,.95), 0 0 60px -10px var(--a), inset 0 0 0 1px rgba(255,255,255,.12); }
.crate-story { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-top: 10px; }
.crate-story-text { max-width: 760px; min-height: 180px; }
.crate-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a); margin: 0 0 12px; }
.crate-meta span + span { color: var(--ink-2); }
.crate-story p:not(.crate-meta) { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 20px); margin: 0; max-width: 36em; }
.crate-nav { display: flex; gap: 10px; }
.crate-btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 20px; }
.crate-btn:hover { border-color: var(--a); color: var(--a); }

/* ---------------------------------------------------------------- plan the night + FAQ */
.plan { padding: 8vh 0 5vh; }
.plan-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.plan-head .lede { margin: 0; }
.plan-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.plan-tab { padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.plan-tab:hover { color: var(--ink); border-color: var(--a); }
.plan-tab[aria-selected="true"] { background: var(--a); border-color: var(--a); color: var(--on-a); }
.plan-arc { height: 120px; margin-bottom: -40px; position: relative; z-index: 0; }
.plan-arc svg { width: 100%; height: 100%; overflow: visible; }
.plan-arc-line { fill: none; stroke: var(--a); stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px var(--a)); transition: d .6s var(--ease); }
.plan-arc-fill { fill: color-mix(in srgb, var(--a) 12%, transparent); transition: d .6s var(--ease); }
.plan-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; position: relative; z-index: 1; }
.plan-step { position: relative; padding: 22px 18px 26px; border-radius: var(--r); border: 1px solid var(--line); background: rgba(13,11,15,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: rise .7s var(--ease) backwards; overflow: hidden; }
.plan-time { font-size: 12px; color: var(--a); margin: 0 0 18px; letter-spacing: .08em; }
.plan-step h4 { font-weight: 800; font-variation-settings: 'wdth' 76; text-transform: uppercase; font-size: clamp(20px, 1.6vw, 26px); line-height: .95; margin: 0 0 10px; }
.plan-step p:last-of-type { color: var(--ink-2); font-size: 15px; margin: 0; }
.plan-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--line); }
.plan-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--e) * 100%); background: linear-gradient(90deg, var(--b), var(--a)); }
.plan-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 30px; }
.plan-note { font-size: 11.5px; color: var(--ink-3); margin: 0; }
.faq { margin-top: 12vh; display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { color: var(--a); font-family: var(--f-mono); font-size: 22px; line-height: 1; transition: transform .3s var(--ease); }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item p { margin: 0 0 22px; color: var(--ink-2); max-width: 40em; }


/* ---------------------------------------------------------------- rewind (Instagram flipbook) */
.rewind { height: 600vh; }
.rewind-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.rewind-copy { position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--hud-h) + 5vh); width: min(44vw, 640px); }
.rewind-copy .lede { max-width: 26em; }
.rewind-year { position: absolute; z-index: 1; left: calc(var(--gutter) - .04em); bottom: calc(var(--nav-h) + 1vh); font-weight: 900; font-variation-settings: 'wdth' 50; font-size: min(36vh, 25vw); line-height: .78;
  color: transparent; -webkit-text-stroke: 2px var(--a); font-variant-numeric: tabular-nums; letter-spacing: -.02em; pointer-events: none; }
.rewind-year.tick { animation: yeartick .4s var(--ease); }
@keyframes yeartick { from { translate: 0 10%; opacity: .25; } to { translate: 0 0; opacity: 1; } }
.rewind-stack { position: absolute; z-index: 2; right: 9vw; top: 50%; width: min(48vh, 32vw); aspect-ratio: 4 / 5; translate: 0 -54%; }
.rw-card { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #111; border: 9px solid #f3eee6; border-bottom-width: 42px; border-radius: 3px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.95); transition: transform .35s var(--ease), opacity .3s, filter .3s; }
.rw-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw-card.flip { animation: rwflip .3s var(--ease); }
@keyframes rwflip { from { translate: 60px -40px; rotate: 10deg; opacity: 0; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }
.rw-cap { position: absolute; z-index: 3; right: 9vw; width: min(48vh, 32vw); top: calc(50% + min(48vh, 32vw) * .64); margin: 0; font-size: 12px; letter-spacing: .04em; color: var(--ink-2); text-align: center; min-height: 3em; }
.rewind-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--nav-h); height: 3px; background: var(--line); }
.rewind-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--b), var(--a)); transform-origin: left; transform: scaleX(0); }
.lights-sign { font-weight: 850; font-variation-settings: 'wdth' 80; font-size: clamp(24px, 3vw, 44px); margin: 18px 0 0; }
.lights-sign .mono { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; font-weight: 400; }

/* ---------------------------------------------------------------- mobile book button (WhatsApp) */
/* floating WhatsApp button: mobile only (desktop has Book on WhatsApp in the header) */
.book-fab { display: none; align-items: center; gap: 9px; position: fixed; z-index: 75; right: var(--gutter); bottom: 6px; height: 42px; padding: 0 18px 0 14px; border-radius: 999px;
  background: var(--a); color: var(--on-a); font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--a) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--a) 18%, transparent); /* follows the vibe colour */
  transition: transform .2s var(--ease), box-shadow .2s; }
.book-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px var(--a), 0 0 0 4px color-mix(in srgb, var(--a) 26%, transparent); }
.book-fab:active { transform: scale(.96); }
.book-fab .wa-ico { width: 20px; height: 20px; flex: none; }
body.is-booting .book-fab { transform: translateY(160%); }
.wa-ico { width: 18px; height: 18px; flex: none; }
.hud-book, .lights-actions [data-book] { gap: 8px; }
.hud-book .wa-ico { width: 16px; height: 16px; flex: none; }
/* keep the clock centred: drop the 'Sound on' words, then shorten the Book button, as the header narrows */
@media (max-width: 1500px) { .hud .sound-text { display: none; } }
@media (max-width: 1380px) { .hud-book-long { display: none; } }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .vibe-switch button { padding: 8px 9px; }
  .rig { grid-template-columns: 1fr 1fr; }
  .mixer { grid-column: 1 / -1; grid-row: 2; }
  .pad { aspect-ratio: 2.4; }
  .formats { grid-template-columns: repeat(2, 1fr); }
  .ledwall { grid-template-columns: repeat(4, 1fr); }
  .tile:nth-child(6n+2), .tile:nth-child(6n+5) { transform: none; }
  .tile:nth-child(4n+2), .tile:nth-child(4n+4) { transform: translateY(30px); }
}
@media (max-width: 860px) {
  :root { --hud-h: 58px; }
  .hud { grid-template-columns: auto 1fr auto; }
  .hud-clock { justify-self: center; font-size: 11px; padding: 6px 10px; }
  .hud-clock .clock-sep, .hud-clock #phase { display: none; }
  .hud-book, .sound-text { display: none; }
  .book-fab { display: inline-flex; right: 14px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); height: 48px; padding: 0 15px 0 12px; gap: 8px; font-size: 11px; letter-spacing: .07em; }
  .vibe-switch { padding: 2px; }
  .vibe-switch button:not([aria-checked="true"]) { display: none; }
  .vibe-switch button[aria-checked="true"]::after { content: ' ↻'; }
  .hud-logo { width: 64px; }
  .hud { gap: 8px; padding: 0 12px; }
  .hud-right { gap: 6px; }
  .vibe-switch button { padding: 7px 9px; font-size: 10px; }
  .sound-toggle { height: 34px; padding: 0 10px; }
  .hud-clock { gap: 6px; }
  .energy-mark span { display: none; }
  .tapzone-sub { white-space: normal; max-width: 78vw; line-height: 1.6; }
  .led-wrap { left: 0; width: 100%; bottom: auto; height: 64svh; height: 64vh; -webkit-mask: linear-gradient(180deg, #000 62%, transparent); mask: linear-gradient(180deg, #000 62%, transparent); }
  .hero-left { right: var(--gutter); width: auto; bottom: calc(var(--nav-h) + 3vh); }
  .hero-kicker { margin-bottom: 2vh; }
  .hero-line { font-size: clamp(20px, 5.4vw, 28px); margin-top: 2vh; }
  .led-tag { right: auto; left: var(--gutter); top: calc(var(--hud-h) + 1.5vh); }
  .led-hint { display: none; }
  .decks-head, .book-grid, .mentor { grid-template-columns: 1fr; }
  .book-intro { position: static; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .fact:nth-child(2) { border-right: 0; }
  .sleeves { grid-template-columns: 1fr; max-width: 460px; }
  .row3 { grid-template-columns: 1fr; }
  .energy { grid-template-columns: 1fr; gap: 0; height: 48px; padding-right: 206px; } /* room for the WhatsApp button in the corner */
  .np { display: none; }
  .sc-1 { width: 62%; left: 0; }
  .sc-2 { width: 42%; right: 0; top: 24%; }
  .sc-3 { width: 48%; left: 6%; top: 56%; }
  .sc-4 { width: 34%; right: 4%; top: 70%; }
  .story-collage { height: 130vw; }
  .board-head, .board-row { grid-template-columns: 1fr 1fr; }
  .board-head span:last-child, .board-row .type { display: none; }
  .crowd { grid-template-columns: 1fr; gap: .1em; }
  .vj-head, .plan-head, .faq, .crate-story { grid-template-columns: 1fr; }
  .vj-rig { grid-template-columns: 1fr; }
  .beatcheck { grid-template-columns: 1fr auto; }
  .beatcheck-copy { grid-column: 1 / -1; }
  .plan-steps { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .plan-arc { display: none; }
  .crowdfx { height: 26vh; }
  .tapzone-inner { translate: 0 -16vh; }
  .tapzone { background: radial-gradient(circle at 50% 34%, rgba(6,5,7,.25) 0 20%, rgba(6,5,7,.62) 70%); }
  .cf { width: max(150%, 900px); }
  .rewind-copy { width: auto; right: var(--gutter); }
  .rewind-copy .lede { display: none; }
  .rewind-stack { right: 50%; translate: 50% -36%; width: min(40vh, 70vw); top: 56%; }
  .rw-cap { right: 50%; translate: 50% 0; width: min(40vh, 70vw); top: calc(56% + min(40vh, 70vw) * .9); }
  .rewind-year { font-size: 22vw; }
}
@media (max-width: 640px) {
  .ledwall { grid-template-columns: repeat(2, 1fr); }
  .tile:nth-child(n) { transform: none; }
  .tile:nth-child(even) { transform: translateY(24px); }
  .formats { grid-template-columns: 1fr; }
  .rig { grid-template-columns: 1fr 1fr; padding: 12px; gap: 10px; border-radius: 18px; }
  .deck-top { flex-wrap: wrap; }
  .deck-vibes button { padding: 5px 6px; font-size: 9px; }
  .deck-foot span:last-child { display: none; }
  .mixer-mid { grid-template-columns: auto 1fr; }
  .tempo-wrap { grid-column: 1 / -1; }
  .pads { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .pad { font-size: 9px; padding: 6px; aspect-ratio: 1.3; }
  .pad kbd { display: none; }
  .rig-keys { display: none; }
  .hero-kicker { gap: 14px; letter-spacing: .24em; }
  .hero-kicker span + span::before { margin-right: 14px; }
  .scroll-cue { display: none; }
  .flap { width: 12px; height: 20px; font-size: 11px; }
  .drop-names li { font-size: 14vw; white-space: normal; }
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .fx-grain { display: none; }
  .story-text .w { opacity: 1; }
}