/* ==========================================================================
   DARKOVIBES — dv-main.css
   Single stylesheet. No @import. BEM-ish naming. Tokens declared once.
   "La at night": tar base, Atlantic deep, salt text, sodium accent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted fonts  (drop woff2 binaries in assets/fonts/ — see README)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap; /* display face is preloaded; swap covers the race */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20A0-20BF, U+2122, U+2212;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20A0-20BF, U+2122, U+2212;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20A0-20BF, U+2122, U+2212;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour */
  --dv-tar:      #0C1114;
  --dv-deep:     #0E2B2E;
  --dv-salt:     #E9E4D8;
  --dv-sodium:   #FF8A3D;
  --dv-hibiscus: #C82E4C;
  --dv-ash:      #6E7B7E;

  /* Rule tints (ash at low alpha, precomputed as rgba to avoid hardcoded hex) */
  --dv-rule:        rgba(110, 123, 126, 0.33);
  --dv-rule-strong: rgba(110, 123, 126, 0.55);
  --dv-scrim:       rgba(12, 17, 20, 0.95);

  /* Type families */
  --dv-font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --dv-font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --dv-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Type scale — clamp throughout */
  --dv-t-display: clamp(3rem, 11vw, 9.5rem);
  --dv-t-h1:      clamp(2.25rem, 6vw, 4.5rem);
  --dv-t-h2:      clamp(1.75rem, 4vw, 3rem);
  --dv-t-h3:      clamp(1.25rem, 2.4vw, 1.75rem);
  --dv-t-body:    clamp(1rem, 1.05vw, 1.125rem);
  --dv-t-meta:    0.875rem;

  /* Spacing — 4px base */
  --dv-space-1:  4px;
  --dv-space-2:  8px;
  --dv-space-3:  12px;
  --dv-space-4:  16px;
  --dv-space-5:  24px;
  --dv-space-6:  32px;
  --dv-space-7:  48px;
  --dv-space-8:  64px;
  --dv-space-9:  96px;
  --dv-space-10: 144px;
  --dv-space-11: 208px;

  /* Layout */
  --dv-gutter: clamp(1rem, 3vw, 2.5rem);
  --dv-pad:    clamp(1.25rem, 5vw, 4rem);
  --dv-max:    1440px;

  /* Motion */
  --dv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dv-ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
}

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--dv-tar);
  color: var(--dv-salt);
  font-family: var(--dv-font-body);
  font-size: var(--dv-t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--dv-salt); text-decoration: none; }

/* Mobile tap polish: no grey flash, no 300ms delay on taps. */
a, button, label, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button { font-family: inherit; cursor: pointer; }

/* Monospace timecodes/runtimes/dates use fixed-width figures so numbers
   never nudge the layout as they change. */
.dv-eyebrow__time,
.dv-tracklist__time,
.dv-tracklist__num,
.dv-show-row__date,
.dv-article__meta { font-variant-numeric: tabular-nums; }

::selection { background: var(--dv-sodium); color: var(--dv-tar); }

h1, h2, h3, h4, p { margin: 0; }

/* Accessibility: skip link + focus ring */
.dv-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--dv-sodium);
  color: var(--dv-tar);
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.14em;
  padding: var(--dv-space-3) var(--dv-space-4);
}
.dv-skip:focus { left: var(--dv-space-4); top: var(--dv-space-4); }

:focus-visible {
  outline: 2px solid var(--dv-sodium);
  outline-offset: 2px;
}

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

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.dv-shell { width: 100%; }

.dv-wrap {
  width: 100%;
  max-width: var(--dv-max);
  margin-inline: auto;
  padding-inline: var(--dv-pad);
}

.dv-section { padding-block: clamp(3rem, 8vw, 6rem) 0; }
.dv-section--flush { padding-block: 0; }

/* --------------------------------------------------------------------------
   5. Eyebrow (timecode)
   -------------------------------------------------------------------------- */
.dv-eyebrow {
  font-family: var(--dv-font-mono);
  font-size: clamp(0.6875rem, 1vw, 0.8125rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-ash);
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}
.dv-eyebrow--accent { color: var(--dv-sodium); }
.dv-eyebrow__time { color: var(--dv-sodium); }
.dv-eyebrow--accent .dv-eyebrow__time { color: var(--dv-sodium); }

/* --------------------------------------------------------------------------
   6. Link underline wipe
   -------------------------------------------------------------------------- */
.dv-link {
  color: var(--dv-salt);
  text-decoration: none;
  background-image: linear-gradient(var(--dv-sodium), var(--dv-sodium));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 220ms ease;
}
.dv-link:hover,
.dv-link:focus-visible { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   7. Masthead / nav
   -------------------------------------------------------------------------- */
.dv-masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-4);
  padding: clamp(0.875rem, 1.4vw, 1.25rem) var(--dv-pad);
  background: var(--dv-scrim);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--dv-rule-strong);
}
.dv-masthead__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dv-masthead__mark {
  width: 14px;
  height: 14px;
  background: var(--dv-sodium);
  transform: rotate(45deg);
  view-transition-name: dv-mark;
}
.dv-masthead__wordmark {
  font-family: var(--dv-font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--dv-salt);
}
.dv-masthead__logo {
  height: clamp(20px, 2.3vw, 28px);
  width: auto;
  display: block;
}
.dv-nav {
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.dv-nav__link {
  font-family: var(--dv-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-salt);
}
.dv-nav__link.is-current { color: var(--dv-sodium); }

/* Mobile nav toggle */
.dv-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--dv-ash);
}
.dv-nav-toggle__bar {
  width: 16px;
  height: 1.5px;
  background: var(--dv-salt);
  transition: transform 220ms var(--dv-ease-out), opacity 160ms ease;
}

/* --------------------------------------------------------------------------
   8. Mobile nav panel (disclosure)
   -------------------------------------------------------------------------- */
