/* ════════════════════════════════════════════════════════════
   RM — Rockin Moroccin
   Pirate music television × game HUD
   ════════════════════════════════════════════════════════════ */

:root {
  /* palette */
  --void:   #0D0916;   /* violet-black ground */
  --panel:  #1B1128;   /* raised purple */
  --panel-2:#241738;
  --signal: #F4EFE6;   /* warm broadcast white */
  --dim:    #9C8FB8;   /* lavender gray */
  --sunset: #FF4D00;   /* Moroccan sunset orange */
  --shock:  #FF2E9A;   /* 2000s hot pink */
  --rec:    #FF3B30;   /* rec red — footage REC stamps */
  --line:   rgba(244, 239, 230, 0.16);

  /* type */
  --face: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --osd:  "VT323", "Courier New", monospace;

  /* rhythm */
  --hud-h: 56px;
  --ticker-h: 40px;
  --gutter: clamp(20px, 4vw, 64px);

  /* notched game-panel corner */
  --notch: 14px;
  --clip-notch: polygon(
    var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)
  );

  /* CRT noise tile (SVG turbulence) */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.9'/></svg>");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: var(--signal);
  font-family: var(--face);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  /* faint permanent grain over everything */
  position: relative;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--noise);
  opacity: 0.05;
  pointer-events: none;
  z-index: 90;
}

::selection { background: var(--sunset); color: var(--void); }

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--shock);
  outline-offset: 3px;
}

/* ── shared voices ─────────────────────────────────────────── */

.osd {
  font-family: var(--osd);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.btn {
  display: inline-block;
  font-family: var(--face);
  font-variation-settings: "wdth" 110, "wght" 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  text-decoration: none;
  padding: 0.8em 1.5em;
  clip-path: var(--clip-notch);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn-hot { background: var(--sunset); color: var(--void); }
.btn-hot:hover { background: var(--shock); }

.btn-ghost {
  background: transparent;
  color: var(--signal);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--signal); }

/* ════════════════ HUD CHROME ════════════════ */

.hud {
  position: fixed;
  left: 0; right: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--void) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hud-top {
  top: 0;
  height: var(--hud-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}

.hud-bug {
  text-decoration: none;
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
}

.bug-mark {
  background: var(--sunset);
  color: var(--void);
  padding: 0.05em 0.25em;
  clip-path: var(--clip-notch);
  --notch: 6px;
}

.hud-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.hud-nav a {
  font-variation-settings: "wdth" 110, "wght" 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--dim);
  padding: 0.5em 0.9em;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.hud-nav a .ch-no {
  font-family: var(--osd);
  font-size: 1rem;
  color: var(--sunset);
  margin-right: 0.2em;
}

.hud-nav a:hover { color: var(--signal); }

.hud-nav a.is-tuned {
  color: var(--void);
  background: var(--signal);
}
.hud-nav a.is-tuned .ch-no { color: var(--sunset); }

.hud-status {
  display: flex;
  align-items: center;
  gap: 16px;
}

.timecode {
  font-family: var(--osd);
  font-size: 1.05rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  min-width: 8ch;
}

.hud-menu {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--signal);
  font-family: var(--osd);
  font-size: 1.1rem;
  padding: 0.3em 0.7em;
  cursor: pointer;
}
.hud-menu .ch-no { color: var(--sunset); }

/* mobile channel guide */
.channel-guide {
  position: fixed;
  inset: var(--hud-h) 0 0 0;
  z-index: 79;
  background: var(--void);
  display: none;
  flex-direction: column;
  padding: 32px var(--gutter);
  gap: 4px;
}

.channel-guide.is-open { display: flex; }

.channel-guide a {
  text-decoration: none;
  font-variation-settings: "wdth" 72, "wght" 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 3rem);
  color: var(--signal);
  padding: 0.15em 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

.channel-guide .ch-no {
  font-family: var(--osd);
  font-size: 1.1rem;
  color: var(--sunset);
}

.channel-guide a:hover { color: var(--shock); }

/* bottom ticker */
.hud-ticker {
  bottom: 0;
  height: var(--ticker-h);
  border-top: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  animation: ticker 42s linear infinite;
}

.ticker-run {
  font-family: var(--osd);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--signal);
  padding-right: 3em;
}

.ticker-run + .ticker-run { color: var(--dim); }

@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* viewfinder corner brackets */
.viewfinder { position: fixed; inset: 0; pointer-events: none; z-index: 85; }
.viewfinder i {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--line);
}
.viewfinder i:nth-child(1) { top: calc(var(--hud-h) + 10px); left: 10px; border-right: 0; border-bottom: 0; }
.viewfinder i:nth-child(2) { top: calc(var(--hud-h) + 10px); right: 10px; border-left: 0; border-bottom: 0; }
.viewfinder i:nth-child(3) { bottom: calc(var(--ticker-h) + 10px); left: 10px; border-right: 0; border-top: 0; }
.viewfinder i:nth-child(4) { bottom: calc(var(--ticker-h) + 10px); right: 10px; border-left: 0; border-top: 0; }

