/* ==========================================================================
   Underground Existence — site.css
   Single stylesheet for the redesigned public site.
   Design source: design-refs/redesign-desktop.png / redesign-mobile.png
   ========================================================================== */

/* ---- Fonts (self-hosted, root-relative — Arweave manifest requirement) ---- */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-v20-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/special-elite-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Gately';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gately-v1-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Rationale';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/rationale-v1-regular.woff2') format('woff2');
}

/* ---- Tokens ---- */
:root {
  --bg-base: #0a0606;
  --bg-panel: #140d0d;
  --bg-card: #150e0e;
  --bg-elevated: #1c1212;
  --accent: #c1121f;
  --accent-bright: #e01e2b;
  --accent-dim: #7a0e16;
  --paper: #e8e0d0;
  --paper-ink: #2a231c;
  --text-primary: #f2ece4;
  --text-secondary: #b7aaa3;
  --text-muted: #8a7d77;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-red: rgba(193, 18, 31, 0.45);
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-body: 'Rationale', Arial, sans-serif;
  --font-display: 'Special Elite', 'Courier New', serif;
  --font-script: 'Gately', cursive;
  --radius-card: 12px;
  --radius-frame: 16px;
  --player-bar-height: 84px;
  --page-max: 1560px;
  --page-pad: clamp(16px, 4vw, 56px);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* rotated collage props (receipt ticket, torn corners) paint past the page
   edge on iOS and let the page pan sideways — clip, never scroll, on x.
   `clip` (with `hidden` fallback) avoids creating a scroll container, so
   position: sticky keeps working */
html, body { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: calc(var(--player-bar-height) + 24px);
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}
/* keyboard focus — accent ring, mouse clicks unaffected */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 2px;
}
/* film grain over everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button {
  font-family: var(--font-body);
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.page-shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.icon-svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.12em; }

/* ==========================================================================
   Header / nav
   ========================================================================== */
#site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(10, 6, 6, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline-red);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
#site-header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}
#site-wordmark { display: inline-flex; align-items: center; flex: none; min-width: 0; }
#site-wordmark-logo { height: clamp(32px, 3vw, 44px); width: auto; display: block; }
#primary-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); }
.primary-nav-link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 6px 2px;
  position: relative;
  transition: color 0.2s ease;
}
.primary-nav-link:hover { color: var(--text-primary); }
.primary-nav-link.is-active { color: var(--accent-bright); }
.primary-nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out-expo);
}
.primary-nav-link:hover::after { transform: scaleX(1); }
.primary-nav-link.is-active::after { transform: scaleX(1); }
#nav-desktop-actions { display: flex; align-items: center; gap: 20px; }
#nav-search-toggle, #mobile-search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
#nav-search-toggle:hover, #mobile-search-toggle:hover { color: var(--text-primary); }
#nav-search-divider { width: 1px; height: 22px; background: var(--hairline); }
#mobile-nav-actions { display: none; align-items: center; gap: 18px; }
#mobile-menu-toggle { font-size: 20px; color: var(--text-primary); display: inline-flex; }

/* Mobile slide-down menu */
#mobile-menu {
  display: none;
  border-top: 1px solid var(--hairline);
  background: var(--bg-base);
  padding: 12px var(--page-pad) 20px;
}
#mobile-menu.is-open { display: block; }
.mobile-menu-link {
  display: block;
  padding: 13px 2px;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--hairline);
}
.mobile-menu-link.is-active { color: var(--accent-bright); }

@media (max-width: 1020px) {
  #primary-nav, #nav-desktop-actions { display: none; }
  #mobile-nav-actions { display: flex; }
  #site-header-inner { height: 60px; }
}
@media (min-width: 1021px) {
  #mobile-menu { display: none !important; }
}
@media (max-width: 700px) {
  /* logo scales up for mobile prominence; capped well short of the
     old barcode-mark's fill-to-edge size, which this chunkier 4.5:1
     mark made look oversized at the same width */
  #site-wordmark-logo { height: clamp(34px, 9vw, 48px); }
  #site-header-inner { height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
}

