/*
 * 2ndbest.css — de hele site.
 *
 * Eén bestand, geen framework, geen build. Wat hier staat is wat de browser
 * krijgt, en het is klein genoeg om helemaal te lezen voordat je er iets in
 * verandert.
 *
 * DE KLEUREN KOMEN UIT HET BEELDMERK, en daar zijn ze gemeten:
 * tools/make-logo.py slaat dezelfde twee waarden op in de PNG's, dus het rood
 * van een knop is exact het rood van de kwastcirkel en de tekst is exact de
 * crème van de letters. Verander ze daar en hier, of niet.
 *
 * WARM EN NIET KOUD, en dat is het hele verschil met de vorige versie van dit
 * bestand. Dat logo had een koud gebroken wit (#F6F4F0) op een blauwzwart
 * (#0C0D10); dit heeft een warme crème op iets dat naar bruin trekt. Een koud
 * grijs naast deze crème ziet er vuil uit — vandaar dat elk grijs hieronder een
 * warm grijs is, tot en met de randen van de invoervelden.
 *
 * Alles wat beweegt staat achter prefers-reduced-motion. Een bezoeker die zegt
 * dat hij geen beweging wil, krijgt hier een pagina die gewoon stilstaat.
 */

:root {
  /* --- het beeldmerk ----------------------------------------------------- */
  --rood:       #f70d14;  /* de kwastcirkel */
  --creme:      #f0ddc2;  /* de letters */

  /* --- en drie reden erbij, elk met één taak ------------------------------
     Niet besluiteloosheid maar rekenwerk. Het rood van het logo is fel, en fel
     rood is precies de kleur die als TEKST net te weinig contrast heeft:

       --rood als tekst op --zwart-2 ....... 4,46:1  (AA vraagt 4,5)
       wit op --rood als knopvlak .......... 4,18:1
       --rood als tekst op --papier ........ 3,45:1

     Dus: --rood is voor LIJNEN EN VLAKKEN — de streepjes, de ringen, de randen,
     de verlopen. Zodra er tekst in of op zit, komt er een van deze drie:

       --rood-tekst  rood dat tekst is, op een donkere achtergrond ... 4,82:1
       --rood-vlak   een rood vlak met witte tekst erop ............... 4,97:1
       --rood-diep   hover op zo'n vlak, en rode tekst op --papier .... 5,26:1

     Ze liggen dicht genoeg bij elkaar dat je ze naast elkaar niet ziet, en de
     enige plek waar twee ervan elkaar raken is de knop en zijn hover. */
  --rood-tekst: #fa2a24;
  --rood-vlak:  #e00b12;
  --rood-diep:  #c00a10;

  /* --- het papier eromheen ----------------------------------------------- */
  --zwart:      #0b0a0a;  /* de pagina. Warm: er zit meer rood dan blauw in */
  --zwart-2:    #15120f;  /* kaarten en velden, net los van de achtergrond */
  --zwart-3:    #292019;  /* randen in het donker */
  --papier:     #f2e8d8;  /* de lichte sectie — dezelfde crème, maar als vlak */
  --inkt:       #1a1614;  /* tekst op dat papier */

  /* --- afgeleiden --------------------------------------------------------- */
  --creme-zacht:#a99686;  /* lopende tekst. 6,96:1 op --zwart */
  /* Bijschriften. Dit was #6f6156 en dat haalde 3,13:1 op --zwart-2 — te weinig
     om te lezen, en het staat onder elk bandlid en onder elke foto. */
  --creme-stil: #8a7a6c;  /* 4,78:1 op --zwart, 4,52:1 op --zwart-2 */
  --inkt-zacht: #574c42;  /* lopende tekst op --papier */

  /* De breedte van de pagina.
     >>> DIT IS ÉÉN KEER VERRUIMD, van 72/48 naar 84/58, en de reden staat in
         de mediasectie: een raster met video's en foto's heeft op een gewoon
         scherm ruimte nodig voor drie kolommen, en op 72 rem paste er twee.
         Lopende TEKST is niet meegegroeid — die blijft in .tekst op een ch-maat
         staan, want een regel van honderdtwintig tekens leest niemand. Breder
         betekent hier dus: meer beeld naast elkaar, niet langere regels. */
  --breedte:    84rem;
  --smal:       58rem;
  --kop-hoog:   4.75rem;

  --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Smal en zwaar voor de koppen. Geen webfont: dit zijn namen die op Windows,
     macOS en Linux al aanwezig zijn, en de val eindigt op de gewone schreefloze
     in plaats van op iets willekeurigs. Het handschrift van het logo is een
     plaatje en geen lettertype — er valt hier niets bij te zoeken dat erop
     lijkt, en iets dat er bijna op lijkt is erger dan iets dat er niet op
     lijkt. */
  --schrift-kop: "Archivo Narrow", "Roboto Condensed", "Oswald",
                 "Helvetica Neue Condensed", "Arial Narrow", var(--schrift);

  --soepel: 240ms cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* De vaste balk bovenaan dekt anders de kop af van de sectie waar je net
     naartoe bent gesprongen. */
  scroll-padding-top: calc(var(--kop-hoog) + 1rem);
}