.dv-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--dv-tar);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--dv-space-5);
  padding: var(--dv-pad);
  padding-top: max(var(--dv-pad), env(safe-area-inset-top));
  transform: translateY(-100%);
  transition: transform 320ms var(--dv-ease-out);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain; /* don't chain scroll to the page behind */
  -webkit-overflow-scrolling: touch;
}
.dv-mobile-nav.is-open { transform: translateY(0); visibility: visible; }
.dv-mobile-nav__link {
  font-family: var(--dv-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 10vw, 3rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--dv-salt);
}
.dv-mobile-nav__close {
  position: absolute;
  top: max(var(--dv-pad), env(safe-area-inset-top));
  right: var(--dv-pad);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--dv-ash);
  color: var(--dv-salt);
  font-family: var(--dv-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 8px 14px;
}

/* --------------------------------------------------------------------------
   9. Duotone media (signature)
   -------------------------------------------------------------------------- */
.dv-duotone {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--dv-deep);
}
/* Wide blog featured image sizes from its own aspect-ratio, not a fixed parent. */
.dv-duotone--wide { height: auto; }
.dv-duotone__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms var(--dv-ease-out);
}
/* Placeholder = the prototype's striped fill, so unpopulated blocks read as art */
.dv-duotone__placeholder {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    var(--dv-tar) 0px, var(--dv-tar) 26px,
    var(--dv-sodium) 26px, var(--dv-sodium) 28px
  );
}
.dv-duotone__label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--dv-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--dv-tar);
  background: var(--dv-sodium);
  padding: 5px 8px;
}
.dv-duotone--hero .dv-duotone__label { font-size: 11px; letter-spacing: 0.14em; padding: 8px 12px; }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.dv-hero {
  position: relative;
  width: 100%;
  min-height: 640px;
  height: 92vh;
  height: 92dvh; /* stable on mobile Chrome as the address bar hides/shows */
  display: flex;
  align-items: flex-end;
}
.dv-hero__media {
  position: absolute;
  inset: 0;
  view-transition-name: dv-hero;
}
.dv-hero__media .dv-duotone__img,
.dv-hero__media .dv-duotone__placeholder { position: absolute; inset: 0; }
/* Portrait faces sit in the upper third — bias the crop upward so the face is
   framed rather than centred out of view. */
.dv-hero__media .dv-duotone__img { object-position: 50% 22%; }
.dv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--dv-tar) 4%, rgba(12,17,20,0) 46%);
  z-index: 1;
}
.dv-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--dv-pad);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.dv-hero__wordmark {
  font-family: var(--dv-font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  font-size: var(--dv-t-display);
  color: var(--dv-salt);
  view-transition-name: dv-title;
}
.dv-hero__line {
  font-family: var(--dv-font-body);
  font-size: clamp(0.9375rem, 1.4vw, 1.25rem);
  color: var(--dv-salt);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  max-width: 540px;
}

/* --------------------------------------------------------------------------
   11. Buttons / CTAs
   -------------------------------------------------------------------------- */
.dv-cta {
  display: inline-block;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--dv-font-mono);
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-tar);
  background: var(--dv-sodium);
  padding: clamp(0.875rem, 1.4vw, 1.125rem) clamp(1.25rem, 2vw, 1.75rem);
  transition: transform 180ms var(--dv-ease-out);
}
.dv-cta:hover { transform: translateY(-2px); }
.dv-cta--ghost {
  color: var(--dv-sodium);
  background: transparent;
  padding: 0;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}
.dv-cta--ghost:hover { transform: none; }

/* --------------------------------------------------------------------------
   12. Current-release band + tracklist + DSP
   -------------------------------------------------------------------------- */
.dv-release-band {
  display: flex;
  flex-direction: row;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.dv-release-band__art {
  display: block;
  width: 440px;
  height: 440px;
  flex-shrink: 0;
  cursor: pointer;
}
.dv-release-band__info { flex: 1; min-width: 0; }
.dv-release__title {
  font-family: var(--dv-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: var(--dv-t-h1);
  color: var(--dv-salt);
}
.dv-release__meta {
  font-family: var(--dv-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-ash);
  margin-top: 10px;
}

.dv-tracklist {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--dv-rule-strong);
  list-style: none;
  padding: 0;
}
.dv-tracklist__row {
  display: grid;
  grid-template-columns: 32px 1fr 220px 56px;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--dv-rule);
}
.dv-tracklist__num  { font-family: var(--dv-font-mono); font-size: 12px; color: var(--dv-ash); }
.dv-tracklist__name { font-family: var(--dv-font-body); font-size: clamp(0.875rem, 1.2vw, 1rem); color: var(--dv-salt); }
.dv-tracklist__feat { font-family: var(--dv-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dv-ash); }
.dv-tracklist__time { font-family: var(--dv-font-mono); font-size: 12px; color: var(--dv-ash); text-align: right; }

/* Track preview player — click the title to play; inline transport appears. */
.dv-tracklist__row--playable { position: relative; }

/* Number cell doubles as a play/pause affordance for the mouse. The title
   button below is the accessible control, so this stays aria-hidden. */
.dv-tracklist__toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: 18px;
  cursor: pointer;
}
.dv-tracklist__toggle .dv-tracklist__num { transition: opacity 160ms ease; }
.dv-tracklist__icon {
  position: absolute;
  left: 0;
  top: 50%;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 160ms ease;
  /* default = play triangle */
  width: 0;
  height: 0;
  border-left: 9px solid var(--dv-sodium);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
/* Hover the row hints the number can play. */
.dv-tracklist__row--playable:hover .dv-tracklist__num { opacity: 0; }
.dv-tracklist__row--playable:hover .dv-tracklist__icon { opacity: 1; }

/* Title is the primary click target. */
.dv-tracklist__title-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--dv-salt);
  cursor: pointer;
}
.dv-tracklist__title-btn:hover .dv-tracklist__name,
.dv-tracklist__title-btn:focus-visible .dv-tracklist__name { color: var(--dv-sodium); }
.dv-tracklist__title-btn:focus-visible { outline: 2px solid var(--dv-sodium); outline-offset: 3px; }

