@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);
}
.wordmerk-naam {
  font-family: var(--letter-kop);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--kleur-wit);
  transition: font-size 0.15s ease;
}
.merkbalk--klein .wordmerk-naam {
  font-size: 26px;
}
.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-naam,
  .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;
  }
}