body {
  margin: 0;
  background: var(--zwart);
  color: var(--creme);
  font: 1rem/1.65 var(--schrift);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--rood-tekst); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--creme); }

h1, h2, h3 {
  font-family: var(--schrift-kop);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

h2 { font-size: clamp(2rem, 5.5vw, 3.4rem); }
h3 { font-size: 1.05rem; letter-spacing: .04em; }

/* Zichtbare focus, overal en altijd. Hij wordt nergens weggehaald: een
   toetsenbordbezoeker die niet ziet waar hij staat, kan dit formulier niet
   invullen. */
:focus-visible {
  outline: 2px solid var(--rood);
  outline-offset: 3px;
  border-radius: 2px;
}

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--rood-vlak); color: #fff;
  padding: .7rem 1.1rem; border-radius: 3px; text-decoration: none;
  transition: top var(--soepel);
}
.skip:focus { top: 1rem; color: #fff; }

.binnen { width: min(100% - 2.5rem, var(--breedte)); margin-inline: auto; }
.binnen--smal { width: min(100% - 2.5rem, var(--smal)); }

section { padding: clamp(4rem, 10vw, 7.5rem) 0; }

/* Het opschrift boven elke sectiekop, met een streepje ervoor.
   >>> DAT STREEPJE IS HET LOGO. In het beeldmerk staat aan weerszijden van
       'POP ROCK COVERBAND' een kort rood streepje op dezelfde hoogte als de
       letters. Dit is datzelfde streepje, en het is de reden dat de pagina bij
       het logo hoort in plaats van er alleen onder te staan. */
.opschrift {
  display: flex; align-items: center; gap: .85rem;
  font-family: var(--schrift-kop);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--rood-tekst);
  margin: 0 0 .9rem;
}
.opschrift::before {
  content: "";
  width: 2.25rem; height: 3px;
  background: var(--rood);
  flex: none;
}

.tekst { color: var(--creme-zacht); font-size: 1.08rem; max-width: 58ch; }
.tekst--kort { max-width: 62ch; margin-bottom: 2.5rem; }
.tekst p + p { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.knop {
  display: inline-block;
  font-family: var(--schrift-kop);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  font-size: .95rem;
  padding: .95rem 1.9rem;
  border: 2px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--soepel), color var(--soepel),
              border-color var(--soepel), transform var(--soepel);
}
.knop:active { transform: translateY(1px); }

/* Wit op --rood-vlak, en beide keuzes zijn gemeten. Crème op rood is 3,15:1 —
   deze twee staan in het logo dan ook nooit op elkaar. Wit op het logorood zelf
   is 4,18:1, nog steeds onder AA voor tekst van deze grootte (15 px vet is geen
   'grote tekst': die grens ligt op 18,66 px vet). Wit op --rood-vlak is 4,97:1,
   en dat verschil in rood ziet niemand. */