/* Active states: number → pause bars (playing) or play triangle (paused). */
.dv-tracklist__row.is-playing .dv-tracklist__num,
.dv-tracklist__row.is-paused .dv-tracklist__num,
.dv-tracklist__row.is-loading .dv-tracklist__num { opacity: 0; }
.dv-tracklist__row.is-playing .dv-tracklist__icon,
.dv-tracklist__row.is-paused .dv-tracklist__icon { opacity: 1; }
.dv-tracklist__row.is-playing .dv-tracklist__icon {
  width: 10px;
  height: 12px;
  border: 0;
  background:
    linear-gradient(var(--dv-sodium), var(--dv-sodium)) 0 0 / 3px 12px no-repeat,
    linear-gradient(var(--dv-sodium), var(--dv-sodium)) 7px 0 / 3px 12px no-repeat;
}
.dv-tracklist__row.is-playing .dv-tracklist__name,
.dv-tracklist__row.is-paused .dv-tracklist__name { color: var(--dv-sodium); }
/* Loading = small spinner (the one allowed circular element). */
.dv-tracklist__row.is-loading .dv-tracklist__icon {
  opacity: 1;
  width: 12px;
  height: 12px;
  border: 2px solid var(--dv-rule-strong);
  border-top-color: var(--dv-sodium);
  border-radius: 50%;
  background: none;
  animation: dv-spin 0.7s linear infinite;
}
@keyframes dv-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* End cell: runtime, swapped for the forward/next button while active. */
.dv-tracklist__end {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 18px;
}
.dv-tracklist__next {
  appearance: none;
  background: none;
  border: 0;
  /* Small glyph, but a comfortable 44px tap area (padding + negative margin
     keeps the visual position unchanged). */
  padding: 12px;
  margin: -12px -12px -12px 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: flex-end;
  min-width: 44px;
  min-height: 44px;
  color: var(--dv-sodium);
}
.dv-tracklist__row.is-playing .dv-tracklist__time,
.dv-tracklist__row.is-paused .dv-tracklist__time { display: none; }
.dv-tracklist__row.is-playing .dv-tracklist__next,
.dv-tracklist__row.is-paused .dv-tracklist__next { display: inline-flex; }
.dv-tracklist__next:focus-visible { outline: 2px solid var(--dv-sodium); outline-offset: 2px; }
/* Skip-forward glyph: two triangles + a bar. */
.dv-tracklist__next-icon {
  position: relative;
  width: 15px;
  height: 12px;
  display: inline-block;
  background: linear-gradient(var(--dv-sodium), var(--dv-sodium)) 12px 0 / 3px 12px no-repeat;
}
.dv-tracklist__next-icon::before,
.dv-tracklist__next-icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--dv-sodium);
}
.dv-tracklist__next-icon::before { left: 0; }
.dv-tracklist__next-icon::after { left: 6px; }

/* Progress line along the bottom edge of the active row. */
.dv-tracklist__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--dv-sodium);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 120ms linear;
  pointer-events: none;
}

/* Digital-store brand icons on a single horizontal line. */
.dv-dsp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 0;
  list-style: none;
}
.dv-dsp li { display: inline-flex; }
.dv-dsp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--dv-salt);
  background-image: none; /* cancel any inherited .dv-link underline gradient */
  transition: color 180ms ease, transform 220ms var(--dv-ease-out);
}
.dv-dsp__glyph {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}
a.dv-dsp__icon:hover,
a.dv-dsp__icon:focus-visible {
  color: var(--dv-sodium);
  transform: translateY(-3px);
}
/* Platforms with no link yet read as muted, inert marks. */
.dv-dsp__icon--off { color: var(--dv-ash); opacity: 0.5; cursor: default; }
/* Fallback when a label has no mapped icon. */
.dv-dsp__txt {
  font-family: var(--dv-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 6px;
}

/* Search submit — reuses the old DSP chip look now the DSP row is icons. */
.dv-search__submit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--dv-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dv-salt);
  background: transparent;
  border: 1px solid var(--dv-ash);
  padding: 10px 16px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.dv-search__submit:hover,
.dv-search__submit:focus-visible {
  color: var(--dv-tar);
  background: var(--dv-sodium);
  border-color: var(--dv-sodium);
}

/* --------------------------------------------------------------------------
   13. Marquee
   -------------------------------------------------------------------------- */
.dv-marquee {
  overflow: hidden;
  border-top: 1px solid var(--dv-rule-strong);
  border-bottom: 1px solid var(--dv-rule-strong);
  padding-block: clamp(1rem, 2.4vw, 1.75rem);
  margin-block: clamp(3rem, 8vw, 6rem);
}
.dv-marquee__track {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--dv-font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 7vw, 5rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--dv-salt);
  animation: dv-marquee 18s linear infinite;
  will-change: transform;
}
.dv-marquee:hover .dv-marquee__track,
.dv-marquee:focus-within .dv-marquee__track { animation-play-state: paused; }

/* Release announcement variant: title outlined, "Out Now" filled sodium. */
.dv-marquee--release .dv-marquee__track { text-decoration: none; }
.dv-marquee--release .dv-marquee__word { margin-right: 0.28em; }
.dv-marquee--release .dv-marquee__tag {
  -webkit-text-stroke: 0;
  color: var(--dv-sodium);
  margin-right: 0.4em;
}
.dv-marquee--release .dv-marquee__sep {
  -webkit-text-stroke: 0;
  color: var(--dv-sodium);
  margin-right: 0.4em;
  font-size: 0.7em;
  vertical-align: 0.15em;
}
/* On hover the whole title fills in, reinforcing it's a link. */
.dv-marquee--release:hover .dv-marquee__word { -webkit-text-stroke: 0; color: var(--dv-salt); }
@keyframes dv-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   14. Shows
   -------------------------------------------------------------------------- */
.dv-shows { list-style: none; padding: 0; margin: 0; }
.dv-show-row {
  display: grid;
  grid-template-columns: 140px 1fr 160px 100px 120px;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--dv-rule-strong);
}
.dv-show-row__date  { font-family: var(--dv-font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--dv-sodium); }
.dv-show-row__venue { font-family: var(--dv-font-display); font-size: clamp(1.125rem, 1.8vw, 1.375rem); text-transform: uppercase; color: var(--dv-salt); }
.dv-show-row__city  { font-family: var(--dv-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--dv-ash); }
.dv-show-row__cta {
  font-family: var(--dv-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dv-tar);
  background: var(--dv-salt);
  padding: 8px 12px;
  text-align: center;
  justify-self: center;
}
.dv-show-row__cta:hover { background: var(--dv-sodium); }

