/* ═════════════════════════════════════════════════════════════
   STIJLBLAD — mauritsverhoef.nl

   Wil je kleuren, letters of maten aanpassen? Doe dat in het
   blok ":root" hieronder. Al het andere gebruikt deze waarden.
   ═════════════════════════════════════════════════════════════ */

/* ── Lettertypes (staan in de map /fonts, licentie SIL OFL) ── */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("/fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* ── Kleuren ──────────────────────────────────────────────── */
  --papier:        #ECE3CF;   /* achtergrond: sepia krantenpapier */
  --papier-donker: #E2D6BC;   /* vlakken, invoervelden            */
  --inkt:          #1F1B16;   /* tekst en lijnen                  */
  --inkt-zacht:    #5A4F42;   /* bijschriften                     */
  --accent:        #A82A1D;   /* drukkersrood: actief menu, links */
  --korrel:        0.07;      /* papierkorrel 0 (uit) – 0.15      */

  /* ── Lettertypes ──────────────────────────────────────────── */
  --letter-kop:   "Archivo", "Arial Narrow", sans-serif;   /* grote koppen */
  --letter-tekst: "Libre Caslon Text", Georgia, serif;      /* lopende tekst */
  --letter-mono:  "JetBrains Mono", ui-monospace, monospace;/* menu, bijschriften */
  --kop-breedte:  62%;        /* smalheid van de koppen (62% = zo smal mogelijk) */

  /* ── Maten ────────────────────────────────────────────────── */
  --max-breedte:  1440px;     /* maximale breedte van de pagina */
  --marge:        clamp(16px, 3.4vw, 48px);  /* rand links/rechts */
  --tussenruimte: clamp(16px, 1.7vw, 24px);  /* ruimte tussen kolommen */
  --tekst-grootte: 17px;
  --lijn:         1px solid var(--inkt);
}

/* ── Basis ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--papier);
  color: var(--inkt);
  font-family: var(--letter-tekst);
  font-size: var(--tekst-grootte);
  line-height: 1.55;
  max-width: var(--max-breedte);
  margin-inline: auto;
  padding-inline: var(--marge);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* papierkorrel + licht vergeelde randen */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(120, 90, 40, 0.10) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 0 0.08 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  opacity: 1;
  mix-blend-mode: multiply;
  filter: opacity(var(--korrel));
}
main { flex-grow: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.naar-inhoud { position: absolute; left: -9999px; }
.naar-inhoud:focus { left: var(--marge); top: 8px; background: var(--inkt); color: var(--papier); padding: 8px 12px; z-index: 10; }
.verborgen { position: absolute; left: -9999px; }

/* ── Kop (menu) ─────────────────────────────────────────────── */
.kop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--tussenruimte);
  align-items: center;
  min-height: 64px;
  border-bottom: 3px double var(--inkt);
  font-family: var(--letter-mono);
  font-size: 13px;
}
.kop__naam { font-weight: 700; text-decoration: none; }
.kop__menu { grid-column: span 2; display: flex; justify-content: space-between; gap: 16px; }
.kop__menu a { text-decoration: none; padding: 12px 0; }
.kop__menu a[aria-current="page"] { color: var(--accent); font-weight: 700; }

/* ── Grote paginanaam ───────────────────────────────────────── */
.paginanaam {
  margin: 0;
  padding: 0.12em 0 0.06em;
  font-family: var(--letter-kop);
  font-weight: 900;
  font-stretch: var(--kop-breedte);
  /* startwaarde; site.js rekt de naam daarna exact uit over de volle breedte */
  font-size: 15.6vw;
  line-height: 0.84;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: var(--lijn);
  overflow: hidden;
}
@media (min-width: 1440px) { .paginanaam { font-size: 220px; } }
.paginanaam span { display: inline-block; }
.paginanaam--klein { font-size: clamp(56px, 11vw, 160px); white-space: normal; }

/* ── Raster: 4 kolommen, op tablet 2, op telefoon 1 ─────────── */
.raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--tussenruimte);
  row-gap: 32px;
  padding: 24px 0 40px;
}
.kolom { min-width: 0; }
.kolom--links { display: flex; flex-direction: column; gap: 16px; }
.kolom--rechts { display: flex; flex-direction: column; }

