/* ==========================================================================
   Zeilsteen Kick-ass Radio
   Design: "licht & rauw" — papieren basis, inkt-zwarte typografie,
   grunge-textuur als drukwerk-laag, oranje #fbac1b als enige accentkleur.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Eigen webfont — Officina Serif ITC TT
   --------------------------------------------------------------------------
   Vier snedes uit assets/fonts/: Book en Bold, elk recht en cursief.
   woff2 staat voorop (kleiner, ~25 kB per snede), woff als terugval voor
   oudere browsers.

   font-display: swap — de tekst is meteen leesbaar in de fallback en wisselt
   om zodra het font binnen is. Geen onzichtbare tekst bij een trage verbinding.

   Let op: dit is een betaald ITC-font. De bestanden horen bij jouw licentie;
   zet ze niet in een publieke repository.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Officina Serif";
  src: url("../fonts/zeilsteenfont-Book.woff2") format("woff2"),
       url("../fonts/zeilsteenfont-Book.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Officina Serif";
  src: url("../fonts/zeilsteenfont-BookIta.woff2") format("woff2"),
       url("../fonts/zeilsteenfont-BookIta.woff")  format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Officina Serif";
  src: url("../fonts/zeilsteenfont-Bold.woff2") format("woff2"),
       url("../fonts/zeilsteenfont-Bold.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Officina Serif";
  src: url("../fonts/zeilsteenfont-BoldIta.woff2") format("woff2"),
       url("../fonts/zeilsteenfont-BoldIta.woff")  format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* kleur */
  --paper:        #f3f0e9;
  --paper-2:      #eae5da;
  --ink:          #14110f;
  --ink-soft:     #4a423b;
  --muted:        #7b7167;
  --accent:       #fbac1b;
  --accent-deep:  #d78c04;
  --accent-ink:   #14110f;
  /* Kleur van de "on air"-stip. Staat los, zodat je hem terug op rood
     (#ff4d3d) kunt zetten als je het klassieke live-signaal wilt. */
  --live:         var(--accent);

  /* --- Contextkleuren -------------------------------------------------
     Deze vier bepalen randen, vlakken en tekst. Op donkere ondergronden
     worden ze verderop omgedraaid (zie "Donkere context"), waardoor
     knoppen, kaarten en velden overal vanzelf goed staan.
     Randkleuren zijn bewust ONDOORZICHTIG: half-transparante randen
     lopen op de grunge-textuur uit en ogen daardoor niet strak. */
  --fg:           var(--ink);      /* tekst */
  --edge:         var(--ink);      /* harde rand (knoppen, actieve blokken) */
  --edge-soft:    #cec7b7;         /* rustige rand (kaarten, velden) */
  --surface:      var(--paper-2);  /* vlak van kaarten en velden */
  --surface-2:    var(--paper);    /* vlak bij focus/hover */

  --line:         var(--edge-soft);
  --bw:           2px;
  --radius:       3px;

  /* Minimale ruimte tussen een tekstblok en de knop eronder. Eén waarde voor
     de hele site, zodat elke knop overal evenveel lucht heeft. */
  --btn-gap:      1.5rem;

  /* typografie — drie rollen:
     display = posterkoppen, serif = leestekst, body = interface (nav, knoppen, labels) */
  --font-display: "Anton", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --font-serif:   "Officina Serif", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ritme */
  --wrap:      1240px;
  --wrap-slim: 820px;
  --gutter:    clamp(1.15rem, 4vw, 3rem);
  --section:   clamp(3.5rem, 8vw, 7rem);

  /* effect */
  --shadow-lg: 0 18px 40px -22px rgba(20, 17, 15, .55);
  --ease:      cubic-bezier(.2, .7, .3, 1);

  --header-h:  84px;
  --minibar-h: 66px;

  /* --- Hero -------------------------------------------------------------
     De eerste sectie van elke pagina. Draai hier aan de achtergrondkleur en
     aan de gele splash; de hero zelf hoef je niet aan te raken. */
  --hero-bg:         #fff;

  --splash-size:     clamp(560px, 66vw, 1080px); /* breedte van de splash   */
  --splash-x:        74%;   /* horizontaal middelpunt: 50% = midden         */
  --splash-y:        54%;   /* verticaal middelpunt                          */
  --splash-opacity:  .9;   /* hoger = minder transparant                    */
  --splash-rotate:   -8deg;
  /* Breedte van het logo-blok. Het blok is verticaal gecentreerd op de header
     (84px hoog), dus alles boven die hoogte steekt over de zwarte balk en de
     haarlijn heen. Groter = meer overhang. */
  --brand-w:   clamp(132px, 15vw, 186px);
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 48px + 1.5rem);
}

