@charset "UTF-8";

/* ==========================================================================
   Leuster, Stichting Urker Lied
   Eén stylesheet, geen build-stap. Volgorde: fonts, tokens, basis, patronen,
   secties, beweging. Modificatoren sturen custom properties aan in plaats van
   dezelfde eigenschap opnieuw te declareren, zodat er geen specificiteits-
   gevechten ontstaan tussen .section en .section--album.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts, zelf gehost
   Niet via Google Fonts: dat is een extra DNS-lookup en TLS-handshake vóór de
   eerste tekst, en het stuurt het IP-adres van elke Nederlandse bezoeker naar
   een server buiten de EU. Beide bestanden staan op ons eigen domein.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Jacques Francois";
  src: url("../fonts/jacques-francois-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Archivo is een variabele font: één bestand voor 400 tot 600. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Kleur: overgenomen uit Figma, met één toevoeging.
     De zuiderzee-tint zit niet in het ontwerp maar is de kleur die in beide
     hero-foto's de halve beeldvlakte vult, en die als blauwe rand in het logo
     is meegetekend. Zonder een koele tegenkleur wordt een palet van uitsluitend
     crème en terracotta al snel één warme brij; deze tint geeft de lijnen,
     de focusrand en de hover-toestanden iets om tegen af te steken. */
  --paper: #ffeee2;
  --paper-warm: #fae4d5;
  --paper-card: #ffffff;
  --ink: #323232;
  --ink-soft: #665c56;
  --ink-deep: #1e1e1d;
  --terracotta: #bc725b;
  --terracotta-deep: #9d4f37;
  /* Het terracotta uit Figma haalt met witte tekst erop 3,69:1, onder de
     WCAG-ondergrens van 4,5:1. Voor gevulde knoppen daarom een fractie
     dieper: 4,9:1, zichtbaar dezelfde kleur. De lichte variant blijft in
     gebruik voor randen en accenten, waar geen tekst overheen staat. */
  --terracotta-solid: #a85b41;
  --slate: #383030;
  --zuiderzee: #24455e;
  --zuiderzee-soft: #4e7391;

  /* Typografie */
  --font-display: "Jacques Francois", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* 17px basis in plaats van 16px. Dit publiek is gemiddeld ouder dan dat van
     een doorsnee productsite; twee punten schelen daar meer dan ze kosten. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-md: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
  --text-lg: clamp(1.35rem, 1vw + 1.1rem, 1.6rem);
  --text-xl: clamp(1.9rem, 2.4vw + 1.2rem, 2.75rem);

  --tracking-label: 0.16em;
  --leading-tight: 1.08;
  --leading-body: 1.65;

  /* Ruimte: ruim opgezet; dit is een presentatiesite, geen dashboard. */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: clamp(4.5rem, 9vw, 8rem);

  /* 1064 px inhoudskolom met 56 px marge. Bij een venster van 1280 px komt de
     linkerrand daarmee precies op 108 px uit, gelijk aan Figma. Alles hangt aan
     deze twee waarden: het logo in de balk, de knoppen in de hero en elke
     sectie eronder. */
  --shell: 66.5rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

  --radius-sm: 3px;
  --radius: 10px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgb(50 40 34 / 6%), 0 12px 28px -18px rgb(50 40 34 / 45%);
  --shadow-lift: 0 2px 4px rgb(50 40 34 / 8%), 0 26px 46px -22px rgb(50 40 34 / 50%);

  /* Beweging. Één curve voor alles wat binnenkomt, één kortere voor alles wat
     reageert op een aanwijzer. Consistente timing leest als vakwerk; een
     verzameling losse durations leest als toeval. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid: 420ms;
  --dur-slow: 760ms;

  --slide-hold: 6800ms;
  --slide-fade: 1300ms;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   3. Reset en basis
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compenseert de vaste header bij het springen naar een anker. */
  scroll-padding-top: 6rem;
}

body {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

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

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

/* Zichtbare focus, altijd. Een focusrand weghalen omdat hij "lelijk" is, maakt
   de site onbruikbaar voor iedereen die met het toetsenbord navigeert. */
:focus-visible {
  outline: 2px solid var(--zuiderzee);
  outline-offset: 3px;
  border-radius: 2px;
}

.hero :focus-visible,
.sleeve :focus-visible,
.cdhead :focus-visible,
.callout :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--paper);
}

::selection {
  background: var(--terracotta);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  /* Jacques François heeft een hoge streekcontrast en oogt bij grote formaten
     te los; iets negatieve spatiëring haalt hem weer bij elkaar. */
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* De ruimte tussen twee labels doet het scheiden. Er stond eerst een streepje
   tussen; dat las als een liggend streepje in de tekst en moest eraf. Alleen
   de eyebrow op /contact heeft twee labels, dus de gap valt verder nergens op. */
.eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--terracotta-deep);
  margin-block-end: var(--sp-2);
}

.lead {
  font-size: var(--text-md);
  max-width: 56ch;
  color: var(--ink-soft);
}

.prose p + p {
  margin-block-start: var(--sp-2);
}

/* De leesregel begrenzen. In het ontwerp liep de lopende tekst over de volle
   1064 px, rond de 140 tekens per regel, waar 60 tot 75 comfortabel is. */
.prose {
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   5. Hulpmiddelen
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Houder voor SVG-filters die vanuit CSS worden aangeroepen. Niet
   display: none, want dan werken de filters in Safari niet meer. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink-deep);
  color: var(--paper);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* De filmkorrel. Statisch en licht: genoeg om het vlakke digitale wit te
   breken, te weinig om als effect op te vallen. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   6. Knoppen
   Alle varianten delen dezelfde doos en verschillen alleen in kleur, zodat de
   raakvlakken overal minstens 44 px hoog zijn.
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.875rem;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.045em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn svg {
  flex: none;
}

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

.btn:active {
  transform: translateY(0);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  --btn-bg: var(--terracotta-solid);
  --btn-fg: #fff;
  --btn-border: var(--terracotta-solid);
}

.btn--primary:hover {
  --btn-bg: var(--terracotta-deep);
  --btn-border: var(--terracotta-deep);
}

.btn--outline {
  --btn-fg: var(--terracotta-deep);
  --btn-border: color-mix(in srgb, var(--terracotta) 55%, transparent);
}

.btn--outline:hover {
  --btn-bg: var(--terracotta);
  --btn-fg: #fff;
  --btn-border: var(--terracotta);
}

.btn--on-dark {
  --btn-fg: var(--paper);
  --btn-border: color-mix(in srgb, var(--paper) 40%, transparent);
}

.btn--on-dark:hover {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-border: var(--paper);
}

