/*
Theme Name: SpinsBro Music
Theme URI: https://t.me/tividev
Author: tividev
Author URI: https://t.me/tividev
Description: Theme for the SpinsBro artist site. The front page and album pages are built from SCF fields; post and page content is Gutenberg. Requires the Secure Custom Fields plugin (repeaters and options page).
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spinsbro
Tags: music, custom-colors, block-styles, wide-blocks, full-width-template
*/

/* ==========================================================================
   SpinsBro Music — styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --bg:            oklch(16% 0.03 260);
  --bg-deep:       oklch(12% 0.03 260);
  --bg-alt:        oklch(20% 0.03 260);
  --ink-dark:      oklch(18% 0.03 260);

  /* borders */
  --border:        oklch(30% 0.03 260);
  --border-mute:   oklch(26% 0.02 260);
  --border-pill:   oklch(45% 0.02 260);

  /* accent */
  --accent:        oklch(80% 0.15 85);
  --accent-hi:     oklch(88% 0.15 85);

  /* secondary accents, picked off the hero illustration:
     purple jersey and blue hoodie */
  --purple:        oklch(48% 0.16 300);
  --blue:          oklch(58% 0.12 245);

  /* spotlight colours in the casino banner */
  --beam-gold:     oklch(78% 0.16 90);
  --beam-blue:     oklch(72% 0.15 250);

  /* radii */
  --r-sm:          10px;
  --r-md:          16px;
  --r-lg:          22px;

  /* surface lift */
  --elev-1:        0 8px 20px oklch(0% 0 0 / .3);
  --elev-2:        0 18px 38px oklch(0% 0 0 / .45);

  /* text */
  --text:          oklch(96% 0.006 260);
  --text-soft:     oklch(85% 0.01 260);
  --text-soft-2:   oklch(82% 0.01 260);
  --text-body:     oklch(80% 0.01 260);
  --text-link:     oklch(75% 0.01 260);
  --text-muted:    oklch(72% 0.01 260);
  --text-muted-2:  oklch(70% 0.01 260);
  --text-dim:      oklch(65% 0.01 260);
  --text-dim-2:    oklch(62% 0.01 260);
  --text-dim-3:    oklch(60% 0.01 260);
  --text-faint:    oklch(50% 0.01 260);

  /* layout — single source of truth for width and gutters.
     --page is the CONTENT width, gutters are added outside it. */
  --page:          1280px;
  --gutter:        clamp(20px, 5vw, 48px);

  /* type */
  --font-body:     'Manrope', system-ui, sans-serif;
  --font-display:  'Bebas Neue', Impact, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

button { font: inherit; color: inherit; background: none; border: none; }

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

/* --------------------------------------------------------------------------
   3. Shared pieces
   -------------------------------------------------------------------------- */
/* Shared container. Every section, the header and the footer align to it:
   a section only sets its background and vertical padding, horizontal lives here. */
.container {
  width: 100%;
  max-width: calc(var(--page) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--bold { font-weight: 800; }

.display {
  font-family: var(--font-display);
  letter-spacing: 0.5px;
}

.section-title {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 52px);
  letter-spacing: 0.5px;
  padding-left: 22px;
}
/* accent rule: gold on top, purple at the bottom */
.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: .16em;
  bottom: .16em;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--purple));
}

.logo {
  display: inline-block;
  line-height: 0;
  transition: opacity .18s ease;
}
.logo img { width: auto; }
.logo:hover { opacity: .82; }

/* buttons ---------------------------------------------------------------- */
.btn {
  display: inline-block;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.3px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--accent { background: var(--accent); color: var(--ink-dark); }
.btn--accent:hover { background: var(--accent-hi); color: var(--ink-dark); }

.btn--dark { background: var(--ink-dark); color: var(--text); }
.btn--dark:hover { background: oklch(28% 0.03 260); color: var(--text); }

.btn--sm  { font-size: 14px; padding: 12px 22px; }
.btn--md  { font-size: 15px; padding: 16px 30px; }

/* Play key, cassette-deck style ------------------------------------------ */
/* Travel depth comes from one variable, --press; everything else is derived
   from it: the key offset and the remaining edge --edge. States differ only
   in the value of --press: idle 0 → hover a third of the travel → full press. */
.tape-key {
  --depth: 7px;                     /* key travel height */
  --press: 0px;                     /* how far it is pushed in right now */
  --edge: calc(var(--depth) - var(--press));   /* visible edge */

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--ink-dark);

  /* fine vertical ridges over the plastic */
  background:
    repeating-linear-gradient(90deg, oklch(0% 0 0 / .04) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, oklch(97% 0.008 95), oklch(86% 0.014 95));
  border-top: 1px solid oklch(99% 0.004 95);

  transform: translateY(var(--press));
  box-shadow:
    0 var(--edge) 0 oklch(60% 0.02 95),               /* key edge */
    0 calc(var(--edge) + 2px) 0 oklch(45% 0.02 95),   /* edge shadow */
    0 calc(var(--edge) + 3px) calc(8px + var(--edge)) oklch(0% 0 0 / .45);

  transition: transform .1s ease-out, box-shadow .1s ease-out, background .15s ease;
}

.tape-key__icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--ink-dark);
  transition: border-left-color .15s ease;
}

/* hover: the key moves a third of the way in */
.tape-key:hover {
  --press: calc(var(--depth) / 3);
  color: var(--ink-dark);
  background:
    repeating-linear-gradient(90deg, oklch(0% 0 0 / .04) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, oklch(99% 0.008 95), oklch(89% 0.014 95));
}

/* press: the key goes down by exactly its own thickness.
   JS adds .is-pressed so the key stays down while the scroll
   delay runs. */
.tape-key:active,
.tape-key.is-pressed {
  --press: var(--depth);
}
.tape-key:active .tape-key__icon,
.tape-key.is-pressed .tape-key__icon { border-left-color: oklch(62% 0.16 45); }

/* slot machine button ----------------------------------------------------- */
/* Same construction as .tape-key — only the gloss and colour differ, so both
   buttons read as keys on the same machine. */
.slot-btn {
  --depth: 7px;
  --press: 0px;
  --edge: calc(var(--depth) - var(--press));

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--ink-dark);

  background: var(--accent);

  transform: translateY(var(--press));
  box-shadow:
    0 var(--edge) 0 oklch(58% 0.13 62),
    0 calc(var(--edge) + 2px) 0 oklch(44% 0.11 55),
    0 calc(var(--edge) + 3px) calc(8px + var(--edge)) oklch(0% 0 0 / .45),
    0 0 22px oklch(80% 0.15 85 / .18);

  transition: transform .1s ease-out, box-shadow .1s ease-out, background-color .15s ease;
}

/* hover: the key moves a third of the way in */
.slot-btn:hover {
  --press: calc(var(--depth) / 3);
  color: var(--ink-dark);
  background: var(--accent-hi);
}

/* press: the key goes down, the edge collapses */
.slot-btn:active,
.slot-btn.is-pressed {
  --press: var(--depth);
  background: var(--accent);
}

.slot-btn--sm {
  --depth: 5px;
  font-size: 14px;
  padding: 11px 24px;
}

.slot-btn--lg {
  --depth: 8px;
  font-size: 18px;
  padding: 19px 44px;
}

/* Ring shimmering in the spotlight colours -------------------------------
   A conic gradient spins around the button and a mask keeps only the frame:
   the fill shows in the padding area, the middle is cut out. */
@property --spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.slot-btn--lit::before {
  content: '';
  position: absolute;
  inset: -3px;
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;

  background: conic-gradient(from var(--spin),
    var(--beam-gold), var(--beam-blue), var(--beam-gold),
    var(--beam-blue), var(--beam-gold));

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;

  animation: ring-spin 5s linear infinite;
}

@keyframes ring-spin { to { --spin: 360deg; } }

/* under the cursor the light speeds up and the button blooms in the same two colours */
.slot-btn--lit { transition: transform .1s ease-out, box-shadow .1s ease-out,
                             background-color .15s ease, filter .25s ease; }
.slot-btn--lit:hover::before { animation-duration: 1.4s; }
.slot-btn--lit:hover {
  filter:
    drop-shadow(0 0 12px color-mix(in oklch, var(--beam-gold) 100%, transparent 45%))
    drop-shadow(0 0 26px color-mix(in oklch, var(--beam-blue) 100%, transparent 55%));
}

/* Dark variant — for the yellow backdrop, where a gold button disappears.
   It comes after the base rules, so it overrides both the background and its hover. */
