/* ============================================================
   Audio Habitat — Redesign proposal
   Direction: quiet, editorial, "liquid glass" material, one accent
   used sparingly, large confident type, generous negative space.
   ============================================================ */

:root {
  --ink: #17140f;
  --ink-soft: rgba(23,20,15,0.62);
  --ink-faint: rgba(23,20,15,0.4);
  --paper: #faf7f2;
  --paper-dim: #f2ede4;
  --line: rgba(23,20,15,0.09);
  --accent: #e0703f;
  --glass-bg: rgba(255,255,255,0.6);
  --glass-bg-dark: rgba(23,20,15,0.55);
  --glass-border: rgba(255,255,255,0.7);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: -apple-system, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: padding-bottom 0.3s ease;
}

/* Reserves space for the fixed mini-player so it never covers the
   footer links once a track has started playing. */
body.has-player { padding-bottom: 100px; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.section-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 8px;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Nav ---------- */
/* Always visible, pinned top-left; starts transparent over the hero photo
   (light text/logo badge) and gains a solid glass backing once scrolled. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 16px 0;
  color: #fff;
  transition: background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, padding 0.4s ease;
}

.nav.is-solid {
  padding: 12px 0;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav__brand img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: box-shadow 0.4s ease;
}

.nav.is-solid .nav__brand img { box-shadow: none; }

.nav__brand span {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: inherit;
}

.nav__right { display: flex; align-items: center; gap: 34px; }

.nav__links { display: flex; gap: 30px; }

.nav__links a {
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  opacity: 0.78;
  transition: opacity 0.2s ease;
}

.nav__links a:hover { opacity: 1; }

.nav__now { display: inline-flex; align-items: center; gap: 6px; }

.nav__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e0392f;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav__live-dot.is-live {
  opacity: 1;
  transform: scale(1);
  animation: navLivePulse 1.6s ease-in-out infinite;
}

@keyframes navLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,57,47,0.55); }
  50% { box-shadow: 0 0 0 5px rgba(224,57,47,0); }
}

/* ---------- Language toggle ---------- */
.lang-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(127,122,112,0.16);
}

.nav.is-solid .lang-toggle { background: var(--paper-dim); }

.lang-toggle button {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.lang-toggle button.is-active {
  opacity: 1;
  background: var(--accent);
  color: #fff;
}

/* ---------- Bilingual content (DE default, EN via html[lang]) ---------- */
[data-lang] { display: none; }
html[lang="de"] [data-lang="de"],
html[lang="en"] [data-lang="en"] { display: inline; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Separate layer from .hero__bg on purpose: this one carries the scroll
   parallax (JS-driven translateY), the inner img carries the Ken Burns
   drift — keeping them apart avoids the two transforms fighting. */
.hero__bg-wrap {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  filter: grayscale(0.55) contrast(1.05) brightness(0.72);
  transform: scale(1.06);
  transform-origin: 55% 45%;
  animation: heroBgDrift 46s ease-in-out infinite alternate;
}

/* Slow scale/pan + a hint of rotation — reads as an unsteady handheld
   camera rather than a mechanical zoom. Kept tiny on purpose. */
@keyframes heroBgDrift {
  0% { transform: scale(1.06) translate(0, 0) rotate(0deg); }
  50% { transform: scale(1.085) translate(-0.7%, -0.5%) rotate(0.25deg); }
  100% { transform: scale(1.115) translate(-1.4%, -0.8%) rotate(-0.2deg); }
}

/* Soft glow standing in for the sun in the photo — drifts slightly on */
/* scroll so the whole scene feels alive rather than a static cutout. */
.hero__sun {
  position: absolute;
  top: 44%;
  left: 73%;
  width: 26vw;
  height: 26vw;
  max-width: 320px;
  max-height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,222,176,0.5) 0%, rgba(255,205,150,0.16) 45%, rgba(255,205,150,0) 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

/* Two faint secondary glints along the sun's axis — a classic lens-flare
   chain, kept just barely visible. */
.hero__flare {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

.hero__flare--1 {
  top: 58%;
  left: 54%;
  width: 7vw;
  height: 7vw;
  max-width: 80px;
  max-height: 80px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,228,190,0.14) 0%, transparent 72%);
}

.hero__flare--2 {
  top: 67%;
  left: 40%;
  width: 3.4vw;
  height: 3.4vw;
  max-width: 40px;
  max-height: 40px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,215,175,0.12) 0%, transparent 72%);
}

