/* ZIO artist site — premium editorial design system.
   Ported from the approved Lovable prototype (zio-elevated @ ec3d0f23),
   adapted to static HTML/CSS. Single stylesheet, self-hosted fonts,
   no external requests. */

/* ---------- fonts (self-hosted, OFL — licenses in /assets/fonts/) ------- */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/archivo-black-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
}

/* ---------- tokens ------------------------------------------------------ */
:root {
  /* palette (from the approved prototype) */
  --bg: #0d0d0d;
  --surface: #141414;
  --surface-2: #1b1b1b;
  --text: #f2f2f2;
  --muted: #a3a3a3;
  --brand: #d7182a;   /* logo red — large/bold brand elements only (3.75:1) */
  --action: #e8442f;  /* action red — 4.89:1 on --bg, AA for normal text */
  --rule: #2a2a2a;

  /* typography */
  --font-display: "Archivo Black", "Arial Black", "Franklin Gothic Medium", system-ui, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* containers */
  --container-wide: 1360px;
  --container-default: 1160px;
  --container-narrow: 720px;
  --gutter: 1.25rem;

  /* motion */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}
@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}

/* ---------- base -------------------------------------------------------- */
* { box-sizing: border-box; min-width: 0; }

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

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* restrained grain */
  background-image: radial-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 3px 3px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
}
h1 { font-size: clamp(2.75rem, 9vw, 6.5rem); overflow-wrap: break-word; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.5rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; }
/* prose links never rely on color alone */
p a, .facts a, dd a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 2px;
}
p a:hover, .facts a:hover, dd a:hover { color: var(--text); }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

::selection { background: var(--brand); color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--action);
  color: var(--bg);
  padding: 0.6rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- layout utilities ------------------------------------------- */
.container,
.container-wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container { max-width: var(--container-default); }
.container-wide { max-width: var(--container-wide); }

.eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.section { padding-block: 3.5rem; }
.section + .section { border-top: 1px solid var(--rule); }
@media (min-width: 768px) {
  .section { padding-block: 4.5rem; }
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}
.section-link {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--action);
  text-decoration: none;
  padding: 0.75rem 0;
}
.section-link:hover, .section-link:focus-visible { text-decoration: underline; }

/* ---------- buttons ----------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.85rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--rule);
  color: var(--text);
  background: transparent;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn:hover, .btn:focus-visible { border-color: var(--action); }
.btn-primary {
  background: var(--action);
  border-color: var(--action);
  color: var(--bg);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-block { display: flex; width: 100%; min-height: 56px; justify-content: space-between; }

.platform-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- header ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--rule);
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(6px);
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 56px;
}
@media (min-width: 768px) {
  .site-header .bar { height: 64px; }
}
.wordmark { display: flex; align-items: center; min-height: 44px; }
.wordmark img { height: 20px; width: auto; }

.nav-desktop { display: none; }
.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-desktop a {
  position: relative;
  display: block;
  padding: 0.75rem 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.4rem;
  height: 1px;
  width: 0;
  background: var(--action);
  transition: width var(--dur-base) var(--ease-out);
}
.nav-desktop a:hover, .nav-desktop a:focus-visible,
.nav-desktop a[aria-current="page"] { color: var(--text); }
.nav-desktop a:hover::after, .nav-desktop a:focus-visible::after,
.nav-desktop a[aria-current="page"]::after { width: 100%; }

/* mobile nav: native disclosure — fully functional without JavaScript */
.nav-mobile { position: relative; }
.nav-mobile summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile summary:hover { border-color: var(--action); }
.nav-mobile summary .close { display: none; }
.nav-mobile[open] summary .open { display: none; }
.nav-mobile[open] summary .close { display: block; }
.nav-mobile .panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 230px;
  border: 1px solid var(--rule);
  background: var(--surface);
  z-index: 55;
}
.nav-mobile .panel ul { list-style: none; margin: 0; padding: 0.25rem 0; }
.nav-mobile .panel li + li { border-top: 1px solid var(--rule); }
.nav-mobile .panel a {
  display: block;
  padding: 0.9rem 1.25rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  text-decoration: none;
}
.nav-mobile .panel a[aria-current="page"] { color: var(--action); }
@media (min-width: 768px) {
  .nav-desktop { display: block; }
  .nav-mobile { display: none; }
}