.slot-btn--dark {
  background: var(--ink-dark);
  color: var(--text);
  box-shadow:
    0 var(--edge) 0 oklch(11% 0.02 262),
    0 calc(var(--edge) + 2px) 0 oklch(6% 0.015 262),
    0 calc(var(--edge) + 3px) calc(8px + var(--edge)) oklch(0% 0 0 / .35);
}
.slot-btn--dark:hover  { background: oklch(27% 0.03 262); color: var(--text); }
.slot-btn--dark:active { background: var(--ink-dark); }

/* notes and coins flying out of a button on hover ------------------------- */
.btn-notes { position: relative; }

.notes {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  pointer-events: none;
}

.note {
  position: absolute;
  bottom: 100%;
  width: 18px;
  height: 18px;
  color: var(--accent);
  opacity: 0;
  will-change: transform, opacity;
}

.note--1 { left: 14%; width: 16px; height: 16px; --dx: -12px; --rot: -20deg; }
.note--2 { left: 44%; width: 21px; height: 21px; --dx:   4px; --rot:  12deg; }
.note--3 { left: 72%; width: 15px; height: 15px; --dx:  13px; --rot:  24deg; }

@keyframes note-float {
  0%   { opacity: 0; transform: translate(0, 8px)                 scale(.5) rotate(0deg); }
  20%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -52px)       scale(1)  rotate(var(--rot)); }
}

.btn-notes:hover .note,
.btn-notes:focus-visible .note {
  animation-name: note-float;
  animation-duration: 1.6s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.note--2 { animation-delay: .32s; }
.note--3 { animation-delay: .64s; }

.pill {
  display: inline-block;
  border: 1px solid var(--border-pill);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  transition: border-color .18s ease, color .18s ease;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }

/* play buttons ----------------------------------------------------------- */
/* Same press mechanics as the hero keys — one language across the page. */
.play {
  --depth: 4px;
  --press: 0px;
  --edge: calc(var(--depth) - var(--press));

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  transform: translateY(var(--press));
  transition: transform .1s ease-out, box-shadow .1s ease-out, background-color .18s ease;
}
.play::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
}
.play::after { content: ''; display: none; }
.play:hover  { --press: calc(var(--depth) / 3); }
.play:active { --press: var(--depth); }

/* while playing, the triangle turns into two pause bars */
.play.is-playing { gap: 4px; }
.play.is-playing::before,
.play.is-playing::after {
  display: block;
  width: 4px;
  height: 13px;
  margin: 0;
  border: none;
  border-radius: 1px;
  background: var(--ink-dark);
}

.play--sm {
  width: 38px;
  height: 38px;
  background: var(--accent);
  box-shadow:
    0 var(--edge) 0 oklch(58% 0.13 62),
    0 calc(var(--edge) + 2px) calc(5px + var(--edge)) oklch(0% 0 0 / .45);
}
.play--sm:hover { background: var(--accent-hi); }
.play--sm::before {
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--ink-dark);
  margin-left: 3px;
}

.play--lg {
  --depth: 5px;
  width: 60px;
  height: 60px;
  background: oklch(97% 0.006 260);
  box-shadow:
    0 var(--edge) 0 oklch(62% 0.01 260),
    0 calc(var(--edge) + 3px) calc(8px + var(--edge)) oklch(0% 0 0 / .5);
}
.play--lg::before {
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent var(--ink-dark);
  margin-left: 5px;
}

/* --------------------------------------------------------------------------
   4. Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 18px;
  background: oklch(16% 0.03 260 / 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.nav__logo img { height: 44px; }

.nav__links {
  display: flex;
  gap: 36px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: 70px 110px;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
}

.hero__glow {
  position: absolute;
  top: -120px;
  right: 8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, oklch(45% 0.13 250 / 0.35), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.hero__title {
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.92;
  letter-spacing: 1px;
}
.hero__title span { color: var(--accent); }

.hero__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 520px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.hero__art {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

/* The background is cut to alpha, so the image sits on any backdrop with no frame. */
.hero__img {
  width: 100%;
  height: auto;
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   6. Casino CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  /* dark room: light needs darkness or the beams are invisible.
     At the bottom, haze where the beam "hits the floor". */
  background:
    radial-gradient(85% 50% at 50% 100%, oklch(34% 0.10 250 / .28), transparent 72%),
    linear-gradient(180deg,
      oklch(9% 0.03 265), oklch(13% 0.05 278) 55%, oklch(8% 0.03 265));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 110px;
  text-align: center;
}

.cta-band > .container { position: relative; z-index: 1; }

/* spotlights ---------------------------------------------------------------
   Two beams sweep towards each other. The beams themselves are cones made
   with clip-path; the light runs top to bottom and fades out downwards. */
.spots {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* A beam is a conic-gradient sector with its apex at the lamp. Angular stops
   in a conic gradient are soft by nature, so the wedge reads cleanly without
   a ragged edge: neither clip-path nor filter is needed.
   The mask fades the beam with distance from the lamp, which gives it volume. */
.spot {
  --beam: oklch(85% 0.2 20);        /* beam colour */
  --spread: 13deg;                  /* cone spread */

  position: absolute;
  top: -20px;
  width: 1200px;
  height: 1150px;
  margin-left: -600px;
  transform-origin: 50% 0;

  background: conic-gradient(from calc(180deg - var(--spread)) at 50% 0%,
    transparent 0deg,
    color-mix(in oklch, var(--beam) 100%, transparent 92%) calc(var(--spread) * .45),
    color-mix(in oklch, var(--beam) 100%, transparent 62%) var(--spread),
    color-mix(in oklch, var(--beam) 100%, transparent 92%) calc(var(--spread) * 1.55),
    transparent calc(var(--spread) * 2),
    transparent 360deg);

  -webkit-mask-image: radial-gradient(circle 900px at 50% 0%,
    #000 0%, oklch(0% 0 0 / .55) 42%, transparent 84%);
  mask-image: radial-gradient(circle 900px at 50% 0%,
    #000 0%, oklch(0% 0 0 / .55) 42%, transparent 84%);
}

/* lamp hot spot */
.spot::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 90px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--beam), transparent 68%);
  opacity: .55;
}

/* Four lamps, alternating between two colours. Different sweep rhythms mean
   the pattern of crossings never repeats. The CSS animation is the fallback:
   when JS is alive it removes it and drives the beams itself. */
.spot--1 { left: 14%; --beam: var(--beam-gold);   animation: sweep-1 7s  ease-in-out infinite alternate; }
.spot--2 { left: 38%; --beam: var(--beam-blue); animation: sweep-2 11s ease-in-out infinite alternate; }
.spot--3 { left: 62%; --beam: var(--beam-gold);   animation: sweep-3 9s  ease-in-out infinite alternate; }
.spot--4 { left: 86%; --beam: var(--beam-blue); animation: sweep-4 13s ease-in-out infinite alternate; }

@keyframes sweep-1 { from { transform: rotate(-26deg); } to { transform: rotate(14deg); } }
@keyframes sweep-2 { from { transform: rotate(16deg);  } to { transform: rotate(-19deg); } }
@keyframes sweep-3 { from { transform: rotate(-15deg); } to { transform: rotate(21deg); } }
@keyframes sweep-4 { from { transform: rotate(23deg);  } to { transform: rotate(-16deg); } }

/* Pool under the cursor: a 40px core mixing the lamp colours plus a soft
   halo so the edge does not read as a disc. JS moves it. */
.spot-pool {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;      /* centred on the cursor */
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background:
    radial-gradient(circle 40px at 45% 45%, color-mix(in oklch, var(--beam-gold) 100%, transparent 45%), transparent 100%),
    radial-gradient(circle 40px at 55% 55%, color-mix(in oklch, var(--beam-blue) 100%, transparent 45%), transparent 100%),
    radial-gradient(circle 40px at 50% 50%, oklch(99% 0.02 90 / .35), transparent 100%),
    radial-gradient(circle 128px at 50% 50%, oklch(80% 0.12 50 / .12), transparent 74%);
}
.cta-band.is-aiming .spot-pool { opacity: 1; }