/* Two soft drifting patches standing in for low fog over the crowd. */
.hero__fog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  height: 42%;
  background:
    radial-gradient(ellipse 55% 100% at 22% 60%, rgba(255,255,255,0.09), transparent 70%),
    radial-gradient(ellipse 45% 100% at 76% 55%, rgba(255,255,255,0.07), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  animation: heroFogDrift 55s ease-in-out infinite alternate;
}

@keyframes heroFogDrift {
  0% { transform: translateX(-2.5%); }
  100% { transform: translateX(2.5%); }
}

/* A handful of small motes drifting upward through the photo. */
.hero__dust {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.dust-mote {
  position: absolute;
  bottom: -4%;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  filter: blur(0.5px);
  opacity: 0;
  animation-name: dustFloat;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes dustFloat {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.32; }
  88% { opacity: 0.18; }
  100% { transform: translate(18px, -108vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg,
  .hero__fog { animation: none; }
  .hero__dust { display: none; }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.25) 40%, rgba(10,8,6,0.65) 100%);
}

/* Flows the hero photo into the page background instead of cutting hard. */
.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26vh;
  min-height: 160px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--paper) 92%);
  pointer-events: none;
}

/* Subtle "you can scroll" affordance — mobile only, fades once you scroll. */
.hero__scroll-hint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 0.4s ease;
}

.hero__scroll-hint svg { animation: scrollHintBounce 1.8s ease-in-out infinite; }

.hero__scroll-hint.is-hidden { opacity: 0; }

@keyframes scrollHintBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(5px); opacity: 1; }
}

@media (max-width: 640px) {
  .hero__scroll-hint { display: flex; }
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 0 24px;
}

.hero__eyebrow {
  margin: 0 0 20px;
  color: rgba(255,255,255,0.7);
}