.knop--rood { background: var(--rood-vlak); border-color: var(--rood-vlak); color: #fff; }
.knop--rood:hover { background: var(--rood-diep); border-color: var(--rood-diep); color: #fff; }

.knop--lijn { border-color: var(--zwart-3); color: var(--creme); }
.knop--lijn:hover { border-color: var(--creme); color: var(--creme); }

.knop[disabled] { opacity: .55; cursor: progress; }

/* --------------------------------------------------------------------------
   Kop en menu
   -------------------------------------------------------------------------- */

.kop {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: transparent;
  transition: background var(--soepel), box-shadow var(--soepel);
}

/* Gezet door de JS zodra er gescrold is. Boven aan de pagina is de balk
   onzichtbaar en staat het logo vrij op de hero. */
.kop--geplakt {
  background: rgba(11, 10, 10, .93);
  box-shadow: 0 1px 0 var(--zwart-3);
}
@supports (backdrop-filter: blur(10px)) {
  .kop--geplakt { background: rgba(11, 10, 10, .74); backdrop-filter: blur(10px); }
}

.kop__binnen {
  width: min(100% - 2.5rem, var(--breedte));
  margin-inline: auto;
  height: var(--kop-hoog);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Het handschrift in de kwastcirkel, zonder tagline — zie badge() in
   tools/make-logo.py.
   >>> DE HOOGTE IS UITGEREKEND EN NIET GEKOZEN. In die badge is het handschrift
       ongeveer de helft van de totale hoogte, dus 3,2 rem houdt de letters op zo'n
       25 pixels — ruimer dan het losse woordmerk hier eerder op 1,9 rem had, en
       dat is nodig: in een ring heeft hetzelfde handschrift meer lucht om zich
       heen nodig om niet dicht te lopen. Op ware grootte naast 2,6 en 3,6 gezet.
       Kleiner en de letters in de ring vallen weg; groter en de badge raakt de
       onder- en bovenkant van de balk (die is 4,75 rem). */
.kop__logo img { height: 3.2rem; width: auto; }

.menu { display: flex; align-items: center; gap: 2rem; }
.menu a {
  font-family: var(--schrift-kop);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .9rem; font-weight: 700;
  color: var(--creme); text-decoration: none;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
  transition: color var(--soepel), border-color var(--soepel);
}
.menu a:hover { color: var(--rood-tekst); }
/* Gezet door de JS: welke sectie op dit moment in beeld is. */
.menu a[aria-current="true"] { border-bottom-color: var(--rood); }

.menu__cta {
  background: var(--rood-vlak); color: #fff;
  padding: .6rem 1.2rem; border-radius: 2px; border-bottom: 0;
}
.menu__cta:hover { background: var(--rood-diep); color: #fff; }
.menu__cta[aria-current="true"] { border-bottom-color: transparent; }

/* De hamburger. Drie strepen uit één element: de middelste is het element zelf,
   de andere twee zijn ::before en ::after. */
.kop__knop {
  display: none;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  position: relative;
}
.kop__streep,
.kop__streep::before,
.kop__streep::after {
  position: absolute; left: .5rem; width: 1.75rem; height: 2px;
  background: var(--creme);
  transition: transform var(--soepel), opacity var(--soepel);
}
.kop__streep { top: calc(50% - 1px); }
.kop__streep::before { content: ""; left: 0; top: -.55rem; }
.kop__streep::after  { content: ""; left: 0; top:  .55rem; }

[aria-expanded="true"] .kop__streep { background: transparent; }
[aria-expanded="true"] .kop__streep::before { transform: translateY(.55rem) rotate(45deg); }
[aria-expanded="true"] .kop__streep::after  { transform: translateY(-.55rem) rotate(-45deg); }

@media (max-width: 46rem) {
  .kop__knop { display: block; }

  .menu {
    position: fixed; inset: var(--kop-hoog) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--zwart);
    border-bottom: 1px solid var(--zwart-3);
    padding: .5rem 1.25rem 1.5rem;
    /* Dicht: weggeklapt en niet aan te tabben. visibility is wat dat laatste
       doet — alleen een hoogte van 0 laat de links focusbaar achter, en dan
       springt de pagina naar iets dat niemand kan zien. */
    transform: translateY(-.5rem);
    opacity: 0; visibility: hidden;
    transition: transform var(--soepel), opacity var(--soepel), visibility var(--soepel);
  }
  .menu.menu--open { transform: none; opacity: 1; visibility: visible; }

  .menu a { padding: .95rem .25rem; border-bottom: 1px solid var(--zwart-3); }
  .menu a[aria-current="true"] { color: var(--rood-tekst); }
  .menu__cta { margin-top: 1rem; text-align: center; border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(100svh, 52rem);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--kop-hoog) + 3rem) 1.25rem 5rem;
  overflow: hidden;
}

/* De gloed achter het beeldmerk. Drie radiale verlopen en verder niets: geen
   afbeelding om te laden, en het schaalt naar elk scherm.
   De onderste is oranje en niet rood — dat is de kleur die een zaallamp op een
   zwarte achtergrond achterlaat, en het is wat het zwart hier warm houdt in
   plaats van het in twee rode vlekken te veranderen. */
.hero__achtergrond {
  position: absolute; inset: 0;
  background:
    radial-gradient(64% 52% at 50% 40%, rgba(247, 13, 20, .20), transparent 70%),
    radial-gradient(120% 70% at 50% 116%, rgba(255, 106, 26, .13), transparent 62%),
    radial-gradient(90% 60% at 50% 0%, rgba(247, 13, 20, .07), transparent 60%),
    var(--zwart);
}
/* De lijn onderaan, zodat de hero niet zomaar ophoudt. */
.hero__achtergrond::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rood), transparent);
  opacity: .55;
}

