/* ============================================================
   JUNGLE TINGS AUDIO — Shared stylesheet
   Design system locked from jta-preview-v6. Single amber accent.
   No red anywhere. Easing is always cubic-bezier(0.65,0,0.35,1).
   ============================================================ */

:root {
  --bg: #0c0a08;          /* warm rich black */
  --bg-2: #16130f;
  --surface: #1a1612;
  --metal: #2a2520;       /* hardware panel base */
  --metal-2: #3a342c;
  --metal-light: #4a4238;
  --bone: #e6dcc4;        /* warm cream — primary type */
  --bone-dim: #968d75;
  --bone-faint: #4a443a;
  /* ============================================================
     SITE COLOUR THEME.
     To recolour the WHOLE site, open theme.js and set the number:
       1 = Amber (gold)     2 = Jungle green     3 = Neon blue
     The palettes live here (and just below the :root block); tweak
     a hex if you ever want a custom shade.
     ============================================================ */
  --amber:      #c89a3c;   /* THEME 1 (Amber) */
  --amber-glow: #e8b95a;
  --amber-dim:  #8a6a26;
  --green: #6bbf6b;       /* VU low signal only */
  --rule: rgba(230, 220, 196, 0.1);
  --rule-mid: rgba(230, 220, 196, 0.2);

  --display: 'Anton', sans-serif;
  --body: 'Albert Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --led: 'VT323', monospace;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --maxw: 1200px;       /* grids / hero */
  --maxw-read: 900px;   /* lists / text / embeds */
}

/* ============================================================
   THEME PALETTES 2 & 3.  (Theme 1 = the :root defaults above.)
   You do NOT edit these to switch colour. Open theme.js and set
   the number, or use the colour knob on the site (bottom-right).
   Only touch a hex below if you want a different shade.
   ============================================================ */
html[data-theme="2"] {            /* THEME 2 — Jungle green */
  --amber:      #3fa653;
  --amber-glow: #63c878;
  --amber-dim:  #277038;
}
html[data-theme="3"] {            /* THEME 3 — Sky blue */
  --amber:      #558ce5;
  --amber-glow: #82b1f2;
  --amber-dim:  #3a64ad;
}

/* Colour knob — cycles amber / green / blue, lives bottom-right.
   Built and wired by theme.js. The face shows the live accent. */
.theme-toggle {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 200;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--metal-light);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%,
              var(--amber-glow), var(--amber) 48%, var(--amber-dim) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 5px rgba(0, 0, 0, 0.5),
    0 0 0 4px var(--metal),
    0 0 12px color-mix(in srgb, var(--amber-glow) 45%, transparent),
    0 4px 14px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.theme-toggle:hover {
  transform: scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 5px rgba(0, 0, 0, 0.5),
    0 0 0 4px var(--metal),
    0 0 18px color-mix(in srgb, var(--amber-glow) 70%, transparent),
    0 4px 16px rgba(0, 0, 0, 0.65);
}
.theme-toggle:active { transform: scale(0.93); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--amber-glow);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .theme-toggle { width: 34px; height: 34px; right: 0.85rem; bottom: 0.85rem; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--bone);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--amber); color: var(--bg); }

a { color: inherit; }

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

/* film grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* accessible focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ============ BOOT / LOADING SEQUENCE ============ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}

.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }

.boot-display {
  min-width: min(440px, 84vw);
  text-align: center;
}

.boot-display .led-text { font-size: 1.5rem; }

.boot-bar {
  width: min(440px, 84vw);
  height: 4px;
  background: var(--bg-2);
  border: 1px solid var(--metal-light);
  border-radius: 2px;
  overflow: hidden;
}

.boot-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber-glow));
  box-shadow: 0 0 10px var(--amber-glow);
  transition: width 0.2s linear;
}

@media (prefers-reduced-motion: reduce) {
  .boot { display: none; }
}

/* ============ STATUS BAR ============ */
/* Status bar + nav are wrapped in .topbar so the whole header — including the
   radio player — stays pinned while scrolling. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(12, 10, 8, 0.92);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

.statusbar {
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 2rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border-bottom: 1px solid var(--rule);
}

.statusbar .now-playing {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bone);
  min-width: 0;
}

/* Mini radio player: a transport + an LED screen that scrolls the live track
   title from the (hidden) SoundCloud embed. Lives in the status bar's
   now-playing slot. When wired (.live) it gets a metal enclosure so it reads
   as a distinct hardware module rather than bar text. */
.statusbar .now-playing.live {
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  background: linear-gradient(180deg, var(--metal-2), var(--metal));
  border: 1px solid var(--metal-light);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 7px rgba(0, 0, 0, 0.5);
}
.statusbar .now-playing .np-screen {
  position: relative;
  overflow: hidden;
  width: clamp(120px, 19vw, 220px);
  padding: 7px 13px;
  font-family: var(--led);
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--amber-glow);
  text-shadow: 0 0 6px color-mix(in srgb, var(--amber-glow) 50%, transparent);
}
.statusbar .now-playing.live .np-screen {
  background: #060504;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 3px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9), inset 0 0 0 1px color-mix(in srgb, var(--amber-glow) 5%, transparent);
}
.statusbar .now-playing .np-track {
  display: inline-block;
  white-space: nowrap;
  transition: opacity 0.4s var(--ease);
}
.statusbar .now-playing .np-track.fading { opacity: 0; }

/* Scroll the title only when the live player is actually wired. */
.statusbar .now-playing.live .np-track {
  padding-left: 100%;
  animation: np-scroll 13s linear infinite;
}
@keyframes np-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Transport button — play triangle by default, pause bars while playing. */
.statusbar .np-btn {
  -webkit-appearance: none; appearance: none;
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--metal-light);
  border-radius: 50%;
  background: transparent;
  color: var(--amber);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.statusbar .now-playing.live .np-btn { display: inline-flex; }