/* ════════════════ CHANNEL-CHANGE STATIC ════════════════ */

.static-burst {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--noise), var(--void);
  background-size: 520px, auto;
  display: none;
  align-items: center;
  justify-content: center;
}

.static-burst.is-on {
  display: flex;
  animation: static-jitter 0.17s steps(2) infinite;
}

@keyframes static-jitter {
  0%   { background-position: 0 0; }
  50%  { background-position: -80px 60px; }
  100% { background-position: 120px -40px; }
}

.static-osd {
  font-family: var(--osd);
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--signal);
  text-shadow: 3px 0 var(--shock), -3px 0 var(--sunset);
}

/* ════════════════ CHANNEL SECTIONS ════════════════ */

.channel {
  position: relative;
  padding: clamp(80px, 12vh, 140px) var(--gutter);
  max-width: 1440px;
  margin: 0 auto;
}

/* faded giant channel number stamped behind each section */
.channel::before {
  content: attr(data-ch);
  position: absolute;
  top: 28px;
  right: var(--gutter);
  font-family: var(--osd);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  color: var(--dim);
  opacity: 0.65;
}

/* esports slab header */
.ch-slab {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 6vh, 64px);
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.slab-no {
  color: var(--void);
  background: var(--sunset);
  padding: 0.1em 0.5em;
  font-size: 1.15rem;
  clip-path: var(--clip-notch);
  --notch: 7px;
}

.slab-title {
  font-variation-settings: "wdth" 125, "wght" 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  letter-spacing: -0.015em;
  line-height: 1;
}

.slab-note {
  color: var(--dim);
  font-size: 0.9rem;
  margin-left: auto;
}

/* entry glitch — sections flicker in like a channel locking on */
.channel .ch-slab,
.channel .countdown,
.channel .featured-release,
.channel .tracklist,
.channel .tape-wall,
.channel .loot-row,
.channel .book-split {
  opacity: 0;
  transform: translateY(14px);
}

.channel.is-live .ch-slab,
.channel.is-live .countdown,
.channel.is-live .featured-release,
.channel.is-live .tracklist,
.channel.is-live .tape-wall,
.channel.is-live .loot-row,
.channel.is-live .book-split {
  animation: lock-on 0.5s ease forwards;
}

.channel.is-live .countdown,
.channel.is-live .tracklist,
.channel.is-live .tape-wall,
.channel.is-live .loot-row,
.channel.is-live .book-split { animation-delay: 0.12s; }

@keyframes lock-on {
  0%   { opacity: 0; transform: translateY(14px); }
  55%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 0.4; }
  100% { opacity: 1; transform: translateY(0); }
}

/* ════════════════ CH 01 · HERO ════════════════ */

.ch-hero {
  max-width: none;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--hud-h) + 40px);
  padding-bottom: calc(var(--ticker-h) + 40px);
  overflow: hidden;
}

.ch-hero::before { content: none; }

.hero-screen { position: absolute; inset: 0; z-index: -1; background: var(--void); }

.hero-video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.72;
  filter: saturate(0.4) contrast(1.15) brightness(0.55);
}

.hero-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 9, 22, 0.85) 0%, rgba(13, 9, 22, 0.3) 45%, rgba(13, 9, 22, 0.92) 100%),
    linear-gradient(115deg, rgba(255, 77, 0, 0.3) 0%, rgba(58, 28, 96, 0.42) 48%, rgba(255, 46, 154, 0.26) 100%);
}

.scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.28) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.55;
}

.hero-stack { position: relative; }

.hero-eyebrow { color: var(--signal); margin-bottom: 8px; }

.hero-title {
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.01em;
  font-variation-settings: "wdth" 62, "wght" 900;
  font-size: clamp(4.2rem, 16.5vw, 15rem);
  display: flex;
  flex-direction: column;
}

.hero-title .line-2 {
  color: transparent;
  -webkit-text-stroke: 2px var(--signal);
  margin-left: clamp(20px, 6vw, 140px);
}

/* lower third */
.lower-third {
  position: relative;
  margin-top: clamp(32px, 6vh, 64px);
  max-width: 720px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  clip-path: var(--clip-notch);
  border-left: 4px solid var(--sunset);
  padding: 18px 22px 22px;
}

.lt-bar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.lt-label { color: var(--shock); }

