/* ============================================================
   SONDOR — The Monograph
   Production recreation of the "El Archivo Vivo" landing page.
   Edition: Cumbia · Voice: Editorial · Atmosphere: Archival
   ============================================================ */

:root {
  /* Cumbia edition palette */
  --bg: #F4F1EA;        /* warm dusty paper */
  --ink: #171612;       /* high-contrast cover ink */
  --muted: #6A675F;
  --rule: #D6D1C5;
  --accent: #E8611A;    /* cumbia */
  --body: #3D3D38;

  /* Dark-slab tokens (chapter / closing) */
  --on-dark: #F4F1EA;
  --muted-on-dark: rgba(244, 241, 234, 0.5);
  --rule-on-dark: rgba(244, 241, 234, 0.18);

  /* Genre accents */
  --cumbia: #E8611A;
  --folklore: #2E7D32;
  --tango: #9B1C1C;
  --candombe: #B06A00;
  --murga: #1565A8;

  /* Type families */
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Editorial easing */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Horizontal page padding (1440 design uses 48px) */
  --pad: clamp(20px, 3.3vw, 48px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--bg); }
::-webkit-scrollbar { width: 0; height: 0; }

button { font-family: inherit; }
input { font-family: inherit; }
a { color: inherit; }
em, i { font-style: normal; }

/* SVG grain — tileable fractal noise overlay */
.mono {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  /* `clip` keeps horizontal bleed hidden WITHOUT creating a scroll container,
     so `position: sticky` inside (history timeline pin) keeps working.
     Plain `overflow: hidden` would silently break it. */
  overflow-x: clip;
  overflow-y: visible;
}

/* Paper grain drifting across the whole monograph (archival = 0.05) */
.paper-grain {
  position: absolute;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* ============================================================
   COVER
   ============================================================ */
.cover {
  position: relative;
  min-height: 1020px;
  /* top padding clears the fixed nav (~70px) + 24px gap before the headline */
  padding: 94px var(--pad) 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 0.5px solid var(--rule);
}

.cover__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;                                  /* archival */
  filter: grayscale(0.55) contrast(0.95) brightness(1.02) sepia(0.18);
  mix-blend-mode: multiply;
  z-index: 0;
}

.cover__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: 0.18;                                  /* archival cover grain */
  mix-blend-mode: multiply;
}

.cover__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--bg) 0%, #F4F1EA99 28%, #F4F1EA80 72%, var(--bg) 100%);
}

/* Fixed top navigation — spans the centered 1440 container */
.site-nav {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1440px;
  z-index: 1000;
  border-bottom: 0.5px solid transparent;
  transition: background 260ms var(--ease), border-color 260ms var(--ease);
}
.site-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 16px var(--pad);
}
.site-nav__inner .brand { justify-self: start; }
.site-nav__inner .nav { justify-self: center; }
.site-nav__inner .chrome-right { justify-self: end; }
/* Solid (sub-pages) or once the hero has scrolled past */
.site-nav.is-solid,
.site-nav.is-scrolled,
.site-nav.is-menu-open {
  background: var(--bg);
  border-bottom-color: var(--rule);
}

/* Hamburger + mobile menu (hidden on desktop) */
.nav-burger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 1;
  color: var(--ink);
  padding: 4px;
}
.nav-burger svg { display: block; }
.nav-mobile { display: none; }

/* Top bar — corner chrome */
.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
}