.statusbar .np-btn:hover { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.statusbar .np-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.statusbar .np-btn::before {
  content: "";
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 2px;
}
.statusbar .now-playing.playing .np-btn::before {
  width: 11px; height: 15px;
  border: 0;
  border-left: 3.5px solid currentColor;
  border-right: 3.5px solid currentColor;
  margin-left: 0;
  box-sizing: border-box;
}
.statusbar .now-playing.playing .np-btn {
  border-color: var(--amber);
  box-shadow: 0 0 8px var(--amber-glow);
}

/* Transport cluster: prev / play-pause / next */
.statusbar .np-transport { display: inline-flex; align-items: center; gap: 0.35rem; }
.statusbar .np-prev,
.statusbar .np-next {
  -webkit-appearance: none; appearance: none;
  display: none;
  align-items: center; justify-content: center; gap: 1px;
  width: 27px; height: 27px; padding: 0;
  border: 0; background: transparent;
  color: var(--bone-dim); cursor: pointer;
  transition: color 0.2s;
}
.statusbar .now-playing.live .np-prev,
.statusbar .now-playing.live .np-next { display: inline-flex; }
.statusbar .np-prev:hover,
.statusbar .np-next:hover { color: var(--amber); }
.statusbar .np-prev:focus-visible,
.statusbar .np-next:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 3px; }
.statusbar .np-next::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent currentColor; }
.statusbar .np-next::after  { content: ""; width: 2px; height: 15px; background: currentColor; }
.statusbar .np-prev::before { content: ""; width: 2px; height: 15px; background: currentColor; }
.statusbar .np-prev::after  { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 9px 6px 0; border-color: transparent currentColor transparent transparent; }

/* Seekable progress bar */
.statusbar .np-progress {
  display: none;
  align-items: center;
  width: clamp(56px, 8vw, 110px);
  height: 24px;
  cursor: pointer;
}
.statusbar .now-playing.live .np-progress { display: inline-flex; }
.statusbar .np-bar {
  position: relative;
  width: 100%; height: 5px;
  background: var(--metal-light);
  border-radius: 2px;
}
.statusbar .np-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--amber);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--amber-glow);
}
.statusbar .np-fill::after {
  content: "";
  position: absolute; right: -3px; top: 50%;
  transform: translateY(-50%);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 5px var(--amber-glow);
}
.statusbar .np-progress:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }

/* Elapsed / total time */
.statusbar .np-time {
  display: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--bone-dim);
  white-space: nowrap;
}
.statusbar .now-playing.live .np-time { display: inline; }

/* Volume — speaker toggle + slider */
.statusbar .np-volume { display: none; align-items: center; gap: 0.3rem; }
.statusbar .now-playing.live .np-volume { display: inline-flex; }
.statusbar .np-mute {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; padding: 0;
  border: 0; background: transparent;
  color: var(--bone-dim); cursor: pointer;
  transition: color 0.2s;
}
.statusbar .np-mute svg { width: 19px; height: 19px; fill: currentColor; }
.statusbar .np-mute:hover { color: var(--amber); }
.statusbar .np-mute:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 3px; }
.statusbar .np-mute.muted { color: var(--bone-faint); }
.statusbar .np-mute.muted .np-wave { display: none; }

.statusbar .np-vol {
  -webkit-appearance: none; appearance: none;
  width: 70px; height: 20px;
  background: transparent; cursor: pointer;
}
.statusbar .np-vol::-webkit-slider-runnable-track { height: 4px; background: var(--metal-light); border-radius: 2px; }
.statusbar .np-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 5px var(--amber-glow); }
.statusbar .np-vol::-moz-range-track { height: 4px; background: var(--metal-light); border-radius: 2px; }
.statusbar .np-vol::-moz-range-progress { height: 4px; background: var(--amber); border-radius: 2px; }
.statusbar .np-vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--amber); }
.statusbar .np-vol:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }

/* Pop-out button — opens the radio in a standalone window that survives nav */
.statusbar .np-pop {
  -webkit-appearance: none; appearance: none;
  display: none;
  align-items: center; justify-content: center;
  width: 21px; height: 21px; padding: 0; margin-left: 0.1rem;
  border: 0; background: transparent;
  color: var(--bone-dim); cursor: pointer;
  transition: color 0.2s;
}
.statusbar .now-playing.live .np-pop { display: inline-flex; }
.statusbar .np-pop svg { width: 15px; height: 15px; }
.statusbar .np-pop:hover { color: var(--amber); }
.statusbar .np-pop:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 3px; }

/* Tight screens: keep play-pause + scrolling title, drop the extras */
@media (max-width: 760px) {
  .statusbar .now-playing.live .np-prev,
  .statusbar .now-playing.live .np-next,
  .statusbar .now-playing.live .np-progress,
  .statusbar .now-playing.live .np-time,
  .statusbar .now-playing.live .np-volume,
  .statusbar .now-playing.live .np-pop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .statusbar .now-playing.live .np-track {
    padding-left: 0;
    animation: none;
    max-width: clamp(130px, 26vw, 280px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.statusbar .edge-end { text-align: right; white-space: nowrap; }

@keyframes glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============ NAV ============ */
nav {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;     /* nav links centered; logo floats left (absolute) */
  align-items: center;
  padding: 1.5rem 2rem;
  background: rgba(12, 10, 8, 0.9);
  border-bottom: 1px solid var(--rule);
}
nav > a {                      /* the logo link */
  position: absolute;
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

.logo {
  height: 32px;
  filter: brightness(0) invert(0.92) sepia(0.1);
}

.nav-links {
  display: flex;
  gap: 3rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--mono);
  color: var(--bone);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  position: relative;
  padding: 6px 0;
  transition: color 0.25s var(--ease);
}

.nav-links a .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--bone-faint);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  transition: all 0.25s var(--ease);
}

.nav-links a:hover { color: var(--amber); }
.nav-links a:hover .dot { background: var(--amber); box-shadow: 0 0 8px var(--amber-glow); }

/* active page state */
.nav-links a[aria-current="page"] { color: var(--amber); }
.nav-links a[aria-current="page"] .dot {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber-glow);
}

/* ============ HARDWARE PRIMITIVES ============ */
.metal-panel {
  background:
    linear-gradient(180deg, var(--metal-2) 0%, var(--metal) 50%, var(--bg-2) 100%),
    var(--metal);
  border: 1px solid var(--metal-light);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.metal-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg, transparent 0, transparent 1px,
    rgba(255,255,255,0.015) 1px, rgba(255,255,255,0.015) 2px);
  pointer-events: none;
}

.screws::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 14px 14px, var(--metal) 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 14px) 14px, var(--metal) 4px, transparent 5px),
    radial-gradient(circle at 14px calc(100% - 14px), var(--metal) 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--metal) 4px, transparent 5px);
}

.screws::before {
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 1px, rgba(255,255,255,0.015) 1px, rgba(255,255,255,0.015) 2px),
    radial-gradient(circle at 14px 14px, transparent 3px, rgba(0,0,0,0.6) 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 14px) 14px, transparent 3px, rgba(0,0,0,0.6) 3.5px, transparent 4px),
    radial-gradient(circle at 14px calc(100% - 14px), transparent 3px, rgba(0,0,0,0.6) 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), transparent 3px, rgba(0,0,0,0.6) 3.5px, transparent 4px);
}

