/* ===== THE LAND OF NOIZ — STYLES ===== (cloned from the Zeekulus / Colorado Runaway engine; accent defaults are the "amber" palette; the serif re-skin lives in the NOIZ SKIN block at the end) */

:root {
  --bg: #050505;
  --bg-alt: #0c0c0e;
  --panel: #131316;
  --line: rgba(255, 255, 255, 0.08);
  --text: #e8e6e3;
  --muted: #9a9790;
  --steel: #b9bcc4;
  --accent-rgb: 226,160,70;       /* live accent (JS shifts these per chapter) */
  --accent-hot-rgb: 255,212,132;
  --ember: rgb(var(--accent-rgb));      /* kept name: "ember" = current accent */
  --ember-hot: rgb(var(--accent-hot-rgb));
  --violet: #8e4bd8;     /* from the banner nebula */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --max: 1240px;
  --gutter: 104px;            /* centre channel the spine runs through */
  --nav-h: 68px;
  --player-h: 78px;
  /* live music values, written by js/main.js while a track plays (0..1) */
  --bass: 0; --mid: 0; --high: 0; --beat: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ===== NAV ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: linear-gradient(to bottom, rgba(5,5,5,0.92), rgba(5,5,5,0.6));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__word { font-family: "Permanent Marker", "Bebas Neue", cursive; font-size: 22px; letter-spacing: 0.02em; color: var(--text); white-space: nowrap; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.nav__logo { height: 42px; width: auto; display: block; filter: drop-shadow(0 0 8px rgba(255,255,255,0.12)); transition: filter .3s; }
.nav__brand:hover .nav__logo { filter: drop-shadow(0 0 10px rgba(var(--accent-hot-rgb),0.55)); }
body.is-listening .nav__logo { filter: drop-shadow(0 0 8px rgba(var(--accent-hot-rgb),0.35)); }
.nav__links { display: flex; gap: 34px; }
.nav__links a {
  font-family: var(--font-display); font-size: 20px; letter-spacing: 0.14em;
  color: var(--muted); transition: color .2s; position: relative;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav__links a:hover { color: var(--text); }
.nav__links .nav__viz { color: var(--ember-hot); display: inline-flex; align-items: center; gap: 7px; }
.nav__links .nav__viz:hover { color: #fff; text-shadow: 0 0 12px rgba(var(--accent-hot-rgb),0.8); }
.nav__star { font-size: 15px; line-height: 1; filter: drop-shadow(0 0 5px rgba(var(--accent-hot-rgb),0.9)); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 26px; height: 2px; background: var(--steel); margin: 6px 0; transition: .25s; }

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end; justify-content: center;   /* buttons sit at the bottom, under the video's logo */
  overflow: hidden; padding: calc(var(--nav-h) + 40px) 20px 110px;
}
.hero__bg {
  position: absolute; inset: 0;
  background: url("../assets/img/hero-intro-poster.jpg") center / cover no-repeat; /* shows until the video is ready */
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* the vertical light column in the banner, lit up by the bass */
.hero__beam {
  position: absolute; top: -10%; bottom: -10%; left: 50%; width: 44%; z-index: 1; pointer-events: none;
  transform: translateX(-50%) scaleX(calc(0.7 + var(--beat) * 0.5));
  background:
    linear-gradient(to right, transparent 44%, rgba(255,235,210,0.55) 49.2%, rgba(255,255,255,0.95) 50%, rgba(255,235,210,0.55) 50.8%, transparent 56%),
    radial-gradient(ellipse 30% 60% at 50% 48%, rgba(255,190,120,0.95) 0%, rgba(210,100,255,0.55) 35%, rgba(var(--accent-rgb),0) 70%);
  mix-blend-mode: screen;
  opacity: calc(var(--bass) * 1.05);
  filter: blur(calc(2px + var(--beat) * 6px));
  transition: opacity .06s linear;
}
/* whole-hero flash on each beat */
.hero__flash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 45%, rgba(255,210,160,0.9) 0%, rgba(var(--accent-rgb),0.35) 45%, rgba(0,0,0,0) 75%);
  opacity: calc(var(--beat) * 0.42);
}
.hero__bg { transform: scale(calc(1 + var(--bass) * 0.035)); transform-origin: center; }
.hero__cta .btn--primary { box-shadow: 0 8px 28px rgba(var(--accent-rgb),calc(0.35 + var(--beat) * 0.5)), 0 0 calc(var(--bass) * 40px) rgba(var(--accent-hot-rgb),calc(var(--bass) * 0.6)); }
.hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse at center, rgba(5,5,5,0) 0%, rgba(5,5,5,0.35) 70%, rgba(5,5,5,0.8) 100%),
    linear-gradient(to bottom, rgba(5,5,5,0.5) 0%, rgba(5,5,5,0) 25%, rgba(5,5,5,0) 55%, rgba(5,5,5,0.55) 85%, rgba(5,5,5,0.6) 100%);
}
.hero__bg { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.6) 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.6) 82%, transparent 100%); }
.hero { background: transparent; }
.hero__content { position: relative; z-index: 1; text-align: center; max-width: 900px; }
.hero__logo {
  display: block; /* the hero video is the instruments photo (no logo in it), so the wordmark overlays it */
  width: min(680px, 72vw); margin: 0 auto 26px;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,0.9)) drop-shadow(0 0 30px rgba(var(--accent-rgb),0.25));
  animation: rise 1.1s cubic-bezier(.2,.8,.2,1) both;
}

.hero__tagline:empty { display: none; }
.hero__tagline {
  font-family: var(--font-display); font-size: clamp(22px, 3vw, 34px); letter-spacing: 0.22em;
  color: var(--steel); text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0,0,0,0.9);
  animation: rise 1.1s .15s cubic-bezier(.2,.8,.2,1) both;
}
.hero__cta { display: flex; gap: 16px; justify-content: center; margin-top: 26px; flex-wrap: wrap;
  animation: rise 1.1s .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero__scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.35); border-radius: 14px; z-index: 1;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  background: var(--ember-hot); border-radius: 2px; animation: scrollDot 1.8s infinite;
}
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* ===== AMBIENT PULSE (music-driven) ===== */
.pulse {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .6s;
  box-shadow: inset 0 0 calc(40px + var(--bass) * 60px) rgba(var(--accent-rgb),calc(var(--beat) * 0.09 + var(--bass) * 0.04));
}
body.is-listening .pulse { opacity: 1; }
body.is-listening .wall:hover, body.is-listening .video:hover { border-color: rgba(var(--accent-rgb),calc(0.4 + var(--beat) * 0.6)); }

/* ===== THE CONSOLE (player) ===== */
:root { --player-h: 84px; }
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: var(--player-h);
  transform: translateY(110%); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.player.is-open { transform: none; }