/* ---------- hero -------------------------------------------------------- */
.hero-split {
  display: grid;
  gap: 2.5rem;
  align-items: end;
  padding-block: 3.5rem;
}
@media (min-width: 768px) {
  .hero-split {
    grid-template-columns: 1.25fr 1fr;
    padding-block: 6rem;
  }
}
.hero-title { font-size: clamp(3rem, 11vw, 7.5rem); }
.hero-title .accent { display: block; color: var(--brand); }
.hero-lede { max-width: 28rem; color: var(--muted); margin-top: 1.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-media {
  position: relative;
  padding: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.hero-media::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 4px;
  background: var(--brand);
}
.hero-media img { width: min(300px, 100%); margin-inline: auto; }
.hero-media.hero-portrait { padding: 0; }
.hero-media.hero-portrait img {
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center top;
}

/* sub-page hero */
.page-hero { padding-block: 3rem 2rem; }
@media (min-width: 768px) { .page-hero { padding-block: 4rem 2.5rem; } }
.page-hero h1 { font-size: clamp(1.9rem, 9.2vw, 5rem); }
.page-hero .lede { max-width: 36rem; color: var(--muted); margin-top: 1.25rem; }

/* ---------- stats strip ------------------------------------------------- */
.stats {
  border-block: 1px solid var(--rule);
  background: var(--surface);
}
.stats dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  margin: 0;
  padding-block: 2.5rem;
}
@media (min-width: 768px) {
  .stats dl { grid-template-columns: repeat(4, 1fr); }
}
.stats dt {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.stats dd {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
}

/* ---------- cards & covers ---------------------------------------------- */
.card-grid {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 560px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card-grid.cols-4 { }
@media (min-width: 1200px) { .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.release-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--rule);
  background: var(--surface);
  transition: border-color var(--dur-base) var(--ease-out);
}
.release-card:hover, .release-card:focus-within { border-color: var(--action); }
a.card-link { text-decoration: none; display: flex; flex-direction: column; flex: 1; }

.cover-slot {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.cover-slot img.fallback { width: 45%; opacity: 0.9; }
.cover-slot img.art { width: 100%; height: 100%; object-fit: cover; }

.card-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem; flex: 1; }
.card-body h3 { font-size: 1.1rem; line-height: 1.1; }
.card-meta { margin-top: auto; padding-top: 0.5rem; font-size: 0.75rem; color: var(--muted); }

/* ---------- track disclosures ------------------------------------------- */
details.tracks { border-top: 1px solid var(--rule); }
details.tracks > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.65rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out);
}
details.tracks > summary::-webkit-details-marker { display: none; }
details.tracks > summary:hover { color: var(--text); }
details.tracks > summary .chev {
  color: var(--action);
  transition: transform var(--dur-base) var(--ease-out);
}
details.tracks[open] > summary .chev { transform: rotate(180deg); }
details.tracks > summary .label-open { display: none; }
details.tracks[open] > summary .label-closed { display: none; }
details.tracks[open] > summary .label-open { display: inline; }

