@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --kleur-balk: #141414;
  --kleur-merkbalk: #e01b24;
  --kleur-geel: #ffd400;
  --kleur-accent: #e01b24;
  --kleur-accent-diep: #b8151c;
  --kleur-tekst: #26241f;
  --kleur-tekst-zacht: #78746c;
  --kleur-lijn: #e3e0da;
  --kleur-vlak: #f1efe8;
  --kleur-wit: #ffffff;
  --kleur-balk-tekst-zacht: #b8b3a9;
  --kleur-tekst-interface: #4a4741;
  --kleur-tekst-intro: #3b3934;
  --kleur-lijn-knop: #d8d4cd;
  /* --kleur-tekst-zacht is de spec-kleur voor credits (§5). Hier gebruikt
     voor bijschriften en metadata; --kleur-tekst-credit is een bewust
     lichtere tint, gereserveerd voor de beeldcredit en het
     advertentielabel — de twee plekken waar tekst nét iets stiller mag
     zijn dan gewone metadata. Nieuwe tekst met een vergelijkbare rol
     krijgt --kleur-tekst-zacht, niet een derde tint. */
  --kleur-tekst-credit: #a8a49c;
  --kleur-speler-achtergrond: #23211e;
  --letter-kop: "Source Serif 4", Georgia, serif;
  --letter-tekst: "Source Sans 3", system-ui, sans-serif;
  --kolom: 700px;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--kleur-wit);
  color: var(--kleur-tekst);
  font-family: var(--letter-tekst);
  font-size: 18px;
  line-height: 1.72;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 700px) {
  body {
    font-size: 16px;
  }
}

a {
  color: var(--kleur-accent-diep);
}

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

.merkbalk {
  background: var(--kleur-merkbalk);
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  transition: padding 0.15s ease;
}
.merkbalk--klein {
  padding-block: 4px;
}
.wordmerk {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-decoration: none;
  color: var(--kleur-wit);
}
/* Het wordmerk is een vaste vorm, geen tekst in een lettertype. De letters
   zijn uit Source Serif 4 gehaald en als pad vastgelegd, zodat het merk er
   altijd hetzelfde uitziet — ook op het moment dat het lettertype nog moet
   laden of op een toestel dat de terugvalletter anders invult. Een logo dat
   per bezoek van vorm verandert is geen logo. */
.wordmerk-mark {
  display: block;
  height: 25px;
  width: auto;
  transition: height 0.15s ease;
}
.merkbalk--klein .wordmerk-mark {
  height: 19px;
}
.wordmerk-achter {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.42em;
  /* letter-spacing zet ook ruimte achter de laatste letter; die halen we
     er weer af zodat NIEUWS links en rechts uitlijnt op het EW erboven. */
  margin-right: -0.42em;
  color: var(--kleur-wit);
  transition: font-size 0.15s ease;
}
.merkbalk--klein .wordmerk-achter {
  font-size: 8px;
}
.merkbalk-acties {
  display: flex;
  align-items: center;
  gap: 14px;
}
.merkbalk-icoon {
  display: flex;
  color: var(--kleur-wit);
}
.abonneerknop {
  background: var(--kleur-geel);
  color: var(--kleur-balk);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 3px;
  white-space: nowrap;
  transition: padding 0.15s ease;
}
.merkbalk--klein .abonneerknop {
  padding-block: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .merkbalk,
  .wordmerk-mark,
  .wordmerk-achter {
    transition: none;
  }
}

.rubrieken {
  border-bottom: 1px solid var(--kleur-lijn);
  display: flex;
  gap: 20px;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rubrieken::-webkit-scrollbar {
  display: none;
}
.rubrieken a {
  padding: 11px 0;
  font-size: 14px;
  color: var(--kleur-tekst-interface);
  text-decoration: none;
  white-space: nowrap;
}
.rubrieken a.actief {
  color: var(--kleur-accent-diep);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--kleur-accent);
}

