/* =========================================================
   Docility — ambient music showcase
   Pure CSS, no framework. Mobile-first, cross-platform.
   ========================================================= */

/* ---------------------------------------------------------
   VIC (Brand Victoria) — self-hosted webfont
   --------------------------------------------------------- */
@font-face { font-family: "VIC"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("assets/fonts/VIC-ExtraLight.woff2") format("woff2"), url("assets/fonts/VIC-ExtraLight.woff") format("woff"); }
@font-face { font-family: "VIC"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("assets/fonts/VIC-Light.woff2") format("woff2"), url("assets/fonts/VIC-Light.woff") format("woff"); }
@font-face { font-family: "VIC"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/VIC-Regular.woff2") format("woff2"), url("assets/fonts/VIC-Regular.woff") format("woff"); }
@font-face { font-family: "VIC"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/VIC-Medium.woff2") format("woff2"), url("assets/fonts/VIC-Medium.woff") format("woff"); }
@font-face { font-family: "VIC"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("assets/fonts/VIC-SemiBold.woff2") format("woff2"), url("assets/fonts/VIC-SemiBold.woff") format("woff"); }
@font-face { font-family: "VIC"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/VIC-Bold.woff2") format("woff2"), url("assets/fonts/VIC-Bold.woff") format("woff"); }

:root {
  /* Typography */
  --font: "VIC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Base */
  --bg:        #070a14;
  --ink:       #eef2ff;
  --ink-dim:   #aab3d4;
  --line:      rgba(255, 255, 255, 0.10);

  /* Colourful palette (water + nature) */
  --aqua:   #36e0c8;
  --sky:    #46c6ff;
  --violet: #9a7bff;
  --coral:  #ff7a8f;
  --gold:   #ffd36e;
  --green:  #52e0a1;

  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  --radius: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --maxw: 1120px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font); font-weight: 500; line-height: 1.05; }

/* =========================================================
   Animated background
   ========================================================= */
.aurora {
  position: fixed;
  inset: -20vmax;
  z-index: -3;
  filter: blur(70px) saturate(135%);
  pointer-events: none;
}
.aurora::after { /* dark vignette so text stays legible */
  content: "";
  position: absolute;
  inset: 20vmax;
  background: radial-gradient(120% 80% at 50% 0%, transparent 40%, var(--bg) 100%);
}
.blob {
  position: absolute;
  width: 48vmax;
  height: 48vmax;
  border-radius: 50%;
  opacity: 0.65;
  mix-blend-mode: screen;
  will-change: transform;
}
.blob--aqua   { background: radial-gradient(circle, var(--aqua), transparent 62%);   top: -8%;  left: -6%;  animation: drift1 26s var(--ease) infinite; }
.blob--violet { background: radial-gradient(circle, var(--violet), transparent 62%); top: 6%;   right: -10%; animation: drift2 32s var(--ease) infinite; }
.blob--coral  { background: radial-gradient(circle, var(--coral), transparent 62%);  bottom: -16%; left: 12%; animation: drift3 29s var(--ease) infinite; }
.blob--gold   { background: radial-gradient(circle, var(--gold), transparent 60%);   bottom: -6%; right: 4%; animation: drift1 35s var(--ease) infinite reverse; }
.blob--sky    { background: radial-gradient(circle, var(--sky), transparent 62%);    top: 30%;  left: 32%;  animation: drift2 24s var(--ease) infinite; }

@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8vmax, 6vmax) scale(1.15); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-7vmax, 5vmax) scale(0.9); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6vmax, -7vmax) scale(1.12); } }

#rain {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.5;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   Decorative edge rings  (desktop only — hidden below 1200px)
   Fixed overlay, z-index: -1 keeps them behind all content.
   Rings bleed off the left/right edges and overlap each other,
   creating a framing effect without touching the main column.
   ========================================================= */