.hero__eyebrow-main {
  display: block;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

.hero__eyebrow-sub {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Scroll-driven shrink lives on the wrapper; the pulse keyframes stay on
   the img itself so the two transforms don't fight each other. */
.hero__mark-wrap {
  width: min(760px, 82vw);
  margin: 0 auto 26px;
  will-change: transform;
}

.hero__mark {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.35));
  animation: heroMarkPulse 4.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes heroMarkPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 24px rgba(0,0,0,0.35)); }
  50% { transform: scale(1.025); filter: drop-shadow(0 8px 30px rgba(0,0,0,0.4)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mark { animation: none; }
}

.hero__line {
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 400;
  color: rgba(255,255,255,0.86);
  margin: 0 0 2px;
}

.hero__slogan {
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 650;
  letter-spacing: 0.03em;
  color: var(--accent);
  margin: 0 0 40px;
}

.hero__content .hero__cta {
  margin-top: clamp(90px, 16vh, 170px);
}

/* Short viewports (small phones, landscape) squeeze the whole content
   block toward the bottom of the hero photo, crowding the DJ. Shrink
   the block instead of just letting it spill into the photo. */
@media (max-height: 700px) {
  .hero__eyebrow { margin-bottom: 12px; }
  .hero__mark-wrap { width: min(480px, 62vw); margin-bottom: 14px; }
  .hero__line { margin-bottom: 2px; }
  .hero__slogan { margin-bottom: 22px; }
  .hero__content .hero__cta { margin-top: clamp(56px, 12vh, 110px); }
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s ease;
}

.hero__cta:hover {
  background: rgba(255,255,255,0.24);
  transform: translateY(-2px);
}

.hero__cta svg { flex-shrink: 0; }

.hero__cta--dark {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.hero__cta--dark:hover { background: #322c22; }

.hero__cta--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.hero__cta--ghost:hover {
  background: var(--paper-dim);
  border-color: var(--paper-dim);
  transform: translateY(-2px);
}

.hero__cta--ghost svg { color: var(--accent); }

/* ---------- Featured ---------- */
.featured { padding: 150px 0 120px; }

.featured__card {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 30px 70px -30px rgba(23,20,15,0.28);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
}

.featured__art {
  position: relative;
  aspect-ratio: 1 / 1;
}

.featured__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured__play {
  position: absolute;
  bottom: 24px;
  left: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  transition: transform 0.3s var(--ease), background 0.3s ease;
}

.featured__play:hover { transform: scale(1.06); background: #fff; }
.featured__play svg { fill: currentColor; }
.featured__play.is-playing .icon-play { display: none; }
.featured__play:not(.is-playing) .icon-pause { display: none; }
.featured__play.is-playing { animation: featured-play-spin 3.4s linear infinite; }
.featured__play.is-playing:hover { transform: none; }

@keyframes featured-play-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.featured__body {
  padding: 52px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured__kicker {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.featured__title {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.featured__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 46ch;
}

.featured__tracks { display: flex; flex-direction: column; }

.featured__tracks li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.featured__tracks li:first-child { border-top: none; }

.track-num {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  width: 18px;
}

.track-title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.featured__tracks li:hover .track-title,
.featured__tracks li.is-active .track-title { color: var(--accent); }

.track-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.featured__tracks li:hover .track-play { background: var(--ink); color: var(--paper); }
.track-play svg { fill: currentColor; width: 12px; height: 12px; }
.track-play .icon-pause { display: none; }
.featured__tracks li.is-active .icon-play { display: none; }
.featured__tracks li.is-active .icon-pause { display: block; }

/* ---------- Platform / support icon row (Spotify, Apple, SoundCloud, Deezer, PWYW) ---------- */
.track-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0.45;
}

.track-icons a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}

.track-icons svg { width: 14px; height: 14px; fill: currentColor; }

.rail-card .track-icons {
  margin-top: 8px;
  opacity: 0.55;
}

/* Hover-only affordances — kept off touch devices on purpose. Without   */
/* this, iOS/Android leave a tapped element stuck in :hover until the    */
/* next tap elsewhere, which reads as icons randomly resizing/shifting.  */
@media (hover: hover) and (pointer: fine) {
  .track-icons { transition: opacity 0.25s ease; }
  .featured__tracks li:hover .track-icons,
  .rail-card:hover .track-icons,
  .rail-card.is-active .track-icons {
    opacity: 1;
  }
  .track-icons a { transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
  .track-icons a:hover {
    color: var(--ink);
    background: var(--paper-dim);
    transform: translateY(-1px);
  }
  .track-icons__support:hover { color: var(--accent); }
}

/* ---------- Discography rail ---------- */
.discography { padding: 40px 0 130px; }

.rail {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  padding: 8px 32px 20px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.rail::-webkit-scrollbar { display: none; }

.rail__spacer { flex: 0 0 calc((100vw - var(--maxw)) / 2 - 32px); min-width: 0; }

.rail-card {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
  cursor: pointer;
}

.rail-card__art {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-dim);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .rail-card:hover .rail-card__art {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -20px rgba(23,20,15,0.35);
  }
  .rail-card:hover .rail-card__art img { transform: scale(1.05); }
  .rail-card:hover .rail-card__play { opacity: 1; background: rgba(23,20,15,0.32); }
}

.rail-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.rail-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23,20,15,0);
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
}

.rail-card.is-active .rail-card__play {
  opacity: 1;
  background: rgba(23,20,15,0.32);
}

.rail-card__play svg { width: 44px; height: 44px; fill: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.rail-card__play .icon-pause { display: none; }
.rail-card.is-active .icon-play { display: none; }
.rail-card.is-active .icon-pause { display: block; }

.rail-card__title {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.rail-card__title.is-accent { color: var(--accent); }

.rail-card__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper-dim);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

/* ---------- Archive ---------- */
.archive { padding: 0 0 130px; }

.archive__card {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 40px 44px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg-dark);
  color: var(--paper);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.archive__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.archive__icon svg { fill: #fff; }

.archive__text { flex: 1; }
.archive__text h3 { margin: 0 0 6px; font-size: 19px; font-weight: 650; }
.archive__text p { margin: 0; font-size: 14px; color: rgba(250,247,242,0.68); }

.archive__text p.archive__note { margin-top: 6px; font-size: 11.5px; color: rgba(250,247,242,0.42); }
.archive__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.archive__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border: none;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--ease);
}

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

.archive__chev { transition: transform 0.4s var(--ease); }
.archive__link[aria-expanded="true"] .archive__chev { transform: rotate(180deg); }

/* Smooth height animation without a fixed max-height, via the grid-rows trick */
.archive__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}

.archive__panel.is-open { grid-template-rows: 1fr; }

.archive__panel-inner { overflow: hidden; }

.archive__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding-top: 22px;
}

.archive-embed {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-dim);
  line-height: 0;
}

.archive-embed iframe { display: block; border: 0; }