/* ==========================================================================
   Eyebrows / section headings
   ========================================================================== */
.section-eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-bright);
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent);
}
.section-eyebrow--plain {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}
.section-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.section-view-all {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-bright);
  white-space: nowrap;
}
.section-view-all:hover { color: var(--text-primary); }

/* ==========================================================================
   Featured hero
   ========================================================================== */
#featured-mix-hero {
  display: grid;
  grid-template-columns: minmax(340px, 560px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px) 0 clamp(32px, 4vw, 60px);
  position: relative;
}

/* hero image frame */
#hero-collage-frame {
  position: relative;
  border-radius: var(--radius-frame);
  border: 1px solid var(--hairline-red);
  box-shadow: 0 0 0 1px rgba(193, 18, 31, 0.15), 0 0 44px rgba(193, 18, 31, 0.16), 0 24px 60px rgba(0, 0, 0, 0.55);
}
#hero-collage-frame .hero-image-clip {
  border-radius: var(--radius-frame);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: var(--bg-panel);
}
#hero-collage-frame .hero-image-clip img,
#hero-collage-frame .hero-image-clip .cover-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.06) saturate(1.05);
}
#hero-collage-frame .hero-image-clip::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-frame);
  background:
    linear-gradient(160deg, rgba(193, 18, 31, 0.14), transparent 45%),
    linear-gradient(0deg, rgba(10, 6, 6, 0.35), transparent 40%);
  pointer-events: none;
}
#featured-mix-content { position: relative; min-width: 0; }
#featured-mix-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.06;
  color: var(--text-primary);
  margin: 18px 0 2px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#featured-artist-signature {
  font-family: var(--font-script);
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1.15;
  color: var(--accent-bright);
  display: inline-block;
  transform: rotate(-2deg);
  margin: 2px 0 10px;
}
#featured-artist-signature:hover { color: var(--text-primary); }
#featured-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 26px;
}
#featured-meta-row .meta-dot { color: var(--accent); }
.meta-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.meta-chip .icon-svg { color: var(--text-muted); width: 15px; height: 15px; }

#featured-player-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}
#featured-waveform { flex: 1; min-width: 0; }
@media (max-width: 540px) {
  /* waveform was squeezed to ~180px next to the play/download buttons on
     phones — give it its own full-width row above the controls instead */
  #featured-player-row { flex-wrap: wrap; justify-content: center; row-gap: 18px; }
  #featured-waveform { order: -1; flex-basis: 100%; }
}

/* circular play buttons */
.play-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--accent-bright);
  color: var(--accent-bright);
  background: rgba(193, 18, 31, 0.08);
  transition: background 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo);
  flex: none;
}
.play-circle:hover {
  background: var(--accent);
  color: #fff;
}
.play-circle--lg { width: 76px; height: 76px; }
.play-circle--lg .icon-svg { width: 26px; height: 26px; margin-left: 3px; }
.play-circle--lg .icon-pause { margin-left: 0; }
.play-circle--sm { width: 42px; height: 42px; border-width: 1.5px; }
.play-circle--sm .icon-svg { width: 15px; height: 15px; margin-left: 2px; }
.play-circle--sm .icon-pause { margin-left: 0; }
.play-circle .icon-pause { display: none; }
.play-circle.is-playing .icon-play { display: none; }
.play-circle.is-playing .icon-pause { display: block; }

/* waveform — interactive scrubber (click/drag seeks; mixes are served
   from a Range-capable ar.io gateway, see MIX_AUDIO_SCRUBBING.md) */
