/* Cambatta — artist blueprint stylesheet.
 *
 * Loaded AFTER assets/css/style.css by blueprints/artist/templates/layout.php,
 * so it may override the shim utilities in that file but must not depend on
 * Tailwind having been built.
 *
 * ── Token contract ────────────────────────────────────────────────────────────
 * There is NO shared token vocabulary in this network. `---engine-kit`'s
 * theme-loader.css is imported by nobody, and `shared/ui/tokens.css` is
 * orphaned, so a `var()` written against either resolves to NOTHING — the
 * declaration is dropped silently and the element renders unstyled.
 *
 * This file therefore depends on exactly ONE upstream custom property:
 *
 *     --brand-hue   emitted by templates/layout.php's inline <style> from
 *                   291, e.g. `--brand-hue: 276;`
 *
 * and even that carries a literal fallback everywhere it is read, so the
 * blueprint renders correctly on a site where layout.php has been replaced.
 * Every other value is derived here, in the `--artist-*` namespace.
 *
 * `--artist-*` is deliberately NOT one of the namespaces Tailwind v4 owns
 * (--color-*, --text-*, --font-*, --leading-*, --tracking-*, --radius-*,
 * --shadow-*). Redefining one of those in an unlayered :root silently beats
 * `@layer theme` and would break every Tailwind utility class on the page.
 *
 * Colour is expressed in hsl() off --brand-hue rather than as hex literals, so
 * cloning the blueprint to a new artist is a one-number change and the palette
 * stays internally consistent at every hue.
 *
 * ── Colour scheme ─────────────────────────────────────────────────────────────
 * Dark is the DEFAULT, not a media-query branch — it matches the
 * `<meta name="theme-color" content="hsl(291, 30%, 8%)">` that
 * layout.php already emits. A light palette is layered on under
 * `prefers-color-scheme: light`. Depth in the dark palette comes from raised
 * surface lightness (--artist-elevated), never from shadows: a shadow against a
 * near-black background is invisible.
 *
 * Every foreground/background pair below clears WCAG AA (4.5:1) at every hue.
 * Layout is mobile-first and holds together at 320px.
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. Tokens
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --artist-hue: var(--brand-hue, 276);

  /* Surfaces — depth is lightness, not shadow. */
  --artist-bg:        hsl(var(--artist-hue, 276) 16% 5%);
  --artist-surface:   hsl(var(--artist-hue, 276) 14% 9%);
  --artist-elevated:  hsl(var(--artist-hue, 276) 14% 13%);
  --artist-sunken:    hsl(var(--artist-hue, 276) 18% 3%);

  /* Ink */
  --artist-ink:       hsl(var(--artist-hue, 276) 12% 95%);
  --artist-ink-muted: hsl(var(--artist-hue, 276) 8% 68%);
  --artist-ink-dim:   hsl(var(--artist-hue, 276) 8% 58%);

  /* Lines */
  --artist-line:        hsl(var(--artist-hue, 276) 12% 18%);
  --artist-line-strong: hsl(var(--artist-hue, 276) 12% 28%);

  /* Accent. --color-brand (hsl(hue, 65%, 50%)) is mid-lightness and fails AA as
     text on near-black at several hues, so link/accent ink is lifted to 74%. */
  --artist-accent:       hsl(var(--artist-hue, 276) 70% 74%);
  --artist-accent-hover: hsl(var(--artist-hue, 276) 78% 84%);
  --artist-accent-press: hsl(var(--artist-hue, 276) 62% 64%);
  --artist-on-accent:    hsl(var(--artist-hue, 276) 30% 8%);
  --artist-accent-soft:  hsl(var(--artist-hue, 276) 55% 22%);

  /* Status */
  --artist-ok:    hsl(148 52% 70%);
  --artist-error: hsl(6 82% 74%);

  --artist-focus: hsl(var(--artist-hue, 276) 90% 78%);

  /* Scale */
  --artist-space-1: 0.25rem;
  --artist-space-2: 0.5rem;
  --artist-space-3: 0.75rem;
  --artist-space-4: 1rem;
  --artist-space-6: 1.5rem;
  --artist-space-8: 2rem;
  --artist-space-12: 3rem;
  --artist-space-16: 4rem;

  --artist-round-sm: 6px;
  --artist-round-md: 10px;
  --artist-round-lg: 16px;
  --artist-round-full: 999px;

  --artist-wrap: 68rem;
  --artist-wrap-narrow: 40rem;
  --artist-header-h: 4rem;

  --artist-motion: 160ms;
  --artist-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Kept low-opacity / high-blur. Used only where a surface sits over an IMAGE
     or over the light palette — never as dark-mode depth. */
  --artist-lift: 0 18px 44px hsl(var(--artist-hue, 276) 40% 2% / 0.45);
}

