*{box-sizing:border-box; margin:0; padding:0;}

:root{
  --papier: #EDE7DA;
  --papier-diep: #E3DCC8;
  --inkt: #26221C;
  --inkt-zacht: #5C5548;
  --inkt-vaag: #8B8271;
  --lijn: #C9C0AC;
  --lijn-sterk: #A99F87;
  --signaal: #3E5C4E;
  --signaal-zacht: #7C9186;
  --papier-rgb: 237,231,218;
}

html{scroll-behavior:smooth;}

body{
  background:var(--papier);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(38,34,28,0.05) 1px, transparent 0);
  background-size:22px 22px;
  color:var(--inkt);
  font-family:'IBM Plex Serif', Georgia, serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:'IBM Plex Mono', monospace;}

.wrap{max-width:680px; margin:0 auto; padding:0 28px;}

a{color:var(--signaal);}

/* ── Kop ─────────────────────────────────────────────────────────── */
header.top{
  padding:28px 0;
  border-bottom:1px solid var(--lijn);
}
.top-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.naam-merk{
  display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:15px;
  letter-spacing:.02em; color:var(--inkt); text-decoration:none;
}
.merk-icoon{flex-shrink:0;}
.top-links{display:flex; gap:22px; align-items:center;}
.top-links a{
  font-family:'IBM Plex Mono', monospace; font-size:13px; text-decoration:none;
  color:var(--inkt-zacht); border-bottom:1px solid transparent;
}
.top-links a:hover{color:var(--signaal); border-bottom-color:var(--signaal);}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{padding-top:64px; padding-bottom:56px;}
.hero-grid{display:grid; grid-template-columns:1fr auto; gap:40px; align-items:start;}
.hero-label{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--signaal); margin-bottom:18px; display:flex; align-items:flex-start; gap:10px;
}
.hero-label::before{margin-top:7px;}
.hero-label::before{content:''; width:22px; height:1px; background:var(--signaal);}
.hero h1{
  font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:clamp(28px, 5vw, 42px);
  line-height:1.25; color:var(--inkt); letter-spacing:-0.01em; margin-bottom:22px;
}
.hero .lede{
  font-size:17.5px; color:var(--inkt-zacht); max-width:46ch; margin-bottom:28px;
}
.hero-ctas{display:flex; gap:10px; flex-wrap:wrap;}

.portret-kader{
  width:148px; height:148px; border:1px solid var(--lijn-sterk);
  padding:6px; flex-shrink:0;
}
.portret-kader img, .portret-kader .placeholder{
  width:100%; height:100%; object-fit:cover; display:block;
}
.portret-kader .placeholder{
  background:var(--papier-diep); display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--inkt-vaag); text-align:center; padding:10px;
  border:1px dashed var(--lijn-sterk);
}

/* ── Knoppen ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--inkt); color:var(--papier); font-family:'IBM Plex Mono', monospace; font-size:13.5px; font-weight:500;
  padding:10px 16px; text-decoration:none; border:1px solid var(--inkt);
}
.btn:hover{background:transparent; color:var(--inkt);}
.btn-outline{
  background:transparent; color:var(--inkt); border:1px solid var(--lijn-sterk);
}
.btn-outline:hover{border-color:var(--inkt);}

/* ── Secties: veldnotitie-stijl ──────────────────────────────────── */
.sectie{
  padding-top:48px; padding-bottom:48px; border-top:1px solid var(--lijn);
  display:grid; grid-template-columns:110px 1fr; gap:28px;
}


.sectie-marge{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--inkt-vaag);
  padding-top:4px;
}
.sectie-marge .nr{color:var(--signaal); display:block; font-size:15px; margin-bottom:4px;}

.sectie h2{
  font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:19px; color:var(--inkt);
  margin-bottom:16px; letter-spacing:-0.01em;
}
.sectie p{color:var(--inkt-zacht); margin-bottom:14px; max-width:56ch;}
.sectie p:last-child{margin-bottom:0;}
.sectie em{color:var(--inkt); font-style:italic;}