/* mirror-ball glints — only in the two lamp colours */
.spots::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 2px at 11% 18%, oklch(96% 0.05 90 / .9), transparent 100%),
    radial-gradient(circle 2px at 24% 52%, oklch(88% 0.13 250 / .8), transparent 100%),
    radial-gradient(circle 3px at 33% 12%, oklch(96% 0.04 90 / .7), transparent 100%),
    radial-gradient(circle 2px at 45% 71%, oklch(88% 0.13 250 / .75), transparent 100%),
    radial-gradient(circle 2px at 57% 26%, oklch(96% 0.05 90 / .85), transparent 100%),
    radial-gradient(circle 3px at 68% 61%, oklch(88% 0.13 250 / .75), transparent 100%),
    radial-gradient(circle 2px at 79% 33%, oklch(96% 0.05 90 / .8), transparent 100%),
    radial-gradient(circle 2px at 88% 75%, oklch(88% 0.13 250 / .8), transparent 100%),
    radial-gradient(circle 2px at 6%  62%, oklch(96% 0.05 90 / .7), transparent 100%),
    radial-gradient(circle 2px at 94% 17%, oklch(88% 0.13 250 / .8), transparent 100%);
  animation: sparkle 4.5s ease-in-out infinite alternate;
}

@keyframes sparkle {
  from { opacity: .3; }
  to   { opacity: 1; }
}

.cta-band__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* The heading is genuinely lit: two pools of light travel through the text,
   clipped to the letterforms. The bottom layer is the base grey, which is
   also the colour of the "unlit" glyphs. */
.cta-band__title {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;

  background-image:
    radial-gradient(closest-side circle,
      oklch(100% 0 0) 0%, oklch(93% 0.11 90) 46%, transparent 76%),
    radial-gradient(closest-side circle,
      oklch(97% 0.02 250) 0%, oklch(80% 0.14 250) 46%, transparent 76%),
    linear-gradient(oklch(72% 0.012 265), oklch(72% 0.012 265));
  background-size: 68% 220%, 62% 200%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -20% 50%, 120% 50%, 0 0;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: title-lit 9s ease-in-out infinite alternate;
}

/* phases match the beam sweep: gold left to right, purple towards it */
@keyframes title-lit {
  from { background-position: -20% 50%, 120% 50%, 0 0; }
  to   { background-position: 115% 50%, -15% 50%, 0 0; }
}

.cta-band__text {
  font-size: 16px;
  color: var(--text-soft-2);
  max-width: 560px;
}

.cta-band__btn { margin-top: 14px; }

.cta-band__note {
  font-size: 12px;
  color: var(--text-dim-3);
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   7. Discography
   -------------------------------------------------------------------------- */
.discography {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
}
/* purple glow on the left — a colour from the illustration */
.discography::before {
  content: '';
  position: absolute;
  top: -6%;
  left: -10%;
  width: 640px;
  height: 640px;
  pointer-events: none;
  background: radial-gradient(circle, oklch(48% 0.16 300 / .17), transparent 68%);
}
.discography > .container { position: relative; z-index: 1; }

.discography__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 44px;
}

.discography__note { font-size: 14px; color: var(--text-dim); }

.albums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 34px;
}

/* streaming links --------------------------------------------------------- */
/* Each platform's brand colour lives in --brand and is picked up on hover by
   the border and the icon — at rest the buttons stay neutral and do not fight
   with the covers. */
.streams {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 54px;
}

.streams__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 4px;
}

.stream {
  --brand: var(--accent);

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-link);
  background: linear-gradient(180deg, oklch(24% 0.03 260), oklch(19% 0.03 260));
  border: 1px solid oklch(32% 0.03 260);
  border-top-color: oklch(46% 0.03 260);
  transition: transform .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}

.stream svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: color .18s ease;
}

.stream:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: color-mix(in oklch, var(--brand) 100%, transparent 35%);
  box-shadow: var(--elev-1);
}
.stream:hover svg { color: var(--brand); }

/* icon only, no label — the compact variant for the footer */
.stream--icon {
  width: 42px;
  height: 42px;
  padding: 0;
  justify-content: center;
}

.stream--spotify { --brand: oklch(72% 0.19 145); }
.stream--apple   { --brand: oklch(66% 0.22 12); }
.stream--ytm     { --brand: oklch(60% 0.23 27); }

/* Surfaces are identical everywhere: a top-down gradient, a light bevel on
   the top edge, and a lift on hover. */
.album {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, oklch(24% 0.03 260), oklch(19% 0.03 260));
  border: 1px solid oklch(31% 0.03 260);
  border-top-color: oklch(45% 0.03 260);
  box-shadow: var(--elev-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.album:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-2);
  border-color: oklch(46% 0.04 260);
}

.album--next {
  background: linear-gradient(180deg, oklch(27% 0.06 85 / .35), oklch(19% 0.03 260));
  border-color: oklch(80% 0.15 85 / .35);
  border-top-color: oklch(80% 0.15 85 / .55);
}
.album--next:hover { border-color: oklch(80% 0.15 85 / .6); }

.album__cover {
  position: relative;
  overflow: hidden;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, oklch(44% 0.12 262), oklch(25% 0.08 258));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .2),
    inset 0 -16px 26px oklch(0% 0 0 / .3);
}

/* The transparent-background art sits on top of the sleeve fill, so the same
   frame reads differently on two albums thanks to the backdrop colour.
   Cropped on the central character, slightly above the geometric centre. */
.album__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}
/* diagonal gloss across the sleeve */
.album__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, oklch(100% 0 0 / .13) 0 36%, transparent 36%);
}
.album__cover--gold {
  background: linear-gradient(145deg, oklch(74% 0.15 88), oklch(50% 0.13 68));
}

.album__tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.album__title { font-size: 30px; }

.album__meta {
  font-size: 14px;
  color: var(--text-muted-2);
  margin-top: 6px;
}
.album--next .album__meta { color: var(--text-link); }

/* Platform links inside the card — narrow screens only. On desktop they live
   in one row under the albums, and repeating them in every card there would
   be noisy. */
.album__streams {
  display: none;
  gap: 8px;
  margin-top: 16px;
}
.album__streams .stream--icon { width: 38px; height: 38px; }
.album__streams .stream svg   { width: 18px; height: 18px; }

/* track list ------------------------------------------------------------- */
.tracklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.track {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.track:hover {
  background: linear-gradient(180deg, oklch(25% 0.03 260), oklch(20% 0.03 260));
  border-color: oklch(34% 0.03 260);
  transform: translateX(5px);
}

/* Thumbnail as a picture disc: the art is printed across the record with
   vinyl texture on top. Transparent areas of the art reveal the track colour. */
.track__art {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--stripe-b);
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / .1),
    0 4px 10px oklch(0% 0 0 / .45);
}

.track__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* grooves, label ring, spindle hole and gloss — all over the art */
.track__art::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, oklch(13% 0.02 260) 0 3.5%, transparent 4%),
    radial-gradient(circle at 50% 50%,
      transparent 0 19.5%, var(--stripe-a) 19.5% 21%, transparent 21.5%),
    radial-gradient(circle at 34% 28%, oklch(100% 0 0 / .18), transparent 55%),
    repeating-radial-gradient(circle at 50% 50%,
      oklch(0% 0 0 / .28) 0 1px, transparent 1px 3px);
}

.track__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.track__title { font-size: 16px; font-weight: 700; }

/* waveform ------------------------------------------------------------- */
/* Two identical sets of bars stacked: the lower one muted, the upper one
   accented and clipped to the progress with clip-path. */
/* Before the first play there is no waveform — it opens up once the track has
   been started at least once. JS adds is-loaded and at that moment fetches the
   file and computes the peaks. */
.track__wave {
  position: relative;
  height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  transition: height .3s ease, margin-top .3s ease, opacity .3s ease;
}
.track.is-loaded .track__wave {
  height: 32px;
  margin-top: 10px;
  opacity: 1;
}

.wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.wave span {
  flex: 1;
  min-height: 2px;
  border-radius: 1px;
  background: oklch(42% 0.02 260);
  transition: background-color .2s ease;
}

.track:hover .wave--base span { background: oklch(52% 0.02 260); }

.wave--played {
  clip-path: inset(0 100% 0 0);     /* JS sets the played width */
  transition: clip-path .1s linear;
}
.wave--played span { background: var(--accent); }

.track__wave:hover .wave--played span,
.track.is-playing .wave--played span { background: var(--accent-hi); }

/* record spin ---------------------------------------------------------- */
/* is-active keeps the animation paused, is-playing runs it — so on pause the
   disc freezes where it is instead of snapping back. */
@keyframes disc-spin { to { transform: rotate(360deg); } }

.track.is-active .track__art {
  animation: disc-spin 3.2s linear infinite;
  animation-play-state: paused;
}
.track.is-playing .track__art { animation-play-state: running; }