/* LED readout */
.led-display {
  background: linear-gradient(180deg, #050300 0%, #0a0806 100%);
  border: 1px solid var(--metal-light);
  border-radius: 3px;
  padding: 12px 20px;
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.9),
    inset 0 -1px 2px rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}

.led-display::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.4) 3px, transparent 4px);
  pointer-events: none;
  opacity: 0.5;
}

.led-text {
  font-family: var(--led);
  color: var(--amber-glow);
  text-shadow: 0 0 8px var(--amber);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.led-text-lg { font-size: 2.2rem; line-height: 1; }
.led-text-md { font-size: 1.4rem; line-height: 1; }
.led-text-sm { font-size: 1rem; line-height: 1.2; }
.led-text .amber { color: var(--amber); }

.led-text .blink { animation: blink 1s steps(2) infinite; }
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.15; }
}

/* hardware button */
.hw-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bone);
  background: linear-gradient(180deg, var(--metal-2) 0%, var(--metal) 100%);
  border: 1px solid var(--metal-light);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.5);
  transition: all 0.15s var(--ease);
  position: relative;
  cursor: pointer;
}

.hw-btn::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--bone-faint);
  border-radius: 50%;
  flex-shrink: 0;
}

.hw-btn:hover {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
}

.hw-btn:hover::before { background: var(--amber); box-shadow: 0 0 6px var(--amber-glow); }
.hw-btn.lit::before { background: var(--amber); box-shadow: 0 0 8px var(--amber-glow); }
.hw-btn.lit { color: var(--amber); }

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-stagger.in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 3rem 2rem 5rem;
  overflow: hidden;            /* clip the background video to the hero box */
}

/* background banner video (Pexels stock, self-hosted in /video) */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}
/* dark wash — heaviest on the left (under the headline) so the type stays crisp,
   lets more of the clip show on the right, like the old banner */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(12,10,8,0.82) 42%, rgba(12,10,8,0.4) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 34%);
}
/* reduced-motion: don't autoplay — fall back to the poster still */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero { background: #0c0a08 url('video/hero-jungle-poster.jpg') center/cover no-repeat; }
}

/* JTA Sampler page — embedded instrument */
.sampler-page { max-width: 760px; margin: 0 auto; }
.sampler-page iframe { width: 100%; height: 820px; border: 0; display: block; background: var(--bg); }
.sampler-tip { max-width: 720px; margin: 1.5rem auto 0; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; line-height: 1.9; color: var(--bone-dim); }
.sampler-tip b { color: var(--bone); }
@media (max-width: 760px) { .sampler-page iframe { height: 900px; } }

.catalog-list { max-width: 760px; margin: 0 auto; }

/* shop product grid — products line up left→right in rows (left-aligned).
   NB: .shop-drop also carries .embed-block, whose max-width:900 (defined later)
   wins — so the merch sits in a 900px centred box. The Vinyl grid above uses the
   SAME 900px width (#vinyl-root) so the two sections match size + alignment. */
.shop-drop { max-width: var(--maxw); }
.shop-drop > div { text-align: left; }
.shop-drop .shopify-buy__collection-products { text-align: left !important; justify-content: flex-start !important; }
.shop-drop .shopify-buy__product { margin-left: 0 !important; }

/* Selections — crew/community shares feed (auto-filled from a data feed) */
.sel-intro {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.sel-intro p { color: var(--bone-dim); line-height: 1.7; max-width: 620px; margin: 0; }
.sel-status { max-width: 1100px; margin: 0 auto; color: var(--bone-dim); font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.sel-grid {
  max-width: 1100px;
  margin: 1rem auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.sel-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule-mid);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.sel-card:hover { transform: translateY(-3px); border-color: var(--metal-light); }
.sel-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sel-ph { font-family: var(--display); font-size: 3.5rem; color: var(--metal-light); }
.sel-body { padding: 1rem 1.1rem 1.2rem; }
.sel-type {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--metal-light); border-radius: 3px;
  padding: 0.2rem 0.5rem; margin-bottom: 0.7rem;
}
.sel-title { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 0.5rem; color: var(--bone); }
.sel-desc {
  color: var(--bone-dim); font-size: 0.92rem; line-height: 1.55; margin: 0 0 0.7rem;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 7;          /* cap long blurbs; card links to the release */
  line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sel-artist { color: var(--amber); font-size: 0.92rem; }
.sel-by { color: var(--bone-dim); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.6rem; }

/* News feed — two-column cards */
.feed { max-width: 980px; margin: 0 auto; columns: 2; column-gap: 2rem; }
.post { break-inside: avoid; border: 1px solid var(--rule); border-radius: 6px; padding: 1.6rem; margin: 0 0 2rem; background: var(--bg-2); }
.post-meta { display: flex; gap: 0.8rem; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 0.85rem; }
.post-date { color: var(--amber); }
.post-tag { border: 1px solid var(--metal-light); border-radius: 3px; padding: 0.2rem 0.55rem; }
.post-title { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); text-transform: uppercase; line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 0.9rem; }
.post-title em { font-style: normal; color: var(--amber); }
.post-body { color: var(--bone-dim); line-height: 1.7; }
.post-body p { margin: 0 0 1rem; } .post-body p:last-child { margin-bottom: 0; }
.post-body a { color: var(--amber); }
.post-media { margin: 1.15rem 0 0.4rem; max-width: 100%; }
.post-media img { width: 100%; display: block; border: 1px solid var(--rule-mid); border-radius: 4px; }
.post-media iframe { width: 100%; border: 0; display: block; }

/* hero text */
.hero-text {
  position: relative;
  z-index: 2;
  margin-top: 4rem;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
}

.hero-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--amber); }

.hero-title {
  font-family: var(--display);
  font-size: clamp(3.5rem, 9vw, 10rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.hero-title .line { display: block; }
.hero-title .indent { padding-left: 0.5em; }
.hero-title em { font-style: normal; color: var(--amber); }

.hero-tag {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--bone-dim);
  max-width: 540px;
  margin-bottom: 3rem;
}

.hero-tag .em { color: var(--bone); font-weight: 500; }

.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ============ SECONDARY PAGE HERO ============ */
.page-hero {
  position: relative;
  padding: 5rem 2rem 4rem;
  border-bottom: 1px solid var(--rule);
}

.page-hero-inner { max-width: var(--maxw); margin: 0 auto; }

.page-hero h1 {
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.page-hero h1 em { font-style: normal; color: var(--amber); }

.page-hero .sub {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.page-hero .sub .amber { color: var(--amber); }

/* page hero with image backdrop (shop) */
.page-hero.with-image {
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero.with-image .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.4) contrast(1.1) brightness(0.45) saturate(0.9);
  z-index: -1;
}

.page-hero.with-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,10,8,0.5) 0%, rgba(12,10,8,0.85) 100%);
  z-index: -1;
}

