/* ---------------------------------------------------------------
   Fonts. Zelf gehost, enkel de latijnse subset.
   Zie gereedschap/fonts.mjs.
--------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 400 500;
  src: url('/fonts/archivo.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/plex-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------
   Tokens
--------------------------------------------------------------- */
/* Papier en inkt, allebei warm. De vorige set mengde warm papier met koele
   inkt, waardoor het noch warm noch koud werd. Het gedempte grijs is donker
   genoeg gezet om de contrastnorm te halen, ook op 21px lopende tekst. */
:root {
  --paper: #f1efe9;
  --ink: #2a241e;
  --muted: #6f6a61;
  --line: #dfdad0;
  --block: #e7e3d9;

  --sans: 'Archivo', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ritme van 4 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --rand: 2px;
  --traag: 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --snel: 180ms ease;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  /* Warm houtskool in plaats van bijna zwart. Het vorige paper (#131210) las
     als een zwart scherm; dit blijft donker maar niet zo hard. */
  :root {
    --paper: #211e1a;
    --ink: #ece7dc;
    --muted: #9c9184;
    --line: #3a352d;
    --block: #2b2721;
  }
}

/* ---------------------------------------------------------------
   Basis
--------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 4px;
  border-radius: 1px;
}

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 56px);
  padding-right: clamp(20px, 5vw, 56px);
}

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

/* overslaan-link */
.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s3) var(--s4);
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  z-index: 10;
}
.overslaan:focus {
  left: var(--s4);
  top: var(--s4);
}

/* ---------------------------------------------------------------
   Kop
--------------------------------------------------------------- */
.kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3) var(--s5);
  padding: var(--s5) 0 0;
}

.merk {
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 17px;
  /* 10px op en neer geeft een raakvlak van 44px+; de gelijke negatieve marge
     houdt de headerrij zelf even hoog als voorheen. */
  padding: 10px 0;
  margin: -10px 0;
}

.kop nav {
  display: flex;
  gap: var(--s5);
  margin-left: auto;
  font-size: 15px;
}

.kop nav a {
  color: var(--muted);
  padding: var(--s3) 0;
  transition: color var(--snel);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.kop nav a:hover,
.kop nav a[aria-current='page'] {
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Opening
--------------------------------------------------------------- */
.opening {
  padding: clamp(48px, 11vh, 112px) 0 clamp(40px, 8vh, 80px);
  display: grid;
  gap: clamp(32px, 6vw, 64px);
}

.opening h1 {
  font-size: clamp(34px, 7.6vw, 62px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 400;
  max-width: 15ch;
}

/* de twee mensen */
.mensen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 20px);
  align-self: end;
}

.mens {
  margin: 0;
}

.portret {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--block);
  border: 1px solid var(--line);
  border-radius: var(--rand);
}

.portret img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portret .plaat {
  font-size: clamp(18px, 2.6vw, 24px);
  letter-spacing: -0.02em;
  padding: var(--s4);
}

.mens figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  margin-top: var(--s3);
  font-size: 14px;
}

.lead {
  color: var(--muted);
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 44ch;
  margin-top: var(--s5);
}

/* ---------------------------------------------------------------
   Sectielabel
--------------------------------------------------------------- */
.sectie {
  padding-top: clamp(56px, 10vh, 104px);
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s4);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
}

/* ---------------------------------------------------------------
   Werk
--------------------------------------------------------------- */
.werk {
  display: grid;
  gap: var(--s7) var(--s5);
}

.werk-item {
  display: block;
  transition: opacity 320ms ease;
}

.beeld {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--block);
  border: 1px solid var(--line);
  border-radius: var(--rand);
}

.beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--traag);
}

/* Project zonder beeld: de naam zelf is de plaat. Onderaan links gezet, zoals een
   titel op een omslag, zodat het blok gewild leest en niet als een gat. */
.plaat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(20px, 4vw, 44px);
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  transition: transform var(--traag);
  transform-origin: bottom left;
}

.item-meta {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-top: var(--s3);
  font-size: 14px;
}