.lt-track {
  font-variation-settings: "wdth" 110, "wght" 800;
  text-transform: uppercase;
  font-size: 1rem;
}

.lt-meta { color: var(--dim); font-size: 0.85rem; margin-left: auto; }

.lt-stats {
  list-style: none;
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  padding: 14px 0;
}

.lt-stats b {
  display: block;
  font-variation-settings: "wdth" 100, "wght" 900;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--sunset);
  font-variant-numeric: tabular-nums;
}

.lt-stats li:nth-child(2) b { color: var(--shock); }

.lt-stats span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.lt-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-scroll {
  position: absolute;
  bottom: calc(var(--ticker-h) + 18px);
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  color: var(--signal);
  animation: bob 1.6s ease-in-out infinite;
}

@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* ════════════════ CH 02 · TOUR ════════════════ */

.countdown { list-style: none; }

.gig {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: clamp(14px, 3vw, 36px);
  padding: clamp(14px, 2.5vh, 24px) 8px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background-color 0.15s ease;
}

.gig:hover { background: var(--panel); }

.gig-no {
  font-variation-settings: "wdth" 62, "wght" 900;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--dim);
  min-width: 2ch;
  text-align: right;
  transition: color 0.15s ease;
}

.gig:hover .gig-no {
  color: var(--sunset);
  -webkit-text-stroke: 1.5px var(--sunset);
}

.gig-date { color: var(--shock); font-size: 1.15rem; white-space: nowrap; }

.gig-venue {
  font-variation-settings: "wdth" 72, "wght" 900;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.gig-city {
  color: var(--dim);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.gig-tix { justify-self: end; }

/* the next show gets the hot seat */
.gig:first-child .gig-date::after {
  content: "· NEXT UP";
  color: var(--sunset);
  margin-left: 0.6em;
}

.replay-archive { margin-top: clamp(40px, 7vh, 72px); }

.archive-label { margin-bottom: 12px; }

.replay-archive ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  color: var(--dim);
  font-size: 0.85rem;
}

.replay-archive span {
  color: var(--signal);
  font-variation-settings: "wdth" 100, "wght" 700;
  text-transform: uppercase;
}

/* ════════════════ CH 03 · DISCOG ════════════════ */

.featured-release {
  display: grid;
  grid-template-columns: minmax(170px, 230px) 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(48px, 8vh, 88px);
}

.fr-art {
  position: relative;
  clip-path: var(--clip-notch);
  --notch: 22px;
}

.fr-art img { width: 100%; height: auto; }

.fr-label { color: var(--sunset); margin-bottom: 10px; }

.fr-title {
  font-variation-settings: "wdth" 62, "wght" 900;
  text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.85;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.fr-blurb {
  max-width: 46ch;
  color: var(--dim);
  margin-bottom: 26px;
}

.fr-links { display: flex; gap: 12px; flex-wrap: wrap; }

/* select-screen tracklist */
.tracklist { list-style: none; }

.side-label {
  color: var(--sunset);
  font-size: 1.05rem;
  padding: 26px 8px 8px;
}

.side-label + .track { border-top: 1px solid var(--line); }

.track {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  padding: 16px 8px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.15s ease;
}

.track:hover { background: var(--panel); }

.tr-no { color: var(--sunset); font-size: 1.15rem; min-width: 2.5ch; }

.tr-name {
  font-variation-settings: "wdth" 100, "wght" 800;
  text-transform: uppercase;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.01em;
}

.tr-name em {
  font-style: normal;
  color: var(--dim);
  font-variation-settings: "wdth" 100, "wght" 500;
}

.tr-tags { display: flex; gap: 8px; }

.tr-tags i {
  font-style: normal;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dim);
  border: 1px solid var(--line);
  padding: 0.25em 0.7em;
  white-space: nowrap;
}

.tr-links { display: flex; gap: 6px; }

.tr-links a {
  text-decoration: none;
  color: var(--dim);
  font-size: 0.95rem;
  padding: 0.15em 0.6em;
  border: 1px solid var(--line);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tr-links a:hover {
  background: var(--sunset);
  border-color: var(--sunset);
  color: var(--void);
}

/* the pre-save row runs hot */
.tr-links a[aria-label^="Pre-save"] { color: var(--shock); border-color: var(--shock); }
.tr-links a[aria-label^="Pre-save"]:hover { background: var(--shock); color: var(--void); }

/* ════════════════ CH 04 · FOOTAGE ════════════════ */

.tape-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 14px;
}

.tape {
  position: relative;
  overflow: hidden;
  clip-path: var(--clip-notch);
  --notch: 10px;
}

.tape img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* bias the crop toward the upper part of the frame, where faces live */
  object-position: 50% 30%;
  filter: saturate(0.8);
  transition: transform 0.35s ease, filter 0.35s ease;
}