/* ============ SECTION BASE ============ */
section {
  position: relative;
  padding: 7rem 2rem;
  border-top: 1px solid var(--rule);
}

.section-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 5rem;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}

.section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--amber);
  font-weight: 700;
  text-transform: uppercase;
}

.section-num strong {
  display: block;
  color: var(--bone);
  font-size: 13px;
  margin-bottom: 0.4rem;
}

.section-title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 400;
  justify-self: end;
  text-align: right;
}

.section-title em { font-style: normal; color: var(--amber); }

/* Match each section header's width to the content beneath it, so the title's
   right edge lines up with the column below (default 1200 stays for grid sections). */
section:has(.platforms-list) .section-header,
section:has(.embed-block:not(.shop-drop)) .section-header { max-width: var(--maxw-read); }   /* 900 */
section:has(.latest-grid) .section-header { max-width: 1000px; }
section:has(.feed) .section-header,
section:has(.form-panel) .section-header { max-width: 760px; }

/* ============ 01 / PLATFORMS ============ */
.platforms { background: var(--bg); }

.platforms-list {
  max-width: var(--maxw-read);
  margin: 0 auto;
  border-top: 1px solid var(--rule-mid);
}

.platform {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  gap: 1.75rem;
  align-items: center;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule-mid);
  text-decoration: none;
  color: var(--bone);
  transition: padding 0.35s var(--ease);
  position: relative;
}

.platform::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--amber);
  transition: width 0.4s var(--ease);
}

.platform:hover { padding-left: 2rem; }
.platform:hover::before { width: 1.5rem; }
.platform:hover .platform-name { color: var(--amber); }
.platform:hover .platform-arrow { transform: translateX(10px); color: var(--amber); }

.platform-index {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--bone-dim);
  font-weight: 700;
}

.platform-name {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease);
}

.platform-desc {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.platform-vu { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.platform-vu .v { width: 4px; background: var(--bone-faint); }
.platform-vu .v.on { background: var(--green); }
.platform-vu .v.hot { background: var(--amber); }

.platform-arrow {
  font-family: var(--mono);
  font-size: 1.6rem;
  transition: transform 0.35s var(--ease), color 0.25s var(--ease);
}

/* ============ 02 / CATALOGUE ============ */
.catalog { background: var(--bg); }

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

.track {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: padding-left 0.3s var(--ease);
  cursor: pointer;
}

.track:first-child { border-top: 1px solid var(--rule-mid); }
.track:hover { padding-left: 1rem; }
.track:hover .track-title { color: var(--amber); }
.track.highlight { padding-left: 1rem; }
.track.highlight .track-title { color: var(--amber); }

.track-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--bone-dim);
  font-weight: 700;
}

.track-num .side { color: var(--amber); margin-right: 0.25em; }

.track-title {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.05;
  transition: color 0.25s var(--ease);
}

.track-embed iframe {
  width: 220px;
  height: 42px;
  border: 0;
  display: block;
  background: var(--surface);
}

/* ============ 03 / CREW - TAPE DECK ============ */
.crew { background: var(--bg); }

.crew-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.crew-cell {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg);
  text-decoration: none;
  overflow: hidden;
  display: block;
  cursor: pointer;
}

.crew-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.8) contrast(1.1) brightness(0.75);
  transition: all 0.6s var(--ease);
}

.crew-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12, 10, 8, 0.95));
  pointer-events: none;
}

.crew-cell-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem 1.25rem 1.25rem;
  z-index: 2;
  color: var(--bone);
}

.crew-cell-name {
  font-family: var(--display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

.crew-cell:hover img { filter: grayscale(0) contrast(1.1) brightness(1); transform: scale(1.04); }

/* ============ ARTIST PROFILE (artist.html?a=slug) ============ */
.artist { background: var(--bg); }
.artist-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: 3rem;
  align-items: start;
}
.artist-photo {
  border: 1px solid var(--rule-mid);
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
}
.artist-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.artist-info { padding-top: 0.5rem; }
.artist-name {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0.4rem 0 0.6rem;
}
.artist-loc {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.5rem;
}
.artist-bio {
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--bone);
  max-width: 60ch;
  margin-bottom: 2rem;
}
.artist-bio.is-muted { color: var(--bone-dim); font-style: italic; }
.artist-links { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2rem; }
/* Optional extra-photos gallery (the main profile photo is separate + fixed) */
.artist-gallery { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.artist-gallery a { display: block; width: 88px; height: 88px; border-radius: 3px; overflow: hidden; border: 1px solid var(--rule-mid); }
.artist-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.25); transition: transform 0.2s var(--ease), filter 0.2s var(--ease); }
.artist-gallery a:hover img { transform: scale(1.05); filter: grayscale(0); }
.artist-back {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.artist-back:hover { color: var(--amber); }

@media (max-width: 760px) {
  .artist-inner { grid-template-columns: 1fr; gap: 2rem; padding: 2.5rem 1.25rem; max-width: 460px; }
}

/* ============ REACTIONS (reactions.html — Promo-Cloud feed) ============ */
.reactions { background: var(--bg); }
.reactions-stage { max-width: 900px; margin: 0 auto; padding: 1.5rem 2rem 5rem; }
.rx-empty { text-align: center; color: var(--bone-dim); font-family: var(--body); padding: 2rem 0; }

.rx-head { display: flex; gap: 1.2rem; align-items: center; padding: 1.4rem 1.6rem; margin-bottom: 1.5rem; }
.rx-art { width: 112px; height: 112px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--rule-mid); }
.rx-head-info { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; align-items: flex-start; }
.rx-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-dim); }
.rx-release { font-family: var(--display); font-size: clamp(1.6rem, 3.5vw, 2.4rem); text-transform: uppercase; letter-spacing: -0.01em; margin: 0; color: var(--bone); line-height: 1; }
.rx-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.rx-stats strong { color: var(--amber); }
.rx-dot { color: var(--bone-faint); }

.rx-filter { display: flex; justify-content: flex-end; margin: 0 0 0.7rem; }
.rx-filter-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 1px solid var(--rule-mid); border-radius: 999px;
  padding: 0.35rem 0.8rem; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: var(--bone-dim); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.rx-filter-btn:hover { color: var(--bone); border-color: var(--rule); }
