/* =========================================================================
   Samuel La Manna — Design System
   Dark-only. Mobile-first. Tokens → base → components → sections.
   ========================================================================= */

/* -------------------------------------------------- 1. TOKENS */
:root {
  /* Surface */
  --bg:            #0A0A0B;
  --bg-1:          #111113;
  --bg-2:          #16161A;
  --bg-3:          #1D1D22;

  /* Ink */
  --ink:           #F2F2EF;   /* soft off-white, never pure #fff */
  --ink-1:         #B9B9C0;
  --ink-2:         #85858F;
  --ink-3:         #55555E;

  /* Accents — muted, never neon */
  --blue:          #6E8FE8;
  --blue-dim:      #4E6BB8;
  --violet:        #8C7BE0;
  --amber:         #D9A66B;

  /* Lines & glass */
  --line:          rgba(255, 255, 255, .075);
  --line-strong:   rgba(255, 255, 255, .16);
  --glass:         rgba(18, 18, 21, .72);

  /* Type */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --t-hero:   clamp(3.25rem, 12vw, 10.5rem);
  --t-h2:     clamp(2.25rem, 6vw,  4.25rem);
  --t-h3:     clamp(1.5rem,  3.2vw, 2.25rem);
  --t-lead:   clamp(1.125rem, 1.9vw, 1.5rem);
  --t-body:   clamp(0.975rem, 1.05vw, 1.0625rem);
  --t-small:  0.8125rem;
  --t-micro:  0.6875rem;

  /* Spacing — 8pt rhythm */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;   --s-7: 6rem;    --s-8: 8rem;
  --section-y: clamp(5.5rem, 13vw, 11rem);

  /* Layout */
  --wrap:  1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius:    14px;
  --radius-lg: 22px;

  /* Motion */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       .5s;
  --dur-slow:  .9s;
}

/* -------------------------------------------------- 2. RESET / BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

/* UA stylesheets give <figure> a 40px side margin, which silently narrows
   every image column below its grid track. */
figure { margin: 0; }

::selection { background: var(--blue); color: #06060A; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--s-2);
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  font-size: var(--t-small);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--s-2); }

/* -------------------------------------------------- 3. ATMOSPHERE */

/* Film grain — fixed, non-interactive, very low opacity */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
}

/* Soft cursor light — desktop only, enabled by JS */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  z-index: 0; /* below the sections, above the page ground */
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,143,232,.10) 0%, transparent 62%);
  transition: opacity .6s var(--ease);
  will-change: transform;
}
.has-cursor-glow .cursor-glow { opacity: 1; }

/* Scroll progress hairline */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 55;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  transform-origin: left;
}

/* -------------------------------------------------- 4. NAV */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: transform .45s var(--ease), background-color .45s var(--ease),
              border-color .45s var(--ease), backdrop-filter .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-101%); }

.nav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(.9rem, 2vw, 1.35rem) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.nav__brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.nav__logo {
  height: 26px;
  width: auto;
  opacity: .92;                 /* pure white would out-punch --ink beside it */
  transition: opacity .3s var(--ease);
}
.nav__brand:hover .nav__logo { opacity: 1; }
.nav__name {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: -.01em;
}

.nav__links { display: none; gap: clamp(1.4rem, 2.6vw, 2.4rem); }
.nav__links a {
  position: relative;
  font-size: var(--t-small);
  color: var(--ink-1);
  padding: .35rem 0;
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Scoped to .nav__inner on purpose: `.btn { display: inline-flex }` is declared
   later with equal specificity and would otherwise win on source order. */
.nav__inner .nav__cta { display: none; }

.nav__toggle {
  width: 42px; height: 42px;
  display: grid;
  place-content: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: border-color .3s var(--ease);
}
.nav__toggle:hover { border-color: var(--line-strong); }
.nav__toggle span {
  display: block;
  width: 16px; height: 1px;
  background: var(--ink);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--bg);
  padding: 7rem var(--gutter) var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 300;
  letter-spacing: -.035em;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  opacity: 0;
  transform: translateY(14px);
}
.mobile-menu.is-open nav a { animation: menuIn .55s var(--ease-out) forwards; }
.mobile-menu.is-open nav a:nth-child(1) { animation-delay: .06s; }
.mobile-menu.is-open nav a:nth-child(2) { animation-delay: .12s; }
.mobile-menu.is-open nav a:nth-child(3) { animation-delay: .18s; }
.mobile-menu.is-open nav a:nth-child(4) { animation-delay: .24s; }
@keyframes menuIn { to { opacity: 1; transform: none; } }
.mobile-menu nav a em {
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: .2em;
  color: var(--ink-3);
}
.mobile-menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--t-small);
  color: var(--ink-2);
}