.deco-rings {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.deco-ring {
  display: none;
  position: absolute;
  border-radius: 50%;
}
@media (min-width: 1200px) {
  .deco-ring { display: block; }

  /* Left cluster — bleeds off the left edge */
  .deco-ring--l1 {
    width: 440px; height: 440px;
    top: 5%;  left: -175px;
    border: 1.5px solid var(--aqua);
    opacity: 0.18;
    box-shadow: 0 0 48px color-mix(in srgb, var(--aqua) 14%, transparent);
  }
  .deco-ring--l2 {
    width: 300px; height: 300px;
    top: 18%; left: -90px;
    border: 1.5px solid var(--violet);
    opacity: 0.16;
    box-shadow: 0 0 36px color-mix(in srgb, var(--violet) 13%, transparent);
  }
  .deco-ring--l3 {
    width: 200px; height: 200px;
    top: 29%; left: -62px;
    border: 1.5px solid var(--coral);
    opacity: 0.14;
    box-shadow: 0 0 28px color-mix(in srgb, var(--coral) 12%, transparent);
  }

  /* Right cluster — bleeds off the right edge */
  .deco-ring--r1 {
    width: 420px; height: 420px;
    top: 8%;  right: -160px;
    border: 1.5px solid var(--sky);
    opacity: 0.17;
    box-shadow: 0 0 48px color-mix(in srgb, var(--sky) 13%, transparent);
  }
  .deco-ring--r2 {
    width: 290px; height: 290px;
    top: 21%; right: -78px;
    border: 1.5px solid var(--gold);
    opacity: 0.16;
    box-shadow: 0 0 36px color-mix(in srgb, var(--gold) 12%, transparent);
  }
  .deco-ring--r3 {
    width: 190px; height: 190px;
    top: 32%; right: -58px;
    border: 1.5px solid var(--violet);
    opacity: 0.13;
    box-shadow: 0 0 28px color-mix(in srgb, var(--violet) 10%, transparent);
  }
}

/* =========================================================
   Navigation
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 4vw, 3rem);
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), padding 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7, 10, 20, 0.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}
.nav__mark {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--aqua), var(--sky), var(--violet), var(--coral), var(--gold), var(--aqua));
  box-shadow: 0 0 18px var(--sky);
  animation: spin 8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.nav__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem clamp(0.8rem, 2.3vw, 1.9rem); font-size: 0.95rem; }
.nav__links a { position: relative; color: var(--ink-dim); transition: color 0.25s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1.5px;
  background: linear-gradient(90deg, var(--aqua), var(--violet));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

/* =========================================================
   Layout helpers
   ========================================================= */
section { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.1rem, 5vw, 3rem); }
.section-head { max-width: var(--maxw); margin: 0 auto clamp(2rem, 5vw, 3.5rem); }
.section-head h2 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
.section-head__sub { color: var(--ink-dim); margin-top: 0.8rem; max-width: 46ch; }
/* A second heading within a section (e.g. EPs after Albums) needs breathing room above it. */
.albums__list + .section-head { margin-top: clamp(3rem, 7vw, 5rem); }
.releases__sub {
  max-width: var(--maxw);
  margin: clamp(2rem, 4vw, 3rem) auto clamp(0.7rem, 1.5vw, 1rem);
  font-size: clamp(0.7rem, 1.2vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.section-head + .releases__sub { margin-top: 0; }

/* Upcoming releases — "in progress" badge on the sleeve */
.albums__list--upcoming .sleeve::before {
  content: "In progress";
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 0.2rem 0.6rem; border-radius: 100px;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(154, 123, 255, 0.18); border: 1px solid rgba(154, 123, 255, 0.45);
  color: #9a7bff;
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  padding-top: 6rem;
}
.hero__inner { max-width: 880px; }
.hero__eyebrow {
  font-size: 0.85rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 1.4rem;
}
.hero__title { font-size: clamp(3.6rem, 16vw, 9.5rem); line-height: 0.92; }
.hero__word {
  background: linear-gradient(100deg, var(--aqua), var(--sky), var(--violet), var(--coral), var(--gold));
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue 12s ease infinite, rise 1s var(--ease) both;
  animation-delay: 0s, calc(var(--d, 0) * 0.08s);
  display: inline-block;
}
@keyframes hue { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.hero__tagline {
  margin: 1.6rem auto 0;
  max-width: 54ch;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--ink-dim);
}
.hero__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 100px;
  font-weight: 500; font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s;
}
.btn--lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn--solid {
  color: #06121b;
  background: linear-gradient(100deg, var(--aqua), var(--sky));
  box-shadow: 0 12px 30px -10px var(--sky);
}
.btn--solid:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px var(--sky); }
.btn--ghost { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,0.03); }
.btn--ghost:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.07); }

/* Animated equaliser bars */
.hero__wave { margin-top: 3rem; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.bars span {
  width: 5px; border-radius: 4px;
  background: linear-gradient(180deg, var(--aqua), var(--violet));
  animation: eq 1.4s ease-in-out infinite;
}
@keyframes eq { 0%,100% { height: 18%; } 50% { height: 100%; } }

.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.5px solid var(--line); border-radius: 20px;
  display: grid; place-items: start center; padding-top: 8px;
}
.hero__scroll span { width: 4px; height: 8px; border-radius: 4px; background: var(--ink-dim); animation: scrolldot 1.6s var(--ease) infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* =========================================================
   About
   ========================================================= */
.about__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: clamp(1.5rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 760px) {
  .about__grid { grid-template-columns: 0.85fr 1.15fr; }
}
.about__lead {
  max-width: 50ch;
  font-size: clamp(1.25rem, 3.2vw, 1.9rem);
  font-family: var(--font); font-weight: 300; line-height: 1.4;
  color: var(--ink);
}

/* Artist portrait — transparent cutout floating over the colour wash */
.about__portrait {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  max-width: 420px;
  justify-self: center;
}
.about__portrait::before { /* colourful halo behind the figure */
  content: "";
  position: absolute;
  inset: 6% 6% 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--violet), var(--sky) 45%, transparent 70%);
  filter: blur(38px);
  opacity: 0.55;
  z-index: 0;
  animation: halo 7s ease-in-out infinite;
}
.about__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.5));
  animation: float 6s var(--ease) infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes halo { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.65; transform: scale(1.06); } }

/* =========================================================
   Albums
   ========================================================= */