/* ── Beeld met bijschrift (krantenstijl) ────────────────────── */
.beeld { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.beeld--breed, .beeld--portret, .beeld--kaft { grid-column: span 2; }
.beeld img { width: 100%; height: auto; }
.beeld--portret img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; filter: sepia(0.15); }
.beeld--kaft { align-items: center; background: var(--papier-donker); padding: 24px; }
.kaft-paar { display: flex; justify-content: center; gap: var(--tussenruimte); width: 100%; }
.kaft-paar img { width: auto; max-width: 100%; max-height: 420px; min-width: 0; mix-blend-mode: multiply; }
.beeld--kaft-dubbel .kaft-paar img { max-width: calc(50% - var(--tussenruimte) / 2); object-fit: contain; }
.gegevens--tijdlijn { grid-template-columns: minmax(0, 7.5em) 1fr; }
.kolom--rechts .gegevens { margin: 4px 0 0; }
.kolom--rechts .verder--los { margin-top: 10px; padding-top: 0; }
.beeld--kaft figcaption { align-self: stretch; }
figcaption {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--letter-mono);
  font-size: 12px;
  color: var(--inkt-zacht);
  border-top: var(--lijn);
  padding-top: 6px;
}

/* ── Home ───────────────────────────────────────────────────── */
.rollen {
  margin: 0;
  font-family: var(--letter-kop);
  font-stretch: 75%;
  font-weight: 800;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
}
.intro { margin: auto 0 0; font-family: var(--letter-mono); font-size: 14px; line-height: 1.6; }
.raster--home .beeld img { aspect-ratio: 16 / 9; object-fit: cover; }