.brand { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.brand__name {
  font-weight: 700;
  letter-spacing: 0.32em;
  font-size: 13px;
}
/* Real logo lockup — hidden until it successfully loads, then it
   replaces the inline mark + wordmark fallback. */
.brand__logo { display: none; height: 30px; width: auto; }
.brand__logo.is-loaded { display: block; }
.brand__logo.is-loaded ~ .brand__mark,
.brand__logo.is-loaded ~ .brand__name { display: none; }

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav a { text-decoration: none; }
.nav a:hover { color: var(--accent); }

.chrome-right { display: flex; align-items: center; gap: 14px; }

.lang-toggle {
  display: flex;
  align-items: center;
  border: 0.5px solid var(--ink);
  padding: 2px;
  gap: 2px;
}

/* Flag switch — shows the language you are reading; clicking swaps it for
   the other. Single control, so no active/inactive state to express. */
.lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 5px 7px;
  cursor: pointer;
  line-height: 0;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.lang-flag svg {
  display: block;
  width: 22px;
  height: auto;
  /* England's field is white on white paper — hairline keeps it a flag */
  outline: 0.5px solid rgba(23, 22, 18, 0.3);
  outline-offset: -0.5px;
}
.lang-flag:hover { transform: translateY(-1px); opacity: 0.85; }
.lang-flag:active { transform: translateY(0); }
.lang-flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-listen {
  background: var(--ink);
  color: var(--bg);
  border: none;
  padding: 11px 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.btn-contact {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 19px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 160ms, color 160ms;
}
.btn-contact:hover { background: var(--ink); color: var(--bg); }

/* Giant stacked wordmark */
.cover__headline {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -6px;
  margin-top: 0;
}
.cover__headline h1 {
  margin: 0;
  padding: 0;
  font-size: clamp(64px, 18vw, 260px);
  line-height: 0.86;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.cover__headline span { display: block; }
/* Editorial voice: line1 sans, line2 serif-italic, line3 sans */
.voice-sans {
  font-family: var(--sans);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.045em;
}
.voice-serif {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.03em;
}
.dot { color: var(--accent); }

/* Cover bottom — issue blurb + scroll cue */
.cover__bottom {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: flex-end;
  margin-top: 32px;
  /* Lifts the blurb and the scroll cue off the very bottom of the hero.
     A relative offset, not a margin: the cover's height is content-driven
     (the headline alone is 892px at 1440), so `flex: 1` has no slack to
     redistribute and a margin would only grow the section, moving nothing. */
  top: clamp(-72px, -6vh, -24px);
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.issue__blurb {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.32;
  color: var(--ink);
  font-weight: 400;
  max-width: 380px;
  letter-spacing: -0.005em;
  margin-top: 14px;
}
.scroll-cue { text-align: right; }
.scroll-cue .eyebrow { letter-spacing: 0.32em; font-weight: 600; margin-bottom: 18px; }
.scroll-cue__line {
  width: 1px;
  height: 56px;
  background: var(--ink);
  opacity: 0.6;
  margin-left: auto;
}

/* ============================================================
   BY THE NUMBERS
   ============================================================ */
.numbers {
  padding: 40px var(--pad);
  border-bottom: 0.5px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__n {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.stat__l {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ============================================================
   CHAPTER OPENERS
   ============================================================ */
.chapter {
  padding: 88px var(--pad) 96px;
  background: var(--bg);
  color: var(--ink);
  border-bottom: 0.5px solid var(--rule);
}
.chapter--dark {
  background: var(--ink);
  color: var(--on-dark);
  --muted: var(--muted-on-dark);
  --rule: var(--rule-on-dark);
}

.chapter__topmeta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 24px;
  border-bottom: 0.5px solid var(--rule);
  margin-bottom: 80px;
  gap: 24px;
}
.chapter__topmeta .meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  text-align: right;
}

.chapter__grid {
  display: block;
}
.chapter__label {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 20px;
}
.chapter__title {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.03em;
  font-size: clamp(34px, 6vw, 84px);
  line-height: 1.02;
  color: inherit;
  max-width: 980px;
  margin: 0;
  white-space: pre-line;
}
.chapter__title--upright {
  font-style: normal;
}

/* ---- History timeline ---- */
.timeline {
  margin-top: 48px;
  margin-left: -14px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border-top: 0.5px solid var(--rule);
}
.timeline__cell {
  padding: 20px 14px 24px 14px;
  border-right: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
  min-height: 160px;
}
.timeline__cell:nth-child(9n) { border-right: none; }
.timeline__y {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: inherit;
  margin-bottom: 12px;
}
.timeline__label { font-size: 12px; line-height: 1.4; color: var(--muted); white-space: pre-line; }

/* ---- Catalog: intro + genre tiles ---- */
.cat__intro {
  margin-top: 48px;
}
.cat__lead {
  font-size: 17px;
  line-height: 1.6;
  color: inherit;
  font-weight: 300;
  margin: 0 0 48px;
  max-width: 720px;
}
.genres {
  display: flex;
  gap: 0;
  border-top: 0.5px solid var(--rule);
  border-bottom: 0.5px solid var(--rule);
}
.genre {
  flex: 1;
  padding: 40px 24px;
  border-right: 0.5px solid var(--rule);
  background: transparent;
  color: inherit;
  transition: flex 600ms var(--ease), background 400ms, color 400ms;
  cursor: pointer;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.genre:last-child { border-right: none; }
.genre.is-active { flex: 2; color: #FAFAF7; }
.genre__tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.5;
  margin-bottom: 14px;
}
.genre.is-active .genre__tag { opacity: 0.85; }
.genre__name {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  transition: font-size 400ms;
}
.genre.is-active .genre__name { font-size: 56px; }
.genre__desc {
  font-family: var(--serif);
  font-style: normal;
  font-size: 18px;
  margin-top: 16px;
  opacity: 0.9;
  line-height: 1.35;
  display: none;
}
.genre.is-active .genre__desc { display: block; }
.genre__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.genre__count { opacity: 0.5; }
.genre.is-active .genre__count { opacity: 0.85; }
.genre__explore { display: none; }
.genre.is-active .genre__explore { display: inline; }

/* ---- License: blurb + CTA + matrix ---- */
.license {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.license__lead { font-size: 17px; line-height: 1.6; color: inherit; font-weight: 300; margin: 0; }
.btn-license {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 24px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
}
.license__matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.matrix__cell { padding: 24px 0; border-top: 0.5px solid var(--rule); }
.matrix__k {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 8px;
}
.matrix__v { font-size: 13px; color: inherit; font-weight: 400; }

/* ---- Studio: copy + spec sheet ---- */
.studio {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
}
.studio__copy { font-size: 17px; line-height: 1.6; color: inherit; font-weight: 300; margin: 0; }
.spec__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--rule);
  font-size: 13px;
}
.spec__k {
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
}
.spec__v { font-family: var(--mono); color: inherit; font-size: 12px; text-align: right; }

/* ============================================================
   ARTIST GALLERY
   ============================================================ */
.gallery {
  padding: 120px var(--pad) 48px;
  background: var(--bg);
  color: var(--ink);
  border-top: 0.5px solid var(--rule);
  scroll-margin-top: 90px;
}
.gallery__head {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: 56px;
  margin-bottom: 64px;
  align-items: flex-end;
}
.gallery__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 6.4vw, 104px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.gallery__title em { font-style: normal; }
.gallery__intro {
  max-width: 360px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  font-weight: 300;
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 0.5px solid var(--ink);
}
.gallery__count { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.btn-roster {
  background: var(--ink);
  color: var(--bg);
  border: none;
  padding: 14px 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Artist card */
.artist-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 320ms var(--ease);
}
.artist-card:hover { transform: translateY(-6px); }
.portrait {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
}
.portrait__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 38%, transparent 0%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.portrait__bust {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 82%;
  opacity: 0.92;
}
.portrait__initials {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  padding-top: 28px;
  pointer-events: none;
}
.portrait__initials span {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: 122px;          /* ≈ height * 0.32 */
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0.18;
}
.portrait__photo {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: bottom;
}
.portrait__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.artist-card__genre {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 5px 10px;
  background: rgba(10,10,9,0.78);
  color: #FAFAF7;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
}
.artist-card__panel {
  height: 86px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  color: #0A0A09;
}
.artist-card__name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #0A0A09;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg);
  color: var(--ink);
  padding: 56px var(--pad) 28px;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 96px;
}
.footer__grid > div { min-width: 0; }
.footer__rule { height: 1px; background: var(--ink); margin-bottom: 28px; }

/* Footer contact column */
.footer__contactbtn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 11px 18px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
.footer__contactbtn:hover { background: var(--ink); color: var(--bg); }
.footer__address {
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.footer__phone {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.footer__phone a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 160ms;
}
.footer__phone a:hover { color: var(--accent); }
.footer__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 36px;
}
.footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__links a {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.25;
}
.footer__links a:hover { color: var(--accent); }

.newsletter form {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  height: 44px;
  min-width: 0;
}
.newsletter input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 0 18px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  min-width: 0;
}
.newsletter button {
  border: none;
  background: transparent;
  padding: 0 18px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.newsletter button:disabled { opacity: 0.5; cursor: default; }
.newsletter__status {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--ink);
}
.newsletter__status.is-error { color: #B3261E; }
.newsletter__aside {
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.55;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 20px;
  flex-wrap: wrap;
}
.footer__legal {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.footer__legal .soft { color: var(--muted); }
.footer__legal a { text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.footer__lang {
  display: flex;
  align-items: center;
  gap: 4px;
}
.footer__lang .lang-flag { padding: 6px; }
.footer__lang .lang-flag svg { width: 20px; }

/* ============================================================
   CATALOG / ARTISTS PAGE
   ============================================================ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--pad);
  border-bottom: 0.5px solid var(--rule);
  background: var(--bg);
}
.page-header .brand { cursor: pointer; }
.nav a.is-current { color: var(--accent); }

.roster {
  padding: 108px var(--pad) 80px;
  background: var(--bg);
  color: var(--ink);
}
.roster__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.roster__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 6.4vw, 84px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.roster__title em { font-style: normal; }
.roster__intro {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  font-weight: 300;
  margin-bottom: 40px;
}

/* A–Z jump nav — sticky letter index */
.az-nav {
  position: sticky;
  top: 62px;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 16px 0;
  margin-bottom: 24px;
  background: var(--bg);
  border-top: 0.5px solid var(--ink);
  border-bottom: 0.5px solid var(--rule);
}
.az-link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 9px;
  border-radius: 2px;
  transition: color 140ms, background 140ms;
}
.az-link:hover { color: var(--bg); background: var(--ink); }
/* Letters the current search left empty are not worth jumping to */
.az-link.is-empty { opacity: 0.22; pointer-events: none; }

/* ---- Catalog search ---- */
.az-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  padding-bottom: 12px;
  border-bottom: 0.5px solid var(--ink);
}
.az-search__icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.az-search__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 4px 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.01em;
}
.az-search__input::placeholder { color: var(--muted); opacity: 0.7; }
.az-search__input:focus { outline: none; }
.az-search:focus-within { border-bottom-color: var(--accent); }
.az-search:focus-within .az-search__icon { color: var(--accent); }
/* Our own clear button, so suppress the native one */
.az-search__input::-webkit-search-cancel-button,
.az-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.az-search__clear {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  transition: color 140ms;
}
.az-search__clear:hover { color: var(--accent); }
.az-search__clear[hidden] { display: none; }

/* [hidden] loses to the explicit display on these, so be explicit back */
.letter-group[hidden] { display: none; }
.name-list li[hidden] { display: none; }
.letter-group.is-first-visible { border-top: none; }

/* No border-top — the az-nav already rules off above it, and two hairlines
   24px apart read as a mistake */
.az-empty {
  margin: 0;
  padding: 56px 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--muted);
}

/* Letter groups — big serif initial + multi-column name list */
.letter-group {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  padding: 40px 0;
  border-top: 0.5px solid var(--rule);
  scroll-margin-top: 150px;
}
.letter-group:first-child { border-top: none; }
.letter-group__l {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.letter-group__l.is-varios {
  font-style: normal;
  font-size: clamp(28px, 3.4vw, 48px);
  color: var(--muted);
}
.name-list {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
  columns: 3;
  column-gap: 40px;
}
.name-list li { break-inside: avoid; margin-bottom: 12px; }
.name-list a {
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 140ms, border-color 140ms;
}
.name-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Names with no destination yet: readable, but no false affordance */
.name-list .name-plain {
  font-size: 17px;
  line-height: 1.3;
  color: var(--body);
}
/* Outbound (Spotify) */
.name-list a.is-spotify .name-ext {
  margin-left: 5px;
  font-size: 0.75em;
  color: var(--muted);
  transition: color 140ms;
}
.name-list a.is-spotify:hover .name-ext { color: var(--accent); }

/* Catalog headliners — larger type inside the A→Z list */
.name-list .is-highlight {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.name-list li:has(.is-highlight) { margin-bottom: 18px; }

.roster__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 0.5px solid var(--ink);
}
.roster__count { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }

/* Inline text CTA (e.g. "Read the full history") */
.chapter__cta { margin-top: 44px; }
.btn-link {
  background: transparent;
  border: none;
  padding: 0 0 3px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px solid var(--accent);
  transition: color 140ms;
}
.btn-link:hover { color: var(--accent); }

/* ============================================================
   HISTORY PAGE
   ============================================================ */
.history {
  padding: 108px var(--pad) 80px;
  background: var(--bg);
  color: var(--ink);
}
.history__hero {
  max-width: 1000px;
  padding-bottom: 56px;
  margin-bottom: 8px;
  border-bottom: 0.5px solid var(--rule);
}
.history__title {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.history__title em { font-style: normal; }
.history__lead {
  margin: 0;
  max-width: 760px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hist-block {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 56px 0;
  border-top: 0.5px solid var(--rule);
}
.hist-block:first-child { border-top: none; }
.hist-block__rail { position: relative; }
.hist-block__year {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 4.6vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  position: sticky;
  top: 90px;
}
.hist-block__tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  position: sticky;
  top: 90px;
}
.hist-block__title {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.hist-block__body { max-width: 760px; }
.hist-block__body p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--body);
  font-weight: 400;
}
.hist-block__body p:last-child { margin-bottom: 0; }

/* Archival photos */
.hist-fig {
  margin: 36px 0 0;
}
.hist-fig img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--rule);
  border: 0.5px solid var(--rule);
  filter: grayscale(1) contrast(1.03) brightness(0.99);
}
.hist-fig figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ============================================================
   STUDIO PAGE
   ============================================================ */
.studio-page {
  padding: 108px var(--pad) 80px;
  background: var(--bg);
  color: var(--ink);
}
.studio-page__hero { max-width: 1000px; padding-bottom: 48px; }
.studio-page__hero .history__lead { max-width: none; }

.studio-hero { margin: 0 0 64px; }
.studio-hero img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--rule);
  border: 0.5px solid var(--rule);
}
.studio-hero figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.studio-col__title {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.02em;
  color: var(--accent);
}