@media (prefers-color-scheme: light) {
  :root {
    --artist-bg:        hsl(var(--artist-hue, 276) 24% 98%);
    --artist-surface:   hsl(var(--artist-hue, 276) 22% 96%);
    --artist-elevated:  hsl(var(--artist-hue, 276) 0% 100%);
    --artist-sunken:    hsl(var(--artist-hue, 276) 24% 94%);

    --artist-ink:       hsl(var(--artist-hue, 276) 18% 12%);
    --artist-ink-muted: hsl(var(--artist-hue, 276) 12% 34%);
    --artist-ink-dim:   hsl(var(--artist-hue, 276) 10% 42%);

    --artist-line:        hsl(var(--artist-hue, 276) 16% 87%);
    --artist-line-strong: hsl(var(--artist-hue, 276) 16% 74%);

    --artist-accent:       hsl(var(--artist-hue, 276) 62% 30%);
    --artist-accent-hover: hsl(var(--artist-hue, 276) 68% 22%);
    --artist-accent-press: hsl(var(--artist-hue, 276) 70% 18%);
    --artist-on-accent:    hsl(var(--artist-hue, 276) 20% 99%);
    --artist-accent-soft:  hsl(var(--artist-hue, 276) 60% 93%);

    --artist-ok:    hsl(148 62% 24%);
    --artist-error: hsl(6 68% 38%);

    --artist-focus: hsl(var(--artist-hue, 276) 72% 34%);

    --artist-lift: 0 14px 36px hsl(var(--artist-hue, 276) 30% 40% / 0.14);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. Base
   ══════════════════════════════════════════════════════════════════════════ */

.artist-site {
  background: var(--artist-bg, hsl(276 16% 5%));
  color: var(--artist-ink, hsl(276 12% 95%));
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

.artist-site main { flex: 1 0 auto; }

.artist-site a {
  color: var(--artist-accent, hsl(276 70% 74%));
  text-decoration: none;
}
.artist-site a:hover { color: var(--artist-accent-hover, hsl(276 78% 84%)); text-decoration: underline; }
.artist-site a:active { color: var(--artist-accent-press, hsl(276 62% 64%)); }

.artist-site :focus-visible {
  outline: 2px solid var(--artist-focus, hsl(276 90% 78%));
  outline-offset: 2px;
  border-radius: var(--artist-round-sm, 6px);
}

.artist-site img { max-width: 100%; height: auto; display: block; }

.artist-site h1,
.artist-site h2,
.artist-site h3 {
  line-height: 1.15;
  margin: 0 0 var(--artist-space-4, 1rem);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.skip-link {
  position: absolute;
  left: var(--artist-space-2, 0.5rem);
  top: -100%;
  z-index: 100;
  padding: var(--artist-space-2, 0.5rem) var(--artist-space-4, 1rem);
  background: var(--artist-elevated, hsl(276 14% 13%));
  color: var(--artist-ink, hsl(276 12% 95%));
  border: 1px solid var(--artist-line-strong, hsl(276 12% 28%));
  border-radius: var(--artist-round-sm, 6px);
}
.skip-link:focus { top: var(--artist-space-2, 0.5rem); }

.wrap {
  width: 100%;
  max-width: var(--artist-wrap, 68rem);
  margin-inline: auto;
  padding-inline: var(--artist-space-4, 1rem);
}
.wrap-narrow { max-width: var(--artist-wrap-narrow, 40rem); }

.section { padding-block: var(--artist-space-12, 3rem); }
.section-alt { background: var(--artist-surface, hsl(276 14% 9%)); }

.page-title { font-size: clamp(1.75rem, 5vw, 2.75rem); margin-bottom: var(--artist-space-6, 1.5rem); }
.section-title { font-size: clamp(1.15rem, 3vw, 1.5rem); margin-bottom: var(--artist-space-6, 1.5rem); }

.eyebrow,
.hero-eyebrow {
  margin: 0 0 var(--artist-space-2, 0.5rem);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--artist-ink-muted, hsl(276 8% 68%));
}

.lede { font-size: 1.125rem; color: var(--artist-ink, hsl(276 12% 95%)); }
.muted { color: var(--artist-ink-muted, hsl(276 8% 68%)); font-size: 0.9375rem; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--artist-space-3, 0.75rem);
  margin: 0 0 var(--artist-space-4, 1rem);
  color: var(--artist-ink-muted, hsl(276 8% 68%));
  font-size: 0.9375rem;
}
.meta > span + span::before { content: "·"; margin-right: var(--artist-space-3, 0.75rem); }

.empty-state {
  padding: var(--artist-space-8, 2rem) var(--artist-space-4, 1rem);
  border: 1px dashed var(--artist-line-strong, hsl(276 12% 28%));
  border-radius: var(--artist-round-md, 10px);
  color: var(--artist-ink-muted, hsl(276 8% 68%));
  text-align: center;
}

.link-arrow { font-weight: 600; white-space: nowrap; }

.prose p { max-width: 62ch; margin: 0 0 var(--artist-space-4, 1rem); }
.prose { color: var(--artist-ink, hsl(276 12% 95%)); }

/* Screen-reader-only. artist.js appends "(opens in a new tab)" nodes with it. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. Buttons — 4 states: default / hover / active / disabled (+ focus)
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--artist-space-2, 0.5rem);
  min-height: 44px;
  padding: var(--artist-space-3, 0.75rem) var(--artist-space-6, 1.5rem);
  border: 1px solid transparent;
  border-radius: var(--artist-round-full, 999px);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--artist-motion, 160ms) var(--artist-ease, ease),
              border-color var(--artist-motion, 160ms) var(--artist-ease, ease),
              color var(--artist-motion, 160ms) var(--artist-ease, ease),
              transform var(--artist-motion, 160ms) var(--artist-ease, ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--artist-accent, hsl(276 70% 74%));
  color: var(--artist-on-accent, hsl(276 30% 8%));
}
.artist-site .btn-primary { color: var(--artist-on-accent, hsl(276 30% 8%)); }
.btn-primary:hover { background: var(--artist-accent-hover, hsl(276 78% 84%)); }
.btn-primary:active { background: var(--artist-accent-press, hsl(276 62% 64%)); }

.btn-ghost {
  background: transparent;
  color: var(--artist-ink, hsl(276 12% 95%));
  border-color: var(--artist-line-strong, hsl(276 12% 28%));
}
.artist-site .btn-ghost { color: var(--artist-ink, hsl(276 12% 95%)); }
.btn-ghost:hover {
  background: var(--artist-elevated, hsl(276 14% 13%));
  border-color: var(--artist-accent, hsl(276 70% 74%));
}
.btn-ghost:active { background: var(--artist-surface, hsl(276 14% 9%)); }

.btn-small {
  min-height: 36px;
  padding: var(--artist-space-2, 0.5rem) var(--artist-space-4, 1rem);
  font-size: 0.875rem;
  background: var(--artist-elevated, hsl(276 14% 13%));
  color: var(--artist-ink, hsl(276 12% 95%));
  border-color: var(--artist-line-strong, hsl(276 12% 28%));
}
.artist-site .btn-small { color: var(--artist-ink, hsl(276 12% 95%)); }
.btn-small:hover { border-color: var(--artist-accent, hsl(276 70% 74%)); }
.btn-small:active { background: var(--artist-surface, hsl(276 14% 9%)); }

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  background: var(--artist-elevated, hsl(276 14% 13%));
  color: var(--artist-ink-dim, hsl(276 8% 58%));
  border-color: var(--artist-line, hsl(276 12% 18%));
}

@media (prefers-reduced-motion: reduce) {
  .artist-site *,
  .artist-site *::before,
  .artist-site *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. Header + nav
   ══════════════════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--artist-bg, hsl(276 16% 5%));
  border-bottom: 1px solid var(--artist-line, hsl(276 12% 18%));
}
.site-header.is-scrolled { background: var(--artist-surface, hsl(276 14% 9%)); }

.site-header-inner {
  max-width: var(--artist-wrap, 68rem);
  margin-inline: auto;
  padding: var(--artist-space-3, 0.75rem) var(--artist-space-4, 1rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--artist-space-3, 0.75rem);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--artist-space-3, 0.75rem);
  margin-right: auto;
  min-width: 0;
}
.artist-site .site-brand { color: var(--artist-ink, hsl(276 12% 95%)); }
.site-brand:hover { text-decoration: none; }
.site-brand:hover .brand-name { color: var(--artist-accent, hsl(276 70% 74%)); }

.brand-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--artist-round-full, 999px);
  object-fit: cover;
  background: var(--artist-elevated, hsl(276 14% 13%));
}

.brand-name {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--artist-motion, 160ms) var(--artist-ease, ease);
}

/* The toggle only exists once artist.js has taken over the nav. Without JS the
   nav stays visible and stacked, so a no-JS visitor is never stranded. */
.nav-toggle { display: none; }

.site-nav { width: 100%; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--artist-space-1, 0.25rem) var(--artist-space-4, 1rem);
}
.site-nav a {
  display: inline-block;
  padding: var(--artist-space-2, 0.5rem) 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--artist-ink-muted, hsl(276 8% 68%));
  border-bottom: 2px solid transparent;
}
.site-nav a:hover {
  color: var(--artist-ink, hsl(276 12% 95%));
  text-decoration: none;
  border-bottom-color: var(--artist-line-strong, hsl(276 12% 28%));
}
.site-nav a.active {
  color: var(--artist-ink, hsl(276 12% 95%));
  border-bottom-color: var(--artist-accent, hsl(276 70% 74%));
}

