/* World of Treez · home v2 · dark / cyan / magenta · glitchy, slightly off */
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000000;
  --bg-elev: #0E0C14;
  --bg-row: #12101A;
  --bg-row-hover: #181522;
  --ink: #F4F0FF;
  --muted: #9B94AB;
  --dim: #6E687A;
  --cyan: #00E5FF;
  --magenta: #FF2BD6;
  --line: rgba(244, 240, 255, 0.10);
  --line-strong: rgba(244, 240, 255, 0.18);
  --nav-h: 68px;
  --jx: 0px;
  --jy: 0px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
html { scroll-behavior: smooth; }
body {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
iframe { border: 0; display: block; width: 100%; }

/* noise + scanlines — industrial grit, always on, very light */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  opacity: 0.055;
  background-image: url("../logos/grain.png");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}
body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 81;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.10) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.32;
  transform: translate(var(--jx), var(--jy));
}
.edge-light {
  pointer-events: none;
  position: fixed;
  z-index: 70;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--cyan) 20%, var(--magenta) 80%, transparent);
  opacity: 0.45;
}
.edge-light.edge-right {
  left: auto;
  right: 0;
}

/* glitch-tree rails + creeping tendrils. black field; art never under text */
:root {
  --rail-w: 20px;
  --rail-shift: 0px;
  --creep: 0;
}
@media (min-width: 700px) {
  :root { --rail-w: 40px; }
}
@media (min-width: 1100px) {
  :root { --rail-w: max(72px, min(150px, calc((100vw - 1220px) / 2))); }
}

.site-frame {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}
.site-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 0.92;
}
.site-rail-left {
  left: 0;
  background-image: image-set(
    url("../frame/rail-left.avif") type("image/avif"),
    url("../frame/rail-left.webp") type("image/webp")
  );
  background-position: left calc(0px - var(--rail-shift));
}
.site-rail-right {
  right: 0;
  background-image: image-set(
    url("../frame/rail-right.avif") type("image/avif"),
    url("../frame/rail-right.webp") type("image/webp")
  );
  background-position: right calc(0px - var(--rail-shift));
}
@media (prefers-reduced-motion: no-preference) {
  .site-rail {
    animation: rail-glitch 7.5s steps(2, end) infinite;
  }
  .site-rail-right { animation-delay: 2.4s; animation-duration: 8.6s; }
}
@keyframes rail-glitch {
  0%, 86%, 100% { filter: none; }
  88% { filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta)); }
  91% { filter: none; }
  93% { filter: hue-rotate(-18deg) saturate(1.2); }
}

.tendril {
  position: fixed;
  top: var(--tendril-top, 50%);
  width: var(--tendril-w, 200px);
  height: var(--tendril-h, 280px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: calc(0.15 + var(--creep, 0) * 0.85);
  will-change: transform, opacity;
  z-index: 3;
}
.tendril-l {
  left: 0;
  transform: translate3d(calc((var(--creep, 0) - 0.62) * var(--reach, 72px)), -50%, 0);
  background-position: left center;
}
.tendril-r {
  right: 0;
  left: auto;
  transform: translate3d(calc((0.62 - var(--creep, 0)) * var(--reach, 72px)), -50%, 0);
  background-position: right center;
}
.tendril-l[data-n="1"] { --tendril-w: 200px; --tendril-h: 280px; --reach: 80px;
  background-image: image-set(url("../frame/tendril-l1.avif") type("image/avif"), url("../frame/tendril-l1.webp") type("image/webp")); }
.tendril-l[data-n="2"] { --tendril-w: 180px; --tendril-h: 240px; --reach: 64px;
  background-image: image-set(url("../frame/tendril-l2.avif") type("image/avif"), url("../frame/tendril-l2.webp") type("image/webp")); }
.tendril-l[data-n="3"] { --tendril-w: 220px; --tendril-h: 320px; --reach: 88px;
  background-image: image-set(url("../frame/tendril-l3.avif") type("image/avif"), url("../frame/tendril-l3.webp") type("image/webp")); }
.tendril-l[data-n="4"] { --tendril-w: 160px; --tendril-h: 200px; --reach: 56px;
  background-image: image-set(url("../frame/tendril-l4.avif") type("image/avif"), url("../frame/tendril-l4.webp") type("image/webp")); }
.tendril-l[data-n="5"] { --tendril-w: 200px; --tendril-h: 260px; --reach: 72px;
  background-image: image-set(url("../frame/tendril-l5.avif") type("image/avif"), url("../frame/tendril-l5.webp") type("image/webp")); }
.tendril-l[data-n="6"] { --tendril-w: 190px; --tendril-h: 300px; --reach: 76px;
  background-image: image-set(url("../frame/tendril-l6.avif") type("image/avif"), url("../frame/tendril-l6.webp") type("image/webp")); }
.tendril-r[data-n="1"] { --tendril-w: 200px; --tendril-h: 280px; --reach: 80px;
  background-image: image-set(url("../frame/tendril-r1.avif") type("image/avif"), url("../frame/tendril-r1.webp") type("image/webp")); }
.tendril-r[data-n="2"] { --tendril-w: 180px; --tendril-h: 240px; --reach: 64px;
  background-image: image-set(url("../frame/tendril-r2.avif") type("image/avif"), url("../frame/tendril-r2.webp") type("image/webp")); }
.tendril-r[data-n="3"] { --tendril-w: 220px; --tendril-h: 320px; --reach: 88px;
  background-image: image-set(url("../frame/tendril-r3.avif") type("image/avif"), url("../frame/tendril-r3.webp") type("image/webp")); }
.tendril-r[data-n="4"] { --tendril-w: 160px; --tendril-h: 200px; --reach: 56px;
  background-image: image-set(url("../frame/tendril-r4.avif") type("image/avif"), url("../frame/tendril-r4.webp") type("image/webp")); }
.tendril-r[data-n="5"] { --tendril-w: 200px; --tendril-h: 260px; --reach: 72px;
  background-image: image-set(url("../frame/tendril-r5.avif") type("image/avif"), url("../frame/tendril-r5.webp") type("image/webp")); }
.tendril-r[data-n="6"] { --tendril-w: 190px; --tendril-h: 300px; --reach: 76px;
  background-image: image-set(url("../frame/tendril-r6.avif") type("image/avif"), url("../frame/tendril-r6.webp") type("image/webp")); }

@media (max-width: 699px) {
  .tendril { --reach: 28px; }
  .tendril-l[data-n], .tendril-r[data-n] { --reach: 28px; }
}

/* openings — no giant wordmark */
.open-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 22px;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
}
.open-label .seq { color: var(--cyan); opacity: 0.8; }
.section-enter { padding-top: 36px; }
@media (min-width: 800px) {
  .section-enter { padding-top: 48px; }
}

.open-b {
  position: relative;
  /* fill the visible viewport (svh ignores in-app / mobile browser chrome) */
  height: 100vh;
  height: 100svh;
  min-height: min(520px, 100vh);
  min-height: min(520px, 100svh);
  max-height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: #000;
}
.open-b-still {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  z-index: 0;
}
.open-b-still picture,
.open-b-still img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center center;
}
.open-b-still .hero-slide[data-hero="1"] img { object-position: center 46%; }
.open-b-still .hero-slide[data-hero="2"] img { object-position: center 42%; }
.open-b-still .hero-slide[data-hero="3"] img { object-position: center center; }
.open-b-still .hero-slide[data-hero="4"] img { object-position: center 48%; }
.open-b-still::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0 3px,
    rgba(0,0,0,0.16) 3px 4px
  );
  opacity: 0.45;
  mix-blend-mode: multiply;
}
.open-b::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* short fade only, sits behind the readout — the photo stays visible */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent calc(100% - 7.5rem),
    rgba(0, 0, 0, 0.22) calc(100% - 4.25rem),
    #000 calc(100% - 1.25rem)
  );
}
.open-b-copy {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  /* same width + centering as .wrap; vertical padding only */
  padding: 18px 0 28px;
  width: min(1200px, calc(100% - (var(--rail-w) * 2 + 28px)));
  margin: 0 auto;
}
.open-b .open-label { color: rgba(244, 240, 255, 0.78); margin-bottom: 8px; }
.open-b .open-label:not(.open-render) { margin-bottom: 2px; }
.open-b .open-render { margin-bottom: 0; }
.open-wordmark {
  margin: 0 0 10px;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 14px; /* 1.4x the 10px readout */
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: none;
  color: rgba(247, 244, 255, 0.96);
  text-shadow: 1px 0 rgba(0, 229, 255, 0.28), -1px 0 rgba(255, 43, 214, 0.28);
  line-height: 1.15;
  animation: none;
}
@media (min-width: 800px) {
  .open-wordmark { font-size: 15px; } /* 1.5x */
}
@media (max-width: 699px) {
  .open-wordmark { font-size: 13px; margin-bottom: 8px; } /* 1.3x */
}
@media (max-width: 699px) {
  .open-b {
    height: 100vh;
    height: 100svh;
    min-height: min(520px, 100vh);
    min-height: min(520px, 100svh);
    max-height: 100dvh;
  }
  .open-b-copy { padding: 16px 0 20px; }
  .tendril-l[data-n], .tendril-r[data-n] {
    --tendril-w: 64px;
    --tendril-h: 130px;
    --reach: 18px;
  }
}

.wrap {
  width: min(1200px, calc(100% - (var(--rail-w) * 2 + 28px)));
  margin: 0 auto;
}

/* NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.nav-inner {
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (min-width: 800px) {
  .nav-inner { width: min(1320px, calc(100% - 72px)); gap: 40px; }
}
.nav-logo { display: block; height: 42px; width: auto; flex: 0 0 auto; }
.nav-logo img { height: 42px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  list-style: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (min-width: 800px) { .nav-links { gap: 32px; } }
.nav-links a {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  display: inline-block;
  transition: color 0.15s ease;
}
.nav-links a:hover {
  color: var(--ink);
  text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta);
  animation: nav-glitch 0.35s steps(2);
}
@keyframes nav-glitch {
  0%, 100% { transform: translate(0, 0) skew(0); }
  25% { transform: translate(-1px, 0) skewX(-6deg); }
  50% { transform: translate(1px, 0) skewX(4deg); }
  75% { transform: translate(-2px, 0); }
}
.nav-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 4px;
  padding-left: 16px;
  border-left: 1px solid var(--line-strong);
}
.nav-social a { display: flex; color: var(--muted); transition: color 0.15s ease; }
.nav-social a:hover { color: var(--cyan); }
.nav-social svg { width: 20px; height: 20px; display: block; }

/* HERO */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 72px;
  background: #000;
  overflow: hidden;
}
.hero > * { position: relative; z-index: 1; }
.hero::before,
.hero::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
}
.hero::before {
  top: 0;
  height: 120px;
  background-image: image-set(
    url("../frame/frame-top.avif") type("image/avif"),
    url("../frame/frame-top.webp") type("image/webp")
  );
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.hero::after {
  bottom: 0;
  height: 150px;
  background-image: image-set(
    url("../frame/frame-bottom.avif") type("image/avif"),
    url("../frame/frame-bottom.webp") type("image/webp")
  );
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
@media (max-width: 700px) {
  .hero {
    min-height: 0;
    padding: 36px 16px 48px;
    justify-content: center;
  }
  .hero-meta { margin-bottom: 8px; }
  .hero-tag { margin-top: 16px; }
  .hero::before { height: 44px; }
  .hero::after { height: 56px; }
}
/* 404 and other short pages: same edge treatment, still no wash under text */
.frame-ends {
  position: relative;
  overflow: hidden;
}
.frame-ends::before,
.frame-ends::after {
  content: "";
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
}
.frame-ends::before {
  top: 0;
  height: 88px;
  background-image: image-set(
    url("../frame/frame-top.avif") type("image/avif"),
    url("../frame/frame-top.webp") type("image/webp")
  );
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.frame-ends::after {
  bottom: 0;
  height: 110px;
  background-image: image-set(
    url("../frame/frame-bottom.avif") type("image/avif"),
    url("../frame/frame-bottom.webp") type("image/webp")
  );
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.frame-ends > * { position: relative; z-index: 1; }
.hero-meta {
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 18px;
}
.hero-logo {
  width: min(1320px, 94vw);
  height: auto;
  filter: drop-shadow(0 0 24px rgba(0,0,0,0.45));
}
.hero-tag {
  margin-top: 28px;
  font-family: "Unbounded", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}
.hero-tag span { color: var(--dim); padding: 0 0.7em; }

/* SECTION HEADS — RGB split, slightly off divider */
.section { padding: 88px 0 28px; position: relative; }
.section-head { margin-bottom: 28px; position: relative; }
.section-index {
  font-family: "Unbounded", sans-serif;
  font-weight: 900;
  font-size: 92px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(244, 240, 255, 0.035);
  position: absolute;
  left: -8px;
  top: -42px;
  pointer-events: none;
  user-select: none;
}
.eyebrow {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
/* RGB split on headings */
.eyebrow .label {
  position: relative;
  display: inline-block;
}
.eyebrow .label::before,
.eyebrow .label::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.eyebrow .label::before { color: var(--cyan); transform: translate(-1px, 0); mix-blend-mode: screen; opacity: 0.7; clip-path: inset(0 0 55% 0); }
.eyebrow .label::after { color: var(--magenta); transform: translate(1px, 0); mix-blend-mode: screen; opacity: 0.7; clip-path: inset(45% 0 0 0); }
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--cyan), var(--magenta), transparent 80%);
  opacity: 0.7;
  transform: rotate(-0.5deg);
  transform-origin: left center;
}
.seq {
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-left: 4px;
}

/* DIVIDER — off-kilter */
.kilt {
  height: 36px;
  margin: 8px auto;
  width: min(1320px, calc(100% - 48px));
  background-color: transparent;
  background-image:
    linear-gradient(90deg, transparent, var(--line-strong) 8%, var(--cyan) 42%, var(--magenta) 58%, var(--line-strong) 92%, transparent),
    image-set(
      url("../frame/frame-divider.avif") type("image/avif"),
      url("../frame/frame-divider.webp") type("image/webp")
    );
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 1px, 100% 36px;
  transform: rotate(-0.4deg);
  opacity: 0.9;
}

/* ========== CUSTOM PLAYER ========== */
.player {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.player::before {
  /* hypnotic hairline ring behind artwork, decorative */
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  right: -80px; top: -120px;
  border: 1px solid rgba(0, 229, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(255, 43, 214, 0.04), 0 0 0 42px rgba(0, 229, 255, 0.03);
  animation: spin-slow 48s linear infinite;
  pointer-events: none;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.player-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 800px) {
  .player-top { grid-template-columns: 280px 1fr; }
}
.now-art {
  position: relative;
  aspect-ratio: 1;
  background: #000;
  overflow: hidden;
}
@media (min-width: 800px) { .now-art { aspect-ratio: auto; min-height: 280px; } }
.now-art img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.now-art .fallback {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: #000;
  color: var(--dim);
}
.now-stage {
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.now-kicker {
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}
.now-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-shadow: 1px 0 rgba(0,229,255,0.35), -1px 0 rgba(255,43,214,0.35);
}
.now-set {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}
.viz {
  margin-top: 16px;
  height: 56px;
  width: 100%;
  display: block;
  background: #05040a;
  border: 1px solid var(--line);
}
.controls {
  margin-top: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px 16px;
  align-items: center;
}
.ctrl-btns { display: flex; align-items: center; gap: 8px; }
.ctrl {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--bg-row);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ctrl:hover { border-color: var(--cyan); color: var(--cyan); }
.ctrl-play {
  width: 48px; height: 48px;
  background: var(--cyan);
  color: #07060B;
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.25);
}
.ctrl-play:hover { background: var(--ink); color: #07060B; border-color: var(--ink); }
.ctrl svg { width: 16px; height: 16px; display: block; }
.ctrl-play svg { margin-left: 2px; }
.seek-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.seek {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  width: 100%;
  background: var(--line-strong);
  outline: none;
  cursor: pointer;
}
.seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  background: var(--cyan);
  border: 0;
  cursor: pointer;
}
.seek::-moz-range-thumb {
  width: 12px; height: 12px;
  background: var(--cyan);
  border: 0;
  cursor: pointer;
}
.time {
  font-family: "Unbounded", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
  white-space: nowrap;
  min-width: 92px;
  text-align: right;
}
.player-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.25);
}
.player-tools label {
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.player-tools select {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  max-width: 100%;
  min-width: min(100%, 280px);
}
.player-attr {
  margin-left: auto;
  font-size: 12px;
  color: var(--dim);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.player-attr a { color: var(--muted); border-bottom: 1px solid transparent; }
.player-attr a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }

.tracklist {
  list-style: none;
  max-height: 420px;
  overflow: auto;
  border-top: 1px solid var(--line);
}
.track {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: transparent;
}
.track:hover, .track.is-current { background: var(--bg-row); }
.track.is-current { box-shadow: inset 2px 0 0 var(--cyan); }
.track-art {
  width: 44px; height: 44px;
  object-fit: cover;
  background: #000;
}
.track-name {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-dur {
  font-family: "Unbounded", sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.track-ext {
  color: var(--dim);
  display: flex;
}
.track-ext:hover { color: var(--cyan); }
.track-ext svg { width: 14px; height: 14px; }
.group-label {
  padding: 10px 16px 6px;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--magenta);
  background: #0a0810;
  border-bottom: 1px solid var(--line);
}

/* hidden widget — kept in the document for the official API */
.sc-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

/* ========== VIDEOS ========== */
#videos { padding-bottom: 16px; }
.video-featured { margin-bottom: 28px; }
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px 22px;
}
@media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .video-grid { grid-template-columns: repeat(3, 1fr); } }
.video-card { display: block; min-width: 0; }
/* slightly wrong tiles */
.video-grid .video-card:nth-child(3n+1) { transform: rotate(-0.35deg); }
.video-grid .video-card:nth-child(3n+2) { transform: rotate(0.4deg); margin-top: 6px; }
.video-grid .video-card:nth-child(3n) { transform: rotate(-0.2deg); }
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--line);
}
.video-thumb img, .video-thumb iframe {
  width: 100%; height: 100%;
  object-fit: cover;
}
.video-thumb iframe { position: absolute; inset: 0; height: 100%; }
.video-facade { width: 100%; height: 100%; cursor: pointer; position: relative; display: block; padding: 0; }
.play-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 0;
  background: rgba(7, 6, 11, 0.55);
  border: 1px solid rgba(244, 240, 255, 0.35);
  display: grid; place-items: center;
  color: var(--ink);
  backdrop-filter: blur(4px);
}
.play-badge svg { width: 18px; height: 18px; margin-left: 2px; }
.video-card:hover .play-badge,
.video-featured:hover .play-badge {
  background: var(--cyan);
  color: var(--bg);
  border-color: var(--cyan);
}
.video-meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 2px 0;
}
.video-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* image hover glitch */
.glitch-img { position: relative; overflow: hidden; }
.glitch-img img { transition: transform 0.4s ease; }
.glitch-img:hover img {
  animation: img-glitch 0.45s steps(2);
}
@keyframes img-glitch {
  0%, 100% { transform: translate(0); filter: none; }
  20% { transform: translate(-4px, 1px); filter: drop-shadow(3px 0 var(--cyan)) drop-shadow(-3px 0 var(--magenta)); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, 0) skewX(1deg); filter: drop-shadow(-3px 0 var(--magenta)); }
  80% { transform: translate(2px, 1px); }
}

/* ========== ART ========== */
#art { padding-bottom: 0; }
#art .section-head { margin-bottom: 22px; }
.art-masonry {
  column-count: 2;
  column-gap: 8px;
  width: min(1320px, calc(100% - 24px));
  margin: 0 auto;
}
@media (min-width: 720px) { .art-masonry { column-count: 3; column-gap: 10px; } }
@media (min-width: 1100px) { .art-masonry { column-count: 4; } }
.art-masonry figure {
  margin: 0 0 10px;
  break-inside: avoid;
  overflow: hidden;
  background: var(--bg-elev);
  position: relative;
}
.art-masonry figure:nth-child(5n+1) { transform: rotate(-0.5deg); }
.art-masonry figure:nth-child(5n+2) { transform: rotate(0.45deg); margin-left: 4px; }
.art-masonry figure:nth-child(5n+4) { transform: rotate(-0.3deg); }
.art-masonry img { width: 100%; height: auto; display: block; }

.art-sub {
  padding: 36px 0 20px;
}
.art-sub .subhead {
  margin-bottom: 16px;
}
.cover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: min(1320px, calc(100% - 24px));
  margin: 0 auto 0;
}
@media (min-width: 600px) { .cover-grid { grid-template-columns: repeat(6, 1fr); gap: 5px; } }
@media (min-width: 1000px) { .cover-grid { grid-template-columns: repeat(8, 1fr); } }
.cover-grid a, .cover-grid figure {
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: #000;
  display: block;
}
.cover-grid img { width: 100%; height: 100%; object-fit: cover; }
.cover-grid a:nth-child(7n+1) { transform: rotate(-0.6deg); }
.cover-grid a:nth-child(7n+3) { transform: rotate(0.5deg); }
.cover-grid a:nth-child(7n+5) { margin-top: 4px; }