.btn--quiet {
  --btn-fg: currentColor;
  padding-inline: 0.35rem;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.btn--quiet:hover {
  text-decoration-color: currentColor;
}

.btn--block {
  width: 100%;
}

.btn--sm {
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   7. Header
   Ligt over de hero en wordt pas een balk zodra je eronderuit scrollt.
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  padding-block: clamp(0.6rem, 1.6vw, 1.15rem);
  transition: background-color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    padding var(--dur-mid) var(--ease-out);
}

/* Twee toestanden met dezelfde opmaak, met een verschillende aanleiding.
   `is-stuck` zet het script zodra je onder de hero bent. `--solid` staat er
   vanaf het begin op elke pagina zonder hero: daar zou de doorzichtige balk
   witte tekst met een slagschaduw op crème papier zetten, en dat is
   onleesbaar tot je toevallig een stukje scrolt. */
.site-header.is-stuck,
.site-header--solid {
  padding-block: 0.55rem;
}

/* Het matglas ligt op een pseudo-element en niet op de balk zelf.

   Reden: `backdrop-filter` maakt van het element waar het op staat het
   containing block voor nakomelingen met `position: fixed`. Het schermvullende
   menu staat in de balk, dus zodra de balk bij het scrollen dichtklapte kromp
   dat menu van het hele venster naar precies de hoogte van de balk: 812 px
   werd 63 px. Bovenaan de pagina werkte het menu daardoor wel en eronder niet.

   Op een pseudo-element blijft de balk er hetzelfde uitzien, maar houdt het
   menu het venster als containing block. Verplaats dit filter dus niet terug
   naar `.site-header`. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--zuiderzee) 16%, transparent);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}

/* De vervaging staat alleen in deze regel: zo draait een telefoon geen
   blurlaag mee zolang de balk toch doorzichtig is. Net als voorheen zet hij in
   één keer aan terwijl de tint indraait; `backdrop-filter` stond ook eerder
   niet in de transitie. */
.site-header.is-stuck::before,
.site-header--solid::before {
  opacity: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Boven het matglas, anders dekt de pseudo-element-laag logo en menuknop af. */
.site-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Boven de hero volgt de balk het beeldvlak in plaats van de inhoudskolom.
   De knop in het beeld staat op 8,44% van links; staat het logo in de balk op
   de gewone marge, dan lopen die twee op een breed scherm zichtbaar uit
   elkaar. Vandaar dezelfde rekensom als .hero__stage: op een staand scherm is
   de afbeelding zo breed als het venster, tenzij de hoogte eerder op is. Op
   een liggend scherm vult ze het venster en zet de mediaregel in sectie 8
   --stage-w daarom op 100%.

   Alleen zolang de balk doorzichtig is. Zodra hij dichtklapt hoort hij weer
   bij de tekst eronder, en die volgt de gewone kolom. */
.page-home .site-header:not(.is-stuck) .site-header__inner {
  /* Let op: een procentuele padding rekent tegen de containing block, niet
     tegen de eigen breedte. `padding-inline: 8.4375%` zou dus 8,4% van het
     vénster pakken in plaats van van de balk. Vandaar de breedte in een
     variabele en de marge daaruit berekend. */
  --stage-w: min(100%, calc(100svh * var(--hero-ar)));

  width: var(--stage-w);
  max-width: none;
  padding-inline: calc(var(--stage-w) * 0.084375);
}

.site-header__brand {
  display: block;
  flex: none;
  line-height: 0;
}

/* Geen verloopvlak achter de navigatie meer. In plaats daarvan de slagschaduw
   die in Figma op de menu-items staat: 4px 4px 5px rgba(0,0,0,.25). Die houdt
   de tekst leesbaar tegen de lucht zonder de foto af te dekken. */
.site-header__brand img {
  width: clamp(7rem, 15.4vw, 12.5rem);
  height: auto;
  filter: drop-shadow(4px 4px 5px rgb(0 0 0 / 25%));
  transition: width var(--dur-mid) var(--ease-out);
}

.site-header.is-stuck .site-header__brand img,
.site-header--solid .site-header__brand img {
  width: clamp(6rem, 10vw, 8.5rem);
  filter: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.6rem);
}

.site-nav__link {
  position: relative;
  display: block;
  padding: 0.7rem 0.5rem;
  font-family: var(--font-display);
  /* 24 px bij een venster van 1280, gelijk aan Figma. */
  font-size: clamp(1.05rem, 1.875vw, 1.75rem);
  color: #fff;
  text-shadow: 4px 4px 5px rgb(0 0 0 / 25%);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

/* De onderstreping groeit vanuit het midden, dezelfde beweging als de
   horizonlijn die zich bij het inscrollen opent. */
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0.45rem;
  inset-inline: 0.5rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-mid) var(--ease-out);
}

.site-nav__link:hover::after,
.site-nav__link.is-current::after {
  transform: scaleX(1);
}

.site-header.is-stuck .site-nav__link,
.site-header--solid .site-nav__link {
  color: var(--ink);
  text-shadow: none;
}

.site-header.is-stuck .site-nav__link:hover,
.site-header.is-stuck .site-nav__link.is-current,
.site-header--solid .site-nav__link:hover,
.site-header--solid .site-nav__link.is-current {
  color: var(--terracotta-deep);
}

/* Vanaf 60rem staat de balk uitgeschreven; daaronder neemt de menuknop het over
   en verdwijnt het logo uit de balk (zie de mediaregel onderaan deze sectie).
   Alleen in dat uitgeschreven bereik gelden de maten uit Figma, zodat de smalle
   weergave (ook die zonder JavaScript) precies blijft zoals hij was.

   In Figma meet het kader 1280 breed. Daarop is het logo 305 px en de tekst in
   het menu 24 px. Beide houden daar hun plafond: boven 1280 groeien ze niet
   verder mee, anders wordt de balk op een breed scherm zwaarder dan het beeld
   eronder. */
@media (width >= 60rem) {
  /* 305 / 1280 = 23,83vw. */
  .site-header__brand img {
    width: min(23.83vw, 305px);
  }

  /* 24 / 1280 = 1,875vw. Stond eerder op 1,75rem (28 px) als plafond; naast het
     grotere logo werden de items daarmee te zwaar. */
  .site-nav__link {
    font-size: min(1.875vw, 1.5rem);
  }
}

/* Menuknop, alleen op smalle schermen. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  border: 0;
  background: none;
  color: #fff;
  text-shadow: 4px 4px 5px rgb(0 0 0 / 25%);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.nav-toggle__bars i {
  box-shadow: 3px 3px 4px rgb(0 0 0 / 25%);
}

.site-header.is-stuck .nav-toggle,
.site-header--solid .nav-toggle {
  color: var(--ink);
  text-shadow: none;
}

.site-header.is-stuck .nav-toggle__bars i,
.site-header--solid .nav-toggle__bars i {
  box-shadow: none;
}

.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 22px;
}

.nav-toggle__bars i {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

@media (width < 60rem) {
  .js .nav-toggle {
    display: inline-flex;
  }

  /* Op smal scherm is de balk niets anders meer dan de menuknop. Het logo staat
     al groot in de staande hero eronder, en een tweede keer in de balk kost
     vooral breedte. Met het logo weg is de knop het enige element dat nog in de
     rij staat (het menu ligt als overlay buiten de flow), dus centreren we de
     hele rij. "Home" blijft bereikbaar via de eerste link in het menu.

     Let op: een smal maar liggend venster (een telefoon in landschap, een klein
     browservenster) krijgt de liggende hero, en daar staat het woordmerk sinds
     augustus 2026 niet meer in. Op zo'n scherm is de merknaam dus nergens te
     zien. Wil je dat verhelpen, dan is dit de plek: laat het logo staan zolang
     de staande hero niet geldt.

     Beide regels hangen aan `.js`, net als de knop zelf: zonder JavaScript
     blijft de gewone balk met logo en uitgeschreven navigatie staan. */
  .js .site-header__brand {
    display: none;
  }

  .js .site-header__inner {
    justify-content: center;
  }

  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--ink-deep) 97%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-mid) var(--ease-out),
      visibility var(--dur-mid) var(--ease-out);
  }

  .js .site-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .js .site-nav__list {
    flex-direction: column;
    gap: var(--sp-2);
    text-align: center;
  }

  .js .site-nav__link,
  .js .site-header.is-stuck .site-nav__link,
  .js .site-header--solid .site-nav__link {
    padding: 0.6rem 1.5rem;
    font-size: var(--text-lg);
    color: var(--paper);
  }

  /* Staat het menu open, dan ligt het donkere vlak over de balk heen. De knop
     staat daar bovenop en moet dus licht blijven, ook op een dichtgeklapte of
     effen balk waar hij normaal inktzwart is. */
  .js .nav-toggle[aria-expanded="true"],
  .js .site-header.is-stuck .nav-toggle[aria-expanded="true"],
  .js .site-header--solid .nav-toggle[aria-expanded="true"] {
    color: var(--paper);
    text-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   8. Hero
   Twee vlakken die in elkaar overvloeien. Zie hero.php.
   -------------------------------------------------------------------------- */

/* Elke dia is één platte afbeelding uit Figma: foto, sluier, uitsnede en het
   donkere verloop onderaan zitten er al in. Het woordmerk staat er in de
   liggende versie niet meer in; dat staat nu in de balk. */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  /* Het volledige scherm zoals het er bij het openen uitziet: svh rekent met
     de adresbalk zichtbaar.

     Hier stond eerst dvh, en dat is op een telefoon precies verkeerd. Chrome
     en Safari schuiven hun balken weg zodra je naar beneden scrolt en terug
     zodra je omhoog gaat. Bij dvh groeit en krimpt de hero dan mee, en met de
     hero de hele pagina eronder: de tekst schuift op en neer terwijl je leest.
     Met svh staat de hoogte vast. Wat je wint als de balk wegschuift, is
     gewoon een stukje extra pagina onderaan, precies wat er hoort te gebeuren
     als je scrolt. */
  height: 100vh;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: var(--ink-deep);
}