.nr {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.naam {
  font-weight: 500;
  letter-spacing: -0.03em;
}

.soort {
  color: var(--muted);
}

.jaar {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

@media (hover: hover) {
  .werk:hover .werk-item {
    opacity: 0.4;
  }
  .werk .werk-item:hover {
    opacity: 1;
  }
  .werk-item:hover .beeld img,
  .werk-item:hover .plaat {
    transform: scale(1.018);
  }
}

/* ---------------------------------------------------------------
   Werkwijze
--------------------------------------------------------------- */
.stappen {
  display: grid;
  gap: var(--s6);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: stap;
}

.stappen li {
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}

.stappen h3 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: var(--s2) 0 var(--s1);
}

.stappen p {
  color: var(--muted);
  font-size: 15px;
  max-width: 34ch;
}

/* ---------------------------------------------------------------
   Prijzen
--------------------------------------------------------------- */
.prijzen {
  border-top: 1px solid var(--line);
  margin-top: var(--s6);
}

.prijs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s4);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--line);
}

.prijs dt {
  font-weight: 500;
  letter-spacing: -0.02em;
  flex: 1 1 auto;
}

.prijs .omschrijving {
  color: var(--muted);
  font-size: 15px;
  flex: 1 1 100%;
  max-width: 52ch;
}

.prijs .bedrag {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  flex: 0 0 auto;
}

.prijs-noot {
  color: var(--muted);
  font-size: 15px;
  max-width: 52ch;
  margin-top: var(--s5);
}

/* ---------------------------------------------------------------
   Contact
--------------------------------------------------------------- */
.formulier {
  display: grid;
  gap: var(--s5);
  max-width: 46rem;
  margin-top: var(--s6);
}

.veld {
  display: grid;
  gap: var(--s2);
}

.veld label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.veld input,
.veld select,
.veld textarea {
  font-family: var(--sans);
  font-size: 16px; /* onder 16px zoomt iOS in bij focus */
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--rand);
  padding: var(--s3) var(--s4);
  min-height: 48px;
  width: 100%;
  transition: border-color var(--snel);
}

.veld textarea {
  min-height: 132px;
  resize: vertical;
}

.veld input:hover,
.veld select:hover,
.veld textarea:hover {
  border-color: var(--muted);
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  border-color: var(--ink);
  outline: none;
}

.veld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--s7);
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}

.knop {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid var(--ink);
  border-radius: var(--rand);
  padding: var(--s3) var(--s5);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition:
    background var(--snel),
    color var(--snel);
  flex: 1 1 auto;
}

.knop:hover {
  background: var(--ink);
  color: var(--paper);
}

.knop:active {
  transform: translateY(1px);
}

.knop--vol {
  background: var(--ink);
  color: var(--paper);
}

.knop--vol:hover {
  background: transparent;
  color: var(--ink);
}

.melding {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  min-height: 1.6em;
}

.direct {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  font-size: 15px;
}

.direct a {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding: 10px 0; /* 15px tekst x 1.6 + 20px = 44px raakvlak */
  transition:
    color var(--snel),
    border-color var(--snel);
}

.direct a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---------------------------------------------------------------
   Detailpagina
--------------------------------------------------------------- */
.terug {
  display: flex;
  align-items: baseline;
  gap: var(--s5);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  padding-top: var(--s6);
}

.terug a {
  padding: var(--s4) 0; /* 44px raakvlak; .terug is flex, dus de negatieve marge
    trekt de rij weer even hoog terug als voorheen */
  margin: calc(var(--s4) * -1) 0;
  transition: color var(--snel);
}

.terug a:hover {
  color: var(--ink);
}

.detail-kop {
  padding: clamp(40px, 8vh, 80px) 0 var(--s6);
}

.detail-kop h1 {
  font-size: clamp(30px, 6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 400;
}

.feiten {
  display: grid;
  gap: var(--s3) var(--s5);
  font-size: 15px;
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s7);
}

.feiten dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.feiten dd {
  margin: 0 0 var(--s4);
}

.feiten dd:last-child {
  margin-bottom: 0;
}