.archive__pager {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.archive__pager button {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: none;
  border-radius: 999px;
  background: var(--paper-dim);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.archive__pager button:hover { background: var(--line); }

.archive__pager button.is-active {
  background: var(--accent);
  color: #fff;
}

.archive__source {
  display: block;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}

.archive__source:hover { color: var(--accent); }

/* ---------- Contact ---------- */
.contact { padding: 0 0 150px; text-align: center; }
.contact .eyebrow { display: flex; justify-content: center; }
.contact__text {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 auto 32px;
  max-width: 40ch;
}

.contact__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
  text-align: left;
}

.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 38px 30px 30px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  box-shadow: 0 20px 46px -28px rgba(23,20,15,0.24);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s ease;
  overflow: hidden;
}

.contact-card::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,112,63,0.5), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 64px -26px rgba(23,20,15,0.3), 0 0 0 1px rgba(224,112,63,0.12);
}

.contact-card:hover::before { opacity: 1; }

.contact-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24px;
}

.contact-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(224,112,63,0.18), var(--paper-dim) 70%);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(224,112,63,0.16);
  transition: transform 0.5s var(--ease);
}

.contact-card:hover .contact-card__icon { transform: scale(1.08); }

.contact-card__index {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.contact-card h3 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}

.contact-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

.contact-card p.contact-card__note {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--accent);
  opacity: 0.75;
  margin-top: 10px;
}

.contact-card__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line);
  margin: 24px 0 20px;
}

.contact-card .hero__cta {
  width: 100%;
  justify-content: center;
  padding: 13px 20px;
  font-size: 13px;
}

/* ---------- Distribution band: DistroKid mention + rotating platform logos ---------- */
.distro-band {
  padding: 56px 0 8px;
  border-top: 1px solid var(--line);
}

.distro-band__eyebrow {
  margin: 0 0 26px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0.6;
  line-height: 1.7;
}

.distro-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.distro-marquee__row {
  display: flex;
  width: max-content;
  animation: distro-marquee-scroll 32s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
  .distro-marquee:hover .distro-marquee__row { animation-play-state: paused; }
}

.distro-marquee__track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 52px;
  padding-right: 52px;
}

.distro-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.55;
}

.distro-logo svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

@keyframes distro-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .distro-marquee__row { animation: none; }
}

/* ---------- Footer ---------- */
.footer {
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
}

.footer .wrap {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-faint);
}

.footer__links { display: flex; align-items: center; gap: 18px; }
.footer__note:hover { color: var(--ink); }

/* ---------- Floating "now playing" glass player ---------- */
.player {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 0);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 10px;
  min-width: 320px;
  max-width: calc(100vw - 40px);
  border-radius: 999px;
  background: var(--glass-bg-dark);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: 0 20px 50px -14px rgba(0,0,0,0.5);
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}

.player[hidden] { display: none; }

.player__toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.player__toggle svg { fill: currentColor; }
.player__toggle .icon-pause { display: none; }
.player.is-playing .icon-play { display: none; }
.player.is-playing .icon-pause { display: block; }

.player__art {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.player__meta { min-width: 0; flex: 1; }

.player__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.player__title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.player__time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}

/* Generous invisible touch target around a slim visual track, plus a */
/* knob so dragging/scrubbing is easy to see and hit on a phone.      */
.player__seek {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}

.player__seek::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: rgba(255,255,255,0.22);
}

.player__seek-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 3px;
  transform: translateY(-50%);
  width: 0%;
  border-radius: 3px;
  background: var(--accent);
  pointer-events: none;
}

.player__seek-knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.15s ease;
}

.player.is-dragging .player__seek-knob { transform: translate(-50%, -50%) scale(1.3); }