/* ── Wat ik bouw: lijst i.p.v. kaarten-grid ─────────────────────── */
.bouw-lijst{display:flex; flex-direction:column;}
.bouw-item{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--lijn);
}
.bouw-item:last-child{border-bottom:none; padding-bottom:0;}
.bouw-item:first-child{padding-top:0;}
.bouw-titel{font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:15px; color:var(--inkt);}
.bouw-tekst{color:var(--inkt-zacht); font-size:15.5px; margin-top:4px; max-width:52ch;}
.bouw-item a.pijl{
  font-family:'IBM Plex Mono', monospace; font-size:13px; text-decoration:none; white-space:nowrap;
  color:var(--signaal); border-bottom:1px solid var(--signaal-zacht);
}
.bouw-item a.pijl:hover{border-bottom-color:var(--signaal);}

/* ── Contact/footer ──────────────────────────────────────────────── */
footer{padding:56px 0 40px; border-top:1px solid var(--lijn);}
footer h2{
  font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:22px; margin-bottom:14px;
}
footer p{color:var(--inkt-zacht); margin-bottom:24px; max-width:48ch;}
.footer-links{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.footer-bottom{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--inkt-vaag);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ── Toegankelijkheid ────────────────────────────────────────────── */
a:focus-visible, .btn:focus-visible{outline:2px solid var(--signaal); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* ── Mobiel — staat bewust helemaal onderaan, zodat deze regels altijd
   voorrang krijgen op de basisregels hierboven, ongeacht latere
   bewerkingen aan die basisregels. ──────────────────────────────── */
@media (max-width:560px){
  .hero{padding-top:44px; padding-bottom:40px;}
  .sectie{padding-top:36px; padding-bottom:36px; grid-template-columns:1fr; gap:10px;}
  footer{padding-top:44px; padding-bottom:32px;}

  /* Header gecentreerd i.p.v. logo-links/nav-rechts naast elkaar */
  .top-inner{flex-direction:column; justify-content:center; text-align:center;}

  /* Hero volledig gecentreerd: foto boven de tekst, alles in het midden */
  .hero-grid{grid-template-columns:1fr; justify-items:center; text-align:center;}
  .portret-kader{order:-1; width:120px; height:120px;}
  .hero-label{font-size:11.5px; letter-spacing:.05em; justify-content:center;}
  .hero .lede{max-width:none;}
  .hero-ctas{justify-content:center;}

  .footer-bottom{flex-direction:column; gap:6px;}
}

/* ── Berichtenlijst ──────────────────────────────────────────────── */
.berichten-lijst{display:flex; flex-direction:column;}
.bericht-item{
  padding:26px 0; border-bottom:1px solid var(--lijn);
  display:block; text-decoration:none; color:inherit;
}
.bericht-item:first-child{padding-top:0;}
.bericht-item:last-child{border-bottom:none;}
.bericht-datum{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--inkt-vaag); margin-bottom:8px; display:block;
}
.bericht-titel{
  font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:20px; color:var(--inkt);
  margin-bottom:8px; letter-spacing:-0.01em;
}
.bericht-item:hover .bericht-titel{color:var(--signaal);}
.bericht-samenvatting{color:var(--inkt-zacht); font-size:15.5px; max-width:58ch;}

/* ── Losse berichtpagina ─────────────────────────────────────────── */
.post-kop{padding:48px 0 32px;}
.post-terug{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--inkt-vaag); text-decoration:none;
  display:inline-block; margin-bottom:22px;
}
.post-terug:hover{color:var(--signaal);}
.post-kop h1{
  font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:clamp(26px, 4.5vw, 38px);
  line-height:1.25; color:var(--inkt); letter-spacing:-0.01em; margin-bottom:14px;
}
.post-inhoud{font-size:17px; line-height:1.75; color:var(--inkt-zacht); padding-bottom:56px;}
.post-inhoud h2, .post-inhoud h3, .post-inhoud h4{
  font-family:'IBM Plex Mono', monospace; font-weight:500; color:var(--inkt); letter-spacing:-0.01em;
  margin:34px 0 14px;
}
.post-inhoud h2:first-child, .post-inhoud h3:first-child, .post-inhoud h4:first-child{margin-top:0;}
.post-inhoud h2{font-size:22px;}
.post-inhoud h3{font-size:19px;}
.post-inhoud h4{font-size:16px;}
.post-inhoud p{margin-bottom:18px;}
.post-inhoud ul, .post-inhoud ol{margin:0 0 18px 26px;}
.post-inhoud li{margin-bottom:8px;}
.post-inhoud strong{color:var(--inkt); font-weight:600;}
.post-inhoud a{color:var(--signaal); text-decoration:underline;}
.post-inhoud blockquote{
  border-left:3px solid var(--signaal-zacht); padding-left:18px; color:var(--inkt-vaag); font-style:italic; margin:22px 0;
}
.post-inhoud blockquote p:last-child{margin-bottom:0;}
.post-inhoud code{background:var(--papier-diep); border:1px solid var(--lijn); border-radius:4px; padding:2px 7px; font-family:'IBM Plex Mono', monospace; font-size:.9em; color:var(--signaal);}
.post-inhoud hr{border:none; border-top:1px solid var(--lijn-sterk); margin:36px 0;}