.studio-specs {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  padding: 48px 0;
  border-top: 0.5px solid var(--rule);
}
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  font-size: 15px;
  line-height: 1.5;
  padding: 11px 0;
  border-bottom: 0.5px solid var(--rule);
  color: var(--ink);
}
.spec-list li:last-child { border-bottom: none; }
.mic-list { columns: 2; column-gap: 40px; }
.mic-list li { break-inside: avoid; border-bottom: none; padding: 7px 0; }

.studio-room { padding: 48px 0; border-top: 0.5px solid var(--rule); }
.studio-room__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.studio-room__desc {
  margin: 0;
  font-size: 17px;
  line-height: 1.72;
  color: var(--body);
  font-weight: 300;
}
.studio-note {
  margin: 36px 0 0;
  max-width: 760px;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.studio-visit { padding: 48px 0 8px; border-top: 0.5px solid var(--rule); }
.studio-address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink);
}
.studio-address strong { display: block; letter-spacing: 0.12em; margin-bottom: 4px; }
.studio-address a { color: var(--accent); text-decoration: none; }
.studio-address a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   CONTACT MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 2000; display: none; }
.modal.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px 40px;
  overflow: auto;
}
.modal__scrim {
  position: fixed;
  inset: 0;
  background: rgba(23, 22, 18, 0.62);
}
.modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  background: var(--bg);
  color: var(--ink);
  border: 0.5px solid var(--rule);
  box-shadow: 0 24px 80px rgba(23, 22, 18, 0.38);
  padding: 44px 40px 40px;
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 30px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
}
.modal__close:hover { color: var(--ink); }
.modal__title {
  margin: 12px 0 10px;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.modal__sub {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
  font-weight: 300;
}
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.field { display: block; }
.field span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--rule);
  background: #FBFAF6;
  color: var(--ink);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  border-radius: 2px;
  transition: border-color 140ms;
}
.field input:focus,
.field textarea:focus { border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 100px; }
.contact-form__send {
  margin-top: 6px;
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: filter 140ms;
}
.contact-form__send:hover { filter: brightness(1.06); }
.contact-form__send:disabled { opacity: 0.55; cursor: default; filter: none; }

