/* FUSE — the world is the canvas; everything here floats on it.
   Two faces: Archivo (expanded for names and headings, normal for reading) and
   JetBrains Mono for the small print only: indices, labels, readouts.
   Two lights: acid for what you can press and what is live, violet for the brand.
   Hairlines, not boxes; light falling, not paint sitting. Layout per room is at the bottom. */

@font-face { font-family: "Archivo"; src: url(../fonts/archivo-var.woff2) format("woff2-variations"), url(../fonts/archivo-var.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #07030c;
  --ink: #f3ecff;
  --ink-2: rgba(243, 236, 255, 0.76);
  --ink-3: rgba(243, 236, 255, 0.56);
  --line: rgba(243, 236, 255, 0.13);
  --line-2: rgba(243, 236, 255, 0.26);
  --acid: #b6ff3f;
  --acid-hi: #cfff7a;
  --ring: #e3f53c;
  --violet: #dc28fc;
  --panel: rgba(11, 5, 19, 0.56);
  --pad: clamp(18px, 2.6vw, 40px);
  --bar: 80px;
  --hud: 76px;
  --kick: 0;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --arr-in: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M1 7h11M7.5 2.5 12 7l-4.5 4.5' fill='none' stroke='black' stroke-width='1.5'/></svg>");
  --arr-out: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 11 11 3M4.5 3H11v6.5' fill='none' stroke='black' stroke-width='1.5'/></svg>");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  color: var(--ink); font: 400 15px/1.55 var(--text); font-stretch: 100%;
  overflow: hidden; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums;
}
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
/* the pointer: the system's own, wearing FUSE's dart. It is drawn by the OS, so it moves exactly as fast as the hand.
   Three declarations each: an SVG for the browsers that take one, then sharp PNGs for a retina screen (the last one a browser understands wins). */
html { cursor: url(../img/cur/a.svg) 3 2, url(../img/cur/a.png) 3 2, auto; cursor: -webkit-image-set(url(../img/cur/a.png) 1x, url(../img/cur/a@2x.png) 2x) 3 2, auto; cursor: image-set(url("../img/cur/a.png") 1x, url("../img/cur/a@2x.png") 2x) 3 2, auto; }
a, button, label, summary, [role="tab"], [role="option"], .pin, .stage.is-hot { cursor: url(../img/cur/go.svg) 3 2, url(../img/cur/go.png) 3 2, pointer; cursor: -webkit-image-set(url(../img/cur/go.png) 1x, url(../img/cur/go@2x.png) 2x) 3 2, pointer; cursor: image-set(url("../img/cur/go.png") 1x, url("../img/cur/go@2x.png") 2x) 3 2, pointer; }
input, textarea { cursor: url(../img/cur/text.svg) 16 16, url(../img/cur/text.png) 16 16, text; cursor: -webkit-image-set(url(../img/cur/text.png) 1x, url(../img/cur/text@2x.png) 2x) 16 16, text; cursor: image-set(url("../img/cur/text.png") 1x, url("../img/cur/text@2x.png") 2x) 16 16, text; }
.stage.is-dragging { cursor: url(../img/cur/pan.svg) 16 16, url(../img/cur/pan.png) 16 16, grabbing; cursor: -webkit-image-set(url(../img/cur/pan.png) 1x, url(../img/cur/pan@2x.png) 2x) 16 16, grabbing; cursor: image-set(url("../img/cur/pan.png") 1x, url("../img/cur/pan@2x.png") 2x) 16 16, grabbing; }
button:disabled, .is-calling .call { cursor: url(../img/cur/a.svg) 3 2, url(../img/cur/a.png) 3 2, auto; cursor: -webkit-image-set(url(../img/cur/a.png) 1x, url(../img/cur/a@2x.png) 2x) 3 2, auto; cursor: image-set(url("../img/cur/a.png") 1x, url("../img/cur/a@2x.png") 2x) 3 2, auto; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dim { color: var(--ink-3); }
:focus { outline: none; }
:focus-visible { outline: 1.5px solid var(--acid); outline-offset: 4px; }
[tabindex="-1"]:focus-visible { outline: none; } /* headings we move focus to after a route */
::selection { background: var(--violet); color: #fff; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 80; padding: 16px; background: var(--acid); color: #0a0410; text-decoration: none; font: 700 12px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; }
.skip:focus { top: 12px; }

/* the display face: expanded, heavy, set tight. One treatment, everywhere a name or a heading is */
.disp, .bio__name, .profile__name, .about__h, .phone__h, .stat b {
  font-family: var(--text); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em;
}
/* words that rise out of a slot */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.04em 0.06em; margin: -0.08em -0.04em -0.06em; }
.w > span { display: inline-block; transform: translate3d(0, 110%, 0); }
.is-shown .w > span, .w.is-shown > span { transform: none; transition: transform 1s var(--expo) calc(var(--i, 0) * 70ms + var(--d, 0ms)); }

/* the small print */
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 11px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow--sm { font-size: 10.5px; }
.eyebrow__n { color: var(--acid); }

/* ── the world ─────────────────────────────────────────────────────── */
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; background: var(--bg); }
.stage { position: fixed; inset: 0; z-index: 1; touch-action: none; }
body[data-room="artists"] .stage, body[data-room="contact"] .stage { touch-action: pan-y; }
.scrim { position: fixed; inset: 0; z-index: 1; pointer-events: none; transition: opacity 0.8s var(--ease); background:
  linear-gradient(180deg, rgba(7, 3, 12, 0.62) 0, rgba(7, 3, 12, 0) 150px),
  linear-gradient(0deg, rgba(7, 3, 12, 0.62) 0, rgba(7, 3, 12, 0) 150px); }

/* one degradation pass over everything, the panels included: the page and the world are one picture */
.grain {
  position: fixed; inset: -60px; z-index: 70; pointer-events: none; opacity: 0.075; mix-blend-mode: overlay;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 240px 240px;
  animation: grain 0.8s steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-28px, 14px); } 40% { transform: translate(18px, -24px); } 60% { transform: translate(-12px, 30px); } 80% { transform: translate(26px, 8px); } 100% { transform: translate(0, 0); } }

/* ── top bar ───────────────────────────────────────────────────────── */
.bar {
  position: fixed; z-index: 32; top: 0; left: 0; right: 0; height: var(--bar);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: env(safe-area-inset-top) var(--pad) 0; pointer-events: none;
}
.bar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; min-height: 44px; line-height: 0; }
.brand__logo { width: clamp(108px, 9.4vw, 146px); height: auto; overflow: visible; visibility: hidden; --mark-fill: url(#fuseFlat); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); transition: transform 0.4s var(--expo); }
.no-chrome .brand__logo { visibility: visible; }
.brand:hover .brand__logo { transform: translateY(-1px); }
/* on the alley the big mark is the brand; the corner link stays, empty, for keyboards */
body[data-room="alley"] .brand__logo { opacity: 0; }

/* ── the mark: FUSE in live chrome ─────────────────────────────────────
   js/mark.js paints it; app.js lays its box over a slot (the gate, the alley's
   lockup, the corner of the bar) and flies it between them. The GL canvas is
   larger than the box by the map's padding, so the glow has room. */
.mark { position: fixed; left: 0; top: 0; z-index: 9; width: 0; height: 0; pointer-events: none; transform-origin: 0 0; opacity: 0; transition: opacity 0.6s var(--ease); }
.mark.is-on { opacity: 1; }
.mark.is-flying { transition: transform 1s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.6s var(--ease); }
.mark__gl { position: absolute; left: -4.6875%; top: -22.857%; width: 109.375%; height: 145.714%; display: block; }
.mark__fx { position: absolute; display: block; }
.no-chrome .mark { display: none; }
.is-gated .mark { z-index: 61; }
/* in the gate it comes out of the crack: shut to a line, then opened past its sparks */
.mark.is-cut { clip-path: inset(50% -20% 50% -20%); }
.mark.is-cut.is-cutting { clip-path: inset(-170% -20% -170% -20%); transition: clip-path 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.6s var(--ease); }
.flat { display: none; }
.no-chrome .flat { display: block; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 38px); }
.nav__grp { position: relative; display: flex; }
.nav__a {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px;
  font: 600 12px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ink-2);
  text-shadow: 0 1px 14px rgba(7, 3, 12, 0.9); transition: color 0.25s;
}
.nav__a { white-space: nowrap; }
.nav__n { font: 400 10px/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-3); transition: color 0.25s; }
.nav__a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: var(--acid); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--expo); }
.nav__a:hover { color: var(--ink); }
.nav__a[aria-current="page"] { color: var(--ink); }
.nav__a[aria-current="page"] .nav__n { color: var(--acid); }
.nav__a[aria-current="page"]::after { transform: scaleX(1); }
/* booking is the one lit key in the bar, in reach from every room. In the booth it is already pressed, so it goes
   dark and the sheet's own key is the lit one. Its number is kept for the alley's pin to read, not shown. */
.nav .nav__book { --notch: 9px; min-height: 44px; padding: 0 20px; margin-left: clamp(0px, 0.6vw, 10px); letter-spacing: 0.16em; }
.nav__book .nav__n { display: none; }
.nav__book[aria-current="page"], .nav__book[aria-current="page"]:hover { background: #0c1604; color: var(--acid); box-shadow: inset 0 0 0 1.5px var(--acid); }
.nav__book[aria-current="page"]::before { display: none; }
/* the roster, out of its own word: reach for Artists and everyone is there. A pointer only; a finger gets the club. */
.menu {
  position: absolute; z-index: 2; top: calc(50% + var(--bar) / 2); left: -24px; width: 304px; padding: 4px 24px 12px;
  background: linear-gradient(180deg, rgba(12, 5, 21, 0.9), rgba(8, 3, 14, 0.95));
  -webkit-backdrop-filter: blur(26px) saturate(1.25); backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 var(--line-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}
.menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--bar) / 2); } /* the pointer's way down to it */
.menu__h { display: flex; justify-content: space-between; margin: 0; padding: 14px 0 10px; border-bottom: 1px solid var(--line-2); font: 400 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.menu a {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px 0 0; border-bottom: 1px solid var(--line);
  font: 800 13.5px/1.1 var(--text); font-stretch: 125%; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; color: var(--ink); transition: color 0.25s, padding 0.5s var(--expo);
}
.menu a:last-child { border-bottom: 0; }
.menu a i { font: normal 400 10px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); transition: color 0.25s; }
.menu a span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu a .arr { opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.45s var(--expo); }
.menu a:hover, .menu a:focus-visible { color: var(--acid); padding-left: 6px; padding-right: 0; }
.menu a:hover i, .menu a:focus-visible i { color: var(--acid); }
.menu a:hover .arr, .menu a:focus-visible .arr { opacity: 1; transform: none; }
.menu a:focus-visible { outline: 1.5px solid var(--ring); outline-offset: -1px; }
/* WHAT COUNTS AS A PHONE, everywhere below and in app.js (`narrow`): a screen up to 860 wide, or a phone on its side, up to
   960 wide and no taller than 480. An iPhone 16 Pro turned over is 874 wide and a Pro Max 956, and MEASURED 2026-10-08 at
   932x430 they were given the desktop's club, roof and booth squeezed into 430px, one thing on top of another. */
@media (min-width: 961px), (min-width: 861px) and (min-height: 481px) {
  body:not(.is-touch) .nav__grp:not(.is-shut):hover .menu, body:not(.is-touch) .nav__grp:not(.is-shut):focus-within .menu {
    opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s var(--ease), transform 0.5s var(--expo), visibility 0s;
  }
}

/* ── buttons ───────────────────────────────────────────────────────── */
.arr { display: inline-block; flex: none; width: 12px; height: 12px; font-size: 0; background: currentColor; -webkit-mask: var(--arr-in) center / contain no-repeat; mask: var(--arr-in) center / contain no-repeat; transition: transform 0.45s var(--expo); }
.arr--out { -webkit-mask-image: var(--arr-out); mask-image: var(--arr-out); }
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px;
  border: 1px solid var(--line-2); background: rgba(11, 5, 19, 0.42); color: var(--ink);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 600 12px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn:hover { border-color: rgba(243, 236, 255, 0.5); background: rgba(243, 236, 255, 0.08); }
.btn:hover .arr { transform: translateX(3px); }
.btn:hover .arr--out, .link:hover .arr--out { transform: translate(2px, -2px); }
/* the one lit control: a solid acid key with its corner cut, a sheen crossing it when you reach for it */
.btn--acid {
  --notch: 11px; border: 0; background: var(--acid); color: #0a0410; overflow: hidden;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.btn--acid::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.6) 50%, transparent 68%); transform: translateX(-110%); transition: transform 0.9s var(--expo); pointer-events: none; }
.btn--acid:hover { background: var(--acid-hi); border: 0; }
.btn--acid:hover::before { transform: translateX(110%); }
.btn--acid:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #0a0410, inset 0 0 0 3.5px var(--acid); }
.btn--wide { width: 100%; }
.btn--quiet { border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink-2); }
.btn--quiet:hover { border-color: var(--line); color: var(--ink); background: rgba(243, 236, 255, 0.05); }
/* a quiet way through: text, a hairline under it, the arrow */
.link {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 2px;
  font: 600 12px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap;
}
.link::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 12px; height: 1px; background: var(--line-2); transition: background 0.3s; }
.link:hover::after { background: var(--acid); }
.link:hover .arr { transform: translateX(3px); }

