/* ==============================================================
   Zo Werm - stijl
   Rustig, groot, veel wit. Een lettertype, twee gewichten,
   een accentkleur. Als het leeg aanvoelt, is het goed.
   ============================================================== */

:root{
  --wit:    #FFFFFF;
  --papier: #FAF7F2;   /* heel licht warmgrijs */
  --inkt:   #1B1815;
  --grijs:  #6E665C;
  --lijn:   #E7E0D6;
  --turf:   #7A4E2D;   /* accent: turfbruin, alleen voor de knop */
  --turfop: #633E23;   /* knop bij aanraken */
  --goud:   #B98A3C;   /* veengoud, spaarzaam */
  --groen:  #4E7A3C;   /* lampje */
  --oranje: #C9862F;   /* lampje */
  --rood:   #A33B2A;   /* lampje */

  --rand:   1.5rem;    /* zijmarge op mobiel */
  --breed:  68rem;     /* max breedte blok */
  --lees:   40rem;     /* max breedte leestekst */
}

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

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

body{
  margin:0;
  background:var(--wit);
  color:var(--inkt);
  font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:1.1875rem;          /* 19px, nooit onder 18 */
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{ color:var(--inkt); text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px; }
a:hover{ color:var(--turf); }

:focus-visible{ outline:3px solid var(--turf); outline-offset:3px; border-radius:4px; }

/* ---------- ritme ---------- */

.blok{ padding:5rem 0; }
.blok--rustig{ background:var(--papier); }
.blok--ruim{ padding:7rem 0; }

.mid{
  width:100%;
  max-width:var(--breed);
  margin:0 auto;
  padding:0 var(--rand);
}
.lees{ max-width:var(--lees); }

/* ---------- typografie ---------- */

h1,h2,h3{ font-weight:500; letter-spacing:-.02em; line-height:1.12; margin:0 0 1.25rem; }

h1{ font-size:clamp(2rem, 8vw, 4.5rem); }         /* 32 -> 72 */
h2{ font-size:clamp(1.75rem, 5.5vw, 3rem); }      /* 28 -> 48 */
h3{ font-size:clamp(1.25rem, 3vw, 1.625rem); line-height:1.3; }

p{ margin:0 0 1.5rem; max-width:var(--lees); }
p:last-child{ margin-bottom:0; }

.groot{ font-size:clamp(1.25rem, 3.2vw, 1.5rem); line-height:1.5; }
.stil{ color:var(--grijs); }
.klein{ font-size:1rem; line-height:1.6; color:var(--grijs); }
.midden{ text-align:center; }
.midden p,.midden .lees{ margin-left:auto; margin-right:auto; }

.opschrift{
  font-size:.9375rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grijs); font-weight:500; margin:0 0 1.5rem;
}

/* ---------- knop ---------- */

.knop{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:3.5rem; padding:0 2rem;
  background:var(--turf); color:var(--wit);
  font-size:1.1875rem; font-weight:500; font-family:inherit;
  border:0; border-radius:2rem; cursor:pointer;
  text-decoration:none; transition:background .2s ease;
}
.knop:hover,.knop:focus{ background:var(--turfop); color:var(--wit); }
.knop[disabled]{ background:var(--grijs); cursor:default; }

.tekstlink{ font-size:1.0625rem; }

/* ---------- formulier ---------- */

.formulier{ display:flex; flex-wrap:wrap; gap:.75rem; max-width:34rem; }
.formulier--breed{ max-width:44rem; }
.formulier input{
  flex:1 1 16rem; min-height:3.5rem; padding:0 1.25rem;
  font-family:inherit; font-size:1.1875rem; color:var(--inkt);
  background:var(--wit); border:1.5px solid var(--lijn); border-radius:2rem;
}
.formulier textarea{
  flex:1 1 100%; padding:1rem 1.25rem; resize:vertical;
  font-family:inherit; font-size:1.1875rem; line-height:1.5; color:var(--inkt);
  background:var(--wit); border:1.5px solid var(--lijn); border-radius:1.25rem;
}
.formulier input:focus,.formulier textarea:focus{ border-color:var(--turf); outline:none; }
.melding{ margin-top:1rem; font-size:1.0625rem; }
.melding--goed{ color:var(--groen); }
.melding--mis{ color:var(--rood); }

/* ---------- voortgangsbalk: het enige UI-element ---------- */

.fases{ list-style:none; margin:0; padding:0; position:relative; }
.fases::before{
  content:""; position:absolute; left:.4375rem; top:.75rem; bottom:.75rem;
  width:1px; background:var(--lijn);
}
.fase{ position:relative; padding:0 0 2.5rem 2.75rem; }
.fase:last-child{ padding-bottom:0; }
.fase .punt{
  position:absolute; left:0; top:.5rem;
  width:.9375rem; height:.9375rem; border-radius:50%;
  border:1.5px solid var(--lijn); background:var(--wit);
}
.fase--nu .punt{ background:var(--turf); border-color:var(--turf); }
.fase a{ text-decoration:none; display:block; }
.fase a:hover .naam{ color:var(--turf); }
.naam{ font-size:1.25rem; font-weight:500; display:block; transition:color .2s ease; }
.fase--nu .naam{ color:var(--turf); }
.wanneer{ color:var(--grijs); font-size:1.0625rem; }

@media (min-width:48rem){
  .fases{ display:flex; gap:0; }
  .fases::before{ left:0; right:0; top:.4375rem; bottom:auto; height:1px; width:auto; }
  .fase{ flex:1; padding:2.25rem 1.5rem 0 0; }
  .fase .punt{ top:0; }
}

/* ---------- fotos ---------- */