.track__album {
  font-size: 13px;
  color: var(--text-dim-2);
  margin-top: 2px;
}

.track__time {
  width: 60px;
  text-align: right;
  font-size: 13px;
  color: var(--text-dim-3);
}

/* --------------------------------------------------------------------------
   8. Videos
   -------------------------------------------------------------------------- */
.videos {
  position: relative;
  overflow: hidden;
  padding-block: 40px 100px;
}
/* blue glow on the right — the hoodie colour from the illustration */
.videos::before {
  content: '';
  position: absolute;
  top: 6%;
  right: -12%;
  width: 580px;
  height: 580px;
  pointer-events: none;
  background: radial-gradient(circle, oklch(58% 0.12 245 / .15), transparent 68%);
}
.videos > .container { position: relative; z-index: 1; }

.videos__title { margin-bottom: 44px; }

.videos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

/* thumbnail as a "screen": soft horizontal scan lines over the gradient and
   a darkening towards the bottom, under the runtime */
.video__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--stripe-a), var(--stripe-b));
  border: 1px solid oklch(100% 0 0 / .09);
  box-shadow: var(--elev-1);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* the art sits on a coloured backdrop that shows through its transparent areas */
.video__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

/* scan lines and the bottom darkening — over the art but under the controls */
.video__thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 55%, oklch(0% 0 0 / .5) 100%),
    repeating-linear-gradient(0deg,
      oklch(100% 0 0 / .05) 0 1px, transparent 1px 4px);
}

.video__thumb .play,
.video__time { z-index: 2; }
.video__thumb .play { position: relative; }
.video:hover .video__thumb {
  transform: translateY(-4px);
  box-shadow: var(--elev-2);
}
.video__thumb:hover .play--lg { background: var(--accent); }

.video__time {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: oklch(10% 0.02 260 / 0.7);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
}

.video__title {
  font-size: 16px;
  font-weight: 700;
  margin-top: 14px;
}

.video__views {
  font-size: 13px;
  color: var(--text-dim-2);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   9. News
   -------------------------------------------------------------------------- */
.news {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  padding-block: 100px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* blue glow top left */
.news::before {
  content: '';
  position: absolute;
  left: -6%;
  top: -20%;
  width: 600px;
  height: 600px;
  pointer-events: none;
  background: radial-gradient(circle, oklch(58% 0.14 250 / .16), transparent 68%);
}
/* gold glow bottom right */
.news::after {
  content: '';
  position: absolute;
  right: -6%;
  bottom: -20%;
  width: 640px;
  height: 640px;
  pointer-events: none;
  background: radial-gradient(circle, oklch(80% 0.15 85 / .15), transparent 68%);
}
.news > .container { position: relative; z-index: 1; }

.news__more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.news__title { margin-bottom: 44px; }

.news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.news-card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, oklch(26% 0.03 260), oklch(21% 0.03 260));
  border: 1px solid oklch(32% 0.03 260);
  border-top-color: oklch(46% 0.03 260);
  box-shadow: var(--elev-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-2);
  border-color: oklch(48% 0.04 260);
}

.news-card__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}

/* The image bleeds past the card edges via negative margins — no extra
   wrapper for the text was needed. */
.news-card__art {
  position: relative;
  margin: -24px -24px 6px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  background: linear-gradient(145deg, var(--art-a), var(--art-b));
}

.news-card__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;      /* the mascot stands on the bottom edge */
}

/* gloss on top, as on the album covers */
.news-card__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(100% 0 0 / .1), transparent 45%);
}

/* backdrops alternate: blue, gold — the same colours as the video thumbnails */
.news-card:nth-child(odd) .news-card__art {
  --art-a: oklch(45% 0.1 255);
  --art-b: oklch(38% 0.09 255);
}
.news-card:nth-child(even) .news-card__art {
  --art-a: oklch(55% 0.13 85);
  --art-b: oklch(48% 0.12 85);
}

/* The title link stretches across the whole card — anywhere is clickable, but
   the markup keeps one honest link instead of a div with onclick. */
.news-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.news-card:hover .news-card__title a { color: var(--accent); }

.news-card__title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.news-card__body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   10. About
   -------------------------------------------------------------------------- */
.about { padding-block: 100px; }

/* The image sticks to the top: otherwise, when the SEO text expands, the
   column grows and the centred illustration drifts down with it. */
.about__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: 50px;
}

.about__art { display: flex; justify-content: center; }

.about__img {
  width: 100%;
  height: auto;
  max-width: 460px;
}

.about__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about__title {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.05;
}

.about__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
}

/* Expandable SEO block ----------------------------------------------------
   The smoothness comes from animating grid-template-rows from 0fr to 1fr:
   the height is derived from the content, so there is no eyeballed max-height
   that either clips long text or drags on short text. */
.about__more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .38s ease, opacity .3s ease;
}
.about__more > div { overflow: hidden; }

.about.is-open .about__more {
  grid-template-rows: 1fr;
  opacity: 1;
}

.about__more > div > * + * { margin-top: 16px; }

.about__subtitle {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
}

.about__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about__list li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
}
/* marker — a gold chip instead of the default bullet */
.about__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px oklch(80% 0.15 85 / .18);
}

.about__toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* cancel part of the column gap so the button stays close to the text */
  margin-top: -10px;
  padding: 4px 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--accent);
  cursor: pointer;
  transition: color .18s ease;
}
.about__toggle:hover { color: var(--accent-hi); }

.about__chev {
  width: 9px;
  height: 9px;
  border-right: 2.4px solid currentColor;
  border-bottom: 2.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s ease;
}
.about.is-open .about__chev { transform: translateY(2px) rotate(-135deg); }

.about__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   11. Final strip
   -------------------------------------------------------------------------- */
/* A $5 coupon: perforations along the edges, a tear line and a guilloche
   grid, as on a banknote. The perforations are not cut with a mask but drawn
   on top in the colour of the neighbouring sections — that works everywhere. */
/* --px is the cursor position from -1 (left) to 1 (right), set by JS.
   Both layers are derived from it and travel towards each other:
   the content against the cursor, the background with it. */
.strip {
  --px: 0;

  position: relative;
  color: var(--ink-dark);
  padding-block: 40px;

  background-color: var(--accent);
  background-image:
    /* soft glint — without it the grid shift is barely readable */
    radial-gradient(46% 170% at calc(50% + var(--px) * 90px) 45%,
      oklch(94% 0.11 88 / .5), transparent 66%),
    /* guilloche grid, as on a banknote */
    repeating-linear-gradient(115deg, oklch(0% 0 0 / .045) 0 2px, transparent 2px 9px);
  background-position: 0 0, calc(var(--px) * 30px) 0;
  background-repeat: no-repeat, repeat;
}

/* perforations: the About section colour on top, the footer colour below */
.strip::before,
.strip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  background-size: 28px 18px;
  background-repeat: repeat-x;
}
.strip::before {
  top: 0;
  background-image: radial-gradient(circle 9px at 14px 0, var(--bg) 98%, transparent 100%);
}
.strip::after {
  bottom: 0;
  background-image: radial-gradient(circle 9px at 14px 18px, var(--bg-deep) 98%, transparent 100%);
}

.strip__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
  padding-block: 10px;
  /* against the cursor — a smaller amplitude than the background, otherwise the text floats */
  transform: translateX(calc(var(--px) * -16px));
}

.strip__kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: oklch(38% 0.08 68);
  margin-bottom: 8px;
}

.strip__title {
  font-size: clamp(24px, 3vw, 36px);
}

/* the stub with the denomination, split off by the tear line */
.strip__stub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding-left: 34px;
}
.strip__stub::before {
  content: '';
  position: absolute;
  left: 0;
  top: -14px;
  bottom: -14px;
  border-left: 2px dashed oklch(34% 0.07 68 / .45);
}

.strip__amount {
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1;
  color: oklch(26% 0.06 66);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg-deep);
  padding-block: 70px 30px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--border-mute);
}

.footer__logo { margin-bottom: 16px; }
.footer__logo img { height: 34px; }

.footer__about {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim-3);
  max-width: 280px;
}

.footer__streams {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__heading {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted-2);
  margin-bottom: 6px;
}

