/* ============================================================
   Voxdrops — Redesign v2
   Bold, dramatic, music-forward. Scoped to .voxdrops-page
   ============================================================ */

/* ── Houdini: animate the border gradient angle ── */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Custom Properties ─────────────────────────────────── */
:root {
  --vd-pink:    #fd0070;
  --vd-yellow:  #ffd426;
  --vd-blue:    #3137fc;
  --vd-bg:      #eeede9;
  --vd-black:   #000000;
  --vd-dark:    #0c0c0c;

  --vd-font-serif:   'Times New Roman', Times, serif;
  --vd-font-sans:    'Be Vietnam Pro', sans-serif;
  --vd-font-display: 'Bebas Neue', sans-serif;

  --vd-pad-x: clamp(20px, 5vw, 80px);
  --vd-section-gap: clamp(80px, 10vw, 160px);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { margin: 0; background: var(--vd-dark); }

.voxdrops-page {
  background: var(--vd-dark);
  color: var(--vd-bg);
  font-family: var(--vd-font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.voxdrops-page a:not([class]) { color: inherit; text-decoration: none; }

/* ── Site Border ───────────────────────────────────────── */
.vd-site-border {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  padding: 20px;
  background: conic-gradient(
    from var(--border-angle),
    var(--vd-pink),
    var(--vd-yellow),
    var(--vd-blue),
    var(--vd-pink)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  animation: border-rotate 6s linear infinite;
}

@keyframes border-rotate {
  to { --border-angle: 360deg; }
}

/* ── Section Inner ─────────────────────────────────────── */
.vd-section-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--vd-pad-x);
}

/* ── Typography ────────────────────────────────────────── */
.vd-h1 {
  font-family: var(--vd-font-serif);
  font-style: italic;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.vd-h2 {
  font-family: var(--vd-font-serif);
  font-style: italic;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
}

.vd-body-serif {
  font-family: var(--vd-font-serif);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.65;
}

.vd-meta {
  font-family: var(--vd-font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Buttons ───────────────────────────────────────────── */
.vd-btn-primary {
  display: inline-block;
  background: var(--vd-bg);
  color: var(--vd-black);
  padding: 14px 28px;
  border-radius: 2px;
  font-family: var(--vd-font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.vd-btn-primary:hover {
  background: var(--vd-pink);
  color: var(--vd-bg);
  transform: translateY(-1px);
}

.vd-btn-primary--dark {
  background: var(--vd-black);
  color: var(--vd-bg);
}

.vd-btn-primary--dark:hover {
  background: var(--vd-pink);
  color: var(--vd-bg);
}

.vd-link {
  color: var(--vd-blue);
  font-family: var(--vd-font-sans);
  font-weight: 500;
  font-size: 14px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 150ms ease;
}

.vd-link:hover { color: var(--vd-pink); }

/* ─────────────────────────────────────────────────────── */
/* HERO                                                    */
/* ─────────────────────────────────────────────────────── */
.vd-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
  padding: 80px var(--vd-pad-x);
}

/* Black-and-white photo background */
.vd-hero__bg {
  position: absolute;
  inset: 0;
  background: url('../../assets/images/hero-bg.jpg') center / cover no-repeat;
  filter: grayscale(1) brightness(0.6);
  transform: scale(1.05);
  animation: hero-drift 20s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  from { transform: scale(1.05) translate(0, 0); }
  to   { transform: scale(1.1) translate(-1%, -1%); }
}

/* Pink color wash — mix-blend-mode multiply over the greyscale photo */
.vd-hero__color {
  position: absolute;
  inset: 0;
  background: var(--vd-pink);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* ── Floating Circles ──────────────────────────────────── */
.vd-float {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

.vd-float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  display: block;
}

/* Pulse ring keyframes — box-shadow expands outward (not clipped by overflow) */
@keyframes pulse-pink {
  0%   { box-shadow: 0 0 0 0 rgba(253, 0, 112, 0.75), 0 0 0 0 rgba(253, 0, 112, 0.4); }
  50%  { box-shadow: 0 0 0 18px rgba(253, 0, 112, 0), 0 0 0 36px rgba(253, 0, 112, 0); }
  100% { box-shadow: 0 0 0 0 rgba(253, 0, 112, 0),   0 0 0 0  rgba(253, 0, 112, 0); }
}
@keyframes pulse-yellow {
  0%   { box-shadow: 0 0 0 0 rgba(255, 212, 38, 0.75), 0 0 0 0 rgba(255, 212, 38, 0.4); }
  50%  { box-shadow: 0 0 0 14px rgba(255, 212, 38, 0), 0 0 0 28px rgba(255, 212, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 212, 38, 0),   0 0 0 0  rgba(255, 212, 38, 0); }
}
@keyframes pulse-blue {
  0%   { box-shadow: 0 0 0 0 rgba(49, 55, 252, 0.75), 0 0 0 0 rgba(49, 55, 252, 0.4); }
  50%  { box-shadow: 0 0 0 16px rgba(49, 55, 252, 0), 0 0 0 30px rgba(49, 55, 252, 0); }
  100% { box-shadow: 0 0 0 0 rgba(49, 55, 252, 0),   0 0 0 0  rgba(49, 55, 252, 0); }
}

.vd-float--1 {
  width: 180px; height: 180px;
  top: 8%; left: 4%;
  border: 3px solid var(--vd-pink);
  animation: float-1 9s ease-in-out infinite, pulse-pink 2.8s ease-out infinite;
}
.vd-float--2 {
  width: 130px; height: 130px;
  top: 14%; right: 8%;
  border: 3px solid var(--vd-yellow);
  animation: float-2 11s ease-in-out infinite, pulse-yellow 3.2s ease-out infinite 0.7s;
}
.vd-float--3 {
  width: 110px; height: 110px;
  bottom: 18%; left: 10%;
  border: 3px solid var(--vd-blue);
  animation: float-3 8s ease-in-out infinite, pulse-blue 3s ease-out infinite 1.4s;
}
.vd-float--4 {
  width: 155px; height: 155px;
  bottom: 10%; right: 5%;
  border: 3px solid var(--vd-pink);
  animation: float-4 13s ease-in-out infinite, pulse-pink 2.4s ease-out infinite 0.4s;
}

@keyframes float-1 {
  0%,100% { transform: translate(0, 0) rotate(-3deg); }
  33%     { transform: translate(8px, -18px) rotate(2deg); }
  66%     { transform: translate(-6px, 10px) rotate(-1deg); }
}
@keyframes float-2 {
  0%,100% { transform: translate(0, 0) rotate(4deg); }
  40%     { transform: translate(-10px, 14px) rotate(-3deg); }
  70%     { transform: translate(6px, -8px) rotate(2deg); }
}
@keyframes float-3 {
  0%,100% { transform: translate(0, 0) rotate(-2deg); }
  50%     { transform: translate(12px, -12px) rotate(4deg); }
}
@keyframes float-4 {
  0%,100% { transform: translate(0, 0) rotate(3deg); }
  25%     { transform: translate(-8px, -16px) rotate(-4deg); }
  75%     { transform: translate(10px, 8px) rotate(1deg); }
}

/* ── Hero Inner ────────────────────────────────────────── */
.vd-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  max-width: 680px;
}

.vd-hero__rule {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  margin: 18px 0;
}

/* Logo: forced white, then glows with color */
.vd-hero__logo {
  width: min(480px, 82vw);
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  animation: logo-flicker 10s ease-in-out infinite;
}

@keyframes logo-flicker {
  /* white baseline */
  0%, 100% {
    filter: brightness(0) invert(1);
    opacity: 1;
  }
  /* quick random blink */
  3%  { opacity: 0.6; }
  4%  { opacity: 1; }

  /* PINK glow burst */
  12% {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 18px var(--vd-pink))
            drop-shadow(0 0 50px var(--vd-pink));
  }
  16% { filter: brightness(0) invert(1); opacity: 0.75; }
  17% { filter: brightness(0) invert(1); opacity: 1; }
  22% { filter: brightness(0) invert(1); }

  /* BLUE glow burst */
  38% {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 18px var(--vd-blue))
            drop-shadow(0 0 50px var(--vd-blue));
  }
  43% { filter: brightness(0) invert(1); opacity: 0.8; }
  44% { filter: brightness(0) invert(1); opacity: 1; }
  50% { filter: brightness(0) invert(1); }

  /* YELLOW glow burst */
  62% {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 18px var(--vd-yellow))
            drop-shadow(0 0 50px var(--vd-yellow));
  }
  67% { filter: brightness(0) invert(1); opacity: 0.7; }
  68% { filter: brightness(0) invert(1); opacity: 1; }
  75% { filter: brightness(0) invert(1); }

  /* double glitch near end */
  87% { opacity: 0.3; }
  88% {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 30px var(--vd-pink));
    opacity: 1;
  }
  90% { filter: brightness(0) invert(1); }
}

.vd-hero__demolicious {
  font-family: var(--vd-font-display);
  font-size: clamp(14px, 2.5vw, 22px);
  letter-spacing: 0.55em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
  text-transform: uppercase;
  animation: demolicious-flicker 10s ease-in-out infinite;
}

@keyframes demolicious-flicker {
  0%, 100%  { color: rgba(255,255,255,0.65); }
  12%       { color: rgba(253, 0, 112, 0.9); }
  22%       { color: rgba(255,255,255,0.65); }
  38%       { color: rgba(49, 55, 252, 0.9); }
  50%       { color: rgba(255,255,255,0.65); }
  62%       { color: rgba(255, 212, 38, 0.95); }
  75%       { color: rgba(255,255,255,0.65); }
  88%       { color: rgba(253, 0, 112, 0.8); }
  90%       { color: rgba(255,255,255,0.65); }
}

.vd-hero__tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 28px;
  margin-bottom: 28px;
}

/* ─────────────────────────────────────────────────────── */
/* PLAYLIST (featured 4-card section)                      */
/* ─────────────────────────────────────────────────────── */
.vd-playlist {
  background: var(--vd-dark);
  padding: clamp(60px, 8vw, 120px) 0;
}

.vd-playlist__header {
  padding: 0 var(--vd-pad-x);
  max-width: 1400px;
  margin: 0 auto 40px;
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.vd-playlist__label {
  font-family: var(--vd-font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vd-pink);
}

/* 4 cards: 2×2 on tablet, 1×4 on desktop, stacked on mobile */
.vd-playlist__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: clamp(40px, 6vw, 80px) var(--vd-pad-x);
  max-width: 1400px;
  margin: 0 auto;
}

.vd-pcard {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate; /* contain mix-blend-mode within card */
  /* Parallelogram — all edges slant the same direction (Z-border effect) */
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  filter: drop-shadow(3px 6px 18px rgba(0,0,0,0.6));
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
              filter 380ms ease;
}

/* Hover: scale up; drop-shadow follows the clipped parallelogram shape */
.vd-pcard:hover {
  transform: scale(1.05) translateY(-6px);
  filter: drop-shadow(4px 14px 32px rgba(0,0,0,0.85));
  z-index: 10;
}

/* Per-card tint color (the duotone base) */
.vd-pcard--pink   { background: var(--vd-pink); }
.vd-pcard--blue   { background: var(--vd-blue); }
.vd-pcard--yellow { background: #b88a00; }
.vd-pcard--pink2  { background: #c00058; }

.vd-pcard__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Multiply on top of the card color: darks stay dark, lights show the tint */
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  transition: transform 600ms ease, opacity 300ms ease;
  opacity: 0.85;
}

.vd-pcard:hover .vd-pcard__bg {
  transform: scale(1.06);
  opacity: 0.7;
}

/* Overlay darkens the bottom for text readability — no blend mode needed */
.vd-pcard__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
  transition: opacity 300ms ease;
}

/* Card content */
.vd-pcard__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 55%);
}