/* ── pins: hotspots nailed into the scene ──────────────────────────── */
/* No boxes: a sight bracketed onto the thing, a hairline out of it, the words in the air.
   The dark behind the words is smoke (a radial falloff), not a panel. */
.pins, .edges { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.pin {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; translate: 0 -50%;
  text-decoration: none; color: var(--ink); pointer-events: auto; will-change: transform;
  padding: 0; border: 0; background: none; text-align: left; /* some are buttons */
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.pin.is-on { opacity: 1; }
.pin:focus-visible { outline: none; }
/* the sight: four corner brackets that breathe, and a live core */
.pin__mark { position: relative; flex: none; width: 30px; height: 30px; margin: -15px 0 -15px -15px; }
.pin__mark::before {
  content: ""; position: absolute; inset: 0; --c: rgba(243, 236, 255, 0.9);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 8px 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 8px 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 8px 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px 8px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 8px 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 8px no-repeat;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.9));
  animation: breathe 3.2s var(--ease) infinite; transition: inset 0.45s var(--expo);
}
.pin__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--acid); box-shadow: 0 0 calc(5px + var(--kick) * 12px) rgba(182, 255, 63, calc(0.55 + var(--kick) * 0.35));
  transition: transform 0.4s var(--expo);
}
@keyframes breathe { 0%, 100% { inset: 0; } 50% { inset: -4px; } }
/* the hairline draws out of the sight when the pin comes into view */
.pin__lead {
  flex: none; width: 30px; height: 1px; margin-left: 4px;
  background: linear-gradient(90deg, rgba(243, 236, 255, 0.85), rgba(243, 236, 255, 0.25));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.55s var(--expo) 0.1s, background 0.3s;
}
.pin.is-on .pin__lead { transform: none; }
.pin__label { position: relative; display: grid; gap: 5px; padding: 8px 6px 8px 10px; white-space: nowrap; }
.pin__label::before {
  content: ""; position: absolute; inset: -22px -34px -22px -26px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 3, 12, 0.7), rgba(7, 3, 12, 0.42) 55%, rgba(7, 3, 12, 0));
}
.pin__t, .pin__s { clip-path: inset(0 100% 0 0); transition: clip-path 0.6s var(--expo) 0.28s, color 0.3s; }
.pin__s { transition-delay: 0.4s, 0s; }
.pin.is-on .pin__t, .pin.is-on .pin__s { clip-path: inset(0 -2px 0 0); }
.pin__t { display: flex; align-items: baseline; gap: 10px; font: 600 12px/1.1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9); }
.pin__n { font: 400 10px/1 var(--mono); letter-spacing: 0.08em; color: var(--acid); }
.pin__s { font: 400 10px/1.1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
/* locking on */
.pin:hover .pin__mark::before, .pin:focus-visible .pin__mark::before { animation: none; inset: 6px; --c: var(--acid); }
.pin:hover .pin__mark::after, .pin:focus-visible .pin__mark::after { transform: scale(1.5); }
.pin:hover .pin__lead, .pin:focus-visible .pin__lead { background: var(--acid); }
.pin:hover .pin__t, .pin:focus-visible .pin__t { color: var(--acid); }
.pin:focus-visible .pin__label::after { content: ""; position: absolute; left: 10px; right: 6px; bottom: 2px; height: 1px; background: var(--acid); }
/* near the right edge the words go on the other side */
.pin--left { flex-direction: row-reverse; translate: -100% -50%; }
.pin--left .pin__mark { margin: -15px -15px -15px 0; }
.pin--left .pin__lead { margin: 0 4px 0 0; transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(243, 236, 255, 0.85), rgba(243, 236, 255, 0.25)); }
.pin--left .pin__label { padding: 8px 10px 8px 6px; text-align: right; justify-items: end; }
.pin--left .pin__t, .pin--left .pin__s { clip-path: inset(0 0 0 100%); }
.pin--left.is-on .pin__t, .pin--left.is-on .pin__s { clip-path: inset(0 0 0 -2px); }
.pin--left:focus-visible .pin__label::after { left: 6px; right: 10px; }

/* off-screen pins: a slim strip at the edge of the screen, read along it, that takes you there */
.edge {
  position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 44px; padding: 16px 0; border: 0; background: none; color: var(--ink); translate: 0 -50%;
  font: 600 10px/1 var(--text); letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95);
  pointer-events: auto; opacity: 0; transition: opacity 0.3s; will-change: transform;
}
.edge.is-on { opacity: 1; }
.edge::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(transparent, var(--acid) 30%, var(--acid) 70%, transparent); opacity: 0.8; }
.edge::after { content: ""; position: absolute; inset: 0 -8px; z-index: -1; }
.edge--l { left: 0; background: linear-gradient(90deg, rgba(7, 3, 12, 0.6), rgba(7, 3, 12, 0)); }
.edge--r { right: 0; background: linear-gradient(270deg, rgba(7, 3, 12, 0.6), rgba(7, 3, 12, 0)); }
.edge--l::before { left: 0; }
.edge--r::before { right: 0; }
.edge__t { writing-mode: vertical-rl; white-space: nowrap; }
.edge--l .edge__t { rotate: 180deg; }
.edge b { color: var(--acid); font: 400 14px/1 var(--text); }
.edge:hover .edge__t, .edge:focus-visible .edge__t { color: var(--acid); }
.edge:focus-visible { outline: 1px solid var(--acid); outline-offset: -1px; }

/* ── HUD ───────────────────────────────────────────────────────────── */
.hud {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: var(--hud);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 var(--pad) env(safe-area-inset-bottom); pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud__drag { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); pointer-events: none; }
.hud__arr { color: var(--ink-3); font-size: 13px; }
.hud__mouse { position: relative; width: 18px; height: 28px; border: 1px solid var(--ink-2); border-radius: 9px; }
.hud__mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; background: var(--acid); border-radius: 1px; animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.is-touch .hud__mouse { border-radius: 50% 50% 45% 45%; width: 18px; height: 22px; }
.hud__back { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: 600 11.5px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); transition: color 0.25s; }
.hud__key { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line-2); background: rgba(9, 4, 16, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color 0.25s, color 0.25s; }
.hud__key svg { width: 12px; height: 12px; transition: transform 0.4s var(--expo); }
.hud__back:hover { color: var(--ink); }
.hud__back:hover .hud__key { border-color: var(--acid); color: var(--acid); }
.hud__back:hover .hud__key svg { transform: translateX(-2px); }
body[data-room="alley"] .hud__back, body:not([data-room="alley"]) .hud__drag { display: none; }

/* sound: five bars that stand still when it is off and dance on the kick when it is on */
.sound { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 2px; border: 0; background: none; font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
.sound:hover { color: var(--ink); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 22px; height: 14px; }
.eq i { flex: 1; height: 2px; background: currentColor; transform-origin: 50% 100%; transition: height 0.3s var(--ease); }
.sound[aria-pressed="true"] { color: var(--ink); }
.sound[aria-pressed="true"] .eq i { background: var(--acid); height: 100%; animation: eq 0.9s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .eq i:nth-child(2) { animation-duration: 0.62s; animation-delay: -0.3s; }
.sound[aria-pressed="true"] .eq i:nth-child(3) { animation-duration: 0.8s; animation-delay: -0.5s; }
.sound[aria-pressed="true"] .eq i:nth-child(4) { animation-duration: 0.55s; animation-delay: -0.1s; }
.sound[aria-pressed="true"] .eq i:nth-child(5) { animation-duration: 0.74s; animation-delay: -0.4s; }
@keyframes eq { from { transform: scaleY(0.18); } to { transform: scaleY(1); } }

/* ── rooms ─────────────────────────────────────────────────────────── */
main { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.room { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); }
.room.is-in { opacity: 1; }
.room a, .room button, .room input, .room textarea, .room form, .room [data-hit] { pointer-events: auto; }
/* a room's quiet furniture rises in after the room */
.rise { opacity: 0; transform: translateY(10px); }
.is-in .rise, .rise.is-shown { opacity: 1; transform: none; transition: opacity 0.8s var(--ease) var(--d, 0ms), transform 1s var(--expo) var(--d, 0ms); }

/* ALLEY */
body[data-room="alley"] .scrim { background:
  radial-gradient(56% 34% at 50% 26%, rgba(7, 3, 12, 0.55), rgba(7, 3, 12, 0) 100%),
  linear-gradient(180deg, rgba(7, 3, 12, 0.62) 0, rgba(7, 3, 12, 0) 170px),
  linear-gradient(0deg, rgba(7, 3, 12, 0.62) 0, rgba(7, 3, 12, 0) 150px); }
.hero {
  --mw: min(56vw, 1060px, 100vh * 0.95 - 60px); /* the club's sign stays clear under the button */
  position: absolute; left: 50%; top: calc(var(--bar) + 3vh); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.8vh, 28px); width: var(--mw); max-width: calc(100vw - 32px); text-align: center;
}
.lockup { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: clamp(10px, 1.6vh, 16px); }
.lockup__mark { width: 100%; aspect-ratio: 2048 / 420; }
.lockup__flat { width: 100%; height: auto; overflow: visible; --mark-fill: url(#fuseFlat); filter: drop-shadow(0 0 26px rgba(220, 40, 252, 0.45)) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7)); }
.lockup__sub { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); margin: 0; font: 500 clamp(11px, 1.15vw, 17px)/1 var(--text); font-stretch: 125%; text-transform: uppercase; color: var(--ink); text-shadow: 0 2px 12px rgba(7, 3, 12, 0.9); }
.lockup__sub span { letter-spacing: 0.9em; margin-right: -0.9em; }
.lockup__sub i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(220, 40, 252, 0), rgba(220, 40, 252, 0.85)); }
.lockup__sub i:last-child { background: linear-gradient(270deg, rgba(220, 40, 252, 0), rgba(220, 40, 252, 0.85)); }
.hero__line { margin: 0; text-wrap: balance; font: 500 clamp(11px, 0.95vw, 14px)/1.6 var(--text); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-2); text-shadow: 0 2px 18px rgba(7, 3, 12, 0.95), 0 0 2px rgba(7, 3, 12, 0.9); }
.hero__why { margin: 10px auto 0; max-width: 46ch; text-wrap: balance; font: 400 clamp(13px, 1.05vw, 16px)/1.5 var(--text); color: var(--ink-2); text-shadow: 0 2px 18px rgba(7, 3, 12, 0.95), 0 0 2px rgba(7, 3, 12, 0.9); }
.hero__cta { min-height: 52px; padding: 0 28px; }
.room--alley .hero > * { transform: translateY(10px); opacity: 0; transition: transform 1s var(--expo), opacity 0.9s var(--ease); }
.room--alley .hero > .lockup { transform: none; } /* the chrome is laid over this box; it must not move under it */
.room--alley.is-in .hero > * { transform: none; opacity: 1; }
.room--alley.is-in .hero > :nth-child(2) { transition-delay: 0.35s; }
.room--alley.is-in .hero > :nth-child(3) { transition-delay: 0.5s; }

/* CLUB — the roster */
body[data-room="artists"] .scrim { background:
  linear-gradient(90deg, rgba(7, 3, 12, 0.9) 0, rgba(7, 3, 12, 0.66) 24%, rgba(7, 3, 12, 0.2) 38%, rgba(7, 3, 12, 0) 48%),
  linear-gradient(270deg, rgba(7, 3, 12, 0.86) 0, rgba(7, 3, 12, 0.5) 17%, rgba(7, 3, 12, 0) 30%),
  linear-gradient(0deg, rgba(7, 3, 12, 0.88) 0, rgba(7, 3, 12, 0) 26%); }

.beams { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: calc(0.32 + var(--kick) * 0.5); overflow: hidden; }
.beams i {
  position: absolute; top: -8vh; left: 50%; width: 120vh; height: 120vh; margin-left: -60vh; transform-origin: 50% 0;
  background: conic-gradient(from 171deg at 50% 0, rgba(220, 40, 252, 0) 0deg, rgba(220, 40, 252, 0.55) 9deg, rgba(220, 40, 252, 0) 18deg);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 88%); mask-image: linear-gradient(180deg, #000 10%, transparent 88%);
  animation: beam 7s ease-in-out infinite alternate;
}
.beams i:nth-child(1) { --a: 26deg; left: 38%; animation-duration: 6.2s; }
.beams i:nth-child(2) { --a: 10deg; left: 48%; background: conic-gradient(from 172deg at 50% 0, rgba(182, 255, 63, 0) 0deg, rgba(182, 255, 63, 0.36) 8deg, rgba(182, 255, 63, 0) 16deg); animation-duration: 8.1s; }
.beams i:nth-child(3) { --a: -10deg; left: 60%; animation-duration: 7.3s; animation-delay: -3s; }
.beams i:nth-child(4) { --a: -26deg; left: 70%; background: conic-gradient(from 172deg at 50% 0, rgba(182, 255, 63, 0) 0deg, rgba(182, 255, 63, 0.36) 8deg, rgba(182, 255, 63, 0) 16deg); animation-duration: 6.7s; animation-delay: -2s; }
@keyframes beam { from { transform: rotate(calc(var(--a) - 7deg)); } to { transform: rotate(calc(var(--a) + 7deg)); } }
.club__flash { position: absolute; left: var(--stage-x, 54%); top: 52%; width: 70vh; height: 70vh; margin: -35vh 0 0 -35vh; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(243, 255, 220, 0.7), rgba(182, 255, 63, 0.3) 35%, rgba(182, 255, 63, 0) 70%); mix-blend-mode: screen; }
.club__flash.is-on { animation: flash 0.7s ease-out; }
@keyframes flash { from { opacity: 0.6; transform: scale(0.55); } to { opacity: 0; transform: scale(1.35); } }

