/* ==========================================================================
   V1 "Het dossier" — sammeijer.com
   Vormtaal: warm papier, hairlines, tabulaire cijfers.
   Accentkleur = de annotatielaag: bron, markering, actieve staat. Nooit decoratie.
   Alle default-states zijn EINDSTATES. Verbergen gebeurt uitsluitend in JS,
   na de reduced-motion-check.
   ========================================================================== */

:root {
  --paper: #f5f2ec;
  --paper-2: #eee9df;
  --paper-3: #e5dfd2;
  --ink: #17140f;
  --ink-2: #4a443b;
  --ink-3: #6b6355;
  --rule: rgba(23, 20, 15, 0.14);
  --rule-2: rgba(23, 20, 15, 0.3);
  --accent: #a33418;
  --accent-tint: rgba(163, 52, 24, 0.075);
  --on-dark: #f1ece2;
  --on-dark-2: #b7ad9c;
  --accent-dark: #e08a62;

  --met-size: clamp(2.1rem, 5.2vw, 3.3rem);
  /* Eén hover-taal voor de hele pagina: dezelfde tint, dezelfde duur. Stond
     eerder per component anders ingesteld (7,5% tegen 6% dekking, 10px tegen
     16px inspringing), waardoor gelijksoortige rijen zich verschillend gedroegen. */
  --hover-tint: color-mix(in srgb, var(--accent) 10%, transparent);
  --hover-tint-dark: rgba(241, 236, 226, 0.08);
  --t: 0.28s;
  --bar: 52px;
  --pad: clamp(20px, 4.2vw, 60px);
  --maxw: 1280px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.62 var(--sans);
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

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

/* focus: echte ring voor toetsenbord, geen ring bij muisklik */
:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline-color: transparent; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font: 500 13px/1 var(--mono);
}
.skip:focus { left: 8px; top: 8px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ============================ chrome: de bandeau ========================== */

/* Dekkend, geen blur. De doorschijnende variant liet displaykoppen als grijze
   vlek door de balk schemeren; blur hoort bij glas, dit is papier. */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--bar);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.bar-in {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.bar-id { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bar-name { font: 500 13px/1 var(--mono); letter-spacing: 0.06em; white-space: nowrap; }
.bar-sep { color: var(--ink-3); }
.bar-role {
  font: 400 12px/1 var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-now {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.bar-now-num { color: var(--accent); }
.bar-act { display: flex; gap: 4px; }
.bar-link {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.bar-link:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-tint); }

@media (max-width: 860px) {
  .bar-role, .bar-sep { display: none; }
  .bar-now-label { display: none; }
}
@media (max-width: 520px) {
  .bar-link + .bar-link { display: none; }
}

/* ============================== gedeelde delen =========================== */

[data-sec] { scroll-margin-top: var(--bar); }

/* Op breedte schalen, niet op hoogte: met een vh-maat kreeg een mobiel scherm
   bijna dezelfde sectie-marge als een breed scherm, goed voor 16% van het beeld
   per overgang. Op vw krimpt mobiel wel en blijft het bureaubladritme staan. */
.sec { padding: clamp(48px, 6vw, 104px) 0 clamp(40px, 4.6vw, 84px); }
.sec + .sec { border-top: 1px solid var(--rule); }
.sec-tint { background: var(--paper-2); }

.sec-head {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 clamp(16px, 2.4vw, 32px);
  align-items: baseline;
  margin-bottom: clamp(28px, 4vh, 52px);
}
.sec-num {
  font: 500 12px/1.5 var(--mono);
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.55em;
}
.sec-h {
  font: 400 clamp(1.75rem, 3.1vw, 2.7rem)/1.08 var(--serif);
  letter-spacing: -0.018em;
  max-width: 20ch;
}
.sec-lead {
  grid-column: 2;
  margin-top: 14px;
  max-width: 58ch;
  color: var(--ink-2);
  font-size: 0.985rem;
}
@media (max-width: 700px) {
  .sec-head { grid-template-columns: 1fr; gap: 10px; }
  .sec-num { padding-top: 0; }
  .sec-lead { grid-column: 1; }
}

.tick {
  width: 11px;
  height: 11px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: square;
}

.src {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 12.5px/1.4 var(--mono);
  letter-spacing: 0.01em;
  color: var(--accent);
}

/* ================================ §1 claim =============================== */

.hero { padding: clamp(34px, 5vh, 66px) 0 clamp(30px, 4vh, 52px); }
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
  gap: clamp(30px, 4vw, 68px);
  align-items: stretch;
}
/* De linkerkolom eindigde ~200px boven de dossierkaart, waardoor er linksonder
   een leeg vlak overbleef dat als restruimte las, niet als rust. De slotnotitie
   zakt nu naar de onderkant van de kolom, zodat beide kolommen gelijk aflopen. */
.hero-main { min-width: 0; display: flex; flex-direction: column; }
.hero-h {
  margin: 18px 0 0;
  font: 400 clamp(2.6rem, 6.6vw, 5.1rem)/0.99 var(--serif);
  letter-spacing: -0.028em;
}
.hero-h .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero-h .w-i { display: inline-block; will-change: transform; }
.hero-sub {
  margin-top: clamp(18px, 2.4vh, 28px);
  max-width: 54ch;
  font-size: clamp(1rem, 1.15vw, 1.09rem);
  color: var(--ink-2);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
}
.chip {
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-2) 70%, transparent);
  padding: 7px 10px;
}
.hero-act {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  margin-bottom: clamp(28px, 4vh, 46px);
}
.hero-note {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  max-width: 46ch;
  font: 400 1.02rem/1.5 var(--serif);
  font-style: italic;
  color: var(--ink-2);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 18px;
  border: 1px solid var(--ink);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn-solid { background: var(--ink); color: var(--paper); }
/* Beide knoppen gaan dezelfde kant op: accent betekent aanraakbaar. De lijnknop
   sprong eerder juist naar inkt, tegengesteld aan de gevulde knop ernaast. */
.btn-solid:hover { background: var(--accent); border-color: var(--accent); }
.btn-line:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-tint); }
.btn-ar { transition: transform var(--t) var(--ease); }
.btn:hover .btn-ar { transform: translateX(5px); }