.waveform-track { position: relative; height: 64px; cursor: pointer; touch-action: none; }
.waveform-track canvas { width: 100%; height: 100%; display: block; }
.waveform-progress-line {
  position: relative;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  margin-top: 12px;
  cursor: pointer;
  touch-action: none;
}
/* generous invisible hit area for the thin progress line */
.waveform-progress-line::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -10px; bottom: -10px;
}
.waveform-progress-line .progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--accent-bright);
}
.waveform-progress-line .progress-dot {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-bright);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(224, 30, 43, 0.7);
}
.waveform-time-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.06em;
}
.waveform-time-row .time-current { color: var(--accent-bright); }
.waveform-time-row .time-total { color: var(--text-muted); }

@media (max-width: 1020px) {
  #featured-mix-hero { grid-template-columns: 1fr; }
  #featured-mix-content { text-align: center; }
  #featured-meta-row { justify-content: center; }
}

/* ==========================================================================
   Mix cards (Latest Mixes / grids)
   ========================================================================== */
#latest-mixes-section { padding-bottom: clamp(12px, 2vw, 24px); }
.mix-card-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
@media (max-width: 1500px) { .mix-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1020px) { .mix-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .mix-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .mix-card-grid { grid-template-columns: 1fr; } }

.mix-card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.mix-card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-red);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(193, 18, 31, 0.12);
}
.mix-card-cover {
  position: relative;
  aspect-ratio: 1 / 0.86;
  background: var(--bg-panel);
  overflow: hidden;
}
.mix-card-cover img, .mix-card-cover .cover-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.02);
  transition: transform 0.6s var(--ease-out-expo);
}
.mix-card:hover .mix-card-cover img { transform: scale(1.04); }
.mix-card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 6, 6, 0.32), transparent 38%, rgba(10, 6, 6, 0.25));
  pointer-events: none;
}
.mix-card-number {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.mix-card-body { padding: 14px 14px 16px; }
.mix-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.mix-card-title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mix-card-title a:hover { color: var(--accent-bright); }
.mix-card-artist {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-bright);
  margin-top: 4px;
}
.mix-card-artist:hover { color: var(--text-primary); }
.mix-card-genres {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
}
.mix-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-top: 10px;
}
.mix-card .play-circle { margin-top: 2px; }
.mix-card.is-unplayable .play-circle { opacity: 0.3; pointer-events: none; }

/* download buttons (blob download of the mix audio) */
.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--hairline);
  color: var(--text-muted);
  flex: none;
  transition: color 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo), background 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
.download-btn:active { transform: scale(0.94); transition-duration: 0.1s; }
.download-btn .icon-svg { width: 16px; height: 16px; }
.download-btn:hover {
  color: #fff;
  border-color: var(--accent-bright);
  background: rgba(193, 18, 31, 0.14);
  transform: scale(1.04);
}
.download-btn--sm { width: 34px; height: 34px; }
.download-btn--sm .icon-svg { width: 14px; height: 14px; }
.download-btn.is-loading {
  pointer-events: none;
  color: var(--accent-bright);
  border-color: var(--accent-bright);
  animation: dl-pulse 1s ease-in-out infinite;
}
@keyframes dl-pulse { 50% { opacity: 0.35; } }
.mix-card-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.catalog-row-actions { display: flex; align-items: center; gap: 10px; }
#featured-download-button { width: 46px; height: 46px; }

/* placeholder cover when an artist/mix has no image — always shown whole,
   never cropped, regardless of the container's own object-fit: cover rule */
.cover-fallback {
  display: block;
  object-fit: contain !important;
  background: var(--bg-panel);
  padding: 18%;
  filter: none !important;
}

/* ==========================================================================
   Catalog rows (Archive page / artist pages)
   ========================================================================== */