/* Honeypot. Absolutely positioned so it leaves no trace in flex layout,
   but still submitted by FormData — display:none is the obvious tell. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #B3261E;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .timeline { grid-template-columns: repeat(4, 1fr); }
  .timeline__cell:nth-child(8n) { border-right: 0.5px solid var(--rule); }
  .timeline__cell:nth-child(4n) { border-right: none; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .name-list { columns: 2; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* Hamburger nav */
  .site-nav__inner { display: flex; justify-content: space-between; align-items: center; }
  .site-nav__inner .nav { display: none; }
  .site-nav__inner .chrome-right { display: none; }
  /* 44px tap target without moving the glyph off the page edge */
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 44px;
    height: 44px;
    margin-right: -10px;
  }
  .nav-mobile.is-open {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-top: 0.5px solid var(--rule);
    padding: 6px var(--pad) 26px;
  }
  .nav-mobile__links { display: flex; flex-direction: column; }
  .nav-mobile__links a {
    padding: 16px 0;
    font-size: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 0.5px solid var(--rule);
  }
  .nav-mobile__links a.is-current { color: var(--accent); }
  .nav-mobile__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 22px;
  }

  .cover__bottom { grid-template-columns: 1fr; gap: 32px; }
  .scroll-cue { text-align: left; }
  .scroll-cue__line { margin-left: 0; }
  .chapter__grid { grid-template-columns: 1fr; gap: 16px; }
  .chapter__title { margin: 0; }
  .gallery__head { grid-template-columns: 1fr; gap: 32px; }
  .license, .studio { grid-template-columns: 1fr; gap: 32px; }
  .closing__grid { grid-template-columns: 1fr; gap: 48px; }
  .footer__grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 64px; }
  .genres { flex-direction: column; }
  .genre { min-height: 0; border-right: none; border-bottom: 0.5px solid var(--rule); }
  .genre:last-child { border-bottom: none; }
  .genre.is-active { flex: 1; }

  /* --- Touch targets (tablet down; 768px is a finger too) --- */

  /* Wrapping 26 letters built a 2-3 row sticky bar. One scrollable row keeps
     the bar short and leaves room for full-height chips. */
  .az-nav {
    /* The search field's underline already rules this off; keeping both gives a
       padded hairline stacked on a full-bleed one at the same y */
    border-top: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    gap: 0;
    scrollbar-width: none;
    /* Bleed to the viewport edge so the row clips mid-letter — with the
       scrollbar hidden globally, that cut is the only affordance for "scrolls". */
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
  .az-link { flex: 0 0 auto; padding: 14px 12px; font-size: 13px; }

  /* The flag glyph is ~32x25. Grow the hit area with a pseudo-element so the
     nav and the legal bar keep their compact typographic weight. */
  .lang-flag { position: relative; }
  .lang-flag::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; gap: 16px; }

  /* Even 2-up grid — flex space-between left an orphaned, oddly-spaced row */
  .numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .stat__n { font-size: 30px; }

  /* Eight 1fr columns starve the year type (needs ~89px, gets ~62px) and clip
     it against .mono's overflow:hidden. Two columns give every cell room. */
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline__cell { min-height: 0; }
  .timeline__cell:nth-child(4n) { border-right: 0.5px solid var(--rule); }
  .timeline__cell:nth-child(2n) { border-right: none; }
  .timeline__y { font-size: 26px; margin-bottom: 8px; }

  /* Key/value on one line squeezes the mono value to a 2-3 word ribbon */
  .spec__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .spec__v { text-align: left; }

  .gallery__grid { grid-template-columns: 1fr; }
  .letter-group { grid-template-columns: 1fr; gap: 8px; }
  .letter-group__l { font-size: 56px; }
  .name-list { columns: 1; }
  .hist-block { grid-template-columns: 1fr; gap: 16px; }
  .hist-block__year, .hist-block__tag { position: static; }
  .studio-specs { grid-template-columns: 1fr; gap: 40px; }
  .studio-room__grid { grid-template-columns: 1fr; gap: 24px; }
  .mic-list { columns: 1; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__links a { font-size: 22px; }

  .closing__ctas button { padding: 16px 22px; }
  /* Was a fixed 420px while the photo renders square at the card's width and
     anchors to the bottom — that mismatch left a band of bare backdrop above
     every cutout. A square box matches the (square) sources exactly.
     Kept as aspect-ratio rather than letting the photo drive the height: the
     images are loading="lazy", so an in-flow img would measure 0 until it
     loads and the card would jump. */
  .artist-card .portrait { height: auto; aspect-ratio: 1 / 1; }
  .portrait__initials span { font-size: 134px; }
}