.footer__col a { font-size: 14px; color: var(--text-link); }
.footer__col a:hover { color: var(--accent); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  font-size: 12px;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {

  .hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__copy { align-items: center; }
  /* the buttons stack into a column — stretch the row, otherwise there is nothing to centre */
  .hero__actions {
    width: 100%;
    justify-content: center;
  }

  .albums      { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }

  /* platform links move inside the album cards */
  .streams        { display: none; }
  .album__streams { display: flex; }

  /* brand block full width, three link columns in one row under it */
  .footer__top { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .footer__top > :first-child { grid-column: 1 / -1; }

  /* coupon centred: the stub moves under the text and the tear line loses its meaning */
  .strip__inner { flex-direction: column; text-align: center; }
  .strip__stub {
    justify-content: center;
    padding-left: 0;
  }
  .strip__stub::before { display: none; }
}

@media (max-width: 560px) {
  .album { flex-direction: column; align-items: flex-start; }
  .track { gap: 12px; padding: 14px 10px; }

  /* socials on one line: tighten the padding and forbid wrapping */
  .about__socials { gap: 7px; flex-wrap: nowrap; }
  .pill { padding: 9px 11px; font-size: 12px; white-space: nowrap; }

  .footer__top   { gap: 16px; }
  .footer__col a { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .notes { display: none; }
  .spot { animation: none; }
  .spots::after { animation: none; opacity: .6; }
  .slot-btn--lit::before { animation: none; }
  .cta-band__title { animation: none; background-position: 30% 50%, 70% 50%, 0 0; }
  * { transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   14. Video pop-up
   -------------------------------------------------------------------------- */
.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(6% 0.02 265 / .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modal-fade .22s ease;
}

.modal__box {
  position: relative;
  width: min(980px, 100%);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, oklch(20% 0.03 260), oklch(14% 0.03 262));
  border: 1px solid oklch(34% 0.03 260);
  border-top-color: oklch(48% 0.03 260);
  box-shadow: var(--elev-2), 0 0 70px oklch(70% 0.15 250 / .18);
  padding: 14px;
  animation: modal-rise .26s cubic-bezier(.2, .8, .3, 1);
}

@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } }

.modal__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-dark);
  background: var(--accent);
  box-shadow: 0 4px 0 oklch(58% 0.13 62), 0 8px 16px oklch(0% 0 0 / .5);
  transition: background-color .18s ease, transform .1s ease-out;
}
.modal__close:hover  { background: var(--accent-hi); }
.modal__close:active { transform: translateY(3px); box-shadow: 0 1px 0 oklch(58% 0.13 62); }
.modal__close svg { width: 18px; height: 18px; }

/* message shown when the rights holder has disabled embedding */
.player__fallback[hidden] { display: none; }
.player__fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: oklch(10% 0.02 262 / .96);
}
.player__fallback p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 46ch;
}

/* the player itself -------------------------------------------------------- */
.player__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: oklch(8% 0.01 260);
}
.player__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.player__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 6px 4px;
}

.player__seek {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: oklch(34% 0.02 260);
  cursor: pointer;
  touch-action: none;
}
.player__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--beam-blue));
}
/* the handle appears at the end of the filled part */
.player__fill::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%) scale(0);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px oklch(80% 0.15 85 / .6);
  transition: transform .15s ease;
}
.player__seek:hover .player__fill::after,
.player__seek:focus-visible .player__fill::after { transform: translateY(-50%) scale(1); }

.player__time {
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.player__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-link);
  transition: color .18s ease, background-color .18s ease;
}
.player__icon:hover { color: var(--accent); background: oklch(28% 0.03 260); }
.player__icon svg { width: 20px; height: 20px; }

.player__mute.is-muted .player__wave1,
.player__mute.is-muted .player__wave2 { display: none; }

.player__title {
  padding: 6px 8px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-soft);
}

@media (max-width: 560px) {
  .player__bar { gap: 10px; }
  .player__full { display: none; }
}

/* --------------------------------------------------------------------------
   15. Blog
   -------------------------------------------------------------------------- */
/* Page head — a scaled-down hero: the same rhythm of "eyebrow → big title →
   lead", but without the illustration so the post list starts higher. */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: 64px 40px;
}
/* gold glow on the left — as in the other sections */
.page-head::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -8%;
  width: 620px;
  height: 620px;
  pointer-events: none;
  background: radial-gradient(circle, oklch(80% 0.15 85 / .14), transparent 68%);
}
.page-head > .container { position: relative; z-index: 1; }

.page-head__title {
  font-size: clamp(46px, 7vw, 86px);
  line-height: 0.95;
  margin: 12px 0 16px;
}
.page-head__title span { color: var(--accent); }

.page-head__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 620px;
}

/* Qualified with the element: WordPress puts a "blog" class on <body> for the
   posts index, and a bare .blog rule would hand the whole document
   overflow: hidden — the page would stop scrolling. */
section.blog {
  position: relative;
  overflow: hidden;
  padding-block: 24px 100px;
  /* keeps the scroll from ducking under the sticky header when paging */
  scroll-margin-top: 92px;
}
/* blue glow on the right, under the sidebar */
section.blog::before {
  content: '';
  position: absolute;
  top: 4%;
  right: -14%;
  width: 600px;
  height: 600px;
  pointer-events: none;
  background: radial-gradient(circle, oklch(58% 0.12 245 / .15), transparent 68%);
}
section.blog > .container { position: relative; z-index: 1; }

.blog__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 44px;
}

/* Same cards as the news block on the front page — only the grid lives here.
   Two fixed columns rather than auto-fit: in the narrow column next to the
   sidebar, auto-fit would lay them out three across and shrink the art to stamps. */
.blog__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.blog__list .news-card[hidden] { display: none; }

/* pagination ---------------------------------------------------------------
   The same keys as everywhere else: travel comes from --depth/--press/--edge.
   The current page is gold and cannot be pressed. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 48px;
}

.pager__btn {
  --depth: 4px;
  --press: 0px;
  --edge: calc(var(--depth) - var(--press));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 15px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--text-link);

  background: linear-gradient(180deg, oklch(24% 0.03 260), oklch(19% 0.03 260));
  border: 1px solid oklch(32% 0.03 260);
  border-top-color: oklch(46% 0.03 260);

  transform: translateY(var(--press));
  box-shadow:
    0 var(--edge) 0 oklch(13% 0.02 260),
    0 calc(var(--edge) + 2px) calc(5px + var(--edge)) oklch(0% 0 0 / .4);

  transition: transform .1s ease-out, box-shadow .1s ease-out,
              color .18s ease, border-color .18s ease, background-color .18s ease;
}

.pager__btn:hover {
  --press: calc(var(--depth) / 3);
  color: var(--text);
  border-color: oklch(48% 0.04 260);
}
.pager__btn:active { --press: var(--depth); }

.pager__btn--edge { font-size: 14px; }

.pager__btn.is-current {
  color: var(--ink-dark);
  background: var(--accent);
  border-color: transparent;
  box-shadow:
    0 var(--edge) 0 oklch(58% 0.13 62),
    0 calc(var(--edge) + 2px) calc(5px + var(--edge)) oklch(0% 0 0 / .45);
  cursor: default;
}
/* the current page is already "pressed" — it does not move under the cursor */
.pager__btn.is-current:hover  { --press: 0px; color: var(--ink-dark); }
.pager__btn.is-current:active { --press: 0px; }

.pager__btn[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}

.pager__gap {
  padding-inline: 2px;
  color: var(--text-faint);
  font-weight: 800;
}

/* album sidebar ------------------------------------------------------------
   Scrolls with the list, no sticky: two cards with square covers are taller
   than the viewport, and a pinned column would clip the second one. */
.side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.side__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted-2);
}

.side__cards {
  display: grid;
  gap: 18px;
}

/* Same surface as .album on the front page: a top-down gradient, a light
   bevel on the top edge, a lift on hover. */
.side-album {
  padding: 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, oklch(24% 0.03 260), oklch(19% 0.03 260));
  border: 1px solid oklch(31% 0.03 260);
  border-top-color: oklch(45% 0.03 260);
  box-shadow: var(--elev-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.side-album:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-2);
  border-color: oklch(46% 0.04 260);
}

.side-album--next {
  background: linear-gradient(180deg, oklch(27% 0.06 85 / .35), oklch(19% 0.03 260));
  border-color: oklch(80% 0.15 85 / .35);
  border-top-color: oklch(80% 0.15 85 / .55);
}
.side-album--next:hover { border-color: oklch(80% 0.15 85 / .6); }

.side-album__cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: linear-gradient(145deg, oklch(44% 0.12 262), oklch(25% 0.08 258));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .2),
    inset 0 -16px 26px oklch(0% 0 0 / .3);
}
.side-album__cover--gold {
  background: linear-gradient(145deg, oklch(74% 0.15 88), oklch(50% 0.13 68));
}