.melding {
  max-width: var(--kolom);
  margin: 0 auto;
  padding: 80px 20px 120px;
  flex: 1 0 auto;
}
.melding h1 {
  font-family: var(--letter-kop);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.melding p {
  color: var(--kleur-tekst-zacht);
  margin: 0;
}

.colofon {
  border-top: 1px solid var(--kleur-lijn);
  background: var(--kleur-vlak);
  padding: 28px 20px 36px;
}
.colofon > * {
  max-width: var(--kolom);
  margin-inline: auto;
}
.colofon-merk {
  font-family: var(--letter-kop);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.025em;
  margin: 0 auto 8px;
}
.colofon-oproep {
  font-size: 14px;
  line-height: 1.5;
  color: var(--kleur-tekst);
  margin: 0 auto 12px;
}
.colofon-jaar {
  font-size: 13px;
  line-height: 1.6;
  color: var(--kleur-tekst-zacht);
  margin: 10px auto 0;
}

.artikel {
  max-width: var(--kolom);
  margin: 0 auto;
  padding: 24px 20px 48px;
  flex: 1 0 auto;
}
.rubriek-label {
  color: var(--kleur-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.artikel h1 {
  font-family: var(--letter-kop);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0;
}
.intro {
  font-size: 19px;
  line-height: 1.55;
  color: var(--kleur-tekst-intro);
  margin: 14px 0 0;
}
.auteursregel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 13px;
  color: var(--kleur-tekst-zacht);
  margin-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kleur-lijn);
}
.auteur-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--kleur-merkbalk);
  flex: none;
}

@media (max-width: 700px) {
  .artikel h1 {
    font-size: 30px;
  }
  .intro {
    font-size: 17px;
  }
}

.media {
  margin: 20px -40px 0;
}
.speler {
  position: relative;
  background: var(--kleur-speler-achtergrond);
  aspect-ratio: 16 / 9;
}
.speler-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.speelknop {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 50%;
  background: var(--kleur-merkbalk);
  /* Een poster-frame kan van alles zijn, licht of donker. De schaduw houdt de
     knop op elk beeld leesbaar zonder dat er een rand omheen hoeft. */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.speelknop-driehoek {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 20px solid var(--kleur-wit);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.speler:not(.speler--klaar) .speelknop,
.speler:not(.speler--klaar) .speler-duur {
  display: none;
}
.speler-duur {
  position: absolute;
  right: 12px;
  bottom: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--kleur-wit);
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 3px;
}
.media figcaption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--kleur-tekst-zacht);
  padding: 8px 40px 14px;
  border-bottom: 1px solid var(--kleur-lijn);
}
.beeldcredit {
  color: var(--kleur-tekst-credit);
}