.rx-filter-btn.is-on { color: var(--amber); border-color: var(--amber-dim); background: var(--amber-faint, transparent); }
.rx-filter-n { color: var(--bone-faint); }
.rx-filter-btn.is-on .rx-filter-n { color: var(--amber-dim); }

.rx-feed { max-height: 68vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; padding-right: 0.4rem; }
.rx-card { background: var(--surface); border: 1px solid var(--rule); border-left: 2px solid var(--bone-faint); border-radius: 8px; padding: 0.9rem 1.1rem; }
.rx-card.is-support { border-left-color: var(--amber); }
.rx-card-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rx-name { font-family: var(--body); font-weight: 700; color: var(--bone); }
.rx-support { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber-dim); border-radius: 3px; padding: 0.15rem 0.4rem; }
.rx-rating { margin-left: auto; font-family: var(--led); font-size: 1.35rem; line-height: 1; color: var(--amber-glow); }
.rx-rating-max { font-size: 0.8rem; color: var(--bone-dim); }
.rx-comment { font-family: var(--body); color: var(--bone); margin: 0.55rem 0 0.4rem; line-height: 1.5; }
.rx-card-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-dim); }
@media (max-width: 560px) {
  .rx-head { flex-direction: column; align-items: flex-start; text-align: left; }
  .rx-rating { margin-left: 0; }
}

/* ============ LIVE (live.html — Cloudflare Stream) ============ */
.live { background: var(--bg); }
.live-stage { max-width: 1320px; margin: 0 auto; padding: 1.5rem 2rem 5rem; }

/* YouTube-style watch player: full 16:9 stream + clean meta row */
.yt { max-width: 980px; margin: 0 auto; }
.yt-player {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--rule-mid);
}
.yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-offline {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at center, #14110d 0%, #000 85%);
}
.yt-meta { padding-top: 1.1rem; }
.yt-titlerow { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.yt-title {
  font-family: var(--body); font-weight: 700; margin: 0;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem); color: var(--bone); letter-spacing: 0.01em;
}
.yt-when {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bone-dim); white-space: nowrap;
}
.yt-channel {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.yt-avatar { height: 30px; width: auto; flex: 0 0 auto; opacity: 0.95; }
.yt-channel-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.yt-channel-name { font-family: var(--body); font-weight: 700; color: var(--bone); font-size: 0.95rem; }
.yt-channel-sub {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bone-dim); margin-top: 3px;
}
.yt-actions { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Compact the meta-row buttons so all three fit on one line */
.yt-actions .hw-btn { padding: 0.5rem 0.8rem; font-size: 10px; letter-spacing: 0.1em; }
/* Per-stream description box */
.yt-desc {
  margin: 1rem 0 0; padding: 0.9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  color: var(--bone); font-family: var(--body); font-size: 0.92rem; line-height: 1.55;
  white-space: pre-line;
}
@media (max-width: 560px) {
  .yt-actions { margin-left: 0; width: 100%; }
}

/* Live + chat: video left, Discord (WidgetBot) chat right; stacks on mobile */
.yt.has-chat { max-width: 1240px; }
.yt-stage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: stretch; }
.yt-main { min-width: 0; }
.yt-chat {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 1px solid var(--rule-mid);
  border-radius: 12px; overflow: hidden;
}
.yt-chat-head {
  flex: 0 0 auto; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bone-dim);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.yt-chat-join { color: var(--amber); text-decoration: none; transition: color 0.2s var(--ease); }
.yt-chat-join:hover { color: var(--amber-glow); }
.yt-chat-frame { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; }
@media (max-width: 860px) {
  .yt-stage { grid-template-columns: 1fr; }
  .yt-chat { height: 440px; }
}
/* Broadcast deck — metal bezel + recessed screen wrapping the stream */
.live-deck { padding: 1.5rem; }
.live-deck-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0.3rem 0.9rem;
}
.live-deck-id { font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--bone); }
.live-deck-ch { color: var(--bone-dim); margin-left: 0.5rem; }
.live-screen {
  position: relative; z-index: 1;
  border-radius: 3px;
  background: #000;
  padding: 7px;
  border: 1px solid var(--metal-light);
  box-shadow: inset 0 4px 16px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(0,0,0,0.6);
}
.live-player { position: relative; padding-top: 56.25%; border-radius: 2px; overflow: hidden; background: #000; }
/* Off-air "no signal" screen */
.live-screen .live-noscreen {
  aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, #14110d 0%, #000 80%);
}
.live-noscreen-msg { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.6rem); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bone-dim); }
.live-noscreen-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--metal-light); margin-top: 0.6rem; }

.live-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
  padding: 0.4rem 0.7rem; border-radius: 3px;
}
.live-badge.on { color: var(--bg); background: var(--amber); animation: live-pulse 2s ease-in-out infinite; }
.live-badge.off { color: var(--bone-dim); border: 1px solid var(--metal-light); }
.live-badge .lb-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.2s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .live-badge .lb-dot { animation: none; } }
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber-glow) 0%, transparent); }
  50% { box-shadow: 0 0 14px 0 color-mix(in srgb, var(--amber-glow) 55%, transparent); }
}

.live-aside { text-align: center; margin-top: 1.6rem; }
.live-sub { font-family: var(--body); color: var(--bone-dim); max-width: 46ch; margin: 0 auto 1.4rem; }
.live-links { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .live-badge.on { animation: none; } }
@media (max-width: 760px) { .live-stage { padding: 1.25rem 1.25rem 3rem; } .live-deck { padding: 1rem; } }

/* Sitewide "On air" badge — injected by JS into the sticky .topbar (so it
   stays visible on scroll), only while live. Slim outlined pill anchored to
   the header's bottom-right, clear of the status-bar edge labels. */
.onair-badge {
  position: absolute; right: 20px; bottom: 15px; z-index: 300;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  color: var(--amber);
  background: rgba(12, 10, 8, 0.6);
  border: 1px solid var(--amber);
  padding: 0.26rem 0.55rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.onair-badge[hidden] { display: none; }
.onair-badge:hover { color: var(--amber-glow); border-color: var(--amber-glow); background: rgba(12, 10, 8, 0.85); }
.onair-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 6px var(--amber);
  animation: blink 1.4s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) { .onair-dot { animation: none; } }

/* Homepage "Live now" hero CTA — only shown (via JS) while a stream is live.
   .hw-btn sets display:inline-flex, which would override the bare [hidden]
   attribute, so this higher-specificity rule keeps it hidden until JS shows it. */