/* ========== ABOUT / FOOTER ========== */
.about { padding: 96px 0 80px; }
.about-inner { max-width: 640px; }
.about p {
  margin-top: 18px;
  font-size: 20px;
  line-height: 1.55;
}
.about-links { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.about-links a {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.about-links a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.about-links svg { width: 16px; height: 16px; }

.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: 28px 0 0;
}
.footer::after {
  content: "";
  display: block;
  height: 96px;
  width: 100%;
  margin-top: 20px;
  pointer-events: none;
  background-image: image-set(
    url("../frame/frame-bottom.avif") type("image/avif"),
    url("../frame/frame-bottom.webp") type("image/webp")
  );
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.footer-inner {
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-icon { width: 40px; height: 40px; flex: 0 0 auto; }
.footer-name {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-note {
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

/* platform icon rows */
.platform-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.music .platform-links,
.section .platform-links {
  margin-top: 22px;
}
.platform-links a,
.footer-social a,
.nav-social a {
  display: flex;
  color: var(--muted);
  transition: color 0.15s ease, filter 0.15s ease;
}
.platform-links svg,
.footer-social svg,
.nav-social svg {
  width: 22px;
  height: 22px;
  display: block;
}
.nav-social svg,
.footer-social svg { width: 20px; height: 20px; }
.platform-links a:hover,
.footer-social a:hover,
.nav-social a:hover {
  color: var(--cyan);
  filter: drop-shadow(1px 0 var(--magenta)) drop-shadow(-1px 0 var(--cyan));
}
.platform-links a:nth-child(even):hover,
.footer-social a:nth-child(even):hover,
.nav-social a:nth-child(even):hover {
  color: var(--magenta);
  filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta));
}
@media (prefers-reduced-motion: no-preference) {
  .platform-links a:hover svg,
  .footer-social a:hover svg,
  .nav-social a:hover svg {
    animation: icon-glitch 0.35s steps(2);
  }
}
@keyframes icon-glitch {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 0); }
  50% { transform: translate(1px, 0); }
  75% { transform: translate(-1px, 1px); }
}
.footer-social {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  max-width: 100%;
}
@media (max-width: 799px) {
  .footer-social { margin-left: 0; width: 100%; justify-content: flex-start; gap: 16px; padding-top: 8px; flex-wrap: nowrap; }
}


/* standard embeds */
.sc-feature { margin-bottom: 18px; }
.sc-feature iframe { min-height: 300px; }
.sc-list { display: grid; gap: 12px; }
.sc-list iframe { height: 166px; }
.sc-group-head {
  margin: 32px 0 12px;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--magenta);
}

.more-link {
  display: inline-block;
  margin-top: 20px;
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid transparent;
}
.more-link:hover { color: var(--cyan); border-bottom-color: var(--cyan); }


/* ========== SUBTLE MEDIA GLITCH (video thumbs + player art) ========== */
.glitch-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.media-glitch {
  position: relative;
  overflow: hidden;
  --media-src: none;
  --glitch-period: 7.4s;
  --glitch-delay: 0s;
  --slice-shift: 3px;
}
.media-glitch img {
  display: block;
  filter: url(#media-glitch-filter) saturate(1.08) contrast(1.06) hue-rotate(-6deg);
  animation: media-flicker var(--glitch-period) steps(2, end) infinite;
  animation-delay: var(--glitch-delay);
}
/* faint scanlines */
.media-glitch::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 3px,
    rgba(0, 0, 0, 0.18) 3px 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.5;
}
/* thin horizontal slices: slightly displaced copies of the same frame */
.media-glitch::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image: var(--media-src);
  background-size: cover;
  background-position: calc(50% + var(--slice-shift)) 50%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0 17%,
    #000 17% 18.3%,
    transparent 18.3% 38%,
    #000 38% 39%,
    transparent 39% 61%,
    #000 61% 62.4%,
    transparent 62.4% 81%,
    #000 81% 82.1%,
    transparent 82.1% 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0 17%,
    #000 17% 18.3%,
    transparent 18.3% 38%,
    #000 38% 39%,
    transparent 39% 61%,
    #000 61% 62.4%,
    transparent 62.4% 81%,
    #000 81% 82.1%,
    transparent 82.1% 100%
  );
  opacity: 0.95;
}
/* slight cyan/magenta edge cast */
.video-thumb.media-glitch,
.now-art.media-glitch,
.track-art-wrap {
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.06);
}

/* stagger so tiles are not in sync, even before JS sets custom periods */
.video-grid .video-card:nth-child(3n+1) .media-glitch { --glitch-period: 8.6s; --glitch-delay: 0.4s; --slice-shift: 4px; }
.video-grid .video-card:nth-child(3n+2) .media-glitch { --glitch-period: 6.2s; --glitch-delay: 2.1s; --slice-shift: -3px; }
.video-grid .video-card:nth-child(3n)   .media-glitch { --glitch-period: 10.4s; --glitch-delay: 3.8s; --slice-shift: 3px; }
.video-featured .media-glitch { --glitch-period: 7.8s; --glitch-delay: 1.1s; --slice-shift: 3px; }
.now-art.media-glitch { --glitch-period: 6.8s; --glitch-delay: 0.6s; --slice-shift: 3px; }