/* -------------------------------------------------- 5. BUTTONS & ICONS */
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.icon--arrow { fill: none; transition: transform .4s var(--ease-out); }

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: 100px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease),
              background-color .35s var(--ease), transform .35s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { transform: translateY(0); }
.btn:hover .icon--arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: var(--ink);
  --btn-fg: #08080A;
  --btn-bd: var(--ink);
}
.btn--primary::before { background: var(--blue); }
.btn--primary:hover { --btn-fg: #06060A; border-color: var(--blue); }

.btn--ghost:hover { color: #08080A; border-color: var(--ink); }

.btn--sm { padding: .65rem 1.1rem; font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; }
.btn--block { width: 100%; }

/* -------------------------------------------------- 6. SHARED PIECES */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--s-3);
}
.eyebrow .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(110,143,232,.6);
  animation: pulse 2.8s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(110,143,232,.45); }
  70%  { box-shadow: 0 0 0 9px rgba(110,143,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(110,143,232,0); }
}

.tag {
  display: inline-block;
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(217,166,107,.28);
  border-radius: 100px;
  padding: .35rem .8rem;
  margin-bottom: var(--s-3);
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter .8s var(--ease);
}
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--square   { aspect-ratio: 1 / 1; }
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,11,.45));
  pointer-events: none;
}

.section { padding-block: var(--section-y); position: relative; }
.section + .section { border-top: 1px solid var(--line); }

.section__head { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section__num {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: .24em;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.section__title { font-size: var(--t-h2); }
.section__intro {
  margin-top: var(--s-3);
  max-width: 46ch;
  color: var(--ink-1);
  font-size: var(--t-lead);
  font-weight: 300;
  letter-spacing: -.01em;
}

.subhead {
  font-size: var(--t-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-weight: 500;
  margin: var(--s-7) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

/* -------------------------------------------------- 7. HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 9rem var(--s-5);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; }

/* The clip lives on <picture>, not on .hero__bg: it has to contain the parallax
   offset (which would otherwise spill past the mobile band onto the headline)
   without also cropping the auras into a visible rectangle. */
.hero__bg picture { display: block; width: 100%; height: 100%; overflow: hidden; }

/* The photo is a 2.7:1 banner with the subject hard right and pure black left —
   anchoring right keeps the face intact and crops only the empty side. */
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: .92;
  filter: grayscale(.2) contrast(1.06);
  will-change: transform;
}

/* Three stacked washes: a dark left column for the type, a floor for the meta
   strip, and a light top so the nav stays readable. The face is left alone. */
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(10,10,11,.97) 0%,
      rgba(10,10,11,.92) 30%,
      rgba(10,10,11,.55) 52%,
      rgba(10,10,11,.12) 74%,
      rgba(10,10,11,.28) 100%),
    linear-gradient(0deg,
      rgba(10,10,11,.96) 0%,
      rgba(10,10,11,.45) 20%,
      transparent 46%),
    linear-gradient(180deg, rgba(10,10,11,.7), transparent 20%);
}

/* Drifting light auras */
/* Screen blending adds coloured light instead of fogging the photo —
   it lifts the black side and leaves the lit face essentially untouched. */
.aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .38;
  mix-blend-mode: screen;
  will-change: transform;
}
.aura--blue {
  width: 46vw; height: 46vw; min-width: 320px; min-height: 320px;
  left: -8vw; top: 8vh;
  background: radial-gradient(circle, rgba(110,143,232,.5), transparent 66%);
  animation: drift1 26s var(--ease) infinite alternate;
}
.aura--violet {
  width: 40vw; height: 40vw; min-width: 300px; min-height: 300px;
  right: -6vw; top: 26vh;
  background: radial-gradient(circle, rgba(140,123,224,.42), transparent 66%);
  animation: drift2 32s var(--ease) infinite alternate;
}
.aura--amber {
  width: 30vw; height: 30vw; min-width: 220px; min-height: 220px;
  left: 42%; bottom: -8vh;
  background: radial-gradient(circle, rgba(217,166,107,.24), transparent 68%);
  animation: drift3 38s var(--ease) infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(14vw, 8vh, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-12vw, -6vh, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(-16vw, -10vh, 0) scale(1.2); } }