html { background-color: var(--paper); }

body {
  position: relative;
  min-height: 100%;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .22em; }

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

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

::selection { background: var(--accent); color: var(--accent-ink); }

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

/* --------------------------------------------------------------------------
   3. Grunge-lagen
   -------------------------------------------------------------------------- */

/* GrungeTexture.png als vaste achtergrondlaag achter de hele site.
   Eigen laag (z-index -1) in plaats van een body-background: zo is hij
   onafhankelijk van background-propagation en makkelijk te regelen.
   Sterker of zwakker? Draai alleen aan de opacity hieronder. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/GrungeTexture.png");
  background-repeat: repeat;
  background-position: center top;
  background-size: 1400px auto;
  mix-blend-mode: multiply;
  opacity: .12;
}

/* Fijne papierkorrel over de hele pagina. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* Grote inkt-textuur, als achtergrondelement in secties.
   De PNG is zwarte inkt op wit: op licht werkt 'multiply' (wit valt weg),
   op donker eerst inverteren en dan 'screen' (zwart valt weg). */
.grunge {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/GrungeTexture.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 1600px auto;
  mix-blend-mode: multiply;
  opacity: .14;
}

.grunge--top    { background-position: center top; }
.grunge--bottom { background-position: center bottom; }

/* Volledig getegeld in plaats van alleen een band bovenaan. */
.grunge--full {
  background-repeat: repeat;
  background-size: 1200px auto;
  opacity: .1;
}

/* Op donkere vlakken. */
.grunge--invert {
  filter: invert(1);
  mix-blend-mode: screen;
  opacity: .05;
}

/* --------------------------------------------------------------------------
   4. Layout-primitieven
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.wrap--slim { width: min(100% - (var(--gutter) * 2), var(--wrap-slim)); }

.section { position: relative; padding-block: var(--section); }

.section--tight { padding-block: clamp(2.25rem, 5vw, 3.75rem); }

/* --- Donkere context -------------------------------------------------------
   Alles binnen deze elementen draait de contextkleuren om. Knoppen, kaarten,
   randen en velden hoeven daardoor geen eigen "op zwart"-regels: ze lezen
   gewoon --fg / --edge / --surface en staan overal goed. */
.section--ink,
.player,
.site-footer,
.minibar,
.nav__menu,
.topbar {
  --fg:        var(--paper);
  --edge:      var(--paper);
  --edge-soft: #3b342e;
  --surface:   #1d1917;
  --surface-2: #262120;
  --muted:     rgba(243, 240, 233, .62);
  --ink-soft:  rgba(243, 240, 233, .78);
  --line:      var(--edge-soft);
}

.section--ink {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.section--ink a { text-decoration-color: var(--accent); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 10000;
  padding: .7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   5. Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .94;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.6rem, 1.3rem + 6.2vw, 6.5rem);
  line-height: .88;
  letter-spacing: -.005em;
}

.h1 { font-size: clamp(2.2rem, 1.3rem + 4vw, 4.25rem); }
.h2 { font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem); }
.h3 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); }