.hero__binnen { position: relative; max-width: 54rem; }

.hero__logo {
  width: min(100%, 36rem);
  margin: 0 auto 2.25rem;
  /* Een zachte schaduw eronder, zodat het beeldmerk van de gloed loskomt zonder
     dat er een kader omheen hoeft. */
  filter: drop-shadow(0 1.25rem 2.5rem rgba(0, 0, 0, .55));
}

/* De tagline staat IN het beeldmerk. Deze regel herhaalt hem dus niet — hij
   zegt het enige wat een logo niet kan zeggen. */
.hero__regel {
  font-family: var(--schrift-kop);
  font-size: clamp(1.05rem, 2.6vw, 1.55rem);
  line-height: 1.45;
  color: var(--creme);
  margin: 0 auto 2.4rem;
  max-width: 40ch;
}

.hero__knoppen { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* Het pijltje onderaan. Een blokje dat op zijn punt staat en zachtjes op en
   neer gaat — genoeg om te laten zien dat er onder de vouw meer is. */
.hero__pijl {
  position: absolute; bottom: 1.75rem; left: 50%;
  translate: -50% 0;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
}
.hero__pijl span {
  width: .7rem; height: .7rem;
  border-right: 2px solid var(--creme-stil);
  border-bottom: 2px solid var(--creme-stil);
  rotate: 45deg;
  animation: wip 2.4s ease-in-out infinite;
}
.hero__pijl:hover span { border-color: var(--rood); }

@keyframes wip {
  0%, 100% { transform: translateY(-.2rem); opacity: .5; }
  50%      { transform: translateY(.25rem); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Band
   -------------------------------------------------------------------------- */

.leden {
  list-style: none; padding: 0; margin: 3rem 0 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.lid {
  background: var(--zwart-2);
  border: 1px solid var(--zwart-3);
  border-radius: 3px;
  padding: 1.6rem 1.25rem;
  text-align: center;
  transition: border-color var(--soepel), transform var(--soepel);
}
.lid:hover { border-color: var(--rood); transform: translateY(-3px); }

/* De plek waar straks een foto komt. Tot die er is: de eerste letter van het
   instrument in een rode ring — dezelfde ring als om het beeldmerk, en dat is
   waarom dit geen willekeurige cirkel is. */
.lid__initiaal {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem;
  border: 2px solid var(--rood); border-radius: 50%;
  font-family: var(--schrift-kop); font-size: 1.5rem; font-weight: 800;
  color: var(--rood-tekst);
}
.lid h3 { margin-bottom: .35rem; }
.lid p { margin: 0; color: var(--creme-stil); font-size: .92rem; }

/* --------------------------------------------------------------------------
   Beeld — de lichte sectie, op hetzelfde crème als de letters
   --------------------------------------------------------------------------
   HIER STOND HET REPERTOIRE, en de agenda eronder. Die zijn weg; wat de band
   speelt hoor je in de demo, en waar ze staan vertelt een bericht.

   De sectie blijft LICHT, en dat is niet uit gewoonte: de pagina gaat donker,
   donker, licht, donker, en die ene lichte band is wat hem van een lange zwarte
   pagina onderscheidt. Foto's staan er bovendien beter op — een crèmekleurig
   vlak is een passe-partout, en zwart om een foto heen laat elke donkere hoek
   erin weglopen.

   De kleuren op dit papier gaan de andere kant op dan in het donker: het
   logorood haalt hier 3,45:1 en --rood-tekst nog minder (die is lichter gemaakt
   voor een zwarte achtergrond). --rood-diep haalt 5,26:1 en is dus wat de TEKST
   doet; de randen en de knoppen blijven het logorood, want een lijn heeft 3:1
   nodig en haalt dat. */

.media { background: var(--papier); color: var(--inkt); }
.media .tekst { color: var(--inkt-zacht); }
.media .opschrift { color: var(--rood-diep); }
.media a { color: var(--rood-diep); }
.media__leeg { color: var(--inkt-zacht); font-size: 1.08rem; max-width: 52ch; }

/* Het raster. minmax(21rem, 1fr) met auto-fill: op een telefoon één kolom, op
   een laptop twee, en op een breed scherm drie — en dát is waar de pagina voor
   verbreed is. Onder de 21 rem wordt een foto van 16:9 te klein om iets op te
   zien. */
.berichten {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  margin-top: 2.5rem;
}

.bericht {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .55);
  border-left: 3px solid var(--rood);
  border-radius: 0 3px 3px 0;
  overflow: hidden;
  transition: background var(--soepel), transform var(--soepel);
}
.bericht:hover { background: #fff; transform: translateY(-3px); }

/* Alle beeld op 16:9, gevuld en bijgesneden. Zonder deze twee regels bepaalt de
   eerste foto de hoogte van zijn kaart en staat het raster scheef. */
.bericht__beeld img,
.bericht__video img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--zwart-2);
}

.bericht__tekst { padding: 1.25rem 1.4rem 1.5rem; }
.bericht__tekst h3 { font-size: 1.15rem; letter-spacing: .01em; text-transform: none; }
.bericht__tekst p { margin: .6rem 0 0; color: var(--inkt-zacht); font-size: .98rem; }

.bericht__datum {
  margin: .1rem 0 0 !important;
  font-family: var(--schrift-kop);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; font-weight: 700;
  color: var(--rood-diep) !important;
}

/* --- de video ------------------------------------------------------------
   >>> WAT HIER STAAT IS EEN FOTO MET EEN KNOP EROP, EN GEEN VIDEO. Er wordt
       niets van YouTube geladen tot iemand erop drukt; pas dan zet
       2ndbest.js het iframe neer. Zonder JavaScript is het een gewone link
       naar YouTube — ook dan laadt deze pagina niets van buiten. */
.video {
  position: relative; display: block;
  background: var(--zwart);
}
.video__knop {
  position: absolute; inset: 0; margin: auto;
  width: 4.25rem; height: 4.25rem;
  border-radius: 50%;
  background: var(--rood-vlak);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45);
  transition: background var(--soepel), transform var(--soepel);
}
/* Het driehoekje, uit randen — geen pictogramlettertype om te laden. */
.video__knop::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-style: solid;
  border-width: .62rem 0 .62rem 1rem;
  border-color: transparent transparent transparent #fff;
  translate: .15rem 0;   /* een driehoek staat optisch links van zijn doos */
}
.video:hover .video__knop { background: var(--rood-diep); transform: scale(1.06); }

