/* --- Basis --- */

:root {
  --achtergrond: #f9f6f0; /* 75% richting ecru V1 (#f8f5ed), vanaf #faf9f7 */
  --inkt: #1c1c1c;
  --gedempt: #1c1c1c; /* zelfde dekking als de inkt: alle tekst even zwart */
  --lijn: #e3e0d7;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Scroll-snap: elke sectie klikt vanzelf tegen de schermrand,
     ook na het vergroten of verkleinen van het venster. In rust
     zit je dus altijd precies op één sectie. */
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--inkt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

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

a {
  color: var(--gedempt);
  text-decoration: none;
}

a:hover {
  color: var(--inkt);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 3px;
}

/* --- Balk bovenaan --- */

/* Volledig transparante balk: alleen de tekst zweeft boven de pagina.
   Tijdens het scrollen dimt de header (zie script), zodat het werk
   voorop staat; bij stilstand keert hij terug. Het open midden laat
   klikken door (pointer-events). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.site-header.gedimd {
  opacity: 0;
}

.site-naam,
.site-nav {
  pointer-events: auto;
}

/* Naam en tabs: identieke maat, regelhoogte én uitlijning op de
   onderkant (flex-end), zodat de onderkanten exact gelijk lopen. */
.site-naam {
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--inkt);
  padding-bottom: 3px;
}

.site-naam::after {
  content: "";
  display: block;
  border-bottom: 1px solid transparent;
}

/* De tabs doen mee in de verdeling van de balk zelf: naam, Work,
   About en Contact staan met gelijke tussenruimtes over de breedte. */
.site-nav {
  display: contents;
}

.nav-link {
  line-height: 1;
  color: var(--gedempt);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.nav-link:hover {
  color: var(--inkt);
}

/* De actieve tab verdwijnt: het woord staat op dat moment als kopje
   op de pagina zelf. De tab behoudt zijn ruimte (visibility), zodat
   de balk niet verschuift. */
.nav-link.actief {
  opacity: 0;
  visibility: hidden;
}

/* --- Secties --- */

main section {
  padding: 4rem 1.25rem;
  scroll-snap-align: start;
}

/* Naadlijn: markeert de grens tussen twee pagina's. Zichtbaar
   tijdens het scrollen; in rust valt hij precies op de schermrand. */
#about,
#contact {
  border-top: 1px solid var(--inkt);
}

/* Woord-wissel: het kopje verschijnt pas als de sectie actief is -
   tot dat moment staat het woord in de header. */
main section h2 {
  opacity: 0;
  /* Trager dan de tab in de header (0.25s): het woord arriveert
     rustig ná het verdwijnen daar, wat de wissel leesbaarder maakt. */
  transition: opacity 1s ease;
}

main section.actief h2 {
  opacity: 1;
}


/* --- Werk --- */

/* Raster van staande foto's: één kolom op mobiel, drie naast
   elkaar op groter scherm. De buitenranden van het raster lopen
   gelijk met de voettekst. */
.werk-stroom {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

figure.werk {
  margin: 0;
}

.vergroot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

figure.werk figcaption {
  margin-top: 0.5rem;
  color: var(--gedempt);
}

/* --- Over --- */


.over-inhoud {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.portret {
  margin: 0;
  max-width: 380px;
}

h2 {
  font-size: inherit;
  font-weight: 600;
  margin: 0 0 1rem;
}

.over-tekst p {
  max-width: 34rem;
  margin: 0 0 1rem;
}

.cv-lijst {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  color: var(--gedempt);
}

.cv-lijst li {
  margin-bottom: 0.35rem;
}

/* --- Contact --- */

.contact-inhoud p {
  max-width: 34rem;
  margin: 0 0 1rem;
}

.contact-regels {
  line-height: 2;
}

/* --- Voet --- */

/* Het copyright woont linksonder in het Contact-scherm en spiegelt
   de naam linksboven: randinformatie in de hoeken, inhoud in het
   midden. Geen losse voetbalk - de pagina is precies drie schermen. */
.copyright {
  position: absolute;
  left: 1.25rem;
  bottom: 2rem;
  margin: 0;
  color: var(--gedempt);
}

/* --- Lightbox --- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(249, 246, 240, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
  cursor: zoom-out;
}

.lightbox[hidden] {
  display: none;
}

.lightbox img {
  max-height: 80vh;
  max-width: 100%;
  width: auto;
  cursor: default;
}

.lightbox-bijschrift {
  margin: 0.75rem 0 0;
  color: var(--gedempt);
}

.lightbox-sluit {
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--inkt);
  cursor: pointer;
  padding: 0.25rem;
}

/* --- Groter scherm --- */

@media (min-width: 700px) {
  body { font-size: 15px; }

  .site-header { padding: 1.25rem 2.5rem; }

  main section { padding: 6rem 2.5rem; }

  .werk-stroom {
    grid-template-columns: repeat(3, 1fr);
  }

  .copyright { left: 2.5rem; }

  .over-inhoud {
    grid-template-columns: 380px 1fr;
    gap: 4rem;
    align-items: start;
  }

}

/* --- Landing (tijdelijke pagina) --- */

/* Schermvullende secties; de inhoud gecentreerd. dvh volgt de
   werkelijke schermhoogte, ook op mobiel waar de adresbalk
   meebeweegt (vh blijft staan als vangnet voor oude browsers). */
.landing-sectie {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pasfoto: bescheiden formaat, ± 4× het oppervlak van een echte
   pasfoto (35 × 45 mm), nooit beeldvullend. */
.pasfoto {
  margin: 0;
  width: min(280px, 60vw);
}

.bio {
  max-width: 34rem;
}

.bio p {
  margin: 0 0 1rem;
}

/* De pijlen: vaste bewegwijzering aan de schermranden, elk aan de
   kant waar ze je heen brengen. In rust zichtbaar; tijdens het
   scrollen dimmen ze mee in het ritme van de header. */
.pijl {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  border: 0;
  background: none;
  font: inherit;
  color: var(--inkt);
  cursor: pointer;
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.pijl-boven { top: 1rem; }
.pijl-onder { bottom: 1rem; }

.pijl.zichtbaar {
  opacity: 1;
  pointer-events: auto;
}

.pijl.zichtbaar.gedimd {
  opacity: 0;
  pointer-events: none;
}

/* Contact: zelfde smalle, gecentreerde kolom als de bio. */
#contact .contact-inhoud {
  max-width: 34rem;
}

/* Nieuwsbrief: één veld met dunne onderrand, knop als tekst. */
.nieuwsbrief {
  margin: 1.5rem 0;
  max-width: 20rem;
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.nieuwsbrief input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--lijn);
  background: none;
  font: inherit;
  color: var(--inkt);
  padding: 0.25rem 0;
}

.nieuwsbrief input:focus-visible {
  outline: 2px solid var(--inkt);
  outline-offset: 3px;
}

.nieuwsbrief button {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--inkt);
  cursor: pointer;
  padding: 0.25rem 0;
}

/* Alleen voor schermlezers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}