/* Het beeldvlak op een stáánd scherm: exact de verhouding van het Figma-kader,
   passend binnen de hero. Bijsnijden kan daar niet: het woordmerk zit vást in
   de staande dia's en elke uitsnede zou de merknaam doorsnijden.

   `container-type: inline-size` maakt cqw beschikbaar: 1cqw is 1% van de
   breedte van dít vlak. Daarmee schalen de knoppen mee met de afbeelding in
   plaats van met het venster. */
.hero__stage {
  position: relative;
  /* Zo breed als het venster, tenzij de hoogte eerder op is. Bewust uitgerekend
     in plaats van via `max-height: 100%` + aspect-ratio: de rij van de grid
     vormt zich naar zijn inhoud, waardoor die 100% naar de inhoud zelf verwijst
     en de beperking niets doet. Dezelfde expressie staat op
     .site-header__inner, zodat balk en beeld gegarandeerd uitlijnen. */
  width: min(100%, calc(100svh * var(--hero-ar)));
  aspect-ratio: var(--hero-ar);
  container-type: inline-size;
}

/* Op een liggend scherm vult het beeld het hele venster. Daar zit sinds het
   weghalen van het woordmerk niets meer in dat een uitsnede niet mag raken, en
   de donkere randen langs het beeld liepen door tot onder aan de pagina. */
@media (min-aspect-ratio: 1 / 1) {
  .hero {
    /* Blijft er onderaan ruimte over (zie de volgende regel), dan hoort die
       ónder de foto te vallen en niet erboven. */
    place-items: start center;
  }

  .hero__stage {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .hero__img {
    /* Waar de uitsnede valt, is opgemeten aan het alfakanaal van de uitgeknipte
       laag: in dia 1 staan de mannen van 28,2% tot 100% van de beeldhoogte, in
       dia 2 van 14,8% tot 99,9%. Die tweede is dus bepalend.

       Op een gemaximaliseerd venster van 1920 × 950 is er maar ~81% van de
       hoogte te zien, en dat is minder dan die 85%. Er moet dus iets af, en dan
       liever onderaan: daar lost het verloop de benen tóch al op in het donker,
       terwijl een afgesneden hoofd meteen opvalt. 70% laat bovenaan net genoeg
       lucht staan en snijdt de rest onderin weg.

       Vanaf ongeveer 21:9 lukt het niet meer: dan is er zo weinig hoogte over
       dat de koppen alsnog geraakt worden. */
    object-position: center 70%;
  }

  .page-home .site-header:not(.is-stuck) .site-header__inner {
    --stage-w: 100%;
  }
}

/* Is het venster juist smáller dan het beeld, dan zou de uitsnede aan de
   zijkanten gebeuren en vallen de buitenste twee mannen eraf. In plaats
   daarvan staat het beeld dan op ware breedte tegen de bovenkant en loopt het
   donker eronder gewoon door. Dat valt niet op: de onderrand van de liggende
   dia's is #201e1c en de hero eronder is #1e1e1d.

   Het beeldvlak houdt in dat geval de verhouding van het Figma-kader, dus alle
   percentages en cq-eenheden erbinnen kloppen precies met het ontwerp. */
@media (min-aspect-ratio: 1 / 1) and (max-aspect-ratio: 1280 / 792) {
  .hero__stage {
    height: auto;
    aspect-ratio: var(--hero-ar);
  }
}

/* De verhouding van het beeld. Eén variabele, zodat het beeldvlak, de balk, de
   papierkolom eronder en de voorlaadregel in de <head> niet uit elkaar kunnen
   lopen. */
.hero,
.page-home .site-header,
.page-home .page-body {
  --hero-ar: 1280 / 792;
}

/* Staand scherm krijgt de staande compositie: foto bovenin, woordmerk en
   knoppen in het donker eronder. Zie hero_portrait_ratio in config.php. */
@media (max-aspect-ratio: 1 / 1) {
  .hero,
  .page-home .site-header,
  .page-home .page-body {
    --hero-ar: 1080 / 1900;
  }
}

.hero__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--slide-fade) var(--ease-inout);
}

.hero__frame.is-active {
  opacity: 1;
}

.hero__img {
  width: 100%;
  height: 100%;
  /* Heeft het vlak dezelfde verhouding als de afbeelding, dan valt hier niets
     af en voorkomt cover alleen een haarlijn door afrondingsverschillen. Op een
     liggend scherm dat bréder is dan het beeld snijdt cover wél bij; zie de
     mediaregel bij .hero__stage. */
  object-fit: cover;
}

/* De twee knoppen. In Figma staat de knop op x 108 en y 667 van een kader van
   1280 × 792: 8,44% van links, 8,71% van onderen, 20 px tekst. Alles in
   cqw/procenten van het beeldvlak, zodat de knop meeschaalt met het beeld en
   op één lijn blijft met het logo in de balk erboven. */
.hero__actions {
  position: absolute;
  z-index: 2;
  inset-block-end: 8.712%;
  inset-inline-start: 8.4375%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5625cqw;
  margin: 0;
  padding-inline-end: 8.4375%;
  font-family: var(--font-display);
  font-size: max(0.9rem, 1.5625cqw);
  color: #fff;
}

/* Op smal scherm staan de knoppen gecentreerd, net als de menuknop in de balk
   erboven, en net als het woordmerk in de staande dia, dat ook midden in beeld
   staat. Dezelfde grens als de menuknop, zodat balk en knoppen samen omslaan. */
@media (width < 60rem) {
  .hero__actions {
    inset-inline: 0;
    justify-content: center;
    padding-inline: var(--gutter);
  }
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: max(2.75rem, 7.07cqh);
  padding-inline: max(0.75rem, 0.86cqw);
  /* Dezelfde diepere terracotta als alle andere gevulde knoppen. Het lichtere
     #bc725b uit Figma haalt met witte tekst 3,69:1 en blijft in gebruik voor
     randen en accenten, waar geen tekst overheen staat. */
  background: var(--terracotta-solid);
  color: #fff;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.hero__cta:hover {
  background: var(--terracotta-deep);
}

.hero__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.35rem;
  color: #fff;
  text-decoration: none;
}

.hero__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Onzichtbaar tot iemand er met de tab-toets op landt. Zie hero.php voor
   waarom deze knop er ondanks het ontwerp toch is. */
.hero__pause {
  position: absolute;
  z-index: 6;
  inset-block-start: -100vh;
  inset-inline-start: var(--gutter);
  padding: 0.65rem 1.1rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ink-deep);
  color: var(--paper);
  font-size: var(--text-sm);
  cursor: pointer;
}

.hero__pause:focus-visible {
  inset-block-start: 6rem;
}

/* Geen vangnet meer nodig voor kleine of liggende schermen: het hele
   beeldvlak schaalt als één geheel, dus woordmerk en knoppen kunnen niet
   meer over elkaar heen vallen. */

/* --------------------------------------------------------------------------
   9. Secties
   -------------------------------------------------------------------------- */

.page-body {
  position: relative;
  z-index: 2;
  background: var(--paper);
}

.page-home .page-body {
  /* De ruimte tot de footergolf stond als marge op de footer, en marges tonen
     de achtergrond van de pagina. Als padding hoort diezelfde ruimte bij het
     papier: de golf houdt zo zijn crème ondergrond. */
  padding-block-end: var(--sp-6);
}

/* Op een liggend scherm vult het beeld het venster en zijn er geen stroken meer;
   daar hoeft het papier dus niets te ontwijken.

   Op een staand scherm past het beeldvlak nog wél in de hero, en houdt die
   links en rechts (of boven en onder) donker over. Die stroken braken vroeger
   af op de onderrand van de hero, met een harde overgang naar het crème van de
   pagina. Vandaar dat het donker daar de achtergrond van de hele homepagina is
   en het papier exact de breedte van het beeldvlak krijgt: de stroken lopen
   door tot onder aan het document en verdwijnen achter de footer, die over de
   volle breedte leigrijs is.

   Op een telefoon levert min() gewoon 100% op: daar zijn geen stroken en doet
   deze regel niets. Hij telt pas op een staand scherm dat breder is dan
   1080 / 1900, zoals een tablet rechtop. */