/* Het iframe dat de JS na de klik neerzet. */
.video__speler { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video__speler iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- de rij kleine foto's onder een bericht --- */
.strip {
  list-style: none; padding: 0;
  margin: 1.1rem 0 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.strip img {
  width: 4.75rem; height: 4.75rem; object-fit: cover;
  border-radius: 2px;
  transition: transform var(--soepel);
}
.strip a:hover img { transform: scale(1.05); }

/* --- de lichtbak ---------------------------------------------------------
   Een foto groot, met de bijschrift eronder. Gemaakt door de JS; zonder JS
   opent dezelfde link gewoon de foto zelf, en dat is ook goed. */
.lichtbak {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  gap: 1rem;
  padding: 2rem 1.25rem 3rem;
  background: rgba(11, 10, 10, .95);
}
.lichtbak img {
  max-width: min(100%, 78rem); max-height: 80vh;
  width: auto; object-fit: contain;
  border-radius: 2px;
}
.lichtbak__bijschrift {
  margin: 0; color: var(--creme-zacht); font-size: .95rem; text-align: center;
  max-width: 60ch;
}
.lichtbak__sluit {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.75rem; height: 2.75rem;
  background: transparent; border: 2px solid var(--zwart-3); border-radius: 50%;
  color: var(--creme); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.lichtbak__sluit:hover { border-color: var(--rood); color: var(--rood-tekst); }

/* --------------------------------------------------------------------------
   Boeken
   -------------------------------------------------------------------------- */

.boeken { background: var(--zwart-2); }

.boeken__raster {
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .boeken__raster { grid-template-columns: 1fr 1.15fr; align-items: start; }
}

.contactlijst { list-style: none; padding: 0; margin: 2.25rem 0 0; }
.contactlijst li {
  display: flex; gap: .75rem; align-items: baseline;
  padding: .7rem 0; border-top: 1px solid var(--zwart-3);
}
.contactlijst span {
  font-family: var(--schrift-kop);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; font-weight: 700; color: var(--creme-stil);
  min-width: 5rem;
}

/* --- het formulier --- */

.formulier {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  background: var(--zwart);
  border: 1px solid var(--zwart-3);
  border-radius: 3px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.veld { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .4rem; }
.veld--half { grid-column: span 1; }
@media (max-width: 34rem) { .veld--half { grid-column: 1 / -1; } }

.veld label {
  font-family: var(--schrift-kop);
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .74rem; font-weight: 700; color: var(--creme-zacht);
}
.veld label span { color: var(--rood-tekst); }

.veld input,
.veld select,
.veld textarea {
  font: inherit;
  color: var(--creme);
  background: var(--zwart-2);
  border: 1px solid var(--zwart-3);
  border-radius: 2px;
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color var(--soepel), background var(--soepel);
}
.veld textarea { resize: vertical; min-height: 7rem; }
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: var(--creme-stil); }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--rood); }

/* Gezet door de JS bij een veld dat de browser afkeurt, en weer weggehaald
   zodra de bezoeker het aanpast. Niet :invalid — dat kleurt elk verplicht veld
   rood zodra de pagina laadt, dus voordat er iets fout is gegaan. */
.veld--fout input,
.veld--fout textarea { border-color: var(--rood); background: rgba(247, 13, 20, .07); }

/* De honeypot. Uit beeld, niet weg: display:none wordt door een deel van de
   bots overgeslagen, en dan vult niemand hem in en vangt hij niets. */
.lokaas {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.formulier button[type="submit"] { grid-column: 1 / -1; justify-self: start; }

.formulier__status {
  grid-column: 1 / -1; margin: 0;
  font-size: .95rem;
  min-height: 1.5rem;
}
/* Warm groen: het enige niet-merkkleurtje op de pagina, en het is er omdat
   'gelukt' en 'mislukt' niet allebei rood mogen zijn. */
.formulier__status--goed { color: #7bc98f; }
.formulier__status--fout { color: var(--rood-tekst); }

.formulier__klein { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--creme-stil); }

/* --------------------------------------------------------------------------
   Voet
   -------------------------------------------------------------------------- */

.voet { padding: 3.5rem 0; border-top: 1px solid var(--zwart-3); text-align: center; }
.voet__binnen { display: grid; gap: 1rem; justify-items: center; }
/* Ook hier het handschrift en niet het hele beeldmerk, en dat is gemeten en
   niet gevoeld.
   >>> DE TAGLINE IN HET BEELDMERK IS ONLEESBAAR ONDER ONGEVEER 26 REM BREED.
       In het bronbestand is 'POP ROCK COVERBAND' twintig pixels hoog op 639
       breed, dus onder die maat zakt de kapitaalhoogte naar zes pixels of
       minder en wordt het een grijze veeg onder de letters. De hero heeft 32
       rem en kan het hele beeldmerk dus dragen; een voet van negen rem niet.
       Wie hier het hele beeldmerk terugzet, moet hem ook driemaal zo groot
       maken. */
.voet__logo { width: 9rem; opacity: .9; }
.voet__regel { margin: 0; color: var(--creme-zacht); font-size: .95rem; }
.voet__klein { margin: 0; color: var(--creme-stil); font-size: .82rem; }

/* --------------------------------------------------------------------------
   Binnenkomen
   --------------------------------------------------------------------------
   Alles met data-reveal begint een klein stukje lager en doorzichtig, en de JS
   haalt dat weg zodra het in beeld komt.

   >>> DIT STAAT IN EEN :root.js-REGEL, en dat is niet netjesheid maar een
       vereiste: zonder JavaScript zet niemand die klasse ooit terug, en dan is
       de halve pagina onzichtbaar. De JS zet .js op <html> als eerste wat hij
       doet, dus zonder JS geldt hier niets. */

:root.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .3, 1);
}
:root.js [data-reveal].zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Geen uitzonderingen: alles wat nog beweegt, houdt hier op. De pagina werkt
     verder precies hetzelfde. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  :root.js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   De speler
   --------------------------------------------------------------------------
   De lijst en de balk eronder worden door de JS opgebouwd; wat hier staat is de
   opmaak ervan. Er is GEEN <audio controls> in deze site, en dat is geen
   smaakkwestie: in de ingebouwde speler van elke browser zit een menu met
   'downloaden' erin. Eigen knoppen betekent geen downloadknop. Zie de kop van
   app/player.php voor wat dat wel en niet oplevert. */