.catalog-list { display: flex; flex-direction: column; }
.catalog-row {
  display: grid;
  grid-template-columns: 58px 64px minmax(0, 1.7fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  padding: 12px 6px;
  border-bottom: 1px solid var(--hairline);
  transition: background 0.2s ease;
}
.catalog-row:hover { background: rgba(255, 255, 255, 0.025); }
.catalog-row-number {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
}
.catalog-row-cover {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-panel);
  flex: none;
}
.catalog-row-cover img, .catalog-row-cover .cover-fallback { width: 100%; height: 100%; object-fit: cover; font-size: 20px; }
.catalog-row-main { min-width: 0; }
.catalog-row-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.catalog-row-title a:hover { color: var(--accent-bright); }
.catalog-row-artist { font-size: 13.5px; color: var(--accent-bright); margin-top: 2px; display: inline-block; }
.catalog-row-artist:hover { color: var(--text-primary); }
.catalog-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.catalog-row.is-unplayable .play-circle { opacity: 0.3; pointer-events: none; }
.unplayable-note {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 2px 6px;
}
@media (max-width: 700px) {
  /* narrow number column + stacked action buttons free ~80px for the
     title column so mix titles stop breaking mid-word */
  .catalog-row { grid-template-columns: 28px 52px minmax(0, 1fr) auto; gap: 10px 12px; }
  .catalog-row-number { font-size: 13px; }
  .catalog-row-cover { width: 52px; height: 52px; }
  .catalog-row-meta-cell { display: none; }
  .catalog-row-meta--inline { margin-top: 4px; }
  .catalog-row-actions { flex-direction: column; gap: 8px; }
}
@media (min-width: 701px) {
  .catalog-row-meta--inline { display: none; }
}

/* ==========================================================================
   Residents grid
   ========================================================================== */
#residents-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}
@media (max-width: 1400px) { #residents-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1020px) { #residents-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { #residents-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.resident-card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.resident-card:hover {
  transform: translateY(-4px);
  border-color: var(--hairline-red);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(193, 18, 31, 0.12);
}
.resident-card-photo {
  aspect-ratio: 1 / 1.05;
  background: var(--bg-panel);
  position: relative;
  overflow: hidden;
}
.resident-card-photo img, .resident-card-photo .cover-fallback {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(1.02);
  transition: transform 0.6s var(--ease-out-expo);
}
.resident-card:hover .resident-card-photo img { transform: scale(1.04); }
.resident-card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 6, 6, 0.55));
  pointer-events: none;
}
.resident-card-body { padding: 14px 14px 16px; }
.resident-card-name { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
.resident-card-sub {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.resident-card-sub .resident-genre { color: var(--accent-bright); }

/* ==========================================================================
   Page headers (Residents / Archive / About / artist detail)
   ========================================================================== */
.page-title-block { padding: clamp(28px, 4vw, 52px) 0 clamp(22px, 3vw, 38px); }
.page-title-block h1 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  margin-top: 14px;
}
.page-title-sub { color: var(--text-secondary); margin-top: 10px; max-width: 640px; font-size: 14.5px; }

/* Artist detail header */
#artist-detail-header {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 40px);
}
#artist-detail-portrait {
  position: relative;
  border-radius: var(--radius-frame);
  border: 1px solid var(--hairline-red);
  box-shadow: 0 0 34px rgba(193, 18, 31, 0.14), 0 20px 48px rgba(0, 0, 0, 0.5);
}
#artist-detail-portrait .hero-image-clip {
  position: relative;
  border-radius: var(--radius-frame);
  overflow: hidden;
  aspect-ratio: 1 / 1.05;
  background: var(--bg-panel);
}
#artist-detail-portrait img:not(#artist-detail-portrait-logo), #artist-detail-portrait .cover-fallback {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.06) saturate(1.05);
}
#artist-detail-portrait-logo {
  position: absolute;
  top: 8%;
  left: -4%;
  width: 108%;
  height: auto;
  transform: rotate(4deg);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  z-index: 2;
}
#artist-detail-name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.06;
  margin: 16px 0 4px;
}
#artist-detail-signature {
  font-family: var(--font-script);
  font-size: clamp(34px, 3.6vw, 50px);
  color: var(--accent-bright);
  display: inline-block;
  transform: rotate(-2deg);
  margin-bottom: 10px;
}
#artist-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
@media (max-width: 860px) {
  #artist-detail-header { grid-template-columns: 1fr; }
  #artist-detail-portrait { max-width: 420px; }
}