/* JS-enhanced: collapse to a disclosure below the nav breakpoint. */
.site-header[data-nav="enhanced"] .nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--artist-line-strong, hsl(276 12% 28%));
  border-radius: var(--artist-round-sm, 6px);
  cursor: pointer;
}
.site-header[data-nav="enhanced"] .nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--artist-ink, hsl(276 12% 95%));
  transition: transform var(--artist-motion, 160ms) var(--artist-ease, ease),
              opacity var(--artist-motion, 160ms) var(--artist-ease, ease);
}
.site-header[data-nav="enhanced"] .nav-toggle:hover {
  border-color: var(--artist-accent, hsl(276 70% 74%));
}
.site-header[data-nav="enhanced"] .nav-toggle:active {
  background: var(--artist-elevated, hsl(276 14% 13%));
}
.site-header[data-nav="enhanced"] .nav-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.site-header[data-nav="enhanced"] .nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header[data-nav="enhanced"] .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header[data-nav="enhanced"] .nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header[data-nav="enhanced"] .site-nav { display: none; }
.site-header[data-nav="enhanced"] .site-nav.is-open { display: block; }
.site-header[data-nav="enhanced"] .site-nav.is-open ul {
  flex-direction: column;
  gap: 0;
  padding-block: var(--artist-space-2, 0.5rem);
  border-top: 1px solid var(--artist-line, hsl(276 12% 18%));
}
.site-header[data-nav="enhanced"] .site-nav.is-open a {
  display: block;
  padding: var(--artist-space-3, 0.75rem) 0;
  border-bottom: 1px solid var(--artist-line, hsl(276 12% 18%));
}
.site-header[data-nav="enhanced"] .site-nav.is-open a.active {
  border-bottom-color: var(--artist-accent, hsl(276 70% 74%));
}

