/* Miliarium. Lettertypes en discipline uit de Ductus-familie, eigen kleur en eigen kenmerk. */

:root {
  --papier: #f2f3f1;
  --vlak: #fbfbfa;
  --band: #e6e8e5;
  --inkt: #1a2120;
  --inkt-zacht: #414c4a;
  --inkt-mute: #56625f;
  --lijn: #c6cbc7;
  --lijn-hard: #7f8a86;
  --asfalt: #191e1e;
  --asfalt-tekst: #c3cac7;
  /* Menie: het rood waarmee de letters op Romeinse mijlpalen werden ingekleurd. */
  --merk: #8a2a2e;
  --merk-diep: #6f1f24;
  --merk-licht: #e8b4ac;
  --display: 'Hanken Grotesk', 'Schibsted Grotesk', sans-serif;
  --tekst: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --kolom: max(1.25rem, 4vw, calc((100vw - 1400px) / 2));
  --nav: 4.5rem;
  --strook: clamp(3.5rem, 10vh, 6.5rem);
  --band-start: 44vh;
  --kop-boven: calc(var(--nav) + var(--strook));
}

* { box-sizing: border-box; margin: 0; }
html { scroll-padding-top: calc(var(--kop-boven) + 1rem); -webkit-text-size-adjust: 100%; }
body { background: var(--papier); color: var(--inkt); font: 400 1.0625rem/1.65 var(--tekst); }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: var(--merk-diep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--merk); }
:focus-visible { outline: 2px solid var(--merk); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.022em; line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.25rem; letter-spacing: -.012em; line-height: 1.25; }
.label { display: block; font: 500 .75rem/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--merk-diep); margin-bottom: .55rem; }
.mono { font-family: var(--mono); font-size: .875rem; }
.zacht { color: var(--inkt-zacht); }
.mute { color: var(--inkt-mute); }

/* Sitekop */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--nav); background: var(--papier); border-top: 4px solid var(--merk); border-bottom: 1px solid var(--lijn-hard); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--kolom); }
.logo { display: flex; align-items: center; gap: .6rem; color: var(--merk-diep); text-decoration: none; font: 700 1.4rem var(--display); letter-spacing: -.02em; }
.logo small { font: 400 .78rem var(--mono); letter-spacing: 0; color: var(--inkt-zacht); }
.nav .hoofdmenu a { color: var(--inkt-zacht); text-decoration: none; font-size: .98rem; }
.nav .hoofdmenu a:hover { color: var(--merk-diep); }
.nav .hoofdmenu a.nadruk { color: var(--merk-diep); font-weight: 600; }
.taal { font: 400 .8rem var(--mono); color: var(--inkt-mute); }
.taal b { color: var(--inkt); font-weight: 500; }

/* Beeldband: krimpt bij scrollen tot een strook, de scrollpositie stuurt de hoogte */
.beeldband { position: fixed; inset: var(--nav) 0 auto; z-index: 20; height: var(--band-h, var(--band-start)); overflow: hidden; background: var(--asfalt); }
.beeldband img { position: absolute; inset: 0; height: 100%; object-position: center 55%; filter: saturate(.72) contrast(1.04); }

main.thuis { position: relative; padding-top: calc(var(--nav) + var(--band-start) - 7rem); }