.speler {
  margin-top: 2.5rem;
  background: var(--zwart-2);
  border: 1px solid var(--zwart-3);
  border-radius: 3px;
  padding: .5rem .5rem .25rem;
}

.speler__melding {
  margin: 0; padding: 1rem;
  color: var(--creme-stil); font-size: .95rem;
}
.speler__melding--fout { color: var(--rood-tekst); }

/* --- de nummers --- */

.speler__lijst { list-style: none; margin: 0; padding: 0; }

.spoor {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  gap: .9rem; align-items: center;
  padding: .55rem .6rem;
  border-radius: 2px;
  transition: background var(--soepel);
}
.spoor + .spoor { border-top: 1px solid var(--zwart-3); }
.spoor:hover { background: rgba(240, 221, 194, .04); }

/* Het nummer dat nu klinkt. De rode rand links is hetzelfde streepje als bij
   een sectiekop en links van een bericht. */
.spoor[aria-current="true"] {
  background: rgba(247, 13, 20, .07);
  box-shadow: inset 3px 0 0 var(--rood);
}

.spoor__knop {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: transparent;
  border: 2px solid var(--zwart-3);
  border-radius: 50%;
  color: var(--creme);
  cursor: pointer;
  transition: border-color var(--soepel), background var(--soepel), color var(--soepel);
}
.spoor__knop:hover { border-color: var(--rood); color: var(--rood-tekst); }
.spoor[aria-current="true"] .spoor__knop { border-color: var(--rood); }