.live-cta[hidden] { display: none; }
.live-cta { border-color: var(--amber); animation: live-pulse 2s ease-in-out infinite; }
.live-cta .live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 8px var(--amber);
}
@media (prefers-reduced-motion: reduce) { .live-cta { animation: none; } }

/* ============ 04 / SHOP - CASSETTE DECK ============ */
.shop { background: var(--bg); }

.shop-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 5rem;
  align-items: end;            /* laptop + button share one bottom line */
}

.cassette { padding: 1.5rem; position: relative; }

.cassette-window {
  position: relative;
  height: 400px;
  background-size: cover;
  background-position: center;
  filter: contrast(1.15) saturate(0.85);
  border: 1px solid var(--metal-light);
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.7);
}

.cassette-window .tag {
  position: absolute;
  bottom: 1rem; left: 1rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--amber);
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--amber);
  background: rgba(12, 10, 8, 0.7);
  backdrop-filter: blur(8px);
}

/* merch art is a real link to the shop (no fake transport) */
.shop-media { display: block; text-decoration: none; transition: transform 0.3s var(--ease); }
.shop-media:hover { transform: translateY(-3px); }
.shop-media:hover .cassette-window { filter: contrast(1.2) saturate(1); }
.shop-media-cta {
  position: absolute;
  top: 1rem; right: 1rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--amber);
  background: rgba(12, 10, 8, 0.7);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.shop-media:hover .shop-media-cta { opacity: 1; transform: translateY(0); }

.shop-content { display: flex; flex-direction: column; justify-content: flex-end; }
.shop-content .hw-btn { align-self: flex-start; }

.shop-headline {
  font-family: var(--display);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

.shop-headline em { font-style: normal; color: var(--amber); }

.shop-desc {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--bone-dim);
  margin-bottom: 3rem;
  max-width: 460px;
}

/* merch photos crossfading on a laptop screen (8 real product shots) */
.merch-tv {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  align-self: end;
  aspect-ratio: 525 / 350;     /* matches img/laptop-frame.webp */
  text-decoration: none;
}
.merch-tv-img {                /* the laptop bezel/keyboard, on top — screen is a transparent hole */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}
.merch-screen {               /* sits exactly in the laptop's screen opening, photos show through */
  position: absolute;
  left: 13.14%;
  top: 4.57%;
  width: 73.71%;
  height: 66.86%;
  overflow: hidden;
  z-index: 1;
  background: #000;
}
.merch-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: contrast(1.08) saturate(0.95);
  animation: merchCycle 24s infinite;
}
.merch-slide:nth-child(1) { animation-delay: 0s; }
.merch-slide:nth-child(2) { animation-delay: 3s; }
.merch-slide:nth-child(3) { animation-delay: 6s; }
.merch-slide:nth-child(4) { animation-delay: 9s; }
.merch-slide:nth-child(5) { animation-delay: 12s; }
.merch-slide:nth-child(6) { animation-delay: 15s; }
.merch-slide:nth-child(7) { animation-delay: 18s; }
.merch-slide:nth-child(8) { animation-delay: 21s; }
@keyframes merchCycle {
  0% { opacity: 0; }
  1.5% { opacity: 1; }
  12.5% { opacity: 1; }
  14% { opacity: 0; }
  100% { opacity: 0; }
}
/* keep the hover CTA above the laptop frame */
.merch-tv .shop-media-cta { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .merch-slide { animation: none; }
  .merch-slide:nth-child(1) { opacity: 1; }
}

/* ============ EMBED BLOCKS (music page) ============ */
.embed-block { max-width: var(--maxw-read); margin: 0 auto; }

.embed-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.embed-head h3 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.embed-head h3 em { font-style: normal; color: var(--amber); }

.embed-head .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* inner width lands at ~660px to match the Apple playlist card */
.embed-frame { padding: 0; max-width: 660px; }
.embed-frame iframe { display: block; border: 0; width: 100%; }

/* compact 3-up player row — Apple / Bandcamp / SoundCloud side by side,
   matching the label's existing site instead of full-width stacked players */
.player-row {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.player-col { display: flex; flex-direction: column; min-width: 0; }
.player-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.player-head .p-name { color: var(--bone); }
.player-head .p-idx { color: var(--amber); }
.player-col iframe {
  width: 100%;
  border: 0;
  display: block;
  border-radius: 4px;
  background: var(--surface);
}
.player-col .p-link {
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 0.25s var(--ease);
}
.player-col .p-link:hover { color: var(--amber); }

@media (max-width: 900px) {
  .player-row { grid-template-columns: 1fr; max-width: 660px; gap: 2.5rem; }
}

/* bandcamp — stacked, scrollable web-player (from Embeds/latest bandcamp) */
.jta-tracks {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
  height: 450px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
}

.jta-tracks::-webkit-scrollbar { width: 8px; }
.jta-tracks::-webkit-scrollbar-track { background: rgba(230, 220, 196, 0.05); }
.jta-tracks::-webkit-scrollbar-thumb { background: rgba(230, 220, 196, 0.2); border-radius: 4px; }
.jta-tracks::-webkit-scrollbar-thumb:hover { background: rgba(230, 220, 196, 0.35); }

.jta-track-row {
  display: flex;
  align-items: center;
  padding: 3px 12px;
  border-bottom: 1px solid var(--rule);
}

.jta-track-row:last-child { border-bottom: none; }
.jta-track-row iframe { border: 0; width: 100%; height: 42px; display: block; }

/* ============ THE LATEST (rotating promo feed) ============ */
.latest { background: var(--bg); }

.latest-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

/* The square promo video sets the tile height; the news tile stretches to
   match, so both boxes are identical. */
.latest-card {
  background: var(--surface);
  border: 1px solid var(--rule-mid);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Promo video carousel — square (1:1) clips, cycled, each with a Bandcamp CTA. */
.latest-card.video { overflow: hidden; }
.latest-carousel { position: relative; flex: 0 0 auto; }
.latest-slide { display: none; position: relative; }
.latest-slide.is-active { display: block; }
.latest-video {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #000;
}
.latest-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 50px; height: 50px;
  padding: 0;
  border: 1px solid var(--metal-light);
  border-radius: 50%;
  cursor: pointer;
  background: rgba(12, 10, 8, 0.6);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.latest-nav[hidden] { display: none; }
.latest-nav.prev { left: 0.55rem; }
.latest-nav.next { right: 0.55rem; }
.latest-nav::before {                 /* crisp CSS chevron */
  content: "";
  width: 13px; height: 13px;
  border-style: solid;
  border-color: currentColor;
  border-width: 3px 3px 0 0;
}
.latest-nav.prev::before { transform: rotate(-135deg); margin-left: 5px; }
.latest-nav.next::before { transform: rotate(45deg);  margin-right: 5px; }
.latest-nav:hover { background: rgba(12, 10, 8, 0.85); border-color: var(--amber); color: var(--amber-glow); }
.latest-nav:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.latest-video-cta {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bg);
  background: var(--amber);
  padding: 0.45rem 0.65rem;
  border-radius: 3px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.latest-video-cta:hover { background: var(--amber-glow); transform: translateY(-1px); }
.latest-card.scroll { overflow-y: auto; }
.latest-card.scroll::-webkit-scrollbar { width: 8px; }
.latest-card.scroll::-webkit-scrollbar-thumb { background: rgba(230,220,196,0.2); border-radius: 4px; }

.latest-card iframe { width: 100%; border: 0; display: block; flex: 1 1 auto; min-height: 0; }
.latest-card .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; }

/* News digest variant — truncated mirror of news.html */
.latest-card.news { overflow-y: auto; }
.latest-card.news::-webkit-scrollbar { width: 8px; }
.latest-card.news::-webkit-scrollbar-thumb { background: rgba(230,220,196,0.2); border-radius: 4px; }
.latest-news-item { display: block; padding: 1.15rem 0.95rem; border-bottom: 1px solid var(--rule); text-decoration: none; transition: background 0.2s var(--ease); }
.latest-news-item:hover { background: var(--bg-2); }
.lni-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 0.45rem; }
.lni-meta .lni-date { color: var(--amber); }
.lni-title { display: block; font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; line-height: 1.08; letter-spacing: -0.01em; color: var(--bone); }
.lni-title em { font-style: normal; color: var(--amber); }
.latest-news-more { display: block; padding: 1rem 0.95rem; font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); text-decoration: none; }
.latest-news-more:hover { text-decoration: underline; }