figure{ margin:0; }
.foto{
  background:var(--papier);
  border-radius:.75rem;
  overflow:hidden;
  position:relative;
}
.foto img{ width:100%; }
.foto figcaption,.bijschrift{
  margin-top:.875rem; font-size:1rem; color:var(--grijs);
}
/* Rustige plek zolang de echte foto er nog niet staat. */
.wacht{ display:none; }
.foto--leeg{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:15rem; padding:2rem;
  border:1px solid var(--lijn);
  color:var(--grijs); font-size:1rem; line-height:1.5;
}
.foto--leeg img{ display:none; }
.foto--leeg .wacht{ display:block; }
.wacht code{ font-size:.9em; color:var(--turf); }
.duo{ display:grid; gap:2rem; }
@media (min-width:48rem){ .duo{ grid-template-columns:1fr 1fr; gap:3rem; align-items:start; } }

/* ---------- mensen ---------- */

.mensen{ display:grid; gap:3rem; }
@media (min-width:48rem){ .mensen{ grid-template-columns:1fr 1fr; gap:4rem; } }
.mens .foto{ max-width:14rem; border-radius:50%; aspect-ratio:1; }
.mens .foto--leeg{ min-height:0; aspect-ratio:1; }
.mens h3{ margin:1.5rem 0 .5rem; }

/* ---------- tijdlijn (fase 1) ---------- */

.tijdlijn{ list-style:none; margin:0; padding:0; }
.tijdstip{ padding:0 0 3.5rem 2rem; border-left:1px solid var(--lijn); position:relative; }
.tijdstip:last-child{ padding-bottom:0; }
.tijdstip::before{
  content:""; position:absolute; left:-.3125rem; top:.6rem;
  width:.625rem; height:.625rem; border-radius:50%; background:var(--goud);
}
.datum{ display:block; font-size:1rem; color:var(--grijs); margin-bottom:.5rem; }
.tijdstip .foto{ margin-top:1.25rem; max-width:32rem; }

/* ---------- muur van 100 ---------- */

.muur{
  display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem;
  max-width:44rem; margin:0; padding:0; list-style:none;
}
@media (min-width:36rem){ .muur{ grid-template-columns:repeat(10,1fr); } }
.plek{
  aspect-ratio:1; border:1px solid var(--lijn); border-radius:.375rem;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; font-size:.6875rem; line-height:1.15; color:var(--grijs);
  padding:.125rem; overflow:hidden;
}
.plek--vol{ background:var(--papier); border-color:var(--goud); color:var(--inkt); }
.plek--vol .vn{ font-weight:500; }
.plek--vol .dp{ color:var(--grijs); }

.teller{ font-size:clamp(1.25rem,3vw,1.5rem); margin-top:1.5rem; }

/* ---------- lijstjes zonder opsmuk ---------- */

.opsomming{ margin:0 0 1.5rem; padding-left:1.25rem; max-width:var(--lees); }
.opsomming li{ margin-bottom:.625rem; }

/* ---------- tabel (alleen /samen) ---------- */

.tabel{ width:100%; border-collapse:collapse; font-size:1.0625rem; }
.tabel th,.tabel td{ padding:.875rem .75rem; border-bottom:1px solid var(--lijn); text-align:right; }
.tabel th:first-child,.tabel td:first-child{ text-align:left; }
.tabel thead th{ font-weight:500; color:var(--grijs); }
.tabel tr.dik td{ font-weight:500; }
.tabelrol{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:1.5rem; }

/* ---------- voettekst ---------- */

.voet{ border-top:1px solid var(--lijn); padding:3.5rem 0; background:var(--wit); }
.voet-regel{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.voet .foto{ width:4.5rem; height:4.5rem; border-radius:50%; flex:0 0 auto; }
.voet .foto--leeg{ min-height:0; font-size:.6875rem; padding:.25rem; }
.voet-tekst{ font-size:1.0625rem; }
.voet-tekst a{ white-space:nowrap; }
.colofon{ margin-top:2rem; font-size:.9375rem; color:var(--grijs); }
.colofon a{ color:var(--grijs); }

/* ---------- kop van de pagina ---------- */

.kop{ padding:1.75rem 0; }
.merk{
  font-size:1.125rem; font-weight:500; letter-spacing:-.01em;
  text-decoration:none; color:var(--inkt);
}
.merk:hover{ color:var(--turf); }

/* ---------- beweging: zacht infaden ---------- */

.faden{ opacity:0; transform:translateY(1rem); }
.faden.in{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .faden{ opacity:1; transform:none; transition:none; }
  .vlam{ animation:none !important; }
}

/* ---------- kaarsje ---------- */

.kaars{ display:block; margin:0 auto 2rem; }
.vlam{ transform-origin:50% 100%; animation:vlam 3.2s ease-in-out infinite; }
@keyframes vlam{
  0%,100%{ transform:scaleY(1) scaleX(1); opacity:.95; }
  50%    { transform:scaleY(1.06) scaleX(.97); opacity:1; }
}

/* ---------- inhoudsopgave (/samen) ---------- */

.inhoudsopgave{ list-style:none; margin:0; padding:0; }
.inhoudsopgave li{ margin-bottom:.75rem; }
.inhoudsopgave a{ text-decoration:none; }
.inhoudsopgave a:hover{ text-decoration:underline; }

/* ---------- ruimte op grotere schermen ---------- */

@media (min-width:48rem){
  :root{ --rand:2.5rem; }
  body{ font-size:1.25rem; }
  .blok{ padding:7.5rem 0; }        /* 120px */
  .blok--ruim{ padding:10rem 0; }
}