/* ==========================================================================
   About page
   ========================================================================== */
#about-content-panel {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) 0 64px;
}
#about-content-panel .about-lead {
  font-family: var(--font-body);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.35;
  margin: 22px 0 26px;
}
#about-content-panel p { color: var(--text-secondary); margin-bottom: 18px; font-size: 15.5px; line-height: 1.7; }
#about-content-panel strong { color: var(--text-primary); }
#about-receipt-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  margin: 30px 0;
  padding: 16px 20px;
  background: var(--paper);
  color: var(--paper-ink);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(0 8%, 3% 0, 8% 5%, 14% 0, 21% 7%, 29% 2%, 37% 7%, 46% 0, 54% 5%, 62% 0, 70% 7%, 78% 2%, 86% 7%, 93% 0, 100% 5%, 100% 92%, 96% 100%, 89% 95%, 81% 100%, 72% 93%, 63% 100%, 54% 95%, 45% 100%, 36% 93%, 28% 100%, 20% 95%, 12% 100%, 5% 93%, 0 100%);
}
#about-receipt-strip .receipt-strip-script { font-family: var(--font-script); font-size: 22px; text-transform: none; letter-spacing: 0; }
#about-contribute-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 13px 26px;
  border: 2px solid var(--accent-bright);
  border-radius: 999px;
  color: var(--accent-bright);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
#about-contribute-cta:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 24px rgba(224, 30, 43, 0.4);
}
#about-contribute-cta:active { transform: scale(0.97); }

#about-flyers-section { padding: 0 0 clamp(48px, 6vw, 80px); }
#about-flyers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: 20px;
}
.flyer-grid-item {
  width: 100%;
  aspect-ratio: 604 / 775;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
  background: var(--bg-panel);
  transition: transform 0.4s var(--ease-out-expo), border-color 0.4s var(--ease-out-expo);
}
.flyer-grid-item:hover { transform: translateY(-4px); border-color: var(--hairline-red); }

/* ==========================================================================
   Footer
   ========================================================================== */