@keyframes media-flicker {
  0%, 87%, 93%, 100% {
    transform: translate3d(0, 0, 0);
    filter: url(#media-glitch-filter) saturate(1.08) contrast(1.06) hue-rotate(-6deg);
  }
  88% {
    transform: translate3d(-2px, 0.5px, 0);
    filter: url(#media-glitch-strong) saturate(1.16) contrast(1.1) hue-rotate(-10deg);
  }
  89% {
    transform: translate3d(2px, -0.4px, 0);
    filter: url(#media-glitch-strong) saturate(1.14) contrast(1.08) hue-rotate(8deg);
  }
  91% {
    transform: translate3d(-1px, 0, 0);
    filter: url(#media-glitch-filter) saturate(1.1) contrast(1.08) hue-rotate(-6deg);
  }
}

/* stronger on hover */
.media-glitch:hover img,
.video-card:hover .media-glitch img,
.track:hover .media-glitch img {
  filter: url(#media-glitch-strong) saturate(1.16) contrast(1.1) hue-rotate(-10deg);
  animation-duration: 1.8s;
}
.media-glitch:hover::after,
.video-card:hover .media-glitch::after,
.track:hover .media-glitch::after {
  opacity: 0.75;
}
.media-glitch:hover::before,
.video-card:hover .media-glitch::before,
.track:hover .media-glitch::before {
  background-position: calc(50% + 6px) 50%;
}

/* keep play badge above overlays; drop overlays once a video is playing */
.play-badge { z-index: 4; }
.media-glitch:has(iframe)::before,
.media-glitch:has(iframe)::after { display: none; }
.media-glitch iframe { filter: none !important; animation: none !important; }

/* track-list thumbs */
.track-art-wrap {
  width: 44px;
  height: 44px;
  display: block;
  flex: 0 0 44px;
  overflow: hidden;
  background: #000;
}
.track-art-wrap .track-art,
.track-art-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.track:nth-child(3n+1) .media-glitch { --glitch-period: 9.2s; --glitch-delay: 0.8s; --slice-shift: 2px; }
.track:nth-child(3n+2) .media-glitch { --glitch-period: 6.5s; --glitch-delay: 2.6s; --slice-shift: -2px; }
.track:nth-child(3n)   .media-glitch { --glitch-period: 11s; --glitch-delay: 4.1s; --slice-shift: 3px; }


/* reduced motion: keep layout, drop animation */

@media (max-width: 799px) {
  :root { --nav-h: 104px; }
  .nav { height: auto; min-height: 0; }
  .nav-inner {
    flex-wrap: wrap;
    padding: 10px 0 10px;
    row-gap: 8px;
    width: calc(100% - 28px);
  }
  .nav-logo { height: 34px; }
  .nav-logo img { height: 34px; }
  .nav-links {
    order: 3;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    gap: 18px;
    flex-wrap: nowrap;
  }
  .nav-links a { font-size: 10px; letter-spacing: 0.14em; }
  .nav-social {
    margin-left: auto;
    border-left: 0;
    padding-left: 0;
  }
}
.player.is-playing .ctrl-play:hover {
  background: var(--cyan);
  color: #07060B;
  border-color: var(--cyan);
}


/* ========== VIDEO THUMBS: one notch stronger (player art unchanged) ========== */
.video-thumb.media-glitch {
  --glitch-period: 4.8s;
  --glitch-delay: 0.4s;
  --slice-shift: 6px;
  --tear-clip: inset(28% 18% 48% 36%);
}
.video-grid .video-card:nth-child(3n+1) .video-thumb.media-glitch {
  --glitch-period: 5.4s; --glitch-delay: 0.2s; --slice-shift: 7px;
  --tear-clip: inset(16% 40% 54% 12%);
}
.video-grid .video-card:nth-child(3n+2) .video-thumb.media-glitch {
  --glitch-period: 3.9s; --glitch-delay: 1.4s; --slice-shift: -6px;
  --tear-clip: inset(44% 8% 22% 46%);
}
.video-grid .video-card:nth-child(3n) .video-thumb.media-glitch {
  --glitch-period: 6.1s; --glitch-delay: 2.2s; --slice-shift: 5px;
  --tear-clip: inset(58% 22% 14% 30%);
}
.video-featured .video-thumb.media-glitch {
  --glitch-period: 4.6s; --glitch-delay: 0.7s; --slice-shift: 7px;
  --tear-clip: inset(30% 20% 46% 34%);
}

.video-thumb.media-glitch img {
  filter: url(#video-glitch-filter) saturate(1.14) contrast(1.1) hue-rotate(-8deg);
  animation-name: video-flicker;
  animation-duration: var(--glitch-period);
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
  animation-delay: var(--glitch-delay);
}
.video-thumb.media-glitch::after {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, 0.3) 2px 3px
  );
  opacity: 0.72;
}
.video-thumb.media-glitch::before {
  background-position: calc(50% + var(--slice-shift)) 50%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0 8%,
    #000 8% 11.2%,
    transparent 11.2% 22%,
    #000 22% 24.8%,
    transparent 24.8% 37%,
    #000 37% 40%,
    transparent 40% 52%,
    #000 52% 54.6%,
    transparent 54.6% 67%,
    #000 67% 70%,
    transparent 70% 81%,
    #000 81% 83.8%,
    transparent 83.8% 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0 8%,
    #000 8% 11.2%,
    transparent 11.2% 22%,
    #000 22% 24.8%,
    transparent 24.8% 37%,
    #000 37% 40%,
    transparent 40% 52%,
    #000 52% 54.6%,
    transparent 54.6% 67%,
    #000 67% 70%,
    transparent 70% 81%,
    #000 81% 83.8%,
    transparent 83.8% 100%
  );
}

@keyframes video-flicker {
  0%, 70%, 84%, 100% {
    transform: translate3d(0, 0, 0);
    filter: url(#video-glitch-filter) saturate(1.14) contrast(1.1) hue-rotate(-8deg);
  }
  71% {
    transform: translate3d(-3px, 1px, 0);
    filter: url(#video-glitch-strong) saturate(1.22) contrast(1.16) hue-rotate(-14deg);
  }
  73% {
    transform: translate3d(4px, -1px, 0);
    filter: url(#video-glitch-strong) saturate(1.2) contrast(1.14) hue-rotate(10deg);
  }
  75% {
    transform: translate3d(-2px, 0.5px, 0);
    filter: url(#video-glitch-strong) saturate(1.18) contrast(1.12) hue-rotate(-8deg);
  }
  77% {
    transform: translate3d(2px, 0, 0);
    filter: url(#video-glitch-filter) saturate(1.16) contrast(1.12) hue-rotate(-8deg);
  }
}

/* occasional block / datamosh tear */
.video-thumb.media-glitch .video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image: var(--media-src);
  background-size: cover;
  background-position: center;
  clip-path: var(--tear-clip);
  opacity: 0;
  animation: video-tear var(--glitch-period) steps(2, end) infinite;
  animation-delay: var(--glitch-delay);
}
@keyframes video-tear {
  0%, 88%, 97%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    filter: none;
  }
  89% {
    opacity: 1;
    transform: translate3d(16px, -4px, 0);
    filter: hue-rotate(18deg) saturate(1.35) contrast(1.2);
  }
  91% {
    opacity: 1;
    transform: translate3d(-12px, 3px, 0);
    filter: hue-rotate(-16deg) saturate(1.25);
  }
  93% {
    opacity: 0.9;
    transform: translate3d(9px, 1px, 0);
  }
  95% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

.video-thumb.media-glitch:hover img,
.video-card:hover .video-thumb.media-glitch img,
.video-featured:hover .video-thumb.media-glitch img {
  filter: url(#video-glitch-strong) saturate(1.22) contrast(1.16) hue-rotate(-14deg);
  animation-name: video-flicker;
  animation-duration: 1.35s;
}
.video-thumb.media-glitch:hover::after,
.video-card:hover .video-thumb.media-glitch::after {
  opacity: 0.88;
}
.video-thumb.media-glitch:hover::before,
.video-card:hover .video-thumb.media-glitch::before {
  background-position: calc(50% + 9px) 50%;
}
.video-thumb.media-glitch:hover .video-facade::after,
.video-card:hover .video-thumb.media-glitch .video-facade::after {
  animation-duration: 1.35s;
}
.video-thumb.media-glitch:has(iframe) .video-facade::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .eyebrow .label::before, .eyebrow .label::after { transform: none; opacity: 0.35; }
  .nav-links a:hover { animation: none; text-shadow: none; }
  .glitch-img:hover img { animation: none; filter: none; }
  .player::before { animation: none; }
  body::after { transform: none; }
  .site-rail { animation: none !important; background-position-y: 0 !important; }
  .tendril { opacity: 0.35; }
  .tendril-l { transform: translate3d(calc(-0.4 * var(--reach, 40px)), -50%, 0) !important; }
  .tendril-r { transform: translate3d(calc(0.4 * var(--reach, 40px)), -50%, 0) !important; }
  /* keep the static channel offset, slices, and scanlines; drop flicker */
  .media-glitch img,
  .media-glitch:hover img,
  .glitch-img.media-glitch:hover img,
  .video-card:hover .media-glitch img,
  .track:hover .media-glitch img {
    animation: none !important;
    transform: none !important;
    filter: url(#media-glitch-filter) saturate(1.08) contrast(1.06) hue-rotate(-6deg) !important;
  }
  .media-glitch:hover::after,
  .media-glitch:hover::before { opacity: 0.5; }

  .video-thumb.media-glitch img,
  .video-thumb.media-glitch:hover img,
  .video-card:hover .video-thumb.media-glitch img,
  .video-featured:hover .video-thumb.media-glitch img,
  .glitch-img.video-thumb:hover img {
    animation: none !important;
    transform: none !important;
    filter: url(#video-glitch-filter) saturate(1.14) contrast(1.1) hue-rotate(-8deg) !important;
  }
  .video-thumb.media-glitch .video-facade::after,
  .video-thumb.media-glitch:hover .video-facade::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .video-thumb.media-glitch:hover::after {
    opacity: 0.72;
  }
}


/* ========== CATALOG / ALL ALBUMS ========== */
.catalog { margin-top: 36px; }
.catalog-head { margin-bottom: 16px; }
.catalog-kicker {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 12px;
  text-align: left;
}
.catalog-featured + .catalog-kicker {
  margin-top: 28px;
}
.catalog-kicker-label {
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.catalog-kicker-label:has(+ .catalog-kicker-note)::after {
  content: " ·";
  letter-spacing: 0;
}
.catalog-kicker-note {
  font-size: 13px;
  line-height: 1.4;
  color: var(--dim);
  letter-spacing: 0.01em;
}
.catalog-featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 10px;
}
@media (min-width: 640px) { .catalog-featured { grid-template-columns: repeat(4, 1fr); gap: 16px 12px; } }
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 10px;
}
@media (min-width: 640px) { .catalog-grid { grid-template-columns: repeat(4, 1fr); gap: 16px 12px; } }
@media (min-width: 1000px) { .catalog-grid { grid-template-columns: repeat(5, 1fr); } }
.catalog-group {
  grid-column: 1 / -1;
  margin: 20px 0 12px;
  padding: 8px 4px;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  border-top: 1px solid rgba(0, 229, 255, 0.4);
  border-bottom: 1px solid rgba(255, 43, 214, 0.4);
}
.catalog-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}
.catalog-card .catalog-art {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}
.catalog-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.catalog-card:nth-child(5n+1) { transform: rotate(-0.4deg); }
.catalog-card:nth-child(5n+3) { transform: rotate(0.35deg); }
.catalog-card:hover .catalog-title { color: var(--cyan); }
.catalog-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.3;
}
.catalog-count {
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.catalog-card.is-active .catalog-art {
  box-shadow: inset 0 0 0 2px var(--cyan);
}
.catalog-card.is-featured .catalog-count::after {
  content: "featured";
  display: inline-block;
  margin-left: 0.7em;
  color: var(--cyan);
}
/* Lower-list credit (infinity): always its own nowrap second line, never split */
.catalog-grid .catalog-count-main,
.catalog-grid .catalog-by {
  display: block;
  white-space: nowrap;
}
@media (max-width: 639px) {
  .catalog-grid .catalog-count:has(.catalog-by) {
    letter-spacing: 0.06em;
  }
}
.catalog-featured .catalog-count {
  white-space: nowrap;
}
@media (max-width: 639px) {
  .catalog-featured .catalog-count {
    font-size: 8px;
    letter-spacing: 0.03em;
  }
  .catalog-featured .catalog-card.is-featured .catalog-count::after {
    margin-left: 0.4em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-card { transform: none !important; }
}


/* unconventional nav — no traditional top bar */
.layout-a, .layout-b { --nav-h: 0px; }
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 200;
  padding: 8px 12px;
  background: #000;
  color: var(--ink);
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip-link:focus {
  top: 12px;
  outline: 1px solid var(--cyan);
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 3px;
}

.mark-btn {
  position: fixed;
  top: 14px;
  left: 10px;
  z-index: 55;
  width: 52px;
  height: 52px;
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}
.mark-btn img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta));
}
@media (prefers-reduced-motion: no-preference) {
  .mark-btn img {
    animation: mark-glitch 5.6s steps(2, end) infinite;
  }
}
@keyframes mark-glitch {
  0%, 88%, 100% { filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta)); transform: translate(0, 0); }
  90% { filter: drop-shadow(-2px 0 var(--magenta)) drop-shadow(2px 0 var(--cyan)); transform: translate(-1px, 0); }
  93% { filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta)); transform: translate(1px, 0); }
}
.mark-btn:hover img,
.mark-btn[aria-expanded="true"] img {
  filter: drop-shadow(2px 0 var(--cyan)) drop-shadow(-2px 0 var(--magenta)) saturate(1.25);
}
.layout-a .section-enter { padding-top: 72px; }
@media (min-width: 800px) {
  .layout-a .section-enter { padding-top: 80px; }
  .mark-btn { top: 16px; left: 14px; width: 58px; height: 58px; }
}

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #000;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px max(28px, var(--rail-w, 20px)) 48px;
  overflow: auto;
}
.site-menu[hidden] { display: none !important; }
.site-menu::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 3px,
    rgba(0, 229, 255, 0.04) 3px 4px
  );
  opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .site-menu:not([hidden]) {
    animation: menu-in 0.4s steps(3, end);
  }
  .site-menu:not([hidden])::before {
    animation: menu-scan 3.2s linear infinite;
  }
}
@keyframes menu-in {
  0% { clip-path: inset(0 0 100% 0); filter: hue-rotate(-20deg); }
  40% { clip-path: inset(0 0 20% 0); }
  55% { clip-path: inset(12% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes menu-scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 8px; }
}
body.menu-open { overflow: hidden; }
.site-menu-close {
  position: absolute;
  top: 22px;
  right: max(20px, var(--rail-w, 20px));
  z-index: 2;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-menu-close:hover,
.site-menu-close:focus-visible { color: var(--cyan); }
.site-menu-kicker {
  position: relative;
  z-index: 1;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 28px;
}
.site-menu-links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.08em;
  margin-bottom: 40px;
}
.site-menu-links a {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 9vw, 92px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--ink);
  width: max-content;
}
.site-menu-links a:hover,
.site-menu-links a:focus-visible {
  color: var(--ink);
  text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta);
}
@media (prefers-reduced-motion: no-preference) {
  .site-menu-links a:hover,
  .site-menu-links a:focus-visible {
    animation: menu-flicker 0.4s steps(2);
  }
}
@keyframes menu-flicker {
  0%, 100% { transform: translate(0, 0) skewX(0); }
  25% { transform: translate(-3px, 0) skewX(-5deg); }
  55% { transform: translate(3px, 0) skewX(3deg); }
  75% { transform: translate(-1px, 1px); }
}
.site-menu-platforms {
  position: relative;
  z-index: 1;
  max-width: 560px;
}
.site-menu-platforms svg { width: 22px; height: 22px; }