/* ============================================================
   ARTIST PAGE  (hero → listen → discography → more)
   Each section carries the artist's genre accent via --acc.
   ============================================================ */
.artist-hero {
  position: relative;
  padding: 102px var(--pad) 0;
  background: var(--ink);
  color: var(--on-dark);
  --muted: var(--muted-on-dark);
  --rule: var(--rule-on-dark);
  overflow: hidden;
}
.artist-hero__meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 0.5px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.artist-hero__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: end;
  padding: 64px 0;
}
.artist-hero__name {
  margin: 0 0 28px;
  line-height: 0.92;
}
.artist-hero__name > span { display: block; }
.artist-hero__name .voice-sans {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(46px, 7.4vw, 104px);
  letter-spacing: 0.01em;
}
.artist-hero__name .voice-serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(50px, 8.2vw, 116px);
  letter-spacing: -0.02em;
}
.artist-hero__dot { color: var(--acc); font-style: normal; }
.artist-hero__bio {
  max-width: 520px;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(244, 241, 234, 0.82);
  margin: 0 0 40px;
}
.artist-hero__ctas { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--acc);
  color: #FAFAF7;
  text-decoration: none;
  padding: 17px 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: filter 140ms, transform 320ms var(--ease);
}
.btn-play:hover { filter: brightness(1.1); transform: translateY(-2px); }
.btn-play__tri {
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.btn-jump {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--acc);
  padding-bottom: 5px;
  transition: color 140ms;
}
.btn-jump:hover { color: var(--acc); }