@media (max-width: 780px) {
  .media {
    margin-inline: -20px;
  }
  .media figcaption {
    padding-inline: 20px;
  }
}
.deelbalk {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.deelknop {
  border: 1px solid var(--kleur-lijn-knop);
  border-radius: 100px;
  padding: 5px 14px;
  font-family: var(--letter-tekst);
  font-size: 13px;
  color: var(--kleur-tekst-interface);
  background: none;
  text-decoration: none;
  cursor: pointer;
}
.deelknop--whatsapp {
  border-color: #25d366;
  color: #128c3e;
}

.tekst p {
  margin: 16px 0 0;
}
.tekst h2 {
  font-family: var(--letter-kop);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 30px 0 0;
}
.tekst ul {
  margin: 14px 0 0;
  padding-left: 22px;
}
.tekst li {
  margin-bottom: 6px;
}

.uitgelicht {
  background: var(--kleur-vlak);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 26px 0 0;
}
.uitgelicht p {
  font-family: var(--letter-kop);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -0.025em;
  margin: 0;
}
.uitgelicht footer {
  display: block;
  font-family: var(--letter-tekst);
  font-size: 13px;
  color: var(--kleur-tekst-zacht);
  margin-top: 10px;
}

.lees-ook {
  border-top: 1px solid var(--kleur-lijn);
  border-bottom: 1px solid var(--kleur-lijn);
  padding: 14px 0;
  margin: 26px 0 0;
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.lees-ook-label {
  background: var(--kleur-vlak);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
  flex: none;
}
.lees-ook a {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  flex: 1;
}

.verwant {
  border-top: 2px solid var(--kleur-balk);
  margin-top: 40px;
  padding-top: 14px;
}
.verwant h2 {
  font-family: var(--letter-kop);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.verwant ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.verwant li {
  border-bottom: 1px solid var(--kleur-lijn);
}
.verwant a {
  display: block;
  padding: 12px 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  text-decoration: none;
}

@media (max-width: 700px) {
  .uitgelicht p {
    font-size: 19px;
  }
  .verwant a {
    font-size: 16px;
  }
}

.advertentie {
  position: relative;
  width: 300px;
  margin: 28px auto;
  padding-top: 16px;
}
.advertentie-label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kleur-tekst-credit);
}
.advertentie-driehoek {
  position: absolute;
  top: 18px;
  right: 0;
  width: 0;
  height: 0;
  border-top: 9px solid rgba(255, 255, 255, 0.85);
  border-left: 9px solid transparent;
  z-index: 1;
}
.advertentie img {
  width: 300px;
  height: 250px;
  /* Het blok staat vast op 300 bij 250 zodat de pagina niet verspringt
     tijdens het laden. Wijkt een aangeleverde advertentie af van die
     verhouding, dan wordt hij bijgesneden in plaats van uitgerekt: een
     randje missen valt niemand op, uitgerekte letters wel. */
  object-fit: cover;
  border: 1px solid var(--kleur-lijn);
}

.reacties {
  border-top: 2px solid var(--kleur-balk);
  margin-top: 40px;
  padding-top: 14px;
}
.reacties h2 {
  font-family: var(--letter-kop);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.reacties-aantal {
  font-family: var(--letter-tekst);
  font-weight: 600;
  font-size: 13px;
  color: var(--kleur-tekst-zacht);
  vertical-align: 2px;
}

.reactie-oproep {
  background: var(--kleur-vlak);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.reactie-oproep p {
  margin: 0;
  font-size: 14px;
  color: var(--kleur-tekst);
}
.reactie-oproep-knoppen {
  display: flex;
  align-items: center;
  gap: 14px;
}
.reactie-knop {
  background: var(--kleur-merkbalk);
  color: var(--kleur-wit);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 3px;
  white-space: nowrap;
}
.reactie-link {
  font-size: 13px;
  white-space: nowrap;
}

.reactie-lijst,
.reactie-antwoorden {
  list-style: none;
  margin: 0;
  padding: 0;
}
.reactie {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--kleur-lijn);
}
.reactie-lijst > .reactie:first-child {
  border-top: 0;
  padding-top: 0;
}
/* De antwoorden staan als tweede kind in het raster en horen daarom onder
   beide kolommen door te lopen, ingesprongen onder de reactie erboven. */
.reactie-antwoorden {
  grid-column: 1 / -1;
  margin-left: 8px;
  padding-left: 14px;
  border-left: 2px solid var(--kleur-lijn);
}
.reactie-antwoorden .reactie {
  padding-bottom: 0;
}
.reactie-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kleur-lijn);
  color: #6f6b63;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: grid;
  place-items: center;
}
.reactie-kop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 3px;
  font-size: 13px;
  color: var(--kleur-tekst-zacht);
}
.reactie-naam {
  font-weight: 600;
  color: var(--kleur-tekst);
}
.reactie-tekst {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}
.reactie-acties {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--kleur-tekst-zacht);
}
.reactie-acties a {
  text-decoration: none;
}
/* De redactie is dezelfde afzender als in de auteursregel en krijgt daarom
   hetzelfde rode blokje, zodat je in de lijst meteen ziet wie de site is. */
.reactie-avatar--redactie {
  background: var(--kleur-merkbalk);
  color: var(--kleur-wit);
}

.reacties-meer {
  display: block;
  border: 1px solid var(--kleur-lijn-knop);
  border-radius: 4px;
  margin-top: 18px;
  padding: 11px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 700px) {
  .reactie-tekst {
    font-size: 14px;
  }
  .reactie-oproep {
    display: block;
  }
  .reactie-oproep-knoppen {
    margin-top: 12px;
  }
}