.dv-chip {
  font-family: var(--dv-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  white-space: nowrap;
  justify-self: start;
}
.dv-chip--live { color: var(--dv-hibiscus); background: transparent; border: 1px solid var(--dv-hibiscus); }
.dv-chip--sold { color: var(--dv-salt); background: var(--dv-hibiscus); border: none; }

/* --------------------------------------------------------------------------
   15. About
   -------------------------------------------------------------------------- */
.dv-about {
  display: flex;
  flex-direction: row;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.dv-about__portrait { width: 420px; height: 480px; flex-shrink: 0; }
.dv-about__text { flex: 1; }
.dv-about__para {
  font-family: var(--dv-font-body);
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--dv-salt);
  max-width: 620px;
}
.dv-about__para + .dv-about__para { margin-top: var(--dv-space-4); }

/* --------------------------------------------------------------------------
   16. Discography grid
   -------------------------------------------------------------------------- */
.dv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.dv-grid-card { cursor: pointer; display: block; transition: transform 220ms var(--dv-ease-out); }
.dv-grid-card:hover { transform: translateY(-6px); }
.dv-grid-card__art { height: 260px; }
.dv-grid-card__meta { display: flex; flex-direction: column; margin-top: 10px; }
.dv-grid-card__title { font-family: var(--dv-font-display); font-weight: 700; font-size: clamp(0.8125rem, 1.2vw, 1rem); text-transform: uppercase; color: var(--dv-salt); }
.dv-grid-card__year  { font-family: var(--dv-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dv-ash); margin-top: 4px; }

/* --------------------------------------------------------------------------
   17. News
   -------------------------------------------------------------------------- */
.dv-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.4vw, 2rem); }
.dv-news-card__thumb { height: 220px; }
.dv-news-card__date  { font-family: var(--dv-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dv-ash); margin-top: 12px; }
.dv-news-card__title { font-family: var(--dv-font-body); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); color: var(--dv-salt); margin-top: 8px; line-height: 1.4; }
.dv-news-card:hover .dv-news-card__title { color: var(--dv-sodium); }

/* --------------------------------------------------------------------------
   18. Contact CTA band
   -------------------------------------------------------------------------- */
.dv-contact-cta {
  background: var(--dv-deep);
  padding: clamp(3rem, 8vw, 6rem) var(--dv-pad);
  text-align: center;
  margin-top: clamp(3rem, 8vw, 6rem);
}
.dv-contact-cta__big {
  font-family: var(--dv-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--dv-salt);
}
.dv-contact-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.dv-contact-cta__chip {
  font-family: var(--dv-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-sodium);
  border: 1px solid var(--dv-sodium);
  padding: 10px 18px;
  transition: color 180ms ease, background 180ms ease;
}
.dv-contact-cta__chip:hover { color: var(--dv-tar); background: var(--dv-sodium); }

/* --------------------------------------------------------------------------
   19. Single release page
   -------------------------------------------------------------------------- */
.dv-release-page { padding: clamp(1.5rem, 3vw, 2.5rem) var(--dv-pad) clamp(3rem, 8vw, 6rem); }
.dv-back {
  font-family: var(--dv-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dv-ash);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  display: inline-block;
}
.dv-back:hover { color: var(--dv-salt); }
.dv-release-hero { display: flex; flex-direction: row; gap: clamp(1.5rem, 4vw, 3.5rem); }
.dv-release-hero__art { width: 520px; height: 520px; flex-shrink: 0; }
.dv-release-hero__title {
  font-family: var(--dv-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
  font-size: var(--dv-t-h1);
  color: var(--dv-salt);
  view-transition-name: dv-title;
}
.dv-release-hero__meta { font-family: var(--dv-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dv-ash); margin-top: 12px; }
.dv-release-page .dv-tracklist { margin-top: clamp(2rem, 4vw, 3.5rem); }
.dv-credits { margin-top: clamp(2.5rem, 5vw, 4rem); }
.dv-credits__text { font-family: var(--dv-font-body); font-size: clamp(0.875rem, 1.1vw, 0.9375rem); color: var(--dv-ash); line-height: 1.6; max-width: 560px; margin-top: 12px; }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.dv-footer {
  position: relative;
  border-top: 1px solid var(--dv-rule-strong);
  margin-top: clamp(4rem, 10vw, 8rem);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.75rem, 4vw, 2.5rem);
  overflow: hidden;
}
/* Soft warm glow bleeding up from the fold — echoes the reference render. */
.dv-footer::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  width: min(900px, 90%);
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 138, 61, 0.10) 0%, rgba(255, 138, 61, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.dv-footer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--dv-max);
  margin-inline: auto;
  padding-inline: var(--dv-pad);
}