/* the artist on stage */
.room--artists { --stage-x: 55%; }
.has-profile .room--artists { --stage-x: 29%; }
.lineup { position: absolute; left: var(--stage-x); bottom: -9vh; width: min(84vh, 54vw); aspect-ratio: 960 / 1200; transform: translateX(-50%); pointer-events: none; will-change: transform; transition: left 1.1s var(--expo); }
.fig { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 0.5s var(--ease), transform 0.9s var(--expo), filter 0.7s; filter: brightness(1.8) saturate(0); }
.fig.is-on { opacity: 1; transform: none; filter: none; animation: arrive 0.9s var(--expo); }
@keyframes arrive { from { transform: translateY(10px) scale(1.03); filter: brightness(1.9) saturate(0); } 50% { filter: brightness(1.15) saturate(0.8); } }
/* everyone fades into the floor, tint and rim with them */
/* with WebGL the club paints them itself (world.js); these stay as the fallback */
.gl-figs .fig { display: none; }
.gl-figs .beams { display: none; } /* the rig is painted in the club itself, behind the artist */
.fig > div { -webkit-mask-image: linear-gradient(0deg, transparent 8%, #000 30%); mask-image: linear-gradient(0deg, transparent 8%, #000 30%); }
.fig__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: contrast(1.04); }
/* the light on them is their own colour (--artist, from data.js), with only a breath of the club's acid from the side door */
.fig__tint { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: 0.6;
  background: linear-gradient(100deg, var(--artist, #dc28fc) 0, transparent 55%, rgba(182, 255, 63, 0.35) 100%);
  -webkit-mask: var(--cut) center bottom / contain no-repeat; mask: var(--cut) center bottom / contain no-repeat; }
.fig__rim { position: absolute; inset: 0; mix-blend-mode: screen; opacity: calc(0.16 + var(--kick) * 0.2);
  background: radial-gradient(60% 40% at 50% 0%, var(--artist, #dc28fc), transparent 70%);
  -webkit-mask: var(--cut) center bottom / contain no-repeat; mask: var(--cut) center bottom / contain no-repeat; }

/* who is on stage: one column, read top to bottom */
.bio {
  position: absolute; left: var(--pad); top: calc(var(--bar) + 1vh); bottom: calc(var(--hud) + 1vh); width: min(560px, 37vw);
  display: flex; flex-direction: column; justify-content: center; pointer-events: auto;
  transition: opacity 0.5s var(--ease), visibility 0s;
}
.bio__idx { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(14px, 2.4vh, 24px); font: 400 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.bio__idx b { font-weight: 400; color: var(--acid); }
.bio__track { position: relative; width: 72px; height: 1px; background: var(--line-2); }
.bio__track i { position: absolute; left: 0; top: -0.5px; height: 2px; width: calc(100% / var(--of)); transform: translateX(calc(100% * var(--at))); background: var(--acid); transition: transform 0.7s var(--expo); }
.bio__name { margin: 0; font-size: clamp(44px, 7vw, 116px); line-height: 0.9; color: var(--ink); overflow-wrap: normal; }
.bio__name .w > span { background: linear-gradient(180deg, #fff 30%, #e2d2ff 100%); background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--artist, #dc28fc) 24%, #fff) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bio__where { margin: clamp(14px, 2.2vh, 22px) 0 0; font: 500 14px/1.45 var(--text); color: var(--ink); }
.bio__where span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px; vertical-align: 3px; background: var(--artist, var(--violet)); }
.bio__sound { margin: 6px 0 0; font: 400 10.5px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.bio__line { margin: clamp(16px, 2.6vh, 26px) 0 0; max-width: 30ch; font: 400 clamp(17px, 1.45vw, 21px)/1.35 var(--text); color: var(--ink-2); }
.bio .stats { margin: clamp(18px, 3vh, 30px) 0 0; }
.bio__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: clamp(20px, 3.4vh, 34px) 0 0; }
/* a swap: the old one lifts away, the new one rises in, line by line */
.bio > * { transition: opacity 0.45s var(--ease), transform 0.8s var(--expo); }
.bio > :nth-child(3) { transition-delay: 0.14s; } .bio > :nth-child(4) { transition-delay: 0.18s; }
.bio > :nth-child(5) { transition-delay: 0.22s; } .bio > :nth-child(6) { transition-delay: 0.26s; }
.bio > :nth-child(7) { transition-delay: 0.3s; }
.bio.is-out > :not(.bio__idx) { opacity: 0; transform: translateY(-8px); transition-duration: 0.16s; transition-delay: 0s; }
.bio.is-fresh > :not(.bio__name):not(.bio__idx) { opacity: 0; transform: translateY(10px); transition: none; }
.has-profile .bio { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; } /* the profile says it all, bigger */

.stats { display: flex; margin: 0; }
.stat { min-width: 0; padding: 2px clamp(18px, 2vw, 30px) 0; border-left: 1px solid var(--line-2); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat b { display: block; font-size: clamp(24px, 2.1vw, 32px); line-height: 1; font-weight: 700; color: var(--ink); white-space: nowrap; }
.stat span { display: block; margin-top: 8px; font: 400 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

/* the whole roster, by name: hover to put them on stage, click to read them */
.roster { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); width: clamp(236px, 21vw, 312px); pointer-events: auto; transition: opacity 0.4s var(--ease), visibility 0s; }
.has-profile .roster { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
.roster__h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; font: 400 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.roster__count { color: var(--ink-3); }
.roster__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.roster__item {
  position: relative; display: grid; grid-template-columns: 38px 22px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 10px 8px 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--ink-2);
  transition: color 0.3s, padding 0.5s var(--expo);
}
.roster__item::before { content: ""; position: absolute; inset: 0 0 -1px -16px; background: linear-gradient(90deg, rgba(182, 255, 63, 0.14), rgba(182, 255, 63, 0) 72%); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.roster__item::after { content: ""; position: absolute; left: -16px; top: 0; bottom: -1px; width: 2px; background: var(--acid); transform: scaleY(0); transition: transform 0.5s var(--expo); }
.roster__face { position: relative; display: block; width: 38px; height: 46px; overflow: hidden; background: #110e15; }
.roster__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1) brightness(0.62) contrast(1.1); transition: filter 0.4s; }
.roster__n { font: 400 10px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); transition: color 0.3s; }
/* a long name takes a second line (it has the height of the face beside it to do it in): MEASURED 2026-10-08, the first
   name on the roster read "BLURRED MOVEME…" on every screen narrower than 1290 */
.roster__name { min-width: 0; font: 600 13px/1.2 var(--text); font-stretch: 112%; letter-spacing: 0.06em; text-transform: uppercase; transition: transform 0.5s var(--expo); }
.roster__item:hover { color: var(--ink); }
.roster__item:hover .roster__face img { filter: grayscale(0.4) brightness(0.85); }
.roster__item[aria-selected="true"] { color: var(--ink); }
.roster__item[aria-selected="true"]::before { opacity: 1; }
.roster__item[aria-selected="true"]::after { transform: scaleY(1); }
.roster__item[aria-selected="true"] .roster__face img { filter: none; }
.roster__item[aria-selected="true"] .roster__n { color: var(--acid); }
.roster__item[aria-selected="true"] .roster__name { transform: translateX(4px); }
.roster__item:focus-visible { outline-offset: -1px; }
.roster__keys { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font: 400 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.roster__keys span { margin: 0 4px; }
.roster__keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line-2); font: inherit; letter-spacing: 0; color: var(--ink-2); }
.is-touch .roster__keys { display: none; }


/* WALL — transmissions */
/* The posters are printed into the picture (world.js); this is the strip that reads the chosen one out, and the
   corner brackets that mark it. */
body[data-room="transmissions"] .scrim { background:
  linear-gradient(180deg, rgba(7, 3, 12, 0.72) 0, rgba(7, 3, 12, 0) 170px),
  linear-gradient(0deg, rgba(7, 3, 12, 0.94) 0, rgba(7, 3, 12, 0.8) 150px, rgba(7, 3, 12, 0) 330px); }
.room__title { position: absolute; left: var(--pad); top: calc(var(--bar) + 2px); display: flex; align-items: center; gap: 14px; margin: 0; }
.room__count { font: 400 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--acid); }
.frames { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.room .frames, .room .frame, .frame * { pointer-events: none; } /* the stage answers for them: a drag must still pan the wall */
.frame { outline: none; }
.frame__hit { fill: transparent; }
.frame__br { fill: none; stroke: var(--acid); stroke-width: 1.5; opacity: 0; transition: opacity 0.35s var(--ease); filter: drop-shadow(0 0 4px rgba(182, 255, 63, 0.5)); }
.frame.is-sel .frame__br { opacity: 1; }
.frame:focus-visible .frame__br { stroke: var(--ring); stroke-width: 2.5; opacity: 1; }
.tx { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--hud) + 8px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.tx__meta { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.tx__n { padding: 4px 7px 3px; background: var(--acid); color: #0a0410; font-weight: 700; letter-spacing: 0.1em; }
.tx__date { color: var(--ink-3); }
.tx__date:empty { display: none; }
.tx__t { margin: 0 0 8px; font-size: clamp(26px, 2.9vw, 46px); line-height: 0.95; text-shadow: 0 2px 24px rgba(7, 3, 12, 0.8); }
.tx__b { margin: 0; max-width: 74ch; color: var(--ink-2); font-size: clamp(14px, 1.1vw, 16px); }
.tx__main.is-swap > * { animation: txswap 0.55s var(--expo) both; }
.tx__main.is-swap > :nth-child(2) { animation-delay: 0.04s; }
.tx__main.is-swap > :nth-child(3) { animation-delay: 0.08s; }
@keyframes txswap { from { opacity: 0; transform: translateY(8px); } }
.tx__foot { display: flex; align-items: center; gap: 10px; }
.tx__nav { display: flex; gap: 6px; }
.tx .sq { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(7, 3, 12, 0.4); }

/* ROOF — about */
/* Four channels. Each is wired to something on the roof: a hairline runs from the strip to it, and it rings. */
body[data-room="about"] .scrim { background:
  linear-gradient(90deg, rgba(7, 3, 12, 0.9) 0, rgba(7, 3, 12, 0.62) 34%, rgba(7, 3, 12, 0) 60%),
  linear-gradient(0deg, rgba(7, 3, 12, 0.85) 0, rgba(7, 3, 12, 0) 26%); }
.about { position: absolute; left: var(--pad); top: calc(var(--bar) + 4vh); bottom: calc(var(--hud) + 64px); width: min(620px, 46vw); display: flex; flex-direction: column; align-items: stretch; pointer-events: none; }
.about > * { flex: none; }
.about__h { margin: clamp(14px, 2.4vh, 24px) 0 clamp(14px, 2.6vh, 26px); font-size: clamp(30px, 3vw, 44px); line-height: 0.94; }
.about__p { margin: 0 0 14px; max-width: 44ch; color: var(--ink-2); font-size: clamp(15px, 1.12vw, 17px); line-height: 1.6; }
.about__p:first-of-type { max-width: 34ch; color: var(--ink); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.45; }
/* the two teams FUSE is made of, side by side */
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 4px 0 18px; }
.side { padding: 14px 0 0; border-top: 1px solid var(--line-2); }
.side__k { margin: 0 0 8px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acid); }
.side__who { margin: 0 0 6px; font: 800 clamp(16px, 1.3vw, 19px)/1.1 var(--text); font-stretch: 125%; text-transform: uppercase; color: var(--ink); }
.side__p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
/* the rest of a team, one line each under its leads: Dylan and Isa joined the creative side 2026-10-06 */
.side__also { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.side__also b { margin-right: 7px; font: 800 12.5px/1 var(--text); font-stretch: 125%; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.about__names { margin: 12px 0 0; font: 500 15px/1.75 var(--text); color: var(--ink); }
.about__names span { white-space: nowrap; }
.about__names span:not(:last-child)::after { content: "/"; margin: 0 4px 0 10px; color: var(--ink-3); font-weight: 400; }
.about__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: auto; }
.about > * { opacity: 0; transform: translateY(10px); }
.room--about.is-in .about > * { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 1s var(--expo); }
.room--about.is-in .about > :nth-child(3) { transition-delay: 0.3s; } .room--about.is-in .about > :nth-child(4) { transition-delay: 0.36s; }
.room--about.is-in .about > :nth-child(5) { transition-delay: 0.42s; }
.chan { display: flex; gap: clamp(14px, 1.7vw, 26px); border-bottom: 1px solid var(--line-2); }
.chan__tab {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0; border: 0; background: none;
  font: 600 12px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; transition: color 0.25s;
}
.chan__tab i { font: normal 400 10px/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-3); transition: color 0.25s; }
.chan__tab b { font: 400 10px/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-3); }
.chan__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--acid); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--expo); }
.chan__tab:hover { color: var(--ink); }
.chan__tab[aria-selected="true"] { color: var(--ink); }
.chan__tab[aria-selected="true"] i { color: var(--acid); }
.chan__tab[aria-selected="true"]::after { transform: none; }
.chan__tab:focus-visible { outline: 1.5px solid var(--ring); outline-offset: 2px; }
/* the four panels share one cell, so the way out below them never moves; a short screen scrolls the one showing */
.chan__panels { flex: 0 1 auto; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; margin: clamp(14px, 2.4vh, 24px) 0 clamp(16px, 2.8vh, 28px); }
.chan__p { grid-area: 1 / 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(182, 255, 63, 0.4) transparent; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s; }
.chan__p.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity 0.5s var(--ease) 0.1s, transform 0.7s var(--expo) 0.1s; }
.chan__p > :last-child { margin-bottom: 0; }
.room--about .about > *, .room--about .about a, .room--about .about button { pointer-events: auto; }
.lead { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 0.5s var(--ease); }
.lead.is-on { opacity: 1; }
.lead path { fill: none; stroke: var(--acid); stroke-width: 1.25; filter: drop-shadow(0 0 4px rgba(182, 255, 63, 0.7)); }
/* the thing on the roof this channel is wired to */
.pin.is-cur .pin__mark::before { --c: var(--acid); animation-duration: 1.6s; }
.pin.is-cur .pin__lead { background: linear-gradient(90deg, var(--acid), rgba(182, 255, 63, 0.25)); }
.pin[data-act="ch"] .pin__label::before, .pin[data-act="dial"] .pin__label::before { background: radial-gradient(closest-side, rgba(7, 3, 12, 0.86), rgba(7, 3, 12, 0.6) 55%, rgba(7, 3, 12, 0)); } /* these sit on lit metal */
.pin--left.is-cur .pin__lead { background: linear-gradient(270deg, var(--acid), rgba(182, 255, 63, 0.25)); }
.ticker { position: absolute; left: 0; right: 0; bottom: calc(var(--hud) + 6px); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(7, 3, 12, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.ticker__track { display: flex; align-items: center; width: max-content; padding: 13px 0; animation: tick 70s linear infinite; }
.ticker__track span { display: inline-flex; align-items: center; gap: 10px; padding: 0 26px; font: 600 11.5px/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.ticker__track span::after { content: ""; width: 4px; height: 4px; margin-left: 42px; background: var(--acid); }
.ticker__track span b { font: 400 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--ink-3); }
@keyframes tick { to { transform: translateX(-50%); } }

/* BOOTH — contact */
/* The payphone in the picture works (world.js prints its screen and keys, Pay in app.js presses them). Beside it is
   the booking sheet: one column, plain labels over boxes you can see, faces to tap, one button. */
body[data-room="contact"] .scrim { background:
  linear-gradient(270deg, rgba(7, 3, 12, 0.5) 0, rgba(7, 3, 12, 0) 58%),
  linear-gradient(180deg, rgba(7, 3, 12, 0.55) 0, rgba(7, 3, 12, 0) 150px); }
.phone {
  --tick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='m2.5 6.2 2.3 2.3L9.6 3.7' fill='none' stroke='%230a0410' stroke-width='1.8'/></svg>");
  position: absolute; right: 0; top: var(--bar); bottom: var(--hud); width: min(540px, 44vw);
  display: flex; flex-direction: column; padding: 24px var(--pad) 22px 34px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(182, 255, 63, 0.4) transparent; scroll-padding-bottom: 120px;
  background: radial-gradient(70% 30% at 0 0, rgba(220, 40, 252, 0.13), transparent 72%), linear-gradient(180deg, rgba(12, 5, 21, 0.88), rgba(8, 3, 14, 0.94));
  -webkit-backdrop-filter: blur(26px) saturate(1.25); backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: inset 1px 0 0 var(--line-2);
}
.phone > * { flex-shrink: 0; }
.phone__h { margin: 12px 0 8px; font-size: clamp(28px, 2.4vw, 38px); line-height: 0.95; }
.phone__lede { margin: 0 0 18px; max-width: 42ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.phone__p { margin: 0 0 24px; max-width: 42ch; font-size: 15px; color: var(--ink-2); }
.phone__p b { font-weight: 600; color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* a field: a plain label over a box you can see */
.field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.field > span, .field legend { padding: 0; font: 600 12.5px/1.2 var(--text); letter-spacing: 0.01em; color: var(--ink-2); }
.field legend { margin: 0 0 9px; }
.field input, .field textarea {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 2px; background: rgba(243, 236, 255, 0.04);
  font: 400 16px/1.4 var(--text); color: var(--ink); resize: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.field textarea { display: block; padding: 11px 14px; overflow-y: auto; }
.field input::placeholder, .field textarea::placeholder { color: rgba(243, 236, 255, 0.34); }
.field input:hover, .field textarea:hover { border-color: rgba(243, 236, 255, 0.44); }
.field input:focus, .field textarea:focus { border-color: var(--acid); background: rgba(243, 236, 255, 0.06); box-shadow: 0 0 0 1px var(--acid); outline: none; }
.field input.is-bad, .field input.is-bad:focus { border-color: #ff6b8a; box-shadow: 0 0 0 1px #ff6b8a; }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }
.field__msg { font: 500 12.5px/1.3 var(--text); color: #ff8aa2; }
.field__msg:empty { display: none; }
.row { display: grid; gap: 0 14px; }
.row--2 { grid-template-columns: 1fr 1fr; }
.row--3 { grid-template-columns: 1fr 1fr 1.3fr; }

/* who: their faces, tap any (or none) */
.field--who { margin-bottom: 18px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 40px; min-width: 0; max-width: 100%; padding: 0 14px 0 4px;
  border: 1px solid var(--line-2); border-radius: 2px; background: rgba(243, 236, 255, 0.03); color: var(--ink-2);
  font: 600 11.5px/1 var(--text); letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.08s;
}
.pick__face { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: #17111e; font: 700 13px/1 var(--text); color: var(--ink-3); }
.pick__face img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.85); transition: filter 0.3s; }
.pick__face::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; background: var(--acid) var(--tick) center / 12px no-repeat; transform: scale(0); transition: transform 0.25s var(--expo); }
.pick__t { overflow: hidden; text-overflow: ellipsis; }
.pick:hover, .pick.is-at { border-color: rgba(243, 236, 255, 0.5); color: var(--ink); }
.pick:hover .pick__face img, .pick.is-at .pick__face img { filter: grayscale(0.3); }
.pick[aria-pressed="true"] { border-color: var(--acid); background: rgba(182, 255, 63, 0.1); color: var(--ink); }
.pick[aria-pressed="true"] .pick__face img { filter: none; }
.pick[aria-pressed="true"] .pick__face::after { transform: none; }
.pick:active { transform: scale(0.97); }
.pick.is-hit, .tag.is-hit { animation: tap 0.22s var(--ease); }
@keyframes tap { 0%, 40% { transform: scale(0.96); } 100% { transform: none; } }
.pick:focus-visible, .tag:focus-visible { outline: 1.5px solid var(--ring); outline-offset: 2px; }

/* who, already chosen: the artist you came from, on one line; Change opens the faces again */
.field--who.is-set legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field--who.is-set .picks { display: none; }
.chosen { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 9px 6px 9px 9px; border: 1px solid var(--acid); border-radius: 2px; background: rgba(182, 255, 63, 0.08); }
.chosen[hidden] { display: none; }
.chosen__faces { display: flex; flex: none; }
.chosen__faces img { width: 44px; height: 44px; object-fit: cover; background: #17111e; box-shadow: 0 0 0 2px #0d0812; }
.chosen__faces img + img { margin-left: -12px; }
.chosen__t { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.chosen__t small { font: 400 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acid); }
.chosen__t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.1 var(--text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.chosen__x { flex: none; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink-2); font: 600 12.5px/1 var(--text); letter-spacing: 0.02em; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; cursor: pointer; }
.chosen__x:hover { color: var(--ink); text-decoration-color: var(--acid); }
.chosen__x:focus-visible { outline: 1.5px solid var(--ring); outline-offset: -2px; }

/* the lighter ask: tick any */
.field--ask { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 2px 0 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 11px;
  border: 1px solid var(--line-2); border-radius: 2px; background: none; color: var(--ink-2);
  font: 600 12.5px/1 var(--text); transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.08s;
}
.tag::before { content: ""; flex: none; width: 13px; height: 13px; border: 1px solid rgba(243, 236, 255, 0.5); transition: background-color 0.2s, border-color 0.2s; }
.tag:hover, .tag.is-at { border-color: rgba(243, 236, 255, 0.5); color: var(--ink); }
.tag[aria-pressed="true"] { border-color: var(--acid); background: rgba(182, 255, 63, 0.1); color: var(--ink); }
.tag[aria-pressed="true"]::before { border-color: var(--acid); background: var(--acid) var(--tick) center / 11px no-repeat; }
.tag:active { transform: scale(0.97); }

/* the button never scrolls out of reach */
.phone__foot { position: sticky; bottom: -22px; margin: auto calc(var(--pad) * -1) 0 -34px; padding: 16px var(--pad) 10px 34px; background: linear-gradient(180deg, rgba(9, 4, 15, 0) 0, rgb(9, 4, 15) 16px); } /* solid under the key: nothing scrolling beneath ghosts through the note */
.phone__note { position: relative; margin: 0; font-size: 13px; color: var(--ink-3); text-align: center; } /* under the key, and only at the end of the sheet: the key alone stays pinned */
.phone__note a { color: var(--ink-2); }
.call { gap: 14px; min-height: 56px; font-size: 13px; letter-spacing: 0.18em; }
.is-calling .call, .is-calling .call:hover { background: #0c1604; color: var(--acid); box-shadow: inset 0 0 0 1.5px var(--acid); }
.is-calling .call::before { display: none; }
.is-calling .call .arr { animation: sending 0.7s var(--ease) infinite; }
@keyframes sending { from { transform: translateX(-4px); opacity: 0.3; } to { transform: translateX(5px); opacity: 1; } }

/* sent */
.done__tick { display: grid; place-items: center; width: 54px; height: 54px; margin: 30px 0 6px; background: var(--acid); color: #0a0410; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.done__tick svg { width: 28px; height: 28px; }
.phone--done:not(.is-sent) .done__tick { display: none; }
.phone--done .phone__h { margin-top: 18px; }
.done__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
button.link { border: 0; background: none; }

/* ── profile: the dossier ──────────────────────────────────────────── */
.profile {
  position: fixed; z-index: 30; top: var(--bar); right: 0; bottom: var(--hud); width: min(640px, 47vw); /* between bar and HUD: nav and sound stay in reach */
  background: linear-gradient(180deg, rgba(12, 5, 21, 0.86), rgba(8, 3, 14, 0.93));
  box-shadow: inset 1px 0 0 var(--line-2);
  -webkit-backdrop-filter: blur(26px) saturate(1.25); backdrop-filter: blur(26px) saturate(1.25);
  transform: translateX(102%); transition: transform 0.8s var(--expo);
}
/* the artist's own colour falls on it from the stage side, and a hairline of it runs down the edge they stand at */
.profile::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 36% at 0 0, rgba(220, 40, 252, 0.13), transparent 72%); background: radial-gradient(70% 36% at 0 0, color-mix(in srgb, var(--artist, #dc28fc) 15%, transparent), transparent 72%); }
.profile::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 38%; pointer-events: none; background: linear-gradient(180deg, var(--artist, #dc28fc), transparent); opacity: 0.7; }
.profile.is-in { transform: none; }
.profile { --px: clamp(24px, 2.8vw, 44px); }
.profile__scroll { position: relative; display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 22px var(--px) 0; scrollbar-width: thin; scrollbar-color: rgba(182, 255, 63, 0.4) transparent; }
.profile__body { flex: 1 0 auto; }
.profile__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 clamp(18px, 3vh, 30px); }
.profile__nav { display: flex; align-items: center; gap: 6px; }
.sq { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); background: none; color: var(--ink-2); transition: border-color 0.25s, color 0.25s, background 0.25s; }
.sq svg { width: 14px; height: 14px; }
.sq:hover { border-color: var(--acid); color: var(--acid); }
.sq--x { margin-left: 8px; }
.profile__photo { display: none; }
.profile__name { margin: 0; font-size: clamp(40px, 5vw, 92px); line-height: 0.9; }
.profile__line { margin: clamp(14px, 2.2vh, 22px) 0 0; max-width: 32ch; font: 400 clamp(18px, 1.5vw, 22px)/1.35 var(--text); color: var(--ink); }
.spec { display: grid; grid-template-columns: 1fr 1fr; margin: clamp(22px, 3.4vh, 32px) 0 0; border-top: 1px solid var(--line-2); }
.spec div { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.spec div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.spec div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.spec dt { font: 400 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { margin: 5px 0 0; font: 500 14px/1.4 var(--text); color: var(--ink); }
.profile .stats { margin: clamp(22px, 3.4vh, 32px) 0 0; }
.profile .stat b { font-size: clamp(28px, 2.6vw, 40px); }
.profile__bio { margin: clamp(22px, 3.4vh, 32px) 0 0; max-width: 58ch; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.profile h3 { display: flex; align-items: center; gap: 14px; margin: clamp(30px, 4.4vh, 42px) 0 12px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.profile h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tracks { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.tracks li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); counter-increment: t; }
.tracks li::before { content: counter(t, decimal-leading-zero); font: 400 10px/1 var(--mono); color: var(--ink-3); }
.tracks li:first-child { border-top: 1px solid var(--line); }
.tracks .t { font: 500 15px/1.35 var(--text); color: var(--ink); }
.tracks .p { font: 400 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-2); white-space: nowrap; }
.profile .about__names { margin: 0; }
.links { display: flex; flex-wrap: wrap; gap: 0 26px; }
/* tracks: cover, title, credit; the row is the play key and fills with the artist's tone as it plays */
.h3__note { font-size: 10px; letter-spacing: 0.08em; text-transform: none; color: var(--ink-3); }
.songs { list-style: none; margin: 0; padding: 0; }
.song { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.song:first-child { border-top: 1px solid var(--line); }
.song__play { position: relative; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.song__art { position: relative; width: 48px; height: 48px; overflow: hidden; background: #140b1f; }
.song__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s var(--ease); }
.song__ico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); background: rgba(7, 3, 12, 0.5); opacity: 0; transition: opacity 0.2s var(--ease); }
.song__ico svg { width: 16px; height: 16px; }
.song__ico .i-pause, .song.is-on .song__ico .i-play { display: none; }
.song.is-on .song__ico .i-pause { display: block; }
.song__play:hover .song__ico, .song__play:focus-visible .song__ico, .song.is-on .song__ico, .song.is-load .song__ico { opacity: 1; }
.song.is-on .song__ico { background: color-mix(in srgb, var(--artist, #dc28fc) 45%, rgba(7, 3, 12, 0.4)); }
.song.is-load .song__ico svg { animation: songload 0.9s ease-in-out infinite alternate; }
@keyframes songload { to { opacity: 0.25; } }
.song__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.song__t { font: 500 15px/1.25 var(--text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song.is-on .song__t { color: var(--artist, var(--ink)); }
.song__by { font: 400 12px/1.3 var(--text); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song__p { font: 400 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-2); white-space: nowrap; }
.song__bar { position: absolute; left: 62px; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.song__bar i { display: block; height: 100%; background: var(--artist, var(--violet)); transform: scaleX(0); transform-origin: 0 50%; }
.song.is-err .song__by::after { content: " · preview unavailable"; }
.song__out { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: 6px; color: var(--ink-3); }
.song__out:hover, .song__out:focus-visible { color: var(--ink); }
/* sets: a still from the set until it is pressed; then YouTube's own player, dark by nature */
.sets { display: grid; gap: 10px; }
.set { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0c0614; }
.set iframe { display: block; width: 100%; height: 100%; border: 0; }
.set__go { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.set__go img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.78); transition: transform 1.2s var(--expo), filter 0.5s var(--ease); }
.set__go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 3, 12, 0.92), rgba(7, 3, 12, 0) 58%), linear-gradient(120deg, color-mix(in srgb, var(--artist, #dc28fc) 26%, transparent), transparent 55%); }
.set__go:hover img, .set__go:focus-visible img { transform: scale(1.035); filter: saturate(1) brightness(0.9); }
.set__disc { position: absolute; z-index: 1; left: 50%; top: 44%; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(7, 3, 12, 0.55); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.3s var(--ease), transform 0.5s var(--expo); }
.set__disc svg { width: 20px; height: 20px; margin-left: 3px; }
.set__disc .i-pause { display: none; }
.set__go:hover .set__disc, .set__go:focus-visible .set__disc { background: var(--artist, var(--violet)); color: #0a0410; transform: scale(1.06); }
.set__cap { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.set__cap b { font: 800 clamp(17px, 1.5vw, 22px)/1.05 var(--text); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; }
.set__cap span { font: 400 12px/1.3 var(--text); color: var(--ink-2); }
.set__more { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.set__pick { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px 6px 6px; border: 0; background: rgba(243, 236, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); text-align: left; cursor: pointer; }
.set__pick img { width: 64px; height: 36px; object-fit: cover; display: block; }
.set__pick span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 400 11px/1.3 var(--text); color: var(--ink-3); }
.set__pick b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 13px/1.25 var(--text); color: var(--ink); }
.set__pick[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--artist, var(--violet)); }
.profile__book { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px 26px; margin: 28px calc(var(--px) * -1) 0; padding: 30px var(--px) calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(8, 3, 14, 0.98) 62%, rgba(8, 3, 14, 0)); }
.profile__book .btn { flex: 1 1 auto; min-width: 0; }
.profile__book .link { flex: none; }
.profile__body > * { opacity: 0; transform: translateY(12px); }
.profile.is-in .profile__body > * { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.9s var(--expo); }
.profile.is-in .profile__body > :nth-child(2) { transition-delay: 0.08s; } .profile.is-in .profile__body > :nth-child(3) { transition-delay: 0.14s; }
.profile.is-in .profile__body > :nth-child(4) { transition-delay: 0.2s; } .profile.is-in .profile__body > :nth-child(n+5) { transition-delay: 0.26s; }
.profile.is-in .profile__body.is-fresh > * { opacity: 0; transform: translateY(12px); transition: none; }

/* ── played at, played by, live (Raul, 2026-10-07) ─────────────────── */
/* a show: Clear's photo of it, square, in the artist's own light; the whole card opens the Instagram post */
.gigs { display: flex; gap: 12px; margin: 0; padding: 2px 0 10px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(182, 255, 63, 0.4) transparent; }
.gig { flex: none; width: var(--gw, clamp(138px, 19vh, 172px)); scroll-snap-align: start; }
.gig__a { display: flex; flex-direction: column; gap: 5px; height: 100%; color: var(--ink); text-decoration: none; }
.gig__img { position: relative; display: block; aspect-ratio: 1; margin-bottom: 5px; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--artist, #dc28fc) 32%, #120a1c), #0b0612 70%); }
.gig__img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) brightness(0.86); transition: transform 1.1s var(--expo), filter 0.5s var(--ease); }
.gig__img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(243, 236, 255, 0.08); background: linear-gradient(0deg, color-mix(in srgb, var(--artist, #dc28fc) 22%, transparent), transparent 46%); pointer-events: none; }
a.gig__a:hover .gig__img img, a.gig__a:focus-visible .gig__img img { transform: scale(1.05); filter: none; }
.gig__img--none img { object-position: 50% 0; filter: grayscale(1) brightness(0.5) contrast(1.1); mix-blend-mode: luminosity; opacity: 0.8; }
.gig__t { font: 800 13px/1.15 var(--text); font-stretch: 125%; letter-spacing: 0.01em; text-transform: uppercase; }
.gig__p { font: 400 12.5px/1.3 var(--text); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gig__d { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 3px; font: 400 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.gig__ig { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); transition: color 0.25s; }
.ig { width: 12px; height: 12px; flex: none; }
a.gig__a:hover .gig__ig, a.gig__a:focus-visible .gig__ig, .pb__list a:hover .gig__ig, .pb__list a:focus-visible .gig__ig { color: var(--acid); }
a.gig__a:focus-visible { outline-offset: 3px; }

/* the six faces as a chooser */
.faces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.face { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; border: 0; background: rgba(243, 236, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 600 11px/1 var(--text); font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.25s, box-shadow 0.25s, background 0.25s; }
.face img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #140b1f; filter: grayscale(1) brightness(0.8); transition: filter 0.3s; }
.face:hover { color: var(--ink); }
.face:hover img { filter: grayscale(0.3); }
.face[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--artist, #dc28fc) 14%, rgba(243, 236, 255, 0.03)); box-shadow: inset 0 0 0 1px var(--artist, var(--violet)); }
.face[aria-pressed="true"] img { filter: none; }
.face:focus-visible { outline-offset: 2px; }
.circ__more { margin: 2px 0 0; }

/* the roster channel: everyone, one row */
.crew { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.crew a { position: relative; display: flex; flex-direction: column; gap: 7px; color: var(--ink-2); text-decoration: none; transition: color 0.25s; }
.crew__img { position: relative; display: block; aspect-ratio: 5 / 6; overflow: hidden; background: #110e15; box-shadow: inset 0 -2px 0 transparent; }
.crew__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: grayscale(1) brightness(0.7) contrast(1.1); transition: filter 0.4s, transform 0.9s var(--expo); }
.crew__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--artist, var(--violet)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--expo); }
.crew a i { font: normal 400 10px/1 var(--mono); color: var(--ink-3); }
.crew a > span:last-child { font: 800 11.5px/1.15 var(--text); font-stretch: 112%; text-transform: uppercase; overflow-wrap: anywhere; }
.crew a:hover, .crew a:focus-visible { color: var(--ink); }
.crew a:hover .crew__img img, .crew a:focus-visible .crew__img img { filter: none; transform: scale(1.04); }
.crew a:hover .crew__img::after, .crew a:focus-visible .crew__img::after { transform: none; }
.crew__all { margin-top: 10px; }

/* played by: artist by artist, who, what happened, when */
.pb { display: grid; gap: 18px; }
.pb__a { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 18px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.pb__who { display: flex; align-items: center; gap: 10px; align-self: start; color: var(--ink); text-decoration: none; font: 800 12.5px/1.15 var(--text); font-stretch: 125%; text-transform: uppercase; }
.pb__who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--artist, var(--violet)); }
.pb__who:hover span { color: var(--acid); }
.pb__a > :not(.pb__who) { grid-column: 2; }
.pb__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pb__list a, .pb__list div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 7px 0 9px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pb__by { font: 800 14px/1.2 var(--text); font-stretch: 125%; text-transform: uppercase; letter-spacing: 0.01em; }
.pb__by b { font-weight: inherit; }
.pb__and { color: var(--ink-3); font-weight: 400; }
.pb__what { grid-column: 1; font: 400 13px/1.45 var(--text); color: var(--ink-2); }
.pb__d { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; padding-top: 2px; font: 400 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pb__list a:hover .pb__by { color: var(--acid); }
.pb__also { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 8px 0 0; }
.pb__also > span:first-child { font: 400 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.pb__also .about__names { margin: 0; font-size: 14px; line-height: 1.6; }
.profile .pb__list, .profile .pb__also { grid-column: auto; }

/* the gig loop: ten seconds of a big night, before anything else on their page */
.live { position: relative; aspect-ratio: 16 / 9; margin: 0 0 clamp(18px, 3vh, 28px); overflow: hidden; background: #0c0614; }
.live video { display: block; width: 100%; height: 100%; object-fit: cover; }
.live::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(243, 236, 255, 0.08); background: linear-gradient(0deg, rgba(8, 3, 14, 0.85), rgba(8, 3, 14, 0) 42%), linear-gradient(160deg, color-mix(in srgb, var(--artist, #dc28fc) 22%, transparent), transparent 40%); }
.live__cap { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 700 10.5px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.live__cap i, .card__live i { width: 7px; height: 7px; border-radius: 50%; background: #ff3d5a; box-shadow: 0 0 10px #ff3d5a; animation: livedot 1.6s ease-in-out infinite; }
.live__cap span { font-weight: 400; letter-spacing: 0.1em; color: var(--ink-2); }
@keyframes livedot { 50% { opacity: 0.35; } }
.live__go { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; transition: opacity 0.3s; }
.live.is-on .live__go { opacity: 0; pointer-events: none; }
.live__go:hover .set__disc { background: var(--artist, var(--violet)); color: #0a0410; }

/* next dates: the routing a promoter is working around */
.dates { list-style: none; margin: 0; padding: 0; }
.dates li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font: 500 14px/1.35 var(--text); color: var(--ink); }
.dates li:first-child { border-top: 1px solid var(--line); }
.dates time { font: 400 11px/1.6 var(--mono); letter-spacing: 0.06em; color: var(--ink-2); white-space: nowrap; }
.dates .is-big span { font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: 0.02em; }
.dates .is-big time { color: var(--ink); font-weight: 700; }
.profile .gigs { margin-right: calc(var(--px) * -1); padding-right: var(--px); }

/* ── the roster, all at once ───────────────────────────────────────── */
.all { position: fixed; z-index: 30; top: var(--bar); left: 0; right: 0; bottom: var(--hud); background: linear-gradient(180deg, rgba(12, 5, 21, 0.9), rgba(8, 3, 14, 0.95)); -webkit-backdrop-filter: blur(26px) saturate(1.25); backdrop-filter: blur(26px) saturate(1.25); box-shadow: inset 0 1px 0 var(--line-2), inset 0 -1px 0 var(--line); opacity: 0; transition: opacity 0.45s var(--ease); }
.all.is-in { opacity: 1; }
.all__in { display: flex; flex-direction: column; height: 100%; padding: clamp(14px, 2.6vh, 28px) var(--pad) clamp(14px, 2.4vh, 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(182, 255, 63, 0.4) transparent; }
.all__top { display: flex; align-items: center; gap: 18px; margin: 0 0 clamp(14px, 2.4vh, 24px); }
.all__h { margin: 0; font: 800 clamp(26px, 2.6vw, 40px)/0.95 var(--text); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em; }
.all__top .sq { flex: none; }
.all__n { flex: 1; margin: 0; white-space: nowrap; font: 400 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.all__grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); min-height: 0; margin: 0; padding: 0; list-style: none; }
.all__grid > li { min-height: 0; }
.card { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--ink); text-decoration: none; transform: translateY(14px); opacity: 0; transition: opacity 0.6s var(--ease), transform 0.9s var(--expo); }
.all.is-in .card { transform: none; opacity: 1; }
.all.is-in li:nth-child(2) .card { transition-delay: 0.04s; } .all.is-in li:nth-child(3) .card { transition-delay: 0.08s; } .all.is-in li:nth-child(4) .card { transition-delay: 0.12s; }
.all.is-in li:nth-child(5) .card { transition-delay: 0.16s; } .all.is-in li:nth-child(6) .card { transition-delay: 0.2s; }
.card__media { position: relative; flex: 1 1 auto; min-height: 140px; max-height: 62vh; margin-bottom: 8px; overflow: hidden; background: #110e15; }
.card__media img, .card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media img { filter: saturate(0.85) brightness(0.9); transition: transform 1.2s var(--expo), filter 0.5s; }
.card__media video { opacity: 0; transition: opacity 0.4s var(--ease); }
.card.is-live .card__media video { opacity: 1; }
.card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, color-mix(in srgb, var(--artist, #dc28fc) 30%, rgba(8, 3, 14, 0.6)), transparent 40%); box-shadow: inset 0 -2px 0 var(--artist, var(--violet)); }
.card:hover .card__media img, .card:focus-visible .card__media img { transform: scale(1.04); filter: none; }
.card__live { position: absolute; z-index: 1; left: 10px; top: 10px; max-width: calc(100% - 20px); overflow: hidden; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; background: rgba(7, 3, 12, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 700 9.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.card__live span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: var(--ink-2); }
.card__n { font: 400 10px/1 var(--mono); color: var(--ink-3); }
.card__name { font: 800 clamp(14px, 1.15vw, 18px)/1.05 var(--text); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.card__sound { font: 400 10px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.card__stat { display: flex; align-items: baseline; gap: 7px; font: 400 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.card__stat b { font: 800 16px/1 var(--text); font-stretch: 125%; color: var(--ink); letter-spacing: 0; }
.card:hover .card__name, .card:focus-visible .card__name { color: var(--acid); }
.card:focus-visible { outline-offset: 4px; }
.has-all .room--artists .bio, .has-all .room--artists .roster { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }

/* the ways to everyone at once */
.roster__all { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; margin: -10px -4px -10px 0; padding: 0 4px; color: var(--ink-2); text-decoration: none; transition: color 0.25s; }
.roster__all:hover, .roster__all:focus-visible { color: var(--acid); }
.roster__all .roster__count { color: inherit; }
.grid { width: 13px; height: 13px; flex: none; }
.roster__allm { display: none; }
.menu .menu__all { color: var(--acid); }
.menu__all i { display: inline-flex; color: inherit; }
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 30px; }
.hero__link { text-shadow: 0 2px 14px rgba(7, 3, 12, 0.95); }

@media (max-width: 860px), (max-width: 960px) and (max-height: 480px) {
  .gig { --gw: 142px; }
  /* a phone: the six faces in one row you swipe, not four rows of chips above the shows */
  .faces { flex-wrap: nowrap; overflow-x: auto; margin-right: -18px; padding-right: 18px; scrollbar-width: none; }
  .faces::-webkit-scrollbar { display: none; }
  .face { flex: none; }
  .all__h { font-size: 26px; }
  .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
  .pb__a { grid-template-columns: minmax(0, 1fr); }
  .pb__a > :not(.pb__who) { grid-column: 1; }
  .live { margin: 0 -18px 18px; }
  /* a phone: the loop is where the press photo was, and the name rises over its foot */
  .profile .live + .profile__name { margin-top: -50px; position: relative; z-index: 2; }
  .live__cap { top: 12px; bottom: auto; }
  .dates li { grid-template-columns: 92px minmax(0, 1fr); font-size: 13.5px; }
  .all__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; }
  .card__media { flex: none; aspect-ratio: 4 / 5; min-height: 0; }
  .roster { display: flex; align-items: stretch; gap: 6px; }
  .roster__list { flex: 1; min-width: 0; }
  .roster__allm { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 44px; margin-bottom: 6px; color: var(--ink-2); text-decoration: none; font: 400 9.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line-2); }
  .roster__allm .grid { width: 16px; height: 16px; }
}
@media (max-width: 1100px) and (min-width: 961px), (max-width: 1100px) and (min-width: 861px) and (min-height: 481px) {
  .all__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card__media { flex: none; aspect-ratio: 4 / 5; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .live__cap i, .card__live i { animation: none; } .card { transform: none; } }


/* ── press kits (Harry, 2026-10-08) ────────────────────────────────── */
/* The wall again, under glass. On the left, whose kit; on the right, the kit: its name, the two downloads, then the
   photos as a contact sheet and the biography beside it. A phone gets the same things in one column: the six faces
   in a row that stays at the top, and both downloads on the first screen. */
.press {
  --rail-r: clamp(16px, 1.7vw, 28px);
  position: absolute; top: var(--bar); left: 0; right: 0; bottom: var(--hud);
  display: grid; grid-template-columns: clamp(252px, 23vw, 336px) minmax(0, 1fr);
  background: linear-gradient(180deg, rgba(12, 5, 21, 0.88), rgba(8, 3, 14, 0.94));
  -webkit-backdrop-filter: blur(26px) saturate(1.25); backdrop-filter: blur(26px) saturate(1.25);
  box-shadow: inset 0 1px 0 var(--line-2), inset 0 -1px 0 var(--line);
}
.press__rail { display: flex; flex-direction: column; min-height: 0; padding: clamp(16px, 2.8vh, 28px) var(--rail-r) clamp(14px, 2.4vh, 22px) var(--pad); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(182, 255, 63, 0.4) transparent; }
.press__h { margin: 0; font: 800 clamp(26px, 2.6vw, 40px)/0.95 var(--text); font-stretch: 125%; text-transform: uppercase; letter-spacing: -0.02em; }
.press__lede { margin: 12px 0 clamp(12px, 2.2vh, 22px); max-width: 30ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.press__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
/* one artist: their face, their name, how much there is to take */
.pk { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "face name" "face meta"; column-gap: 13px; align-content: center; min-height: clamp(52px, 7.4vh, 66px); padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); text-decoration: none; transition: color 0.25s, padding 0.45s var(--expo); }
.pk__face { grid-area: face; align-self: center; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #140b1f; filter: grayscale(1) brightness(0.78); transition: filter 0.3s, box-shadow 0.3s; }
.pk__n { display: none; }
.pk__name { grid-area: name; align-self: end; font: 800 clamp(11.5px, 0.94vw, 13.5px)/1.15 var(--text); font-stretch: 125%; letter-spacing: 0.005em; text-transform: uppercase; } /* a long name takes a second line: never cut short */
.pk__meta { grid-area: meta; align-self: start; margin-top: 5px; font: 400 10px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.pk:hover { color: var(--ink); padding-left: 5px; }
.pk:hover .pk__face { filter: grayscale(0.3); }
.pk[aria-current="true"] { color: var(--ink); }
.pk[aria-current="true"] .pk__face { filter: none; box-shadow: 0 0 0 1.5px #0d0812, 0 0 0 2.5px var(--artist, var(--violet)); }
/* the open kit lights the line between the two halves, in the artist's own colour */
.pk[aria-current="true"]::after { content: ""; position: absolute; right: calc(var(--rail-r) * -1 - 1px); top: -1px; bottom: -1px; width: 2px; background: var(--artist, var(--violet)); }
.pk:focus-visible { outline-offset: -1px; }
.press__all { margin-top: auto; padding-top: clamp(12px, 2.2vh, 20px); }
.press__all .dl { width: 100%; }

/* a download: what it is, over how heavy it is */
.dl { justify-content: flex-start; gap: 14px; min-height: 60px; padding: 0 22px 0 18px; text-align: left; }
.dl__i { flex: none; width: 16px; height: 16px; overflow: visible; }
.dl__i path { transition: opacity 0.25s, transform 0.45s var(--expo); transform-origin: 50% 50%; }
.dl__i .i-done { opacity: 0; transform: scale(0.6); }
.is-got > .dl__i .i-down, .is-got .shot__go .i-down { opacity: 0; transform: translateY(4px); }
.is-got > .dl__i .i-done, .is-got .shot__go .i-done { opacity: 1; transform: none; }
.dl:hover .dl__i .i-down { transform: translateY(1.5px); }
.dl__t { display: grid; gap: 6px; min-width: 0; }
.dl__t b { font: 700 12.5px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; }
.dl__t small { overflow: hidden; text-overflow: ellipsis; font: 400 10.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.btn--acid.dl small { color: rgba(10, 4, 16, 0.74); }

/* the kit */
.kit { position: relative; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(12px, 2.2vh, 22px) var(--pad) clamp(18px, 3vh, 30px) clamp(22px, 2.8vw, 46px); scrollbar-width: thin; scrollbar-color: rgba(182, 255, 63, 0.4) transparent; }
.kit::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 420px; pointer-events: none; background: radial-gradient(56% 78% at 0 0, rgba(220, 40, 252, 0.12), transparent 72%); background: radial-gradient(56% 78% at 0 0, color-mix(in srgb, var(--artist, #dc28fc) 13%, transparent), transparent 72%); }
.kit > * { position: relative; }
.kit__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 clamp(6px, 1.4vh, 14px); }
.kit__nav { display: flex; gap: 6px; }
.kit__name { margin: 0; font-size: clamp(34px, 4.7vw, 78px); line-height: 0.9; }
.kit__meta { display: flex; flex-wrap: wrap; gap: 6px 0; margin: clamp(12px, 2vh, 18px) 0 0; font: 400 11px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.kit__meta span:first-child { color: var(--ink); }
.kit__meta span + span::before { content: "\00b7"; margin: 0 10px; color: var(--ink-3); }
.kit__get { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(16px, 2.8vh, 28px) 0 0; }
.kit__get .dl { min-width: min(100%, 268px); }
.kit__cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 52px); margin-top: clamp(8px, 1.6vh, 16px); }
.kit__col { min-width: 0; }
.kit__k { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: clamp(10px, 1.8vh, 18px) 0 0; border-bottom: 1px solid var(--line); font: 400 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.kit__kn { margin-left: auto; letter-spacing: 0.08em; text-transform: none; color: var(--ink-3); }
.kit > *, .kit__col > * { transition: opacity 0.6s var(--ease), transform 0.85s var(--expo); }
.kit.is-fresh > :not(.kit__top):not(.kit__name), .kit.is-fresh .kit__col > * { opacity: 0; transform: translateY(10px); transition: none; }
.kit__col:nth-child(2) > * { transition-delay: 0.07s; }

/* the contact sheet: every frame whole, in rows that fill the width, numbered, with what each one weighs */
.sheet { --sh: clamp(126px, 19vh, 178px); display: flex; flex-wrap: wrap; gap: 14px 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.sheet > li { flex: var(--r, 0.667) 1 calc(var(--sh) * var(--r, 0.667)); min-width: 0; max-width: calc(var(--sh) * var(--r, 0.667) * 1.5); }
.sheet::after { content: ""; flex: 100 1 0; } /* the last row keeps its size instead of stretching */
.shot { display: block; color: var(--ink-2); text-decoration: none; }
.shot__img { position: relative; display: block; height: var(--sh); overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--artist, #dc28fc) 26%, #120a1c), #0b0612 70%); }
.shot__img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) brightness(0.9); transition: transform 1.1s var(--expo), filter 0.4s var(--ease); }
.shot__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(243, 236, 255, 0.1); transition: box-shadow 0.3s; }
.shot__go { position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--acid); color: #0a0410; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.45s var(--expo); }
.shot__go .dl__i { width: 13px; height: 13px; }
.shot:hover .shot__go, .shot:focus-visible .shot__go, .shot.is-got .shot__go { opacity: 1; transform: none; }
.shot:hover img, .shot:focus-visible img { transform: scale(1.045); filter: none; }
.shot:hover .shot__img::after, .shot:focus-visible .shot__img::after { box-shadow: inset 0 0 0 1px var(--acid); }
.shot:focus-visible { outline-offset: 3px; }
.shot__cap { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font: 400 10px/1 var(--mono); letter-spacing: 0.05em; white-space: nowrap; color: var(--ink-3); }
.shot__cap b { font-weight: 400; color: var(--ink-2); }
.shot:hover .shot__cap span { color: var(--acid); }
/* a finger has no hover: the way to take a frame is always on it, quietly */
.is-touch .shot__go { opacity: 1; transform: none; background: rgba(7, 3, 12, 0.72); color: var(--ink); }
.is-touch .shot.is-got .shot__go { background: var(--acid); color: #0a0410; }

/* the biography: the language you need, and one key to take it */
.langs { display: inline-flex; gap: 2px; margin-left: auto; }
.lang { min-width: 34px; height: 30px; padding: 0 6px; border: 0; background: none; font: 400 10.5px/1 var(--mono); letter-spacing: 0.08em; color: var(--ink-3); transition: color 0.25s, box-shadow 0.25s, background 0.25s; }
.lang:hover { color: var(--ink); }
.lang[aria-pressed="true"] { color: var(--ink); background: rgba(243, 236, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line-2); }
.lang:focus-visible, .copy:focus-visible { outline: 1.5px solid var(--ring); outline-offset: 2px; }
.copy { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; height: 30px; padding: 0 12px; border: 1px solid var(--line-2); background: none; font: 600 10.5px/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); transition: color 0.25s, border-color 0.25s; }
.kit__k > span:first-child + .copy { margin-left: auto; }
.copy:hover, .copy.is-got { border-color: var(--acid); color: var(--acid); }
.kit__bio { margin-top: 16px; max-width: 64ch; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.kit__bio p { margin: 0 0 12px; }
.kit__bio ::selection { background: var(--acid); color: #0a0410; }
.kit__more { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 6px; border-top: 1px solid var(--line); }

/* in a profile: the same two downloads, and the way to the photos one by one */
.pkit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pkit .dl { flex: 1 1 190px; min-height: 54px; }
.pkit .link { flex: none; }

@media (max-width: 1180px) and (min-width: 961px), (max-width: 1180px) and (min-width: 861px) and (min-height: 481px) {
  .kit__cols { grid-template-columns: minmax(0, 1fr); }
}
/* a profile's foot holds Book, Press kit and Fees: on a narrower screen the Book key drops the name it books, as it
   does on a phone, rather than lose the end of it (MEASURED at 1180: "Book BLURRED MOVEMENT" was 5px wider than its key) */
@media (max-width: 1300px) and (min-width: 961px), (max-width: 1300px) and (min-width: 861px) and (min-height: 481px) {
  .profile__book .bio__who { display: none; }
}
@media (max-width: 860px), (max-width: 960px) and (max-height: 480px) {
  .nav__more { display: none; }
  /* one column that scrolls as one: the title with the all-in-one zip beside it, the faces (they stay at the top as
     you read down), then the kit */
  /* (no padding over the top: the faces stick to the room's own edge, MEASURED 10px short of it with padding there) */
  .press { --px: 18px; display: block; padding: 0 var(--px) 28px; overflow-y: auto; overscroll-behavior: contain; }
  .press__rail { display: contents; }
  .press__h { display: flex; align-items: center; min-height: 44px; margin-top: 10px; font-size: 26px; }
  .press__lede { display: none; }
  .press__all { position: absolute; top: 10px; right: var(--px); margin: 0; padding: 0; }
  .press__all .dl { width: auto; min-height: 44px; gap: 9px; padding: 0 12px 0 11px; }
  .press__all .dl__t { gap: 4px; }
  .press__all .dl__t b { font-size: 10.5px; letter-spacing: 0.1em; }
  .press__all .dl__t small { font-size: 9.5px; }
  .dl__x { display: none; }
  .press__list { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; margin: 4px calc(var(--px) * -1) 0; padding: 8px var(--px) 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border: 0; background: linear-gradient(180deg, rgba(10, 4, 18, 0.98) 80%, rgba(10, 4, 18, 0)); }
  .press__list::-webkit-scrollbar { display: none; }
  .press__list > li { flex: none; }
  .pk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 5px; border: 0; background: rgba(243, 236, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
  .pk:hover { padding-left: 5px; }
  .pk__face { width: 34px; height: 34px; }
  .pk__name { align-self: center; font-size: 11.5px; white-space: nowrap; }
  .pk__meta { display: none; }
  .pk[aria-current="true"] { background: color-mix(in srgb, var(--artist, #dc28fc) 14%, rgba(243, 236, 255, 0.03)); box-shadow: inset 0 0 0 1px var(--artist, var(--violet)); }
  .pk[aria-current="true"] .pk__face { box-shadow: none; }
  .pk[aria-current="true"]::after { display: none; }
  .kit { overflow: visible; padding: 6px 0 0; }
  .kit::before { left: calc(var(--px) * -1); width: 100vw; height: 300px; }
  .kit__top { margin-bottom: 4px; }
  .kit__name { font-size: 40px; }
  /* the sound on its own line, what is in the kit under it: no line starts with a dot */
  .kit__meta { font-size: 10.5px; letter-spacing: 0.08em; }
  .kit__meta span:first-child { flex-basis: 100%; }
  .kit__meta span + span::before { margin: 0 7px; }
  .kit__meta span:nth-child(2)::before { display: none; }
  .kit__cols { margin-top: 0; }
  .kit__get { gap: 8px; margin-top: 16px; }
  .kit__get .dl { flex: 1 1 100%; min-height: 56px; }
  .kit__cols { grid-template-columns: minmax(0, 1fr); }
  /* the frames in one row you swipe, so the biography is a thumb away and not five rows down */
  .sheet { --sh: clamp(170px, 27vh, 230px); flex-wrap: nowrap; gap: 10px; margin: 14px calc(var(--px) * -1) 0; padding: 0 var(--px) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: var(--px); scrollbar-width: none; }
  .sheet::-webkit-scrollbar { display: none; }
  .sheet::after { display: none; }
  .sheet > li { flex: none; width: calc(var(--sh) * var(--r, 0.667)); max-width: none; scroll-snap-align: start; }
  .kit__k { flex-wrap: wrap; row-gap: 0; }
  .langs { order: 3; flex: 1 0 100%; margin: 0 0 6px -8px; gap: 0; }
  .lang { min-width: 44px; height: 44px; }
  .copy { height: 44px; min-width: 84px; margin: 6px 0 6px auto; }
  .kit__more { gap: 0 22px; }
  .pkit .dl { flex-basis: 150px; }
}
@media (pointer: coarse) {
  .lang { min-width: 44px; height: 44px; }
  .copy { height: 44px; }
}

/* ── boot ──────────────────────────────────────────────────────────── */
.is-booting .bar, .is-booting .hud, .is-booting main, .is-booting .pins { opacity: 0; }
.bar, .hud, .pins { transition: opacity 0.9s var(--ease); }
.is-booting .brand__logo { filter: none; }
.noscript { position: fixed; inset: auto 20px 20px; z-index: 40; }

/* ── the way in: dark, a crack of light, FUSE comes out of it ──────── */
.gate { display: none; }
.is-gated .gate { display: block; position: fixed; inset: 0; z-index: 60; overflow: hidden; --lw: min(66vw, 780px); }
.is-gated .bar, .is-gated .hud, .is-gated main, .is-gated .pins, .is-gated .edges { opacity: 0; }
.gate__half {
  position: absolute; inset: 0; will-change: transform;
  background: radial-gradient(60% 34% at 50% 50%, rgba(220, 40, 252, 0.1), rgba(220, 40, 252, 0) 70%), repeating-linear-gradient(0deg, rgba(243, 236, 255, 0.018) 0 1px, transparent 1px 3px), var(--bg);
  transition: transform 1.15s cubic-bezier(0.75, 0, 0.18, 1);
}
.is-open .gate__half--top { transform: translateY(-3px); }
.is-open .gate__half--bot { transform: translateY(3px); }
.is-going .gate__half--top { transform: translateY(-64%); }
.is-going .gate__half--bot { transform: translateY(64%); }
.gate__crack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity 0.5s ease 0.15s; }
.gate__run {
  fill: none; stroke: #f7ffe9; stroke-width: 1.6; stroke-linejoin: bevel; stroke-dashoffset: var(--len, 2000); stroke-dasharray: var(--len, 2000);
  filter: drop-shadow(0 0 4px var(--acid)) drop-shadow(0 0 18px rgba(182, 255, 63, 0.7));
}
.is-spark .gate__run { stroke-dashoffset: 0; transition: stroke-dashoffset 0.85s cubic-bezier(0.6, 0, 0.3, 1) 0.25s; animation: gateFlick 1.1s steps(1) 0.1s both; }
.is-going .gate__run { stroke-width: 7; transition: stroke-width 0.16s ease-out; }
.is-going .gate__crack { opacity: 0; }
@keyframes gateFlick { 0% { opacity: 0 } 12% { opacity: 1 } 18% { opacity: 0.15 } 26% { opacity: 1 } 34% { opacity: 0.4 } 40%, 100% { opacity: 1 } }

.gate__mark { position: absolute; left: 50%; top: 50%; width: var(--lw); aspect-ratio: 2048 / 420; transform: translate(-50%, -50%); }
.gate__logo {
  position: absolute; left: 50%; top: 50%; width: var(--lw); height: auto; overflow: visible; color: var(--violet); --mark-fill: url(#fuseFlat);
  transform: translate(-50%, -50%); transform-origin: 50% 50%;
  clip-path: inset(50% -12% 50% -12%);
  filter: drop-shadow(0 0 34px rgba(220, 40, 252, 0.55));
  transition: clip-path 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.05s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.35s, filter 0.6s;
}
.is-open .gate__logo { clip-path: inset(-30% -12% -30% -12%); animation: gateGlitch 3.4s steps(1) 0.2s infinite; }
.is-going .gate__logo { animation: none; filter: drop-shadow(0 0 14px rgba(220, 40, 252, 0.45)); }
.is-gone .gate__logo { opacity: 0; }
@keyframes gateGlitch {
  0%, 100% { translate: 0 0; filter: drop-shadow(0 0 34px rgba(220, 40, 252, 0.55)); }
  3% { translate: -7px 0; filter: drop-shadow(5px 0 0 rgba(182, 255, 63, 0.9)) drop-shadow(-5px 0 0 rgba(60, 200, 255, 0.8)); }
  5% { translate: 5px 1px; }
  7% { translate: 0 0; filter: drop-shadow(0 0 34px rgba(220, 40, 252, 0.55)); }
  61% { translate: 3px 0; filter: drop-shadow(-3px 0 0 rgba(182, 255, 63, 0.8)) drop-shadow(3px 0 0 rgba(60, 200, 255, 0.7)); }
  63% { translate: 0 0; filter: drop-shadow(0 0 34px rgba(220, 40, 252, 0.55)); }
}

.gate__core {
  position: absolute; left: 0; right: 0; top: calc(50% + var(--lw) * 0.103 + clamp(26px, 4vh, 44px));
  display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3.4vh, 34px); padding: 0 var(--pad); text-align: center;
  opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease) 0.55s, transform 0.6s var(--ease) 0.55s;
}
.is-open .gate__core { opacity: 1; transform: none; }
.is-going .gate__core { opacity: 0; transition-delay: 0s; transition-duration: 0.25s; }
.gate__tag { margin: 0; text-wrap: balance; font: 500 clamp(11px, 1vw, 13px)/1.6 var(--text); letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink); }
.gate__slot { display: grid; justify-items: center; }
.gate__slot > * { grid-area: 1 / 1; }
.gate__load { display: flex; align-items: center; gap: 14px; margin: 0; min-height: 48px; font: 400 10.5px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); transition: opacity 0.3s, visibility 0s 0.3s; }
.gate__pct { min-width: 3ch; font: 700 14px/1 var(--mono); letter-spacing: 0.04em; color: var(--acid); font-variant-numeric: tabular-nums; text-align: right; }
.gate__bar { position: relative; width: clamp(90px, 14vw, 180px); height: 1px; background: var(--line-2); overflow: hidden; }
.gate__bar i { position: absolute; inset: 0; background: var(--acid); transform-origin: 0 50%; transform: scaleX(0); }
.gate__what { min-width: 17ch; text-align: left; }
.gate__enter { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s 0.45s; }
.is-ready .gate__load { opacity: 0; visibility: hidden; pointer-events: none; }
.is-ready .gate__enter { opacity: 1; visibility: visible; transform: none; transition-delay: 0.1s, 0.1s, 0s; }
.gate__ico { width: 7px; height: 7px; border-radius: 50%; background: currentColor; font-size: 0; animation: gatePulse 1s ease-in-out infinite; }
@keyframes gatePulse { 50% { opacity: 0.35; } }
@media (max-width: 560px) {
  .is-gated .gate { --lw: 82vw; }
  .gate__enter { flex-direction: column; align-items: stretch; width: min(320px, 100%); }
  .gate__what { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gate__logo { clip-path: none; transition: opacity 0.3s; }
  .is-open .gate__logo { animation: none; }
  .gate__half, .gate__crack { transition: opacity 0.35s; }
  .is-going .gate__half--top, .is-going .gate__half--bot { transform: none; opacity: 0; }
  .is-spark .gate__run { transition: none; animation: none; }
}

/* ── narrow screens ────────────────────────────────────────────────── */
@media (max-width: 1100px) and (min-width: 961px), (max-width: 1100px) and (min-width: 861px) and (min-height: 481px) {
  .nav__n { display: none; }
}
@media (max-width: 860px), (max-width: 960px) and (max-height: 480px) {
  :root { --bar: 64px; --hud: 62px; }
  body { font-size: 14px; }
  .nav { gap: 14px; }
  .nav__n { display: none; }
  .nav__a { justify-content: center; min-width: 44px; font-size: 10.5px; letter-spacing: 0.08em; }
  .nav__a::after { bottom: 11px; }
  .nav .nav__book { padding: 0 14px; margin-left: 0; font-size: 10.5px; letter-spacing: 0.1em; }
  .menu { display: none; }
  .brand__logo { width: 92px; }
  .hud__back { font-size: 11px; white-space: nowrap; }
  .hud__back[data-long] .hud__pre { display: none; }
  .hud__key { width: 30px; height: 30px; }
  .hero { --mw: min(88vw, 540px); top: calc(var(--bar) + 5vh); gap: 18px; }
  .hero__line { letter-spacing: 0.2em; line-height: 1.7; }
  .lockup__sub span { letter-spacing: 0.7em; margin-right: -0.7em; }
  /* a phone: the words hang under the sight, so a pin never covers the thing it marks */
  .pin, .pin--left { flex-direction: column; translate: -50% 0; }
  .pin__mark, .pin--left .pin__mark { margin: -15px 0 0; }
  .pin__lead, .pin--left .pin__lead { width: 1px; height: 18px; margin: 4px 0 0; transform: scaleY(0); transform-origin: 50% 0; background: linear-gradient(180deg, rgba(243, 236, 255, 0.85), rgba(243, 236, 255, 0.25)); }
  .pin.is-on .pin__lead { transform: none; }
  .pin__label, .pin--left .pin__label { min-height: 44px; align-content: center; justify-items: center; padding: 4px 10px; text-align: center; translate: var(--lx, 0) 0; }
  .pin__t { font-size: 11px; }
  .pin__s { display: none; }
  .pin--left .pin__t { clip-path: inset(0 100% 0 0); }
  .pin--left.is-on .pin__t { clip-path: inset(0 -2px 0 0); }

  /* the club: the artist up top, who they are under them, everyone in a row at the bottom */
  .room--artists, .has-profile .room--artists { --stage-x: 50%; }
  .lineup { width: min(92vw, 54vh); bottom: auto; top: calc(var(--bar) - 8px); height: auto; }
  .club__flash { top: 30%; }
  .bio { left: 18px; right: 18px; top: auto; bottom: calc(var(--hud) + 92px); width: auto; justify-content: flex-end; }
  .bio__idx { margin-bottom: 12px; }
  .bio__name { font-size: 44px; }
  .bio__where { margin-top: 10px; font-size: 13px; }
  .bio__sound, .bio__line { display: none; }
  .bio .stats { margin-top: 14px; }
  .stat b { font-size: 22px; }
  .bio__cta { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; margin-top: 16px; }
  .bio__who { display: none; }
  .roster { left: 12px; right: 12px; top: auto; bottom: calc(var(--hud) + 4px); width: auto; transform: none; }
  .roster__h, .roster__keys { display: none; }
  .roster__list { display: flex; justify-content: space-between; gap: 6px; border: 0; }
  .roster__list > li { flex: 1; min-width: 0; max-width: 60px; }
  .roster__item { display: block; min-height: 0; padding: 0 0 6px; border: 0; }
  .roster__item::before { display: none; }
  .roster__item::after { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 2px; transform: scaleX(0); }
  .roster__item[aria-selected="true"]::after { transform: scaleX(1); }
  .roster__face { width: 100%; height: auto; aspect-ratio: 5 / 6; }
  .roster__n { position: absolute; left: 5px; top: 5px; }
  .roster__name { display: none; }
  body[data-room="artists"] .scrim { background: linear-gradient(0deg, rgba(7, 3, 12, 0.96) 0, rgba(7, 3, 12, 0.7) 40%, rgba(7, 3, 12, 0) 62%), linear-gradient(180deg, rgba(7, 3, 12, 0.6) 0, rgba(7, 3, 12, 0) 120px); }

  .tx { left: 0; right: 0; bottom: var(--hud); grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 18px 12px; border-top: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(12, 5, 21, 0.86), rgba(8, 3, 14, 0.93)); -webkit-backdrop-filter: blur(26px) saturate(1.25); backdrop-filter: blur(26px) saturate(1.25); }
  .tx::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 72px; background: linear-gradient(0deg, rgba(10, 4, 18, 0.9), rgba(10, 4, 18, 0)); pointer-events: none; } /* the poster sinks behind the strip, it is not cut by it */
  .tx__t { font-size: 28px; }
  .tx__b { font-size: 14px; }
  .tx__foot { justify-content: space-between; }
  .tx__foot .btn { flex: 1; }
  body[data-room="transmissions"] .scrim { background: linear-gradient(180deg, rgba(7, 3, 12, 0.72) 0, rgba(7, 3, 12, 0) 150px); }

  /* (no padding under the scroller: MEASURED 2026-10-08, the pinned buttons sat 12px above its foot with padding there, and a
     half line of the text behind showed through the gap. The buttons' own band carries the space instead.) */
  .about { left: 18px; right: 18px; width: auto; top: calc(var(--bar) + 2px); bottom: calc(var(--hud) + 52px); display: block; overflow-y: auto; padding-bottom: 0; pointer-events: auto; }
  .about__h { font-size: 34px; }
  .about__p { font-size: 15px; }
  .about__names { font-size: 14px; }
  .chan { gap: 10px; overflow-x: auto; scrollbar-width: none; }
  .chan::-webkit-scrollbar { display: none; }
  .chan__tab { font-size: 11px; letter-spacing: 0.1em; gap: 6px; min-width: 44px; }
  .chan__tab i { display: none; }
  .chan__panels { display: block; margin: 18px 0 22px; }
  .chan__p { overflow: visible; }
  /* the way on stays on screen however long the page gets: it rides the bottom of the panel as the booth's Send does */
  .about__cta { position: sticky; bottom: 0; z-index: 1; margin-top: 2px; padding: 12px 0 14px; background: rgb(9, 5, 14); }
  .about__cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; background: linear-gradient(to top, rgb(9, 5, 14), rgba(9, 5, 14, 0)); pointer-events: none; }
  .chan__p:not(.is-on) { display: none; }
  .sides { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body[data-room="about"] .scrim { background: linear-gradient(180deg, rgba(7, 3, 12, 0.9) 0, rgba(7, 3, 12, 0.76) 60%, rgba(7, 3, 12, 0.9) 100%); }

  .phone { left: 0; right: 0; width: auto; top: 15vh; bottom: var(--hud); padding: 20px 18px 16px; box-shadow: inset 0 1px 0 var(--line-2); }
  .phone__foot { bottom: -16px; margin: auto -18px 0; padding: 12px 18px 14px; }
  .phone__h { font-size: 28px; margin: 10px 0 6px; }
  .phone__lede { font-size: 13.5px; margin-bottom: 18px; }
  .phone__more { display: none; }
  .row--2 { grid-template-columns: 1fr; }
  .row--3 { grid-template-columns: 1fr 1fr; }
  .row--3 .field:last-child { grid-column: 1 / -1; }
  .done__tick { margin-top: 12px; }
  body[data-room="contact"] .scrim { background: linear-gradient(180deg, rgba(7, 3, 12, 0.55) 0, rgba(7, 3, 12, 0) 150px); }

  .profile { --px: 18px; }
  .profile__scroll { padding-top: 16px; }
  .profile__photo { display: block; position: relative; aspect-ratio: 4 / 3; margin: 0 -18px 18px; overflow: hidden; background: #0f0d12; }
  .profile__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .profile__photo img { filter: contrast(1.05) brightness(0.94); }
  /* their press shot in its own colours: no agency grade on it, only the foot sinking into the panel */
  .profile__photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10, 4, 18, 1), rgba(10, 4, 18, 0) 52%); }
  .profile__name { font-size: 44px; margin-top: -58px; position: relative; z-index: 2; }
}
/* (480, not 430, since the fifth word: MEASURED 2026-10-08 in WebKit at 447 wide, Book ended 6px past the screen, and an
   iPhone 16 Pro Max is 440) */
@media (max-width: 480px) { /* "Why FUSE" in the bar, 2026-10-07: a 390 phone needs the tight bar too */
  .nav { gap: 8px; }
  .nav__a { font-size: 10px; letter-spacing: 0.04em; font-stretch: 92%; }
  .nav .nav__book { padding: 0 11px; font-size: 10px; letter-spacing: 0.06em; }
  .brand__logo { width: 80px; }
}
/* five words in the bar since Press joined it (2026-10-08). MEASURED at 430, 390, 375 and 360: the Book key ended flush
   on the screen's edge at 390 and 30px past it at 360. Two tighter steps keep every word a 44px target with the same
   margin both sides: the mark and the gaps give way, the words do not. */
@media (max-width: 412px) {
  .bar { gap: 10px; }
  .nav { gap: 6px; }
  .brand__logo { width: 72px; }
}
@media (max-width: 385px) {
  .bar { gap: 6px; padding-left: 14px; padding-right: 14px; }
  .nav { gap: 4px; }
  .nav .nav__book { padding: 0 10px; }
  .brand__logo { width: 64px; }
  .press__h { font-size: 22px; } /* beside the all-in-one key: MEASURED 3px into it at 360 when it was 26 */
  /* MEASURED at 360: the six faces were 43px wide, and a profile's Book key was 3px narrower than its own words
     once Press kit and Fees stood beside it */
  .roster, .roster__list { gap: 4px; }
  .profile__book { gap: 8px 16px; }
}
@media (max-height: 800px) and (min-width: 861px), (max-height: 740px) and (max-width: 860px) {
  .hero__line, .hero__why { display: none; } /* a laptop: the name, the word and the way in; the line is in the gate and the about */
}
@media (max-height: 760px) and (min-width: 961px), (max-height: 760px) and (min-width: 861px) and (min-height: 481px) {
  .bio__line { display: none; }
  .roster__item { min-height: 52px; padding-top: 5px; padding-bottom: 5px; }
  .roster__face { width: 34px; height: 40px; }
  .roster__keys { display: none; }
  .about { top: calc(var(--bar) + 4px); }
  /* a short laptop: the whole team and the brand line stay in the frame (2026-10-06, six people now) */
  .about__h { margin: 10px 0 14px; }
  .chan__panels { margin: 10px 0 10px; }
  .about__p { margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; }
  .about__p:first-of-type { font-size: 17px; line-height: 1.4; }
  .sides { margin: 0 0 12px; }
  .side { padding-top: 10px; }
  .side__p { font-size: 13.5px; line-height: 1.5; }
  .side__also { margin-top: 7px; padding-top: 7px; }
  .tx__b { display: none; }
  .tx__t { margin-bottom: 0; }
  .phone__h { font-size: 26px; margin: 8px 0 12px; }
  .phone__lede { display: none; } /* a short laptop: the faces, the name, the email and the send key all stay in the first frame */
  .pick { height: 36px; }
  .pick__face { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .ticker__track { animation: none; flex-wrap: wrap; }
  .beams i { animation: none; transform: rotate(var(--a)); }
  .grain { animation: none; }
}

/* fingers: every target at least 44px */
@media (pointer: coarse) {
  .who a { min-height: 48px; }
  .pick, .tag { height: 44px; }
  .field input { height: 48px; }
  .phone__note a { display: inline-block; padding: 14px 0; margin: -14px 0; }
}

/* a phone gets the whole screen for a profile */
@media (max-width: 860px), (max-width: 960px) and (max-height: 480px) {
  .profile { top: 0; bottom: 0; width: 100vw; }
  .has-profile .bar, .has-profile .hud { visibility: hidden; } /* inert under it too: out of reach, so out of sight */
}

/* ── a phone on its side (2026-10-08) ──────────────────────────────────
   A phone turned sideways has about 390px of height, and the bar, the foot and whatever was pinned took most of it.
   MEASURED at 844x390: in the club the artist's name ran up under the logo, on Why FUSE the pinned buttons left one
   line of room to read, and a profile's photo was taller than the screen and lay over its own Book key (the key is
   over it now at every size, z-index above). So here the chrome is slimmer, nothing is pinned over the reading, a
   picture never takes more than the screen, and the club keeps to the name, where they are from and the two keys. */
@media (max-height: 480px) and (max-width: 960px) {
  :root { --bar: 54px; --hud: 50px; }
  .bio__idx, .bio .stats { display: none; }
  .bio { bottom: calc(var(--hud) + 84px); }
  .bio__name { font-size: 32px; }
  .bio__where { margin-top: 6px; }
  .bio__cta { margin-top: 10px; }
  .roster__list > li { max-width: 52px; }
  .about { bottom: var(--hud); }
  .about__h { margin: 6px 0 8px; font-size: 26px; }
  .about__cta { position: static; padding-bottom: 20px; background: none; }
  .about__cta::before { display: none; }
  .ticker { display: none; }
  .phone { top: var(--bar); padding-top: 10px; }
  .phone__foot { position: static; margin-top: 14px; background: none; }
  .profile__photo { aspect-ratio: auto; height: 62vh; }
  .profile .live { aspect-ratio: auto; height: 66vh; }
  .profile__book { padding-top: 18px; padding-bottom: 10px; }
  .all__top { margin-bottom: 10px; }
  .card__media { aspect-ratio: 16 / 10; }
  .press__h { min-height: 40px; margin-top: 4px; }
  .kit__name { font-size: 32px; }
}

/* ── film: the walk between places, played over the world ─────────── */
.is-moving .pins, .is-moving .edges { opacity: 0; transition: opacity 0.2s; }

/* ── the spark: where a click lands ───────────────────────────────── */
.spark { position: fixed; left: 0; top: 0; z-index: 40; width: 0; height: 0; pointer-events: none; }
.spark::before, .spark::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 1.5px solid var(--acid); opacity: 0; transform: rotate(45deg) scale(0.2); }
.spark::after { border-color: var(--violet); }
.spark.is-on::before { animation: spark 0.42s var(--ease); }
.spark.is-on::after { animation: spark 0.42s var(--ease) 0.06s; }
@keyframes spark { from { opacity: 0.95; transform: rotate(45deg) scale(0.2); } to { opacity: 0; transform: rotate(45deg) scale(1.5); } }

@media (prefers-reduced-motion: reduce) { .pin__mark::before { animation: none; } .pin__t, .pin__s, .pin__lead { transition: none; } .spark { display: none; } }