/* Het driehoekje en het pauzeteken, uit randen en randen alleen — geen
   pictogramletterype om te laden, en het schaalt mee met de knop. */
.spoor__icoon {
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: .42rem 0 .42rem .68rem;
  border-color: transparent transparent transparent currentColor;
  margin-left: .18rem;   /* een driehoek staat optisch links van zijn doos */
}
.spoor__knop[aria-pressed="true"] .spoor__icoon {
  width: .62rem; height: .72rem;
  border-width: 0 0 0 .22rem;
  border-color: currentColor;
  border-right: .22rem solid currentColor;
  margin-left: 0;
  background: transparent;
}

.spoor__wat { display: flex; flex-direction: column; min-width: 0; }
.spoor__wat b {
  font-size: 1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spoor__wat span { color: var(--creme-stil); font-size: .88rem; }

.spoor__duur {
  font-family: var(--schrift-kop);
  font-variant-numeric: tabular-nums;
  font-size: .9rem; font-weight: 700;
  color: var(--creme-stil);
}

/* --- de balk onder de lijst --- */

.speler__balk {
  display: grid;
  grid-template-columns: auto 3.2rem 1fr 3.2rem;
  gap: .75rem; align-items: center;
  padding: .85rem .6rem .95rem;
  border-top: 1px solid var(--zwart-3);
  margin-top: .35rem;
}

.speler__tijd {
  font-family: var(--schrift-kop);
  font-variant-numeric: tabular-nums;   /* anders springt de balk bij elke seconde */
  font-size: .82rem; font-weight: 700;
  color: var(--creme-zacht);
  text-align: center;
}

/* Een echte range-input en geen div met een klikhandler: daarmee werkt slepen,
   werken de pijltjestoetsen, en weet een schermlezer wat het is. De opmaak moet
   dan wel per browser apart, want de duim en de baan hebben elk hun eigen
   pseudo-element. */
.speler__schuif {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1.25rem;
  background: transparent;
  cursor: pointer;
}
.speler__schuif::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: var(--zwart-3);
}
.speler__schuif::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: var(--zwart-3);
}
/* Het deel dat al geweest is. Alleen Firefox kan dit met een pseudo-element;
   in de andere browsers zet de JS een verloop op de achtergrond van de baan. */