/* Wordmark statement — outlined display type, echoes the marquee band. */
.dv-footer__brand {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.dv-footer__wordmark {
  font-family: var(--dv-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.9;
  font-size: clamp(2.5rem, 9vw, 6.5rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--dv-salt);
  transition: color 220ms var(--dv-ease-out), -webkit-text-stroke-color 220ms var(--dv-ease-out);
}
.dv-footer__brand:hover .dv-footer__wordmark,
.dv-footer__brand:focus-visible .dv-footer__wordmark {
  color: var(--dv-sodium);
  -webkit-text-stroke-color: var(--dv-sodium);
}
.dv-footer__place {
  font-family: var(--dv-font-mono);
  font-size: clamp(0.6875rem, 1vw, 0.8125rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dv-ash);
}

/* Social row — full-width divided cells with a trailing arrow, echoing the
   reference footer. Full-bleed rules top and bottom, hairline dividers between. */
.dv-footer__social {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  border-top: 1px solid var(--dv-rule);
  border-bottom: 1px solid var(--dv-rule);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.dv-footer__social a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 0 clamp(1rem, 2.5vw, 1.75rem);
  font-family: var(--dv-font-body);
  font-size: 0.9375rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--dv-salt);
  background-image: none; /* cancel .dv-link underline gradient from the walker */
  border-left: 1px solid var(--dv-rule);
  transition: background-color 220ms ease, color 220ms ease;
}
.dv-footer__social a:first-child { border-left: 0; }
.dv-footer__social a::after {
  content: "→";
  color: var(--dv-ash);
  transition: transform 220ms var(--dv-ease-out), color 220ms ease;
}
.dv-footer__social a:hover,
.dv-footer__social a:focus-visible {
  background-color: rgba(255, 138, 61, 0.06);
  color: var(--dv-sodium);
}
.dv-footer__social a:hover::after,
.dv-footer__social a:focus-visible::after {
  color: var(--dv-sodium);
  transform: translateX(5px);
}

/* Column grid: collapses to a single column, fans out with room. */
.dv-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
}
.dv-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--dv-space-3); }
.dv-footer__heading {
  font-family: var(--dv-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dv-sodium);
  margin-bottom: var(--dv-space-2);
}
/* Normalise every column anchor (contact + walker-rendered menu links). */
.dv-footer__col a {
  font-family: var(--dv-font-body);
  font-size: 0.9375rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--dv-salt);
  line-height: 1.4;
}

/* Bottom bar: legal + back-to-top. */
.dv-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--dv-space-4);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--dv-rule);
}
.dv-footer__legal { font-family: var(--dv-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dv-ash); }
.dv-footer__top { font-family: var(--dv-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dv-ash); }
.dv-footer__top:hover { color: var(--dv-salt); }

/* --------------------------------------------------------------------------
   21. Content pages (page.php / single.php / 404)
   -------------------------------------------------------------------------- */
.dv-page { padding-block: clamp(3rem, 8vw, 6rem); }
.dv-page__title { font-family: var(--dv-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: var(--dv-t-h1); color: var(--dv-salt); view-transition-name: dv-title; }
.dv-prose { max-width: 720px; margin-top: var(--dv-space-6); }
.dv-prose p { margin-block: 0 var(--dv-space-4); font-size: var(--dv-t-body); color: var(--dv-salt); }
.dv-prose h2 { font-family: var(--dv-font-display); font-size: var(--dv-t-h2); text-transform: uppercase; letter-spacing: -0.02em; margin-block: var(--dv-space-7) var(--dv-space-4); }
.dv-prose h3 { font-family: var(--dv-font-display); font-size: var(--dv-t-h3); text-transform: uppercase; margin-block: var(--dv-space-6) var(--dv-space-3); }
.dv-prose a { color: var(--dv-sodium); }

/* --------------------------------------------------------------------------
   Article (single post) — editorial reading layout
   -------------------------------------------------------------------------- */
.dv-article { padding-block: clamp(2.5rem, 6vw, 5rem); }
.dv-wrap--reading { max-width: 760px; }
.dv-article__head { margin-top: var(--dv-space-5); }
.dv-article__eyebrow {
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-sodium);
  margin-bottom: var(--dv-space-4);
}
.dv-article__dot { margin: 0 0.55em; color: var(--dv-ash); }
/* Readable headline — mixed case, not the shouting uppercase of section titles. */
.dv-article__title {
  font-family: var(--dv-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--dv-salt);
  text-wrap: balance;
  view-transition-name: dv-title;
}
.dv-article__standfirst {
  font-family: var(--dv-font-body);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--dv-ash);
  margin-top: var(--dv-space-4);
  max-width: 44ch;
}
.dv-article__meta {
  font-family: var(--dv-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dv-ash);
  margin-top: var(--dv-space-5);
  padding-top: var(--dv-space-4);
  border-top: 1px solid var(--dv-rule);
}
.dv-article__figure { margin: clamp(2rem, 5vw, 3.5rem) 0; }
.dv-article__figure .dv-duotone--wide {
  aspect-ratio: 16 / 9;
  max-width: 1100px;
  margin-inline: auto;
}

/* Editorial prose — longer measure, generous leading, readable sub-heads. */
.dv-prose--article { margin-top: 0; }
.dv-prose--article p {
  font-size: clamp(1.05rem, 1.2vw, 1.1875rem);
  line-height: 1.75;
  margin-block: 0 var(--dv-space-5);
}
.dv-prose--article > p:first-of-type::first-letter {
  float: left;
  font-family: var(--dv-font-display);
  font-weight: 800;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.04em 0.12em 0 0;
  color: var(--dv-sodium);
}
.dv-prose--article h2 {
  font-family: var(--dv-font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-block: var(--dv-space-7) var(--dv-space-3);
  color: var(--dv-salt);
}
.dv-prose--article h3 {
  font-family: var(--dv-font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  text-transform: none;
  margin-block: var(--dv-space-6) var(--dv-space-2);
  color: var(--dv-salt);
}
.dv-prose--article blockquote {
  margin: var(--dv-space-6) 0;
  padding-left: var(--dv-space-5);
  border-left: 3px solid var(--dv-sodium);
  font-family: var(--dv-font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.3;
  color: var(--dv-salt);
}
.dv-prose--article ul,
.dv-prose--article ol { margin: 0 0 var(--dv-space-5) 1.25em; color: var(--dv-salt); }
.dv-prose--article li { margin-bottom: var(--dv-space-2); line-height: 1.65; }
.dv-prose--article a {
  color: var(--dv-sodium);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.dv-prose--article img { max-width: 100%; height: auto; margin-block: var(--dv-space-5); }
.dv-prose--article figure { margin: var(--dv-space-6) 0; }
.dv-prose--article figcaption {
  font-family: var(--dv-font-mono);
  font-size: 12px;
  color: var(--dv-ash);
  margin-top: var(--dv-space-2);
}

/* --------------------------------------------------------------------------
   Responsive media embeds (YouTube / oEmbed) — constrain to the column,
   force 16:9 instead of the provider's fixed 560×315.
   -------------------------------------------------------------------------- */
.dv-prose iframe,
.dv-prose--article iframe,
.dv-prose video,
.dv-prose--article video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  margin-block: var(--dv-space-6);
}
.dv-prose .wp-block-embed,
.dv-prose--article .wp-block-embed,
.dv-prose figure,
.dv-prose--article figure { margin-block: var(--dv-space-6); }
/* WordPress's own responsive-embed wrapper: let our aspect-ratio drive it. */
.wp-block-embed__wrapper { position: relative; }
.wp-block-embed__wrapper::before { content: none; }
/* Audio/portrait embeds (Spotify, Apple, SoundCloud) shouldn't be forced 16:9. */
.dv-prose iframe[src*="spotify"],
.dv-prose--article iframe[src*="spotify"],
.dv-prose iframe[src*="music.apple"],
.dv-prose--article iframe[src*="music.apple"],
.dv-prose iframe[src*="soundcloud"],
.dv-prose--article iframe[src*="soundcloud"] {
  aspect-ratio: auto;
  height: 352px;
}

/* Tags + prev/next */
.dv-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dv-space-2);
  list-style: none;
  padding: var(--dv-space-5) 0 0;
  margin: var(--dv-space-8) 0 0;
  border-top: 1px solid var(--dv-rule);
}
.dv-article__tags a {
  font-family: var(--dv-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dv-ash);
  border: 1px solid var(--dv-rule);
  padding: 4px 10px;
}
.dv-article__tags a:hover { color: var(--dv-sodium); border-color: var(--dv-sodium); }
.dv-article__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--dv-space-4);
  margin-top: var(--dv-space-7);
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dv-article__nav a { color: var(--dv-ash); }
.dv-article__nav a:hover { color: var(--dv-sodium); }
.dv-article__next { margin-left: auto; text-align: right; }