/* Grid of square album tiles — three across on desktop */
.albums__list {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: clamp(1.1rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .albums__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .albums__list { grid-template-columns: repeat(3, 1fr); }
}

/* Record sleeves — the resting grid shows only these */
.sleeve {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(150deg, var(--accent), #0a0e1c 78%);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.sleeve:hover, .sleeve:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: var(--shadow), 0 12px 34px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  outline: none;
}
.sleeve__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.sleeve:hover .sleeve__art, .sleeve:focus-visible .sleeve__art { transform: scale(1.02); }
.sleeve__art.is-missing { display: none; }
.sleeve__fallback {
  font-family: var(--font);
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  color: #fff; opacity: 0.92; text-align: center;
  padding: 1rem; line-height: 1.05;
}

/* =========================================================
   Tools / gear
   ========================================================= */
/* DAW screenshot, tilted slightly */
.gear-feature {
  max-width: var(--maxw);
  margin: 0 auto clamp(3rem, 7vw, 5rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .gear-feature { grid-template-columns: 1.4fr 1fr; }
}
.gear-feature__frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, color-mix(in srgb, var(--violet) 22%, #0a0e1c), #0a0e1c 80%);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  aspect-ratio: 2557 / 1366;
  transform: perspective(1400px) rotateY(4deg) rotateX(2deg);
  transition: transform 0.5s var(--ease);
}
.gear-feature:hover .gear-feature__frame { transform: perspective(1400px) rotateY(0deg) rotateX(0deg); }
.gear-feature__shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.gear-feature__shot.is-missing { display: none; }
.gear-feature__fallback {
  display: none; /* shown only when the screenshot is missing */
  font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--ink-dim);
  padding: clamp(2.5rem, 8vw, 5rem) 1rem; text-align: center;
}
.gear-feature__shot.is-missing ~ .gear-feature__fallback { display: block; }
.gear-feature__cap .gear__name { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-top: 0.3rem; }
.gear-feature__cap .gear__note { margin-top: 0.7rem; }

/* Cut-out hardware grid — floating images with a colour halo (like the portrait) */
/* Each role lives in its own labelled group (a row of 3, then a row of 2). */
.gear-group { max-width: var(--maxw); margin: 0 auto; }
.gear-group + .gear-group { margin-top: clamp(2.5rem, 6vw, 4rem); }
.gear-group__title {
  text-align: center;
  font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: clamp(1.4rem, 4vw, 2.4rem);
}

/* Flex (not grid) so an odd count wraps to a centred final row: 1 / 2 / 3 per
   row as the viewport grows — e.g. five items become a row of 3 then 2. */
.gear-grid {
  --gear-gap: clamp(1.2rem, 3vw, 2.5rem);
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3rem) var(--gear-gap);
}

.gear { margin: 0; text-align: center; flex: 0 1 100%; max-width: 380px; }
@media (min-width: 560px) {
  .gear { flex-basis: calc((100% - var(--gear-gap)) / 2); }
}
@media (min-width: 900px) {
  .gear { flex-basis: calc((100% - 2 * var(--gear-gap)) / 3); max-width: none; }
}
.gear__media {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  margin-bottom: 1.1rem;
}
.gear__media::before { /* colourful halo behind the cut-out, tinted per item */
  content: "";
  position: absolute; inset: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--accent, var(--sky)), transparent 70%);
  filter: blur(36px);
  opacity: 0.55;
  z-index: 0;
  animation: halo 7s ease-in-out infinite;
}
/* Shape the halo to the silhouette: a flat ellipse behind wide kit (keyboard,
   synth), an upright one behind tall kit (recorder), a roomy one behind the
   diagonal mic — so the glow hugs the object instead of looming around it. */
.gear--wide .gear__media::before { inset: 30% 3%; }
.gear--tall .gear__media::before { inset: 7% 25%; }
.gear--diag .gear__media::before { inset: 19%; }

.gear__art {
  position: relative; z-index: 1;
  max-width: 88%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
  animation: float 6s var(--ease) infinite;
}
.gear--wide .gear__art { max-width: 100%; } /* let wide kit fill the width */
.gear__art.is-missing { display: none; }
.gear__fallback {
  display: none; /* shown only when the cut-out is missing */
  z-index: 1;
  font-family: var(--font);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  color: #fff; opacity: 0.85; line-height: 1.1;
  padding: 0 0.5rem;
}
.gear__art.is-missing ~ .gear__fallback { display: block; }
.gear__cat {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--aqua); margin-bottom: 0.3rem;
}
.gear__name { font-size: 1.2rem; line-height: 1.2; }
.gear__note { color: var(--ink-dim); font-size: 0.92rem; margin-top: 0.5rem; }

/* =========================================================
   On my turntable — rotating coverflow carousel
   ========================================================= */
.tt-carousel {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 2vw, 1rem);
}
.tt-carousel__stage {
  position: relative;
  flex: 1 1 auto;
  height: clamp(230px, 62vw, 360px);
  perspective: 1500px;
  transform-style: preserve-3d;
}
.tt-carousel__nav {
  flex: none; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.6rem; line-height: 1; color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.tt-carousel__nav:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
}

/* Base card (shared by carousel) */
.tt {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--accent, var(--sky)), #0a0e1c 80%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  isolation: isolate;
}

/* Cards are stacked in the stage and positioned by JS (transform set inline). */
.tt-carousel .tt {
  position: absolute; top: 50%; left: 50%;
  width: clamp(180px, 56vw, 300px);
  margin: 0;
  cursor: pointer;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease),
              box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  will-change: transform, opacity;
}
.tt-carousel .tt.is-active {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: var(--shadow), 0 20px 54px -16px color-mix(in srgb, var(--accent) 65%, transparent);
}
.tt-carousel .tt:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; }