@media (min-width: 48em) {
  .site-header-inner { flex-wrap: nowrap; padding-block: var(--artist-space-4, 1rem); }
  .site-nav { width: auto; }
  .site-header[data-nav="enhanced"] .nav-toggle { display: none; }
  .site-header[data-nav="enhanced"] .site-nav { display: block; }
  .site-header[data-nav="enhanced"] .site-nav ul,
  .site-header[data-nav="enhanced"] .site-nav.is-open ul {
    flex-direction: row;
    gap: var(--artist-space-6, 1.5rem);
    padding-block: 0;
    border-top: 0;
  }
  .site-header[data-nav="enhanced"] .site-nav.is-open a {
    display: inline-block;
    padding: var(--artist-space-2, 0.5rem) 0;
    border-bottom: 2px solid transparent;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. Hero
   ══════════════════════════════════════════════════════════════════════════ */

/* index.php sets `style="--hero-image:url(…)"` on .hero when a banner exists.
   The gradient is a GRADIENT, not a flat scrim — a flat rgba() wash kills the
   photograph while a converging gradient keeps the image and still guarantees
   the text has a readable base at the bottom. */
.hero {
  position: relative;
  background-color: var(--artist-sunken, hsl(276 18% 3%));
  background-image:
    linear-gradient(
      to bottom,
      hsl(var(--artist-hue, 276) 30% 4% / 0.35) 0%,
      hsl(var(--artist-hue, 276) 30% 4% / 0.72) 55%,
      hsl(var(--artist-hue, 276) 16% 5%) 100%
    ),
    var(--hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--artist-line, hsl(276 12% 18%));
}

.hero-inner {
  padding-block: var(--artist-space-16, 4rem);
  min-height: min(62vh, 30rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-title {
  font-size: clamp(2.25rem, 11vw, 5rem);
  font-weight: 800;
  margin: 0 0 var(--artist-space-3, 0.75rem);
  color: var(--artist-ink, hsl(276 12% 95%));
}

.hero-tagline {
  margin: 0 0 var(--artist-space-6, 1.5rem);
  max-width: 46ch;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  color: var(--artist-ink-muted, hsl(276 8% 68%));
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--artist-space-3, 0.75rem);
}
.hero-actions .btn { flex: 1 1 auto; min-width: 10rem; }

@media (min-width: 40em) {
  .hero-actions .btn { flex: 0 0 auto; }
}

/* The hero always renders on its own dark plate, so it keeps light ink in the
   light palette too — inverting it here would fight the banner photograph. */
@media (prefers-color-scheme: light) {
  .hero {
    background-color: hsl(var(--artist-hue, 276) 18% 8%);
    background-image:
      linear-gradient(
        to bottom,
        hsl(var(--artist-hue, 276) 30% 4% / 0.30) 0%,
        hsl(var(--artist-hue, 276) 30% 4% / 0.70) 60%,
        hsl(var(--artist-hue, 276) 24% 10%) 100%
      ),
      var(--hero-image, none);
  }
  .hero-title { color: hsl(var(--artist-hue, 276) 12% 97%); }
  .hero-tagline,
  .hero-eyebrow { color: hsl(var(--artist-hue, 276) 10% 82%); }
  .hero-actions .btn-ghost {
    color: hsl(var(--artist-hue, 276) 12% 97%);
    border-color: hsl(var(--artist-hue, 276) 12% 60%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. Featured release + album grid
   ══════════════════════════════════════════════════════════════════════════ */

.featured {
  display: grid;
  gap: var(--artist-space-6, 1.5rem);
  padding: var(--artist-space-4, 1rem);
  background: var(--artist-surface, hsl(276 14% 9%));
  border: 1px solid var(--artist-line, hsl(276 12% 18%));
  border-radius: var(--artist-round-lg, 16px);
  transition: border-color var(--artist-motion, 160ms) var(--artist-ease, ease),
              background-color var(--artist-motion, 160ms) var(--artist-ease, ease);
}
.featured:hover {
  text-decoration: none;
  background: var(--artist-elevated, hsl(276 14% 13%));
  border-color: var(--artist-line-strong, hsl(276 12% 28%));
}
.featured:active { background: var(--artist-surface, hsl(276 14% 9%)); }

.featured-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--artist-round-md, 10px);
  background: var(--artist-elevated, hsl(276 14% 13%));
}

.featured-body { align-self: center; }
.featured-body h3 {
  font-size: clamp(1.375rem, 4vw, 2rem);
  margin-bottom: var(--artist-space-2, 0.5rem);
  color: var(--artist-ink, hsl(276 12% 95%));
}
.featured .link-arrow { color: var(--artist-accent, hsl(276 70% 74%)); }

@media (min-width: 40em) {
  .featured { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; }
}

.album-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--artist-space-4, 1rem);
}

.album-card {
  display: flex;
  flex-direction: column;
  gap: var(--artist-space-2, 0.5rem);
  height: 100%;
  padding: var(--artist-space-3, 0.75rem);
  background: var(--artist-surface, hsl(276 14% 9%));
  border: 1px solid var(--artist-line, hsl(276 12% 18%));
  border-radius: var(--artist-round-md, 10px);
  color: var(--artist-ink, hsl(276 12% 95%));
  transition: background-color var(--artist-motion, 160ms) var(--artist-ease, ease),
              border-color var(--artist-motion, 160ms) var(--artist-ease, ease);
}
.artist-site .album-card { color: var(--artist-ink, hsl(276 12% 95%)); }
.album-card:hover {
  text-decoration: none;
  background: var(--artist-elevated, hsl(276 14% 13%));
  border-color: var(--artist-line-strong, hsl(276 12% 28%));
}
.album-card:active { background: var(--artist-surface, hsl(276 14% 9%)); }

.album-card img,
.album-art-fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--artist-round-sm, 6px);
  object-fit: cover;
  background: var(--artist-elevated, hsl(276 14% 13%));
}