.track-rows {
  list-style: none;
  margin: 0 1rem 1rem;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.track-rows li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.15rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  min-height: 44px;
}
.track-rows li:last-child { border-bottom: 0; }
.track-rows .no { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.track-rows .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.listen {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--action);
  text-decoration: none;
  padding: 0 0.5rem;
}
a.listen:hover, a.listen:focus-visible { text-decoration: underline; }
.track-rows .nolink {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- discography filter bar -------------------------------------- */
.filterbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-block: 1px solid var(--rule);
  padding-block: 1.25rem;
  margin-top: 2rem;
}
@media (min-width: 900px) {
  .filterbar { flex-direction: row; align-items: center; justify-content: space-between; }
}
.searchbox {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 0.65rem 1rem;
  max-width: 22rem;
}
.searchbox:focus-within { border-color: var(--action); }
.searchbox input {
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  outline: none;
}
.searchbox input::placeholder { color: var(--muted); }
.filter-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-group button {
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.filter-group button:hover { border-color: var(--text); color: var(--text); }
.filter-group button[aria-pressed="true"] { border-color: var(--action); color: var(--action); }
.result-count { font-size: 0.75rem; color: var(--muted); margin-top: 1rem; }
[hidden] { display: none !important; }

/* singles list */
.singles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 2rem;
}
@media (min-width: 768px) { .singles-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .singles-list { grid-template-columns: repeat(3, 1fr); } }
.singles-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  content-visibility: auto;
  contain-intrinsic-size: auto 48px;
}
.singles-list .single-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.singles-list .single-cover {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.singles-list a {
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  padding-block: 0.55rem;
  margin-block: -0.55rem;
}
.singles-list a:hover, .singles-list a:focus-visible { color: var(--action); text-decoration: underline; }
.singles-list .release-meta { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }

/* project section (large disclosure) */
.project {
  border: 1px solid var(--rule);
  background: var(--surface);
  margin-top: 1.25rem;
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}
.project .project-head {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1rem;
}
.project .project-head .cover-slot {
  border: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.project h3 a { text-decoration: none; }
.project h3 a:hover, .project h3 a:focus-visible { color: var(--action); }
.project .release-meta { font-size: 0.8125rem; color: var(--muted); }
.release-meta a {
  color: var(--action);
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.5rem;
}

/* ---------- release detail --------------------------------------------- */
.breadcrumbs {
  padding-top: 1.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--action); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text); }

.detail-grid {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.5rem 3.5rem;
}
@media (min-width: 900px) {
  .detail-grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); padding-block: 3rem 4.5rem; }
}
.detail-grid .cover-slot { border: 1px solid var(--rule); }
.art-note { font-size: 0.75rem; color: var(--muted); margin-top: 0.75rem; }