.artist-hero__portrait { position: relative; margin-right: 16px; }
.portrait--hero {
  height: clamp(380px, 42vw, 560px);
  box-shadow: 16px 16px 0 var(--acc);
}
.artist-hero__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  background: rgba(10, 10, 9, 0.78);
  color: #FAFAF7;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  backdrop-filter: blur(6px);
}

.artist-hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 0.5px solid var(--rule);
  padding: 30px 0 48px;
}
.ap-stat { display: flex; flex-direction: column; gap: 7px; }
.ap-stat__n {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ap-stat__l {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ---- Listen (Spotify embed on the dark slab) ---- */
.ap-listen { border-top: 0.5px solid rgba(244, 241, 234, 0.12); }
.ap-listen__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
  margin-top: 4px;
}
.ap-listen__sub {
  font-size: 17px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--muted-on-dark);
  max-width: 440px;
  margin: 28px 0 36px;
}
.ap-embed {
  border: 0.5px solid var(--rule-on-dark);
  background: #0F0E0C;
  padding: 10px;
}
.ap-embed iframe { display: block; border-radius: 12px; }

/* ---- Discography (vinyl-sleeve grid) ---- */
.ap-disco {
  padding: 96px var(--pad) 104px;
  background: var(--bg);
  color: var(--ink);
  border-bottom: 0.5px solid var(--rule);
  scroll-margin-top: 80px;
}
.ap-disco__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 56px;
}
.ap-disco__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  flex-shrink: 0;
}
.ap-disco__count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.ap-disco a.btn-roster { text-decoration: none; display: inline-block; }

.album-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 16px;
  row-gap: 28px;
}
.album {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 320ms var(--ease);
}
.album:hover { transform: translateY(-6px); }
.album--hi { grid-column: span 2; }
.album__sleeve {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #FBFAF6;
  border: 0.5px solid var(--rule);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.album--hi .album__sleeve {
  aspect-ratio: 2 / 1; /* spans 2 columns → same height as square siblings */
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}
/* The record inside the sleeve — slides out on hover */
.album__vinyl {
  position: absolute;
  top: 50%;
  right: -38%;
  width: 74%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle, var(--bg) 0 2.2%, transparent 2.8%),
    radial-gradient(circle, var(--acc) 0 15%, transparent 15.8%),
    repeating-radial-gradient(circle, #1A1814 0 2.5px, #0E0D0B 2.5px 5px);
  opacity: 0.94;
  transition: transform 620ms var(--ease);
}
.album:hover .album__vinyl { transform: translateY(-50%) translateX(-22%); }
.album--hi .album__vinyl { width: 42%; right: -18%; }
.album--hi:hover .album__vinyl { transform: translateY(-50%) translateX(-32%); }
.album__num {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.album--hi .album__num { color: var(--acc); }
.album__title {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 76%;
}
.album--hi .album__title {
  font-size: clamp(24px, 2.4vw, 34px);
  max-width: 66%;
}
.album__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 2px 0;
  height: 30px;
}
.album__year {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.album__listen {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms, transform 320ms var(--ease);
}
.album:hover .album__listen { opacity: 1; transform: none; }

/* ---- More from the roster ---- */
.ap-more { padding: 96px var(--pad) 64px; background: var(--bg); }

/* ---- Listenable names in the A→Z index ---- */
.name-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: 2px;
}
.name-list a.is-listenable { font-weight: 500; }

/* ---- Artist page responsive ---- */
@media (max-width: 1100px) {
  .album-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .artist-hero__grid { grid-template-columns: 1fr; gap: 48px; padding: 48px 0 56px; }
  .artist-hero__portrait { margin-right: 16px; }
  .portrait--hero { height: 440px; box-shadow: 10px 10px 0 var(--acc); }
  .artist-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ap-listen__grid { grid-template-columns: 1fr; gap: 40px; }
  .ap-disco__head { flex-direction: column; align-items: flex-start; }
  .ap-disco__side { align-items: flex-start; }
  .album-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .album-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; row-gap: 22px; }

  /* At ~169px the sleeve is half its desktop width, so the record (74% wide,
     resting at right:-38%) reached back across the title — dark serif on black
     vinyl. There is no hover on touch to slide it away, so shrink the resting
     peek to a crescent and keep the title clear of it. */
  .album__vinyl { width: 58%; right: -42%; }
  .album--hi .album__vinyl { width: 30%; right: -20%; }
  .album__title,
  .album--hi .album__title { max-width: 80%; }
  /* Hover-capable narrow viewports would otherwise slide it back over the title */
  .album:hover .album__vinyl,
  .album--hi:hover .album__vinyl { transform: translateY(-50%); }

  .portrait--hero { height: 380px; }
}