/* Hero */
.hero { position: relative; z-index: 25; margin-inline: var(--kolom); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); background: var(--vlak); border: 1px solid var(--lijn-hard); }
.hero__tekst { padding: clamp(1.75rem, 4vw, 3.5rem); }
.hero h1 { font-size: clamp(2.75rem, 5.6vw, 4.75rem); line-height: .98; letter-spacing: -.035em; margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; color: var(--merk); }
.hero .lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--inkt-zacht); max-width: 38rem; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.knop { display: inline-block; padding: .85rem 1.5rem; font: 600 1rem var(--tekst); text-decoration: none; border: 1px solid var(--merk-diep); }
.knop--vol { background: var(--merk-diep); color: #fff; }
.knop--vol:hover { background: var(--merk); color: #fff; }
.knop--leeg { color: var(--merk-diep); }
.hero__foto { position: relative; border-left: 1px solid var(--lijn-hard); min-height: 18rem; }
.hero__foto img { position: absolute; inset: 0; object-position: 58% 12%; filter: grayscale(1); }

/* Kenmerk 1: de afstandslijn, de loopbaan op schaal */
.afstand { position: relative; z-index: 10; background: var(--papier); padding: 2.75rem var(--kolom) 3.5rem; }
.afstand__titel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 2.75rem; }
.schaal { position: relative; height: 4.75rem; border-bottom: 2px solid var(--inkt); }
.schaal i { position: absolute; bottom: 0; width: 1px; height: .55rem; background: var(--lijn-hard); }
.schaal i.vijf { height: 1rem; width: 2px; background: var(--inkt); }
.schaal span.segment { position: absolute; bottom: 0; height: .5rem; background: var(--merk); border-right: 2px solid var(--papier); }
.schaal span.segment.grijs { background: var(--lijn-hard); }
.schaal b { position: absolute; bottom: 1.4rem; font: 400 .75rem/1.25 var(--mono); color: var(--inkt-zacht); white-space: nowrap; border-left: 1px solid var(--lijn-hard); padding: 0 0 .15rem .35rem; }
.schaal b.hoog { bottom: 2.8rem; }
.schaal b.klein { font-size: .6875rem; color: var(--inkt-mute); }
.jaren { display: flex; justify-content: space-between; font: 400 .75rem var(--mono); color: var(--inkt-mute); margin-top: .45rem; }

/* Secties */
.sectie { position: relative; z-index: 10; padding: clamp(3.5rem, 7vw, 6.5rem) var(--kolom); background: var(--papier); border-top: 1px solid var(--lijn); }
.sectie--vlak { background: var(--vlak); }
.sectie--vlak { --sectie-bg: var(--vlak); }
.sectie--donker { --sectie-bg: var(--asfalt); background: var(--asfalt); color: #fff; border-top: 0; }
.sectie--donker .label { color: var(--merk-licht); }
.sectie--donker .zacht, .sectie--donker .mute { color: var(--asfalt-tekst); }
.sectie--donker a { color: var(--merk-licht); }

.twee { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.vast { position: sticky; top: calc(var(--kop-boven) + 1.5rem); }
.beeld { background: var(--band); overflow: hidden; }
.beeld img { filter: saturate(.8); }
.twee:has(> figure[hidden]) { grid-template-columns: minmax(0, 1fr); }
.beeld--staand { aspect-ratio: 4 / 5; max-height: 62vh; width: 100%; }
.beeld--breed { aspect-ratio: 3 / 1; }
.beeld--breed img { object-position: center 78%; }
.tekst p + p { margin-top: 1.1rem; }
.tekst p { max-width: 42rem; }
dl.feiten { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--lijn); font-size: .98rem; }
dl.feiten dt { font: 400 .8rem/1.9 var(--mono); color: var(--inkt-mute); }

/* Roltrap: de regel op de leeslijn is actief */
.treden > * { padding-block: clamp(1.5rem, 5vh, 3.25rem); border-top: 1px solid var(--lijn); transition: opacity .25s; }
.treden > *:last-child { border-bottom: 1px solid var(--lijn); }
.js .treden > *:not(.actief) { opacity: .38; }
.trede h3 { margin-bottom: .45rem; }
.trede .bewijs { margin-top: .7rem; font-size: .98rem; color: var(--inkt-zacht); padding-left: .9rem; border-left: 2px solid var(--merk); }

/* Domeinkennis: donkere band */
.drie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); margin-top: 2.5rem; }
.drie > :nth-child(1) { grid-column: span 5; }
.drie > :nth-child(2) { grid-column: span 4; }
.drie > :nth-child(3) { grid-column: span 3; }
.drie h3 { margin-bottom: .6rem; font-size: 1.05rem; }