@media (max-aspect-ratio: 1 / 1) {
  .page-home {
    background: var(--ink-deep);
  }

  .page-home .page-body {
    /* Dezelfde rekensom als .hero__stage en .site-header__inner, zodat de rand
       van het papier precies onder de rand van het beeld valt. */
    width: min(100%, calc(100svh * var(--hero-ar)));
    margin-inline: auto;
  }
}

.page-home .site-footer {
  margin-block-start: 0;
}

.section {
  --section-pad: var(--sp-6);
  padding-block: var(--section-pad);
}

.section--about {
  --section-pad: clamp(4rem, 8vw, 7rem);
}

/* Was clamp(8rem, 16vw, 12rem). Die ruimte zat er alleen om de vaste header
   te ontwijken; dat doet `.main--offset` nu voor alle pagina's zonder hero,
   zodat elke pagina op dezelfde hoogte begint. */
.section--simple {
  --section-pad: clamp(3rem, 8vw, 5.5rem);
}

/* De header is vast gepositioneerd en telt dus niet mee in de doorstroom.
   Zonder deze ruimte schuift de eerste kop eronder. */
.main--offset {
  padding-block-start: clamp(5.5rem, 8vw, 6.5rem);
}

.section__head {
  margin-block-end: var(--sp-4);
}

.section__head--row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
  justify-content: space-between;
}

.section__title {
  font-size: var(--text-xl);
}

.section__title--lg {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}

.section__actions {
  margin-block-start: var(--sp-4);
}

/* De horizonlijn: het scheidingsmotief van deze site. Het is de waterlijn uit
   de twee hero-foto's, en dezelfde deining als de golf boven de footer. */
.horizon {
  color: color-mix(in srgb, var(--zuiderzee) 30%, transparent);
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.horizon svg {
  width: 100%;
  height: 12px;
  overflow: visible;
}

.horizon path {
  transform-origin: center;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-out);
}

.horizon.is-visible path {
  transform: scaleX(1);
}

/* --- Wie zijn wij ---------------------------------------------------------- */

/* De openingskop van de pagina. Groter dan de sectiekoppen eronder, met een
   haarlijn eronder in de kleur van de horizon. Zo is duidelijk dat dit de kop
   van de pagina is en "Wie zijn wij?" die van de sectie. */
.about__headline {
  font-size: clamp(2.1rem, 3.6vw + 0.6rem, 3.5rem);
  max-width: 20ch;
  padding-block-end: clamp(1.75rem, 4vw, 3rem);
  margin-block-end: clamp(2rem, 4.5vw, 3.5rem);
  border-block-end: 1px solid color-mix(in srgb, var(--zuiderzee) 22%, transparent);
}

.about__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}

.about__members {
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--zuiderzee) 18%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--zuiderzee) 18%, transparent);
}

.about__member {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 0.85rem;
  background: var(--paper);
}

.about__member-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.about__member-role {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (width < 52rem) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Nieuws ---------------------------------------------------------------- */

.cards {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--paper-warm);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.card__title {
  font-size: var(--text-lg);
}

/* De hele kaart is aanklikbaar, maar de toegankelijke naam blijft de kop.
   "Lees meer" als linktekst is voor een schermlezer nietszeggend: die leest
   vaak alleen de lijst met links voor. */
.card__link {
  text-decoration: none;
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card__excerpt {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-block-start: auto;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card__more {
  color: var(--terracotta-deep);
  transition: transform var(--dur-fast) var(--ease-out);
}

/* --- Lege staten ----------------------------------------------------------- */

.empty {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: clamp(3rem, 8vw, 5.5rem) var(--gutter);
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--zuiderzee) 28%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper-warm) 55%, transparent);
}

.empty__mark {
  color: color-mix(in srgb, var(--zuiderzee) 45%, transparent);
  margin-block-end: var(--sp-1);
}

.empty__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.empty__text {
  font-size: var(--text-sm);
  max-width: 38ch;
  color: var(--ink-soft);
}

/* --- Het cd-vak ------------------------------------------------------------
   Staat op de homepage (de nieuwste cd) en op /liedjes (alle cd's onder
   elkaar). Eén set regels, zodat de twee pagina's niet uit elkaar lopen.
   -------------------------------------------------------------------------- */

/* De donkere vulling zit niet op het vak zelf maar op een laag eronder. Reden:
   het SVG-filter dat de rand rafelt en de korrel aanbrengt, moet de tekst met
   rust laten; displacement op tekst maakt hem wazig en onleesbaar.

   `isolation: isolate` houdt die laag binnen het vak. Zonder die regel zakt
   een pseudo-element met z-index -1 door naar achter de achtergrond van de
   pagina en is het vak onzichtbaar. */
.sleeve,
.cdhead,
.callout {
  position: relative;
  isolation: isolate;
  /* Het filter duwt pixels tot ongeveer 9 px naar buiten; deze twee pixels
     houden de rafel binnen de inhoudskolom in plaats van tegen de vensterrand. */
  margin-inline: 2px;
  color: var(--paper);
}

.sleeve::before,
.cdhead::before,
.callout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--ink);
  /* Zachte binnenrand: geeft het vlak de dikte van een kartonnen hoes zonder
     dat er een echte slagschaduw aan te pas komt. Hij loopt mee door het
     filter en wordt dus net zo rafelig als de buitenrand. */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%),
    0 30px 60px -40px rgb(30 30 29 / 80%);
  /* De gescheurde rand en de korrel. Het filter staat in layout/base.php.
     Kent de browser het niet, dan blijft hier een nette afgeronde rechthoek
     staan en gaat er verder niets kapot. */
  filter: url("#cd-rafel");
}

.sleeve {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.sleeve--empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0.35rem;
  padding-block: clamp(3.5rem, 9vw, 6rem);
  text-align: center;
}

.sleeve__disc {
  color: color-mix(in srgb, var(--paper) 42%, transparent);
  margin-block-end: var(--sp-2);
}

.sleeve__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.sleeve__text {
  font-size: var(--text-sm);
  max-width: 40ch;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

.sleeve__cover {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
}

.sleeve__art {
  aspect-ratio: 1;
  width: 100%;
  margin-block-end: var(--sp-2);
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.sleeve__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nog geen hoes geüpload: het schijfje in plaats van een leeg grijs vlak. */
.sleeve__art-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--paper) 38%, transparent);
}

.sleeve__album {
  font-size: var(--text-lg);
}

/* De titel is een link naar de teksten, net als de knop eronder. Zonder
   onderstreping, want twee regels eronder staat dezelfde bestemming al als
   knop; de hover maakt duidelijk genoeg dat het klikbaar is. */
.sleeve__link {
  text-decoration: none;
}

.sleeve__link:hover {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--paper) 50%, transparent);
}

.sleeve__facts {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  margin-block-end: var(--sp-2);
}

/* --- Nummerlijst ----------------------------------------------------------- */

/* Bovenaan uitlijnen, niet centreren. Bij een volle cd van tien nummers maakt
   het geen verschil (dan is de lijst even hoog als de kolom met de hoes), en
   bij een cd van twee nummers voorkomt het dat die twee regels in het midden
   van een leeg vlak komen te zweven. */
.tracks {
  align-self: start;
  width: 100%;
  counter-reset: track;
}

.tracks--empty {
  align-self: center;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

.track {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  /* 48 px hoog: genoeg om aan te tikken zodra de regels klikbaar worden. */
  min-height: 3rem;
  padding-inline: 0.5rem;
  border-block-end: 1px solid rgb(255 255 255 / 12%);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.track:last-child {
  border-block-end: 0;
}

.track:hover {
  background: rgb(255 255 255 / 4%);
}

.track__no {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--paper) 50%, transparent);
}

.track__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  text-decoration: none;
}

a.track__title:hover {
  color: var(--terracotta);
  text-decoration: underline;
}

.track__time {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

/* Voorbereid op later: zodra een nummer een audiobestand heeft, krijgt de
   regel deze klasse en verschijnt het afspeelteken op de plek van het nummer.
   De opmaak eromheen hoeft dan niet te veranderen. */
.track--playable {
  cursor: pointer;
}

.track--playable .track__no {
  position: relative;
}

.track--playable:hover .track__no {
  color: transparent;
}

.track--playable:hover .track__no::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.25rem;
  translate: 0 -50%;
  border-inline-start: 8px solid var(--terracotta);
  border-block: 5px solid transparent;
}