.speler__schuif::-moz-range-progress {
  height: 4px; border-radius: 2px;
  background: var(--rood);
}
.speler__schuif::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: .95rem; height: .95rem; margin-top: -.3rem;
  border-radius: 50%; border: 0;
  background: var(--creme);
}
.speler__schuif::-moz-range-thumb {
  width: .95rem; height: .95rem;
  border-radius: 50%; border: 0;
  background: var(--creme);
}
.speler__schuif:hover::-webkit-slider-thumb { background: #fff; }
.speler__schuif:hover::-moz-range-thumb { background: #fff; }
.speler__schuif[disabled] { cursor: default; opacity: .5; }

.speler__groot {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: var(--rood-vlak);
  border: 0; border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background var(--soepel);
}
.speler__groot:hover { background: var(--rood-diep); }
.speler__groot[disabled] { background: var(--zwart-3); cursor: default; }

@media (max-width: 30rem) {
  .spoor { grid-template-columns: 2.4rem 1fr auto; gap: .6rem; }

  /* De schuif op een eigen regel: naast de knop en twee tijden blijft er op een
     telefoon een baan van twee centimeter over.
     Met grid-template-areas en niet met marges: de eerste versie hiervan trok
     de eindtijd met een negatieve marge omhoog, en die kwam dan over de baan
     heen te liggen. */
  .speler__balk {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "knop   nu     totaal"
      "schuif schuif schuif";
    row-gap: .35rem;
  }
  .speler__groot { grid-area: knop; }
  .speler__schuif { grid-area: schuif; }
  /* Van de drie kinderen zijn twee een <span> en één een <input>, dus
     :first-of-type en :last-of-type wijzen hier precies de twee tijden aan. */
  .speler__balk .speler__tijd:first-of-type { grid-area: nu; text-align: left; }
  .speler__balk .speler__tijd:last-of-type { grid-area: totaal; text-align: right; }
}