.album-art-fallback {
  display: grid;
  place-items: center;
  font-size: 2.25rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--artist-accent, hsl(276 70% 74%));
  background: var(--artist-accent-soft, hsl(276 55% 22%));
}

.album-title { font-weight: 600; line-height: 1.3; }
.album-year,
.album-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--artist-space-2, 0.5rem);
  margin-top: auto;
  font-size: 0.8125rem;
  color: var(--artist-ink-muted, hsl(276 8% 68%));
}

/* ══════════════════════════════════════════════════════════════════════════
   7. Release page
   ══════════════════════════════════════════════════════════════════════════ */

.release-header { display: grid; gap: var(--artist-space-6, 1.5rem); }

.release-art {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--artist-round-lg, 16px);
  background: var(--artist-elevated, hsl(276 14% 13%));
  box-shadow: var(--artist-lift, 0 18px 44px hsl(276 40% 2% / 0.45));
}

.release-meta { align-self: center; min-width: 0; }

@media (min-width: 44em) {
  .release-header { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; }
}

.tracklist {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: track;
  border: 1px solid var(--artist-line, hsl(276 12% 18%));
  border-radius: var(--artist-round-md, 10px);
  overflow: hidden;
  background: var(--artist-bg, hsl(276 16% 5%));
}

.track {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--artist-space-2, 0.5rem) var(--artist-space-3, 0.75rem);
  padding: var(--artist-space-3, 0.75rem) var(--artist-space-4, 1rem);
  border-bottom: 1px solid var(--artist-line, hsl(276 12% 18%));
}
.track:last-child { border-bottom: 0; }
.track:hover { background: var(--artist-surface, hsl(276 14% 9%)); }