/* =======================================================================
   Scroll reveals (Volvox-style) + Manifesto section
   ======================================================================= */
[data-reveal] { will-change: transform, opacity; }
[data-reveal="up"] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
  transition-delay: calc(var(--i, 0) * .08s);
}
[data-reveal="up"].in-view { opacity: 1; transform: none; }

/* line-by-line mask reveal */
.mask { display: block; overflow: hidden; }
.mask > span {
  display: block; transform: translateY(115%); opacity: 0;
  transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 1s ease;
  transition-delay: calc(var(--i, 0) * .1s);
}
.mask.in-view > span { transform: none; opacity: 1; }

/* =======================================================================
   Hero parallax (Volvox /labs opening language)
   The film bed is oversized so it can lag ~150px without exposing an edge:
   the cover is min-height 1020px, so 15% headroom = 153px.
   ======================================================================= */
.cover.is-parallax .cover__video {
  top: -15%;
  bottom: auto;
  height: 130%;
  will-change: transform;
}
.cover.is-parallax .cover__headline h1 > span,
.cover.is-parallax .cover__bottom { will-change: transform; }

/* =======================================================================
   History: pinned section, vertical scroll → horizontal timeline
   ======================================================================= */
.chapter--history { padding-bottom: 0; }
.hscroll { position: relative; }
.hscroll.is-live .hscroll__pin {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
/* clip horizontally but let the lift breathe upward */
.hscroll.is-live .hscroll__vp {
  overflow-x: clip; overflow-y: visible;
  margin-left: 0; padding: 28px 0;
}
.hscroll.is-live .timeline {
  display: flex; flex-wrap: nowrap; width: max-content;
  align-items: stretch;
  border-top: 0.5px solid var(--rule); will-change: transform;
  margin-left: 0;
  /* room so the first/last cells can scale up without being clipped */
  padding-inline: 28px;
}
.hscroll.is-live .timeline__cell {
  flex: 0 0 clamp(210px, 17vw, 270px);
  background: var(--bg);
  transform-origin: center center;
  will-change: transform, opacity;
  position: relative;
  /* --w (0→1) comes from JS: the closer to the step, the more it reads
     as a raised card — dividers fade out, ring + shadow fade in. */
  border-right: 0.5px solid rgba(214, 209, 197, calc(1 - var(--w, 0))) !important;
  border-bottom-color: rgba(214, 209, 197, calc(1 - var(--w, 0)));
  border-radius: calc(var(--w, 0) * 8px);
  box-shadow:
    0 0 0 calc(var(--w, 0) * 1px) rgba(23, 22, 18, calc(var(--w, 0) * 0.13)),
    0 calc(var(--w, 0) * 22px) calc(var(--w, 0) * 48px) calc(var(--w, 0) * -16px)
      rgba(23, 22, 18, calc(var(--w, 0) * 0.26));
}
.hscroll.is-live .timeline__y { font-size: clamp(30px, 2.6vw, 40px); }
.hscroll.is-live .chapter__cta { padding-bottom: 8px; }

/* =======================================================================
   Roster: Volvox-style pinned scrub
   Runway creates the scroll distance; the layer is fixed to the viewport
   and its children (title / image row / tail) are translated by JS.
   ======================================================================= */
.gallery--vvx { padding: 0; border-top: 0.5px solid var(--rule); }
.vvx-runway { position: relative; height: max(100vw, 150vh); }
.vvx-layer.is-live {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none; visibility: hidden;
}
.vvx-layer.is-live .vvx-el {
  position: absolute; top: 0; left: 0; width: 100%;
  will-change: transform;
}
.gallery--vvx .gallery__title { text-align: center; }
.vvx-layer.is-live .gallery__title { padding: 0 var(--pad); }
.vvx-row { display: flex; gap: 20px; padding: 0 30px; align-items: flex-start; }
.vvx-item { flex: 1 1 0; min-width: 0; pointer-events: auto; will-change: transform; }
.vvx-item--0 { transform-origin: left center; position: relative; z-index: 3; }
.vvx-item--1 { transform-origin: center center; position: relative; z-index: 1; }
.vvx-item--2 { transform-origin: center center; position: relative; z-index: 2; }
.vvx-item--3 { transform-origin: right center; position: relative; z-index: 3; }
.vvx-tail {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; padding: 0 var(--pad) 56px; pointer-events: auto;
}
.vvx-layer.is-live .vvx-tail { opacity: 0; }
.vvx-tail .gallery__intro { max-width: 420px; }

/* Static fallback: mobile & reduced motion get the plain stacked section */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .gallery--vvx { padding: 90px var(--pad) 48px; }
  .vvx-runway { height: auto; }
  .vvx-layer { position: static; }
  .vvx-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0; margin: 34px 0; }
  .vvx-tail { flex-direction: column; align-items: flex-start; padding: 0; }
}