.hero__content { position: relative; }

.hero__title {
  font-size: var(--t-hero);
  font-weight: 200;
  letter-spacing: -.05em;
  line-height: .88;
  margin: 0 0 var(--s-3);
}
.hero__title .line { display: block; }
.hero__title .line:last-child { padding-left: clamp(0rem, 6vw, 5.5rem); }

/* Gradient fill only where the text stays visible — otherwise plain --ink. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero__title .line:last-child {
    color: transparent;
    background: linear-gradient(96deg, var(--ink) 20%, var(--blue) 62%, var(--violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

.hero__sub {
  max-width: 44ch;
  color: var(--ink-1);
  margin-bottom: var(--s-4);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.hero__meta {
  position: relative;
  margin-top: clamp(3rem, 8vw, 5rem);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.hero__meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }

.scroll-hint {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-5);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  color: var(--ink-3);
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}
.scroll-hint:hover { color: var(--ink-1); }
.scroll-hint__line {
  width: 1px; height: 56px;
  background: linear-gradient(180deg, transparent, var(--line-strong));
  position: relative;
  overflow: hidden;
}
.scroll-hint__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  60%,100% { transform: translateY(100%); }
}
.scroll-hint__label { writing-mode: vertical-rl; }

/* -------------------------------------------------- 8. ABOUT */
.about { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }

.about__media figcaption {
  margin-top: .9rem;
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.about__media:hover .frame img { transform: scale(1.03); }

.lead {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.prose { color: var(--ink-1); max-width: 62ch; }
.prose p + p { margin-top: 0; }
.prose__close { color: var(--ink); }

.about__more { margin: var(--s-4) 0 0; }
.about__more a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--t-small);
  color: var(--ink);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line-strong);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.about__more a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.about__more a:hover .icon--arrow { transform: translateX(4px); }

.facts {
  margin: var(--s-4) 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.fact {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem var(--s-3);
  justify-content: space-between;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
}
.fact dt {
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fact dd { margin: 0; font-size: var(--t-small); color: var(--ink); }

/* -------------------------------------------------- 9. MUSIC */
.featured {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(110,143,232,.07), transparent 55%),
    var(--bg-1);
}
.featured:hover .frame img { transform: scale(1.025); }

.featured__title { font-size: var(--t-h3); margin-bottom: .5rem; }
.featured__meta {
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.featured__desc { color: var(--ink-1); max-width: 52ch; margin-bottom: var(--s-4); }
.featured__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--s-4); }

/* Spotify embed slot */
.embed-slot {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-2);
  min-height: 152px;
  display: grid;
  place-items: center;
  padding: var(--s-3);
}
.embed-slot__inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--ink-3);
  font-size: var(--t-small);
}
.embed-slot__inner .icon { width: 1.4em; height: 1.4em; }
.embed-slot p { margin: 0; }
.embed {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
  /* Spotify paints its own dark surface; keep the page from tinting the frame */
  color-scheme: normal;
}

/* Discography rows */
.disco__row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas:
    "art title links"
    "art meta  links";
  align-items: center;
  gap: .1rem var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  isolation: isolate; /* keeps the ::before hover fill inside this row's stack */
  transition: padding-inline .4s var(--ease-out);
}
.disco__row::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  border-radius: 10px;
  background: var(--bg-1);
  opacity: 0;
  z-index: -1;
  transition: opacity .35s var(--ease);
}
.disco__row:hover::before { opacity: 1; }
.disco__row:hover { padding-inline: .35rem; }
.disco__row:hover .disco__art img { transform: scale(1.08); }

.disco__art {
  grid-area: art;
  width: 44px; height: 44px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.disco__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }

.disco__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 400;
  letter-spacing: -.02em;
}
.disco__type, .disco__year {
  grid-area: meta;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.disco__year { justify-self: start; }

.disco__links { grid-area: links; display: flex; gap: var(--s-2); }
.disco__links a {
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.disco__links a:hover { color: var(--ink); border-bottom-color: var(--blue); }

.disco__note {
  margin-top: var(--s-4);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.disco__note a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.disco__note a:hover { border-bottom-color: var(--blue); }

/* -------------------------------------------------- 10. SELECTED WORKS (RESERVED)
   The section was removed from index.html because its five tracks were invented
   placeholders. These rules are kept intact so the section can be rebuilt around
   real releases by pasting the markup back — nothing else references them. */
.works { border-top: 1px solid var(--line); }

.work {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s-2) var(--s-3);
  padding: clamp(1.5rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: transform .5s var(--ease-out);
}
.work::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  transition: width .7s var(--ease-out);
}
.work:hover::after { width: 100%; }
.work:hover .work__title { color: var(--ink); }
.work:hover { transform: translateX(6px); }

.work__index {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  color: var(--ink-3);
  padding-top: .55rem;
}
.work__title {
  font-size: var(--t-h3);
  color: var(--ink-1);
  margin-bottom: .45rem;
  transition: color .4s var(--ease);
}
.work__mood {
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: .85;
  margin-bottom: .85rem;
}
.work__text { color: var(--ink-2); max-width: 58ch; margin: 0; }
.work__text em { color: var(--ink-1); font-style: italic; }
.work__year {
  grid-column: 2;
  font-size: var(--t-micro);
  letter-spacing: .18em;
  color: var(--ink-3);
}

/* -------------------------------------------------- 11. CONNECT */

/* The monogram returns once more as texture, not as signage — low enough
   to read as a watermark rather than a third logo on the page. */
.section--connect { overflow: hidden; }
.watermark {
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: clamp(280px, 40vw, 620px);
  height: auto;
  opacity: .035;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 0;
}
.section--connect .wrap { position: relative; z-index: 1; }

.connect { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }

.connect__lead {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.45;
  max-width: 34ch;
  margin-bottom: var(--s-4);
}

.mailto {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 300;
  letter-spacing: -.025em;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color .4s var(--ease), color .4s var(--ease);
  overflow-wrap: anywhere;
}
.mailto:hover { color: var(--blue); border-bottom-color: var(--blue); }
.mailto:hover .icon--arrow { transform: translateX(5px); }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: var(--s-4);
}
.socials a {
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .55rem 1rem;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.socials a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--bg-1);
}

.connect__note {
  margin-top: var(--s-5);
  padding: var(--s-3);
  border-left: 1px solid var(--amber);
  background: rgba(217,166,107,.04);
  border-radius: 0 8px 8px 0;
  font-size: var(--t-small);
  color: var(--ink-2);
  max-width: 48ch;
}
.connect__note strong { color: var(--ink-1); font-weight: 500; }

/* Form */
.form { display: grid; gap: var(--s-3); align-content: start; }