/* Leestekst staat in de serif; interface-elementen blijven in --font-body. */
.lede {
  font-family: var(--font-serif);
  font-size: clamp(1.075rem, 1rem + .55vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.prose {
  max-width: 64ch;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.68;
}
.prose p + p { margin-top: 1.15em; }
.prose p { text-wrap: pretty; }
.prose strong { font-weight: 700; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
}

.section--ink .eyebrow { color: rgba(243, 240, 233, .58); }

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
}

.accent { color: var(--accent); }

/* Overige leestekst in de serif. Nav, knoppen, labels en cijfers blijven
   bewust in --font-body: die moeten scherp en compact blijven. */
.card p,
.section-head p,
.artist__note,
.section-note,
.tracklist__song,
.np-song,
.field__hint,
.alert,
.footer__brand p {
  font-family: var(--font-serif);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  /* Verticale ruimte telt pas als de knop onder de kop terechtkomt (smal
     scherm). Zelfde maat als elders, zodat het overal gelijk oogt. */
  gap: var(--btn-gap) 2rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.section-head p { max-width: 52ch; color: var(--muted); }
.section--ink .section-head p { color: rgba(243, 240, 233, .66); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
/* Eén knop voor de hele site.

   .btn                 gevuld — de standaard
   .btn .btn--accent    oranje — de belangrijkste actie per scherm
   .btn .btn--outline   omlijnd — secundair

   Alle drie hebben exact dezelfde maat, typografie, randdikte en radius;
   alleen de vulling verschilt. Hover draait de vulling om — geen verschuiving
   en geen slagschaduw, want dat is precies wat randen onrustig maakte. */
.btn {
  --btn-bg:     var(--edge);
  --btn-fg:     var(--paper);
  --btn-border: var(--edge);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: 0 1.4rem;
  border: var(--bw) solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}

.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

/* Gevuld → omgekeerd bij hover */
.btn:hover {
  background: transparent;
  color: var(--edge);
}

.btn--accent {
  --btn-bg:     var(--accent);
  --btn-fg:     var(--accent-ink);
  --btn-border: var(--accent);
}
.btn--accent:hover { background: transparent; color: var(--accent); }

.btn--outline {
  --btn-bg:     transparent;
  --btn-fg:     var(--fg);
  --btn-border: var(--edge);
}
.btn--outline:hover { background: var(--edge); color: var(--paper); }
/* In donkere context is --edge papierkleur; dan moet de tekst juist inkt worden. */
.section--ink .btn--outline:hover,
.player .btn--outline:hover,
.site-footer .btn--outline:hover { color: var(--ink); }

.btn:active { transform: translateY(1px); }

.btn--sm  { min-height: 36px; padding: 0 1rem;   font-size: .7rem; }
.btn--sm svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   7. Header / navigatie
   -------------------------------------------------------------------------- */
/* Topbar en navigatie plakken samen bovenaan, zodat het logo-blok over de
   zwarte balk heen kan steken zonder bij het scrollen af te breken. */
.site-top {
  position: sticky;
  top: 0;
  z-index: 200;
}

.topbar {
  background: var(--ink);
  color: rgba(243, 240, 233, .75);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* alles rechts; links is ruimte voor het logo */
  gap: 1rem;
  min-height: 38px;
  padding-block: .35rem;
}

.topbar__meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.topbar__np { color: var(--accent); font-weight: 700; }
.topbar__np:empty { display: none; }

@media (max-width: 560px) {
  .topbar__np { display: none; }
}

.topbar__socials { display: flex; align-items: center; gap: .35rem; }

.topbar__socials a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: rgba(243, 240, 233, .7);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.topbar__socials a:hover { color: var(--accent-ink); background: var(--accent); }
.topbar__socials svg { width: 16px; height: 16px; fill: currentColor; }

.live-dot {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  color: var(--paper);
}
.live-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 var(--live);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 70%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--live) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 0%, transparent); }
}

/* In de player-kaart is het label zelf al oranje; daar de stip papierwit
   zodat hij niet wegvalt tegen de tekst. */
.player__label { --live: var(--paper); }

.site-header {
  position: relative;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--edge-soft);
  transition: box-shadow .2s var(--ease);
}
.site-top.is-stuck .site-header { box-shadow: 0 12px 30px -22px rgba(20, 17, 15, .8); }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  /* Ruimte links voor het logo-blok, dat absoluut gepositioneerd is. */
  padding-left: calc(var(--brand-w) + 1.25rem);
}

/* Het logo-blok: de gele gesloten splash als vlak, met het wordmerk er
   inkt-zwart overheen. Het blok steekt met --brand-overhang over de zwarte
   topbalk heen; zodra die wegklapt bij het scrollen, zakt het netjes terug. */
/* Absoluut gepositioneerd en verticaal gecentreerd op de header. Daardoor
   steekt het blok er aan de bovenkant over de zwarte balk en aan de onderkant
   over de haarlijn heen, zónder de hoogte van de header te beïnvloeden. */
.brand {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 3;
  display: block;
  width: var(--brand-w);
  transform: translateY(-50%);
  text-decoration: none;
  transition: transform .25s var(--ease);
}
.brand:hover { transform: translateY(-40%) rotate(5deg) scale(1.75); }

/* De gele gesloten splash is het vlak; hij bepaalt ook de hoogte van het blok. */
.brand__splash {
  display: block;
  width: 100%;
  height: auto;
}