/* dossierkaart rechts */
.hero-file { min-width: 0; }
/* de kaart ligt op tafel: JS voedt --tilt-x/--tilt-y, hier staat de rusthouding */
.photo {
  position: relative;
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  padding: 9px 9px 0;
  transform: perspective(1100px)
             rotateX(calc(var(--tilt-x, 0) * 1deg))
             rotateY(calc(var(--tilt-y, 0) * 1deg));
  will-change: transform;
}
.photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(0.22) contrast(1.03);
}
.photo figcaption {
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 9px 1px 10px;
  border-top: 1px solid var(--rule);
  margin-top: 9px;
}
.seal-w {
  position: absolute;
  left: 14px;
  top: 14px;
  width: clamp(78px, 9vw, 104px);
  height: clamp(78px, 9vw, 104px);
  transform: translate3d(calc(var(--sx, 0) * 1px), calc(var(--sy, 0) * 1px), 0)
             rotate(calc(var(--sr, 0) * 1deg));
  will-change: transform;
}
/* Een stempel dankt zijn geloofwaardigheid aan onvolkomenheid: scheef gezet en
   niet volledig dekkend, anders leest hij als een logo dat op de foto is geplakt. */
.seal {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: 0.82;
  transform: rotate(-4deg);
}
.seal-r, .seal-r2 {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
}
.seal-r2 { stroke-width: 0.8; }
/* Het randschrift draait langzaam door: één omwenteling per anderhalve minuut.
   Traag genoeg om nooit af te leiden, snel genoeg dat de hero na de entree niet
   stilvalt. */