body.has-player { padding-bottom: var(--player-h); }
body.has-player .footer { padding-bottom: 60px; }
.player__frame {
  position: absolute; inset: 0; z-index: 0;
  background: rgba(7,7,9,0.9); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.6);
}
.player__frame::before { /* hairline + accent glow on the top edge */
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(14px + 1px), calc(100% - 14px) 1px, 14px 1px, 0 calc(14px + 1px));
  background: linear-gradient(to right, rgba(var(--accent-rgb),0.15), rgba(var(--accent-hot-rgb),calc(0.55 + var(--bass) * 0.45)), rgba(var(--accent-rgb),0.15));
}
.player__frame::after { /* grain */
  content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.player__viz { display: none; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.14; pointer-events: none; z-index: 1; /* retired: the waveform scrubber replaced it */
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.player__bar {
  position: relative; z-index: 2; height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 18px;
  display: grid; grid-template-columns: auto minmax(140px, 1fr) auto minmax(220px, 2.2fr) auto auto auto; gap: 18px; align-items: center;
}
/* artwork + progress ring */
.player__artbtn { position: relative; width: 60px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.player__art { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; background: #0a0a0c;
  box-shadow: 0 0 calc(6px + var(--bass) * 22px) rgba(var(--accent-hot-rgb), calc(0.25 + var(--bass) * 0.6)); transition: transform .3s; }
.player__artbtn:hover .player__art { transform: scale(0.94); }
.ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring__track { stroke: rgba(255,255,255,0.12); }
.ring__progress { stroke: var(--ember-hot); stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(var(--accent-hot-rgb), 0.8)); transition: stroke .5s; }
.player__chev { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -7px 0 0 -5px; border-left: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); opacity: 0; transition: opacity .2s, transform .3s; filter: drop-shadow(0 0 4px #000); }
.player__artbtn:hover .player__chev { opacity: 1; }
.player.is-expanded .player__chev { transform: rotate(225deg); margin-top: -3px; }
.player__meta { min-width: 0; }
.player__title { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.1em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__sub { font-size: 11px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 4px; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.player__index { color: var(--ember-hot); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.2em; }
.player__sep { opacity: .5; }
.player__controls { display: flex; align-items: center; gap: 4px; }
.player__btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--steel); cursor: pointer; display: grid; place-items: center; transition: color .2s, background .2s, transform .2s; font-size: 24px; line-height: 1; }
.player__btn svg { width: 22px; height: 22px; fill: currentColor; }
.player__btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.player__btn--sm { width: 32px; height: 32px; }
.player__btn--sm svg { width: 18px; height: 18px; }
/* play / pause: accent heart-ish circle. Beat pulse is an opacity-only halo (animated filters/box-shadows on
   the bar made the page behind it flicker on iOS). */
.player__btn--main, .viz__btn--main {
  position: relative; border: 0; border-radius: 50%; background: var(--ember); color: #1a0810;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 6px 18px rgba(0,0,0,0.5);
}
.player__btn--main { width: 50px; height: 50px; margin: 0 4px; }
.player__btn--main::after, .viz__btn--main::after {
  content: ""; position: absolute; inset: -26%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-hot-rgb),0.6) 0%, rgba(var(--accent-rgb),0.2) 45%, transparent 70%);
  opacity: var(--beat);
}
.player__btn--main:hover, .viz__btn--main:hover { background: var(--ember-hot); color: #1a0810; transform: scale(1.06); }
.player__progress { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player__time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; letter-spacing: 0.04em; }
/* waveform scrubber */
.wave { position: relative; flex: 1; height: 46px; cursor: pointer; touch-action: none; outline: none; }
.wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wave:focus-visible { box-shadow: 0 0 0 1px var(--ember-hot); }
.wave__tip { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 3px 8px; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
  background: rgba(10,10,12,0.95); border: 1px solid rgba(var(--accent-hot-rgb),0.6); color: #fff; border-radius: 2px; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; }
.wave__tip.is-on { opacity: 1; }
/* volume */
.player__vol { display: flex; align-items: center; gap: 6px; }
.vol { width: 86px; height: 3px; accent-color: var(--ember-hot); cursor: pointer; }
.player__close { color: var(--muted); }

/* ---- now-playing sheet ---- */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; max-width: min(1180px, 100%); margin: 0 auto;
  height: min(560px, calc(100vh - var(--player-h) - 80px));
  opacity: 0; pointer-events: none; transform: translateY(26px) scale(0.985); transform-origin: bottom center;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  background: rgba(7,7,9,0.9); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  clip-path: polygon(0 22px, 22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  overflow: hidden;
}
.sheet::before { /* blurred current artwork as the sheet's atmosphere */
  content: ""; position: absolute; inset: -40px; background: var(--now-art) center / cover no-repeat; filter: blur(40px) saturate(1.1) brightness(0.35); opacity: .9; z-index: 0; }
.sheet::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, rgba(7,7,9,0.2), rgba(7,7,9,0.75)), radial-gradient(ellipse at 20% 40%, rgba(var(--accent-rgb),0.18), transparent 60%); }
.player.is-expanded .sheet { opacity: 1; pointer-events: auto; transform: none; }
.sheet__handle { position: absolute; z-index: 3; top: 10px; left: 50%; width: 46px; height: 4px; margin-left: -23px; border: 0; border-radius: 2px; background: rgba(255,255,255,0.3); cursor: pointer; padding: 0; }
.sheet__handle:hover { background: var(--ember-hot); }
.sheet__grid { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 36px; padding: 40px 40px 28px; }
.sheet__artwrap { position: relative; align-self: center; aspect-ratio: 1; }
.sheet__art { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 calc(10px + var(--bass) * 40px) rgba(var(--accent-hot-rgb), calc(0.2 + var(--bass) * 0.5)); }
.sheet__halo { position: absolute; inset: -18%; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-hot-rgb), calc(0.35 + var(--beat) * 0.45)) 0%, rgba(var(--accent-rgb), 0.12) 45%, transparent 70%); filter: blur(10px); }
.sheet__orbit { position: absolute; inset: -7%; z-index: 3; width: 114%; height: 114%; pointer-events: none; animation: orbit 24s linear infinite; animation-play-state: paused; }
body.is-listening .sheet__orbit { animation-play-state: running; }
.sheet__orbit circle { fill: none; stroke: rgba(var(--accent-hot-rgb), 0.7); stroke-width: 0.6; stroke-dasharray: 2 6 1 10 0.5 14; filter: drop-shadow(0 0 calc(2px + var(--beat) * 8px) rgba(var(--accent-hot-rgb), 0.9)); }
@keyframes orbit { to { transform: rotate(360deg); } }
.sheet__info { display: flex; flex-direction: column; min-width: 0; align-self: center; }
.sheet__index { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.3em; color: var(--ember-hot); text-transform: uppercase; }
.sheet__title { font-family: var(--font-display); font-size: clamp(36px, 4vw, 56px); letter-spacing: 0.08em; line-height: 1; margin: 8px 0 14px; }
.sheet__lore { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.65; color: #cbbba7; border-left: 2px solid var(--ember); padding-left: 12px; max-width: 58ch; margin: 0 0 16px; }
.sheet__lore:empty { display: none; }
.sheet__linkrow { margin: 0 0 22px; }
.sheet__wave { position: relative; height: 70px; cursor: pointer; touch-action: none; }
.sheet__wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sheet__times { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 8px; letter-spacing: 0.06em; }
/* queue */
.queue { list-style: none; margin: 0; padding: 0; overflow: auto; align-self: stretch; border-left: 1px solid rgba(255,255,255,0.08); padding-left: 22px; scrollbar-width: thin; }
.queue::before { content: "Up next"; display: block; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.3em; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; }
.queue__btn { width: 100%; display: grid; grid-template-columns: 26px 38px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 8px 8px 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; border-radius: 4px; transition: background .2s; }
.queue__btn:hover { background: rgba(255,255,255,0.06); }
.queue__num { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; color: var(--muted); text-align: center; }
.queue__art { width: 38px; height: 38px; object-fit: cover; border-radius: 3px; opacity: .85; }
.queue__title { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue__dur { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.queue__eq { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.queue__eq i { width: 2px; height: 30%; background: var(--ember-hot); animation: eq 0.9s ease-in-out infinite; }
.queue__eq i:nth-child(2) { animation-delay: .15s; } .queue__eq i:nth-child(3) { animation-delay: .3s; }
.queue__item.is-current .queue__num, .queue__item.is-current .queue__title { color: var(--ember-hot); }
.queue__item.is-current .queue__art { opacity: 1; box-shadow: 0 0 0 1px var(--ember); }
.queue__item.is-playing .queue__eq { display: flex; }

@media (max-width: 1100px) {
  .sheet__grid { grid-template-columns: 240px minmax(0, 1fr); }
  .queue { display: none; }
}
@media (max-width: 900px) {
  .player__vol { display: none; }
  .player__bar { grid-template-columns: auto minmax(100px, 1fr) auto minmax(140px, 2fr) auto auto; }
}

/* ===== SCENE BACKDROP ===== */
.cosmos {
  --cosmos-opacity: 0.95;     /* overall strength of the backdrop */
  --cosmos-brightness: 0.85;  /* 1 = original, lower = darker (the jpg is already darkened to ~42 %) */
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg) url("../assets/img/wood-carved-bg-soft.jpg") center var(--cosmos-y, 0px) / 100% auto no-repeat;
  filter: brightness(var(--cosmos-brightness)) saturate(0.95);
  opacity: var(--cosmos-opacity);
}
.cosmos.is-cover { background-size: cover; background-position: center center; }
.cosmos::after { /* vignette: dark edges, slightly dark centre so text always reads */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(5,5,5,0.05) 0%, rgba(5,5,5,0.35) 60%, rgba(5,5,5,0.85) 100%);
}
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: transparent; }
.scene__layer {
  position: absolute; inset: -6%; background: center / cover no-repeat; opacity: 0;
  filter: blur(14px) saturate(0.9) brightness(0.5); transform: scale(1.04);
  transition: opacity 1.4s ease;
}
.scene__layer.is-on { opacity: 1; }
.scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(5,5,5,0.2), rgba(5,5,5,0.75)); opacity: 0; transition: opacity 1.4s; }
.scene.is-on::after { opacity: 1; }
body { background: var(--bg); position: relative; }
.hero, .section, .footer { position: relative; z-index: 1; }
.nav { position: fixed; z-index: 50; }
.hero { z-index: 2; }
.section { background: linear-gradient(to bottom, rgba(5,5,5,0) 0, rgba(5,5,5,0.42) 160px, rgba(5,5,5,0.42) calc(100% - 160px), rgba(5,5,5,0) 100%); }
.section--alt { background: url("../assets/img/texture.jpg") center / cover; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%); }
.section--alt::before { background: rgba(8,8,10,0.42); }
.footer { background: linear-gradient(to bottom, rgba(5,5,5,0.2), rgba(5,5,5,0.85)); }

/* ===== EMBERS + PARALLAX ===== */
.hero__embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; mix-blend-mode: screen; }
.hero__bg { --px: 0px; --py: 0px; transform: translate(var(--px), var(--py)) scale(calc(1.03 + var(--bass) * 0.035)); }

/* ===== CUSTOM CURSOR ===== */
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
.trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 998; pointer-events: none; mix-blend-mode: screen; }
.cursor { position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; }
.cursor.is-visible { opacity: 1; }
.cursor__dot {
  position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 1px;
  background: var(--ember-hot); box-shadow: 0 0 10px var(--ember-hot), 0 0 calc(4px + var(--beat) * 18px) rgba(var(--accent-hot-rgb),0.9);
  transform: rotate(45deg) scale(calc(1 + var(--beat) * 0.6));
}
.cursor__ring {
  position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(var(--accent-hot-rgb),0.7); box-shadow: 0 0 12px rgba(var(--accent-rgb),0.35), inset 0 0 8px rgba(var(--accent-rgb),0.15);
  transition: width .2s, height .2s, left .2s, top .2s, border-color .2s, background .2s;
}
.cursor.is-link .cursor__ring { width: 48px; height: 48px; left: -24px; top: -24px; border-color: var(--ember-hot); background: rgba(var(--accent-rgb),0.1); }
.cursor.is-down .cursor__ring { width: 22px; height: 22px; left: -11px; top: -11px; }

/* ===== LORE FRAGMENTS ===== */
.audio__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.audio__glyph {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: transparent;
  color: var(--muted); font-size: 15px; cursor: pointer; display: grid; place-items: center; transition: color .2s, border-color .2s, transform .3s, box-shadow .2s;
}
.audio__glyph:hover { color: var(--ember-hot); border-color: var(--ember); box-shadow: 0 0 12px rgba(var(--accent-rgb),0.4); }
.card.is-lore .audio__glyph { color: var(--ember-hot); border-color: var(--ember); transform: rotate(180deg); }
.audio__lore {
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s ease, opacity .35s ease, margin .3s;
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; color: #c9b7a4;
  border-left: 2px solid var(--ember); padding-left: 10px; margin-top: 0;
}
.card.is-lore .audio__lore { max-height: 200px; opacity: 1; margin-top: 10px; }