/* Het wordmerk ligt gecentreerd bovenop. Het bronbestand is oranje en zou
   wegvallen op geel, dus hier inkt-zwart. */
.brand__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72%;
  transform: translate(-50%, -50%);
  filter: brightness(0);
  transition: transform .25s var(--ease);
}
.brand:hover .brand__logo { transform: translate(-50%, -50%) scale(1.02); }

.nav { display: flex; align-items: center; gap: .25rem; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .35rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__link:hover::after,
.nav__item.is-active > .nav__link::after { transform: scaleX(1); }

.nav__caret { width: 10px; height: 10px; fill: currentColor; transition: transform .2s var(--ease); }

.nav__item { position: relative; }
.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu:focus-within .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  min-width: 230px;
  padding: .45rem;
  background: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__menu a {
  display: block;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  color: rgba(243, 240, 233, .82);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav__menu a:hover { background: var(--accent); color: var(--accent-ink); }

.header__cta { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  min-height: 36px;
  padding: 0 1rem;
  border: var(--bw) solid var(--edge);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-toggle:hover { background: var(--edge); color: var(--paper); }
.nav-toggle:hover .nav-toggle__bars span { background: currentColor; }
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars span {
  height: 2px;
  background: currentColor;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .header__cta .btn { display: none; }

  /* Hangt onder de header; .site-top is het referentiekader. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    max-height: 0;
    padding: 0 var(--gutter);
    background: var(--ink);
    overflow: hidden;
    transition: max-height .32s var(--ease), padding .32s var(--ease);
  }
  .nav.is-open {
    max-height: calc(100dvh - var(--header-h));
    padding: 1rem var(--gutter) 2rem;
    overflow-y: auto;
  }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link {
    padding: 1rem .25rem;
    color: var(--paper);
    font-size: 1rem;
    justify-content: space-between;
  }
  .nav__link::after { display: none; }
  .nav__item.is-active > .nav__link { color: var(--accent); }
  .nav__menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 .75rem .25rem;
    background: transparent;
    box-shadow: none;
  }
  .nav__menu a { padding: .5rem .25rem; color: rgba(243, 240, 233, .62); }
  .nav__menu a:hover { background: transparent; color: var(--accent); }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

/* De splash wordt op zijn middelpunt geplaatst (--splash-x / --splash-y) in
   plaats van op een hoek. Zo blijft hij op dezelfde plek liggen als je hem
   groter of kleiner maakt. Standaard staat hij rechts van het midden, achter
   het listen-live blok. max-width: none is nodig omdat img { max-width: 100% }
   hem anders terugknijpt tot de breedte van de hero. */
.hero__splash {
  position: absolute;
  top: var(--splash-y);
  left: var(--splash-x);
  width: var(--splash-size);
  max-width: none;
  opacity: var(--splash-opacity);
  transform: translate(-50%, -50%) rotate(var(--splash-rotate));
  pointer-events: none;
  z-index: 0;
}

/* Eén kolom op mobiel: de splash mag dan dichter naar het midden. */
@media (max-width: 900px) {
  .hero {
    --splash-x: 62%;
    --splash-y: 62%;
    --splash-size: clamp(420px, 105vw, 760px);
    --splash-opacity: .3;
  }
}

.hero__inner { position: relative; z-index: 2; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__title { margin-block: 1rem .9rem; }
.hero__title em { font-style: normal; color: var(--accent); -webkit-text-stroke: 1.5px var(--ink); }

.hero__lede { max-width: 42ch; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.hero__stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1;
}
.hero__stat span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   9. Player-kaart
   -------------------------------------------------------------------------- */
.player {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.player__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.player__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}

.player__listeners {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(243, 240, 233, .55);
}

.player__main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 1.35rem;
}

.play-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(76px, 12vw, 96px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.play-btn::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: var(--bw) solid var(--accent);
  border-radius: 50%;
  opacity: .3;
  transition: opacity .2s var(--ease);
}
.play-btn:hover { background: var(--paper); }
.play-btn:hover::before { opacity: .75; }
.play-btn svg { width: 38%; height: 38%; fill: currentColor; }

.play-btn .icon-pause,
.play-btn.is-playing .icon-play { display: none; }
.play-btn.is-playing .icon-pause { display: block; }

.play-btn.is-loading::before { animation: spin 1s linear infinite; border-top-color: transparent; opacity: .9; }
@keyframes spin { to { transform: rotate(360deg); } }

.play-btn.is-playing { animation: throb 2.6s ease-in-out infinite; }
@keyframes throb {
  50% { box-shadow: 0 0 0 14px rgba(251, 172, 27, .08); }
}

.player__track { min-width: 0; }

.player__track .np-artist {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem);
  line-height: 1.02;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player__track .np-song {
  margin-top: .35rem;
  font-size: .95rem;
  color: rgba(243, 240, 233, .7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player__track .np-song:empty::after { content: "—"; }

.player__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

.quality {
  display: inline-flex;
  border: var(--bw) solid var(--edge-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.quality button {
  min-height: 32px;
  padding: 0 .85rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.quality button + button { border-left: var(--bw) solid var(--edge-soft); }
.quality button:hover { color: var(--fg); }
.quality button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.volume { display: flex; align-items: center; gap: .6rem; min-width: 150px; flex: 1 1 150px; max-width: 230px; }
.volume svg { width: 18px; height: 18px; fill: rgba(243, 240, 233, .65); flex: none; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--accent) var(--fill, 80%), rgba(243, 240, 233, .2) var(--fill, 80%));
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
}
input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
}

.player__links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin-top: 1rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(243, 240, 233, .5);
}
.player__links a { color: rgba(243, 240, 233, .78); text-decoration: none; border-bottom: 1px solid rgba(251, 172, 27, .5); }
.player__links a:hover { color: var(--accent); }

.player__error {
  position: relative;
  z-index: 1;
  display: none;
  margin-top: 1rem;
  padding: .7rem .9rem;
  border-left: 3px solid var(--accent);
  background: rgba(251, 172, 27, .1);
  font-size: .85rem;
  color: rgba(243, 240, 233, .85);
}
.player__error.is-visible { display: block; }

@media (max-width: 420px) {
  .player__main { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* --------------------------------------------------------------------------
   10. Actiebalk
   -------------------------------------------------------------------------- */
.actionbar {
  position: relative;
  background: var(--accent);
  border-block: 2px solid var(--ink);
  overflow: hidden;
}

.actionbar__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.actionbar__item {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: clamp(1.1rem, 2.6vw, 1.7rem) clamp(.75rem, 2vw, 1.5rem);
  color: var(--accent-ink);
  text-decoration: none;
  border-right: var(--bw) solid rgba(20, 17, 15, .25);
  transition: background-color .2s var(--ease);
}
.actionbar__item:last-child { border-right: 0; }
.actionbar__item:hover { background: var(--ink); color: var(--accent); }

.actionbar__item svg { width: 26px; height: 26px; fill: currentColor; flex: none; }
.actionbar__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  line-height: 1;
}
.actionbar__item span { font-size: .78rem; opacity: .72; }

@media (max-width: 680px) {
  .actionbar__item { border-right: 0; border-bottom: var(--bw) solid rgba(20, 17, 15, .25); }
  .actionbar__item:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   11. Recently played
   -------------------------------------------------------------------------- */
/* Elke gedraaide track is een eigen blokje in plaats van een regel in een
   lange lijst. Leest rustiger en geeft de tijd rechts genoeg ruimte. */
.tracklist { display: grid; gap: .55rem; }

.tracklist__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.85rem, 2vw, 1.35rem);
  padding: .85rem 1.1rem;
  background: var(--surface);
  border: var(--bw) solid var(--edge-soft);
  border-radius: var(--radius);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.tracklist__item:hover { border-color: var(--edge); background: var(--surface-2); }

.tracklist__index {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

/* Artiest en titel zijn allebei een <span>, en die stonden dus achter elkaar
   op één regel: "Benjamin SchoosJe Ne Vois Que Vous". Onder elkaar zetten. */
.tracklist__meta {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.tracklist__artist {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tracklist__song {
  font-size: .95rem;
  line-height: 1.35;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Was .78rem in de lichtste grijstint en daardoor nauwelijks leesbaar. */
.tracklist__time {
  padding: .32rem .62rem;
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tracklist__time:empty { display: none; }

.tracklist__empty {
  padding: 1.75rem 1.1rem;
  background: var(--surface);
  border: var(--bw) solid var(--edge-soft);
  border-radius: var(--radius);
  color: var(--muted);
}

/* Smal scherm: de tijd zakt onder de titel in plaats van de kolom te knijpen. */
@media (max-width: 520px) {
  .tracklist__item { grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: .55rem; }
  .tracklist__index { width: 2.25rem; height: 2.25rem; font-size: .95rem; }
  .tracklist__time { grid-column: 2; justify-self: start; }
}

/* --------------------------------------------------------------------------
   12. Kaarten / grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: var(--bw) solid var(--edge-soft);
  border-radius: var(--radius);
  color: var(--fg);
  overflow: hidden;   /* houdt de productafbeelding binnen de afgeronde hoek */
  /* Geen verschuiving bij hover: alleen de rand wordt sterker. Zo blijft
     de omlijning op elke zoomstand precies één scherpe lijn. */
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.card:hover { border-color: var(--edge); background: var(--surface-2); }

.card__tag {
  align-self: flex-start;
  margin-bottom: .8rem;
  padding: .28rem .6rem;
  background: var(--accent);
  border-radius: var(--radius);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.card h3 { margin-bottom: .6rem; }
/* .card p is specifieker dan .product__price, dus die won het eerder.
   Vandaar .card hier ervoor: anders blijft de prijs .95rem in de serif.
   De ruimte onder de prijs komt van de knopregel verderop. */
.card .product__price {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 1;
  color: var(--fg);
}
.card p { color: var(--ink-soft); font-size: .95rem; }

/* Maakt de hele kaart klikbaar via de knop erin. */
.card--link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* De knop onderin een kaart.
   Hij hoort tegen de onderrand te staan, zodat de knoppen van kaarten naast
   elkaar op één lijn liggen. Dat deed `margin-top: auto` — maar zodra een
   kaart precies vol staat is die ruimte nul en plakt de knop tegen de tekst.
   Bovendien overschreef die regel elke mt-* op de knop zelf.

   Daarom staat de tussenruimte nu op het element eráchter: de knop mag naar
   beneden zakken, maar nooit dichter dan --btn-gap. */
.card > .btn { margin-top: var(--btn-gap); align-self: flex-start; }

@supports selector(:has(*)) {
  .card > .btn { margin-top: auto; }
  .card > :has(+ .btn) { margin-bottom: var(--btn-gap); }
}

/* Eerste sectie van elke pagina staat op wit, met de grunge daar overheen.
   .hero en .page-head zijn altijd het eerste blok in <main>; de extra regel
   met :first-child vangt pagina's op die met een gewone .section beginnen
   (zoals 404). */
main > .hero,
main > .page-head,
main > .section:first-child {
  background-color: var(--hero-bg);
}

/* Het vlak voor de productfoto: 4:3, foto vult het met object-fit: cover.
   Zolang er geen foto is, staat hier alleen de productnaam. */
/* Het vlak voor de productfoto.
   Vierkant, want dat is het formaat waarin productfoto's meestal aangeleverd
   worden. Wil je liggend, zet --shot-ratio dan op 4 / 3. */
.shot {
  --shot-ratio: 1 / 1;
  --shot-pad:   clamp(1.25rem, 7%, 2.5rem);

  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--shot-ratio);
  margin: calc(clamp(1.25rem, 2.5vw, 1.75rem) * -1);
  margin-bottom: 1.25rem;
  background: #fff;
  border-bottom: var(--bw) solid var(--edge-soft);
  overflow: hidden;
}

/* Nog geen foto? Dan het oude papieren vlak met de grunge eroverheen. */
.shot--empty {
  background: linear-gradient(170deg, #efece4 0%, #ddd6c7 65%, #d3cbba 100%);
}

/* Nog geen foto: leeg vlak met alleen de naam. */
.shot__empty {
  position: relative;
  z-index: 1;
  padding: 0 1.5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}

/* contain in plaats van cover: het hele product blijft in beeld, ook als de
   verhouding van de foto niet precies met het vlak overeenkomt. De padding
   geeft lucht rondom; omdat de achtergrond wit is loopt die naadloos door
   in foto's die zelf een witte achtergrond hebben. */
.shot__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: var(--shot-pad);
  object-fit: contain;
}

.artist {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: var(--bw) solid var(--edge-soft);
  border-radius: var(--radius);
  color: var(--fg);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.artist:hover { border-color: var(--edge); background: var(--surface-2); }

/* Oranje rondje met de eerste letter. Stond eerder op .82rem grijs, omdat
   ".artist span" specifieker is dan ".artist__avatar" en die dus overschreef.
   Vandaar dat alle onderdelen nu een eigen klasse hebben. */
.artist__avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1;
}

.artist__body {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  min-width: 0;
}
.artist__name {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
}
.artist__note {
  font-size: .95rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.artist__since {
  margin-top: .1rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Slotzin onder een sectie. Zat eerder op de standaard 1rem, waardoor hij
   groter oogde dan de blokken erboven. */
.section-note {
  max-width: 62ch;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--muted);
}
.section-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.section-note a:hover { color: var(--accent); }

/* App-knoppen */
.apps { display: flex; flex-wrap: wrap; gap: .75rem; }

.app-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 52px;
  padding: 0 1.1rem;
  border: var(--bw) solid var(--edge);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.app-btn:hover { background: var(--edge); color: var(--paper); }
.app-btn svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.app-btn__text { display: block; }
.app-btn__text span { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.app-btn__text strong { display: block; font-size: .92rem; line-height: 1.15; }

.app-btn:hover .app-btn__text span { color: inherit; opacity: .7; }
.section--ink .app-btn:hover,
.site-footer .app-btn:hover { background: var(--paper); color: var(--ink); }

/* --------------------------------------------------------------------------
   12b. Blogartikel
   -------------------------------------------------------------------------- */
/* Detailpagina: tekst en zijkolom binnen dezelfde .wrap als header en footer,
   dus niet meer een smalle kolom in het midden. Op mobiel onder elkaar. */
.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  .article { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

/* .prose knijpt normaal af op 64ch. In de artikelkolom niet: die vult zijn
   eigen 2/3. De regellengte blijft goed door de iets grotere letter. */
.article__body {
  max-width: none;
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Blijft meelopen tijdens het lezen; alleen als er ruimte voor is. */
@media (min-width: 900px) {
  .article__aside {
    position: sticky;
    top: calc(var(--header-h) + 48px + 1.5rem);
    align-self: start;
  }
}

/* Lijstje met de andere artikelen in de zijkolom. */
.post-list { margin-top: .25rem; }

.post-list li + li {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}

.post-list a {
  display: block;
  text-decoration: none;
}

.post-list__title {
  display: block;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: pretty;
}

.post-list a:hover .post-list__title { color: var(--accent-deep); }

.post-list__meta {
  display: block;
  margin-top: .2rem;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Datum op de overzichtskaart. */
.post__date {
  margin-top: .75rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   13. Pagina-kop
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head__splash {
  position: absolute;
  top: 50%;
  right: -6%;
  width: clamp(260px, 32vw, 460px);
  opacity: .14;
  transform: translateY(-50%) rotate(6deg);
  pointer-events: none;
}
.page-head__inner { position: relative; z-index: 1; }
.page-head .lede { margin-top: 1rem; max-width: 60ch; }

.breadcrumb {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   14. Formulieren
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
/* De verzendknop krijgt wat meer lucht dan de velden onderling. */
.form > :last-child:has(> .btn) { margin-top: calc(var(--btn-gap) - 1.1rem); }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.field { display: grid; gap: .4rem; }
.field label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .95rem;
  background: var(--surface);
  border: var(--bw) solid var(--edge-soft);
  border-radius: var(--radius);
  color: var(--fg);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--edge);
  background: var(--surface-2);
}
.field__hint { font-size: .78rem; color: var(--muted); }
.field.has-error input,
.field.has-error textarea { border-color: #c0392b; }
.field__error { font-size: .78rem; color: #c0392b; }

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

.alert {
  padding: 1rem 1.15rem;
  border: var(--bw) solid var(--edge-soft);
  border-left-width: 4px;
  border-left-color: var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: .95rem;
}
.alert--ok   { border-color: #2e7d32; }
.alert--fail { border-color: #c0392b; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--ink);
  color: rgba(243, 240, 233, .72);
  overflow: hidden;
}

/* Mobile-first en met vaste breekpunten. Het oude `repeat(auto-fit,
   minmax(150px, 1fr))` kon niet onder 150px per kolom zakken: op een telefoon
   had het grid ~583px nodig, liep het buiten de footer en sneed
   `overflow: hidden` de rechterkolommen weg. De eerste kolom (minmax(0,1.4fr))
   kromp daarbij naar vrijwel niets, waardoor de social-iconen verdwenen. */
.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.site-footer__inner > * { min-width: 0; }

@media (min-width: 600px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: auto; }
}

.site-footer h4 {
  margin-bottom: 1rem;
  font-size: 1.6rem;
  letter-spacing: .1em;
  color: var(--paper);
}

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

/* Groeit mee op ruimere schermen; op mobiel blijft hij op 170px staan. */
.footer__brand img { width: clamp(170px, 17vw, 240px); margin-bottom: 1.15rem; }
.footer__brand p { max-width: 40ch; font-size: .92rem; }

.footer__list li + li { margin-top: .55rem; }
.footer__list a { font-size: .92rem; }

.footer__socials { display: flex; gap: .5rem; margin-top: 1.35rem; }
.footer__socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--bw) solid var(--edge-soft);
  border-radius: 50%;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.footer__socials a:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.footer__socials svg { width: 18px; height: 18px; fill: currentColor; }

.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--line);
  font-size: .76rem;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   15b. Voortgangsbalkje bij paginawissel
   -------------------------------------------------------------------------- */
.route-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: width .35s var(--ease), opacity .2s var(--ease);
}
.route-progress.is-active { width: 78%; opacity: 1; }

#main:focus { outline: none; }

/* --------------------------------------------------------------------------
   16. Sticky mini-player
   -------------------------------------------------------------------------- */
.minibar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  min-height: var(--minibar-h);
  gap: 1rem;
  padding: .6rem var(--gutter);
  background: var(--ink);
  color: var(--paper);
  border-top: 2px solid var(--accent);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.minibar.is-visible { transform: translateY(0); }

.minibar__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: var(--bw) solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.minibar__btn:hover { background: transparent; color: var(--accent); }
.minibar__btn svg { width: 15px; height: 15px; fill: currentColor; }
.minibar__btn .icon-pause,
.minibar__btn.is-playing .icon-play { display: none; }
.minibar__btn.is-playing .icon-pause { display: block; }

.minibar__meta { min-width: 0; flex: 1; }
.minibar__meta strong {
  display: block;
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.minibar__meta span {
  display: block;
  font-size: .78rem;
  color: rgba(243, 240, 233, .6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.minibar .volume { display: none; }
@media (min-width: 720px) { .minibar .volume { display: flex; } }

.eq { display: flex; align-items: flex-end; gap: 2px; height: 18px; flex: none; }
.eq span {
  width: 3px;
  background: var(--accent);
  animation: eq .9s ease-in-out infinite alternate;
}
.eq span:nth-child(1) { height: 40%; animation-delay: -.5s; }
.eq span:nth-child(2) { height: 90%; animation-delay: -.2s; }
.eq span:nth-child(3) { height: 60%; animation-delay: -.7s; }
.eq span:nth-child(4) { height: 100%; animation-delay: -.35s; }
@keyframes eq { to { height: 15%; } }

/* --------------------------------------------------------------------------
   17. Marquee (hero-ticker)
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  padding-block: .7rem;
  background: var(--ink);
  color: var(--paper);
  border-block: 2px solid var(--ink);
  user-select: none;
}
/* De band bestaat uit een aantal identieke groepen achter elkaar. De animatie
   verschuift precies één groep; daarna staat de volgende op exact dezelfde
   plek en begint het rondje opnieuw — naadloos.
   --marquee-copies MOET gelijk zijn aan het aantal .marquee__group's in de
   HTML (nu 6, zie index.php). Genoeg kopieën om ook een breed scherm te
   vullen, want anders valt er zwart in beeld voordat de herhaling begint. */
.marquee__track {
  --marquee-copies: 6;
  display: flex;
  width: max-content;
  animation: marquee 18s linear infinite;
}

/* Geen min-width en geen space-around: de teksten houden hun eigen ritme.
   Dat was precies wat er misging toen elke groep schermbreed werd gerekt. */
.marquee__group {
  display: flex;
  flex: 0 0 auto;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee span::after { content: "★"; color: var(--accent); font-family: var(--font-body); font-size: .8rem; }
@keyframes marquee { to { transform: translateX(calc(-100% / var(--marquee-copies))); } }

/* --------------------------------------------------------------------------
   18. Reveal-animatie
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }

/* Ruimte voor de mini-player: de FOOTER groeit mee, niet de body.
   Zo loopt het zwarte footervlak door tot onder de balk en blijft er
   geen papierkleurige strook zichtbaar. */
.has-minibar .site-footer { padding-bottom: var(--minibar-h); }

@media print {
  .site-header, .topbar, .minibar, .actionbar, .site-footer, .player { display: none !important; }
  body::after { display: none; }
}