@media (min-width: 1000px) {
  body {
    font-size: 19px;
    line-height: 1.75;
  }
  .artikel h1 {
    font-size: 46px;
  }
  .intro {
    font-size: 21px;
  }
  .tekst h2 {
    font-size: 27px;
  }
  .uitgelicht p {
    font-size: 23px;
  }
  .lees-ook a,
  .verwant a {
    font-size: 18px;
  }
  .reactie-tekst {
    font-size: 16px;
  }
}

/* Beeld in de lopende tekst. Anders dan het media-slot bovenaan loopt dit blok
   niet breder dan de tekstkolom: het onderbreekt het lezen, het opent niet. De
   verhouding volgt de foto zelf, want een portret en een liggende opname vragen
   allebei iets anders en bijsnijden kost hier meer dan het oplevert. */
.artikelbeeld {
  margin: 28px 0 0;
}
.artikelbeeld img {
  width: 100%;
  height: auto;
  display: block;
}
.artikelbeeld figcaption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--kleur-tekst-zacht);
  padding-top: 8px;
}
.artikelbeeld .beeldcredit {
  color: var(--kleur-tekst-credit);
}

@media (min-width: 1000px) {
  .artikelbeeld figcaption {
    font-size: 13px;
  }
}

/* Skeletschermen. De schil van de site is echt; alleen de inhoud blijft laden.
   Een lichtveeg leest als "hier gebeurt iets", waar op- en neerdimmen als een
   animatie leest. */
.skelet {
  /* width: 100% is hier niet overbodig. Body is een flex-kolom, en een
     flex-item met auto-marges krimpt tot zijn inhoud. De blokken hierin zijn
     leeg en hebben dus geen eigen breedte, waardoor de hele kolom in elkaar
     zakt. Bij .artikel valt dat niet op omdat de tekst de breedte opduwt. */
  width: 100%;
  max-width: var(--kolom);
  margin: 0 auto;
  padding: 24px 20px 64px;
  flex: 1 0 auto;
}
.skelet-blok {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--kleur-vlak);
}
.skelet-blok::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: skelet-veeg 1.6s ease-in-out infinite;
}
/* De blokken starten iets uit de pas, anders veegt de hele pagina als één vlak. */
.skelet-blok:nth-child(3n)::after { animation-delay: 0.25s; }
.skelet-blok:nth-child(3n + 1)::after { animation-delay: 0.5s; }

@keyframes skelet-veeg {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skelet-blok::after { animation: none; }
}

.skelet-media { aspect-ratio: 16 / 9; margin-bottom: 22px; }
.skelet-kop { height: 34px; margin-bottom: 12px; }
.skelet-regel { height: 13px; margin-bottom: 9px; }
.skelet-regel--kort { width: 62%; }
.skelet-regel--half { width: 45%; }

.skelet-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 26px 0 8px;
}
.skelet-media--klein {
  margin-bottom: 10px;
}

.skelet-kaart {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--kleur-lijn);
}
.skelet-duim { aspect-ratio: 4 / 3; }

.skelet-veld { height: 42px; margin-bottom: 16px; }
.skelet-knop { height: 42px; width: 140px; border-radius: 3px; }

.skelet-reactie {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--kleur-lijn);
}
.skelet-rond { width: 32px; height: 32px; border-radius: 50%; }

.skelet-kolommen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.skelet-kolom { height: 240px; }

@media (max-width: 700px) {
  .skelet-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 26px 0 8px;
}
.skelet-media--klein {
  margin-bottom: 10px;
}

.skelet-kaart { grid-template-columns: 92px 1fr; }
  .skelet-kolommen { grid-template-columns: 1fr; }
  .skelet-kolom { height: 150px; }
}

/* Voor wie de pagina niet ziet is een eeuwig skelet stilte. Dit zegt tenminste
   wat er zou moeten gebeuren. */
.enkel-voorlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}