/* Kenmerk 2: de weg terug door de loopbaan */
.weg { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: 2.5rem; }
.meter { position: sticky; top: calc(var(--kop-boven) + 6rem); }
.meter__jaar { font: 700 clamp(4rem, 11vw, 9rem)/.9 var(--display); letter-spacing: -.05em; color: var(--merk); font-variant-numeric: tabular-nums; }
.meter__mp { font: 400 .8rem var(--mono); color: var(--inkt-mute); margin-top: .75rem; }
.meter__streep { position: relative; height: .5rem; background: var(--band); margin-top: 1.25rem; }
.meter__streep i { position: absolute; inset: 0 auto 0 0; width: var(--gereden, 0%); background: var(--merk); }
.baan h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.baan .waar { color: var(--inkt-zacht); margin-bottom: .6rem; }
.baan .periode { display: block; font: 500 .8rem var(--mono); color: var(--merk-diep); margin-bottom: .35rem; }
.baan .kern { font: 400 .8rem var(--mono); color: var(--inkt-mute); margin-top: .7rem; }

/* Tabellen, geen kaartjes */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font: 500 .75rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-mute); padding: 0 1rem .6rem 0; border-bottom: 2px solid var(--inkt); }
td { padding: .7rem 1rem .7rem 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
td.mono { white-space: nowrap; color: var(--inkt-zacht); }
.artikel { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding-block: 1.25rem; border-top: 1px solid var(--lijn); text-decoration: none; color: inherit; }
.artikel:last-child { border-bottom: 1px solid var(--lijn); }
.artikel h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.artikel:hover h3 { color: var(--merk); }

/* Buiten het werk: bewust ongelijk */
.ongelijk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: start; margin-top: 2.5rem; }
.ongelijk .a { aspect-ratio: 4 / 3; }
.ongelijk .a img { object-position: center 14%; }
.ongelijk .b { aspect-ratio: 3 / 4; margin-top: 4rem; }