#site-footer {
  border-top: 1px solid var(--hairline-red);
  margin-top: clamp(30px, 5vw, 64px);
  padding: 30px 0 40px;
}
#site-footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.footer-wordmark { width: clamp(130px, 40vw, 273px); height: auto; display: block; }
.footer-tagline {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer-links a {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.footer-links a:hover { color: var(--accent-bright); }
@media (max-width: 760px) {
  #site-footer { padding: 36px 0 44px; }
  #site-footer-inner { flex-direction: column; gap: 32px; }
  #footer-brand-block { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .footer-wordmark { width: 100%; }
  .footer-tagline { margin-top: 12px; }
  .footer-links { width: 100%; justify-content: center; gap: 12px 22px; }
}

/* ==========================================================================
   Persistent bottom player bar
   ========================================================================== */
#persistent-player-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  height: var(--player-bar-height);
  background: rgba(12, 7, 7, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline-red);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: grid;
  grid-template-columns: minmax(180px, 320px) auto minmax(200px, 1fr) auto auto;
  align-items: center;
  gap: clamp(12px, 2vw, 30px);
  padding: 0 var(--page-pad);
}
#player-bar-now-playing { display: flex; align-items: center; gap: 12px; min-width: 0; }
#player-bar-thumb {
  width: 52px; height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
  flex: none;
}
#player-bar-thumb img, #player-bar-thumb .cover-fallback { width: 100%; height: 100%; object-fit: cover; font-size: 16px; }
#player-bar-track-meta { min-width: 0; }
#player-bar-title {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#player-bar-artist {
  font-size: 13px;
  color: var(--accent-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#player-bar-transport { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); }
.transport-btn {
  color: var(--text-secondary);
  display: inline-flex;
  padding: 6px;
  transition: color 0.2s ease, transform 0.2s var(--ease-out-expo);
}
.transport-btn:hover { color: var(--text-primary); }
.transport-btn:active { transform: scale(0.9); transition-duration: 0.1s; }
.transport-btn .icon-svg { width: 17px; height: 17px; }
.transport-btn.is-on { color: var(--accent-bright); }
#player-bar-play { width: 46px; height: 46px; }
#player-bar-wave-wrap { display: flex; align-items: center; gap: 14px; min-width: 0; }
#player-bar-waveform { flex: 1; min-width: 0; height: 36px; position: relative; cursor: pointer; touch-action: none; }
#player-bar-waveform canvas { width: 100%; height: 100%; display: block; }
.player-bar-time { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; white-space: nowrap; }
.player-bar-time.time-current { color: var(--accent-bright); }
.player-bar-time.time-total { color: var(--text-muted); }
#player-bar-volume { display: flex; align-items: center; gap: 10px; }
#player-bar-volume .icon-svg { width: 18px; height: 18px; color: var(--text-secondary); }
#volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(70px, 8vw, 120px);
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}
#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-bright);
  cursor: pointer;
}
#volume-slider::-moz-range-thumb {
  width: 12px; height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--accent-bright);
  cursor: pointer;
}
#player-bar-menu-btn { color: var(--text-secondary); display: inline-flex; padding: 6px; }
#player-bar-menu-btn:hover { color: var(--text-primary); }
#persistent-player-bar.is-idle #player-bar-title { color: var(--text-muted); font-weight: 500; }

/* breathing live-dot while audio is playing */
#player-bar-title { position: relative; }
#persistent-player-bar.is-playing #player-bar-title::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent-bright);
  vertical-align: 1px;
  animation: live-dot-breathe 1.8s ease-in-out infinite;
}
@keyframes live-dot-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

@media (max-width: 900px) {
  #persistent-player-bar {
    /* columns: now-playing | play btn | waveform | volume | menu.
       Play button + icons are auto (never crushed); now-playing and
       waveform are the flexible columns and clamp/truncate — the old
       auto-sized wave column let the play button overflow onto it */
    grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr) auto auto;
    height: 68px;
    gap: 12px;
  }
  #player-bar-transport .transport-btn { display: none; }
  #player-bar-transport #player-bar-play { display: inline-flex; width: 42px; height: 42px; }
  #player-bar-wave-wrap .player-bar-time { display: none; }
  #player-bar-waveform { height: 30px; }
  #player-bar-volume #volume-slider { display: none; }
  #player-bar-thumb { width: 44px; height: 44px; }
  body { padding-bottom: 92px; }
}

/* ==========================================================================
   Search overlay
   ========================================================================== */
#search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(8, 5, 5, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  overflow-y: auto;
  padding: 10vh var(--page-pad) 15vh;
}
#search-overlay.is-open { display: block; }
#search-overlay-inner { max-width: 760px; margin: 0 auto; }
#search-overlay-close {
  position: absolute;
  top: 26px;
  right: var(--page-pad);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
#search-overlay-close:hover { color: var(--accent-bright); }
#search-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: clamp(20px, 3vw, 30px);
  padding: 12px 2px;
  outline: none;
  letter-spacing: 0.04em;
}
#search-input::placeholder { color: var(--text-muted); }
.search-results-heading {
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 30px 0 8px;
}
.search-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text-primary);
  font-size: 15.5px;
}
.search-result-row:hover { color: var(--accent-bright); }
.search-result-row .search-result-sub { color: var(--text-muted); font-size: 13px; }

/* ==========================================================================
   Motion (restrained) — GSAP adds .motion-ready; CSS handles fallback
   ========================================================================== */
.motion-item { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}