/* Koppel-pagina's (Zermelo / Magister / Somtoday) — papier + inkt, zelfde
   taal als de nieuwe homepage. */

@font-face { font-family:'Anton'; font-weight:400; font-display:swap; src:url('/fonts/anton/anton-latin-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:500; font-display:swap; src:url('/fonts/space-grotesk/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-weight:700; font-display:swap; src:url('/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:400; font-display:swap; src:url('/fonts/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-display:swap; src:url('/fonts/inter/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Caveat'; font-weight:700; font-display:swap; src:url('/fonts/caveat/caveat-latin-700.woff2') format('woff2'); }

:root {
  --paper:#f2ebdd; --ink:#1b1410; --soft:rgba(27,20,16,.66); --faint:rgba(27,20,16,.38);
  --stip:rgba(27,20,16,.28); --rule:rgba(27,20,16,.12); --marker:#d9541e;
  --stift:#f5a623; --groen:#3f6b45;
}
html.theme-dark {
  --paper:#16120e; --ink:#f2ebdd; --soft:rgba(242,235,221,.66); --faint:rgba(242,235,221,.36);
  --stip:rgba(242,235,221,.30); --rule:rgba(242,235,221,.12); --marker:#f0743c;
  --stift:#f5b54a; --groen:#7bab82;
}
@media (prefers-color-scheme: dark) {
  html:not(.theme-dark):not(.theme-light) {
    --paper:#16120e; --ink:#f2ebdd; --soft:rgba(242,235,221,.66); --faint:rgba(242,235,221,.36);
    --stip:rgba(242,235,221,.30); --rule:rgba(242,235,221,.12); --marker:#f0743c;
    --stift:#f5b54a; --groen:#7bab82;
  }
}

* { box-sizing:border-box; }
body {
  margin:0; background-color:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--marker); }
code {
  font-family:'Space Grotesk',monospace; font-size:.86em;
  background:rgba(27,20,16,.07); padding:2px 5px; border-radius:2px;
}
html.theme-dark code { background:rgba(242,235,221,.1); }

.wrap { max-width:760px; margin:0 auto; padding:0 22px; }
header { border-bottom:1px solid var(--rule); }
.top { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand img { width:32px; height:32px; border-radius:6px; border:1px solid var(--rule); }
.brand b { font-family:'Space Grotesk',sans-serif; font-size:1rem; }
.brand b em { font-style:normal; color:var(--marker); }
.terug {
  font-family:'Space Grotesk',sans-serif; font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; color:var(--soft);
}
.terug:hover { color:var(--marker); }

main { padding:52px 0 40px; }
.eyebrow {
  font-family:'Space Grotesk',sans-serif; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint); margin:0 0 14px;
}
h1 {
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem,9vw,4.6rem); line-height:.95; margin:0;
}
.lead { color:var(--soft); font-size:1.12rem; margin:20px 0 0; max-width:52ch; }
.stappen { margin:34px 0 0; padding:0; list-style:none; counter-reset:s; }
.stappen li { counter-increment:s; position:relative; padding:18px 0 18px 54px; border-top:1px dashed var(--stip); }
.stappen li:last-child { border-bottom:1px dashed var(--stip); }
.stappen li::before {
  content:counter(s); position:absolute; left:0; top:18px;
  font-family:'Anton',sans-serif; font-size:1.5rem; line-height:1; color:var(--marker);
}
.stappen b { font-family:'Space Grotesk',sans-serif; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; }
.stappen p { margin:4px 0 0; color:var(--soft); }
.let-op {
  margin-top:30px; padding:16px 18px; border-left:3px solid var(--stift);
  background:rgba(245,166,35,.13);
}
.let-op p { margin:0; color:var(--soft); }
.let-op p + p { margin-top:10px; }
.let-op b { color:var(--ink); }
.keuze {
  margin-top:30px; border:1px dashed var(--stip); padding:18px 20px;
}
.keuze h2 {
  font-family:'Space Grotesk',sans-serif; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 6px;
}
.keuze p { margin:0; color:var(--soft); }
.keuze p + h2 { margin-top:18px; }
.som { margin-top:30px; padding:18px 20px; border:1.5px solid var(--ink); border-radius:3px; }
.som h2 {
  font-family:'Space Grotesk',sans-serif; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 8px;
}
.som p { margin:0 0 10px; color:var(--soft); }
.vraag { margin-top:30px; font-family:'Caveat',cursive; font-size:1.35rem; font-weight:700; color:var(--soft); }
.vraag a { color:var(--marker); }
.acties { margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }
.btn {
  display:inline-flex; align-items:center; font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
  padding:14px 22px; border-radius:3px; text-decoration:none;
  border:1.5px solid var(--ink); color:var(--ink);
}
.btn.vol { background:var(--marker); border-color:var(--marker); color:#fff8f2; }
footer { border-top:1px solid var(--rule); padding:22px 0 34px; margin-top:50px; }
footer p {
  margin:0; font-family:'Space Grotesk',sans-serif; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}