.track-num {
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--artist-ink-dim, hsl(276 8% 58%));
  text-align: right;
}

.track-title { min-width: 0; font-weight: 500; }
.track-feat {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--artist-ink-muted, hsl(276 8% 68%));
}

.track-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--artist-ink-muted, hsl(276 8% 68%));
}

/* A Play link sits in the third column on wide rows and wraps under the title
   at 320px, where a third column would crush the track name. */
.track-link {
  grid-column: 2 / -1;
  justify-self: start;
  font-size: 0.875rem;
  font-weight: 600;
  padding: var(--artist-space-1, 0.25rem) var(--artist-space-3, 0.75rem);
  border: 1px solid var(--artist-line-strong, hsl(276 12% 28%));
  border-radius: var(--artist-round-full, 999px);
}
.track-link:hover {
  text-decoration: none;
  border-color: var(--artist-accent, hsl(276 70% 74%));
  background: var(--artist-elevated, hsl(276 14% 13%));
}
.track-link:active { background: var(--artist-surface, hsl(276 14% 9%)); }

@media (min-width: 30em) {
  .track { grid-template-columns: 2rem minmax(0, 1fr) auto auto; }
  .track-link { grid-column: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8. Shows
   ══════════════════════════════════════════════════════════════════════════ */

.show-list {
  list-style: none;
  margin: 0 0 var(--artist-space-8, 2rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--artist-space-2, 0.5rem);
}

.show {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--artist-space-1, 0.25rem) var(--artist-space-4, 1rem);
  padding: var(--artist-space-4, 1rem);
  background: var(--artist-surface, hsl(276 14% 9%));
  border: 1px solid var(--artist-line, hsl(276 12% 18%));
  border-radius: var(--artist-round-md, 10px);
}

.show-date {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--artist-accent, hsl(276 70% 74%));
  white-space: nowrap;
}