.vd-pcard__num {
  font-family: var(--vd-font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
}

.vd-pcard__title {
  font-family: var(--vd-font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.15;
  color: #fff;
}

.vd-pcard__genre {
  font-family: var(--vd-font-sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
}

.vd-pcard__play {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.vd-pcard__play svg { width: 12px; height: 12px; fill: #fff; margin-left: 2px; }

.vd-pcard:hover .vd-pcard__play {
  opacity: 1;
  transform: scale(1);
}

.vd-pcard.is-playing .vd-pcard__play {
  opacity: 1;
  transform: scale(1);
  border-color: var(--vd-pink);
  background: var(--vd-pink);
}

/* ─────────────────────────────────────────────────────── */
/* CATALOG                                                 */
/* ─────────────────────────────────────────────────────── */
.vd-catalog {
  background: var(--vd-bg);
  color: var(--vd-black);
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
  margin-top: -2px;
  padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 140px);
}

.vd-catalog .vd-h1 { color: var(--vd-black); margin-bottom: 36px; }

/* ── NOW PLAYING panel ─────────────────────────────────── */
.vd-now-playing {
  background: var(--vd-black);
  color: var(--vd-bg);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  margin-bottom: 32px;
  overflow: hidden;
  transition: all 300ms ease;
}

.vd-now-playing.is-hidden { display: none; }

.vd-now-playing__cover {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #222;
  flex-shrink: 0;
  border: 2px solid var(--vd-pink);
  overflow: hidden;
  animation: spin 8s linear infinite;
}

.vd-now-playing__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.6);
}

@keyframes spin { to { transform: rotate(360deg); } }

.vd-now-playing__info { flex: 1; min-width: 0; }

.vd-now-playing__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vd-pink);
  margin-bottom: 4px;
}