/* image clip-reveal + scale */
[data-reveal="cover"] { clip-path: inset(0 0 101% 0); transition: clip-path 1.15s cubic-bezier(.19,1,.22,1); }
[data-reveal="cover"].in-view { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal] * { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

.manifesto {
  background: var(--bg); color: var(--ink);
  padding: clamp(90px, 16vh, 190px) clamp(20px, 6vw, 110px);
  border-top: 1px solid var(--rule);
}
.manifesto__grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 80px);
  align-items: center; max-width: 1440px; margin: 0 auto;
}
.manifesto__kicker {
  font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 22px;
}
.manifesto__statement {
  font-family: 'Playfair Display', serif; font-weight: 600; line-height: .98;
  letter-spacing: -.02em; font-size: clamp(44px, 7vw, 104px); margin: 0;
}
.manifesto__statement .line { display: block; }
.manifesto__statement .line:nth-child(2) { color: var(--accent); font-style: italic; }
.manifesto__body {
  margin-top: 34px; max-width: 32ch; font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55; color: var(--body);
}
/* Sondor spiral mark, right column */
.manifesto__mark {
  margin: 0; display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.manifesto__mark img {
  width: min(100%, 380px); height: auto; display: block;
}
@media (max-width: 820px) {
  .manifesto__grid { grid-template-columns: 1fr; gap: 34px; }
  .manifesto__mark { justify-content: flex-start; }
  .manifesto__mark img { width: min(60%, 220px); }
}

/* =======================================================================
   Artist page — records released on Sondor (under the playlist)
   ======================================================================= */
.ap-sondor {
  padding: clamp(48px, 7vh, 88px) var(--pad);
  background: var(--bg);
  color: var(--ink);
  border-bottom: 0.5px solid var(--rule);
}
.sondor-list { list-style: none; margin: 22px 0 0; padding: 0; max-width: 760px; }
.sondor-list li { border-top: 0.5px solid var(--rule); }
.sondor-list li:last-child { border-bottom: 0.5px solid var(--rule); }
.sondor-list a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 16px 4px; text-decoration: none; color: var(--ink);
  transition: background 140ms, padding-left 140ms;
}
.sondor-list a:hover { background: rgba(23, 22, 18, 0.035); padding-left: 12px; }
.sondor-list__y {
  font-family: var(--mono); font-size: 13px; color: var(--muted);
  flex: 0 0 46px; letter-spacing: 0.02em;
}
.sondor-list__t {
  flex: 1; font-family: var(--serif); font-size: clamp(19px, 2vw, 26px);
  letter-spacing: -0.015em; line-height: 1.15;
}
.sondor-list__w { font-family: var(--sans); font-size: 13px; color: var(--muted); letter-spacing: 0; }
.sondor-list__go { color: var(--muted); font-size: 14px; transition: color 140ms; }
.sondor-list a:hover .sondor-list__go { color: var(--acc, var(--accent)); }
@media (max-width: 620px) {
  .sondor-list a { gap: 12px; padding: 13px 2px; }
  .sondor-list__y { flex-basis: 40px; font-size: 12px; }
}

/* Artist page footer — catalog highlights as a summary list */
.ap-more__sub { margin: 0 0 26px; color: var(--muted); font-size: 15px; }
.cat-picks { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 40px; }
.cat-picks li { break-inside: avoid; margin-bottom: 14px; }
.cat-picks a, .cat-picks span {
  font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color 140ms, border-color 140ms;
}
.cat-picks a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.cat-picks .name-ext { margin-left: 5px; font-size: .7em; color: var(--muted); }
.cat-picks .name-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; margin-right: 7px; vertical-align: middle; }
@media (max-width: 860px) { .cat-picks { columns: 2; } }
@media (max-width: 560px) { .cat-picks { columns: 1; } }

/* Long Sondor discographies (Karibe, Racciatti) read better in two columns */
.sondor-list--2col { max-width: 1100px; columns: 2; column-gap: 56px; }
.sondor-list--2col li { break-inside: avoid; }
@media (max-width: 820px) { .sondor-list--2col { columns: 1; } }

/* ------------------------------------------------------------------
   Wide screens: sections paint edge to edge.

   The page is a 1440px design. Capping `.mono` at 1440px was the obvious
   way to hold that, but it letterboxed the site: past 1440px the body
   showed through either side as two dark ink bands, so a paper section
   sat in a dark frame instead of reading as a full-width band of colour.

   The cap is dropped and the same column is held by growing the page
   padding instead, so the content stays exactly 1344px wide and centred
   while every section's own background — paper, dark slab, rules — runs
   the full width of the window.

   The padding is a percentage, not a vw unit: percentages resolve against
   the containing block, which excludes a classic scrollbar. `100vw` does
   not, and would push the column off-centre wherever the scrollbar takes
   layout space. Negative results (viewport under 1440px) are clamped to
   zero by CSS, and the media query keeps it out of that range anyway.
   ------------------------------------------------------------------ */
@media (min-width: 1440px) {
  :root { --pad: calc((100% - 1440px) / 2 + 48px); }
  .mono { max-width: none; }
  /* The fixed nav was capped to match the container; it has to follow it
     out to the edges or its solid background keeps the old dark bands. */
  .site-nav { max-width: none; }
  /* The manifesto centres its own grid rather than using --pad. Left at
     1440px it would sit 48px wider than every other section once the
     container stopped constraining it. */
  .manifesto__grid { max-width: 1344px; }
}