@media (width < 46rem) {
  .sleeve {
    grid-template-columns: minmax(0, 1fr);
  }

  .sleeve__art {
    max-width: 14rem;
  }
}

/* --- Eenvoudige pagina's --------------------------------------------------- */

.crumbs {
  margin-block-end: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crumbs li + li::before {
  content: "/";
  margin-inline-end: 0.5rem;
  opacity: 0.5;
}

.linklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-block-start: var(--sp-3);
}

.linklist a {
  display: inline-block;
  padding-block: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--terracotta-deep);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 2;
  margin-block-start: var(--sp-6);
  padding-block-end: var(--sp-3);
  background: var(--slate);
  color: var(--paper);
}

.site-footer__wave {
  position: absolute;
  inset-block-end: 100%;
  inset-inline: 0;
  color: var(--slate);
  line-height: 0;
}

.site-footer__wave svg {
  width: 100%;
  height: clamp(3.5rem, 7vw, 7rem);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-start;
  justify-content: space-between;
  padding-block: clamp(1rem, 3vw, 2.5rem) var(--sp-4);
}

.site-footer__brand img {
  width: clamp(12rem, 26vw, 21rem);
  height: auto;
}

.site-footer__contact {
  margin-block-start: var(--sp-1);
  padding-inline-start: 0.4rem;
}

.site-footer__contact a {
  /* Een link van 17 px is 18 px hoog en dus te klein om betrouwbaar aan te
     tikken. Met verticale ruimte eromheen wordt het raakvlak 44 px. */
  display: inline-block;
  padding-block: 0.75rem;
  /* In het ontwerp stond alle footertekst op 50 % wit: een contrast van 3,1:1,
     onder de WCAG-ondergrens van 4,5:1. Op 82 % is het 7,4:1 en nog steeds
     duidelijk ondergeschikt aan de rest. */
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  text-decoration-color: color-mix(in srgb, var(--paper) 40%, transparent);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__contact a:hover {
  color: var(--paper);
  text-decoration-color: currentColor;
}

.site-footer__nav ul {
  display: grid;
  gap: 0.15rem;
  text-align: end;
}

.site-footer__nav a {
  display: inline-block;
  padding-block: 0.45rem;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__nav a:hover {
  color: var(--paper);
  text-decoration: underline;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  justify-content: space-between;
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid rgb(255 255 255 / 12%);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

@media (width < 46rem) {
  .site-footer__nav ul {
    text-align: start;
  }
}

/* Terug naar boven. */
.to-top {
  position: fixed;
  z-index: 120;
  inset-block-end: clamp(1rem, 3vw, 2rem);
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink-deep) 82%, transparent);
  backdrop-filter: blur(6px);
  color: var(--paper);
  box-shadow: 0 8px 24px -12px rgb(30 30 29 / 70%);
  opacity: 0;
  translate: 0 0.75rem;
  transition: opacity var(--dur-mid) var(--ease-out),
    translate var(--dur-mid) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.to-top.is-visible {
  opacity: 1;
  translate: 0 0;
}

.to-top:hover {
  background: var(--terracotta);
}

/* --------------------------------------------------------------------------
   11. Beweging bij het inscrollen
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  translate: 0 1.15rem;
  transition: opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

.js [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Kaarten komen kort na elkaar binnen, niet als één blok. De vertraging staat
   in CSS in plaats van in een style-attribuut per kaart: style-attributen
   worden door de Content-Security-Policy geblokkeerd. */
.js .cards__item {
  opacity: 0;
  translate: 0 1.4rem;
  transition: opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

.js .cards__item:nth-child(2) {
  transition-delay: 90ms;
}

.js .cards__item:nth-child(3) {
  transition-delay: 180ms;
}

.js .cards__item:nth-child(4) {
  transition-delay: 270ms;
}

.js .cards__item:nth-child(n + 5) {
  transition-delay: 360ms;
}

.js [data-reveal].is-visible .cards__item {
  opacity: 1;
  translate: 0 0;
}

/* --------------------------------------------------------------------------
   12. Beheeromgeving
   -------------------------------------------------------------------------- */

.admin {
  background: var(--paper-warm);
}

.admin__bar {
  background: var(--ink-deep);
  color: var(--paper);
}

.admin__bar-inner,
.admin__main,
.admin__foot {
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.admin__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
}

.admin__home {
  font-family: var(--font-display);
  font-size: var(--text-md);
  text-decoration: none;
}

.admin__session {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--text-sm);
}

.admin__main {
  padding-block: var(--sp-4);
}

.admin__panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.admin__panel--narrow {
  max-width: 26rem;
  margin-inline: auto;
}

.admin__title {
  font-size: var(--text-xl);
  margin-block-end: var(--sp-3);
}

.admin__subtitle {
  font-size: var(--text-lg);
  margin-block: var(--sp-4) var(--sp-2);
}

.admin__todo {
  display: grid;
  gap: 0.9rem;
}

.admin__todo li {
  display: grid;
  gap: 0.15rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid color-mix(in srgb, var(--terracotta) 55%, transparent);
}

.admin__todo span {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.admin__hint {
  margin-block-start: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.admin__foot {
  padding-block: var(--sp-3);
  font-size: var(--text-sm);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
}

.stats__item {
  flex: 1 1 8rem;
  padding: var(--sp-2);
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
}

.stats__item dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stats__item dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.alert {
  padding: 0.85rem 1.1rem;
  margin-block-end: var(--sp-3);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid currentColor;
  font-size: var(--text-sm);
}

.alert--error {
  background: #fdeceb;
  color: #9d2b20;
}

.alert--warn {
  background: #fdf3e3;
  color: #8a5a12;
}

.alert--ok {
  background: #eaf5ec;
  color: #1f6135;
}

.form {
  display: grid;
  gap: var(--sp-3);
}

.field {
  display: grid;
  gap: 0.35rem;
}

/* Zichtbaar label, geen placeholder als label: die verdwijnt zodra je typt,
   en dan weet niemand meer wat er in het veld hoort. */
.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.field__input {
  min-height: 2.875rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: var(--radius-sm);
  background: #fff;
}

.field__input:focus-visible {
  outline: 2px solid var(--zuiderzee);
  outline-offset: 1px;
  border-color: var(--zuiderzee);
}

/* --------------------------------------------------------------------------
   12b. Nieuwsoverzicht en artikelpagina

   Alles hier hangt aan dezelfde tokens als de homepage. Geen nieuwe kleuren,
   geen nieuw lettertype, geen tweede kaartcomponent: de nieuwskaart is
   letterlijk dezelfde .card als op de homepage, met één partial als bron.
   -------------------------------------------------------------------------- */

.section--news-index,
.section--article {
  --section-pad: clamp(2rem, 4vw, 3rem);
  padding-block-end: var(--sp-6);
}

.page-head {
  max-width: 62ch;
  margin-block-end: clamp(2rem, 5vw, 3.25rem);
}

.page-head .lead {
  margin-block-start: var(--sp-2);
}

.page-head__meta {
  margin-block-start: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Uitgelicht bericht ---------------------------------------------------- */

/* In Figma: 1064 breed, foto 522 (49%), tekst 542, hoogte 391. De foto bepaalt
   via aspect-ratio de hoogte van de rij, zodat het blok meeschaalt in plaats
   van op een vaste 391 px te blijven staan. */
.feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 49%) minmax(0, 1fr);
  background: var(--paper-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}

.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.feature__media {
  aspect-ratio: 522 / 391;
  background: var(--paper-warm);
  overflow: hidden;
}

.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.feature:hover .feature__media img {
  transform: scale(1.03);
}

/* Twee rijen: de tekst pakt de vrije ruimte en centreert daarin, de
   datumregel houdt zijn plek onderaan, precies zoals in het ontwerp, maar
   zonder het gat dat daar tussen de blindtekst en de datum viel. */
.feature__body {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sp-3);
  padding: clamp(1.35rem, 2.6vw, 2.25rem);
}

.feature__text {
  display: grid;
  gap: 0.7rem;
  align-content: center;
}

.feature__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--terracotta-deep);
}

.feature__title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.012em;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  text-wrap: balance;
}