.side-album__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
/* diagonal gloss across the sleeve — as on the discography covers */
.side-album__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, oklch(100% 0 0 / .13) 0 36%, transparent 36%);
}

.side-album__tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

.side-album__title { font-size: 26px; }

.side-album__meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted-2);
  margin-top: 5px;
}
.side-album--next .side-album__meta { color: var(--text-link); }

/* platform links stacked, full card width */
.side-album__streams {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.side-album__streams .stream {
  padding: 9px 14px;
  font-size: 13px;
}
.side-album__streams .stream svg { width: 18px; height: 18px; }

@media (max-width: 1080px) {
  /* the sidebar drops under the list, the albums pair up */
  .blog__grid  { grid-template-columns: 1fr; gap: 54px; }
  .side__cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .blog__list  { grid-template-columns: 1fr; }
  .side__cards { grid-template-columns: 1fr; }

  .pager { gap: 8px; }
  .pager__btn { min-width: 40px; height: 40px; padding-inline: 12px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   16. Article
   -------------------------------------------------------------------------- */
/* The post page uses the same layout as the feed: section .blog gives the
   "content + 330px sidebar" grid and the glow, this part only covers text. */
.page-head--post { padding-block: 44px 32px; }

.post-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
  transition: color .18s ease;
}
.post-back:hover { color: var(--accent); }

.post-back__arrow {
  width: 8px;
  height: 8px;
  border-left: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: rotate(45deg);
}

.page-head__title--post {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.02;
  margin: 10px 0 18px;
  max-width: 900px;
}

.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 14px;
  color: var(--text-dim-2);
}

.post-meta__date {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.post-meta__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-pill);
}

.post { min-width: 0; }

/* Cover on a coloured backdrop — like the video thumbnails and news art:
   the transparent-background mascot stands on the bottom edge. */
.post__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 34px;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, oklch(45% 0.1 255), oklch(38% 0.09 255));
  border: 1px solid oklch(100% 0 0 / .09);
  box-shadow: var(--elev-1);
}
.post__cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}
/* gloss on top, as on the album covers */
.post__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(100% 0 0 / .1), transparent 45%);
}

/* article text ------------------------------------------------------------ */
.post__body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-body);
  max-width: 74ch;
}
.post__body > * + * { margin-top: 20px; }
.post__body > :first-child { margin-top: 0; }

.post__lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--text-soft);
}

.post__body strong { color: var(--text); font-weight: 800; }

.post__body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.post__body a:hover { color: var(--accent-hi); }

/* Subheadings take the same accent rule as the section titles — thinner and
   shorter, but from the same gold → purple gradient. */
.post__body h2 {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--text);
  padding-left: 18px;
  margin-top: 46px;
}
.post__body h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: .14em;
  bottom: .14em;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--purple));
}

.post__body h3 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
  margin-top: 32px;
}

/* list marker — a gold chip, as in the About block */
.post__body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post__body li {
  position: relative;
  padding-left: 26px;
}
.post__body li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px oklch(80% 0.15 85 / .18);
}

/* tables ------------------------------------------------------------------
   The wrapper holds the background, border and radius, and on narrow screens
   scrolls the table sideways — the page itself never breaks out. */
.post__table {
  overflow-x: auto;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, oklch(24% 0.03 260), oklch(19% 0.03 260));
  border: 1px solid oklch(31% 0.03 260);
  border-top-color: oklch(45% 0.03 260);
  box-shadow: var(--elev-1);
}

.post__body table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.post__body th,
.post__body td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid oklch(30% 0.03 260);
}

.post__body thead th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  background: oklch(27% 0.04 260);
}

.post__body tbody td:first-child {
  color: var(--text);
  font-weight: 700;
}
.post__body tbody tr:last-child td { border-bottom: 0; }
.post__body tbody tr:hover td { background: oklch(26% 0.03 260); }

.post__caption {
  caption-side: bottom;
  padding: 12px 18px;
  text-align: left;
  font-size: 13px;
  color: var(--text-dim-2);
}

/* recent posts in the sidebar ---------------------------------------------- */
/* The row behaves like a track in the discography: backdrop and sideways shift. */
.side__title + .recent,
.side__title + .side__cards { margin-top: -2px; }
.recent + .side__title { margin-top: 20px; }

.recent {
  display: grid;
  gap: 8px;
}

.recent__item {
  display: grid;
  grid-template-columns: 68px 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.recent__item:hover {
  background: linear-gradient(180deg, oklch(25% 0.03 260), oklch(20% 0.03 260));
  border-color: oklch(34% 0.03 260);
  transform: translateX(4px);
}

.recent__thumb {
  display: block;
  width: 68px;
  height: 56px;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--art-a), var(--art-b));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .18);
}
.recent__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

/* backdrops alternate in the same two colours as the news cards */
.recent__item:nth-child(odd) .recent__thumb {
  --art-a: oklch(45% 0.1 255);
  --art-b: oklch(38% 0.09 255);
}
.recent__item:nth-child(even) .recent__thumb {
  --art-a: oklch(55% 0.13 85);
  --art-b: oklch(48% 0.12 85);
}

.recent__text { display: block; min-width: 0; }

.recent__date {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
}

.recent__title {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-soft);
  transition: color .18s ease;
}
.recent__item:hover .recent__title { color: var(--accent); }

@media (max-width: 1080px) {
  /* sidebar under the article: posts go two across, like the albums */
  .recent { grid-template-columns: 1fr 1fr; gap: 10px; }
}

@media (max-width: 620px) {
  .recent { grid-template-columns: 1fr; }

  .post__body { font-size: 16px; }
  .post__lead { font-size: 18px; }
  .post__body th,
  .post__body td { padding: 11px 14px; }
}

/* --------------------------------------------------------------------------
   17. Album page
   -------------------------------------------------------------------------- */
/* Same layout as the article: section .blog gives the grid with the sidebar,
   .post__body the typography. Only the head with the cover and the fixes for
   the tracklist and videos living inside the text are described here. */
.page-head--album { padding-block: 40px 44px; }

.album-hero {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: 44px;
}

/* Sleeve as in the discography: fill, diagonal gloss, transparent-background
   art on top — the same frame reads differently thanks to the backdrop colour. */
.album-hero__cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, oklch(44% 0.12 262), oklch(25% 0.08 258));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / .2),
    inset 0 -16px 26px oklch(0% 0 0 / .3),
    var(--elev-2);
}
.album-hero__cover--gold {
  background: linear-gradient(145deg, oklch(74% 0.15 88), oklch(50% 0.13 68));
}

.album-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.album-hero__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, oklch(100% 0 0 / .13) 0 36%, transparent 36%);
}

.album-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.album-hero__title {
  font-size: clamp(42px, 6vw, 74px);
  line-height: 0.95;
  margin-top: 2px;
}

.album-hero__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 560px;
}

.album-hero__streams {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* The text keeps a comfortable measure by itself, while the tracklist, videos
   and tables take the full column — so the width limit is moved off the
   container and onto the text elements. */
.album-page .post__body { max-width: none; }
.album-page .post__body > p,
.album-page .post__body > ul { max-width: 74ch; }

/* three thumbnails in the column next to the sidebar would be stamps */
.album-page .videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Track and video titles are h3, and the generic .post__body h3 rule would
   blow them up. Give them back their own size. */
.album-page .track__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0;
}
.album-page .video__title {
  font-size: 16px;
  font-weight: 700;
  margin-top: 14px;
}

/* The sidebar card is clickable as a whole: the title link stretches across it
   and the platform links are raised above. The wide card on the front page has
   no such overlay — there the only way out is the View more link. */
.album,
.side-album { position: relative; }

.side-album__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.side-album:hover .side-album__title a { color: var(--accent); }

.album__streams,
.side-album__streams { position: relative; z-index: 1; }

@media (max-width: 860px) {
  /* cover above the text, everything centred — like the hero on the front page */
  .album-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 26px;
  }
  .album-hero__cover { width: 100%; max-width: 280px; }
  .album-hero__copy  { align-items: center; }
}