.show-body { display: flex; flex-direction: column; min-width: 0; }
.show-title { font-weight: 600; }
.show-venue { font-size: 0.9375rem; color: var(--artist-ink-muted, hsl(276 8% 68%)); }

.show .btn-small { justify-self: start; margin-top: var(--artist-space-2, 0.5rem); }

/* Past dates are context, not a call to action — receded, and the accent is
   dropped so the eye lands on Upcoming first. */
.show-list-past .show { background: transparent; }
.show-list-past .show-date { color: var(--artist-ink-dim, hsl(276 8% 58%)); }
.show-list-past .show-title { font-weight: 500; color: var(--artist-ink-muted, hsl(276 8% 68%)); }

@media (min-width: 40em) {
  .show { grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; }
  .show .btn-small { margin-top: 0; justify-self: end; }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. About — fact grid
   ══════════════════════════════════════════════════════════════════════════ */

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--artist-space-4, 1rem);
  margin: 0 0 var(--artist-space-6, 1.5rem);
}
.fact-grid > div {
  padding: var(--artist-space-4, 1rem);
  background: var(--artist-bg, hsl(276 16% 5%));
  border: 1px solid var(--artist-line, hsl(276 12% 18%));
  border-radius: var(--artist-round-md, 10px);
}
.fact-grid dt {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--artist-ink-muted, hsl(276 8% 68%));
  margin-bottom: var(--artist-space-1, 0.25rem);
}
.fact-grid dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════════════════
   10. Links page
   ══════════════════════════════════════════════════════════════════════════ */

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--artist-space-3, 0.75rem);
}

.link-button {
  display: block;
  min-height: 44px;
  padding: var(--artist-space-3, 0.75rem) var(--artist-space-4, 1rem);
  text-align: center;
  font-weight: 600;
  color: var(--artist-ink, hsl(276 12% 95%));
  background: var(--artist-surface, hsl(276 14% 9%));
  border: 1px solid var(--artist-line-strong, hsl(276 12% 28%));
  border-radius: var(--artist-round-full, 999px);
  transition: background-color var(--artist-motion, 160ms) var(--artist-ease, ease),
              border-color var(--artist-motion, 160ms) var(--artist-ease, ease),
              color var(--artist-motion, 160ms) var(--artist-ease, ease);
}
.artist-site .link-button { color: var(--artist-ink, hsl(276 12% 95%)); }
.link-button:hover {
  text-decoration: none;
  color: var(--artist-on-accent, hsl(276 30% 8%));
  background: var(--artist-accent, hsl(276 70% 74%));
  border-color: var(--artist-accent, hsl(276 70% 74%));
}
.link-button:active {
  background: var(--artist-accent-press, hsl(276 62% 64%));
  border-color: var(--artist-accent-press, hsl(276 62% 64%));
}

/* ══════════════════════════════════════════════════════════════════════════
   11. Press — photos + contact form
   ══════════════════════════════════════════════════════════════════════════ */

.press-photos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--artist-space-4, 1rem);
}
.press-photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--artist-round-md, 10px);
  background: var(--artist-elevated, hsl(276 14% 13%));
}

.stack-form { display: flex; flex-direction: column; gap: var(--artist-space-4, 1rem); }

.stack-form label { display: flex; flex-direction: column; gap: var(--artist-space-2, 0.5rem); }
.stack-form label > span:first-child {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--artist-ink, hsl(276 12% 95%));
}

.stack-form input[type="text"],
.stack-form input[type="email"],
.stack-form select,
.stack-form textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--artist-space-3, 0.75rem);
  font: inherit;
  color: var(--artist-ink, hsl(276 12% 95%));
  background: var(--artist-bg, hsl(276 16% 5%));
  border: 1px solid var(--artist-line-strong, hsl(276 12% 28%));
  border-radius: var(--artist-round-sm, 6px);
  transition: border-color var(--artist-motion, 160ms) var(--artist-ease, ease);
}
.stack-form textarea { min-height: 8rem; resize: vertical; }