.seal-t {
  font: 500 6.6px var(--mono);
  letter-spacing: 0.16em;
  fill: var(--accent);
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: seal-draai 92s linear infinite;
}
@keyframes seal-draai {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.seal-c { font: 500 15px var(--mono); letter-spacing: 0.08em; fill: var(--accent); }

.idl { margin-top: 18px; border-top: 1px solid var(--rule-2); }
/* 5,5rem is genoeg voor het langste label ("WOONPLAATS", gemeten 79px) en laat
   de waardekolom 219 tot 227px over. Het e-mailadres vraagt er 199, dus op brede
   schermen past label en waarde weer naast elkaar. */
.idl-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 10px;
  padding: 9px 4px 9px 0;
  border-bottom: 1px solid var(--rule);
}
.idl-k {
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* break-word brak het e-mailadres midden in het woord; alleen breken als een
   woord op zichzelf niet past, en de kolom is daarvoor breed genoeg gemaakt */
.idl-v {
  font: 400 13.5px/1.5 var(--mono);
  color: var(--ink);
  word-break: normal;
  overflow-wrap: break-word;
}
.idl-v a { transition: color var(--t) var(--ease); }
.idl-v a:hover { color: var(--accent); }
/* Label boven waarde zolang de kaartkolom te smal is voor het e-mailadres.
   Gemeten grens: onder 1230px blijft er minder dan de benodigde 199px over en
   brak het adres midden in het woord (contact@sammeijer.co / m). Daarboven past
   het naast elkaar en blijft de kaart ruim 200px korter. */
@media (min-width: 901px) and (max-width: 1229px) {
  .idl-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* inhoudsopgave */
/* Onderrand op de container, niet alleen op de items: bij een niet-gevulde
   laatste rij stopte de afsluitlijn halverwege en las de opsomming als afgebroken. */
.index {
  margin-top: clamp(34px, 5vh, 60px);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 1080px) { .index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ix { border-bottom: 1px solid var(--rule); }
/* Eén hover-gedrag voor elke aanraakbare rij: de tint zit op de rij zelf, niet op
   de link erin. Zat hij op de link, dan kreeg elke rij een ander formaat vlak
   omdat de links verschillende binnenmarges hebben (0/8/6px). Nu dekt de tint
   overal precies de rij. */
.ix-a {
  display: block;
  padding: 13px 12px 13px 0;
}
.ix { transition: background-color var(--t) var(--ease); }
.ix:has(.ix-a:hover), .ix:has(.ix-a:focus-visible) { background: var(--hover-tint); }
.ix-n { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--accent); }
.ix-t { display: block; margin-top: 7px; font: 500 14px/1.2 var(--sans); }
.ix-d { display: block; margin-top: 3px; font: 400 12.5px/1.35 var(--sans); color: var(--ink-3); }

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-main { display: block; }
  .hero-note { margin-top: clamp(28px, 4vh, 46px); }
  .hero-file { max-width: 460px; }
}
/* Tussen 601 en 900px stond de dossierkaart op 460px in een kolom van ~700px:
   een lege strook van ruim 240px naast het eerste scherm. Foto en gegevens
   staan daar nu naast elkaar en vullen de breedte. */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-file {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 34px);
    align-items: start;
  }
  .idl { margin-top: 0; }
}

/* =============================== §2 bewijs =============================== */

.mets { border-top: 1px solid var(--rule-2); }
.met { border-bottom: 1px solid var(--rule); }
/* Vaste cijferkolom. Met `max-content` hing het label aan de rechterkant van het
   cijfer, waardoor de vier labels op vier x-posities begonnen (870/849/810/750).
   De breedte wordt afgeleid uit de cijfergrootte zelf: het langste bedrag telt
   negen tekens en monospace loopt op 0,6em, dus 5,6em geeft ruimte met marge.
   Niet in `ch` uitdrukken: dat rekent met de letter van de container (17px),
   niet met die van het cijfer (52,8px). */
.met-a {
  display: grid;
  grid-template-columns: calc(var(--met-size) * 5.6) minmax(0, 1fr);
  grid-template-areas:
    "val lab"
    "rul rul"
    "src ctx";
  align-items: baseline;
  column-gap: clamp(14px, 2vw, 30px);
  padding: clamp(20px, 2.6vh, 30px) 8px clamp(14px, 1.8vh, 20px);
}
/* §2 reageert bewust niet op de muis. De rij blijft klikbaar en licht nog steeds
   de bijbehorende periode in §3 op; alleen het cijferblok zelf verandert niet. */