@media (max-width: 620px) {
  .album-page .videos__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   18. Text page with a table of contents
   -------------------------------------------------------------------------- */
/* Template for an ordinary page — policy, rules, terms. Same layout:
   .blog gives the grid with the side column, .post__body the typography. */
/* The column is pinned, but together with the CTA it may not fit the viewport —
   then it scrolls inside itself instead of hiding the bottom entries. */
.page-toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, oklch(24% 0.03 260), oklch(19% 0.03 260));
  border: 1px solid oklch(31% 0.03 260);
  border-top-color: oklch(45% 0.03 260);
  box-shadow: var(--elev-1);
}

/* The left bar appears on hover — the same device as the footer menu items,
   only with gold on the edge. */
.toc a {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-link);
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.toc a:hover {
  color: var(--accent);
  border-left-color: var(--accent);
  background: oklch(27% 0.03 260);
}

/* an anchor must not duck under the sticky header */
.post__body h2 { scroll-margin-top: 96px; }

@media (max-width: 1080px) {
  /* the table of contents moves above the text — otherwise it is useless */
  .page-toc {
    position: static;
    order: -1;
    max-height: none;
    overflow: visible;
  }
  .toc { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .toc { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   19. Casino CTA in the sidebar
   -------------------------------------------------------------------------- */
/* The same device as the upcoming-album card: a dark surface with a gold tint
   and a gold edge — on it the button reads as the main action in the column,
   while the block does not fight with the covers. */
.side-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, oklch(27% 0.06 85 / .38), oklch(19% 0.03 260));
  border: 1px solid oklch(80% 0.15 85 / .35);
  border-top-color: oklch(80% 0.15 85 / .55);
  box-shadow: var(--elev-1);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.side-cta:hover {
  border-color: oklch(80% 0.15 85 / .6);
  box-shadow: var(--elev-2);
}

/* gold glow in the corner — as in the front page sections */
.side-cta::before {
  content: '';
  position: absolute;
  top: -45%;
  right: -35%;
  width: 280px;
  height: 280px;
  pointer-events: none;
  background: radial-gradient(circle, oklch(80% 0.15 85 / .2), transparent 68%);
}
.side-cta > * { position: relative; z-index: 1; }

.side-cta__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.side-cta__title {
  font-size: 27px;
  line-height: 1.05;
}
.side-cta__title span { color: var(--accent); }

.side-cta__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-link);
}

/* Button across the full card width. The key edge is drawn with a shadow, so
   it sticks out below the box — the bottom margin makes room for it, otherwise
   the note underneath sits on top of the edge. */
.side-cta__btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  margin-bottom: calc(var(--depth) + 4px);
}

.side-cta__note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim-3);
}

/* --------------------------------------------------------------------------
   20. WordPress: menus, alignments, core blocks
   -------------------------------------------------------------------------- */
/* Everything below adapts core markup to the language already established
   above. No new visual ideas here — only wiring. */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  color: var(--ink-dark);
  background: var(--accent);
}

/* menus ------------------------------------------------------------------- */
.nav__menu {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}
.nav__menu .current-menu-item > a,
.nav__menu .current_page_item > a { color: var(--accent); }

.footer__menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}
.footer__menu a { font-size: 14px; color: var(--text-link); }
.footer__menu a:hover { color: var(--accent); }

/* archive of albums: one card per row next to the sidebar */
.albums--archive { grid-template-columns: 1fr; margin-bottom: 0; }

/* On the archive the whole card is the link: the View more anchor stretches
   over it, so there is still exactly one link to the album in the markup.
   The platform links sit above the overlay. */
.albums--linked .album { cursor: pointer; }
.albums--linked .album__more::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* Platform links are hidden inside the card on wide screens, because on the
   front page they live in one shared row under the albums. The archive has no
   such row, so here the card carries them. */
.albums--archive .album__streams { display: flex; }
.albums--linked .album__streams { z-index: 2; }
.albums--linked .album:hover .album__more { color: var(--accent-hi); gap: 12px; }

/* article body ------------------------------------------------------------
   The measure is capped per element rather than on the container, so images,
   tables and embeds can use the full column while the text stays readable. */
.post__body { max-width: none; }
.post__body > * { max-width: 74ch; }

.post__body > figure,
.post__body > .tracklist,
.post__body > .videos__grid,
.post__body > .post__table,
.post__body > .alignwide,
.post__body > .alignfull,
.post__body > .wp-block-table,
.post__body > .wp-block-embed,
.post__body > .wp-block-gallery,
.post__body > .wp-block-image,
.post__body > .wp-block-columns,
.post__body > .wp-block-media-text { max-width: none; }

/* headings keep their anchor offset under the sticky bar */
.post__body h3,
.post__body h4 { scroll-margin-top: 96px; }

.post__body h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-top: 26px;
}

/* numbered lists get the same gold chip, with the number inside it */
.post__body ol {
  list-style: none;
  counter-reset: sb-ol;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post__body ol > li {
  position: relative;
  counter-increment: sb-ol;
  padding-left: 34px;
}
.post__body ol > li::before {
  content: counter(sb-ol);
  position: absolute;
  left: 0;
  top: .1em;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-dark);
  background: var(--accent);
}
.post__body li > ul,
.post__body li > ol { margin-top: 10px; }

/* images ------------------------------------------------------------------ */
.post__body figure { margin: 0; }

.post__body img,
.post__body .wp-block-image img {
  height: auto;
  border-radius: var(--r-md);
}

.post__body figcaption,
.post__body .wp-element-caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim-2);
}

.post__body .alignleft {
  float: left;
  margin: 6px 24px 18px 0;
  max-width: 50%;
}
.post__body .alignright {
  float: right;
  margin: 6px 0 18px 24px;
  max-width: 50%;
}
.post__body .aligncenter {
  margin-inline: auto;
  text-align: center;
}
.post__body .alignwide,
.post__body .alignfull { width: 100%; }

/* tables from the block editor take the surface built for hand-written ones */
.post__body .wp-block-table {
  overflow-x: auto;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, oklch(24% 0.03 260), oklch(19% 0.03 260));
  border: 1px solid oklch(31% 0.03 260);
  border-top-color: oklch(45% 0.03 260);
  box-shadow: var(--elev-1);
}
.post__body .wp-block-table table { margin: 0; }

/* The block library draws a box around every cell and a 3px rule under the
   head. Both are undone here: the two selectors below outrank core's, which
   matches ours on specificity and would otherwise win on load order. */
.post__body .wp-block-table th,
.post__body .wp-block-table td {
  border: 0;
  border-bottom: 1px solid oklch(30% 0.03 260);
  padding: 13px 18px;
  word-break: normal;
}
.post__body .wp-block-table thead,
.post__body .wp-block-table tfoot { border: 0; }
.post__body .wp-block-table tbody tr:last-child td { border-bottom: 0; }

.post__body .wp-block-table figcaption {
  margin: 0;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--text-dim-2);
}
.post__body .wp-block-table.is-style-stripes {
  background: linear-gradient(180deg, oklch(24% 0.03 260), oklch(19% 0.03 260));
  border: 1px solid oklch(31% 0.03 260);
}
.post__body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
  background: oklch(22% 0.03 260);
}

/* A heading followed straight by a table or a media block needs more air than
   the 20px between text blocks — the display face is tall. */
.post__body h2 + .wp-block-table,
.post__body h2 + .post__table,
.post__body h2 + figure,
.post__body h2 + .tracklist,
.post__body h2 + .videos__grid,
.post__body h3 + .wp-block-table,
.post__body h3 + .post__table,
.post__body h3 + figure { margin-top: 28px; }

/* quotes, code, separators ------------------------------------------------ */
.post__body blockquote,
.post__body .wp-block-quote {
  position: relative;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-soft);
}
.post__body blockquote cite,
.post__body .wp-block-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-style: normal;
  color: var(--text-dim-2);
}

.post__body .wp-block-pullquote {
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid oklch(80% 0.15 85 / .35);
  background: linear-gradient(180deg, oklch(27% 0.06 85 / .3), oklch(19% 0.03 260));
  text-align: center;
}

.post__body pre,
.post__body .wp-block-code {
  overflow-x: auto;
  padding: 18px;
  border-radius: var(--r-md);
  background: oklch(14% 0.02 260);
  border: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.6;
}
.post__body code { font-size: .92em; }
.post__body :not(pre) > code {
  padding: 2px 6px;
  border-radius: 6px;
  background: oklch(26% 0.03 260);
  color: var(--text);
}

.post__body hr,
.post__body .wp-block-separator {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .6;
}