.meta-dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
  margin: 2rem 0 0;
  border-block: 1px solid var(--rule);
  padding-block: 1.5rem;
  font-size: 0.875rem;
}
@media (min-width: 560px) { .meta-dl { grid-template-columns: repeat(3, 1fr); } }
.meta-dl dt {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.meta-dl dd { margin: 0.25rem 0 0; }
.meta-dl dd.mono { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }

.detail-tracks {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  border-block: 1px solid var(--rule);
}
.detail-tracks li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.detail-tracks li:last-child { border-bottom: 0; }
.detail-tracks .no { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.detail-tracks .dur { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- facts / press ----------------------------------------------- */
.fact-grid {
  display: grid;
  gap: 1px;
  margin: 0;
  border: 1px solid var(--rule);
  background: var(--rule);
}
@media (min-width: 560px) { .fact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fact-grid { grid-template-columns: repeat(4, 1fr); } }
.fact-grid > div { background: var(--surface); padding: 1rem; }
/* Some releases report only one fact. In a 2- or 4-up grid that leaves the rest
   of the row as an empty panel, which reads as missing data rather than as data
   that does not exist, so a lone fact takes the whole row. */
.fact-grid > div:only-child { grid-column: 1 / -1; }
.fact-grid dt {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.fact-grid dd { margin: 0.35rem 0 0; font-size: 0.9375rem; }

.asset-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .asset-tiles { grid-template-columns: repeat(2, 1fr); } }
.asset-tiles li { border: 1px solid var(--rule); background: var(--surface); }
.asset-tiles .tile-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  padding: 2rem;
}
.asset-tiles .tile-preview img { width: min(220px, 60%); }
.asset-tiles .portrait-tile { padding: 0.75rem; }
.asset-tiles .tile-preview img.portrait-preview {
  width: auto;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}
.asset-tiles .tile-body { padding: 1.25rem; }
.asset-tiles .tile-body p { color: var(--muted); font-size: 0.875rem; }

/* ---------- link hub ----------------------------------------------------- */
.hub { max-width: 32rem; margin-inline: auto; padding: 3rem var(--gutter) 2rem; }
.hub-head { text-align: center; }
.hub-head img { margin-inline: auto; width: min(220px, 60%); }
.hub-head p { color: var(--muted); font-size: 0.9375rem; margin-top: 1rem; }
.hub-actions { display: grid; gap: 0.75rem; margin-top: 2.5rem; }
.hub-feature {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 1rem;
  margin-top: 2rem;
}
.hub-feature .cover-slot { border: 1px solid var(--rule); }

/* ---------- generic content blocks -------------------------------------- */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 0.5rem 0; border-bottom: 1px dashed var(--rule); }
.facts li:last-child { border-bottom: 0; }

.prose { max-width: 42rem; color: var(--muted); }
.prose strong { color: var(--text); }

/* ---------- video facade ------------------------------------------------- */
/* Static preview linking to YouTube; site.js upgrades the click to an
   in-place youtube-nocookie iframe. Fully functional without JavaScript. */
.video-facade {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  overflow: hidden;
  text-decoration: none;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-facade .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.video-facade .play span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  background: rgba(13, 13, 13, 0.82);
  border: 1px solid var(--action);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-out);
}
.video-facade:hover .play span, .video-facade:focus-visible .play span { background: var(--brand); }
.video-facade .play .tri { color: var(--action); }
.video-facade:hover .play .tri, .video-facade:focus-visible .play .tri { color: #fff; }
.video-frame { aspect-ratio: 16 / 9; border: 1px solid var(--rule); }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-note { font-size: 0.75rem; color: var(--muted); margin-top: 0.75rem; }

/* ---------- footer ------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
}
.site-footer .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-footer nav a {
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.75rem 0;
  display: inline-block;
}
.site-footer nav a:hover, .site-footer nav a:focus-visible { color: var(--text); text-decoration: underline; }

.backtop { text-align: right; padding-block: 1.5rem 0; }

/* ---------- layout utilities -------------------------------------------- */
/* These replace the inline style="..." attributes the pages used to carry.
   The site's CSP sets style-src 'self' with no 'unsafe-inline', so inline
   style attributes were being dropped by the browser and never applied. */

.mt-1  { margin-top: 0.25rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-12 { margin-top: 3rem; }
.mb-0  { margin-bottom: 0; }
.pt-0  { padding-top: 0; }

.measure-wide { max-width: 860px; }

/* link-in-bio hub */
.hub-title { font-size: 1.4rem; margin-top: 1.5rem; }
.hub-featured-title { font-size: 1.3rem; margin-top: 0.25rem; }
.hub-featured-action { margin: 0.5rem 0 0; }
.hub-featured-action .section-link { padding: 0; }
.hub-legal {
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 2.5rem;
}

/* discography card footer link */
.release-card-footer { padding: 0 1rem 1rem; }

/* ---------- consent banner ----------------------------------------------- */
/* Built by consent.js. Fixed to the bottom so appearing costs no layout
   shift, and sized so it never covers more than a strip of the page. */

.consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: 1rem var(--gutter);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.consent-inner {
  max-width: var(--container-default);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.consent-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  max-width: 62ch;
}
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent-btn { font-size: 0.75rem; padding: 0.5rem 1rem; }

/* Reopen control: an action button that reads as part of the footer. */
.consent-reopen {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.75rem 0;
}
.consent-reopen:hover, .consent-reopen:focus-visible { color: var(--text); text-decoration: underline; }
.hub-legal .consent-reopen {
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  padding: 0;
}

@media (max-width: 480px) {
  .consent-inner { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: flex-end; }
}

/* ---------- motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}