.vd-now-playing__title {
  font-family: var(--vd-font-serif);
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 26px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vd-now-playing__meta {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(238,237,233,0.5);
  margin-top: 4px;
}

/* Waveform */
.vd-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  margin-top: 8px;
}

.vd-waveform__bar {
  width: 3px;
  background: var(--vd-pink);
  border-radius: 2px;
  transform-origin: bottom;
}

.vd-now-playing.is-active .vd-waveform__bar { animation: wave 1.1s ease-in-out infinite; }
.vd-waveform__bar:nth-child(1)  { height: 40%; animation-delay: 0.0s; }
.vd-waveform__bar:nth-child(2)  { height: 75%; animation-delay: 0.1s; }
.vd-waveform__bar:nth-child(3)  { height: 55%; animation-delay: 0.2s; }
.vd-waveform__bar:nth-child(4)  { height: 90%; animation-delay: 0.05s; }
.vd-waveform__bar:nth-child(5)  { height: 65%; animation-delay: 0.15s; }
.vd-waveform__bar:nth-child(6)  { height: 80%; animation-delay: 0.3s; }
.vd-waveform__bar:nth-child(7)  { height: 45%; animation-delay: 0.1s; }
.vd-waveform__bar:nth-child(8)  { height: 70%; animation-delay: 0.25s; }
.vd-waveform__bar:nth-child(9)  { height: 50%; animation-delay: 0.0s; }
.vd-waveform__bar:nth-child(10) { height: 85%; animation-delay: 0.2s; }
.vd-waveform__bar:nth-child(11) { height: 35%; animation-delay: 0.1s; }
.vd-waveform__bar:nth-child(12) { height: 60%; animation-delay: 0.05s; }