/* --------------------------------------------------------------------------
   Bio page — portrait + at-a-glance facts alongside the prose
   -------------------------------------------------------------------------- */
.dv-bio__head { margin-bottom: var(--dv-space-7); }
.dv-bio__title { view-transition-name: dv-title; }
.dv-bio__layout {
  display: grid;
  grid-template-columns: minmax(260px, 5fr) 7fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.dv-bio__aside { position: sticky; top: var(--dv-space-8); }
.dv-bio__portrait { position: relative; aspect-ratio: 4 / 5; }
.dv-bio__portrait .dv-duotone { position: absolute; inset: 0; height: 100%; }
.dv-bio__facts { margin: var(--dv-space-5) 0 0; }
.dv-bio__fact {
  display: flex;
  justify-content: space-between;
  gap: var(--dv-space-4);
  padding: var(--dv-space-3) 0;
  border-bottom: 1px solid var(--dv-rule);
}
.dv-bio__fact dt {
  flex: none;
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dv-ash);
}
.dv-bio__fact dd {
  margin: 0;
  text-align: right;
  font-family: var(--dv-font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--dv-salt);
}
.dv-bio__body { margin-top: 0; max-width: none; }

@media (max-width: 860px) {
  .dv-bio__layout { grid-template-columns: 1fr; }
  .dv-bio__aside { position: static; }
  .dv-bio__portrait { aspect-ratio: 3 / 4; max-width: 420px; }
}
.dv-404 { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }
.dv-404__code { font-family: var(--dv-font-display); font-weight: 900; font-size: var(--dv-t-display); line-height: 0.9; color: var(--dv-salt); }

/* --------------------------------------------------------------------------
   22. Motion: page transitions
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: dv-out 180ms var(--dv-ease-in) both;
}
::view-transition-new(root) {
  animation: dv-in 420ms var(--dv-ease-out) both;
}
@keyframes dv-out {
  to { transform: translateY(-6vh); opacity: 0; }
}
@keyframes dv-in {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* JS fallback curtain (Firefox / no cross-doc VT) */
.dv-curtain-fallback {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: var(--dv-tar);
  opacity: 0;
  transform: translateY(2vh);
  pointer-events: none;
  transition: opacity 160ms var(--dv-ease-in), transform 160ms var(--dv-ease-in);
}
.dv-curtain-fallback.is-active { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   23. Motion: intro curtain (JS-injected, homepage, once per session)
   -------------------------------------------------------------------------- */
.dv-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--dv-tar);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: transform 350ms var(--dv-ease-out), opacity 350ms ease;
}
.dv-intro.is-lifting { transform: translateY(-100%); opacity: 0; }
.dv-intro__mark {
  width: 0;
  height: 48px;
  background: var(--dv-sodium);
  transform: rotate(45deg);
  transition: width 400ms var(--dv-ease-out);
}
.dv-intro.is-struck .dv-intro__mark { width: 48px; }
.dv-intro__time {
  font-family: var(--dv-font-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--dv-salt);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   24. Motion: scroll reveals
   -------------------------------------------------------------------------- */
.dv-reveal {
  animation: dv-rise linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 55%;
}
@keyframes dv-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* IO fallback: JS toggles when scroll-timeline unsupported */
.no-view-timeline .dv-reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--dv-ease-out), transform 600ms var(--dv-ease-out); animation: none; }
.no-view-timeline .dv-reveal.is-in { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   25. Custom cursor (pointer:fine only)
   -------------------------------------------------------------------------- */
@media (pointer: fine) {
  .dv-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border: 1px solid var(--dv-sodium);
    border-radius: 50%;
    pointer-events: none;
    z-index: 250;
    transition: transform 120ms ease, width 160ms ease, height 160ms ease, background 160ms ease;
    mix-blend-mode: difference;
  }
  .dv-cursor.is-magnetic { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: rgba(255,138,61,0.12); }
}

/* --------------------------------------------------------------------------
   26. Click-to-load audio embeds
   -------------------------------------------------------------------------- */