/* ── Admin: berichtenbeheer ──────────────────────────────────────── */
.admin-tabel{width:100%; border-collapse:collapse;}
.admin-tabel th{text-align:left; font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--inkt-vaag); padding:10px 12px; border-bottom:1px solid var(--lijn-sterk);}
.admin-tabel td{padding:14px 12px; border-bottom:1px solid var(--lijn); font-size:14.5px; vertical-align:middle;}
.admin-tabel tr:last-child td{border-bottom:none;}
.status-chip{font-family:'IBM Plex Mono', monospace; font-size:11px; padding:2px 9px; border-radius:10px; border:1px solid var(--lijn-sterk);}
.status-chip.gepubliceerd{color:var(--signaal); border-color:var(--signaal-zacht);}
.status-chip.concept{color:var(--inkt-vaag);}

.form-veld{margin-bottom:20px;}
.form-veld label{display:block; font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:.03em; color:var(--inkt-zacht); margin-bottom:7px;}
.form-veld input[type=text], .form-veld input[type=email], .form-veld input[type=password]{
  width:100%; background:var(--papier); border:1px solid var(--lijn-sterk); border-radius:3px;
  color:var(--inkt); font-family:'IBM Plex Serif', serif; font-size:15.5px; padding:10px 12px;
}
.form-veld textarea{
  width:100%; min-height:420px; background:var(--papier); border:1px solid var(--lijn-sterk); border-radius:3px;
  color:var(--inkt); font-family:'IBM Plex Mono', monospace; font-size:14px; line-height:1.65; padding:16px; resize:vertical;
}
.form-veld input:focus, .form-veld textarea:focus{outline:none; border-color:var(--signaal);}
.form-check{display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono', monospace; font-size:13.5px; color:var(--inkt-zacht);}
.melding{border-radius:4px; padding:11px 15px; font-size:13.5px; margin-bottom:20px; border:1px solid var(--lijn-sterk);}
.melding-fout{color:#9A5636; border-color:#9A5636;}
.melding-succes{color:var(--signaal); border-color:var(--signaal-zacht);}
.leeg-staat{padding:40px 0; text-align:center; color:var(--inkt-vaag); font-size:14.5px;}

/* ── Auteursvermelding en deel-knoppen onder een bericht ────────────── */
.post-auteur{
  border-top:1px solid var(--lijn); padding-top:28px;
}
.post-auteur a{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--inkt);
}
.post-auteur img{border-radius:50%; object-fit:cover; border:1px solid var(--lijn-sterk);}
.post-auteur span{font-size:14px; color:var(--inkt-zacht); line-height:1.4;}
.post-auteur strong{color:var(--inkt); font-weight:500;}
.post-auteur a:hover strong{color:var(--signaal);}

.post-delen{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--lijn); padding:22px 0 48px; margin-top:28px;
}
.post-delen-label{font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--inkt-vaag);}
.post-delen a{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--inkt-zacht); text-decoration:none;
  border-bottom:1px solid var(--lijn-sterk);
}
.post-delen a:hover{color:var(--signaal); border-bottom-color:var(--signaal);}