/* Dezelfde truc als bij de kaart: de hele tegel is klikbaar, maar de
   toegankelijke naam blijft de kop. */
.feature__link {
  text-decoration: none;
}

.feature__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.feature__excerpt {
  max-width: 46ch;
  color: var(--ink-soft);
}

.feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.feature__more {
  color: var(--terracotta-deep);
}

.feature__media-empty,
.card__media-empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    160deg,
    var(--paper-warm) 0%,
    color-mix(in srgb, var(--paper-warm) 70%, var(--paper)) 100%
  );
}

@media (width < 56rem) {
  .feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature__media {
    aspect-ratio: 16 / 9;
  }
}

/* --- Het raster eronder ---------------------------------------------------- */

.cards--index {
  margin-block-start: var(--sp-4);
}

/* Het pijltje schuift een fractie mee bij hover. Genoeg om de richting te
   suggereren, te weinig om als animatie op te vallen. */
.card__arrow,
.feature__more .card__arrow {
  display: inline-block;
  transition: translate var(--dur-fast) var(--ease-out);
}

.card:hover .card__arrow,
.feature:hover .card__arrow {
  translate: 0.2rem 0;
}

/* De horizon tussen het uitgelichte bericht en het raster staat al binnen de
   shell, dus zonder eigen marge zou hij tegen de kaarten aan liggen. */
.section--news-index .horizon {
  padding-inline: 0;
  margin-block: clamp(2rem, 4vw, 3rem) 0;
}

/* --- Paginering ------------------------------------------------------------ */

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid color-mix(in srgb, var(--zuiderzee) 20%, transparent);
}

.pager__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

/* 44 px in beide richtingen: de ondergrens voor iets dat op een telefoon
   betrouwbaar aan te tikken is. Een rij cijfers van 17 px is dat niet. */
.pager__page,
.pager__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.pager__page:hover,
a.pager__step:hover {
  background: color-mix(in srgb, var(--terracotta) 16%, transparent);
  color: var(--terracotta-deep);
}

.pager__page.is-current {
  background: var(--terracotta-solid);
  color: #fff;
}

.pager__gap {
  padding-inline: 0.4rem;
  color: var(--ink-soft);
}

/* De uitgeschakelde stap blijft staan in plaats van te verdwijnen: anders
   springt "Volgende" op de laatste pagina naar links en zoek je hem opnieuw. */
.pager__step--off {
  opacity: 0.35;
  cursor: default;
}

/* --- Artikelpagina --------------------------------------------------------- */

.article__head {
  max-width: 62ch;
}

.article__title {
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  max-width: 22ch;
  margin-block-start: 0.35rem;
}

.article__lead {
  margin-block-start: var(--sp-2);
}

.article__figure {
  margin-block: clamp(2rem, 4.5vw, 3.25rem);
}

.article__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
}

.article__body {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

.article__updated {
  margin-block-start: var(--sp-3);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section--article .horizon {
  padding-inline: 0;
  margin-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Opmaak van de tekst die uit het CMS komt. Dit is precies de lijst tags die
   Html::sanitize() doorlaat. Wat daar wordt toegevoegd, hoort hier ook een
   regel te krijgen. */
.prose h2,
.prose h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.012em;
}

.prose h2 {
  font-size: var(--text-lg);
  margin-block: var(--sp-4) var(--sp-1);
}

.prose h3 {
  font-size: var(--text-md);
  margin-block: var(--sp-3) var(--sp-1);
}

.prose ul,
.prose ol {
  margin-block: var(--sp-2);
  padding-inline-start: 1.35rem;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-block-start: 0.35rem;
}

.prose a {
  color: var(--terracotta-deep);
  text-decoration-color: color-mix(in srgb, var(--terracotta) 50%, transparent);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose blockquote {
  margin-block: var(--sp-3);
  padding-inline-start: var(--sp-2);
  border-inline-start: 2px solid color-mix(in srgb, var(--terracotta) 60%, transparent);
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--ink-soft);
}

/* Een technische naam in lopende tekst. Net genoeg afwijking om te laten
   zien dat het een letterlijke naam is en geen woord, zonder het grijze
   codeblok dat bij deze site niet past. */
.prose code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--terracotta) 10%, transparent);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  word-break: break-word;
}

.prose hr {
  height: 0;
  margin-block: var(--sp-4);
  border: 0;
  border-block-start: 1px solid color-mix(in srgb, var(--zuiderzee) 20%, transparent);
}

/* --- Vorige en volgende ---------------------------------------------------- */

.article-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.article-nav__item {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  padding: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--zuiderzee) 20%, transparent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.article-nav__item:hover {
  border-color: color-mix(in srgb, var(--terracotta) 60%, transparent);
  background: color-mix(in srgb, var(--paper-warm) 55%, transparent);
}

.article-nav__item--next {
  text-align: end;
}

.article-nav__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--terracotta-deep);
}

.article-nav__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

@media (width < 40rem) {
  .article-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-nav__item--next {
    text-align: start;
  }

  .article-nav__spacer {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   12c. Beheer: lijst en formulier
   -------------------------------------------------------------------------- */

.admin__nav {
  display: flex;
  gap: var(--sp-2);
  margin-inline-end: auto;
  padding-inline-start: var(--sp-2);
  font-size: var(--text-sm);
}

.admin__nav a {
  display: inline-block;
  padding-block: 0.35rem;
  color: color-mix(in srgb, var(--paper) 80%, transparent);
}

.admin__nav a:hover {
  color: var(--paper);
}

.admin__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--sp-3);
}

.admin__head .admin__title {
  margin-block-end: 0;
}

.admin__cards {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-block-start: var(--sp-2);
}

.admin__card {
  display: grid;
  gap: 0.2rem;
  height: 100%;
  padding: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.admin__card:hover {
  border-color: var(--terracotta);
  background: var(--paper-warm);
}

.admin__card span {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* Een tabel kan niet smaller dan zijn inhoud. In plaats van de kolommen te
   laten samenknijpen tot ze onleesbaar zijn, mag hij hier horizontaal
   schuiven; de pagina zelf blijft dan wel op zijn plek. */
.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: 0.7rem 0.6rem;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.table thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.table tbody th {
  font-weight: 600;
}

.table__sub {
  display: block;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.table__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  justify-content: flex-end;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Niet alleen kleur: elke badge heeft ook een woord. Wie kleuren niet
   onderscheidt, leest gewoon "Concept". */
.badge--live {
  background: #eaf5ec;
  color: #1f6135;
}

.badge--draft {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink-soft);
}

.badge--wait {
  background: #fdf3e3;
  color: #8a5a12;
}

.btn--danger {
  --btn-fg: #9d2b20;
}

.fieldset {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: var(--radius-sm);
}

.fieldset__legend {
  padding-inline: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fieldset__intro {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* Toelichting onder het veld, niet erin. Een placeholder als uitleg verdwijnt
   zodra iemand begint te typen, precies op het moment dat hij nodig is. */
.field__hint {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-soft);
}

.field__hint code {
  padding: 0.05rem 0.25rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: 0.95em;
}

.field__input--area,
.field__input--body {
  min-height: auto;
  line-height: var(--leading-body);
  resize: vertical;
}

.field__input--body {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  font-size: var(--text-sm);
}

.field__input--short {
  max-width: 18rem;
}

.field__input--file {
  padding-block: 0.6rem;
}

.field__prefixed {
  display: flex;
  align-items: stretch;
}

.field__prefix {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-inline-end: 0;
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
  background: var(--paper-warm);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.field__prefixed .field__input {
  flex: 1;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.field__radios {
  display: grid;
  gap: 0.35rem;
}

.field__radio,
.field__check {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  min-height: 2.5rem;
  font-size: var(--text-sm);
}

.field__preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.field__preview img {
  width: 12rem;
  height: auto;
  border-radius: var(--radius-sm);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  padding-block-start: var(--sp-2);
}

/* --- Beheer: cd's, nummers en links ---------------------------------------- */

.form--boxed {
  padding: var(--sp-3);
  margin-block-start: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--paper-warm) 40%, transparent);
}

/* Nr., titel en duur op één regel; de titel neemt de rest. Onder 34rem
   klapt het vanzelf om, want de velden hebben een eigen minimumbreedte. */
.song__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
}

.field--grow {
  flex: 1 1 14rem;
}

.field__input--tiny {
  width: 6rem;
}

/* Elk nummer staat ingeklapt: tien open tekstvelden onder elkaar is geen
   overzicht meer. */
.song {
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--radius-sm);
  margin-block-end: var(--sp-1);
  background: var(--paper-card);
}

.song__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  padding: 0.85rem var(--sp-2);
  cursor: pointer;
}