.dv-embed { position: relative; background: var(--dv-deep); aspect-ratio: 16 / 9; }
.dv-embed__poster {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: none;
  background: var(--dv-deep);
  color: var(--dv-salt);
  font-family: var(--dv-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dv-embed__play {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--dv-sodium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dv-sodium);
}

/* Video posters: self-hosted image fills behind the play button until the
   third-party player loads on click. */
.dv-embed .dv-duotone__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dv-embed .dv-duotone__placeholder { position: absolute; inset: 0; }
.dv-embed__poster { cursor: pointer; }
.dv-embed__poster .dv-embed__play {
  position: relative;
  z-index: 1;
  background: rgba(12, 17, 20, 0.55);
  transition: transform 200ms var(--dv-ease-out), background 200ms ease, color 200ms ease;
}
.dv-embed__poster:hover .dv-embed__play {
  transform: scale(1.08);
  background: var(--dv-sodium);
  color: var(--dv-tar);
}
.dv-embed__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-left: 12px solid currentColor;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.dv-embed__poster:focus-visible { outline: 2px solid var(--dv-sodium); outline-offset: -2px; }
.dv-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dv-embed--feature { margin: var(--dv-space-6) 0; }
.dv-embed--link { display: block; }

/* Videos archive grid */
.dv-videos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  margin-top: var(--dv-space-6);
}
.dv-video-card__meta { display: flex; flex-direction: column; margin-top: 12px; }
.dv-video-card__title {
  font-family: var(--dv-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--dv-salt);
}
.dv-video-card:hover .dv-video-card__title { color: var(--dv-sodium); }
.dv-video-card__date {
  font-family: var(--dv-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dv-ash);
  margin-top: 4px;
}
.dv-video-page__release {
  margin-top: var(--dv-space-6);
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dv-ash);
}

/* --------------------------------------------------------------------------
   27. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .dv-grid { grid-template-columns: repeat(2, 1fr); }
  .dv-tracklist__row { grid-template-columns: 32px 1fr 160px 56px; }
}

@media (max-width: 860px) {
  .dv-nav { display: none; }
  .dv-nav-toggle { display: flex; }
  .dv-news { grid-template-columns: 1fr; }
  .dv-release-band,
  .dv-about,
  .dv-release-hero { flex-direction: column; }
  .dv-release-band__art,
  .dv-about__portrait,
  .dv-release-hero__art { width: 100%; }
  .dv-release-band__art { height: 280px; }
  .dv-about__portrait { height: 260px; }
  .dv-release-hero__art { height: 320px; }
  .dv-show-row { grid-template-columns: 1fr; gap: 6px; }
  .dv-show-row__cta { justify-self: start; }
  .dv-chip { justify-self: start; }
}

@media (max-width: 700px) {
  /* Social row stacks — dividers move from left edges to top edges. */
  .dv-footer__social { grid-template-columns: 1fr; }
  .dv-footer__social a { border-left: 0; border-top: 1px solid var(--dv-rule); min-height: 56px; }
  .dv-footer__social a:first-child { border-top: 0; }
}

@media (max-width: 560px) {
  .dv-grid { grid-template-columns: 1fr 1fr; }
  .dv-videos { grid-template-columns: 1fr; }
  .dv-tracklist__row { grid-template-columns: 24px 1fr 56px; }
  .dv-tracklist__feat { display: none; }
  .dv-hero { min-height: 560px; height: 86vh; height: 86dvh; }
}

/* --------------------------------------------------------------------------
   28. Motion guardrails
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .dv-marquee__track { animation: none !important; }
  .dv-reveal { opacity: 1 !important; transform: none !important; }
}

/* Metered-data mode (SPEC §4.6): stop the always-running marquee animation so
   Save-Data users on mid-range Android don't pay for perpetual motion. */
@media (prefers-reduced-data: reduce) {
  .dv-marquee__track { animation: none !important; }
}

/* --------------------------------------------------------------------------
   29. Phase 4 — archives, single templates, contact, links
   -------------------------------------------------------------------------- */

/* Shared archive scaffolding */
.dv-archive__head { margin-bottom: var(--dv-space-7); }
.dv-archive__sub {
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-ash);
  margin: var(--dv-space-8) 0 var(--dv-space-4);
}

/* Release filter — CSS-only, driven by :has() + :checked */
.dv-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dv-space-2);
  border: 0;
  padding: 0;
  margin: 0 0 var(--dv-space-6);
}
.dv-filter__btn {
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dv-ash);
  padding: var(--dv-space-2) var(--dv-space-4);
  border: 1px solid var(--dv-rule);
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.dv-filter__btn:hover { color: var(--dv-salt); border-color: var(--dv-rule-strong); }
.dv-filter__input:checked + .dv-filter__btn {
  color: var(--dv-tar);
  background: var(--dv-sodium);
  border-color: var(--dv-sodium);
}
.dv-filter__input:focus-visible + .dv-filter__btn {
  outline: 2px solid var(--dv-sodium);
  outline-offset: 2px;
}
.dv-grid--archive { margin-top: var(--dv-space-5); }
.dv-grid--archive .dv-grid-card__art { height: 300px; }
.dv-archive:has(#dv-f-album:checked)  .dv-grid-card:not([data-type="album"]),
.dv-archive:has(#dv-f-ep:checked)     .dv-grid-card:not([data-type="ep"]),
.dv-archive:has(#dv-f-single:checked) .dv-grid-card:not([data-type="single"]) { display: none; }

/* Shows archive — past disclosure */
.dv-disclosure { margin-top: var(--dv-space-7); border-top: 1px solid var(--dv-rule); }
.dv-disclosure__summary {
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dv-ash);
  padding: var(--dv-space-4) 0;
  cursor: pointer;
}
.dv-disclosure[open] .dv-disclosure__summary { color: var(--dv-salt); }
.dv-shows--past { opacity: 0.66; }
.dv-show-row--past .dv-show-row__cta { color: var(--dv-ash); }

/* Single show */
.dv-show-page__head { margin-bottom: var(--dv-space-6); }
.dv-show-page__where {
  font-family: var(--dv-font-body);
  font-size: var(--dv-t-h3);
  color: var(--dv-salt);
  margin-top: var(--dv-space-3);
}
.dv-show-page__city { color: var(--dv-ash); }
.dv-show-page__status {
  display: flex;
  align-items: center;
  gap: var(--dv-space-4);
  margin-top: var(--dv-space-5);
  flex-wrap: wrap;
}

/* Photos */
.dv-photogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
}
.dv-photocard { display: block; transition: transform 220ms var(--dv-ease-out); }
.dv-photocard:hover { transform: translateY(-6px); }
.dv-photocard__thumb { height: 320px; }
.dv-photocard__meta { display: flex; flex-direction: column; margin-top: 10px; }
.dv-photocard__title { font-family: var(--dv-font-display); font-weight: 700; text-transform: uppercase; color: var(--dv-salt); }
.dv-photocard__credit { font-family: var(--dv-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dv-ash); margin-top: 4px; }

/* Single photoset — full-colour lightbox grid */
.dv-photoset__credit {
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dv-ash);
  margin-top: var(--dv-space-3);
}
.dv-lightbox {
  margin-top: var(--dv-space-6);
  columns: 3 240px;
  column-gap: var(--dv-space-4);
}
.dv-lightbox__item { display: block; margin: 0 0 var(--dv-space-4); break-inside: avoid; }
.dv-lightbox__img { width: 100%; height: auto; display: block; }