.tape:hover img {
  transform: scale(1.05);
  filter: saturate(1.15) contrast(1.05);
}

.tape figcaption {
  position: absolute;
  left: 12px; bottom: 10px;
  font-size: 0.95rem;
  color: var(--signal);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tape:hover figcaption { opacity: 1; }

.tape figcaption::first-letter { color: var(--rec); }

.t-wide { grid-column: span 2; grid-row: span 2; }
.t-tall { grid-row: span 2; }

/* ════════════════ CH 05 · ITEM SHOP ════════════════ */

.loot-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 32px);
}

.loot { text-align: center; }

.loot-frame {
  position: relative;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(244, 239, 230, 0.03) 14px 28px),
    var(--panel);
  clip-path: var(--clip-notch);
  --notch: 18px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background-color 0.2s ease;
}

.loot-glyph {
  font-size: clamp(3.5rem, 8vw, 6rem);
  filter: grayscale(1) brightness(0.5) contrast(1.4);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.loot:hover .loot-glyph { filter: grayscale(1) brightness(0.75); transform: scale(1.06) rotate(-3deg); }

.loot-lock {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--void);
  border: 1px solid var(--line);
  color: var(--sunset);
  padding: 0.1em 0.6em;
  font-size: 0.95rem;
}

.loot h3 {
  font-variation-settings: "wdth" 110, "wght" 800;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.loot p { margin-top: 4px; font-size: 0.9rem; }

.loot:nth-child(3) .loot-lock { color: var(--shock); }

.shop-note {
  margin-top: clamp(28px, 5vh, 48px);
  color: var(--dim);
  max-width: 52ch;
}

.shop-note a { color: var(--shock); text-underline-offset: 3px; }

/* ════════════════ CH 06 · TRANSMISSION ════════════════ */

.book-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 32px);
  margin-bottom: clamp(40px, 7vh, 72px);
}

.book-card {
  background: var(--panel);
  clip-path: var(--clip-notch);
  --notch: 18px;
  padding: clamp(24px, 4vw, 44px);
  border-top: 3px solid var(--sunset);
}

.book-card:nth-child(2) { border-top-color: var(--shock); }

.book-card h3 { color: var(--sunset); margin-bottom: 12px; }
.book-card:nth-child(2) h3 { color: var(--shock); }

.book-card p { color: var(--dim); max-width: 34ch; margin-bottom: 22px; }

.book-mail {
  display: block;
  font-variation-settings: "wdth" 85, "wght" 900;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 2.6vw, 1.9rem);
  letter-spacing: -0.01em;
  text-decoration: none;
  line-height: 1.15;
  word-break: break-all;
  transition: color 0.15s ease;
}

.book-mail:hover { color: var(--sunset); }
.book-card:nth-child(2) .book-mail:hover { color: var(--shock); }

.book-agent {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.socials {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(40px, 7vh, 72px);
}

.socials a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-variation-settings: "wdth" 110, "wght" 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 0.7em 1.3em;
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip-notch);
  --notch: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.socials a:hover { background: var(--signal); color: var(--void); }

.socials svg { width: 15px; height: 15px; flex-shrink: 0; }

.sign-off {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.sign-off .osd { font-size: 0.95rem; }

/* ════════════════ RESPONSIVE ════════════════ */

@media (max-width: 960px) {
  .hud-nav { display: none; }
  .hud-status { margin-left: auto; }
  .timecode { display: none; }
  .hud-menu { display: block; }

  .featured-release { grid-template-columns: 1fr; }
  .fr-art { max-width: 230px; }

  .tape-wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }

  .book-split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .gig {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "no venue tix"
      "no meta  tix";
    row-gap: 4px;
  }
  .gig-no { grid-area: no; }
  .gig-venue { grid-area: venue; }
  .gig-date { grid-area: meta; font-size: 1rem; }
  .gig-city { display: none; }
  .gig-tix { grid-area: tix; }

  .track { grid-template-columns: auto 1fr auto; }
  .tr-tags { display: none; }

  .loot-row { grid-template-columns: 1fr; }
  .loot-frame { aspect-ratio: 16 / 9; }

  .lt-meta { margin-left: 0; }
}

/* ════════════════ REDUCED MOTION ════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .ticker-track { animation: none; }
  .hero-scroll { animation: none; }
  .blink { animation: none; }
  .hero-video { display: none; }

  .channel .ch-slab,
  .channel .countdown,
  .channel .featured-release,
  .channel .tracklist,
  .channel .tape-wall,
  .channel .loot-row,
  .channel .book-split {
    opacity: 1;
    transform: none;
    animation: none !important;
  }

  .static-burst.is-on { animation: none; }
}