.player__support {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.player__support svg { fill: currentColor; }

@media (hover: hover) and (pointer: fine) {
  .player__support:hover { background: var(--accent); transform: scale(1.06); }
}

/* ---------- Support modal (select tracks → set price → PayPal → download) ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,12,8,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modalFade 0.3s var(--ease);
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: min(680px, 88vh);
  overflow-y: auto;
  padding: 40px 36px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,0.45);
  animation: modalRise 0.4s var(--ease);
}

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalRise {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--paper-dim);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.modal__close:hover { background: var(--ink); color: var(--paper); }

.modal__title {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}

.modal__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

.modal__hint {
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  margin: 14px 0 0;
}

.modal__hint--note {
  text-align: left;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.support__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0 -8px 22px;
  padding: 0 8px;
}

.support__row {
  display: grid;
  grid-template-columns: 20px 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 6px;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.support__row:hover { background: var(--paper-dim); }

.support__row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.support__row img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.support__row.is-checked img { opacity: 1; }

.support__row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.support__row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-faint);
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support__row.is-checked .support__row-title { color: var(--ink); }

/* ---------- Format badge (WAV) ---------- */
.format-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 3px 7px 3px 5px;
  border-radius: 999px;
  background: var(--paper-dim);
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.format-badge svg { width: 10px; height: 12px; fill: currentColor; }

.support__row.is-checked .format-badge,
.support__download-item .format-badge {
  background: rgba(224,112,63,0.14);
  color: var(--accent);
}

.support__download-item:hover .format-badge {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.support__download-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.support__download-title > :first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support__price {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.support__row.is-checked .support__price { opacity: 1; pointer-events: auto; }

.support__price span { font-size: 13px; color: var(--ink-soft); }

.support__price input {
  width: 46px;
  border: none;
  background: var(--paper-dim);
  border-radius: 8px;
  padding: 5px 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  text-align: right;
}

.support__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  border-top: 1px solid var(--line);
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--ink-soft);
}

.support__total strong {
  font-size: 22px;
  font-weight: 650;
  color: var(--ink);
}

.support__waiver {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 2px 2px 0;
  cursor: pointer;
}

.support__waiver[hidden] { display: none; }

.support__waiver input[type="checkbox"] {
  margin-top: 2px;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: var(--accent);
}

.support__waiver span { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

.support__proceed {
  width: 100%;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.25s ease, transform 0.3s var(--ease);
}

.support__proceed:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Inquiry form (Booking / Label modals) ---------- */
.inquiry-form { display: flex; flex-direction: column; }

.inquiry-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 22px;
}

.inquiry-field { display: flex; flex-direction: column; gap: 6px; }

.inquiry-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.inquiry-field input,
.inquiry-field select,
.inquiry-field textarea {
  border: 1px solid var(--line);
  background: var(--paper-dim);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.inquiry-field textarea { resize: vertical; min-height: 88px; }

.inquiry-field input:focus,
.inquiry-field select:focus,
.inquiry-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}

.support__downloads {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support__download-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--paper-dim);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.support__download-item:hover { background: var(--accent); color: #fff; }

.support__download-item img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  object-fit: cover;
}

.support__download-item > .support__download-title { flex: 1; }
.support__download-item > svg { flex-shrink: 0; fill: currentColor; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .featured__card { grid-template-columns: 1fr; }
  .featured__body { padding: 32px 28px 40px; }
  .archive__card { flex-wrap: wrap; }
  .archive__link { width: 100%; justify-content: center; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .featured { padding: 110px 0 80px; }
  .rail { padding-left: 20px; padding-right: 20px; scroll-snap-type: x mandatory; gap: 16px; }
  .rail__spacer { display: none; }
  .rail-card, .rail-card__art { width: 200px; height: 200px; }
  .rail-card { scroll-snap-stop: always; }
  .player { left: 12px; right: 12px; transform: none; min-width: 0; }
  .featured__tracks li { flex-wrap: wrap; }
  .featured__tracks .track-icons { order: 3; width: 100%; padding-left: 34px; margin-top: -4px; opacity: 0.7; }
  .rail-card .track-icons { gap: 2px; opacity: 0.65; }
  .rail-card .track-icons a { width: 21px; height: 21px; }
  .rail-card .track-icons svg { width: 12px; height: 12px; }
  .contact-grid { grid-template-columns: 1fr; }
  .archive__list { grid-template-columns: 1fr; }
  .contact__actions { flex-direction: column; }
  .contact__actions .hero__cta { width: 100%; justify-content: center; }
  .modal__panel { padding: 30px 22px; max-height: 92vh; }
  .support__row { grid-template-columns: 18px 30px 1fr auto; gap: 8px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3efe7;
    --ink-soft: rgba(243,239,231,0.66);
    --ink-faint: rgba(243,239,231,0.42);
    --paper: #14120f;
    --paper-dim: #1d1a15;
    --line: rgba(243,239,231,0.1);
    --glass-bg: rgba(30,27,22,0.6);
    --glass-border: rgba(255,255,255,0.08);
  }
  .archive__card { background: rgba(255,255,255,0.06); }
  .archive__link { background: var(--ink); color: var(--paper); }
}