.latest-card .latest-tag {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

/* Featured mixes — full DJ sets that take over the now-playing player on click */
.featured-mixes { max-width: 1000px; margin: 1.5rem auto 0; }
.fm-tag {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  margin-bottom: 0.85rem;
}
.fm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.fm-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--rule-mid);
  border-radius: 4px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.fm-card:hover { border-color: var(--amber); background: var(--bg-2); }
.fm-trigger {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.fm-trigger:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.fm-art { position: relative; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 3px; overflow: hidden; }
.fm-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.35); transition: filter 0.2s var(--ease); }
.fm-trigger:hover .fm-art img,
.fm-card.playing .fm-art img { filter: grayscale(0); }
.fm-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 10, 8, 0.45);
  transition: background 0.2s var(--ease);
}
.fm-play::before {                    /* play triangle */
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--bone);
  margin-left: 3px;
  transition: border-color 0.2s var(--ease);
}
.fm-trigger:hover .fm-play { background: rgba(12, 10, 8, 0.25); }
.fm-trigger:hover .fm-play::before { border-left-color: var(--amber-glow); }
/* Playing state — amber frame + pause bars */
.fm-card.playing { border-color: var(--amber); }
.fm-card.playing .fm-play::before {
  border: 0;
  width: 14px; height: 16px;
  margin: 0;
  background:
    linear-gradient(var(--amber-glow), var(--amber-glow)) left / 4px 100% no-repeat,
    linear-gradient(var(--amber-glow), var(--amber-glow)) right / 4px 100% no-repeat;
}
.fm-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.fm-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm-title { font-family: var(--display); font-size: 1.5rem; line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em; color: var(--bone); }
.fm-title em { font-style: normal; color: var(--amber); }
.fm-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); }

/* Animated download button — amber fill sweep + bobbing arrow, gentle idle pulse */
.fm-dl {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--amber);
  text-decoration: none;
  border: 1px solid var(--amber);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  animation: fm-dl-pulse 2.8s ease-in-out infinite;
  transition: color 0.2s var(--ease);
}
.fm-dl::before {                       /* amber fill sweeps up on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: translateY(101%);
  transition: transform 0.28s var(--ease);
  z-index: 0;
}
.fm-dl:hover, .fm-dl:focus-visible { color: var(--bg); outline: none; }
.fm-dl:hover::before, .fm-dl:focus-visible::before { transform: translateY(0); }
.fm-dl:focus-visible { box-shadow: 0 0 0 2px var(--amber-glow); }
.fm-dl-text { position: relative; z-index: 1; }
.fm-dl-icon {                          /* down arrow built from a shaft + chevron */
  position: relative;
  z-index: 1;
  width: 10px;
  height: 13px;
  display: inline-block;
}
.fm-dl-icon::before {                  /* shaft */
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 2px; height: 8px;
  background: currentColor;
  transform: translateX(-50%);
}
.fm-dl-icon::after {                   /* chevron head */
  content: "";
  position: absolute;
  left: 50%; top: 4px;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, 0) rotate(45deg);
}
.fm-dl:hover .fm-dl-icon, .fm-dl:focus-visible .fm-dl-icon { animation: fm-dl-bob 0.65s var(--ease) infinite; }
@keyframes fm-dl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes fm-dl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber-glow) 0%, transparent); }
  50% { box-shadow: 0 0 11px 0 color-mix(in srgb, var(--amber-glow) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .fm-dl, .fm-dl:hover .fm-dl-icon, .fm-dl:focus-visible .fm-dl-icon { animation: none; }
}

/* SoundCloud button — same pill as download (amber fill on hover), icon only,
   no idle pulse. Sits to the left of the download button. */
.fm-sc {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.6rem;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.fm-sc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: translateY(101%);
  transition: transform 0.28s var(--ease);
  z-index: 0;
}
.fm-sc:hover, .fm-sc:focus-visible { color: var(--bg); outline: none; }
.fm-sc:hover::before, .fm-sc:focus-visible::before { transform: translateY(0); }
.fm-sc:focus-visible { box-shadow: 0 0 0 2px var(--amber-glow); }
.fm-sc svg { position: relative; z-index: 1; width: 20px; height: 20px; display: block; }

@media (max-width: 760px) {
  .latest-grid { grid-template-columns: 1fr; max-width: 460px; }
  .feed { columns: 1; max-width: 460px; }
  .featured-mixes { max-width: 460px; }
  .fm-grid { grid-template-columns: 1fr; }
}

/* ============ FORMS — HARDWARE PANEL ============ */
.form-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem;
}

.form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--metal-light);
}

.form-head .name {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-head .model {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--bone-dim);
  text-transform: uppercase;
}

.field { margin-bottom: 1.5rem; }