.stack-form input::placeholder,
.stack-form textarea::placeholder { color: var(--artist-ink-dim, hsl(276 8% 58%)); }

.stack-form input:hover,
.stack-form select:hover,
.stack-form textarea:hover { border-color: var(--artist-line-strong, hsl(276 12% 28%)); }

.stack-form input:focus-visible,
.stack-form select:focus-visible,
.stack-form textarea:focus-visible {
  border-color: var(--artist-accent, hsl(276 70% 74%));
  outline: 2px solid var(--artist-focus, hsl(276 90% 78%));
  outline-offset: 1px;
}

.stack-form input:disabled,
.stack-form select:disabled,
.stack-form textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--artist-surface, hsl(276 14% 9%));
}

/* Error state is never colour alone — artist.js appends a .field-error message
   node and points aria-describedby at it. */
.stack-form input.has-error,
.stack-form select.has-error,
.stack-form textarea.has-error {
  border-color: var(--artist-error, hsl(6 82% 74%));
}

.field-error {
  display: flex;
  align-items: baseline;
  gap: var(--artist-space-2, 0.5rem);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--artist-error, hsl(6 82% 74%));
}
.field-error::before { content: "!"; font-weight: 800; }

.form-result:not(:empty) {
  margin-top: var(--artist-space-6, 1.5rem);
  padding: var(--artist-space-3, 0.75rem) var(--artist-space-4, 1rem);
  border: 1px solid var(--artist-line-strong, hsl(276 12% 28%));
  border-radius: var(--artist-round-sm, 6px);
  background: var(--artist-surface, hsl(276 14% 9%));
}

/* assets/js/contact-form.js REPLACES className with Tailwind utility names and
   drops `form-result` in the process. Tailwind is not built on a fresh clone,
   so without these shims the success/failure states render as plain body text.
   Kept scoped under .artist-site so they cannot leak into a built Tailwind page. */
.artist-site .mt-6 { margin-top: var(--artist-space-6, 1.5rem); }
.artist-site .text-green-700 {
  color: var(--artist-ok, hsl(148 52% 70%));
  font-weight: 600;
}
.artist-site .text-red-600 {
  color: var(--artist-error, hsl(6 82% 74%));
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   12. Footer
   ══════════════════════════════════════════════════════════════════════════ */

.site-footer {
  margin-top: var(--artist-space-16, 4rem);
  background: var(--artist-sunken, hsl(276 18% 3%));
  border-top: 1px solid var(--artist-line, hsl(276 12% 18%));
}

.site-footer-inner {
  max-width: var(--artist-wrap, 68rem);
  margin-inline: auto;
  padding: var(--artist-space-12, 3rem) var(--artist-space-4, 1rem);
  display: grid;
  gap: var(--artist-space-8, 2rem);
}

.footer-name { margin: 0; font-size: 1.125rem; font-weight: 700; }
.footer-meta {
  margin: var(--artist-space-1, 0.25rem) 0 0;
  color: var(--artist-ink-muted, hsl(276 8% 68%));
  font-size: 0.9375rem;
}

.footer-social ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--artist-space-2, 0.5rem) var(--artist-space-4, 1rem);
}
.footer-social a { font-size: 0.9375rem; }

.footer-contact p { margin: 0 0 var(--artist-space-2, 0.5rem); font-size: 0.9375rem; }
.footer-legal { color: var(--artist-ink-dim, hsl(276 8% 58%)); font-size: 0.8125rem; }

@media (min-width: 48em) {
  .site-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-contact { text-align: right; }
}

/* ══════════════════════════════════════════════════════════════════════════
   13. Print — a press page is printed more often than any other
   ══════════════════════════════════════════════════════════════════════════ */

@media print {
  .site-header,
  .site-footer,
  .hero-actions,
  .nav-toggle { display: none !important; }
  .artist-site { background: none; color: hsl(0 0% 0%); }
  .section-alt { background: none; }
  .artist-site a { color: hsl(0 0% 0%); text-decoration: underline; }
}