.met-v {
  grid-area: val;
  font: 500 var(--met-size)/1 var(--mono);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  will-change: transform;
}
.met-l {
  grid-area: lab;
  font: 400 clamp(1rem, 1.5vw, 1.2rem)/1.3 var(--serif);
  color: var(--ink);
}
.met-rule {
  grid-area: rul;
  height: 1px;
  background: var(--rule-2);
  margin: 16px 0 12px;
  transform-origin: left center;
}
.met-src { grid-area: src; align-self: start; }
.met-ctx {
  grid-area: ctx;
  font-size: 0.9rem;
  color: var(--ink-2);
  align-self: start;
}

@media (max-width: 760px) {
  .met-a {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "val"
      "lab"
      "rul"
      "src"
      "ctx";
    row-gap: 2px;
  }
  .met-l { margin-top: 6px; }
  .met-ctx { margin-top: 8px; }
}

.annex {
  margin-top: clamp(30px, 4vh, 48px);
  border-top: 1px solid var(--rule-2);
  padding-top: 16px;
}
.annex-h {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
/* vaste kolomaantallen: een deelbaar raster laat geen lege cellen achter,
   die zouden als grijs vlak oplichten omdat de hairlines uit de containerkleur komen */
.annex-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
/* flex-kolom zodat de bronregel aan de onderkant hangt: met een label dat naar
   een tweede regel liep stond de bron in vak 1 anders dan in vak 2 tot 4 */
.annex-i {
  background: var(--paper);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
}
.annex-v {
  font: 500 1.35rem/1.1 var(--mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.annex-l { display: block; margin-top: 7px; font-size: 0.88rem; color: var(--ink-2); }
.annex-s { margin-top: auto; padding-top: 10px; font-size: 11.5px; }
.sec-tint .annex-i { background: var(--paper-2); }
@media (max-width: 1000px) { .annex-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .annex-list { grid-template-columns: minmax(0, 1fr); } }

/* ============================== §3 loopbaan ============================== */
/* het focal moment: één doorlopende as, sleepbaar en scrollbaar */

.tl { position: relative; }

.tl-axis {
  position: sticky;
  top: var(--bar);
  z-index: 20;
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-2);
  padding-top: 12px;
  padding-bottom: 12px;
}
.tl-read {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 14px;
  min-height: 26px;
}
.tl-year {
  font: 500 1.5rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--accent);
  min-width: 4.6ch;
}
.tl-co { font: 400 1.18rem/1.1 var(--serif); }
.tl-role { font: 400 12.5px/1.3 var(--mono); color: var(--ink-2); }

/* Zijmarge zodat het eerste en laatste jaartal onder hun streepje kunnen staan
   in plaats van naar binnen geklemd te worden. Met die klem lazen het eerste en
   laatste jaarvak ~10% korter dan de rest, terwijl de tekst erboven belooft dat
   de as chronologisch klopt. */
.tl-track {
  position: relative;
  height: 54px;
  margin: 0 26px;
  touch-action: pan-y;
  cursor: ew-resize;
}
.tl-line-base {
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  height: 1px;
  background: var(--rule-2);
}
.tl-ticks { position: absolute; inset: 0; }
.tl-tick { position: absolute; top: 20px; width: 1px; height: 7px; background: var(--rule-2); }
.tl-tick-l {
  position: absolute;
  top: 32px;
  transform: translateX(-50%);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
}
.tl-year-short { display: none; }

.tl-bands { position: absolute; left: 0; right: 0; top: 1px; height: 18px; }
.tl-band {
  position: absolute;
  top: 0;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* Drie onderscheidbare staten. Met paper-3 als rusttoestand waren de twee nog
   niet gelezen periodes niet van de achtergrond te onderscheiden: de kop belooft
   vier werkgevers, de as toonde er twee. */
.tl-band::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 1px solid var(--rule-2);
  background: color-mix(in srgb, var(--ink) 13%, var(--paper-3));
  transition: background-color var(--t) var(--ease);
}
/* onzichtbaar aanraakdoel: de band is 16px hoog, de vinger krijgt er 30 */
.tl-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  bottom: -7px;
}
.tl-band:hover::before { background: color-mix(in srgb, var(--accent) 32%, var(--paper-3)); }
.tl-band.is-on::before { background: var(--accent); }
.tl-band.is-linked::before { background: color-mix(in srgb, var(--accent) 44%, var(--paper-3)); }
.tl-band.is-done::before { background: color-mix(in srgb, var(--ink) 34%, var(--paper-3)); }