/* Contact */
#contactForm { display: grid; gap: 1rem; max-width: 40rem; }
#contactForm label { font: 400 .8rem var(--mono); color: var(--asfalt-tekst); display: grid; gap: .35rem; }
#contactForm input, #contactForm textarea { width: 100%; background: transparent; border: 1px solid var(--lijn-hard); color: #fff; padding: .75rem .85rem; font: 400 1rem var(--tekst); border-radius: 0; }
.sectie--donker .knop--vol { background: var(--merk-licht); border-color: var(--merk-licht); color: var(--asfalt); cursor: not-allowed; justify-self: start; }
footer { position: relative; z-index: 10; background: var(--asfalt); color: var(--asfalt-tekst); border-top: 1px solid #39403f; padding: 1.25rem var(--kolom); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font: 400 .8rem var(--mono); }
footer a { color: var(--asfalt-tekst); }

figure[hidden] { display: none; }

/* Taal: de homepage bevat beide talen, de rest van de site kiest per pagina */
html[lang="en"] .nl { display: none !important; }
html:not([lang="en"]) .en { display: none !important; }

/* Menu */
.hoofdmenu { display: flex; align-items: center; gap: 1.75rem; }
.taalkeuze { display: flex; align-items: center; gap: .35rem; font: 400 .8rem var(--mono); color: var(--inkt-mute); }
.taalkeuze button { background: none; border: 0; padding: .25rem; font: inherit; color: var(--inkt-mute); cursor: pointer; }
.taalkeuze button[aria-pressed="true"] { color: var(--inkt); font-weight: 500; }
.nav__rechts { display: flex; align-items: center; gap: 1.25rem; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; font: 500 .85rem var(--mono); color: var(--merk-diep); padding: .4rem 0; }
.menu summary::-webkit-details-marker { display: none; }
.menu__lijst { position: absolute; right: 0; top: 2.25rem; min-width: 14rem; display: grid; background: var(--vlak); border: 1px solid var(--lijn-hard); box-shadow: 0 18px 40px rgba(20, 26, 25, .28); }
.menu__lijst a { padding: .8rem 1rem; color: var(--inkt); text-decoration: none; border-top: 1px solid var(--lijn); }
.menu__lijst a:first-child { border-top: 0; }

/* Contact */
.contactgegevens { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: .5rem; }
.sectie--donker .contactgegevens a { color: #fff; }
.via { font-size: .95rem; padding-top: 1.1rem; border-top: 1px solid #39403f; }
#contactForm .twee-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
#contactForm input::placeholder, #contactForm textarea::placeholder { color: #8f9996; }
.sectie--donker .knop--vol { cursor: pointer; }
.sectie--donker .knop--vol:hover { background: #fff; border-color: #fff; color: var(--asfalt); }
.sectie--donker .knop--vol:disabled { cursor: wait; opacity: .7; }
#form-status { font-size: .95rem; min-height: 1.5em; margin: 0; }
.vangnet { position: absolute; left: -9999px; }
.alle-artikelen { display: inline-block; margin-top: 1.25rem; font: 500 .85rem var(--mono); }
footer .voet__rechts { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.toegang { position: absolute; left: -9999px; }
.toegang:focus { left: 1rem; top: .5rem; z-index: 60; background: var(--vlak); padding: .5rem .75rem; }

/* Scrollgedrag: titel en beeld staan samen vast, de tekst loopt erlangs tot hij op is.
   Podium en tekst delen één rastercel. Daardoor laat het podium los op het moment dat de tekst eindigt,
   en schuift alles over de volle breedte weg tot de volgende sectie bovenaan vastklikt. */
.toneel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); }
.podium { grid-area: 1 / 1 / 2 / 3; display: grid; grid-template-columns: subgrid; align-self: start; position: sticky; top: var(--kop-boven); z-index: 2; pointer-events: none; }
.podium > * { pointer-events: auto; }
.kop { grid-column: 1 / -1; background: var(--sectie-bg, var(--papier)); padding-block: 1rem 1.25rem; }
.links { grid-column: 1; min-width: 0; }
.links > .beeld { height: min(calc(100vh - var(--kop-boven) - var(--kop-h, 6rem) - 2rem), 34rem); }
.links > p { max-width: 30rem; }
.links > p + .beeld { margin-top: 1.25rem; height: min(calc(100vh - var(--kop-boven) - var(--kop-h, 6rem) - 11rem), 24rem); }
.tabellen table + table { margin-top: 2.5rem; }
.doorloop { grid-area: 1 / 2 / 2 / 3; min-width: 0; padding-top: var(--tekst-start, var(--kop-h, 6rem)); z-index: 1; }
.toneel--vol .doorloop { grid-column: 1 / 3; }
.toneel--los .podium { position: static; }
/* Foto's met mensen: niet inzoomen en bovenaan uitlijnen, zodat de hoofden in beeld blijven */
.beeld--mensen img { object-position: center top; }
.beeld--reizen img { object-position: center 62%; }
.beeld img[src*="loopbaan-notitieboek"] { object-position: center 85%; }
.beeld--los { aspect-ratio: 3 / 2; margin-top: 2rem; }
.blokken > * + * { margin-top: 2.25rem; }
.blokken h3 { margin-bottom: .6rem; font-size: 1.05rem; }
.podium--meter .meter { margin-bottom: 1.25rem; }
.podium--meter .meter__jaar { font-size: clamp(3.5rem, 7vw, 6rem); }
.podium--meter .links > .beeld { height: min(calc(100vh - var(--kop-boven) - var(--kop-h, 6rem) - 13rem), 22rem); }

/* Diepte: drie lagen per foto. Een hard gekleurd vlak erachter, een zachte slagschaduw, en de foto zelf
   die in zijn kader meebeweegt. Alles hangt aan de scrollpositie, dus terugscrollen loopt precies terug. */
.beeld {
  --vlak-x: 14px; --vlak-y: 14px; --vlak-kleur: var(--merk);
  overflow: hidden; transform-origin: 50% 100%; will-change: transform;
  box-shadow: var(--vlak-x) var(--vlak-y) 0 0 var(--vlak-kleur), calc(var(--vlak-x) + 8px) calc(var(--vlak-y) + 20px) 36px rgba(20, 26, 25, .32);
}
.beeld img { transform-origin: 50% 50%; will-change: transform; }
.kop { position: relative; z-index: 3; }
.links { position: relative; z-index: 1; }
.sectie--donker .beeld { --vlak-kleur: var(--merk-licht); box-shadow: var(--vlak-x) var(--vlak-y) 0 0 var(--vlak-kleur), calc(var(--vlak-x) + 8px) calc(var(--vlak-y) + 20px) 36px rgba(0, 0, 0, .55); }
#werk .beeld, #blog .beeld { --vlak-kleur: var(--inkt); }
.hero { box-shadow: 0 26px 60px rgba(20, 26, 25, .34); }
.hero__foto { overflow: hidden; }
.hero__foto img { will-change: transform; }
.beeldband img { will-change: transform; }

@media (max-width: 56rem) {
  :root { --nav: 3.75rem; --strook: 3rem; --band-start: 34vh; }
  body { font-size: 1rem; }
  .logo small, .nav .hoofdmenu { display: none; }
  .menu { display: block; }
  main.thuis { padding-top: calc(var(--nav) + var(--band-start) - 4rem); }
  .hero { grid-template-columns: 1fr; margin-inline: .75rem; }
  .hero__foto { border-left: 0; border-top: 1px solid var(--lijn-hard); min-height: 0; aspect-ratio: 4 / 3; grid-row: 2; }
  .schaal b, .schaal b.hoog { display: none; }
  .schaal { height: 1.75rem; }
  .afstand__titel { margin-bottom: 1rem; }
  .twee, .weg { grid-template-columns: 1fr; }
  .vast { position: static; }
  .beeld--staand { aspect-ratio: 3 / 2; max-height: none; }
  .beeld--breed { aspect-ratio: 3 / 2; }
  .drie { display: block; }
  .drie > * + * { margin-top: 2rem; }
  .meter { top: var(--kop-boven); z-index: 6; background: var(--vlak); padding-block: .5rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 1rem; }
  .meter__jaar { font-size: 2.25rem; }
  .meter__mp { display: none; }
  .meter__streep { margin-top: 0; }
  #contactForm .twee-velden { grid-template-columns: 1fr; }
  .toneel { grid-template-columns: minmax(0, 1fr); }
  .beeld { box-shadow: calc(var(--vlak-x) * .5) calc(var(--vlak-y) * .5) 0 0 var(--vlak-kleur), 0 12px 22px rgba(20, 26, 25, .25); }
  .sectie--donker .beeld { box-shadow: calc(var(--vlak-x) * .5) calc(var(--vlak-y) * .5) 0 0 var(--vlak-kleur), 0 12px 22px rgba(0, 0, 0, .5); }
  .podium { grid-area: 1 / 1; background: var(--sectie-bg, var(--papier)); }
  .doorloop { grid-area: 1 / 1; padding-top: calc(var(--tekst-start, 0px) + 1.25rem); }
  .toneel--vol .doorloop { grid-column: 1; }
  .kop { padding-block: .6rem .7rem; }
  .links > .beeld { height: 24vh; }
  .links > p + .beeld { height: 20vh; margin-top: .75rem; }
  .podium--meter .links > .beeld { display: none; }
  .podium--meter .meter { margin-bottom: .4rem; }
  .podium--meter .meter__jaar { font-size: 2.25rem; }
  .meter { position: static; padding-block: 0; }
  .toneel--los, .toneel--ruimte { display: block; }
  .toneel--los .podium, .toneel--ruimte .podium { position: static; }
  .toneel--los .doorloop, .toneel--ruimte .doorloop { padding-top: 1.25rem; }
  .artikel { grid-template-columns: 1fr; gap: .2rem; }
  .ongelijk { grid-template-columns: 1fr 1fr; }
  .ongelijk > div:first-of-type, .ongelijk .tekst { grid-column: 1 / -1; }
  .ongelijk .b { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .beeld, .beeld img, .hero__foto img, .beeldband img { transform: none !important; }
  .js .treden > *:not(.actief) { opacity: 1; }
}