.feiten a {
  display: inline-block;
  border-bottom: 1px solid var(--line);
  /* Inline tekst van 18px is te klein om te raken. Dit is een los grid-vak,
     geen flex-rij, dus hier geen negatieve marge: de rij mag iets hoger
     worden, dat is veiliger dan een overlap met de rij erboven riskeren. */
  padding: 13px 0;
  transition: border-color var(--snel);
}

.feiten a:hover {
  border-color: var(--ink);
}

.tekst {
  max-width: 62ch;
  margin-top: var(--s7);
  color: var(--muted);
}

.tekst p + p {
  margin-top: var(--s4);
}

.blader {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  border-top: 1px solid var(--line);
  margin-top: var(--s8);
  padding-top: var(--s4);
  font-size: 15px;
  color: var(--muted);
}

.blader a {
  padding: var(--s3) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--snel);
}

.blader a:hover {
  color: var(--ink);
}

/* ---------------------------------------------------------------
   404
--------------------------------------------------------------- */
.weg {
  padding: clamp(64px, 16vh, 176px) 0 clamp(40px, 8vh, 80px);
}

.weg h1 {
  font-size: clamp(34px, 7.6vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 400;
  max-width: 14ch;
}

.weg p {
  color: var(--muted);
  margin-top: var(--s5);
}

.weg a {
  border-bottom: 1px solid var(--line);
  transition: border-color var(--snel);
}

.weg a:hover {
  border-color: var(--ink);
}

/* ---------------------------------------------------------------
   Voet
--------------------------------------------------------------- */
.voet {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: clamp(64px, 12vh, 144px);
  padding: var(--s5) 0 calc(var(--s6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.voet a {
  border-bottom: 1px solid transparent;
  /* Ruimere onzichtbare padding: 11px mono tekst is te klein voor een raakvlak
     van 44px, maar de baseline-uitlijning houdt de zichtbare tekst gelijk. */
  padding: var(--s4) 0;
  margin: calc(var(--s4) * -1) 0;
  transition:
    color var(--snel),
    border-color var(--snel);
}

.voet a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---------------------------------------------------------------
   Opkomen bij het scrollen.
   Enkel actief als het scriptje draait, anders staat alles gewoon
   zichtbaar. Zonder javascript hoort niemand een lege pagina te zien.
--------------------------------------------------------------- */
.js .op {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 800ms cubic-bezier(0.2, 0.6, 0.2, 1),
    transform 800ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.js .op.in {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .js .werk:hover .werk-item.op.in {
    opacity: 0.4;
  }
  .js .werk .werk-item.op.in:hover {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------
   Vanaf tablet
--------------------------------------------------------------- */
@media (min-width: 720px) {
  body {
    font-size: 17px;
  }

  .kop {
    padding-top: var(--s6);
  }

  .opening {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }

  .opening-tekst {
    grid-column: 1 / span 7;
  }

  .mensen {
    grid-column: 9 / span 4;
  }

  .werk {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(40px, 6vw, 80px) clamp(16px, 2.4vw, 28px);
  }

  /* Het eerste project krijgt de volle breedte, de rest twee aan twee.
     Compact en helemaal uitgevuld, zonder rafelrand onderaan. */
  .werk-item {
    grid-column: span 6;
  }

  .werk-item:nth-child(1) {
    grid-column: span 12;
  }

  .stappen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
  }

  .item-meta {
    font-size: 15px;
  }

  .prijs dt {
    flex: 0 0 14rem;
  }

  /* op breed scherm staat het bedrag helemaal rechts, na de omschrijving */
  .prijs .omschrijving {
    flex: 1 1 0;
    order: 1;
  }

  .prijs .bedrag {
    order: 2;
    margin-left: auto;
    padding-left: var(--s5);
  }

  .feiten {
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .feiten dd {
    margin-bottom: 0;
  }

  .knoppen .knop {
    flex: 0 0 auto;
  }
}

/* ---------------------------------------------------------------
   Rustige weergave
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  .js .op {
    opacity: 1;
    transform: none;
  }
}