.tt__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.tt__art.is-missing { display: none; }
.tt__fallback {
  position: absolute; inset: 0;
  display: none; place-items: center;
  padding: 0.6rem; text-align: center;
  font-size: clamp(0.8rem, 2.4vw, 1rem); color: #fff; opacity: 0.92; line-height: 1.15;
}
.tt__art.is-missing ~ .tt__fallback { display: grid; }
.tt__meta {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 1.8rem 0.8rem 0.7rem;
  background: linear-gradient(to top, rgba(4, 6, 12, 0.92), transparent);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
/* Only the centred card reveals its title/artist. */
.tt-carousel .tt.is-active .tt__meta { transform: translateY(0); }
.tt__title { font-size: 0.95rem; font-weight: 500; line-height: 1.15; color: var(--ink); }
.tt__artist { font-size: 0.8rem; color: var(--ink-dim); }

/* =========================================================
   DJ Mixes
   ========================================================= */
.mixes__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: clamp(1.1rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .mixes__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .mixes__grid { grid-template-columns: repeat(3, 1fr); } }

.mix-card {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  min-height: clamp(140px, 30vw, 200px);
  border-radius: 14px; overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 30%, #070a14), #0a0e1c 78%);
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.mix-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 30%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 65%);
  pointer-events: none;
}
.mix-card:hover, .mix-card:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: var(--shadow), 0 12px 34px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  outline: none;
}
.mix-card__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.22; pointer-events: none;
}
.mix-card__title {
  position: relative; z-index: 1;
  display: block; font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 500; color: var(--ink);
}
.mix-card__date {
  position: relative; z-index: 1;
  display: block; font-size: 0.8rem; color: var(--ink-dim); margin-top: 0.3rem;
  letter-spacing: 0.05em;
}

