:root{
  --paper:#F7F6F2;
  --ink:#101319;
  --blauw:#1E38C8;
  --blauw-donker:#16299B;
  --grijs:#5D6270;
  --lijn:#101319;
  --raster:rgba(30,56,200,.07);
  --raster-zwaar:rgba(30,56,200,.13);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:
    linear-gradient(var(--raster-zwaar) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-zwaar) 1px, transparent 1px),
    linear-gradient(var(--raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster) 1px, transparent 1px),
    var(--paper);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:17px;
  line-height:1.55;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--blauw);outline-offset:3px}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 24px}

/* kop + navigatie */
header{padding:26px 0 0}
.bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:2px solid var(--lijn);padding-bottom:14px}
.mark{
  font-family:"Archivo",sans-serif;
  font-weight:900;font-stretch:110%;
  font-size:1.15rem;letter-spacing:.005em;
  text-decoration:none;text-transform:lowercase;
}
.mark span{color:var(--blauw)}
.blad{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);white-space:nowrap}
nav{display:flex;gap:22px;padding:12px 0 0;flex-wrap:wrap}
nav a{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--grijs);padding-bottom:2px;
}
nav a:hover{color:var(--blauw)}
nav a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--blauw)}

/* inhoud */
main{flex:1}
.hero{padding:56px 0 64px}
h1{
  font-family:"Archivo",sans-serif;
  font-weight:900;font-stretch:118%;
  font-size:clamp(3rem,11vw,5.6rem);
  line-height:.97;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin-bottom:26px;
}
h1 em{font-style:normal;color:var(--blauw)}
.pagina{padding:46px 0 64px}
.pagina h1{font-size:clamp(2.1rem,7vw,3.4rem);margin-bottom:18px}
.intro{color:var(--grijs);max-width:34em;margin-bottom:36px}
.sub{
  font-size:clamp(1.05rem,2.6vw,1.2rem);
  max-width:30em;
  margin-bottom:38px;
}
.sub b{font-weight:700}
.stil{color:var(--grijs)}

/* knoppen */
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:58px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:1rem;
  text-decoration:none;
  padding:15px 24px;
  border:2px solid var(--lijn);
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.btn-vol{background:var(--blauw);border-color:var(--blauw);color:#fff}
.btn-vol:hover{background:var(--blauw-donker);border-color:var(--blauw-donker)}
.btn-lijn{background:transparent;color:var(--ink)}
.btn-lijn:hover{border-color:var(--blauw);color:var(--blauw)}
.btn svg{width:18px;height:18px;flex:none}

/* kaarten (blad-verwijzingen) */
.kaarten{display:grid;gap:14px;border-top:2px solid var(--lijn);padding-top:26px}
.kaart-kop{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);margin-bottom:4px}
.kaart{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border:2px solid var(--lijn);background:var(--paper);
  padding:16px 18px;text-decoration:none;
  transition:border-color .12s ease;
}
.kaart:hover{border-color:var(--blauw)}
.kaart:hover .kaart-titel{color:var(--blauw)}
.kaart-titel{font-weight:700}
.kaart-sub{color:var(--grijs);font-size:.92rem}
.kaart-nr{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--grijs);white-space:nowrap}

/* artikel (guides) */
article{max-width:38em}
article h2{
  font-family:"Archivo",sans-serif;font-weight:900;font-stretch:110%;
  font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em;
  margin:34px 0 12px;
}
article p{margin-bottom:16px}
article ol{margin:0 0 16px 22px}
article ol li{margin-bottom:10px}
article .kader{
  border:2px solid var(--blauw);padding:16px 18px;margin:24px 0;
  background:rgba(30,56,200,.05);
}
article .kader b{color:var(--blauw)}

/* status-lijst (templates/projecten) */
.blokken{display:grid;gap:14px;max-width:38em}
.blok{border:2px solid var(--lijn);background:var(--paper);padding:16px 18px}
.blok-kop{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px}
.blok-titel{font-weight:700}
.tag{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1.5px solid var(--grijs);color:var(--grijs);padding:3px 8px;white-space:nowrap}
.tag-blauw{border-color:var(--blauw);color:var(--blauw)}
.blok p{color:var(--grijs);font-size:.95rem}

/* tekeningstempel */
footer{padding:34px 0 40px}
.stempel{
  margin-left:auto;
  max-width:340px;
  border:2px solid var(--lijn);
  background:var(--paper);
  font-size:.72rem;
}
.stempel .rij{display:flex;border-top:1px solid var(--lijn)}
.stempel .rij:first-child{border-top:0}
.stempel .cel{padding:7px 10px}
.stempel .label{width:38%;border-right:1px solid var(--lijn);
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs);font-size:.62rem}
.stempel .waarde{flex:1;font-weight:500}

@media (max-width:520px){
  .btn{width:100%;justify-content:center}
  .stempel{max-width:none}
}
@media (prefers-reduced-motion:reduce){.btn,.kaart{transition:none}}

/* contactblok */
.contactblok{
  border:2px solid var(--blauw);
  background:rgba(30,56,200,.05);
  padding:24px 24px 22px;
  margin-top:46px;
  max-width:38em;
}
.contactblok h2{
  font-family:"Archivo",sans-serif;font-weight:900;font-stretch:110%;
  font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;
  margin-bottom:8px;
}
.contactblok p{color:var(--grijs);margin-bottom:18px}
.contactblok .btn{margin-bottom:0}