/* ===== THE TRANSMISSION ===== */
.footer__mark { background: none; border: 0; padding: 4px; cursor: pointer; display: inline-block; margin: 0 auto 16px; }
.footer__mark img { height: 44px; width: auto; opacity: 0.6; transition: opacity .3s, filter .3s; }
.footer__mark:hover img { opacity: 1; filter: drop-shadow(0 0 10px rgba(var(--accent-hot-rgb),0.8)); }
.tx {
  position: fixed; inset: 0; z-index: 120; background: rgba(2,2,3,0.96);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.tx.is-open { opacity: 1; pointer-events: auto; }
.tx::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); }
.tx__close { position: absolute; top: 16px; right: 22px; background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; opacity: .7; }
.tx__close:hover { opacity: 1; }
.tx__panel { position: relative; width: min(720px, 100%); border: 1px solid rgba(var(--accent-rgb),0.45); background: rgba(8,8,10,0.9); padding: 26px 30px; box-shadow: 0 0 60px rgba(var(--accent-rgb),0.15), inset 0 0 40px rgba(0,0,0,0.6); }
.tx__head { font-family: var(--font-display); letter-spacing: 0.24em; font-size: 22px; color: var(--ember-hot); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tx__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ember-hot); box-shadow: 0 0 12px var(--ember-hot); animation: txblink 1.4s infinite; }
@keyframes txblink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.tx__text { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.75; color: #d8cbb9; white-space: pre-wrap; margin: 0; min-height: 200px; text-shadow: 0 0 8px rgba(var(--accent-hot-rgb),0.25); }


/* ===== THE SIGNAL (visualizer) ===== */
.viz { position: fixed; inset: 0; z-index: 130; background: #030305; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s, visibility 0s .5s; }
.viz.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s, visibility 0s; }
.viz.is-idle { cursor: none; }
.viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.viz__hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; }
.viz__hud.is-on { opacity: 1; }
.viz.is-open .viz__hud > * { pointer-events: auto; }
.viz__top { position: absolute; top: 0; left: 0; right: 0; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(3,3,5,0.75), transparent); }
.viz__logo { height: 34px; width: auto; opacity: .9; }
.viz__topright { display: flex; align-items: center; gap: 10px; }
.viz__mode { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ember-hot); cursor: pointer; padding: 6px 12px; border: 1px solid rgba(var(--accent-hot-rgb),0.4); border-radius: 2px; }
.viz__mode::before { content: "Mode · "; color: var(--muted); }
.viz__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(10,10,12,0.6); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 26px; line-height: 1; transition: background .2s, border-color .2s, transform .2s; }
.viz__btn svg { width: 20px; height: 20px; fill: currentColor; }
.viz__btn:hover { background: rgba(255,255,255,0.1); border-color: var(--ember-hot); }
.viz .viz__btn--main { width: 60px; height: 60px; margin: 0 6px; border: 0; background: var(--ember); }
.viz .viz__btn--main svg { width: 26px; height: 26px; }
.viz .viz__btn--main:hover { background: var(--ember-hot); }
.viz__bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 26px 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  background: linear-gradient(to top, rgba(3,3,5,0.85), transparent); }
.viz__art { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 calc(8px + var(--bass) * 26px) rgba(var(--accent-hot-rgb), 0.7); }
.viz__meta { min-width: 0; }
.viz__index { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.3em; color: var(--ember-hot); text-transform: uppercase; }
.viz__title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); letter-spacing: 0.08em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz__time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; margin-top: 4px; }
.viz__controls { display: flex; align-items: center; gap: 10px; }
.viz__hint { grid-column: 1 / -1; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.35); text-align: center; margin-top: 4px; }
body.is-shuffle .viz__index::after { content: " · shuffle"; color: var(--muted); letter-spacing: 0.2em; }
body.viz-open { overflow: hidden; }
/* console buttons for it */
.player__vizbtn { color: var(--ember-hot); }
.player__vizbtn:hover { color: #fff; background: rgba(var(--accent-rgb),0.25); }
.sheet__actions { display: flex; gap: 10px; margin: -8px 0 22px; }
.sheet__act { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; letter-spacing: 0.14em; padding: 8px 16px; border: 1px solid rgba(255,255,255,0.18); border-radius: 3px; background: rgba(0,0,0,0.3); color: var(--steel); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.sheet__act svg { width: 16px; height: 16px; fill: currentColor; }
.sheet__act:hover { border-color: var(--ember-hot); color: var(--ember-hot); }
body.is-shuffle .sheet__act--shuffle { border-color: var(--ember); color: var(--ember-hot); background: rgba(var(--accent-rgb),0.12); }
@media (max-width: 720px) {
  .viz__top { padding: 14px 14px; }
  .viz__logo { height: 26px; }
  .viz__mode { font-size: 12px; padding: 5px 8px; }
  .viz__mode::before { content: ""; }
  .viz__bottom { padding: 16px 16px 18px; grid-template-columns: auto 1fr; }
  .viz__controls { grid-column: 1 / -1; justify-content: center; }
  .viz__art { width: 48px; height: 48px; }
  .viz__hint { display: none; }
  .sheet__actions { flex-wrap: wrap; }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 21px; letter-spacing: 0.16em;
  padding: 12px 34px; border: 2px solid transparent; border-radius: 3px;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--ember); color: #0b0603; border-color: var(--ember); box-shadow: 0 8px 28px rgba(var(--accent-rgb),0.35); }
.btn--primary:hover { background: var(--ember-hot); border-color: var(--ember-hot); box-shadow: 0 12px 36px rgba(var(--accent-hot-rgb),0.45); }
.btn--ghost { color: var(--text); border-color: rgba(255,255,255,0.4); background: rgba(0,0,0,0.3); }
.btn--ghost:hover { border-color: var(--text); background: rgba(255,255,255,0.08); }

/* ===== SECTIONS ===== */
.section { padding: 110px 0; position: relative; }
.section--alt {
  background: var(--bg-alt) url("../assets/img/texture.jpg") center / cover;
  background-blend-mode: soft-light;
}
.section--alt::before { content: ""; position: absolute; inset: 0; background: rgba(8,8,10,0.86); pointer-events: none; }
/* NOIZ: the wood-plank backdrop should show through the alternate sections too, so their overlay is much lighter */
.section--alt { background: transparent; }
.section--alt::before { background: linear-gradient(to bottom, rgba(8,8,10,0.55), rgba(8,8,10,0.4) 20%, rgba(8,8,10,0.4) 80%, rgba(8,8,10,0.55)); }
.section--alt > .container { position: relative; }
/* ===== CHAPTER HEADERS (sit on the spine) ===== */
.chapter { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 52px; }
.chapter__node {
  width: 34px; height: 34px; margin-bottom: 18px; display: grid; place-items: center;
  background: var(--bg); border: 1px solid rgba(255,255,255,0.22); transform: rotate(45deg);
  box-shadow: 0 0 0 6px var(--bg); transition: border-color .5s, box-shadow .5s;
}
.chapter__node i { transform: rotate(-45deg); font-family: var(--font-display); font-style: normal; font-size: 15px; letter-spacing: 0.08em; color: var(--muted); transition: color .5s; }
.chapter__node.is-lit { border-color: var(--ember-hot); box-shadow: 0 0 0 6px var(--bg), 0 0 calc(14px + var(--beat) * 24px) rgba(var(--accent-hot-rgb), 0.8); }
.chapter__node.is-lit i { color: var(--ember-hot); }
.chapter__name {
  font-family: var(--font-display); font-size: clamp(46px, 6.4vw, 78px); letter-spacing: 0.12em; line-height: 1;
  color: var(--text); padding: 0 26px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.chapter__sub { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ember-hot); margin-top: 10px; padding: 0 14px; transition: color .5s; }
.chapter__sub:empty { display: none; }
/* small shuffle pill under the Mixtape heading */
.chapter__shuffle { margin-top: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(var(--accent-rgb),0.45); background: rgba(0,0,0,0.35); color: var(--steel); font-family: var(--font-display); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
.chapter__shuffle svg { width: 15px; height: 15px; fill: currentColor; }
.chapter__shuffle:hover { color: #fff; border-color: var(--ember-hot); }
body.is-shuffle .chapter__shuffle { color: #fff; background: rgba(var(--accent-rgb),0.85); border-color: transparent; box-shadow: 0 0 16px rgba(var(--accent-hot-rgb),0.45); }

/* ===== SPINE ===== */
.chapters { position: relative; }
.spine { display: none; /* centre line removed per Chris 2026-10-27; chapter nodes stay */ position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; z-index: 2; pointer-events: none;
  -webkit-mask-image: var(--spine-mask, none); mask-image: var(--spine-mask, none); }
.spine__base { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.14), rgba(255,255,255,0.08)); }
.spine__lit {
  position: absolute; left: 0; right: 0; top: 0; height: var(--spine-lit, 0px);
  background: linear-gradient(to bottom, rgba(var(--accent-hot-rgb), 0.35), var(--ember-hot));
  box-shadow: 0 0 calc(8px + var(--bass) * 18px) rgba(var(--accent-hot-rgb), calc(0.45 + var(--bass) * 0.5)), 0 0 2px #fff;
  transition: background .6s;
}
.spine__head {
  position: absolute; left: 50%; top: var(--spine-lit, 0px); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 calc(10px + var(--beat) * 30px) calc(2px + var(--beat) * 6px) rgba(var(--accent-hot-rgb), 0.9);
}

/* two halves either side of the spine */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }  /* no spine → normal gap */
.split__col { display: grid; gap: 22px; }
.music .split__col { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px; }
.music__empty { grid-column: 1 / -1; }

/* ===== MUSIC ===== */
.music__empty { color: var(--muted); border: 1px dashed var(--line); padding: 30px; border-radius: 6px; text-align: center; grid-column: 1 / -1; }
.card {
  background: rgba(19,19,22,0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb),0.5); box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
.card__title { font-family: var(--font-display); font-size: 24px; letter-spacing: 0.1em; padding: 16px 18px 6px; }
.card__embed { position: relative; width: 100%; }
.card__embed iframe { display: block; width: 100%; border: 0; }
.card__embed--video { aspect-ratio: 16 / 9; }
.card__embed--video iframe { height: 100%; position: absolute; inset: 0; }

/* local audio card */
.audio { display: flex; flex-direction: column; }
.audio__artbtn { display: block; position: relative; width: 100%; padding: 0; border: 0; background: #0a0a0c; cursor: pointer; aspect-ratio: 1; overflow: hidden; border-bottom: 1px solid var(--line); }
.audio__art { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease, filter .4s; }
.card:hover .audio__art { transform: scale(1.04); }
.card.is-playing .audio__art { filter: saturate(1.15) brightness(calc(0.95 + var(--bass) * 0.25)); }
.audio__eq { position: absolute; right: 12px; bottom: 12px; display: none; align-items: flex-end; gap: 3px; height: 22px; padding: 6px; background: rgba(0,0,0,0.6); border-radius: 3px; }
.audio__eq i { width: 3px; height: 30%; background: var(--ember-hot); border-radius: 1px; animation: eq 0.9s ease-in-out infinite; }
.audio__eq i:nth-child(2) { animation-delay: .15s; } .audio__eq i:nth-child(3) { animation-delay: .3s; } .audio__eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.card.is-playing .audio__eq { display: flex; }
.audio__body { padding: 16px 18px 18px; }
.audio__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.audio__links a {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: 4px 9px; border: 1px solid rgba(255,255,255,0.16); border-radius: 3px; color: var(--muted);
  transition: color .2s, border-color .2s;
}
.audio__links a:hover { color: var(--ember-hot); border-color: var(--ember); }
.audio__controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.audio__play {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; flex-shrink: 0;
  background: var(--ember); color: #1a0810; display: grid; place-items: center; transition: background .2s, transform .2s;
}
.audio__play:hover { background: var(--ember-hot); transform: scale(1.06); }
.audio__play svg { width: 20px; height: 20px; fill: currentColor; }
.audio__share { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: color .2s, border-color .2s; }
.audio__share svg { width: 16px; height: 16px; fill: currentColor; }
.audio__share:hover { color: var(--ember-hot); border-color: var(--ember); }
/* "link copied" toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--player-h) + 18px); z-index: 90; transform: translate(-50%, 12px); padding: 10px 18px; border: 1px solid rgba(var(--accent-hot-rgb),0.6); border-radius: 3px;
  background: rgba(10,10,12,0.95); color: #fff; font-family: var(--font-display); font-size: 16px; letter-spacing: 0.14em; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
body:not(.has-player) .toast { bottom: 28px; }
.audio__hint { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.14em; color: var(--muted); }
.card.is-active .audio__hint { color: var(--ember-hot); }
.card.is-active .audio__hint::before { content: "Now playing"; }
.card.is-active .audio__hint { font-size: 0; }
.card.is-active .audio__hint::before { font-size: 17px; }
.card.is-active:not(.is-playing) .audio__hint::before { content: "Paused"; }
.card.is-active { border-color: rgba(var(--accent-rgb),0.7); }
.card.is-playing { box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.3), 0 0 calc(10px + var(--bass) * 50px) rgba(var(--accent-rgb),calc(0.15 + var(--bass) * 0.45)), 0 18px 40px rgba(0,0,0,0.6); }

.streaming { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; justify-content: center; }
.streaming:empty { display: none; }
.streaming .btn { font-size: 19px; padding: 10px 26px; }

/* ===== VIDEOS ===== */
.video__thumb { display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.video__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s; filter: brightness(0.85); }
.video:hover .video__thumb img { transform: scale(1.05); filter: brightness(1); }
.video__play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: var(--ember); color: #0b0603; display: grid; place-items: center;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6); transition: transform .2s, background .2s;
}
.video__play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 3px; }
.video:hover .video__play { transform: scale(1.08); background: var(--ember-hot); }
.video__frame { aspect-ratio: 16 / 9; position: relative; background: #000; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .card__title { padding: 14px 16px 16px; font-size: 22px; }
.videos__cta { display: flex; justify-content: center; margin-top: 40px; }
.videos__cta:empty { display: none; }

/* ===== ABOUT ===== */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: center; }
.about > * { min-width: 0; }
.about__text { padding-left: 4px; }
.about__image { position: relative; }
.about__image img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 30px 60px rgba(0,0,0,0.7); }
/* (offset frame around the About image removed per Chris, 2026-10-27) */
.about__text p { color: var(--muted); font-size: 18px; margin-bottom: 18px; max-width: 58ch; }
.about__text p:first-of-type { color: var(--text); font-size: 20px; }
.about__text strong { color: var(--text); font-weight: 600; letter-spacing: 0.02em; }
.about__text p:last-of-type strong {
  display: inline-block; margin-top: 6px; font-family: var(--font-display); font-weight: 400;
  font-size: 26px; letter-spacing: 0.12em; color: var(--ember-hot); text-shadow: 0 0 18px rgba(var(--accent-rgb),0.35);
}