/* Mix popup */
.mxpop {
  position: fixed; inset: 0; z-index: 1050;
  display: grid; place-items: center;
  padding: clamp(0.8rem, 4vw, 2rem);
}
.mxpop[hidden] { display: none; }
.mxpop__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 6, 12, 0.7);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.mxpop__panel {
  position: relative; z-index: 1;
  width: min(680px, 96vw);
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(180deg, #0e1426, #0a0e1c);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 3.5vw, 2rem);
  animation: lb-in 0.35s var(--ease) both;
}
.mxpop__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(0,0,0,0.4); color: var(--ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.mxpop__close:hover { background: rgba(0,0,0,0.7); transform: rotate(90deg); }
.mxpop__head { display: flex; align-items: flex-start; gap: 1rem; padding-right: 2.4rem; margin-bottom: 1.2rem; }
.mxpop__art { width: 72px; height: 72px; flex: none; border-radius: 8px; object-fit: cover; border: 1px solid rgba(255,255,255,0.1); }
.mxpop__head-text { min-width: 0; }
.mxpop__title { font-size: clamp(1.3rem, 3.6vw, 1.8rem); }
.mxpop__date { color: var(--ink-dim); font-size: 0.85rem; margin-top: 0.3rem; }
.mxpop__link {
  display: inline-block; margin-top: 0.6rem;
  font-size: 0.82rem; color: var(--aqua);
  border-bottom: 1px solid color-mix(in srgb, var(--aqua) 40%, transparent);
}
.mxpop__link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.mxpop__player { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.mxpop__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Mix popup docked — keeps Mixcloud iframe alive so Widget API stays connected */
.mxpop.is-docked { pointer-events: none; }
.mxpop.is-docked .mxpop__backdrop { opacity: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* animation: none cancels lb-in fill-mode which would otherwise lock opacity to 1 */
.mxpop.is-docked .mxpop__panel { opacity: 0; visibility: hidden; animation: none; }

/* =========================================================
   The scenery — aspect-aware masonry of photos
   ========================================================= */
/* CSS columns keep each photo's natural shape (portrait, landscape,
   panorama) without cropping; tiles flow top-to-bottom per column. */
.gallery__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  column-gap: clamp(0.8rem, 2vw, 1.2rem);
  column-count: 1;
}
@media (min-width: 540px)  { .gallery__grid { column-count: 2; } }
@media (min-width: 900px)  { .gallery__grid { column-count: 3; } }
@media (min-width: 1300px) { .gallery__grid { column-count: 4; } }

.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 clamp(0.8rem, 2vw, 1.2rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #0a0e1c;
  break-inside: avoid;            /* don't split a photo across columns */
  box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.shot:hover, .shot:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--sky) 60%, transparent);
  box-shadow: var(--shadow), 0 12px 30px -12px color-mix(in srgb, var(--sky) 55%, transparent);
  outline: none;
}
.shot__img {
  width: 100%; height: auto; display: block;
  transition: transform 0.6s var(--ease);
}
.shot:hover .shot__img, .shot:focus-visible .shot__img { transform: scale(1.04); }
.shot__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 1.4rem 0.9rem 0.7rem;
  font-size: 0.82rem; color: var(--ink); text-align: left;
  background: linear-gradient(to top, rgba(4, 6, 12, 0.9), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; transform: none; }
.shot.is-missing { display: none; } /* hide tiles whose photo failed to load */

/* Collapse the turntable section until turntable.json exists */
.turntable.is-empty .tt-carousel { display: none; }

/* =========================================================
   Turntable popup — Discogs details + embedded YouTube
   ========================================================= */
.ttpop {
  position: fixed; inset: 0; z-index: 1050;
  display: grid; place-items: center;
  padding: clamp(0.8rem, 4vw, 2rem);
}
.ttpop[hidden] { display: none; }
.ttpop__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 6, 12, 0.7);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.ttpop__panel {
  position: relative; z-index: 1;
  width: min(720px, 96vw); max-height: 90vh; overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0e1426, #0a0e1c);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 3.5vw, 2rem);
  animation: lb-in 0.35s var(--ease) both;
}
.ttpop__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(0,0,0,0.4); color: var(--ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.ttpop__close:hover { background: rgba(0,0,0,0.7); transform: rotate(90deg); }

.ttpop__head { display: flex; gap: 1.1rem; padding-right: 2.4rem; }
.ttpop__cover {
  width: clamp(90px, 26vw, 140px); height: clamp(90px, 26vw, 140px);
  flex: none; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,0.45);
}
.ttpop__headtext { min-width: 0; }
.ttpop__title { font-size: clamp(1.3rem, 3.6vw, 1.8rem); line-height: 1.1; }
.ttpop__artist { color: var(--ink); font-size: 1.05rem; margin-top: 0.15rem; }
.ttpop__metaline { color: var(--ink-dim); font-size: 0.85rem; margin-top: 0.4rem; }
.ttpop__genres { color: var(--sky); font-size: 0.75rem; letter-spacing: 0.06em; margin-top: 0.3rem; }
.ttpop__discogs {
  display: inline-block; margin-top: 0.7rem;
  font-size: 0.82rem; color: var(--aqua);
  border-bottom: 1px solid color-mix(in srgb, var(--aqua) 40%, transparent);
}
.ttpop__discogs:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ttpop__streams {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem;
}
.ttpop__streams[hidden] { display: none; }
.ttpop__stream {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.75rem; border-radius: 100px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em;
  border: 1px solid var(--line); background: rgba(255,255,255,0.05);
  color: var(--ink-dim); transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ttpop__stream:hover { background: rgba(255,255,255,0.12); color: var(--ink); border-color: rgba(255,255,255,0.25); }
.ttpop__stream--spotify:hover  { border-color: #1ed760; color: #1ed760; }
.ttpop__stream--appleMusic:hover { border-color: #fc3c44; color: #fc3c44; }
.ttpop__stream--youtubeMusic:hover { border-color: #ff0000; color: #ff0000; }
.ttpop__stream--tidal:hover    { border-color: #00ffff; color: #00ffff; }
.ttpop__comment {
  margin-top: 1rem; padding: 0.8rem 1rem;
  border-left: 2px solid var(--violet);
  background: rgba(154,123,255,0.08); border-radius: 0 8px 8px 0;
  color: var(--ink-dim); font-size: 0.92rem; font-style: italic;
}

.ttpop__body { margin-top: 1.2rem; }
.ttpop__body.is-empty { display: none; }
.ttpop__player {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: #000;
  border: 1px solid var(--line);
}
.ttpop__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ttpop__videos {
  list-style: none; padding: 0; margin: 0.7rem 0 0;
  display: flex; flex-direction: column; gap: 0.3rem;
  max-height: 150px; overflow-y: auto;
}
.ttpop__vid {
  width: 100%; text-align: left; cursor: pointer;
  padding: 0.45rem 0.7rem; border-radius: 8px;
  border: 1px solid transparent; background: rgba(255,255,255,0.03); color: var(--ink-dim);
  font-size: 0.85rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ttpop__vid:hover { background: rgba(255,255,255,0.07); color: var(--ink); }
.ttpop__vid[aria-current="true"] {
  color: var(--ink); border-color: color-mix(in srgb, var(--sky) 50%, transparent);
  background: color-mix(in srgb, var(--sky) 12%, transparent);
}

.ttpop__tracks { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.ttpop__tracks[hidden] { display: none; }
.ttpop__tracks summary {
  cursor: pointer; color: var(--ink-dim); font-size: 0.85rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.ttpop__tracklist { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.ttpop__track {
  display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 0.6rem;
  padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.88rem;
}
.ttpop__pos { color: var(--ink-dim); }
.ttpop__dur { color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* =========================================================
   Lightbox — full-screen scenery viewer
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 1100;
  display: grid; place-items: center;
  padding: clamp(0.8rem, 3vw, 2rem);
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(3, 5, 10, 0.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lightbox__dialog {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  max-width: min(1400px, 100%); max-height: 100%;
}
.lightbox__figure {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  max-height: 90vh;
}
.lightbox__img {
  max-width: 100%;
  max-height: 82vh;               /* whole image always visible — no crop */
  width: auto; height: auto;
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  animation: lb-in 0.35s var(--ease) both;
}
@keyframes lb-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.lightbox__cap {
  color: var(--ink-dim); font-size: 0.92rem; text-align: center;
  max-width: 60ch; min-height: 1.2em;
}
.lightbox__count {
  position: absolute; top: -2.2rem; left: 50%; transform: translateX(-50%);
  color: var(--ink-dim); font-size: 0.8rem; letter-spacing: 0.15em;
}
.lightbox__close {
  position: absolute; top: -2.6rem; right: 0; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.lightbox__close:hover { background: rgba(0, 0, 0, 0.7); transform: rotate(90deg); }
.lightbox__nav {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); color: var(--ink);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.lightbox__nav:hover { background: rgba(0, 0, 0, 0.75); border-color: rgba(255,255,255,0.3); }
.lightbox__nav--prev:hover { transform: translateX(-3px); }
.lightbox__nav--next:hover { transform: translateX(3px); }

@media (max-width: 640px) {
  /* On phones, float the arrows over the image edges to save width */
  .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.55); }
  .lightbox__nav--prev { left: 0.2rem; }
  .lightbox__nav--next { right: 0.2rem; }
  .lightbox__img { max-height: 74vh; }
}

/* =========================================================
   Field recording map
   ========================================================= */
.fmap__wrap {
  max-width: var(--maxw); margin: 0 auto;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.fmap__map {
  height: clamp(320px, 52vw, 520px);
  background: #0a0e1c;
}

.fmap__pin { background: transparent; border: none; }
.fmap__pin-dot {
  display: block; width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--pin-color, var(--aqua));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin-color, var(--aqua)) 25%, transparent),
              0 0 12px var(--pin-color, var(--aqua));
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pin-color, var(--aqua)) 25%, transparent), 0 0 12px var(--pin-color, var(--aqua)); }
  50%       { box-shadow: 0 0 0 7px color-mix(in srgb, var(--pin-color, var(--aqua)) 10%, transparent), 0 0 20px var(--pin-color, var(--aqua)); }
}

.fmap__vol-control {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  background: rgba(10, 14, 28, 0.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 8px; border: 1px solid var(--line);
  color: var(--ink-dim);
}
.fmap__vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 72px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,0.15); cursor: pointer;
}
.fmap__vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--aqua); cursor: pointer;
}
.fmap__vol-slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--aqua); border: none; cursor: pointer;
}