.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.field input,
.field textarea {
  width: 100%;
  background: linear-gradient(180deg, #050300 0%, #0a0806 100%);
  border: 1px solid var(--metal-light);
  border-radius: 3px;
  padding: 0.9rem 1rem;
  font-family: var(--led);
  font-size: 1.3rem;
  color: var(--amber-glow);
  text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 50%, transparent);
  letter-spacing: 0.04em;
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.8);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field textarea { min-height: 140px; resize: vertical; line-height: 1.4; }

.field input::placeholder,
.field textarea::placeholder { color: var(--amber-dim); opacity: 0.6; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.8), 0 0 0 1px var(--amber-dim), 0 0 14px color-mix(in srgb, var(--amber) 25%, transparent);
}

.form-submit {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

button.hw-btn { font: inherit; font-family: var(--mono); }

.form-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.form-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 1.25rem;
  min-height: 1em;
}

.form-status.ok { color: var(--green); }
.form-status.err { color: var(--amber-glow); }

/* Honeypot — off-screen, never shown to humans; bots that fill it are dropped. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ============ CONTACT / DIRECT INFO ============ */
.info-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.info-card { padding: 2rem; }

.info-card h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.25rem;
  font-weight: 700;
}

.info-card ul { list-style: none; }
.info-card li { margin-bottom: 0.6rem; }

.info-card a, .info-card span {
  color: var(--bone);
  text-decoration: none;
  font-family: var(--body);
  font-size: 15px;
  transition: color 0.25s var(--ease);
}

.info-card a:hover { color: var(--amber); }

/* Social icon row — brand glyphs, theme-coloured, amber + lift on hover */
.social-icons { display: flex; align-items: center; gap: 1.1rem; margin-top: 0.5rem; }
.social-icons a {
  display: inline-flex;
  color: var(--bone);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.social-icons a:hover { color: var(--amber); transform: translateY(-2px); }
.social-icons a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.social-icons svg { width: 26px; height: 26px; display: block; }
/* Hero placement (contact page) — sub line + icon row as one left-placed block,
   with the icons centered under the "Demos · Bookings · Classes" text. */
.hero-contact-foot { display: inline-flex; flex-direction: column; align-items: center; }
.hero-socials { margin-top: 1.5rem; gap: 1.3rem; }
.hero-socials svg { width: 30px; height: 30px; }

/* ============ CTA STRIP ============ */
.cta-strip {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2.5rem;
}

.cta-strip .cta-text {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.cta-strip .cta-text em { font-style: normal; color: var(--amber); }

/* ============ FOOTER ============ */
footer {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  padding: 6rem 2rem 2rem;
}

.footer-cols {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rule);
  margin-bottom: 4rem;
}

.footer-brand img { height: 38px; margin-bottom: 1.5rem; filter: brightness(0) invert(0.92) sepia(0.1); }

.footer-brand p {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--bone-dim);
  text-transform: uppercase;
  max-width: 360px;
}

.footer-col h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.6rem; }

.footer-col a {
  color: var(--bone);
  text-decoration: none;
  font-family: var(--body);
  font-size: 14px;
  transition: color 0.25s var(--ease);
}

.footer-col a:hover { color: var(--amber); }

/* ============ VINYL (shop.html — dynamic from Elastic Stage) ============ */
/* Match the page's centered content column so the grid lines up with its
   section header and the Merch block below (instead of spanning full width). */
/* Same 900px centred box as the merch (.embed-block) below, so the vinyl cards
   match the Shopify merch card size and left edge. */
#vinyl-root { max-width: var(--maxw-read); margin: 0 auto; }
.vinyl-empty { font-family: var(--body); color: var(--bone-dim); padding: 1rem 0 0.5rem; }
.vinyl-empty a { color: var(--amber); }
/* Same 4-up grid + card width as the Shopify merch section below, so the two
   sections read as one consistent shop (merch products are max-width calc(25% - 20px)
   with 20px gutters, left-aligned, inside the same 1200px column). */
/* Match the merch grid exactly (measured: fixed 240px cards, 20px gap, 3-up,
   left-aligned in the 900px box). auto-fill keeps the same fixed card width and
   reduces columns as the container narrows, like the Shopify grid does. */
.vinyl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 240px);
  justify-content: start;
  gap: 20px;
}
@media (max-width: 600px) { .vinyl-grid { grid-template-columns: 1fr; } }
.vinyl-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.vinyl-card:hover { border-color: var(--amber); transform: translateY(-2px); }
.vinyl-art {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--bg-2); border-bottom: 1px solid var(--rule);
}
.vinyl-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s var(--ease); }
.vinyl-card:hover .vinyl-art img { transform: scale(1.04); }
.vinyl-noart { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 2rem; color: var(--bone-faint); }
.vinyl-badge {
  position: absolute; top: 0.6rem; left: 0.6rem;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: var(--bg); background: var(--amber); border-radius: 3px; padding: 0.2rem 0.45rem;
}
.vinyl-info { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.vinyl-artist { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); }
.vinyl-title { font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: -0.01em; color: var(--bone); margin: 0; line-height: 1.05; }
.vinyl-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone-dim); }
.vinyl-dot { color: var(--bone-faint); }
.vinyl-buy { align-self: flex-start; margin-top: 0.6rem; }

.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .platform { grid-template-columns: 52px 1fr auto auto; gap: 1.25rem; }
  .platform-desc { display: none; }
  .shop-wrap { grid-template-columns: 1fr; }
  .section-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .section-title { justify-self: start; text-align: left; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  nav { padding: 1rem; justify-content: space-between; }
  nav > a { position: static; transform: none; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 10px; letter-spacing: 0.14em; }
  .logo { height: 26px; }
  .statusbar { padding: 0.85rem 1rem; font-size: 10px; letter-spacing: 0.12em; gap: 0.5rem; }
  .statusbar .edge { display: none; }
  .hero { padding: 2rem 1.25rem 3rem; }
  section { padding: 4rem 1.25rem; }
  .page-hero { padding: 3rem 1.25rem 2.5rem; }
  .track { grid-template-columns: 40px 1fr; gap: 0.75rem; }
  .track-embed { grid-column: 1 / -1; margin-top: 0.5rem; }
  .track-embed iframe { width: 100%; max-width: 260px; }
  .footer-cols { grid-template-columns: 1fr; }
  .platform { grid-template-columns: 50px 1fr auto; }
  .platform-vu { display: none; }
  .platforms-list .platform { padding: 1.5rem 0; }
  .form-panel { padding: 1.5rem; }
  .cta-strip { padding: 1.5rem; }
}