.song[open] .song__summary {
  border-block-end: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.song__no {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.song__title {
  font-weight: 600;
}

.song__meta {
  margin-inline-start: auto;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.song__body {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
}

.song__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.links {
  display: grid;
  gap: var(--sp-2);
  margin-block-end: var(--sp-3);
}

.links__empty {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.links__list {
  display: grid;
  gap: 0.35rem;
}

.links__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: center;
  padding-block: 0.35rem;
  border-block-end: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: var(--text-sm);
}

.links__name {
  min-width: 8rem;
  font-weight: 600;
}

.links__url {
  color: var(--ink-soft);
  word-break: break-all;
}

.links__item form {
  margin-inline-start: auto;
}

/* Het toevoegformulier op één regel als het past, eronder als dat niet lukt. */
.links__add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
  padding: var(--sp-2);
  border: 1px dashed color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: var(--radius-sm);
}

.links__add .field {
  flex: 1 1 12rem;
  gap: 0.25rem;
}

/* --------------------------------------------------------------------------
   13. Liedjes: /liedjes en de tekstpagina van één cd
   Het cd-vak zelf staat hierboven bij de secties, want dat deelt de homepage.
   Hier staat alleen wat aan deze twee pagina's vastzit.
   -------------------------------------------------------------------------- */

.section--songs,
.section--cd {
  --section-pad: clamp(3rem, 8vw, 5.5rem);
}

/* De cd's onder elkaar. Ruim uit elkaar: het zijn tien donkere vlakken op
   crème papier, en met minder lucht ertussen wordt het één streepjescode. */
.cds {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
}

/* --- De kop van de cd-pagina ----------------------------------------------- */

.cdhead {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  /* De rafel steekt ongeveer 9 px buiten het vak; zonder deze marge raakt hij
     het kruimelpad erboven. */
  margin-block: var(--sp-2) var(--sp-4);
}

.cdhead__art {
  aspect-ratio: 1;
  width: 100%;
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cdhead__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cdhead__title {
  font-size: clamp(2rem, 4vw, 2.9rem);
  margin-block: 0.35rem 0.15rem;
}

.cdhead__facts {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}

.cdhead__text {
  max-width: 52ch;
  margin-block-start: var(--sp-2);
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.eyebrow--on-dark {
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

/* Luisteren links, meespelen rechts. `margin-inline-start: auto` duwt de
   akkoordenknop tegen de rechterrand van het donkere vak; is er geen ruimte
   meer, dan valt hij eronder in plaats van de links samen te drukken. */
.cdhead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-block-start: var(--sp-3);
}

.cdhead__actions .linkrow {
  margin-block-start: 0;
}

.cdhead__chords {
  margin-inline-start: auto;
}

.cdhead__chords-meta {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* --- Links naar diensten --------------------------------------------------- */

.linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: var(--sp-2);
}

.linkrow__item {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  /* 44 px hoog: op een telefoon staan deze knoppen dicht bij elkaar en moet
     elke afzonderlijk te raken zijn. */
  min-height: 2.75rem;
  padding: 0.4rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--terracotta) 45%, transparent);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--terracotta-deep);
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.linkrow__item:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}

/* Dezelfde knoppen, maar dan op het donkere vlak bovenaan de cd-pagina. */
.linkrow--lg .linkrow__item {
  border-color: color-mix(in srgb, var(--paper) 38%, transparent);
  color: var(--paper);
}

.linkrow--lg .linkrow__item:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

/* --- Inhoudsopgave --------------------------------------------------------- */

.cd-index__title {
  font-size: var(--text-lg);
  margin-block-end: var(--sp-2);
}

.cd-index__list {
  display: grid;
  gap: 0.15rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.cd-index__list a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: baseline;
  min-height: 2.5rem;
  padding-block: 0.35rem;
  text-decoration: none;
}

.cd-index__list a:hover span:last-child {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.cd-index__no {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* --- De teksten ------------------------------------------------------------ */

.lyrics {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-block-start: var(--sp-4);
}

/* Ankerdoel. `scroll-padding-top: 6rem` op html houdt de vaste balk er al af;
   deze marge zet er nog een kleine ademruimte bovenop, zodat de kop van het
   lied niet tegen de onderrand van die balk aan plakt. De twee tellen op. */
.lyric {
  scroll-margin-block-start: 1rem;
}

/* Na de sprong krijgt het lied de toetsenbordfocus, zodat wie verder tabt in
   het lied begint en niet opnieuw in het menu. Een focusrand hoort er niet
   omheen: dit is geen knop of link maar een stuk tekst, en het streepje van
   :target markeert het al. Bij alles wat je wél kunt bedienen blijft de rand
   gewoon staan. */
.lyric:focus,
.lyric:focus-visible {
  outline: none;
}

.lyric__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  align-items: baseline;
  padding-block-end: 0.6rem;
  margin-block-end: var(--sp-2);
  border-block-end: 1px solid color-mix(in srgb, var(--zuiderzee) 22%, transparent);
}

/* Het lied waar je vandaan kwam. Na een sprong van een halve pagina is de
   vraag "ben ik goed aangekomen?" reëel; dit streepje beantwoordt hem zonder
   dat er iets hoeft te knipperen. Het werkt met :target, dus ook zonder
   JavaScript. De negatieve marge houdt de tekst op zijn plek; anders
   verspringt het lied een centimeter zodra het rand krijgt. */
.lyric:target .lyric__head {
  border-inline-start: 3px solid var(--terracotta);
  border-block-end-color: color-mix(in srgb, var(--terracotta) 45%, transparent);
  padding-inline-start: 0.85rem;
  margin-inline-start: -0.85rem;
}

.lyric__no {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: color-mix(in srgb, var(--terracotta-deep) 75%, transparent);
}

.lyric:target .lyric__no {
  color: var(--terracotta-deep);
}

.lyric__title {
  font-size: var(--text-xl);
  flex: 1;
}

.lyric__time {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* De tekst staat als platte tekst in de database. pre-line houdt de
   regelovergangen en de witregels tussen coupletten precies zoals ze zijn
   ingetypt, zonder dat er HTML aan te pas komt. */
.lyric__text {
  max-width: 46ch;
  white-space: pre-line;
  font-size: var(--text-md);
  line-height: 1.75;
}

.lyric__todo {
  max-width: 46ch;
  font-style: italic;
  color: var(--ink-soft);
}

.lyric__back {
  margin-block-start: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lyric__back a {
  color: var(--ink-soft);
  text-decoration-color: color-mix(in srgb, var(--ink-soft) 40%, transparent);
}

.lyric__back a:hover {
  color: var(--terracotta-deep);
}

.cd-foot {
  margin-block-start: var(--sp-5);
}

@media (width < 46rem) {
  .cdhead {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .cdhead__art {
    max-width: 12rem;
  }
}

/* --------------------------------------------------------------------------
   14. De stichting
   Eén doorlopend verhaal met een foto er middenin en de documentaire aan het
   eind. Geen tijdbalk met bolletjes: de tekst noemt de jaartallen zelf, en een
   grafische tijdlijn zou ze een tweede keer vertellen.
   -------------------------------------------------------------------------- */

.story {
  font-size: var(--text-md);
}

/* Iets breder dan de tekstkolom, zodat de foto de pagina opent zonder dat het
   verhaal eronder wegvalt. Plaatshouder en echte foto krijgen dezelfde maat:
   op de dag dat het bestand er staat, verschuift er niets. */
.story__figure {
  max-width: 46rem;
  margin-block: clamp(2rem, 5vw, 3.5rem);
}

.story__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Zolang er geen foto is. Dezelfde verhouding als een liggende foto, zodat de
   pagina niet verspringt op de dag dat het bestand er wél staat. */
.story__placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-1);
  aspect-ratio: 3 / 2;
  border: 1px dashed color-mix(in srgb, var(--zuiderzee) 28%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper-warm) 55%, transparent);
  color: color-mix(in srgb, var(--zuiderzee) 45%, transparent);
  text-align: center;
}

.story__placeholder-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
}

/* --- Het donkere vak met de documentaire --------------------------------- */

.callout {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.callout__title {
  font-size: var(--text-xl);
  margin-block: 0.35rem 0.6rem;
  max-width: 24ch;
}

.callout__text {
  max-width: 52ch;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  margin-block-start: var(--sp-3);
}

.callout__link {
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  text-decoration-color: color-mix(in srgb, var(--paper) 40%, transparent);
}

.callout__link:hover {
  color: var(--paper);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   15. Contact
   Twee dingen op één pagina: waar de post heen gaat, en waar hij over kan
   gaan. Het mailadres staat op een lichte kaart en heeft de maat van een kop
   gekregen: het is de enige handeling op de pagina, en dan hoort het ook het
   grootste te zijn wat er staat. De onderwerpen eronder staan in het donkere
   vak met de gescheurde rand: hetzelfde vak als de cd-hoes op /liedjes en de
   documentaire op /stichting. Op deze site is dat het blok waar iets te doen
   valt, en een contactpagina is niets anders dan dat.
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  /* Allebei zo hoog als hun eigen inhoud. Even hoog maken was de betere keuze
     toen het briefhoofd vier korte regels had: dan schelen ze een centimeter
     en leest dat als een fout. Met het bestuur erbij is het briefhoofd ruim
     twee keer zo lang, en dan wordt "even hoog" een half leeg wit vlak met het
     mailadres eenzaam in het midden. Verschil in hoogte dat uit de inhoud komt
     leest als een keuze; opgerekte leegte niet. */
  align-items: start;
  margin-block-start: clamp(1.75rem, 4vw, 2.75rem);
}

/* Smaller dan dit wordt het briefhoofd korter dan de naam van de stichting
   lang is, en breekt die naam over vier regels. Dan liever onder elkaar. */
@media (width < 54rem) {
  .contact {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contact__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow-card);
}

/* Het mailadres in de displaykop, groter dan de H1 van de pagina. Dat is
   opzettelijk: "Contact" vertelt waar je bent, dit is waarvoor je kwam. */
.contact__mail {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4.4vw, 2.3rem);
  line-height: 1.12;
  color: var(--terracotta-deep);
  /* Een mailadres heeft geen spaties om op te breken. Zonder deze regel rekt
     het op een smal scherm de hele kaart uit. */
  overflow-wrap: anywhere;
  text-decoration-color: color-mix(in srgb, var(--terracotta) 40%, transparent);
  transition: color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}

.contact__mail:hover {
  color: var(--terracotta);
  text-decoration-color: currentColor;
}

.contact__note {
  margin-block-start: var(--sp-2);
  max-width: 42ch;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* Verschijnt alleen als er een nummer in de configuratie staat. */
.contact__tel {
  width: 100%;
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.contact__tel a {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  /* 44 px hoog: op een telefoon is dit een belknop. */
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--terracotta-deep);
  text-decoration: none;
}

.contact__tel a:hover {
  text-decoration: underline;
}

.contact__tel svg {
  color: color-mix(in srgb, var(--terracotta) 75%, transparent);
}

/* --- Het briefhoofd -------------------------------------------------------- */

/* De officiële naam met de gegevens eronder, opgemaakt als het briefhoofd van
   de stichting. Voor de bezoeker is dat de bevestiging dat hier een echte
   stichting achter zit; voor Google zijn het de gegevens die woord voor woord
   met de structured data moeten overeenkomen. */
.contact__letter {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--zuiderzee) 20%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper-warm) 55%, transparent);
}