.fmap__popup .leaflet-popup-content-wrapper {
  background: #0e1426; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; color: #eef2ff; font-family: inherit;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
.fmap__popup .leaflet-popup-tip { background: #0e1426; }
.fmap__popup .leaflet-popup-content { font-size: 0.88rem; line-height: 1.5; margin: 0.7rem 1rem; }
.fmap__popup .leaflet-popup-content strong { color: #eef2ff; font-weight: 500; }
.fmap__popup .leaflet-popup-content em { color: #46c6ff; font-style: normal; font-size: 0.78rem; }
.leaflet-container { font-family: inherit; }
.fmap__popup-sound {
  display: inline-block; margin-top: 0.4rem;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #36e0c8; opacity: 0.6;
}
.fmap__popup-sound::before { content: "♪ "; }
.fmap__popup-sound.is-playing { opacity: 1; animation: fmap-sound-pulse 1.4s ease-in-out infinite; }
@keyframes fmap-sound-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* =========================================================
   Album popup — the sleeve flips to reveal details + player
   ========================================================= */
.popup {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
}
.popup[hidden] { display: none; }
.popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 6, 12, 0.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.flipcard {
  position: relative; z-index: 1;
  width: min(500px, 92vw, 88vh);
  aspect-ratio: 1 / 1;
  perspective: 1600px;
  will-change: transform;
  /* leap-out from the clicked sleeve (with a little pop), plus a fade on close */
  transition: transform 0.5s cubic-bezier(0.34, 1.25, 0.5, 1), opacity 0.4s ease;
}
.flipcard__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.95s var(--ease) 0.15s; /* slightly slower flip, after the leap */
}
.flipcard.is-flipped .flipcard__inner { transform: rotateY(180deg); }
.flipcard__face {
  position: absolute; inset: 0;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.flipcard__front { background: linear-gradient(150deg, var(--accent), #0a0e1c 80%); }
.flipcard__cover { width: 100%; height: 100%; object-fit: cover; }
.flipcard__back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #0e1426, #0a0e1c);
  display: flex; flex-direction: column;
  padding: clamp(1.2rem, 3.5vw, 1.8rem);
  overflow-y: auto;
}

.popup__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.4); color: var(--ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.popup__close:hover { background: rgba(0, 0, 0, 0.7); transform: rotate(90deg); }
.popup__head {
  display: flex; align-items: center; gap: 0.9rem;
  padding-right: 2.6rem; margin-bottom: 1rem;
}
.popup__thumb {
  width: 60px; height: 60px; flex: none;
  border-radius: 10px; object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.popup__heading { min-width: 0; }
.popup__title { font-size: clamp(1.5rem, 4.2vw, 2rem); line-height: 1.1; }
.popup__year { /* subheading */
  margin: 0.3rem 0 0;
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600; color: var(--accent);
}
.popup__blurb { color: var(--ink-dim); font-size: 0.95rem; margin-bottom: 1.1rem; }
.popup__player {
  border-radius: 12px; overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}
.popup__player iframe { display: block; width: 100%; height: 300px; border: 0; }

/* Volume control (tinted to the album accent) */
.popup__vol { display: flex; align-items: center; gap: 0.7rem; margin-top: 1rem; color: var(--accent); }
.vol__icon { flex: none; opacity: 0.9; }
.vol__range {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 120px; height: 4px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent, var(--aqua)), color-mix(in srgb, var(--accent, var(--aqua)) 30%, transparent));
}
.vol__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 10px var(--accent, var(--aqua)); cursor: pointer;
}
.vol__range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 10px var(--accent, var(--aqua)); cursor: pointer;
}

/* Visually-hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================
   Now playing mini bar
   ========================================================= */
.nowplaying {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.6rem clamp(1rem, 4vw, 2rem);
  background: rgba(7, 10, 20, 0.92);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nowplaying[hidden] { display: flex; visibility: hidden; } /* keep in flow for transition */
.nowplaying.is-visible { transform: translateY(0); visibility: visible; }

.nowplaying__left { display: flex; align-items: center; gap: 0.7rem; flex: 1; min-width: 0; }
.nowplaying__art {
  width: 40px; height: 40px; flex: none;
  border-radius: 6px; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
}
.nowplaying__info { min-width: 0; }
.nowplaying__title {
  display: block; font-size: 0.9rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink);
}
.nowplaying__album {
  display: block; font-size: 0.75rem; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nowplaying__controls { display: flex; align-items: center; gap: 0.5rem; flex: none; }

.nowplaying__vol-wrap {
  display: flex; align-items: center; gap: 0.3rem;
  color: var(--ink-dim);
}
.nowplaying__vol-icon { flex: none; }
.nowplaying__vol {
  -webkit-appearance: none; appearance: none;
  width: 72px; height: 3px;
  background: rgba(255,255,255,0.15); border-radius: 2px; cursor: pointer;
  accent-color: var(--aqua);
}
.nowplaying__vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); cursor: pointer;
}
.nowplaying__vol::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 0; cursor: pointer;
}
.nowplaying__btn {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
  color: var(--ink); cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.nowplaying__btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); }