.field { display: grid; gap: .5rem; }
.field label {
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input,
.field textarea,
.select select {
  width: 100%;
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .9rem 1rem;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
  appearance: none;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field input:hover, .field textarea:hover, .select select:hover { border-color: var(--line-strong); }
.field input:focus, .field textarea:focus, .select select:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--bg-2);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #C9736B; }

.field__error {
  font-size: var(--t-micro);
  letter-spacing: .06em;
  color: #C9736B;
  min-height: 1em;
}

.select { position: relative; }
.select .icon {
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 1.1em; height: 1.1em;
  color: var(--ink-2);
  pointer-events: none;
}
.select select option { background: var(--bg-1); color: var(--ink); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  font-size: var(--t-small);
  color: var(--ink-2);
  min-height: 1.4em;
  margin: 0;
}
.form__status.is-ok  { color: var(--blue); }
.form__status.is-err { color: #C9736B; }

/* -------------------------------------------------- 12. FOOTER */
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-5);
  background: var(--bg);
}
.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.footer__brand { display: flex; align-items: center; gap: .85rem; }
.footer__brand-text { display: flex; flex-direction: column; gap: .25rem; }
.footer__logo { height: 36px; width: auto; opacity: .8; }
.footer__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -.02em;
}
.footer__tag { font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.footer__links a {
  font-size: var(--t-small);
  color: var(--ink-2);
  transition: color .3s var(--ease);
}
.footer__links a:hover { color: var(--ink); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-size: var(--t-micro);
  color: var(--ink-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.footer__imprint { transition: color .3s var(--ease); }
.footer__imprint:hover { color: var(--ink-1); }

/* -------------------------------------------------- 13. REVEAL ANIMATION */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Mobile / tablet: a 2.7:1 photo cropped to a portrait viewport puts the face
   directly behind the headline. Instead the image becomes a band across the top
   that dissolves into the page, and the type sits below it on clean black. */
@media (max-width: 899px) {
  .hero { padding-top: 0; }
  .hero__bg { bottom: auto; height: 48svh; min-height: 260px; }
  .hero__img { opacity: 1; }
  .hero__veil {
    background:
      linear-gradient(180deg,
        rgba(10,10,11,.72) 0%,
        rgba(10,10,11,.10) 26%,
        rgba(10,10,11,.42) 66%,
        rgba(10,10,11,.92) 88%,
        var(--bg) 100%);
  }
  .aura { opacity: .3; }
  .aura--violet { top: 4vh; }
  .hero__content { padding-top: var(--s-4); }
  /* the dots strand themselves at the end of a wrapped line — gap alone reads better */
  .hero__meta { gap: .35rem 1.15rem; }
  .hero__meta .sep { display: none; }
}

/* -------------------------------------------------- 14. BREAKPOINTS */
@media (min-width: 640px) {
  .disco__row {
    grid-template-columns: 52px minmax(0, 1fr) 7rem 5rem auto;
    grid-template-areas: "art title type year links";
    gap: var(--s-3);
  }
  .disco__art { width: 52px; height: 52px; }
  .disco__type { grid-area: type; }
  .disco__year { grid-area: year; }
  .work { grid-template-columns: 3.5rem 1fr 6rem; }
  .work__year { grid-column: 3; justify-self: end; text-align: right; }
  .footer__inner { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .footer__links { margin-left: auto; }
  .footer__legal { width: 100%; justify-content: space-between; }
}

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__inner .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .scroll-hint { display: flex; }

  .about   { grid-template-columns: minmax(280px, .8fr) 1.2fr; align-items: start; }
  .featured { grid-template-columns: minmax(260px, .85fr) 1.15fr; align-items: center; }
  .connect  { grid-template-columns: 1fr 1fr; }
  .facts    { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  .fact:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (min-width: 1200px) {
  .hero__sub { font-size: 1.125rem; }
}

/* Sticky portrait on tall desktop viewports */
@media (min-width: 900px) and (min-height: 760px) {
  .about__media { position: sticky; top: 7rem; }
}

/* -------------------------------------------------- 15. MOTION / A11Y PREFS */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .grain, .cursor-glow { display: none; }
  .aura { animation: none; }
}

@media (prefers-contrast: more) {
  :root {
    --ink-1: #D8D8DE;
    --ink-2: #A8A8B2;
    --line: rgba(255,255,255,.18);
    --line-strong: rgba(255,255,255,.34);
  }
}

/* -------------------------------------------------- 16. JOURNEY PAGE */

/* Intro */
.jhero {
  padding: clamp(8rem, 16vw, 12rem) 0 clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}
.jhero::after {                       /* one soft light so the page does not open flat */
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: min(900px, 90vw); height: min(900px, 90vw);
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(110,143,232,.13), transparent 62%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}
.jhero__title {
  font-size: clamp(2.5rem, 8vw, 6rem);
  font-weight: 200;
  letter-spacing: -.045em;
  line-height: .95;
  margin-bottom: var(--s-4);
}
.jhero__title .grad {
  color: transparent;
  background: linear-gradient(96deg, var(--ink) 10%, var(--blue) 58%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.jhero__intro {
  max-width: 60ch;
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -.012em;
  color: var(--ink-1);
}

/* Chapter index */
.jindex {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
}
.jindex a {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  font-size: var(--t-small);
  color: var(--ink-2);
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.jindex a em {
  font-style: normal;
  font-size: var(--t-micro);
  letter-spacing: .18em;
  color: var(--ink-3);
}
.jindex a:hover { color: var(--ink); border-bottom-color: var(--blue); }

/* Chapters */
.chapter { padding-block: clamp(3.5rem, 9vw, 7rem); border-top: 1px solid var(--line); }
.chapter__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }

.chapter__media figcaption {
  margin-top: .9rem;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* The five photos come from different shoots — a shared grade keeps them
   reading as one series instead of five loose files. */
.chapter__media .frame img {
  filter: grayscale(.28) contrast(1.05) brightness(.95);
}
.chapter__media:hover .frame img {
  transform: scale(1.03);
  filter: grayscale(.1) contrast(1.05) brightness(1);
}

.chapter__body { position: relative; }
.chapter__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: .24em;
  color: var(--ink-3);
  margin-bottom: .8rem;
}
.chapter__mood {
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: .9;
  margin-bottom: .9rem;
}
.chapter__title {
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
.chapter__text { color: var(--ink-1); max-width: 56ch; margin-bottom: var(--s-4); }
.chapter__text em { color: var(--ink); font-style: italic; }

.chapter__track {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .9rem;
  padding: var(--s-2) 0;
  margin-bottom: var(--s-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.chapter__track-label {
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chapter__track-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink);
}

.chapter__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--s-3); }

/* Closing block */
.jclose { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.jclose .wrap { position: relative; z-index: 1; }
.jclose__lead {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 300;
  letter-spacing: -.02em;
  max-width: 34ch;
  margin-bottom: var(--s-4);
}
.jclose__cta { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (min-width: 900px) {
  .chapter__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 5.5rem); }
  /* zig-zag: even chapters put the photo on the right without reordering the DOM */
  .chapter--flip .chapter__media { grid-column: 2; grid-row: 1; }
  .chapter--flip .chapter__body  { grid-column: 1; grid-row: 1; }
}

/* -------------------------------------------------- 17. AUDIENCE MAP */
.amap { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }

.amap__filter { display: flex; flex-wrap: wrap; gap: .45rem; }
.amap__filter button {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .55rem 1rem;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.amap__filter button:hover { color: var(--ink); border-color: var(--line-strong); }
.amap__filter button.is-on {
  color: #06060A;
  background: var(--ink);
  border-color: var(--ink);
}

.amap__figure { margin: 0; min-width: 0; }
.amap__figure svg { width: 100%; height: auto; display: block; }

/* Base = country present in the world file but absent from the dataset.
   data-t="0" = in the dataset with no plays, deliberately distinct from base. */
.amap__figure path {
  fill: #131317;
  stroke: #23232b;
  stroke-width: .5;
  vector-effect: non-scaling-stroke;
  transition: fill .45s var(--ease);
}
.amap__figure path[data-t="0"] { fill: #1b1b22; }
.amap__figure path[data-t="1"] { fill: rgba(110,143,232,.20); }
.amap__figure path[data-t="2"] { fill: rgba(110,143,232,.34); }
.amap__figure path[data-t="3"] { fill: rgba(110,143,232,.52); }
.amap__figure path[data-t="4"] { fill: rgba(124,140,235,.72); }
.amap__figure path[data-t="5"] { fill: var(--amber); }   /* the single strongest market */
.amap__figure path[data-label]:hover { stroke: var(--ink); stroke-width: 1; }

.amap__legend {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.amap__scale {
  width: 110px; height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #1b1b22, rgba(110,143,232,.34), rgba(124,140,235,.72), var(--amber));
}
.amap__spacer { flex: 1; }
.amap__legend-note { color: var(--amber); opacity: .75; }
@media (max-width: 560px) { .amap__legend-note { display: none; } }

.amap__side { min-width: 0; }
.subhead--tight { margin-top: 0; }

.amap__list { display: grid; gap: 0; }
.amap__list li {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
}
.amap__rank {
  font-size: var(--t-micro);
  letter-spacing: .16em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.amap__country { color: var(--ink); }
.amap__more,
.amap__empty {
  color: var(--ink-3) !important;
  font-size: var(--t-micro) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 0 !important;
}
.amap__source {
  margin-top: var(--s-3);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 34ch;
}

@media (min-width: 900px) {
  .amap {
    grid-template-columns: minmax(0, 1fr) 250px;
    grid-template-areas: "filter filter" "map side";
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .amap__filter { grid-area: filter; }
  .amap__figure { grid-area: map; }
  .amap__side   { grid-area: side; }
}

/* -------------------------------------------------- 18. FLOATING PLAYER */

/* Bottom-LEFT on purpose: the hero's scroll hint already occupies the
   bottom-right corner on desktop, and the two would collide. */
.mp {
  position: fixed;
  left: max(var(--s-2), env(safe-area-inset-left));
  bottom: max(var(--s-2), env(safe-area-inset-bottom));
  z-index: 48;                       /* under the nav (50), over the content */
  font-family: var(--font-body);
}

/* --- collapsed pill --- */
.mp__fab {
  position: relative;
  display: none;
  width: 56px; height: 56px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg-1);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: transform .35s var(--ease-out), border-color .3s var(--ease);
}
.mp__fab img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mp__fab:hover { transform: scale(1.06); border-color: var(--blue); }
.mp__fab-badge {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #06060A;
  border: 2px solid var(--bg);
}
.mp__fab-badge svg { width: 12px; height: 12px; fill: currentColor; }

/* a quiet pulse while audio is running, so the collapsed state still reads as "playing" */
.mp[data-playing="true"] .mp__fab::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--blue);
  animation: mpPulse 2.4s var(--ease) infinite;
}
@keyframes mpPulse {
  0%   { transform: scale(1);    opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* --- expanded card --- */
.mp__card {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(384px, calc(100vw - 2 * var(--s-2)));
  padding: .6rem .7rem .6rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(17, 17, 20, .72);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}

.mp[data-minimised="true"] .mp__card { display: none; }
.mp[data-minimised="true"] .mp__fab  { display: block; }

.mp__art {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.mp__main { min-width: 0; flex: 1; }

.mp__meta { display: grid; margin-bottom: .3rem; }
.mp__title,
.mp__artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp__title {
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--ink);
}
.mp__artist { font-size: var(--t-micro); letter-spacing: .04em; color: var(--ink-2); }

.mp__bar { display: flex; align-items: center; gap: .5rem; }
.mp__time {
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.mp__time span { color: inherit; }

.mp__controls { display: flex; align-items: center; gap: .15rem; flex: none; }

.mp__btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-1);
  cursor: pointer;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.mp__btn svg { width: 17px; height: 17px; fill: currentColor; }
.mp__btn:hover { color: var(--ink); background: rgba(255,255,255,.07); }

.mp__play { color: var(--ink); }
.mp__play:hover { color: #06060A; background: var(--blue); }

/* Volume slides open on hover/focus so the resting card stays compact. */
.mp__vol-wrap { display: flex; align-items: center; }
.mp__vol {
  width: 0;
  opacity: 0;
  margin-left: 0;
  transition: width .3s var(--ease-out), opacity .25s var(--ease), margin-left .3s var(--ease-out);
}
.mp__vol-wrap:hover .mp__vol,
.mp__vol-wrap:focus-within .mp__vol { width: 56px; opacity: 1; margin-left: .35rem; }

/* --- range inputs (seek + volume) ---------------------------------------
   Native <input type="range"> keeps keyboard control and screen-reader
   semantics for free; only the skin is custom. --fill is set from JS. */
.mp input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  background: transparent;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  margin: 0;
}
.mp input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue) var(--fill, 0%), rgba(255,255,255,.16) var(--fill, 0%));
}
.mp input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue) var(--fill, 0%), rgba(255,255,255,.16) var(--fill, 0%));
}
.mp input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px; height: 10px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.mp input[type="range"]::-moz-range-thumb {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
  border: 0;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.mp__card:hover input[type="range"]::-webkit-slider-thumb,
.mp input[type="range"]:focus-visible::-webkit-slider-thumb { opacity: 1; }
.mp__card:hover input[type="range"]::-moz-range-thumb,
.mp input[type="range"]:focus-visible::-moz-range-thumb { opacity: 1; }

/* --- small screens --- */
@media (max-width: 560px) {
  .mp__card { gap: .6rem; padding: .5rem .6rem; }
  .mp__art { width: 44px; height: 44px; }
  .mp__time { display: none; }         /* the bar alone carries the position */
  .mp__vol-wrap { display: none; }     /* device volume keys do this job */
}

@media (prefers-reduced-motion: reduce) {
  .mp[data-playing="true"] .mp__fab::after { animation: none; }
}

@media print { .mp { display: none !important; } }

/* -------------------------------------------------- 18. PRINT */
@media print {
  .nav, .mobile-menu, .grain, .cursor-glow, .scroll-progress,
  .scroll-hint, .hero__bg, .form, .embed-slot { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1; transform: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}