/* buttons from the editor read as the slot key, without its physics */
.post__body .wp-block-button__link {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 800;
  color: var(--ink-dark);
  background: var(--accent);
  text-decoration: none;
}
.post__body .wp-block-button__link:hover { background: var(--accent-hi); color: var(--ink-dark); }
.post__body .is-style-outline .wp-block-button__link {
  color: var(--accent);
  background: none;
  border: 1px solid var(--border-pill);
}

.post__body .wp-block-embed figcaption { text-align: center; }

/* colour palette exposed to the editor */
.has-gold-color        { color: var(--accent); }
.has-blue-color        { color: var(--blue); }
.has-purple-color      { color: var(--purple); }
.has-ink-color         { color: var(--text); }
.has-muted-color       { color: var(--text-muted); }
.has-gold-background-color       { background-color: var(--accent); }
.has-surface-background-color    { background-color: var(--bg-alt); }
.has-background-background-color { background-color: var(--bg); }

/* search form ------------------------------------------------------------- */
.search-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 460px;
}
.search-form label { flex: 1; min-width: 200px; }
.search-form .search-field {
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: oklch(22% 0.03 260);
  border: 1px solid var(--border);
}
.search-form .search-field::placeholder { color: var(--text-faint); }
.search-form .search-submit {
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 800;
  color: var(--ink-dark);
  background: var(--accent);
  cursor: pointer;
}
.search-form .search-submit:hover { background: var(--accent-hi); }

/* core classes a theme is expected to carry */
.sticky {}
.bypostauthor {}
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--text-dim-2); }
.gallery-caption { font-size: 13px; }

@media (max-width: 560px) {
  .post__body .alignleft,
  .post__body .alignright {
    float: none;
    margin: 0;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   21. Album strip on the front page
   -------------------------------------------------------------------------- */
/* Every album lives in one horizontal strip. With two of them nothing
   overflows and it reads as the two-column grid it replaced; with more, the
   strip scrolls with snap points. Picking a card switches the tracklist under
   it, so the two sliders are really one control. */
.albums-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* room for the card lift on hover, which would clip against the overflow */
  padding: 5px;
  margin: -5px -5px 28px;
  overscroll-behavior-x: contain;
}
.albums-viewport::-webkit-scrollbar { display: none; }

.albums-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 14px);
  gap: 28px;
  align-items: stretch;
}
.albums-strip > .album { scroll-snap-align: start; }

/* the card doubles as the tracklist switch */
.albums-strip--select > .album { cursor: pointer; }

.album__more,
.album__streams { position: relative; z-index: 1; }

.album__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--accent);
  transition: color .18s ease, gap .18s ease;
}
.album__more:hover { color: var(--accent-hi); gap: 12px; }

.album__more-arrow {
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* The card showing its tracks is ringed in gold. */
.album.is-selected {
  border-color: oklch(80% 0.15 85 / .5);
  border-top-color: oklch(80% 0.15 85 / .7);
  box-shadow: var(--elev-2), inset 0 0 0 1px oklch(80% 0.15 85 / .18);
}

/* strip controls ---------------------------------------------------------- */
/* Shown only when there are more than two albums — with two of them the strip
   fits and both cards are one click away. */
.music-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 34px;
}

/* Same key physics as the pagination: travel comes from --depth/--press. */
.music-arrow {
  --depth: 4px;
  --press: 0px;
  --edge: calc(var(--depth) - var(--press));

  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text-link);
  background: linear-gradient(180deg, oklch(24% 0.03 260), oklch(19% 0.03 260));
  border: 1px solid oklch(32% 0.03 260);
  border-top-color: oklch(46% 0.03 260);
  transform: translateY(var(--press));
  box-shadow:
    0 var(--edge) 0 oklch(13% 0.02 260),
    0 calc(var(--edge) + 2px) calc(5px + var(--edge)) oklch(0% 0 0 / .4);
  transition: transform .1s ease-out, box-shadow .1s ease-out,
              color .18s ease, border-color .18s ease, opacity .18s ease;
}
.music-arrow:hover  { --press: calc(var(--depth) / 3); color: var(--accent); border-color: oklch(48% 0.04 260); }
.music-arrow:active { --press: var(--depth); }
.music-arrow[disabled] { opacity: .35; pointer-events: none; }

.music-arrow__chev {
  width: 8px;
  height: 8px;
  border-left: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: rotate(45deg);
  margin-left: -2px;
}
.music-arrow--next .music-arrow__chev {
  transform: rotate(-135deg);
  margin: 0 -2px 0 0;
}

.music-dots {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.music-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  cursor: pointer;
  background: oklch(38% 0.02 260);
  transition: background-color .2s ease, width .2s ease;
}
.music-dot:hover { background: oklch(52% 0.02 260); }
.music-dot[aria-current="true"] {
  width: 28px;
  background: var(--accent);
}

/* tracklist panels -------------------------------------------------------- */
.tracks__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.tracks__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tracks__label span { color: var(--accent); }
.tracks__label span:not(:empty)::before { content: '· '; color: var(--text-faint); }

.tracks__panel { display: none; }
.tracks__panel.is-active {
  display: block;
  animation: panel-in .3s ease;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateX(14px); }
}

.tracks.is-empty { display: none; }

@media (max-width: 860px) {
  /* one card per view */
  .albums-strip { grid-auto-columns: 100%; }
  .music-nav { gap: 12px; }
}

/* --------------------------------------------------------------------------
   22. Header menu: dropdowns and the burger
   -------------------------------------------------------------------------- */
.nav__menu li { position: relative; }

/* the link padding reaches the dropdown, so the hover does not break in the gap */
.nav__menu > li > a {
  display: block;
  padding-block: 9px;
}

/* Both selectors are qualified with .nav__menu so they outrank the
   `.nav__menu > li > a { display: block }` rule above. Without that the link
   stays a block, the pseudo element below stays inline — and an inline box
   ignores width, height and transform, leaving its right border as a thin
   vertical bar next to the label. */
.nav__menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  gap: 7px;
}
.nav__menu .menu-item-has-children > a::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(1px) rotate(45deg);
  transition: transform .2s ease;
  opacity: .75;
}

.nav__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: -12px;
  z-index: 5;
  min-width: 210px;
  display: grid;
  gap: 2px;
  padding: 10px;
  margin-top: 8px;
  list-style: none;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, oklch(24% 0.03 260), oklch(19% 0.03 260));
  border: 1px solid oklch(31% 0.03 260);
  border-top-color: oklch(45% 0.03 260);
  box-shadow: var(--elev-2);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* bridge the 8px gap so the pointer can cross it */
.nav__menu .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.nav__menu li:hover > .sub-menu,
.nav__menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__menu li:hover > a::after,
.nav__menu li:focus-within > a::after { transform: translateY(3px) rotate(-135deg); }

.nav__menu .sub-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-link);
  transition: color .18s ease, background-color .18s ease;
}
.nav__menu .sub-menu a:hover {
  color: var(--accent);
  background: oklch(27% 0.03 260);
}

/* burger ------------------------------------------------------------------
   Two bars that cross over when the panel is open. */
.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text);
}
.burger span,
.burger::before,
.burger::after {
  content: '';
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .24s ease, opacity .18s ease;
}
.burger::before { top: 14px; }
.burger span    { top: 21px; }
.burger::after  { top: 28px; }

.nav.is-open .burger::before { transform: translateY(7px) rotate(45deg); }
.nav.is-open .burger span    { opacity: 0; }
.nav.is-open .burger::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: block; }

  /* The bar is sticky, so the panel hangs off it with top: 100%. */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    padding: 6px var(--gutter) 20px;
    background: oklch(13% 0.03 260 / .98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--elev-2);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.is-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__menu > li > a {
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--border-mute);
  }

  /* submenus stay open — no second tap to reach an album */
  .nav__menu .sub-menu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 4px 0 10px 14px;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__menu .sub-menu::before { display: none; }
  .nav__menu .sub-menu a { padding: 10px 0; }
  .nav__menu .menu-item-has-children > a::after { margin-left: auto; }
}

@media (max-width: 860px) {
  /* Logo on the left, the action pair on the right. The auto margin does the
     splitting, so the gap between the button and the burger stays small
     instead of being stretched by space-between. */
  .nav__inner { gap: 8px; }
  .nav__inner .slot-btn--sm { order: 2; margin-left: auto; }
  .burger {
    order: 3;
    /* the bars are inset 11px, so pull the box out to line them up with the gutter */
    margin-right: -8px;
  }
}

@media (max-width: 420px) {
  .nav__inner .slot-btn--sm { padding: 10px 14px; font-size: 13px; }
  .nav__logo img { height: 38px; }
}