.nowplaying__btn--stop { color: var(--ink-dim); }
.nowplaying__btn--stop:hover { color: var(--coral); border-color: var(--coral); }

/* Show/hide play vs pause icon */
.np-icon--play { display: none; }
.np-icon--pause { display: block; }
.nowplaying.is-paused .np-icon--play { display: block; }
.nowplaying.is-paused .np-icon--pause { display: none; }

.nowplaying__progress {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,0.08);
}
.nowplaying__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--aqua), var(--violet));
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform 0.5s linear;
}

/* Popup in docked state — invisible but keeps the SoundCloud iframe alive */
.popup.is-docked {
  pointer-events: none;
}
.popup.is-docked .popup__backdrop { opacity: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.popup.is-docked .flipcard { opacity: 0; visibility: hidden; }

/* Turntable popup docked — keeps YouTube iframe alive for audio */
.ttpop.is-docked { pointer-events: none; }
.ttpop.is-docked .ttpop__backdrop { opacity: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ttpop.is-docked .ttpop__panel { opacity: 0; visibility: hidden; animation: none; }

/* =========================================================
   Footer
   ========================================================= */
.footer {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto;
  padding: 2.5rem clamp(1.1rem, 5vw, 3rem) 3rem;
  color: var(--ink-dim); font-size: 0.9rem;
  border-top: 1px solid var(--line);
}

/* =========================================================
   Design flourishes — colourful, a little less minimal
   ========================================================= */

/* Scroll progress bar across the very top of the viewport */
.progress {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%; height: 3px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--aqua), var(--sky), var(--violet), var(--coral), var(--gold));
  box-shadow: 0 0 12px color-mix(in srgb, var(--sky) 60%, transparent);
  will-change: transform;
}

/* Soft colour glow that trails the pointer (enabled via JS on fine pointers) */
.spotlight {
  position: fixed; top: 0; left: 0; z-index: -2;
  width: 56vmax; height: 56vmax; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--sky) 55%, transparent), transparent 60%);
  mix-blend-mode: screen;
  filter: blur(50px);
  transform: translate(calc(var(--mx, 50vw) - 50%), calc(var(--my, 50vh) - 50%));
  transition: opacity 0.6s ease;
}
.spotlight.is-on { opacity: 0.45; }

/* Gradient accent bar beneath every section heading */
.section-head h2 { position: relative; }
.section-head h2::after {
  content: ""; display: block;
  width: 58px; height: 4px; margin-top: 0.9rem; border-radius: 4px;
  background: linear-gradient(90deg, var(--aqua), var(--sky), var(--violet));
  background-size: 200% 100%;
  animation: hue 8s ease infinite;
}

/* Animated colour ring that lights up on card hover/focus */
.sleeve::after, .tt::after, .shot::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  padding: 1.6px;                 /* ring thickness */
  background: conic-gradient(from 180deg, var(--aqua), var(--sky), var(--violet), var(--coral), var(--gold), var(--aqua));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;     mask-composite: exclude;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.sleeve:hover::after, .sleeve:focus-visible::after,
.tt:hover::after,     .tt:focus-visible::after,
.shot:hover::after,   .shot:focus-visible::after { opacity: 1; }

/* Spinning colour-wheel glow behind the hero title */
.hero__halo {
  position: absolute; top: 44%; left: 50%; z-index: 0;
  width: min(74vw, 640px); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--aqua), var(--sky), var(--violet), var(--coral), var(--gold), var(--aqua));
  filter: blur(72px); opacity: 0.26;
  pointer-events: none;
  animation: spin 30s linear infinite;
}
.hero__inner, .hero__wave, .hero__scroll { position: relative; z-index: 1; }