/* ── Lijstjes (publicaties, cv) ─────────────────────────────── */
.kolomkop {
  margin: 0 0 0;
  padding-bottom: 10px;
  border-bottom: var(--lijn);
  font-family: var(--letter-mono);
  font-size: 14px;
  font-weight: 700;
}
.kolomkop ~ .kolomkop { margin-top: 32px; }
.lijst { list-style: none; margin: 0; padding: 0; font-family: var(--letter-mono); font-size: 14px; }
.lijst li, .lijst a {
  display: flex; justify-content: space-between; gap: 12px;
  text-decoration: none;
}
.lijst li { border-bottom: var(--lijn); }
.lijst li > span, .lijst a { padding: 10px 0; width: 100%; }
.lijst li > span + span { width: auto; white-space: nowrap; }
.lijst a span:last-child { white-space: nowrap; }
.verder {
  margin-top: 20px;
  font-family: var(--letter-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.kolom--rechts .verder:last-child { margin-top: auto; padding-top: 20px; }

/* Media- en podiumlijst op Over */
.rubriek .lijst--media { font-size: 15px; }
.lijst--media a { padding: 14px 0; align-items: baseline; }
.lijst--media .lijst__titel { font-family: var(--letter-tekst); font-size: 18px; }
.lijst--media .lijst__bron { color: var(--inkt-zacht); font-size: 13px; white-space: normal !important; text-align: right; max-width: 45%; }
.lijst--media a:hover .lijst__titel { color: var(--accent); }
@media (max-width: 640px) {
  .lijst--media a { flex-direction: column; gap: 4px; }
  .lijst--media .lijst__bron { text-align: left; max-width: none; }
}
.pagina-over main { padding-bottom: 40px; }

/* ── Lopende tekst ──────────────────────────────────────────── */
.tekst p { margin: 0 0 1em; hyphens: auto; }
.werkstuk .tekst p:first-child:not(:only-child)::first-letter,
.raster--over .tekst p:first-child::first-letter {
  float: left;
  font-family: var(--letter-kop);
  font-weight: 900;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 4px 6px 0 0;
}
.citaat {
  margin: 8px 0 0;
  padding: 16px 0;
  border-top: 3px double var(--inkt);
  border-bottom: 3px double var(--inkt);
  font-style: italic;
  font-size: 1.25em;
  line-height: 1.35;
}

/* ── Werk ───────────────────────────────────────────────────── */
.inhoudsopgave {
  display: flex; flex-wrap: wrap; gap: 8px 32px;
  padding: 14px 0;
  border-bottom: var(--lijn);
  font-family: var(--letter-mono);
  font-size: 14px;
}
.inhoudsopgave a { text-decoration: none; }
.rubriek { padding-top: 40px; }
.rubriek__kop {
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 3px double var(--inkt);
  font-family: var(--letter-kop);
  font-stretch: var(--kop-breedte);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  text-transform: uppercase;
}
.rubriek__kop span { color: var(--accent); }

/* Rij kaften, van links naar rechts (scrollt op kleine schermen) */
.kaften {
  list-style: none;
  margin: 0;
  padding: 28px 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  gap: var(--tussenruimte);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-bottom: var(--lijn);
}
.kaften li { scroll-snap-align: start; }
.kaften a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.kaften img { width: 100%; aspect-ratio: 303 / 475; object-fit: contain; mix-blend-mode: multiply; transition: transform .2s; }
.kaften a:hover img { transform: translateY(-4px); }
.kaften span { font-family: var(--letter-mono); font-size: 12px; line-height: 1.4; }
.kaften em { font-style: normal; color: var(--inkt-zacht); }

.werkstuk { border-bottom: var(--lijn); padding: 32px 0 40px; scroll-margin-top: 16px; }
.werkstuk__soort { margin: 0; font-family: var(--letter-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-zacht); }
.werkstuk__titel {
  margin: 0;
  font-family: var(--letter-kop);
  font-stretch: 75%;
  font-weight: 900;
  font-size: clamp(30px, 2.8vw, 44px);
  line-height: 0.98;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.werkstuk__makers { margin: 0; font-family: var(--letter-mono); font-size: 13px; line-height: 1.6; }
.gegevens { margin: 8px 0 0; font-family: var(--letter-mono); font-size: 13px; display: grid; grid-template-columns: auto 1fr; }
.gegevens dt, .gegevens dd { margin: 0; padding: 7px 0; border-top: var(--lijn); }
.gegevens dt { padding-right: 12px; font-weight: 700; }
.status {
  display: inline-block; align-self: flex-start;
  border: 2px solid var(--accent); color: var(--accent);
  padding: 2px 10px; transform: rotate(-3deg);
  font-family: var(--letter-mono); font-size: 13px; font-weight: 700; text-transform: uppercase;
}

/* Video in breed kader (16:9). Speelt pas af na klikken — geen YouTube-cookies vooraf. */
.video {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--inkt);
  overflow: hidden;
}
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video img { filter: sepia(0.2) contrast(1.05); transition: filter .2s; }
.video:hover img { filter: none; }
.video__knop {
  position: absolute; left: 50%; top: 50%;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--papier); color: var(--inkt);
  box-shadow: 0 0 0 2px var(--inkt);
  transition: transform .15s, background .15s;
}
.video__knop svg { margin-left: 4px; }
.video:hover .video__knop { transform: scale(1.08); background: var(--accent); color: var(--papier); }
.video__label { position: absolute; left: -9999px; }

.beeld-extra { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.beeld-extra img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: sepia(0.2); transition: filter .2s; }
.beeld-extra a:hover img { filter: none; }

/* ── Contact ───────────────────────────────────────────────── */
.formulier { grid-column: span 2; display: flex; flex-direction: column; gap: 18px; }
.veld { display: flex; flex-direction: column; gap: 6px; }
.veld label { font-family: var(--letter-mono); font-size: 13px; font-weight: 700; }
.veld input, .veld textarea {
  font: inherit;
  color: var(--inkt);
  background: var(--papier-donker);
  border: 0;
  border-bottom: 2px solid var(--inkt);
  padding: 12px;
  border-radius: 0;
  min-height: 48px;
}
.veld textarea { resize: vertical; }
.knop {
  align-self: flex-start;
  min-height: 48px;
  padding: 12px 24px;
  font-family: var(--letter-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--papier);
  background: var(--inkt);
  border: 0;
  cursor: pointer;
}
.knop:hover { background: var(--accent); }
.raster--contact .gegevens, .gegevens--stapel { grid-template-columns: 1fr; }
.gegevens--stapel dd { border-top: 0; padding-top: 0; }
.raster--contact .gegevens dt { padding-bottom: 0; }
.raster--contact .gegevens dd { border-top: 0; padding-top: 2px; }
.kantlijn { margin: 0; font-family: var(--letter-mono); font-size: 13px; color: var(--inkt-zacht); border-top: var(--lijn); padding-top: 10px; }

/* ── Voet ───────────────────────────────────────────────────── */
.voet {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  padding: 16px 0 24px;
  border-top: 3px double var(--inkt);
  font-family: var(--letter-mono);
  font-size: 13px;
}
.voet a { font-weight: 700; text-decoration: none; }
.voet__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ═════════════ TABLET (tot 1024 px breed) ═════════════ */
@media (max-width: 1024px) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beeld--breed, .beeld--portret, .beeld--kaft { grid-column: 1 / -1; order: -1; }
  .formulier { grid-column: 1 / -1; }
  .werkstuk .kolom--links { grid-column: 1 / -1; order: -2; }
  .werkstuk .kolom--rechts { grid-column: 1 / -1; }
  .raster--over .kolom--links { grid-column: 1 / -1; }
  .raster--over .beeld--portret { order: 0; }
  .kop { grid-template-columns: auto 1fr; }
  .kop__plaats { display: none; }
  .kop__menu { grid-column: auto; justify-content: flex-end; gap: 24px; }
}

/* ═════════════ TELEFOON (tot 640 px breed) ═════════════ */
@media (max-width: 640px) {
  :root { --tekst-grootte: 16px; }
  .raster { grid-template-columns: minmax(0, 1fr); }
  .raster > * { grid-column: 1 / -1; }
  .kop { grid-template-columns: 1fr; padding: 8px 0 4px; }
  .kop__menu { justify-content: space-between; gap: 8px; }
  .kop__nr { display: none; }
  .paginanaam { white-space: normal; }
  .paginanaam span { display: block; width: fit-content; }
  .kaft-paar img { max-height: 340px; }
  .kaften { grid-auto-columns: 42%; }
  .video__knop { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}