.contact__letter-name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1.25;
  text-wrap: balance;
}

/* Dezelfde deining als de horizonlijn en de golf boven de footer, hier op
   briefhoofdbreedte. Bewust niet de .horizon-partial: die verschijnt pas als
   het script hem in beeld ziet komen, en een streep in een briefhoofd hoort
   er ook te staan als er geen JavaScript is. */
.contact__rule {
  width: 100%;
  height: 6px;
  color: color-mix(in srgb, var(--zuiderzee) 32%, transparent);
  overflow: visible;
}

.contact__facts {
  display: grid;
  gap: var(--sp-2);
}

.contact__facts dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact__facts dd {
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Het bestuur: per regel de naam met de functie erachter. Op een breed
   briefhoofd staan ze naast elkaar met een puntlijn ertussen, zoals in een
   colofon; wordt het smaller, dan zakt de functie onder de naam in plaats van
   dat de naam gaat afbreken. */
.contact__board {
  display: grid;
  gap: 0.35rem;
}

.contact__board li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5ch;
}

.contact__board-name {
  font-weight: 600;
}

.contact__board-role {
  color: var(--ink-soft);
}

/* "Naam · functie" zonder dat de punt bij het afbreken alleen achterblijft:
   hij hangt aan de functie vast, niet aan de regel ertussen. */
.contact__board-role::before {
  content: "·";
  margin-inline-end: 0.5ch;
  color: color-mix(in srgb, var(--zuiderzee) 40%, transparent);
}

/* --- De onderwerpen in het donkere vak ------------------------------------- */

.callout--reasons {
  padding-block-end: clamp(1.1rem, 2.5vw, 1.6rem);
}

.reasons {
  margin-block-start: var(--sp-3);
}

.reason + .reason {
  border-block-start: 1px solid color-mix(in srgb, var(--paper) 15%, transparent);
}

/* De hele regel is het doelwit, niet alleen de titel. Op een telefoon is dat
   het verschil tussen raken en missen. */
.reason__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.1rem 1rem;
  padding-block: clamp(0.85rem, 2vw, 1.1rem);
  color: var(--paper);
  text-decoration: none;
}

.reason__title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: var(--text-md);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.reason__text {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--paper) 68%, transparent);
}

.reason__mark {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--paper) 28%, transparent);
  border-radius: var(--radius-pill);
  transition: translate var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.reason__link:hover .reason__title {
  text-decoration-color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.reason__link:hover .reason__mark {
  translate: 3px 0;
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.contact__onward {
  margin-block-start: clamp(2.25rem, 5vw, 3.25rem);
}

/* --------------------------------------------------------------------------
   16. Minder beweging
   Niet "alles uit", maar "niets dat beweegt zonder dat jij het vraagt".
   De diavoorstelling blijft doorlopen als crossfade, want anders zie je
   maar één van de twee foto's; alleen het verschuiven en zoomen gaat eraf.
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__frame {
    transition-duration: 600ms !important;
  }

  .js [data-reveal],
  .js .cards__item {
    opacity: 1;
    translate: none;
  }

  .horizon path {
    transform: scaleX(1);
  }
}

/* --------------------------------------------------------------------------
   17. Afdrukken
   Songteksten worden uitgeprint; dat is precies waar een tekstpagina voor
   gebruikt wordt. Het donkere vak en de rafelrand gaan er dus af: een halve
   inktcartridge aan zwart vlak is geen ontwerp maar een grap.
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .hero__pause,
  .to-top,
  .grain,
  .cd-index,
  .lyric__back,
  .cd-foot,
  .linkrow,
  .cdhead__chords {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  /* Ook het vak met de onderwerpen op /contact: die pagina wordt uitgeprint
     of als pdf bewaard, en een halve inktcartridge aan zwart vlak is geen
     ontwerp maar een grap. */
  .sleeve,
  .cdhead,
  .callout {
    color: #000;
  }

  .sleeve::before,
  .cdhead::before,
  .callout::before {
    background: none;
    box-shadow: none;
    filter: none;
    border: 1px solid #999;
  }

  /* Deze staan op een doorzichtig crème dat op wit papier niets meer is. */
  .sleeve__facts,
  .cdhead__facts,
  .cdhead__text,
  .callout__text,
  .eyebrow--on-dark,
  .track__no,
  .track__time,
  .reason__text {
    color: #444;
  }

  .reason__mark {
    display: none;
  }

  .lyric {
    break-inside: avoid;
  }

  .hero {
    height: auto;
    aspect-ratio: 1280 / 792;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}