/* ===== WALLPAPERS ===== */
.section__intro { color: var(--muted); font-size: 16px; margin: -30px auto 36px; max-width: 60ch; text-align: center; position: relative; z-index: 3; padding: 0 14px; width: fit-content; }
.wall {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.wall:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb),0.5); box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
.wall__open { display: block; width: 100%; padding: 0; border: 0; background: #0a0a0c; cursor: zoom-in; aspect-ratio: 16 / 9; overflow: hidden; }
.wall__open img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.wall:hover .wall__open img { transform: scale(1.05); }
.wall__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.wall__name { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.1em; line-height: 1.1; }
.wall__size { font-size: 12px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.wall__dl {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-family: var(--font-display); font-size: 17px; letter-spacing: 0.12em;
  padding: 8px 14px; border: 1px solid rgba(255,255,255,0.2); border-radius: 3px; color: var(--steel);
  transition: border-color .2s, color .2s, background .2s;
}
.wall__dl svg { width: 16px; height: 16px; fill: currentColor; }
.wall__dl:hover { border-color: var(--ember); color: var(--ember-hot); background: rgba(var(--accent-rgb),0.08); }

/* ===== CONTACT ===== */
.contact { text-align: center; }
.contact__blurb { color: var(--muted); font-size: 19px; max-width: 54ch; margin: -14px auto 30px; position: relative; z-index: 3; padding: 0 14px; width: fit-content; }
.contact__blurb:empty { display: none; }
.contact__email { font-size: 26px; padding: 14px 40px; margin-bottom: 34px; }
.socials { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.contact .socials { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); row-gap: 12px; }
.contact .socials a:nth-child(odd) { justify-self: end; }
.contact .socials a:nth-child(even) { justify-self: start; }
.socials:empty { display: none; }
.socials a {
  font-family: var(--font-display); font-size: 19px; letter-spacing: 0.14em;
  padding: 10px 22px; border: 1px solid rgba(255,255,255,0.18); border-radius: 3px; color: var(--steel);
  transition: border-color .2s, color .2s, background .2s;
}
.socials a:hover { border-color: var(--ember); color: var(--ember-hot); background: rgba(var(--accent-rgb),0.08); }
.socials--small a { font-size: 15px; padding: 6px 14px; }
.contact__hint { color: var(--muted); font-size: 14px; margin-top: 22px; opacity: 0.7; }

/* ===== FOOTER ===== */
.footer { padding: 50px 20px 40px; text-align: center; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }

.footer .socials { margin-top: 16px; }

/* ===== LIGHTBOX ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,0.9); }
.lightbox__close, .lightbox__nav {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer; opacity: .7; transition: opacity .2s; line-height: 1;
}
.lightbox__close:hover, .lightbox__nav:hover { opacity: 1; }
.lightbox__close { top: 16px; right: 22px; font-size: 44px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 64px; padding: 20px; }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
.lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  font-family: var(--font-display); font-size: 20px; letter-spacing: 0.12em; color: var(--steel);
}
.btn--small { font-size: 17px; padding: 8px 20px; }
.lightbox img { max-height: 80vh; }

/* ===== REVEAL ON SCROLL ===== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
  :root { --gutter: 64px; }
  .music .split__col { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 80px 0; }
  .container { padding: 0 16px; }
  .nav { padding: 0 16px; }
  .nav__logo { height: 32px; }
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; background: rgba(5,5,5,0.97);
    border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav__links.is-open { max-height: 400px; }
  .nav__links a { padding: 16px; border-top: 1px solid var(--line); font-size: 22px; }
  .nav__links a::after { display: none; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  /* Phone hero: the banner video as a 4:3 block (whole logo stays in frame), buttons below it */
  .hero { display: block; min-height: 0; padding: var(--nav-h) 0 40px; }
  .hero__bg { position: relative; width: 100%; aspect-ratio: 4 / 3; transform: none; }
  .hero__bg::after {
    background: linear-gradient(to bottom, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0) 22%, rgba(5,5,5,0) 70%, rgba(5,5,5,0.5) 100%);
  }
  .hero__bg { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
  .hero__video { object-position: center 45%; }
  .hero__bg { aspect-ratio: 16 / 9; }
  .hero { position: relative; }
  .hero__content { position: static; margin-top: 14px; padding: 0 16px; }   /* static so the logo positions against .hero */
  /* logo centred on the 16:9 video block (logo is 1.433:1 → 64vw wide = 44.7vw tall); no transform because the `rise` animation owns transform */
  .hero__logo { display: none; position: absolute; z-index: 3; left: 18vw; top: calc(var(--nav-h) + 5.8vw); width: 64vw; margin: 0; }
  .hero__cta { margin-top: 0; }
  .hero__scroll { display: none; }
  .hero__embers { height: 100%; }
  .hero__tagline { letter-spacing: 0.14em; }
  .music { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .contact__email { font-size: 20px; padding: 12px 24px; }
  .lightbox__nav { font-size: 48px; padding: 10px; }
  :root { --player-h: 118px; }
  .player__bar { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; row-gap: 4px; padding: 10px 12px 0; align-content: start; }
  .player__artbtn { width: 48px; height: 48px; grid-row: 1; }
  .player__meta { grid-row: 1; }
  .player__title { font-size: 18px; }
  .player__controls { grid-row: 1; margin-right: 26px; }
  .player__btn { width: 36px; height: 36px; }
  .player__btn--main { width: 50px; height: 50px; }
  .player__progress { grid-column: 1 / -1; grid-row: 2; gap: 8px; }
  .wave { height: 34px; }
  .player__close { position: absolute; top: 4px; right: 6px; }
  .sheet { position: fixed; inset: 0; bottom: var(--player-h); height: auto; max-width: none; clip-path: none; transform: translateY(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s; }
  .player.is-expanded .sheet { transform: none; }
  .sheet__grid { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); gap: 18px; padding: 34px 20px 16px; overflow: auto; }
  .sheet__artwrap { width: min(58vw, 260px); margin: 0 auto; }
  .sheet__title { font-size: 34px; }
  .sheet__lore { font-size: 12px; }
  .sheet__wave { height: 56px; }
  .queue { display: block; border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; }
  body.sheet-open { overflow: hidden; }
  /* phone song cards: identical square art, never stretched */
  .audio { align-items: flex-start; }
  .audio__artbtn { width: 124px; height: 124px; aspect-ratio: auto; align-self: flex-start; }
  .audio__art { width: 124px; height: 124px; object-fit: cover; }
  .hero__beam { width: 60%; }
  .tx__panel { padding: 20px 16px; }
  .tx__text { font-size: 13px; }
  :root { --gutter: 0px; }
  /* no spine on this site → no reserved left gutter; content is symmetric on phones */
  .chapters .container { padding-left: 20px; }
  .spine { left: 24px; }
  .split { grid-template-columns: 1fr; gap: 14px; }
  .split__col { display: contents; } /* cards flow in DOM order via style.order */
  .audio { flex-direction: row; align-items: stretch; }
  .audio__artbtn { width: 124px; flex-shrink: 0; aspect-ratio: 1; border-bottom: 0; border-right: 1px solid var(--line); }
  .audio__body { padding: 12px 14px 14px; min-width: 0; flex: 1; }
  .audio .card__title { font-size: 19px; }
  .audio__eq { right: 6px; bottom: 6px; }
  .audio__controls { margin-top: 8px; }
  .audio__play { width: 38px; height: 38px; }
  .chapter { align-items: flex-start; text-align: left; margin-bottom: 30px; }
  .chapter__node { position: static; width: 26px; height: 26px; margin: 0 0 14px 6px; }
  .chapter__node i { font-size: 12px; }
  .chapter__name { padding: 0; font-size: 42px; }
  .chapter__sub { padding: 0; margin-top: 6px; }
  .section__intro, .contact__blurb { text-align: left; margin-left: 0; padding: 0; }
  .about { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .about__image { margin: 0 auto; max-width: none; width: 100%; }
  .contact .socials { display: flex; justify-content: flex-start; }
  .contact .socials a { justify-self: auto; }
  .wall__name { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo, .hero__tagline, .hero__cta { animation: none; }
  .hero__video { display: none; } /* static poster instead of motion */
  .hero__beam, .hero__flash, .pulse, .player__viz, .hero__embers, .trail, .cursor { display: none; }
  .scene__layer { transition: none; }
  .audio__eq i { animation: none; height: 60%; }
  .player { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}


/* =====================================================================
   NOIZ SKIN — serif display type (Fraunces) + warm accent.
   The engine above was tuned for the condensed Bebas Neue; these rules
   re-size and un-track every display-font use for a serif. Keep new
   overrides here so engine fixes from the sister sites port cleanly.
   ===================================================================== */
.nav__word { font-family: var(--font-display); font-weight: 500; font-size: 21px; letter-spacing: 0; }
.nav__word b { font-weight: 800; color: var(--ember-hot); transition: color .5s; }
.nav__links a { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.btn { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.btn--small { font-size: 13px; }
.chapter__name { font-size: clamp(38px, 5vw, 64px); letter-spacing: 0; font-weight: 600; font-variation-settings: "SOFT" 40, "WONK" 1; }
.chapter__node i { font-size: 13px; font-weight: 700; }
.chapter__shuffle { font-size: 12px; letter-spacing: 0.14em; font-weight: 600; }
.card__title { font-size: 21px; letter-spacing: 0; font-weight: 600; line-height: 1.2; }
.audio__hint { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.player__title { font-size: 19px; letter-spacing: 0; font-weight: 600; }
.player__index, .sheet__index, .viz__index, .queue::before, .queue__num, .viz__mode, .tx__head, .toast { font-weight: 600; }
.sheet__title { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: 0; font-weight: 600; }
.queue__title { font-size: 15px; letter-spacing: 0; font-weight: 500; }
.sheet__act { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.viz__title { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 0; font-weight: 600; }
.wall__name { font-size: 19px; letter-spacing: 0; font-weight: 600; }
.toast { font-size: 13px; letter-spacing: 0.1em; }
.hero__tagline { font-size: clamp(18px, 2.2vw, 26px); letter-spacing: 0.02em; text-transform: none; font-style: italic; font-weight: 400; }
.about__text p:last-of-type strong { font-size: 22px; letter-spacing: 0; font-weight: 700; }
.tx__head { font-size: 20px; letter-spacing: 0.14em; }
/* hero: the wordmark overlays the instruments video (the clip carries no logo) */
.hero__logo { width: min(520px, 68vw); }
/* lyrics overlay (reuses the hidden-page panel) */
.tx--lyrics .tx__panel { max-height: min(84vh, 900px); overflow: auto; }
.tx--lyrics .tx__head { align-items: baseline; }
.tx--lyrics .tx__head span:first-child { font-size: 12px; letter-spacing: 0.3em; color: var(--muted); }
.lyr__text { font-family: var(--font-body); font-size: 16.5px; line-height: 1.7; color: #e4dacb; min-height: 0; text-shadow: none; }
.lyr__by { margin-top: 20px; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
/* card extras: Lyrics pill + free-download circle */
.audio__lyr { padding: 0 12px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; transition: color .2s, border-color .2s; flex-shrink: 0; }
.audio__lyr:hover { color: var(--ember-hot); border-color: var(--ember); }
.audio__dl { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); display: grid; place-items: center; flex-shrink: 0; transition: color .2s, border-color .2s; }
.audio__dl svg { width: 16px; height: 16px; fill: currentColor; }
.audio__dl:hover { color: var(--ember-hot); border-color: var(--ember); }
/* support buttons (tip jar / CD) + the pull quote under the bio */
.support { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.support:empty { display: none; }
.about__quote { margin-top: 26px; padding-left: 18px; border-left: 2px solid var(--ember); font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--text); font-variation-settings: "SOFT" 70; }
.about__quote cite { display: block; margin-top: 6px; font-family: var(--font-body); font-style: normal; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
/* controls row: with Lyrics + download + share on a card, drop the "Play" word and tighten the gaps so nothing clips */
.audio__controls { gap: 8px; }
.audio__controls:has(.audio__lyr) .audio__hint { display: none; }
/* album order must read left→right: one flat grid for the song cards instead of the two dealt columns (cards keep style.order) */
.music.split { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.music .split__col { display: contents; }

/* =====================================================================
   THE TURNTABLE (js/turntable.js) — drawn with CSS; config `turntable`
   images replace each part via the --img-* vars + deck--img-* classes.
   ===================================================================== */
.music[hidden] { display: none !important; }
.deck { position: relative; width: min(760px, 100%); margin: 0 auto 34px; }
.deck__plinth {
  position: relative; aspect-ratio: 4 / 3; border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0) 40%),
    repeating-linear-gradient(97deg, rgba(0,0,0,0) 0 9px, rgba(0,0,0,0.12) 9px 10px, rgba(0,0,0,0) 10px 23px),
    linear-gradient(180deg, #3a2a1c, #241910 55%, #1a110a);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 70px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -16px 30px rgba(0,0,0,0.5);
  transition: box-shadow .3s;
}
.deck.is-target .deck__plinth { box-shadow: 0 40px 70px rgba(0,0,0,0.75), 0 0 0 2px rgba(var(--accent-rgb),0.35), 0 0 50px rgba(var(--accent-rgb),0.25); }
.deck--img-base .deck__plinth { background: var(--img-base) center / contain no-repeat; border: 0; box-shadow: none; border-radius: 0; aspect-ratio: var(--base-aspect, 4 / 3); }
.deck--img-base-on.is-playing .deck__plinth { background-image: var(--img-base-on); }
.deck--img-base.is-target .deck__plinth { box-shadow: none; filter: drop-shadow(0 0 22px rgba(var(--accent-rgb),0.45)); }
/* platter */
.deck__platter {
  position: absolute; left: var(--platter-left, 7%); top: var(--platter-top, 10%); width: var(--platter-size, 62%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #2a2a2e 0 18%, #1b1b1f 18.5% 92%, #3a3a40 92.5% 95%, #121214 95.5%);
  box-shadow: 0 12px 30px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.06); cursor: pointer;
}
.deck--img-platter .deck__platter { background: var(--img-platter) center / contain no-repeat; box-shadow: none; }
.deck__mat { position: absolute; inset: 5%; border-radius: 50%; background: repeating-radial-gradient(circle, #202024 0 2px, #26262b 2px 4px); opacity: .9; }
.deck--img-platter .deck__mat, .deck--img-platter .deck__spindle { display: none; }
.deck--img-platter .deck__record { inset: 9%; }   /* leave the platter's own rim showing around the record */
.deck__spindle { position: absolute; left: 50%; top: 50%; width: 3.2%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 35%, #ddd, #666 60%, #333); z-index: 4; box-shadow: 0 1px 3px rgba(0,0,0,0.8); }
/* drop halo when a dragged record is over the platter */
.deck__drop { position: absolute; inset: -6%; border-radius: 50%; border: 2px dashed rgba(var(--accent-hot-rgb),0.7); opacity: 0; transition: opacity .2s, transform .2s; transform: scale(0.96); pointer-events: none; z-index: 5; }
.deck.is-target .deck__drop { opacity: .45; transform: none; }
.deck.is-over .deck__drop { opacity: 1; box-shadow: 0 0 40px rgba(var(--accent-rgb),0.5); }
/* the record on the platter */
.deck__record { position: absolute; inset: 1.5%; border-radius: 50%; opacity: 0; transform: scale(0.6); transition: opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1); z-index: 2; }
.deck.has-record .deck__record { opacity: 1; transform: none; }
.deck.is-landing .deck__record { opacity: 0; transition: opacity .15s; }
.deck__record .vinyl { animation: spin var(--spin, 1.8s) linear infinite; animation-play-state: paused; }
.deck.is-playing .deck__record .vinyl { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
/* a vinyl disc (shared by the platter, the crate and the flying clone) */
.vinyl { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background:
    conic-gradient(from 20deg, rgba(255,255,255,0.10) 0 6%, rgba(255,255,255,0) 14% 40%, rgba(255,255,255,0.08) 50% 56%, rgba(255,255,255,0) 64% 100%),
    repeating-radial-gradient(circle, #0b0b0d 0 1.5px, #161618 1.5px 3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.06); }
.vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,0) 0 34%, rgba(0,0,0,0.25) 35% 36%, rgba(0,0,0,0) 37%); pointer-events: none; }
.vinyl__label { position: absolute; left: 50%; top: 50%; width: var(--label-size, 36%); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); object-fit: cover; box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 0 3px rgba(255,255,255,0.08); }
.vinyl__hole { position: absolute; left: 50%; top: 50%; width: 3.4%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: #0a0a0c; box-shadow: inset 0 0 2px #000; }
/* a real record image (html.has-record-img, --img-record on :root): replaces the drawn vinyl everywhere */
.has-record-img .vinyl { background: none; box-shadow: none; overflow: visible; filter: drop-shadow(0 12px 22px rgba(0,0,0,0.6)); }
.has-record-img .vinyl::before { content: ""; position: absolute; inset: 0; background: var(--img-record) center / contain no-repeat; z-index: 1; pointer-events: none; }
.has-record-img .vinyl::after, .has-record-img .vinyl__hole, .has-record-img .vinyl__label { display: none; }
/* tonearm (drawn): pivot top-right, arm hangs down, rotates from the pivot */
.deck__arm { position: absolute; left: var(--arm-x, 86%); top: var(--arm-y, 17%); width: 7%; height: var(--arm-len, 56%); transform-origin: 50% 7%; transform: rotate(var(--rest-angle, -24deg)); transition: transform .9s cubic-bezier(.4,.1,.2,1); z-index: 6; pointer-events: none; }
.deck.is-playing .deck__arm { transform: rotate(var(--play-angle, -3deg)); }
.deck__pivot { position: absolute; left: 50%; top: 0; width: 160%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8a8f99, #3f434b 55%, #22252a); box-shadow: 0 4px 10px rgba(0,0,0,0.7), inset 0 0 0 2px rgba(0,0,0,0.3); }
.deck__counter { position: absolute; left: 50%; top: -34%; width: 58%; height: 36%; transform: translateX(-50%); border-radius: 30% 30% 50% 50%; background: linear-gradient(#5a5f69, #2b2e34); box-shadow: 0 3px 8px rgba(0,0,0,0.6); }
.deck__tube { position: absolute; left: 50%; top: 7%; width: 24%; height: 80%; transform: translateX(-50%); background: linear-gradient(90deg, #6b7079, #c9ccd2 45%, #7d828b); border-radius: 4px; box-shadow: 0 3px 8px rgba(0,0,0,0.6); }
.deck__head { position: absolute; left: 50%; bottom: 0; width: 110%; height: 16%; transform: translateX(-50%) rotate(-14deg); border-radius: 3px; background: linear-gradient(#2c2f35, #15171b); box-shadow: 0 4px 10px rgba(0,0,0,0.7); }
.deck--img-tonearm .deck__arm > span { display: none; }
.deck--img-tonearm .deck__arm {
  /* the image hangs from its pivot: the element's top-left is moved so the pivot point (armOrigin, a fraction of the
     image) lands on armPivot (a fraction of the base), and the rotation happens around that same point */
  background: var(--img-tonearm) center / contain no-repeat; width: auto; height: var(--arm-len, 56%); aspect-ratio: var(--arm-aspect, 2 / 3);
  transform-origin: var(--arm-ox, 50%) var(--arm-oy, 7%);
  transform: translate(calc(var(--arm-ox, 50%) * -1), calc(var(--arm-oy, 7%) * -1)) rotate(var(--rest-angle, -24deg));
  filter: drop-shadow(6px 10px 10px rgba(0,0,0,0.55));
}
.deck--img-tonearm.is-playing .deck__arm { transform: translate(calc(var(--arm-ox, 50%) * -1), calc(var(--arm-oy, 7%) * -1)) rotate(var(--play-angle, -3deg)); }
.deck.is-playing.is-cueing .deck__arm { transform: rotate(var(--rest-angle, -24deg)); transition-duration: .35s; }
.deck--img-tonearm.is-playing.is-cueing .deck__arm { transform: translate(calc(var(--arm-ox, 50%) * -1), calc(var(--arm-oy, 7%) * -1)) rotate(var(--rest-angle, -24deg)); }
/* power / play button + readout on the plinth */
.deck__power { position: absolute; left: 4%; bottom: 5%; width: 10%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,0.14); background: radial-gradient(circle at 40% 35%, #3a3d44, #16181c); cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.7); display: grid; place-items: center; transition: border-color .3s, box-shadow .3s; }
.deck__power span { width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.25); transition: background .3s, box-shadow .3s; }
.deck__power:hover { border-color: rgba(var(--accent-hot-rgb),0.6); }
.deck.is-playing .deck__power { border-color: rgba(var(--accent-hot-rgb),0.7); box-shadow: 0 4px 12px rgba(0,0,0,0.7), 0 0 18px rgba(var(--accent-rgb),0.4); }
.deck.is-playing .deck__power span { background: var(--ember-hot); box-shadow: 0 0 10px var(--ember-hot); }
.deck--img-base .deck__power { display: none; }
/* on a real base, the power button is an invisible hotspot over the painted button (config powerAt / powerSize) */
.deck--hot-power .deck__power { display: block; left: calc(var(--power-x) - var(--power-size) / 2); top: calc(var(--power-y) - var(--power-size) / 2); bottom: auto; width: var(--power-size); background: transparent; border: 0; box-shadow: none; }
.deck--hot-power .deck__power span { display: none; }
.deck--hot-power .deck__power:hover { box-shadow: 0 0 0 3px rgba(var(--accent-hot-rgb),0.35), 0 0 18px rgba(var(--accent-rgb),0.5); }
.deck--hot-power.is-playing .deck__power { box-shadow: none; }
/* volume knob hotspot: a rotating notch over the painted knob (config volAt / volSize) */
.deck__vol { position: absolute; left: calc(var(--vol-x) - var(--vol-size) / 2); top: calc(var(--vol-y) - var(--vol-size) / 2); width: var(--vol-size); aspect-ratio: 1; border-radius: 50%; cursor: ns-resize; z-index: 7; transform: rotate(var(--vol-angle, 135deg)); transition: box-shadow .2s; touch-action: none; }
.deck__vol i { position: absolute; left: 50%; top: 12%; width: 6%; height: 26%; margin-left: -3%; border-radius: 3px; background: rgba(var(--accent-hot-rgb),0.9); box-shadow: 0 0 6px rgba(var(--accent-hot-rgb),0.8); }
.deck__vol:hover, .deck__vol.is-turning { box-shadow: 0 0 0 3px rgba(var(--accent-hot-rgb),0.3), 0 0 18px rgba(var(--accent-rgb),0.45); }
.deck--img-base .deck__now { left: 0; right: 0; bottom: auto; top: 100%; margin-top: 10px; align-items: center; text-align: center; }
.deck--img-base .deck__hint { margin-top: 62px; }
.deck--img-base .deck__now .deck__title { white-space: normal; }
.deck__now { position: absolute; left: 17%; right: 4%; bottom: 5.5%; display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.deck__nowlabel { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.deck__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 2.2vw, 20px); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck__hint { text-align: center; color: var(--muted); font-size: 13px; letter-spacing: 0.06em; margin-top: 16px; }
/* the flying disc (fixed clone used for tap-to-play and drag) */
.fly { position: fixed; z-index: 200; pointer-events: none; opacity: .95; transform-origin: center; transition: transform .85s cubic-bezier(.3,.7,.2,1), opacity .85s; will-change: transform; }
.fly .vinyl { box-shadow: 0 30px 50px rgba(0,0,0,0.7); }
.fly--drag { transition: none; opacity: 1; }
@media (max-width: 720px) {
  .deck { margin-bottom: 22px; }
  .crate { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 12px; }
  .rec__title { font-size: 14px; }
  .deck__hint { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .deck__record .vinyl { animation: none; } .fly { transition: none; } }

/* ===== THE ALBUM (sleeve + record + track list) ===== */
.album { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 34px 56px; align-items: start; max-width: 980px; margin: 0 auto 44px; }
.album__sleeve { position: relative; aspect-ratio: 1; cursor: pointer; -webkit-user-select: none; user-select: none; }
.album__cover { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06); transition: transform .35s; }
.album__sleeve:hover .album__cover { transform: translateX(-3%) rotate(-1.5deg); }
.album__disc { position: absolute; inset: 3%; z-index: 1; cursor: grab; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.album__disc .vinyl { animation: none; }
.album__disc:active { cursor: grabbing; }
.album__sleeve:hover .album__disc, .album__sleeve:focus-within .album__disc { transform: translateX(38%) rotate(14deg); }
.album.is-taking .album__disc { transform: translateX(98%) rotate(30deg); }
.album.is-out .album__disc, .album.is-dragging .album__disc { opacity: 0; pointer-events: none; }
.album.is-out .album__sleeve:hover .album__cover { transform: none; }
.album.is-out .album__sleeve { cursor: pointer; }
.album__tag { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 3; padding: 5px 12px; border-radius: 999px; background: rgba(var(--accent-rgb),0.9); color: #140c04; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,0.6); transition: opacity .3s; }
.album__tag:empty { opacity: 0; }
.album__eyebrow { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ember-hot); margin-bottom: 6px; }
.album__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3vw, 36px); line-height: 1.05; margin: 0; }
.album__by { color: var(--muted); font-size: 14px; letter-spacing: 0.06em; margin: 6px 0 16px; }
.tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.track { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); transition: background .2s; }
.track:hover { background: rgba(255,255,255,0.03); }
.track__play { flex: 1; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; font: inherit; padding: 10px 6px; }
.track__num { position: relative; width: 34px; height: 18px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: var(--muted); }
.track__eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 2px; }
.track__eq i { width: 3px; height: 60%; background: var(--ember-hot); border-radius: 1px; animation: teq .9s ease-in-out infinite; transform-origin: bottom; }
.track__eq i:nth-child(2) { animation-delay: .2s; } .track__eq i:nth-child(3) { animation-delay: .45s; }
@keyframes teq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.track.is-playing .track__n { visibility: hidden; }
.track.is-playing .track__eq { display: flex; }
.track.is-current .track__num, .track.is-current .track__title { color: var(--ember-hot); }
.track__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track__dur { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.track__actions { display: flex; align-items: center; gap: 6px; padding-right: 4px; }
.track__actions .audio__share { margin-left: 0; }
.track__actions .audio__lyr { height: 28px; padding: 0 10px; font-size: 10.5px; }
.track__actions .audio__share, .track__actions .audio__dl { width: 28px; height: 28px; }
.track__actions .audio__share svg, .track__actions .audio__dl svg { width: 13px; height: 13px; }
.album__foot { margin-top: 14px; color: var(--muted); font-size: 13px; }
.album__foot:empty { display: none; }
@media (max-width: 860px) {
  .album { grid-template-columns: 1fr; gap: 30px; }
  .album__sleeve { width: min(300px, 78%); margin: 0 auto; }
  .album__info { text-align: center; }
  .track__play { text-align: left; }
  .album__info .tracks, .album__info .album__foot { text-align: left; }
}
@media (max-width: 720px) {
  .track__title { font-size: 15px; white-space: normal; }
  .track__actions .audio__lyr { padding: 0 8px; }
}

/* ===== SPEED SWITCH + INTERACTIVE TONEARM ===== */
.deck__speed { position: absolute; z-index: 7; cursor: pointer; touch-action: none; border-radius: 8px; transition: box-shadow .2s; }
.deck__speed:hover { box-shadow: 0 0 0 2px rgba(var(--accent-hot-rgb),0.25), 0 0 16px rgba(var(--accent-rgb),0.35); }
.deck__speedknob { position: absolute; z-index: 8; aspect-ratio: 42 / 48; transform: translate(-50%, -50%); background: center / contain no-repeat; cursor: grab; touch-action: none; transition: top .22s cubic-bezier(.3,.9,.3,1.2); filter: drop-shadow(0 3px 4px rgba(0,0,0,0.6)); }
.deck__speedknob:active { cursor: grabbing; }
.deck__arm { pointer-events: auto; cursor: grab; }
.deck.is-arm-drag .deck__arm { cursor: grabbing; transition: none; transform: rotate(var(--drag-angle, var(--rest-angle))); }
.deck--img-tonearm.is-arm-drag .deck__arm { transform: translate(calc(var(--arm-ox, 50%) * -1), calc(var(--arm-oy, 7%) * -1)) rotate(var(--drag-angle, var(--rest-angle))); }
.deck:not(.has-record) .deck__arm { pointer-events: none; }

/* ===== THE PROJECTOR (Watch section) ===== */
.videos[hidden] { display: none !important; }
.cinema { max-width: 1100px; margin: 0 auto 30px; }
.screen { position: relative; z-index: 1; }
.screen__img { position: relative; z-index: 2; width: 100%; display: block; pointer-events: none; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.7)); }
.screen__canvas { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; }
.screen__frame { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 2px; }
.screen.is-live .screen__frame { background: #2a1d10; }
/* the player is 132 % of the cloth and centred, so YouTube's title bar, control bar and any letterbox bars fall
   outside the visible cloth and the picture fills it edge to edge ("fullscreen" on the screen); it takes no pointer
   events (no hover overlays) — the tap layer below drives pause / resume through the embed API */
.screen__video { position: absolute; left: 50%; top: 50%; width: 132%; height: 132%; transform: translate(-50%, -50%); border: 0; display: block; pointer-events: none;
  /* the silent-film look: faded sepia print, slightly translucent so the cloth reads through */
  filter: sepia(0.3) contrast(1.15) brightness(0.94) saturate(0.8); opacity: 0.93; }
.screen__tap { position: absolute; inset: 0; z-index: 3; background: transparent; border: 0; cursor: pointer; display: none; padding: 0; }
.screen.is-live .screen__tap { display: block; }
.screen__glyph { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%) scale(0.8); border-radius: 50%; background: rgba(20,12,4,0.55); border: 1px solid rgba(255,230,190,0.35); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.screen__glyph svg { width: 36px; height: 36px; fill: rgba(255,236,205,0.9); }
.screen__tap.is-paused .screen__glyph--play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.screen__tap.is-flash:not(.is-paused) .screen__glyph--pause { animation: tapflash .9s ease-out forwards; }
@keyframes tapflash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
.screen.is-live .screen__tap:hover .screen__glyph--pause:not(.is-paused) { }
.screen__fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s; }
.screen.is-live .screen__fx, .screen.is-starting .screen__fx { opacity: 1; }
.fx { position: absolute; inset: 0; display: block; }
.fx--tex { background: url("../assets/img/projector/canvas-tex.jpg") center / 420px repeat; mix-blend-mode: multiply; opacity: 0.32; }
.fx--grain { background: url("../assets/img/projector/grain.png") 0 0 / 160px repeat; mix-blend-mode: overlay; opacity: 0.28; animation: grain .3s steps(3) infinite; }
@keyframes grain { 0% { background-position: 0 0; } 33% { background-position: 60px -40px; } 66% { background-position: -50px 70px; } 100% { background-position: 30px 20px; } }
.fx--vignette { background: radial-gradient(ellipse 70% 62% at 50% 50%, rgba(0,0,0,0) 45%, rgba(45,28,10,0.45) 85%, rgba(30,18,6,0.7) 100%); }
.fx--flicker { background: rgba(255,236,196,0.07); animation: flicker .16s infinite alternate; }
@keyframes flicker { from { opacity: .35; } to { opacity: 1; } }
.fx--light { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255,246,220,0.95), rgba(255,236,200,0.55) 50%, rgba(255,220,170,0) 100%); opacity: 0; }
.screen.is-starting .fx--light { animation: projstart 1.2s steps(1, end) forwards; }
@keyframes projstart { 0% { opacity: 0; } 8% { opacity: .9; } 14% { opacity: .1; } 22% { opacity: .8; } 30% { opacity: .2; } 38% { opacity: 1; } 46% { opacity: .35; } 60% { opacity: .9; } 72% { opacity: .5; } 84% { opacity: .95; } 100% { opacity: 0; } }
.screen.is-starting .screen__frame { background: rgba(70,45,15,0.25); }
.screen.is-live .screen__canvas { box-shadow: 0 0 60px rgba(255,220,160,0.18); }
.screen__title { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: clamp(14px, 1.8vw, 22px); color: rgba(60,38,14,0.75); letter-spacing: 0.02em; pointer-events: none; transition: opacity .4s; }
.screen.is-live .screen__title, .screen.is-starting .screen__title { opacity: 0; }
.screen:not(.is-live):not(.is-starting) .screen__canvas::before { content: ""; position: absolute; inset: 10% 8%; border: 1px dashed rgba(90,60,20,0.25); border-radius: 4px; }
.screen__stop { position: absolute; z-index: 5; top: 0; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(10,8,6,0.8); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; opacity: 0; pointer-events: none; transform: translate(30%, -30%); transition: opacity .3s; }
.screen.is-live .screen__stop, .screen.is-starting .screen__stop { opacity: 1; pointer-events: auto; }
.screen__stop:hover { background: rgba(var(--accent-rgb),0.9); color: #140c04; border-color: transparent; }
/* the room goes dark while the film runs; the screen (and the nav / player, above it) stay lit */
.lights { position: fixed; inset: 0; z-index: 40; background: rgba(2,2,3,0.78); opacity: 0; pointer-events: none; transition: opacity .8s; }
body.is-projecting .lights { opacity: 1; pointer-events: auto; }
body.is-projecting .screen { z-index: 41; }
body.is-projecting .player { z-index: 60; }
/* film strip */
.reels-wrap { position: relative; margin-top: 26px; }
.reels { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 10px 6px 14px; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb),0.6) rgba(255,255,255,0.06); }
.reel { flex: 0 0 auto; width: 190px; scroll-snap-align: start; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; text-align: left; font: inherit; transition: transform .2s; }
.reel:hover { transform: translateY(-3px); }
.reel__film { display: block; position: relative; padding: 11px 0; background: #121010; border-radius: 3px; box-shadow: 0 10px 24px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.06); }
.reel__film::before, .reel__film::after { content: ""; position: absolute; left: 6px; right: 6px; height: 7px; background: repeating-linear-gradient(to right, rgba(255,255,255,0.0) 0 4px, rgba(255,248,230,0.8) 4px 11px, rgba(255,255,255,0.0) 11px 15px); border-radius: 1px; }
.reel__film::before { top: 2px; } .reel__film::after { bottom: 2px; }
.reel__film img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: sepia(0.45) contrast(1.05) brightness(0.85); transition: filter .25s; }
.reel:hover .reel__film img, .reel.is-current .reel__film img { filter: sepia(0.2) contrast(1.05) brightness(1); }
.reel.is-current .reel__film { border-color: rgba(var(--accent-hot-rgb),0.8); box-shadow: 0 10px 24px rgba(0,0,0,0.6), 0 0 18px rgba(var(--accent-rgb),0.45); }
.reel__title { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--steel); }
.reel.is-current .reel__title { color: var(--ember-hot); }
.reels__nav { position: absolute; top: 46px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(10,8,6,0.8); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.reels__nav:hover { background: rgba(var(--accent-rgb),0.9); color: #140c04; }
.reels__nav--prev { left: -14px; } .reels__nav--next { right: -14px; }
@media (max-width: 720px) {
  .reel { width: 150px; }
  .reels__nav { display: none; }
  .screen__stop { width: 36px; height: 36px; font-size: 22px; transform: translate(10%, -20%); }
}
@media (prefers-reduced-motion: reduce) { .fx--grain, .fx--flicker { animation: none; } }
/* label that follows the tonearm while you hold it: the track under the needle */
.deck__cue { position: absolute; z-index: 20; transform: translate(14px, -130%); padding: 5px 10px; border-radius: 3px; background: rgba(10,8,6,0.92); color: var(--ember-hot); font-family: var(--font-display); font-weight: 600; font-size: 13px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: 0 6px 16px rgba(0,0,0,0.6); border: 1px solid rgba(var(--accent-rgb),0.5); }
.deck__cue.is-on { opacity: 1; }
.track.is-under { background: rgba(var(--accent-rgb),0.12); }

/* NOIZ hero: the vertical light column + whole-banner flash of the Zeekulus engine are off; the music lights the horizon
   instead (canvas #embers: orbs + rays). A soft amber band marks the line where the banner meets the wood. */
.hero__beam { display: none; }
.hero__flash { background: linear-gradient(to top, rgba(255,205,140,0) 0%, rgba(255,205,140,0.5) 13%, rgba(255,190,120,0.18) 22%, rgba(255,180,110,0) 36%); opacity: calc(0.25 + var(--bass) * 0.6 + var(--beat) * 0.25); mix-blend-mode: screen; }
.hero__bg { transform: translate(var(--px), var(--py)) scale(1.03); }   /* no bass zoom on the banner */

/* ===== THE SIGNAL as a tube TV (js/crt.js) ===== */
.viz--crt { background: radial-gradient(ellipse 70% 60% at 50% 45%, #15100a 0%, #070504 60%, #020202 100%); display: flex; align-items: center; justify-content: center; }
.viz--crt canvas { position: absolute; inset: auto; width: auto; height: auto; }
.tv { position: relative; width: min(94vw, calc((100vh - 150px) * 1.499)); aspect-ratio: 1535 / 1024; margin-bottom: 70px; transform: scale(0.96); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.viz.is-open .tv { transform: none; opacity: 1; }
.tv__screen { position: absolute; z-index: 1; background: #050605; display: block; border-radius: 6% / 8%; }
.tv__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: block; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.8)); }
.tv__glow { position: absolute; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: 0.45; filter: blur(22px); display: block; }
.tv__dial, .tv__knob { position: absolute; z-index: 4; aspect-ratio: 1; border-radius: 50%; background: transparent; border: 0; cursor: pointer; transition: box-shadow .2s; }
.tv__dial:hover, .tv__knob:hover { box-shadow: 0 0 0 3px rgba(var(--accent-hot-rgb),0.35), 0 0 22px rgba(var(--accent-rgb),0.5); }
.tv__knob { cursor: ns-resize; touch-action: none; transform: rotate(var(--vol-angle, 135deg)); }
.tv__knob i { position: absolute; left: 50%; top: 10%; width: 7%; height: 24%; margin-left: -3.5%; border-radius: 3px; background: rgba(var(--accent-hot-rgb),0.9); box-shadow: 0 0 6px rgba(var(--accent-hot-rgb),0.8); }
.tv__led { position: absolute; z-index: 4; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff9a7a, #d81e10 60%, #7a0a06); box-shadow: 0 0 14px 4px rgba(255,60,30,0.55); pointer-events: none; opacity: 0; transition: opacity .4s .3s; }
.viz.is-open .tv__led { opacity: 1; }
.tv__osd { position: absolute; z-index: 4; left: 13%; top: 14%; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: clamp(14px, 1.6vw, 22px); color: #7cff9a; text-shadow: 0 0 8px rgba(80,255,120,0.9), 2px 0 0 rgba(255,0,0,0.35), -2px 0 0 rgba(0,80,255,0.35); letter-spacing: 0.12em; opacity: 0; transition: opacity .25s; pointer-events: none; }
.tv__osd.is-on { opacity: 1; }
.viz--crt .viz__bottom { background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0)); }
.viz--crt .viz__mode { margin-right: 8px; }
.viz--crt .viz__mode::before { content: "CH · "; }
@media (max-width: 720px) {
  .tv { width: 96vw; margin-bottom: 120px; }
  .viz--crt .viz__mode { display: none; }
}

/* ===== lyrics on parchment ===== */
.tx--lyrics::before { display: none; }
.tx--lyrics .tx__panel { background: #e3c99a url("../assets/img/lyrics/parchment.jpg") center / cover no-repeat; border: 0; box-shadow: 0 40px 80px rgba(0,0,0,0.85), inset 0 0 60px rgba(60,35,10,0.25); padding: 34px 44px 30px; border-radius: 2px; }
.tx--lyrics .tx__head { color: #4a2e10; text-shadow: none; }
.tx--lyrics .tx__head span:first-child { color: #7a5a2a; }
.tx--lyrics .tx__dot { display: none; }
.tx--lyrics .lyr__text { color: #2e1d0b; font-family: var(--font-display); font-weight: 500; font-size: 17.5px; line-height: 1.65; }
.tx--lyrics .lyr__by { color: #6b4b22; }
.tx--lyrics .tx__panel::-webkit-scrollbar { width: 8px; } .tx--lyrics .tx__panel::-webkit-scrollbar-thumb { background: rgba(80,50,20,0.4); border-radius: 4px; }

/* ===== projector transport bar ===== */
.reelbar { display: none; align-items: center; gap: 8px; margin: 14px auto 0; width: min(760px, 100%); padding: 8px 12px; border-radius: 6px; background: linear-gradient(#2a1c10, #1a110a); border: 1px solid rgba(226,160,70,0.35); box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,220,160,0.12); position: relative; z-index: 41; }
.reelbar.is-on { display: flex; }
.reelbar__btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(226,160,70,0.4); background: radial-gradient(circle at 40% 35%, #4a3418, #241708); color: #f1d8a8; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: box-shadow .2s, color .2s; }
.reelbar__btn svg { width: 16px; height: 16px; fill: currentColor; }
.reelbar__btn:hover { color: #fff; box-shadow: 0 0 12px rgba(var(--accent-rgb),0.5); }
.reelbar__btn--main { width: 42px; height: 42px; background: radial-gradient(circle at 40% 35%, var(--ember-hot), var(--ember) 70%); color: #140c04; border: 0; }
.reelbar__btn--main svg { width: 20px; height: 20px; }
.reelbar__pause { display: none; } .reelbar.is-playing .reelbar__pause { display: block; } .reelbar.is-playing .reelbar__play { display: none; }
.reelbar__time { font-size: 12px; color: #d8bf90; font-variant-numeric: tabular-nums; min-width: 36px; text-align: center; }
.reelbar__track { position: relative; flex: 1; height: 22px; }
.reelbar__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: rgba(0,0,0,0.6); box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); }
.reelbar__fill { position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: linear-gradient(90deg, var(--ember), var(--ember-hot)); width: 0; pointer-events: none; box-shadow: 0 0 8px rgba(var(--accent-rgb),0.6); }
.reelbar__seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; z-index: 2; }
.reelbar__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe2b0, var(--ember) 70%); border: 1px solid rgba(0,0,0,0.5); box-shadow: 0 2px 6px rgba(0,0,0,0.7); }
.reelbar__seek::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ember-hot); border: 1px solid rgba(0,0,0,0.5); }
.reelbar__seek::-moz-range-track { background: transparent; }
@media (max-width: 720px) { .reelbar { gap: 6px; padding: 6px 8px; } .reelbar__time { min-width: 30px; font-size: 11px; } .reelbar__btn { width: 30px; height: 30px; } }

/* ===== the screen rolls up / unrolls ===== */
.screen-wrap { position: relative; overflow: hidden; }   /* clips the still-rolled part of the screen so it can't sit over the film strip */
.screen-wrap .screen { position: absolute; left: 0; right: 0; top: 0; }
.screen__roll { position: absolute; left: 0; top: 0; width: 100%; z-index: 4; pointer-events: none; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.7)); transition: opacity .25s; will-change: transform; }
.screen__img { will-change: clip-path; }
.screen:not(.is-live):not(.is-starting):not(.is-unrolling) .screen__canvas::before { display: none; }
.screen:not(.is-live):not(.is-starting) .screen__title { opacity: 0; }
/* the film strip stays lit above the dark room while a film runs; the reel under the mouse brightens */
body.is-projecting .reels-wrap { z-index: 41; }
body.is-projecting .reel { opacity: 0.45; transition: opacity .25s, transform .2s; }
body.is-projecting .reel:hover, body.is-projecting .reel.is-current { opacity: 1; }
body.is-projecting .reel:hover .reel__film { box-shadow: 0 10px 24px rgba(0,0,0,0.6), 0 0 22px rgba(255,220,160,0.45); border-color: rgba(255,230,190,0.6); }
body.is-projecting .reel:hover .reel__film img { filter: sepia(0.1) contrast(1.05) brightness(1.08); }
body.is-projecting .reels__nav { z-index: 42; }

/* ===== hero intro + loop (the logo is in the video, so the wordmark overlay is off) ===== */
.hero__logo, .hero__tagline { display: none !important; }
.hero__video--loop { opacity: 0; }
.hero.is-looping .hero__video--loop { opacity: 1; }
.hero.is-looping .hero__video--intro { opacity: 0; }
.hero__video { transition: opacity .7s linear; }   /* the loop crossfades over the intro's last moment */
/* fit to screen: the whole frame is visible (the page backdrop is the same wood, so the letterbox is invisible) */
.hero__video { object-fit: contain; }
.hero__bg { background-size: contain; background-color: transparent; }
@media (max-width: 720px) { .hero__video { object-fit: contain; } }