/* precies zo hoog als de balk: stak hij verder door, dan las het onderste stuk
   als een losse streep tussen de jaarstreepjes */
.tl-head {
  position: absolute;
  left: 0;
  top: 1px;
  height: 18px;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
  pointer-events: none;
  will-change: transform;
}
/* De markering was een ruit van 9px: klein, scherp, en niet te lezen als greep.
   Nu een afgeronde knop op de balk zelf, met een schaduw die hem van de as tilt
   en een reactie op aanraken. */
.tl-grip {
  position: absolute;
  left: 0;
  top: -7px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}
.tl-grip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 6px;
  background: var(--accent);
  box-shadow:
    0 1px 3px rgba(23, 20, 15, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.34s var(--ease), box-shadow 0.34s var(--ease);
}
/* twee greeplijntjes, zodat de knop leest als iets wat je vastpakt */
.tl-grip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 13px;
  width: 6px;
  height: 8px;
  margin-left: -3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--paper) 72%, transparent) 0 1px,
    transparent 1px 3px,
    color-mix(in srgb, var(--paper) 72%, transparent) 3px 4px,
    transparent 4px 6px);
  pointer-events: none;
  transition: transform 0.34s var(--ease);
}
.tl-grip:hover::before { transform: scale(1.16); box-shadow: 0 2px 8px rgba(23, 20, 15, 0.34); }
.tl-grip:hover::after { transform: scale(1.16); }
.tl-grip:active::before { transform: scale(0.94); }
.tl-grip:active::after { transform: scale(0.94); }
.tl-grip:active { cursor: grabbing; }
/* Bandeau plus as aten samen 23% van het scherm; met deze marges 21%. */
.tl-hint {
  margin-top: 8px;
  font: 400 11.5px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* de dossierregels */
.tl-recs { padding-top: clamp(26px, 4vh, 44px); }
.tl-rec {
  scroll-margin-top: 210px;
  padding: clamp(22px, 3vh, 34px) 0 clamp(26px, 3.4vh, 40px);
  border-bottom: 1px solid var(--rule);
  min-height: clamp(340px, 48vh, 500px);
  border-left: 1px solid transparent;
  padding-left: clamp(14px, 2vw, 26px);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.tl-rec.is-active { border-left-color: var(--accent); }
.tl-rec.is-past { border-left-color: var(--rule-2); }
.tl-rec.is-linked { background: var(--accent-tint); border-left-color: var(--accent); }

.tl-rec-per {
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.tl-rec-co {
  margin-top: 8px;
  font: 400 clamp(1.55rem, 3vw, 2.35rem)/1.06 var(--serif);
  letter-spacing: -0.02em;
}
.tl-rec-role {
  margin-top: 4px;
  font: 400 13px/1.4 var(--mono);
  color: var(--ink-2);
}
.tl-rec-sum {
  margin-top: 18px;
  max-width: 58ch;
  font: 400 clamp(1.02rem, 1.35vw, 1.16rem)/1.5 var(--serif);
}
/* De opsommingsregels liepen tot ~101 tekens; 56ch levert gemeten ~75, de
   bovengrens van wat comfortabel leest. */
.tl-lines { margin-top: 20px; max-width: 56ch; }
.tl-line {
  position: relative;
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
}
.tl-line-n { font: 400 11px/1.8 var(--mono); color: var(--accent); }
.tl-line-t { font-size: 0.955rem; color: var(--ink-2); }
.tl-rec-src {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}


@media (max-width: 640px) {
  .tl-year-full { display: none; }
  .tl-year-short { display: inline; }
  .tl-rec { min-height: 0; scroll-margin-top: 150px; }
}

/* mobiel: de as is een liniaal, geen paneel. Sticky bandeau + as aten bijna
   een derde van het scherm; zo blijft er ruimte over om te lezen. */
@media (max-width: 700px) {
  .tl-axis { padding-top: 10px; padding-bottom: 10px; }
  .tl-read { margin-bottom: 10px; min-height: 20px; gap: 2px 10px; flex-wrap: nowrap; }
  .tl-year { font-size: 1.2rem; min-width: 4.2ch; }
  .tl-co {
    font-size: 1.02rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tl-role { display: none; }
  .tl-track { height: 42px; }
  .tl-bands { top: 5px; }
  .tl-line-base { top: 25px; }
  .tl-tick { top: 19px; height: 6px; }
  .tl-tick-l { top: 29px; }
  .tl-head { bottom: 8px; }
  .tl-hint { display: none; }
  .tl-recs { padding-top: 22px; }
}

/* ============================ §4 vakdiepgang ============================= */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: clamp(22px, 3vh, 34px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.filter {
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--rule-2);
  padding: 9px 12px;
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.filter:hover { border-color: var(--accent); color: var(--accent); background: var(--hover-tint); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter-n { font-size: 10px; color: currentColor; margin-left: 6px; }

.doms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.dom {
  background: var(--paper);
  padding: clamp(20px, 2.6vh, 28px) clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  will-change: transform;
}
.sec-tint .dom { background: var(--paper-2); }
.dom-t { font: 400 1.22rem/1.2 var(--serif); letter-spacing: -0.01em; }
.dom-b { font-size: 0.94rem; color: var(--ink-2); }
.dom-s { margin-top: auto; padding-top: 4px; font-size: 11.5px; }
.dom[hidden] { display: none; }
.dom.is-linked { background: color-mix(in srgb, var(--accent) 7%, var(--paper)); }
.sec-tint .dom.is-linked { background: color-mix(in srgb, var(--accent) 7%, var(--paper-2)); }
.doms-empty { font: 400 13px/1.5 var(--mono); color: var(--ink-3); padding: 22px 4px; }
@media (max-width: 980px) { .doms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Eén kolom: de scheiding als rand op de kaart in plaats van als rastergat.
   Een gat van 1px landt bij fractionele kaarthoogtes op een halve device-pixel
   en verdwijnt dan om en om uit beeld. */
@media (max-width: 620px) {
  .doms {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    background: none;
  }
  /* algemene broer-selector: bij filteren mag een verborgen kaart geen rand
     achterlaten boven de kaart die dan als eerste zichtbaar is */
  .dom:not([hidden]) ~ .dom:not([hidden]) { border-top: 1px solid var(--rule); }
}

/* ============================= §5 werkwijze ============================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 46px);
}
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { display: flex; flex-direction: column; }
.step-tag {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--accent);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-2);
}
.step-t { margin-top: 14px; font: 400 1.24rem/1.2 var(--serif); }
/* De marge onder de tekst waarborgt de minimumafstand; `margin-top: auto` op de
   annotatie slokt de rest op en hangt "Wat er misgaat" aan de onderkant van de
   kaart. De zes stappen verschillen in tekstlengte; zonder dit begon die kop in
   elke kolom op een andere hoogte. */
.step-b { margin-top: 8px; margin-bottom: 24px; font-size: 0.94rem; color: var(--ink-2); }
.step-note { margin-top: auto; padding-top: 20px; position: relative; }
/* Eén rechte accentlijn die zichzelf trekt. De handgetekende golf was een
   sierscheiding in een systeem waarin elke andere lijn liniaalrecht is, en de
   streepanimatie erop groeide niet-monotoon (inkt sprong ~300px). */
.mark {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform-origin: left center;
}
.step-r { margin-top: 10px; font-size: 0.88rem; color: var(--ink-2); }
.step-r-t { display: block; }
.step-r-k {
  display: block;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

/* ============================== §6 AI-edge =============================== */

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 7px 10px;
  margin-bottom: 16px;
}
.nodes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.node {
  background: var(--paper);
  padding: clamp(18px, 2.4vh, 26px) clamp(16px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sec-tint .node { background: var(--paper-2); }
.node-n { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--accent); }
.node-t { font: 400 1.16rem/1.2 var(--serif); }
.node-b { font-size: 0.9rem; color: var(--ink-2); }
.node-p {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.node-p-k {
  display: block;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.node-p-v {
  font: 400 12.5px/1.5 var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* Zolang de vier kaarten naast elkaar staan hangt de haarlijn boven dit blok aan
   de hoogte ervan; met één tegen twee regels lag hij op vier verschillende
   hoogtes binnen dezelfde omkaderde rij (gemeten: 56px verschil). */
@media (min-width: 561px) {
  .node-p-v { display: block; min-height: 6em; }
}
@media (max-width: 1000px) { .nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nodes { grid-template-columns: minmax(0, 1fr); } }
/* Vier vaste kolommen zodra er ruimte voor is. Met `auto-fit` en een ondergrens
   van 288px viel de vierde kaart op sommige breedtes alleen naar de volgende
   regel, waardoor er een losse kaart onder een rij van drie hing. */
.stack {
  margin-top: clamp(28px, 4vh, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
}
@media (min-width: 1040px) {
  .stack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.st { border-top: 1px solid var(--rule-2); padding-top: 14px; }
.st-t { font: 500 13px/1.3 var(--mono); letter-spacing: 0.02em; }
.st-b { margin-top: 8px; font-size: 0.92rem; color: var(--ink-2); }

/* ============================== §7 persoon =============================== */

.pers {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}
.pers-txt { min-width: 0; }
/* §7 stond als enige sectie buiten het stramien: geen §-nummer en een kop tegen
   de buitenmarge. Nu dezelfde koppenblok als §2 tot §8; de schreefletter in de
   lopende tekst blijft, dat is de ene bewuste afwijking van deze sectie. */
.pers-p {
  margin-top: 20px;
  max-width: 62ch;
  font: 400 clamp(1.02rem, 1.35vw, 1.14rem)/1.62 var(--serif);
  color: var(--ink-2);
}
.pers-p:first-of-type { color: var(--ink); }
.specs { border-top: 1px solid var(--rule-2); }
.spec-g { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.spec-h {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.spec-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
}
.spec-k { font: 400 14px/1.5 var(--sans); white-space: nowrap; }
.spec-lead {
  flex: 1;
  height: 1px;
  min-width: 12px;
  background: repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 5px);
  transform: translateY(-3px);
}
.spec-v { font: 400 12.5px/1.5 var(--mono); color: var(--ink-3); text-align: right; }
/* lange waarden (de vakkenlijst) breken lelijk tegen de stippellijn: die
   krijgen hun eigen regel onder het label */
.spec-row.is-stack { display: block; }
.spec-row.is-stack .spec-lead { display: none; }
.spec-row.is-stack .spec-v { display: block; text-align: left; margin-top: 3px; }
@media (max-width: 860px) {
  .pers { grid-template-columns: 1fr; }
}

/* ============================== §8 contact =============================== */

.contact {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(56px, 9vh, 116px) 0 clamp(30px, 4vh, 48px);
}
.contact .sec-num { color: var(--accent-dark); }
.contact .sec-h { color: var(--on-dark); }
.contact .sec-lead { color: var(--on-dark-2); }
.acts { border-top: 1px solid rgba(241, 236, 226, 0.2); }
.act { border-bottom: 1px solid rgba(241, 236, 226, 0.2); }
/* De onderrand van de laatste rij plus de bovenrand van het colofon maakten een
   lege strook tussen twee lijnen: dat las als een vierde, lege tabelrij. */
.act:last-child { border-bottom: 0; }
/* Vier kolommen op één regel: label · waarde · toelichting · pijl. Stond eerder
   in drie kolommen met de toelichting ónder de waarde en de pijl helemaal rechts
   tegen de paginarand; die pijl hoorde bij niets meer. Het labelveld was ook te
   smal: "DOWNLOAD CV" meet 128px en kreeg er 104. */
.act-a {
  display: grid;
  grid-template-columns: 9rem minmax(0, auto) minmax(0, 1fr) 1.4rem;
  align-items: baseline;
  gap: 0 clamp(16px, 2.4vw, 38px);
  padding: clamp(18px, 2.4vh, 26px) 6px;
}
/* alle vier op regel één: met alleen een kolomtoewijzing schuift de plaatsings-
   cursor door en zakt de toelichting naar een tweede regel */
.act-k, .act-v, .act-m, .act-ar { grid-row: 1; }
.act { transition: background-color var(--t) var(--ease); }
.act:has(.act-a:hover), .act:has(.act-a:focus-visible) { background: var(--hover-tint-dark); }
/* De pijl staat in de opmaak vóór de toelichting; zonder expliciete kolommen
   plaatst het raster op DOM-volgorde en belandde de toelichting in het
   pijlkolommetje van 1,4rem, waar hij het beeld uit liep. */
.act-k {
  grid-column: 1;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
/* mono: in dit systeem is monospace de datataal, en het conversiepunt is de
   laatste plek waar je die belofte moet breken. Hetzelfde adres staat in de
   hero al in mono. */
.act-v {
  grid-column: 2;
  font: 400 clamp(1.02rem, 1.9vw, 1.42rem)/1.25 var(--mono);
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
}
.act-v::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--accent-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s var(--ease);
}
.act-a:hover .act-v::after, .act-a:focus-visible .act-v::after { transform: scaleX(1); }
.act-m {
  grid-column: 3;
  font: 400 12px/1.4 var(--mono);
  color: var(--on-dark-2);
  text-align: right;
  white-space: nowrap;
}
.act-ar {
  grid-column: 4;
  justify-self: end;
  font: 400 18px/1 var(--mono);
  color: var(--on-dark-2);
  transition: transform 0.28s var(--ease), color 0.28s var(--ease);
}
.act-a:hover .act-ar, .act-a:focus-visible .act-ar { transform: translateX(6px); color: var(--accent-dark); }
/* Drie gelijke velden in plaats van drie losse stukken tekst die toevallig op
   één regel eindigden; het laatste veld sluit rechts aan op de kolomrand. */
.colofon {
  margin-top: clamp(28px, 4vh, 52px);
  padding-top: 18px;
  border-top: 1px solid rgba(241, 236, 226, 0.2);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px clamp(16px, 2.4vw, 38px);
  font: 400 12px/1.6 var(--mono);
  color: var(--on-dark-2);
}
.colofon > :last-child { text-align: right; }
@media (max-width: 860px) {
  .colofon { grid-template-columns: minmax(0, 1fr); }
  .colofon > :last-child { text-align: left; }
}
@media (max-width: 760px) {
  .act-a {
    grid-template-columns: minmax(0, 1fr) 1.4rem;
    row-gap: 4px;
  }
  .act-k { grid-column: 1 / -1; grid-row: 1; }
  .act-v { grid-column: 1; grid-row: 2; }
  .act-ar { grid-column: 2; grid-row: 2; }
  .act-m { grid-column: 1 / -1; grid-row: 3; text-align: left; white-space: normal; }
}

/* ====================== systeemvoorkeuren van de lezer ==================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Minder transparantie: de hover-tint en de chip-achtergrond zijn doorschijnend
   en worden hier vlak. De bandeau is al dekkend. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --hover-tint: var(--paper-2);
    --hover-tint-dark: #241f19;
  }
  .chip { background: var(--paper-2); }
  .tl-grip::before { box-shadow: none; }
}

/* Meer contrast: haarlijnen worden echte lijnen en stille tekst wordt donkerder,
   zodat de structuur ook zonder subtiliteit leesbaar blijft. */
@media (prefers-contrast: more) {
  :root {
    --rule: rgba(23, 20, 15, 0.4);
    --rule-2: rgba(23, 20, 15, 0.62);
    --ink-2: #2e2a23;
    --ink-3: #423c33;
    --on-dark-2: #ddd5c7;
  }
  .btn, .filter, .bar-link { border-width: 2px; }
}