/* Press / EPK */
.dv-epk { margin-bottom: var(--dv-space-8); }
.dv-press { list-style: none; margin: var(--dv-space-4) 0 0; padding: 0; }
.dv-press-item {
  display: grid;
  grid-template-columns: 96px 200px 1fr;
  gap: var(--dv-space-4);
  align-items: baseline;
  padding: var(--dv-space-4) 0;
  border-top: 1px solid var(--dv-rule);
}
.dv-press-item__date,
.dv-press-item__outlet { font-family: var(--dv-font-mono); font-size: var(--dv-t-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dv-ash); }
.dv-press-item__outlet { color: var(--dv-salt); }
.dv-press-item__title { font-family: var(--dv-font-body); font-size: var(--dv-t-body); color: var(--dv-salt); }

/* Contact */
.dv-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--dv-space-5);
  margin-top: var(--dv-space-6);
}
.dv-contact-card {
  border: 1px solid var(--dv-rule);
  padding: var(--dv-space-5);
  scroll-margin-top: var(--dv-space-9);
}
.dv-contact-card__label { font-family: var(--dv-font-display); font-weight: 800; text-transform: uppercase; font-size: var(--dv-t-h3); color: var(--dv-salt); }
.dv-contact-card__desc { color: var(--dv-ash); margin: var(--dv-space-2) 0 var(--dv-space-4); }
.dv-contact-card__email { font-family: var(--dv-font-mono); font-size: var(--dv-t-meta); letter-spacing: 0.06em; color: var(--dv-sodium); }
.dv-contact-card__email--tbd { color: var(--dv-ash); }
.dv-contact__phone { font-family: var(--dv-font-mono); font-size: var(--dv-t-meta); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dv-ash); margin-top: var(--dv-space-6); }

/* Links hub — self-hosted linktree */
.dv-wrap--narrow { max-width: 560px; }
.dv-links__inner { padding-block: clamp(2rem, 5vw, 3.5rem); }

.dv-links__head { text-align: center; margin-bottom: var(--dv-space-6); }
.dv-links__avatar {
  position: relative;
  width: clamp(96px, 26vw, 132px);
  aspect-ratio: 1;
  margin: 0 auto var(--dv-space-4);
  overflow: hidden;
  border: 1px solid var(--dv-rule-strong);
}
.dv-links__avatar .dv-duotone { position: absolute; inset: 0; height: 100%; }
.dv-links__avatar .dv-duotone__img { object-position: 50% 18%; }
.dv-links__name {
  font-family: var(--dv-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  color: var(--dv-salt);
}
.dv-links__tag {
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-ash);
  margin-top: 8px;
}
.dv-links__intro { margin-top: var(--dv-space-4); color: var(--dv-salt); }
.dv-links__intro p { margin: 0; }

/* Featured current release */
.dv-links__feature {
  display: flex;
  align-items: center;
  gap: var(--dv-space-4);
  padding: 12px;
  margin-bottom: var(--dv-space-5);
  border: 1px solid var(--dv-rule-strong);
  transition: border-color 180ms ease, transform 180ms var(--dv-ease-out);
}
.dv-links__feature:hover { border-color: var(--dv-sodium); transform: translateY(-2px); }
.dv-links__feature-art {
  position: relative;
  flex: none;
  width: 68px;
  height: 68px;
  overflow: hidden;
}
.dv-links__feature-art .dv-duotone__img { width: 100%; height: 100%; object-fit: cover; }
.dv-links__feature-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dv-links__feature-eyebrow { font-family: var(--dv-font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dv-sodium); }
.dv-links__feature-title { font-family: var(--dv-font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 3vw, 1.4rem); color: var(--dv-salt); line-height: 1; }
.dv-links__feature-cta { font-family: var(--dv-font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dv-ash); }

/* Profile buttons */
.dv-linklist { display: flex; flex-direction: column; gap: var(--dv-space-2); }
.dv-linkbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dv-space-3);
  font-family: var(--dv-font-mono);
  font-size: var(--dv-t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dv-salt);
  border: 1px solid var(--dv-rule-strong);
  padding: var(--dv-space-4) var(--dv-space-4);
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms var(--dv-ease-out);
}
.dv-linkbtn__arrow { color: var(--dv-ash); transition: transform 180ms var(--dv-ease-out), color 180ms ease; }
.dv-linkbtn:hover { color: var(--dv-tar); background: var(--dv-sodium); border-color: var(--dv-sodium); transform: translateY(-2px); }
.dv-linkbtn:hover .dv-linkbtn__arrow { color: var(--dv-tar); transform: translate(2px, -2px); }

.dv-links__foot {
  text-align: center;
  margin-top: var(--dv-space-7);
  font-family: var(--dv-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dv-ash);
}

@media (max-width: 860px) {
  .dv-photogrid { grid-template-columns: repeat(2, 1fr); }
  .dv-contact-grid { grid-template-columns: 1fr; }
  .dv-press-item { grid-template-columns: 1fr; gap: 4px; }
  .dv-lightbox { columns: 2 160px; }
}

@media (max-width: 560px) {
  .dv-photogrid { grid-template-columns: 1fr; }
  .dv-grid--archive .dv-grid-card__art { height: 240px; }
}