/* Layout B — vertical section index */
.side-index {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 18px 8px 18px 10px;
}
.side-index a {
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9B94AB;
  padding: 6px 2px;
}
.side-index a:hover,
.side-index a:focus-visible {
  color: var(--ink);
  text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta);
}
.side-index a.is-current,
.side-index a[aria-current="location"] {
  color: var(--cyan);
  text-shadow: 1px 0 var(--magenta);
}
@media (max-width: 699px) {
  .side-index {
    gap: 12px;
    padding: 12px 4px 12px 6px;
  }
  .side-index a { font-size: 8px; letter-spacing: 0.22em; }
  .mark-btn { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mark-btn img { animation: none !important; }
  .site-menu:not([hidden]),
  .site-menu:not([hidden])::before,
  .site-menu-links a:hover,
  .site-menu-links a:focus-visible { animation: none !important; }
}

/* ========== Layout v3: B hero + bold jump nav, no side frame ========== */
.layout-v3 {
  --nav-h: 0px;
  --rail-w: 16px;
}
.layout-v3 .site-frame,
.layout-v3 .site-rail,
.layout-v3 .tendril,
.layout-v3 .side-index,
.layout-v3 .edge-light {
  display: none !important;
}
.layout-v3 .open-b-still::after {
  /* color lives in the baked still, not a CSS overlay */
  display: none;
}
.layout-v3 .open-b-copy {
  width: min(1200px, calc(100% - 48px));
}
.layout-v3 .wrap {
  width: min(1200px, calc(100% - 48px));
}
.layout-v3 .footer::after {
  content: none;
  display: none;
}
.layout-v3 .footer {
  padding: 28px 0 36px;
}
.layout-v3 .kilt {
  height: 8px;
  background-image: linear-gradient(90deg, transparent, var(--line-strong) 8%, var(--cyan) 42%, var(--magenta) 58%, var(--line-strong) 92%, transparent);
  background-size: 100% 1px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
}

/* Big bold section jump, directly under the hero */
.jump-nav {
  background: #000;
  padding: 10px 0 6px;
  border-bottom: 1px solid transparent;
}
.jump-nav-inner {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 28px;
}
.jump-nav a {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5.2vw, 72px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.jump-nav a:hover,
.jump-nav a:focus-visible {
  color: var(--ink);
  text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta);
  outline: none;
}
@media (prefers-reduced-motion: no-preference) {
  .jump-nav a:hover,
  .jump-nav a:focus-visible {
    animation: menu-flicker 0.4s steps(2);
  }
}
@media (max-width: 799px) {
  .jump-nav {
    padding: 18px 0 8px;
  }
  .jump-nav-inner {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.02em;
    width: min(1200px, calc(100% - 40px));
  }
  .jump-nav a {
    font-size: clamp(40px, 12vw, 80px);
    width: max-content;
  }
}

/* Section titles share the same heavy Unbounded cut as the jump nav */
.layout-v3 .eyebrow {
  align-items: baseline;
  gap: 16px;
}
.layout-v3 .eyebrow .label {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 56px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  line-height: 1.02;
}
/* Subheads: All Albums + Cover Art, same size, ~40% of main headlines, no jiggle */
.layout-v3 .subhead.eyebrow {
  align-items: baseline;
  gap: 12px;
}
.layout-v3 .subhead.eyebrow .label {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.68vw, 22px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1.1;
}
.layout-v3 .subhead.eyebrow .label:hover,
.layout-v3 .subhead.eyebrow .label:focus,
.layout-v3 .subhead.eyebrow .label.is-fx,
.layout-v3 .section-head:has(.subhead).is-fx .subhead .label {
  animation: none !important;
  transform: none !important;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .layout-v3 .subhead.eyebrow .label:hover {
    animation: none !important;
    transform: none !important;
    text-shadow: none;
  }
}
@media (max-width: 699px) {
  .catalog { margin-top: 28px; }
  .art-sub { padding: 28px 0 16px; }
}

.layout-v3 .section-index {
  font-size: clamp(72px, 10vw, 120px);
  top: -36px;
}
.layout-v3 .site-menu {
  padding: 72px max(28px, 24px) 48px;
}
.layout-v3 .site-menu-close {
  right: 20px;
}
@media (prefers-reduced-motion: reduce) {
  .jump-nav a:hover,
  .jump-nav a:focus-visible { animation: none !important; }
}

/* v3b: more breathing room under the hero, desktop only */
@media (min-width: 900px) {
  .layout-v3 .jump-nav {
    padding: 56px 0 96px;
  }
}

/* ========== v3c micro-interactions: RGB split, jitter, brief tear ========== */
@keyframes fx-jiggle {
  0%, 100% { transform: translate(0, 0) skewX(0); }
  25% { transform: translate(-3px, 0) skewX(-5deg); }
  55% { transform: translate(3px, 0) skewX(3deg); }
  75% { transform: translate(-1px, 1px); }
}
@keyframes fx-jiggle-sm {
  0%, 100% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(-2px, 0, 0); }
  60% { transform: translate3d(2px, 1px, 0); }
  80% { transform: translate3d(-1px, 0, 0); }
}
@keyframes fx-img-split {
  0%, 100% { transform: translate3d(0, 0, 0); filter: drop-shadow(0 0 0 transparent); }
  20% { transform: translate3d(-4px, 1px, 0); filter: drop-shadow(3px 0 #00E5FF) drop-shadow(-3px 0 #FF2BD6); }
  45% { transform: translate3d(5px, -1px, 0); filter: drop-shadow(-3px 0 #FF2BD6) drop-shadow(2px 0 #00E5FF); }
  70% { transform: translate3d(-2px, 0, 0); filter: drop-shadow(3px 0 #00E5FF); }
}
@keyframes fx-slice {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.15; }
  18% { transform: translate3d(8px, 0, 0); opacity: 1; }
  42% { transform: translate3d(-7px, 1px, 0); opacity: 1; }
  68% { transform: translate3d(4px, 0, 0); opacity: 0.85; }
  88% { opacity: 0.2; }
}
@keyframes fx-icon-jiggle {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-2px, 0, 0); }
  55% { transform: translate3d(2px, 1px, 0); }
  75% { transform: translate3d(-1px, 0, 0); }
}
@keyframes fx-pulse {
  0%, 100% { transform: translate3d(0, 0, 0) skewX(0); filter: none; }
  28% { transform: translate3d(-3px, 0, 0) skewX(-4deg); filter: drop-shadow(2px 0 #00E5FF) drop-shadow(-2px 0 #FF2BD6); }
  58% { transform: translate3d(3px, 1px, 0) skewX(3deg); filter: drop-shadow(-2px 0 #FF2BD6) drop-shadow(2px 0 #00E5FF); }
  78% { transform: translate3d(-1px, 0, 0); }
}
@keyframes fx-video-burst {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-8px, 2px, 0); filter: url(#video-glitch-strong) saturate(1.3) contrast(1.2) hue-rotate(-16deg) drop-shadow(3px 0 #00E5FF) drop-shadow(-3px 0 #FF2BD6); }
  48% { transform: translate3d(9px, -2px, 0); filter: url(#video-glitch-strong) saturate(1.25) contrast(1.16) hue-rotate(12deg) drop-shadow(-4px 0 #FF2BD6); }
  72% { transform: translate3d(-4px, 1px, 0); filter: url(#video-glitch-strong) saturate(1.2) hue-rotate(-10deg); }
}
@keyframes fx-video-tear-burst {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
  20% { opacity: 1; transform: translate3d(18px, -5px, 0); filter: hue-rotate(20deg) saturate(1.4); }
  50% { opacity: 1; transform: translate3d(-16px, 4px, 0); filter: hue-rotate(-16deg) saturate(1.3); }
  75% { opacity: 0.7; transform: translate3d(10px, 0, 0); }
}
@keyframes fx-label-flicker {
  0%, 100% { transform: translate3d(0, 0, 0); text-shadow: none; }
  22% { transform: translate3d(-2px, 0, 0); text-shadow: 2px 0 #00E5FF, -2px 0 #FF2BD6; }
  48% { transform: translate3d(2px, 1px, 0); text-shadow: -2px 0 #FF2BD6, 1px 0 #00E5FF; }
  72% { transform: translate3d(-1px, 0, 0); text-shadow: 1px 0 #00E5FF, -1px 0 #FF2BD6; }
}

/* Shared color fringe */
.fx-split, .is-fx.fx-split {
  text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta);
}

/* --- nav words + section headings: same jiggle --- */
.jump-nav a.is-fx,
.jump-nav a:focus-visible,
.site-menu-links a.is-fx,
.site-menu-links a:focus-visible,
.layout-v3 .eyebrow .label.is-fx,
.layout-v3 .section-head.is-fx .eyebrow .label {
  color: var(--ink);
  text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta);
}
@media (prefers-reduced-motion: no-preference) {
  .jump-nav a.is-fx,
  .site-menu-links a.is-fx,
  .layout-v3 .eyebrow .label:hover,
  .layout-v3 .eyebrow .label.is-fx,
  .layout-v3 .section-head.is-fx .eyebrow .label {
    animation: fx-jiggle 0.4s steps(2);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .layout-v3 .eyebrow .label:hover {
    text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta);
    animation: fx-jiggle 0.4s steps(2);
  }
}

/* --- art tiles + album covers: RGB split + slice offset --- */
.art-masonry .glitch-img::before,
.cover-grid .glitch-img::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image: var(--media-src);
  background-size: cover;
  background-position: calc(50% + 6px) 50%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0 22%,
    #000 22% 26%,
    transparent 26% 48%,
    #000 48% 51%,
    transparent 51% 73%,
    #000 73% 77%,
    transparent 77% 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0 22%,
    #000 22% 26%,
    transparent 26% 48%,
    #000 48% 51%,
    transparent 51% 73%,
    #000 73% 77%,
    transparent 77% 100%
  );
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .art-masonry .glitch-img:hover img,
  .art-masonry .glitch-img.is-fx img,
  .art-masonry .glitch-img:focus-visible img,
  .cover-grid .glitch-img:hover img,
  .cover-grid .glitch-img.is-fx img,
  .catalog-card:hover img,
  .catalog-card:focus-visible img,
  .catalog-card.is-fx img,
  .now-art:hover img,
  .now-art.is-fx img {
    animation: fx-img-split 0.36s steps(2);
  }
  .art-masonry .glitch-img:hover::before,
  .art-masonry .glitch-img.is-fx::before,
  .cover-grid .glitch-img:hover::before,
  .cover-grid .glitch-img.is-fx::before,
  .catalog-card:hover::before,
  .catalog-card:focus-visible::before,
  .catalog-card.is-fx::before {
    animation: fx-slice 0.36s steps(2);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .art-masonry .glitch-img:hover img,
  .cover-grid .glitch-img:hover img,
  .catalog-card:hover img,
  .now-art:hover img { animation: fx-img-split 0.36s steps(2); }
  .art-masonry .glitch-img:hover::before,
  .cover-grid .glitch-img:hover::before,
  .catalog-card:hover::before { animation: fx-slice 0.36s steps(2); }
}

/* --- track rows + catalog titles: tiny jitter + fringe --- */
@media (hover: hover) and (pointer: fine) {
  .track:hover .track-name,
  .catalog-card:hover .catalog-title {
    text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta);
  }
}
.track:focus-visible .track-name,
.track.is-fx .track-name,
.catalog-card:focus-visible .catalog-title,
.catalog-card.is-fx .catalog-title {
  text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta);
}
@media (prefers-reduced-motion: no-preference) {
  .track:focus-visible,
  .track.is-fx {
    animation: fx-jiggle-sm 0.28s steps(2);
  }
  .catalog-card:focus-visible .catalog-title,
  .catalog-card.is-fx .catalog-title {
    animation: fx-jiggle-sm 0.28s steps(2);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .track:hover { animation: fx-jiggle-sm 0.28s steps(2); }
  .catalog-card:hover .catalog-title { animation: fx-jiggle-sm 0.28s steps(2); }
}

/* --- video thumbs: stronger tear + flicker burst, on top of existing glitch --- */
@media (prefers-reduced-motion: no-preference) {
  .video-thumb.media-glitch:hover img,
  .video-card:hover .video-thumb.media-glitch img,
  .video-featured:hover .video-thumb.media-glitch img,
  .video-card.is-fx .video-thumb.media-glitch img,
  .video-thumb.is-fx img,
  .video-card:focus-within .video-thumb.media-glitch img {
    animation: fx-video-burst 0.36s steps(2), video-flicker 1.35s steps(2, end) 0.36s infinite;
    filter: url(#video-glitch-strong) saturate(1.22) contrast(1.16) hue-rotate(-14deg);
  }
  .video-thumb.media-glitch:hover .video-facade::after,
  .video-card:hover .video-thumb.media-glitch .video-facade::after,
  .video-card.is-fx .video-thumb.media-glitch .video-facade::after,
  .video-thumb.is-fx .video-facade::after,
  .video-card:focus-within .video-thumb.media-glitch .video-facade::after {
    animation: fx-video-tear-burst 0.36s steps(2), video-tear 1.35s steps(2, end) 0.36s infinite;
  }
}

/* --- player controls: jiggle on hover, pulse on play/pause --- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ctrl:hover {
    animation: fx-jiggle-sm 0.28s steps(2);
    filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta));
  }
}
.ctrl:focus-visible,
.ctrl.is-fx {
  filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta));
}
@media (prefers-reduced-motion: no-preference) {
  .ctrl:focus-visible,
  .ctrl.is-fx {
    animation: fx-jiggle-sm 0.28s steps(2);
  }
  .ctrl.is-pulse {
    animation: fx-pulse 0.36s steps(2);
  }
}

/* --- platform icons in footer + menu --- */
.platform-links a:focus-visible,
.platform-links a.is-fx,
.footer-social a:focus-visible,
.footer-social a.is-fx,
.site-menu-platforms a:focus-visible,
.site-menu-platforms a.is-fx {
  color: var(--cyan);
  filter: drop-shadow(1px 0 var(--magenta)) drop-shadow(-1px 0 var(--cyan));
}
.platform-links a:nth-child(even):focus-visible,
.platform-links a:nth-child(even).is-fx,
.footer-social a:nth-child(even):focus-visible,
.footer-social a:nth-child(even).is-fx {
  color: var(--magenta);
  filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta));
}
@media (prefers-reduced-motion: no-preference) {
  .platform-links a:focus-visible svg,
  .platform-links a.is-fx svg,
  .footer-social a:focus-visible svg,
  .footer-social a.is-fx svg,
  .site-menu-platforms a:focus-visible svg,
  .site-menu-platforms a.is-fx svg {
    animation: fx-icon-jiggle 0.32s steps(2);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .platform-links a:hover svg,
  .footer-social a:hover svg,
  .nav-social a:hover svg,
  .site-menu-platforms a:hover svg {
    animation: fx-icon-jiggle 0.32s steps(2);
  }
}

/* --- hero "signal present / align": occasional flicker (class toggled in JS) --- */
.open-b .open-label.is-fx {
  text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta);
}
@media (prefers-reduced-motion: no-preference) {
  .open-b .open-label.is-fx {
    animation: fx-label-flicker 0.32s steps(2);
  }
}

/* --- corner tree mark: jiggle on hover/focus/tap --- */
@media (prefers-reduced-motion: no-preference) {
  .mark-btn:hover img,
  .mark-btn:focus-visible img,
  .mark-btn.is-fx img {
    animation: fx-jiggle-sm 0.32s steps(2);
    filter: drop-shadow(2px 0 var(--cyan)) drop-shadow(-2px 0 var(--magenta)) saturate(1.25);
  }
}

/* reduced motion: color only, no movement */
@media (prefers-reduced-motion: reduce) {
  .jump-nav a:hover,
  .jump-nav a:focus-visible,
  .jump-nav a.is-fx,
  .site-menu-links a:hover,
  .site-menu-links a:focus-visible,
  .site-menu-links a.is-fx,
  .layout-v3 .eyebrow .label:hover,
  .layout-v3 .eyebrow .label.is-fx,
  .layout-v3 .section-head.is-fx .eyebrow .label,
  .open-b .open-label.is-fx {
    text-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta) !important;
    animation: none !important;
    transform: none !important;
  }
  .track:hover .track-name,
  .track:focus-visible .track-name,
  .track.is-fx .track-name,
  .catalog-card:hover .catalog-title,
  .catalog-card:focus-visible .catalog-title,
  .catalog-card.is-fx .catalog-title {
    text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta) !important;
    animation: none !important;
    transform: none !important;
  }
  .art-masonry .glitch-img:hover img,
  .art-masonry .glitch-img.is-fx img,
  .cover-grid .glitch-img:hover img,
  .cover-grid .glitch-img.is-fx img,
  .catalog-card:hover img,
  .catalog-card.is-fx img,
  .now-art:hover img,
  .now-art.is-fx img,
  .glitch-img:hover img,
  .glitch-img.is-fx img {
    animation: none !important;
    transform: none !important;
    filter: drop-shadow(3px 0 var(--cyan)) drop-shadow(-3px 0 var(--magenta)) !important;
  }
  .video-thumb.media-glitch:hover img,
  .video-card:hover .video-thumb.media-glitch img,
  .video-card.is-fx .video-thumb.media-glitch img,
  .video-thumb.is-fx img {
    animation: none !important;
    transform: none !important;
    filter: url(#video-glitch-strong) saturate(1.16) contrast(1.12) hue-rotate(-10deg) !important;
  }
  .ctrl:hover,
  .ctrl:focus-visible,
  .ctrl.is-fx,
  .ctrl.is-pulse,
  .platform-links a:hover,
  .platform-links a:focus-visible,
  .platform-links a.is-fx,
  .footer-social a:hover,
  .footer-social a:focus-visible,
  .footer-social a.is-fx,
  .mark-btn:hover img,
  .mark-btn:focus-visible img,
  .mark-btn.is-fx img {
    animation: none !important;
    transform: none !important;
  }
  .ctrl:hover,
  .ctrl:focus-visible,
  .ctrl.is-fx,
  .ctrl.is-pulse {
    filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta)) !important;
  }
  .mark-btn:hover img,
  .mark-btn:focus-visible img,
  .mark-btn.is-fx img {
    filter: drop-shadow(2px 0 var(--cyan)) drop-shadow(-2px 0 var(--magenta)) !important;
  }
}

/* ========== About (approved copy) ========== */
.about-signal {
  margin: 22px 0 0;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.about-lead {
  margin-top: 22px;
}
.about-lead p {
  margin-top: 0;
  margin-bottom: 0.35em;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 400;
}
.about-lead p:last-child { margin-bottom: 0; }
.about-status {
  margin: 32px 0 0;
  display: grid;
  gap: 7px;
  max-width: 100%;
}
.about-status-row {
  display: grid;
  grid-template-columns: 14em 1fr;
  gap: 0 0.8em;
  align-items: baseline;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  line-height: 1.5;
  width: 100%;
  max-width: 100%;
  cursor: default;
}
.about-status-row dt {
  margin: 0;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 400;
}
.about-status-row dd {
  margin: 0;
  color: var(--ink);
  text-transform: none;
  font-weight: 400;
}
.about-close {
  margin-top: 32px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.55;
}

/* status lines: subtle RGB split + flicker, same language as the hero label */
@media (hover: hover) and (pointer: fine) {
  .about-status-row:hover,
  .about-status-row:focus-visible {
    text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta);
  }
}
.about-status-row.is-fx,
.about-status-row:focus-visible {
  text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta);
}
@media (prefers-reduced-motion: no-preference) {
  .about-status-row.is-fx,
  .about-status-row:focus-visible {
    animation: fx-label-flicker 0.32s steps(2);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about-status-row:hover {
    animation: fx-label-flicker 0.32s steps(2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-status-row:hover,
  .about-status-row:focus-visible,
  .about-status-row.is-fx {
    text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta) !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ========== v4: grids, lightbox, mini player, picker, calmer hovers ========== */

/* Art: 2 across mobile, 3 on desktop (was 4 at 1100px) */
.art-masonry { column-count: 2; column-gap: 10px; }
@media (min-width: 720px) { .art-masonry { column-count: 3; column-gap: 12px; } }
@media (min-width: 1100px) { .art-masonry { column-count: 3; column-gap: 12px; } }
.art-masonry .glitch-img { cursor: pointer; }

/* Cover Art: 2 across mobile, 4 on desktop (was 8) */
.cover-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 600px) { .cover-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
@media (min-width: 1000px) { .cover-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
.cover-grid .glitch-img { cursor: pointer; }

/* About status: slightly larger/brighter; tighter gap after the colon; hover glitch UNCHANGED */
.about-status-row {
  font-size: 12px;
  grid-template-columns: auto 1fr;
  gap: 0 1.75ch;
}
.about-status-row dt {
  width: calc(11ch + 2.8em);
  color: #C8C2D4;
}
.about-status-row dd {
  color: #FFFFFF;
}

/* ---- Calmer image/title hovers: only the one item, faint 1–2px split, no shake ---- */
.art-masonry .glitch-img:hover img,
.art-masonry .glitch-img.is-fx img,
.art-masonry .glitch-img:focus-visible img,
.cover-grid .glitch-img:hover img,
.cover-grid .glitch-img.is-fx img,
.cover-grid .glitch-img:focus-visible img,
.catalog-card:hover img,
.catalog-card:focus-visible img,
.catalog-card.is-fx img,
.now-art:hover img,
.now-art.is-fx img,
.glitch-img:hover img,
.video-thumb:hover img,
.video-card:hover .video-thumb img,
.video-card:focus-within .video-thumb img,
.video-card.is-fx .video-thumb img,
.media-glitch:hover img,
.video-card:hover .media-glitch img,
.track:hover .media-glitch img {
  animation: none !important;
  transform: none !important;
  filter: drop-shadow(1px 0 #00E5FF) drop-shadow(-1px 0 #FF2BD6);
  transition: filter 0.2s ease;
}
.art-masonry .glitch-img:hover::before,
.art-masonry .glitch-img.is-fx::before,
.cover-grid .glitch-img:hover::before,
.cover-grid .glitch-img.is-fx::before,
.catalog-card:hover::before,
.catalog-card:focus-visible::before,
.catalog-card.is-fx::before {
  animation: none !important;
  opacity: 0 !important;
}
.video-thumb.media-glitch:hover img,
.video-card:hover .video-thumb.media-glitch img,
.video-featured:hover .video-thumb.media-glitch img,
.video-card.is-fx .video-thumb.media-glitch img,
.video-thumb.is-fx img,
.video-card:focus-within .video-thumb.media-glitch img {
  animation: video-flicker var(--glitch-period, 5s) steps(2, end) infinite !important;
  animation-delay: var(--glitch-delay, 0s) !important;
  filter: url(#video-glitch-filter) saturate(1.14) contrast(1.1) drop-shadow(1px 0 #00E5FF) drop-shadow(-1px 0 #FF2BD6) !important;
  transform: none;
}
.video-thumb.media-glitch:hover .video-facade::after,
.video-card:hover .video-thumb.media-glitch .video-facade::after,
.video-card.is-fx .video-thumb.media-glitch .video-facade::after,
.video-thumb.is-fx .video-facade::after {
  animation: video-tear var(--glitch-period, 5s) steps(2, end) infinite !important;
}

/* Track rows: no hover glitch. Only the playing title flickers, faintly. */
.track:hover,
.track.is-fx,
.track:focus-visible,
.catalog-card:hover .catalog-title,
.catalog-card.is-fx .catalog-title,
.catalog-card:focus-visible .catalog-title {
  animation: none !important;
  transform: none !important;
}
.track:hover .track-name,
.track.is-fx .track-name,
.track:focus-visible .track-name {
  text-shadow: none;
}
.catalog-card:hover .catalog-title,
.catalog-card.is-fx .catalog-title {
  text-shadow: 1px 0 #00E5FF, -1px 0 #FF2BD6;
}
@keyframes track-now-flicker {
  0%, 86%, 100% { text-shadow: none; }
  88% { text-shadow: 1px 0 #00E5FF, -1px 0 #FF2BD6; }
  92% { text-shadow: -1px 0 #FF2BD6, 1px 0 #00E5FF; }
  95% { text-shadow: 1px 0 #00E5FF, -1px 0 #FF2BD6; }
}
@media (prefers-reduced-motion: no-preference) {
  .track.is-current .track-name {
    animation: track-now-flicker 7.5s steps(2, end) infinite;
  }
}

/* Tone down everything except jump-nav, overlay menu words, and About status */
.layout-v3 .eyebrow .label:hover,
.layout-v3 .eyebrow .label.is-fx,
.layout-v3 .section-head.is-fx .eyebrow .label {
  animation: none !important;
  transform: none !important;
  text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta);
}
.ctrl:hover,
.ctrl:focus-visible,
.ctrl.is-fx,
.ctrl.is-pulse {
  animation: none !important;
  transform: none !important;
  filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta));
}
.platform-links a:hover svg,
.platform-links a:focus-visible svg,
.platform-links a.is-fx svg,
.footer-social a:hover svg,
.footer-social a:focus-visible svg,
.footer-social a.is-fx svg,
.site-menu-platforms a:hover svg,
.site-menu-platforms a:focus-visible svg,
.site-menu-platforms a.is-fx svg {
  animation: none !important;
  transform: none !important;
}
.mark-btn:hover img,
.mark-btn:focus-visible img,
.mark-btn.is-fx img {
  animation: none !important;
  transform: none !important;
  filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta)) saturate(1.15);
}

/* Keep the big nav-word jiggle (jump-nav + full-screen menu) exactly as loved */

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 56px 56px;
  color: var(--ink);
}
.lightbox[hidden] { display: none !important; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.lightbox-stage {
  position: relative;
  z-index: 1;
  max-width: min(1200px, 92vw);
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.lightbox-img[hidden],
.lightbox-video[hidden] {
  display: none !important;
}
.lightbox-video {
  width: min(1100px, 92vw);
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
}
.lightbox-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  z-index: 2;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.lightbox-close {
  top: 16px;
  right: 18px;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 10px;
  color: var(--muted);
}
.lightbox-close:hover,
.lightbox-close:focus-visible { color: var(--cyan); }
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 64px;
  font-size: 28px;
  color: var(--ink);
  text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta);
}
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible { color: var(--cyan); }
.lightbox-meta {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.lightbox-title { color: var(--ink); text-transform: none; letter-spacing: 0.06em; font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox:not([hidden]) .lightbox-stage {
    animation: lb-in 0.35s steps(2, end);
  }
}
@keyframes lb-in {
  0% { opacity: 0; filter: drop-shadow(2px 0 #00E5FF) drop-shadow(-2px 0 #FF2BD6); }
  35% { opacity: 1; transform: translate(-2px, 0); filter: drop-shadow(2px 0 #00E5FF) drop-shadow(-2px 0 #FF2BD6); }
  65% { transform: translate(2px, 0); filter: drop-shadow(-2px 0 #FF2BD6) drop-shadow(1px 0 #00E5FF); }
  100% { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox:not([hidden]) .lightbox-stage { animation: none; }
}
@media (max-width: 699px) {
  .lightbox { padding: 52px 12px 24px; }
  .lightbox-prev, .lightbox-next { width: 36px; height: 52px; }
  .lightbox-prev { left: 0; }
  .lightbox-next { right: 0; }
}

/* ---- Sticky mini player ---- */
.mini-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 48;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas:
    "art copy ctrls"
    "seek seek seek";
  gap: 0 12px;
  align-items: center;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.94);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -1px 0 rgba(0, 229, 255, 0.15), 0 0 0 1px rgba(255, 43, 214, 0.08);
}
.mini-player[hidden] { display: none !important; }
.mini-art {
  grid-area: art;
  width: 44px;
  height: 44px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}
.mini-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-copy { grid-area: copy; min-width: 0; }
.mini-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.mini-album {
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-ctrls {
  grid-area: ctrls;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mini-ctrls .ctrl { width: 36px; height: 36px; }
.mini-ctrls .ctrl-play { width: 40px; height: 40px; }
.mini-seek {
  grid-area: seek;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  width: 100%;
  margin-top: 8px;
  background: var(--line-strong);
  outline: none;
  cursor: pointer;
}
.mini-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px;
  background: var(--cyan);
  border: 0;
  cursor: pointer;
}
.mini-seek::-moz-range-thumb {
  width: 10px; height: 10px;
  background: var(--cyan);
  border: 0;
  cursor: pointer;
}
body.is-docked { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 699px) {
  .mini-player {
    grid-template-columns: 40px 1fr auto;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .mini-title { font-size: 12px; }
}

/* ---- Custom playlist picker ---- */
.player-tools { position: relative; }
.player-tools select[data-playlist] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
}
.pl-picker { position: relative; min-width: min(100%, 280px); max-width: 420px; flex: 1 1 240px; }
.pl-picker-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.pl-picker-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  flex: 0 0 auto;
}
.pl-picker-btn:hover,
.pl-picker-btn:focus-visible,
.pl-picker[data-open="true"] .pl-picker-btn {
  border-color: var(--cyan);
}
.pl-picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 60;
  max-height: min(420px, 70vh);
  overflow: auto;
  background: #050506;
  border: 1px solid var(--line-strong);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(0, 229, 255, 0.08);
}
.pl-picker-menu[hidden] { display: none !important; }
.player:has(.pl-picker[data-open="true"]) {
  overflow: visible;
  z-index: 8;
}

.pl-picker-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.pl-picker-option:hover,
.pl-picker-option:focus-visible { background: var(--bg-row); color: var(--ink); text-shadow: 1px 0 var(--cyan), -1px 0 var(--magenta); }
.pl-picker-option[aria-selected="true"] { color: var(--cyan); }
.pl-picker-detour {
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 8px 12px;
  padding: 8px 4px;
  border-top: 1px solid rgba(0, 229, 255, 0.4);
  border-bottom: 1px solid rgba(255, 43, 214, 0.4);
  line-height: 1.4;
}

/* ---- v4 player controls / mark / signal-trace ---- */

/* Clean, non-glitch player and mini-bar controls */
.player .ctrl,
.player .ctrl:hover,
.player .ctrl:focus-visible,
.player .ctrl:active,
.player .ctrl.is-pulse,
.player .ctrl.is-fx,
.mini-ctrls .ctrl,
.mini-ctrls .ctrl:hover,
.mini-ctrls .ctrl:focus-visible,
.mini-ctrls .ctrl:active,
.mini-ctrls .ctrl.is-pulse,
.mini-ctrls .ctrl.is-fx {
  animation: none !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
}
.player .ctrl:hover,
.player .ctrl:focus-visible,
.mini-ctrls .ctrl:hover,
.mini-ctrls .ctrl:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
  background: var(--bg-row);
}
.player .ctrl:active,
.mini-ctrls .ctrl:active {
  background: #111;
  border-color: var(--ink);
  color: var(--ink);
}
.player .ctrl-play:hover,
.player .ctrl-play:focus-visible,
.mini-ctrls .ctrl-play:hover,
.mini-ctrls .ctrl-play:focus-visible {
  background: var(--ink);
  color: #07060B;
  border-color: var(--ink);
}
.player .ctrl-play:active,
.mini-ctrls .ctrl-play:active {
  background: #cfc8d8;
  color: #07060B;
  border-color: #cfc8d8;
}
.player .seek,
.player .seek:hover,
.player .seek:focus-visible,
.player .seek:active,
.mini-seek,
.mini-seek:hover,
.mini-seek:focus-visible,
.mini-seek:active {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}
.player .seek:hover,
.mini-seek:hover,
.player .seek:focus-visible,
.mini-seek:focus-visible {
  background: #3a3844;
}

/* Thin signal-trace visualizer */
.viz {
  margin-top: 16px;
  height: 36px;
  width: 100%;
  display: block;
  background: #05040a;
  border: 1px solid var(--line);
}

/* Corner mark: hidden at top, fades in as the hero leaves, off-white + faint split */
.mark-btn {
  opacity: var(--mark-o, 0);
  pointer-events: none;
}
.mark-btn.is-visible {
  pointer-events: auto;
}
.mark-btn:focus-visible,
.mark-btn[aria-expanded="true"],
body.menu-open .mark-btn {
  opacity: 1 !important;
  pointer-events: auto;
}
.mark-btn img {
  filter: brightness(1.1) drop-shadow(1px 0 rgba(0, 229, 255, 0.55)) drop-shadow(-1px 0 rgba(255, 43, 214, 0.55));
  animation: none !important;
  transform: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .mark-btn:hover img,
  .mark-btn:focus-visible img,
  .mark-btn[aria-expanded="true"] img,
  .mark-btn.is-fx img {
    animation: none !important;
    transform: none !important;
    filter: brightness(1.14) drop-shadow(2px 0 rgba(0, 229, 255, 0.75)) drop-shadow(-2px 0 rgba(255, 43, 214, 0.75));
  }
}
@media (prefers-reduced-motion: reduce) {
  .mark-btn img,
  .mark-btn:hover img,
  .mark-btn:focus-visible img {
    animation: none !important;
    transform: none !important;
  }
}

/* Occasional mark glitch: static by default, JS adds .is-mark-fx for a short burst. No layout shift. */
.mark-btn .mark-fx {
  position: absolute;
  inset: 4px;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
.mark-btn.is-mark-fx .mark-fx { opacity: 1; }
.mark-fx-ch,
.mark-fx-sl {
  position: absolute;
  inset: 0;
  background-image: url("../logos/mark-tree-128.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.mark-fx-c {
  transform: translate(var(--mark-c-x, -2px), 0);
  filter: drop-shadow(0 0 0 #00E5FF) brightness(1.2);
  mix-blend-mode: screen;
  opacity: 0.85;
  clip-path: inset(0 0 0 0);
}
.mark-fx-m {
  transform: translate(var(--mark-m-x, 2px), 0);
  filter: drop-shadow(0 0 0 #FF2BD6) brightness(1.2);
  mix-blend-mode: screen;
  opacity: 0.85;
}
.mark-fx-x {
  display: var(--mark-x-on, none);
  transform: translate(var(--mark-x-x, 0px), var(--mark-x-y, 1px));
  filter: drop-shadow(0 0 0 var(--mark-x-color, #FFE600)) brightness(1.15);
  mix-blend-mode: screen;
  opacity: 0.7;
}
.mark-fx-sl {
  mix-blend-mode: normal;
  filter: none;
  opacity: 0.95;
  clip-path: inset(var(--mark-sl-top, 30%) 0 var(--mark-sl-bot, 60%) 0);
  transform: translate(var(--mark-sl-x, 3px), 0);
}
.mark-fx-s1 { clip-path: inset(var(--m1-top, 18%) 0 var(--m1-bot, 70%) 0); transform: translate(var(--m1-x, -3px), 0); }
.mark-fx-s2 { clip-path: inset(var(--m2-top, 48%) 0 var(--m2-bot, 38%) 0); transform: translate(var(--m2-x, 3px), 0); }
.mark-fx-s3 { display: var(--m3-on, none); clip-path: inset(var(--m3-top, 72%) 0 var(--m3-bot, 14%) 0); transform: translate(var(--m3-x, -2px), 0); }
.mark-btn.is-mark-fx img {
  animation: none !important;
  transform: none !important;
  filter: brightness(1.12) hue-rotate(var(--mark-hue, 18deg)) drop-shadow(1px 0 rgba(0, 229, 255, 0.7)) drop-shadow(-1px 0 rgba(255, 43, 214, 0.7)) !important;
}
@media (prefers-reduced-motion: reduce) {
  .mark-btn.is-mark-fx .mark-fx { opacity: 0 !important; }
  .mark-btn.is-mark-fx img {
    filter: brightness(1.1) drop-shadow(1px 0 rgba(0, 229, 255, 0.55)) drop-shadow(-1px 0 rgba(255, 43, 214, 0.55)) !important;
  }
}

/* Track rows: no hover glitch; only the playing title flickers (see track-now-flicker) */
.track:hover,
.track:focus-visible,
.track.is-fx {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* ---- v5 hero static / video thumbs / catalog groups ---- */

/* Hero: no glitch. Calm opacity crossfade only while fading. */
.open-b-still,
.open-b-still picture,
.open-b-still img {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}
.open-b-still:not(.is-fading) picture,
.open-b-still:not(.is-fading) img {
  transition: none !important;
}
.open-b-still::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background-image: none !important;
}
.open-b-still .hero-slide {
  opacity: 0;
  z-index: 0;
}
html:not([data-hero-rotating])[data-hero-start="0"] .open-b-still .hero-slide[data-hero="1"],
html:not([data-hero-rotating])[data-hero-start="1"] .open-b-still .hero-slide[data-hero="2"],
html:not([data-hero-rotating])[data-hero-start="2"] .open-b-still .hero-slide[data-hero="3"],
html:not([data-hero-rotating])[data-hero-start="3"] .open-b-still .hero-slide[data-hero="4"],
.open-b-still .hero-slide.is-active {
  opacity: 1;
}
.open-b-still.is-fading .hero-slide.is-active,
.open-b-still.is-fading .hero-slide.is-leaving {
  transition: opacity 1.5s ease-in-out !important;
}
@media (prefers-reduced-motion: reduce) {
  .open-b-still.is-fading .hero-slide.is-active,
  .open-b-still.is-fading .hero-slide.is-leaving {
    transition: none !important;
  }
}

/* Video thumbnails: zero glitch on idle and hover. Clean hover only. */
.video-grid .video-card .video-thumb,
.video-grid .video-card .video-thumb.media-glitch,
.video-grid .video-card .video-thumb.glitch-img,
.video-thumb.media-glitch,
.video-thumb.glitch-img {
  box-shadow: none !important;
}
.video-grid .video-card .video-thumb img,
.video-grid .video-card .video-thumb.media-glitch img,
.video-thumb.media-glitch img,
.video-thumb.glitch-img img,
.video-card:hover .video-thumb img,
.video-card:hover .video-thumb.media-glitch img,
.video-thumb.media-glitch:hover img,
.video-card:hover .media-glitch img,
.video-card.is-fx .video-thumb img,
.video-card.is-fx .video-thumb.media-glitch img {
  animation: none !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
}
.video-thumb::before,
.video-thumb::after,
.video-thumb.media-glitch::before,
.video-thumb.media-glitch::after,
.video-thumb.glitch-img::before,
.video-thumb.glitch-img::after,
.video-thumb .video-facade::after,
.video-thumb.media-glitch .video-facade::after,
.video-card:hover .video-thumb::before,
.video-card:hover .video-thumb::after,
.video-card:hover .video-thumb.media-glitch::before,
.video-card:hover .video-thumb.media-glitch::after,
.video-card:hover .video-thumb .video-facade::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}
.video-grid .video-card:hover .video-thumb img,
.video-grid .video-card:focus-within .video-thumb img {
  animation: none !important;
  filter: brightness(1.08) !important;
  transform: scale(1.02) !important;
  transition: filter 0.15s ease, transform 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .video-grid .video-card:hover .video-thumb img,
  .video-grid .video-card:focus-within .video-thumb img {
    transform: none !important;
    filter: brightness(1.08) !important;
  }
}


/* Main player large cover: plain artwork, no glitch idle or hover */
.player .now-art,
.now-art[data-now-art] {
  box-shadow: none !important;
}
.player .now-art::before,
.player .now-art::after,
.now-art[data-now-art]::before,
.now-art[data-now-art]::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
}
.player .now-art img,
.player .now-art:hover img,
.player .now-art:focus-within img,
.player .now-art.is-fx img,
.now-art[data-now-art] img,
.now-art[data-now-art]:hover img,
.now-art[data-now-art].is-fx img {
  animation: none !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}


/* Footer: tighter gap between tree mark and wordmark (about half), stay vertically centered */
.footer-icon + .footer-name {
  margin-left: -8px;
}


/* Confine All Albums glitch overlays to the cover, not the title */
.catalog-card.media-glitch {
  overflow: visible;
}
.catalog-card.media-glitch::before,
.catalog-card.media-glitch::after {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  inset: 0 0 auto 0;
}

/* Scattered, baked-in title fringe — only cards with .has-title-glitch */
.catalog-card.has-title-glitch .catalog-title {
  text-shadow: 1px 0 rgba(0, 229, 255, 0.75), -1px 0 rgba(255, 43, 214, 0.75);
}

/* All Albums idle cover flicker is JS-scheduled, one at a time, not an infinite CSS loop */
#catalog .catalog-card.media-glitch img {
  animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  #catalog .catalog-card.media-glitch.is-catalog-fx img {
    animation: catalog-cover-fx 0.5s steps(2, end) 1;
  }
}
@keyframes catalog-cover-fx {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    filter: url(#media-glitch-filter) saturate(1.08) contrast(1.06) hue-rotate(-6deg);
  }
  20% {
    transform: translate3d(-2px, 0.5px, 0);
    filter: url(#media-glitch-strong) saturate(1.16) contrast(1.1) hue-rotate(-10deg);
  }
  40% {
    transform: translate3d(2px, -0.4px, 0);
    filter: url(#media-glitch-strong) saturate(1.14) contrast(1.08) hue-rotate(8deg);
  }
  70% {
    transform: translate3d(-1px, 0, 0);
    filter: url(#media-glitch-filter) saturate(1.1) contrast(1.08) hue-rotate(-6deg);
  }
}


/* ---- v9 compact two-column player ---- */
.player-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.player-main,
.player-side {
  min-width: 0;
}
.player-side {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.player .now-title {
  text-shadow: none;
  font-size: clamp(16px, 2vw, 22px);
}
.player .now-stage { padding: 14px 16px 12px; }
.player .now-kicker { margin-bottom: 4px; }
.player .now-set { margin-top: 4px; font-size: 13px; }
.player .controls { margin-top: 6px; }
.player .ctrl { width: 34px; height: 34px; }
.player .ctrl-play { width: 42px; height: 42px; }
.player-tools { padding: 8px 14px; gap: 8px 12px; }
.player-top { grid-template-columns: 120px 1fr; }
.player .now-art,
.now-art[data-now-art] {
  width: 120px;
  height: 120px;
  min-height: 0;
  aspect-ratio: 1;
  flex: 0 0 120px;
}

/* Tight track rows: name and time sit together, no wide gap */
.player .tracklist {
  --track-h: 44px;
  max-height: calc(var(--track-h) * 5);
  overflow: auto;
  border-top: 0;
  flex: 1 1 auto;
  scrollbar-width: none;
}
.player .tracklist::-webkit-scrollbar { width: 0; height: 0; }
.player.is-tracks-open .tracklist {
  max-height: 280px;
  scrollbar-width: thin;
}
.player.is-tracks-open .tracklist::-webkit-scrollbar { width: 6px; }
.player .track {
  display: flex;
  grid-template-columns: none;
  gap: 8px;
  padding: 6px 12px;
  min-height: var(--track-h);
}
.player .track-art-wrap,
.player .track-art-wrap .track-art,
.player .track-art {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}
.player .track-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 76px);
  font-size: 12px;
}
.player .track-dur {
  flex: 0 0 auto;
  margin-left: 0;
}
.player .track-ext {
  flex: 0 0 auto;
  margin-left: auto;
}
.tracklist-more {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-family: ui-monospace, "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.tracklist-more:hover,
.tracklist-more:focus-visible {
  color: var(--cyan);
}
.tracklist-more[hidden] { display: none !important; }

@media (min-width: 800px) {
  .player-body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.88fr);
    align-items: stretch;
  }
  .player-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .player-side {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .player-top { grid-template-columns: 168px 1fr; }
  .player .now-art,
  .now-art[data-now-art] {
    width: 168px;
    height: 168px;
    min-height: 0;
    aspect-ratio: 1;
  }
  .player .tracklist {
    max-height: calc(var(--track-h) * 7);
  }
  .player.is-tracks-open .tracklist {
    max-height: 420px;
  }
  .tracklist-more { margin-top: auto; }
}

/* Sticky bar thin progress line */
.mini-player {
  grid-template-columns: 44px 1fr auto;
  grid-template-areas:
    "art copy ctrls"
    "viz viz viz";
}
.mini-progress {
  grid-area: viz;
  position: relative;
  width: 100%;
  height: 10px;
  margin-top: 8px;
  display: flex;
  align-items: center;
}
.mini-progress-track {
  width: 100%;
  height: 2px;
  background: var(--line-strong);
  border-radius: 1px;
  overflow: hidden;
}
.mini-progress-fill {
  height: 2px;
  width: 0%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}
body.is-docked { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }


/* Art: 2 across at all sizes so pieces are bigger and more present */
.art-masonry { column-count: 2; column-gap: 10px; }
@media (min-width: 720px) { .art-masonry { column-count: 2; column-gap: 14px; } }
@media (min-width: 1100px) { .art-masonry { column-count: 2; column-gap: 16px; } }

/* Art + Cover Art share the same .wrap container as Music / Video / About */
.layout-v3 .art-masonry,
.layout-v3 .cover-grid {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}


/* v20 waveform seek strip (shorter; sticky 2px line unchanged) */
.wave-seek {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 24px;
}
.wave {
  display: block;
  width: 100%;
  height: 24px;
  background: #05040a;
  pointer-events: none;
}
@media (min-width: 640px) {
  .wave-seek,
  .wave { height: 32px; }
}
.wave-seek .seek,
.mini-progress .mini-seek {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.wave-seek .seek::-webkit-slider-thumb,
.mini-progress .mini-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.wave-seek .seek::-moz-range-thumb,
.mini-progress .mini-seek::-moz-range-thumb {
  width: 12px;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Mobile: hide the tree mark / menu button completely. Desktop unchanged. */
@media (max-width: 699px) {
  #menu-open.mark-btn,
  .mark-btn {
    display: none !important;
  }
}