@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.2); }
}

.vd-now-playing__stop {
  background: none;
  border: 1px solid rgba(238,237,233,0.25);
  color: var(--vd-bg);
  border-radius: 2px;
  padding: 6px 14px;
  font-family: var(--vd-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 150ms ease, color 150ms ease;
}

.vd-now-playing__stop:hover { border-color: var(--vd-pink); color: var(--vd-pink); }

/* ── Filters ───────────────────────────────────────────── */
.vd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.vd-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 2px;
  border: 1px solid var(--vd-black);
  background: transparent;
  color: var(--vd-black);
  font-family: var(--vd-font-sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 120ms ease;
  user-select: none;
}

.vd-filter-chip:hover { background: rgba(0,0,0,0.06); }
.vd-filter-chip.is-active { background: var(--vd-yellow); border-color: var(--vd-yellow); }

/* ── Song List ─────────────────────────────────────────── */
.vd-song-list { border-top: 1px solid rgba(0,0,0,0.15); }

/* ── Song Row ──────────────────────────────────────────── */
.vd-song-row {
  display: grid;
  grid-template-columns: 32px 48px 1fr auto auto auto auto;
  align-items: center;
  gap: 0 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  position: relative;
  cursor: pointer;
  transition: background 150ms ease;
  min-height: 80px;
}

/* left pink accent bar */
.vd-song-row::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0; bottom: 0;
  width: 3px;
  background: var(--vd-pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms ease;
}

.vd-song-row:hover { background: rgba(0,0,0,0.03); }

.vd-song-row:hover .vd-song-row__title {
  text-decoration: underline;
  text-decoration-color: var(--vd-pink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.vd-song-row.is-playing { background: rgba(255,212,38,0.09); }
.vd-song-row.is-playing::before { transform: scaleX(1); }

.vd-song-row.is-playing .vd-meta {
  background: rgba(255,212,38,0.4);
  padding: 2px 5px;
  border-radius: 1px;
  margin-left: -5px;
}

/* track number */
.vd-song-row__num {
  font-family: var(--vd-font-sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.35);
  text-align: right;
  flex-shrink: 0;
}

.vd-song-row.is-playing .vd-song-row__num { color: var(--vd-pink); }

/* cover circle */
.vd-song-row__cover {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: border-color 200ms ease;
}

.vd-song-row__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.8);
  display: block;
}

.vd-song-row.is-playing .vd-song-row__cover {
  border-color: var(--vd-pink);
}

/* info block */
.vd-song-row__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.vd-song-row__title {
  font-family: var(--vd-font-serif);
  font-style: italic;
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.2;
  color: var(--vd-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* center progress area */
.vd-song-row__progress-wrap {
  width: clamp(80px, 12vw, 180px);
  flex-shrink: 0;
}

.vd-song-row__progress {
  height: 3px;
  background: rgba(0,0,0,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.vd-song-row__progress-fill {
  height: 100%;
  background: var(--vd-pink);
  width: 0%;
  border-radius: 2px;
}

.vd-song-row.is-playing .vd-song-row__progress-fill {
  animation: progress-sim 180s linear forwards;
}

@keyframes progress-sim { to { width: 100%; } }

/* duration */
.vd-song-row__duration {
  font-size: 12px;
  color: rgba(0,0,0,0.4);
  flex-shrink: 0;
  min-width: 34px;
  text-align: right;
}

/* play button */
.vd-play-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 150ms ease;
}

.vd-play-btn svg { width: 13px; height: 13px; fill: var(--vd-black); transition: fill 150ms ease; }

.vd-song-row:hover .vd-play-btn { transform: scale(1.2); }
.vd-song-row.is-playing .vd-play-btn svg { fill: var(--vd-pink); }

/* CTAs */
.vd-song-row__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.vd-song-row__license {
  background: var(--vd-black);
  color: var(--vd-bg);
  padding: 9px 15px;
  border-radius: 2px;
  font-family: var(--vd-font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background 150ms ease;
}

.vd-song-row__license:hover { background: var(--vd-pink); }

.vd-song-row__inquire {
  color: var(--vd-blue);
  font-family: var(--vd-font-sans);
  font-weight: 500;
  font-size: 12px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms ease;
}

.vd-song-row__inquire:hover { color: var(--vd-pink); }

/* ─────────────────────────────────────────────────────── */
/* ABOUT (dark, slanted top)                               */
/* ─────────────────────────────────────────────────────── */
.vd-about {
  background: var(--vd-dark);
  color: var(--vd-bg);
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
  margin-top: -2px;
  padding: clamp(100px, 12vw, 180px) var(--vd-pad-x) clamp(80px, 10vw, 140px);
}

.vd-about__layout {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.vd-about__text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.vd-about__text .vd-body-serif {
  color: rgba(238,237,233,0.75);
}

.vd-about__img-wrap {
  position: relative;
  height: 500px;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  overflow: hidden;
}

.vd-about__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  display: block;
}

.vd-about__img-overlay {
  position: absolute;
  inset: 0;
  background: var(--vd-blue);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────── */
/* HOW IT WORKS (light, slanted top, masonry bg)           */
/* ─────────────────────────────────────────────────────── */
.vd-how {
  position: relative;
  background: #2c2c2c;
  color: var(--vd-bg);
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
  margin-top: -2px;
  padding: clamp(100px, 12vw, 180px) var(--vd-pad-x) clamp(80px, 10vw, 140px);
}

/* Masonry image background */
.vd-how__masonry {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 3px;
  z-index: 0;
  overflow: hidden;
  opacity: 0.18;
}

.vd-how__masonry-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Offset alternate columns for the brick/stagger effect */
.vd-how__masonry-col--offset { margin-top: -30%; }

.vd-how__masonry-item {
  flex: 1;
  overflow: hidden;
  isolation: isolate;
  min-height: 180px;
}

/* No color overlay — photos show as plain grayscale, section bg does the rest */
.vd-how__masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  display: block;
}

/* Content floats above masonry */
.vd-how .vd-section-inner,
.vd-steps { position: relative; z-index: 2; }

.vd-how .vd-h2 { color: var(--vd-bg); margin-bottom: 60px; }

.vd-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 5vw, 80px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--vd-pad-x);
}

.vd-step { display: flex; flex-direction: column; gap: 14px; }

.vd-step__num {
  font-family: var(--vd-font-display);
  font-size: clamp(56px, 7vw, 80px);
  line-height: 1;
  color: var(--vd-pink);
}

.vd-step__title {
  font-family: var(--vd-font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.5vw, 30px);
  color: #fff;
}

.vd-step__body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(238, 237, 233, 0.6);
}

/* ─────────────────────────────────────────────────────── */
/* CONTACT (dark, image with yellow overlay)               */
/* ─────────────────────────────────────────────────────── */
.vd-contact {
  position: relative;
  background: var(--vd-dark);
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
  margin-top: -2px;
  padding: clamp(100px, 12vw, 180px) var(--vd-pad-x) clamp(80px, 10vw, 140px);
  overflow: hidden;
}

.vd-contact__bg {
  position: absolute;
  inset: 0;
  background: url('../../assets/images/card-3.jpg') center / cover no-repeat;
  filter: grayscale(1);
}

.vd-contact__overlay {
  position: absolute;
  inset: 0;
  background: var(--vd-yellow);
  mix-blend-mode: multiply;
  opacity: 1;
}

.vd-contact__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  max-width: 600px;
  margin: 0 auto;
}

.vd-contact__sub {
  font-size: 16px;
  color: rgba(238,237,233,0.7);
}

.vd-contact__email {
  color: rgba(238,237,233,0.65);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.vd-contact__email:hover { color: var(--vd-yellow); }

/* ─────────────────────────────────────────────────────── */
/* FOOTER                                                  */
/* ─────────────────────────────────────────────────────── */
.vd-footer {
  background: #000;
  padding: 52px var(--vd-pad-x);
}

.vd-footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.vd-footer__logo {
  height: 28px;
  width: auto;
  /* Dark logo has light elements — perfect on black bg */
  filter: brightness(0) invert(1); /* force white on black */
  opacity: 0.85;
  transition: opacity 200ms ease;
}

.vd-footer__logo:hover { opacity: 1; }

.vd-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.vd-footer__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vd-footer__link {
  font-family: var(--vd-font-sans);
  font-size: 12px;
  color: rgba(238,237,233,0.45);
  text-decoration: none;
  transition: color 150ms ease;
}

.vd-footer__link:hover { color: var(--vd-pink); }

.vd-footer__copy {
  font-size: 11px;
  color: rgba(238,237,233,0.3);
  font-family: var(--vd-font-sans);
}

/* ─────────────────────────────────────────────────────── */
/* MINI PLAYER                                             */
/* ─────────────────────────────────────────────────────── */
.vd-mini-player {
  position: fixed;
  bottom: 20px; left: 20px; right: 20px; /* sits inside the 20px site border */
  height: 60px;
  background: #000;
  border-top: 2px solid var(--vd-pink);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 48px);
  transform: translateY(calc(100% + 20px)); /* slide fully below border */
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9998; /* just below the site border (9999) */
}

.vd-mini-player.is-visible { transform: translateY(0); }

.vd-mini-player__play {
  background: none; border: none; cursor: pointer; padding: 8px; flex-shrink: 0;
}
.vd-mini-player__play svg { width: 14px; height: 14px; fill: var(--vd-bg); }

.vd-mini-player__info { flex: 1; min-width: 0; }

.vd-mini-player__title {
  font-family: var(--vd-font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--vd-bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vd-mini-player__prog {
  height: 2px;
  background: rgba(255,255,255,0.12);
  margin-top: 5px;
  border-radius: 1px;
  overflow: hidden;
}

.vd-mini-player__prog-fill {
  height: 100%;
  background: var(--vd-pink);
  width: 35%;
  border-radius: 1px;
}

.vd-mini-player__close {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.4);
  font-size: 20px; line-height: 1;
  padding: 8px; flex-shrink: 0;
  transition: color 150ms ease;
}
.vd-mini-player__close:hover { color: var(--vd-bg); }

/* ─────────────────────────────────────────────────────── */
/* RESPONSIVE                                              */
/* ─────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .vd-playlist__grid { grid-template-columns: repeat(2, 1fr); }
  .vd-pcard { aspect-ratio: 4/5; }

  .vd-song-row {
    grid-template-columns: 28px 40px 1fr auto auto;
    gap: 0 12px;
  }
  .vd-song-row__progress-wrap { display: none; }
  .vd-song-row__ctas { flex-direction: column; gap: 6px; align-items: flex-end; }

  .vd-about__layout { grid-template-columns: 1fr; gap: 40px; }
  .vd-about__img-wrap { height: 360px; }
}

@media (max-width: 767px) {
  /* Thinner border on mobile + comfortable breathing room inside it */
  .vd-site-border { padding: 10px; }
  :root { --vd-pad-x: 28px; }
  .vd-mini-player {
    bottom: 10px; left: 10px; right: 10px;
    transform: translateY(calc(100% + 10px));
  }

  .vd-playlist__grid { grid-template-columns: 1fr 1fr; }

  .vd-float--1 { width: 100px; height: 100px; }
  .vd-float--2 { width: 80px;  height: 80px;  }
  .vd-float--3 { display: none; }
  .vd-float--4 { width: 90px;  height: 90px;  }

  .vd-song-row {
    grid-template-columns: 28px 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
    min-height: auto;
    padding: 12px 0;
  }
  .vd-song-row__cover { display: none; }
  .vd-song-row__duration { display: none; }
  .vd-song-row__ctas { grid-column: 3; grid-row: 1 / 3; align-self: center; }

  .vd-steps { grid-template-columns: 1fr; gap: 40px; }

  .vd-footer__inner { flex-direction: column; align-items: flex-start; }
  .vd-footer__links { align-items: flex-start; }
}

@media (max-width: 479px) {
  .vd-playlist__grid { grid-template-columns: 1fr; }
  .vd-pcard { aspect-ratio: 16/9; clip-path: none; }
}