/* Textured backdrop — a faint two-tone dot weave over the colour wash */
.texture {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.6;
  background-image:
    radial-gradient(color-mix(in srgb, var(--sky) 10%, transparent) 1px, transparent 1.6px),
    radial-gradient(color-mix(in srgb, var(--violet) 8%, transparent) 1px, transparent 1.6px);
  background-position: 0 0, 13px 13px;
  background-size: 26px 26px, 26px 26px;
}

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--delay, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   Accessibility — respect reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  #rain { display: none; }
}

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

/* =========================================================
   MagicUI-inspired visual layer
   Appended on branch: feature/magicui-test
   All rules are additive overrides — nothing below touches
   layout or breaks existing functionality.
   ========================================================= */

/* ---------------------------------------------------------
   1. Spinning border beam
   The existing conic ring (see "Animated colour ring" above)
   already shows on hover. Here we:
     a) Register --beam-angle so CSS can animate it
     b) Make the ring SPIN instead of just appearing
     c) Extend the same treatment to .mix-card
   --------------------------------------------------------- */
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 180deg;
  inherits: false;
}

/* Override the static gradient to use the animatable angle */
.sleeve::after, .tt::after, .shot::after {
  background: conic-gradient(from var(--beam-angle), var(--aqua), var(--sky), var(--violet), var(--coral), var(--gold), var(--aqua));
}
.sleeve:hover::after, .sleeve:focus-visible::after,
.tt:hover::after,     .tt:focus-visible::after,
.shot:hover::after,   .shot:focus-visible::after {
  animation: beam-spin 3s linear infinite;
}
@keyframes beam-spin { to { --beam-angle: 540deg; } }

/* Give mix-card the same mask-ring as sleeve/tt/shot */
.mix-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(from var(--beam-angle), var(--aqua), var(--sky), var(--violet), var(--coral), var(--gold), var(--aqua));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.mix-card:hover::after, .mix-card:focus-visible::after {
  opacity: 1;
  animation: beam-spin 3s linear infinite;
}

/* ---------------------------------------------------------
   2. Section headings — subtle gradient text with slow shimmer
   --------------------------------------------------------- */
.section-head h2 {
  background: linear-gradient(
    100deg,
    var(--ink) 0%,
    color-mix(in srgb, var(--sky) 55%, var(--ink)) 38%,
    color-mix(in srgb, var(--violet) 50%, var(--ink)) 68%,
    var(--ink) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heading-shimmer 10s ease infinite;
}
@keyframes heading-shimmer {
  0%, 100% { background-position: 0% 0; }
  50%       { background-position: 100% 0; }
}

/* ---------------------------------------------------------
   3. Card hover — ring at the outer border edge
   border-width: 0 removes the border gap without changing
   the card's outer size (box-sizing: border-box). The ring
   at inset: 0 is now flush with the outer card edge.
   overflow: hidden stays active — no artwork hacks needed.
   --------------------------------------------------------- */
.sleeve:hover,   .sleeve:focus-visible,
.mix-card:hover, .mix-card:focus-visible {
  border-width: 0;
}
.sleeve:hover::after, .sleeve:focus-visible::after,
.mix-card:hover::after, .mix-card:focus-visible::after {
  padding: 2px;
}

.shot:hover, .shot:focus-visible {
  border-width: 0;
}
.shot:hover::after, .shot:focus-visible::after {
  padding: 1px;
}

.tt:hover, .tt:focus-visible {
  border-width: 0;
}
.tt:hover::after, .tt:focus-visible::after {
  padding: 2px;
}
.tt-carousel .tt.is-active {
  border-width: 0;
}
.tt-carousel .tt.is-active::after {
  opacity: 1;
  padding: 2px;
}

/* ---------------------------------------------------------
   4. Mix cards — solid dark gradient (backdrop-filter removed:
   it forced 3 always-visible compositing layers on the aurora)
   --------------------------------------------------------- */
.mix-card {
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--accent) 22%, rgba(7, 10, 20, 0.82)),
    rgba(7, 10, 20, 0.92) 78%
  );
}

/* ---------------------------------------------------------
   5. Now-playing bar — animated gradient top border
   --------------------------------------------------------- */
.nowplaying { border-top: none; }
.nowplaying::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--aqua)   20%,
    var(--sky)    40%,
    var(--violet) 60%,
    var(--coral)  80%,
    transparent  100%
  );
  background-size: 200% 100%;
  animation: bar-sweep 6s linear infinite;
  opacity: 0.6;
  pointer-events: none;
}
@keyframes bar-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------
   6. Hero title — soft glow behind the gradient text
   --------------------------------------------------------- */
.hero__word {
  filter: drop-shadow(0 0 32px color-mix(in srgb, var(--sky) 28%, transparent));
}

/* ---------------------------------------------------------
   7. Hero halo — slightly more visible
   --------------------------------------------------------- */
.hero__halo { opacity: 0.36; }

/* ---------------------------------------------------------
   Reduced motion — disable all new animations added above
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nowplaying::before { animation: none; }
  .section-head h2 {
    animation: none;
    background: var(--ink);
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--ink);
  }
}