/* Gedeelde opmaak voor de blog. Eén bestand, zodat een nieuw artikel alleen
   tekst is en geen opmaak — anders lopen de artikelen na een paar weken
   uit elkaar. De kleuren komen van de garagepagina, zodat het één geheel is. */

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

:root{
  --cyan:#06b6d4;--cyan-dark:#0891b2;--green:#22c55e;--orange:#f59e0b;
  --bg:#0a0f1a;--bg2:#111827;--card:rgba(255,255,255,0.04);
  --t1:#fff;--t2:#94a3b8;--t3:#64748b;--border:rgba(255,255,255,0.08);
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--t1);line-height:1.6;
  overflow-x:hidden;max-width:100%;
}

a{color:var(--cyan)}

.container{max-width:760px;margin:0 auto;padding:0 24px}
@media (max-width:640px){ .container{padding:0 18px} }

/* ---- Balk bovenaan ---- */
.blognav{
  position:sticky;top:0;z-index:50;background:rgba(10,15,26,.85);
  backdrop-filter:blur(20px);border-bottom:1px solid var(--border);
}
.blognav-inner{
  display:flex;align-items:center;gap:18px;padding:14px 24px;
  max-width:760px;margin:0 auto;
}
.blognav .logo{font-size:17px;font-weight:900;letter-spacing:-.5px;text-decoration:none;color:var(--t1)}
.blognav .logo span{color:var(--cyan)}
.blognav .terug{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--t2);text-decoration:none;white-space:nowrap}
.blognav .terug:hover{color:var(--t1)}

/* ---- Artikel ---- */
.post{padding:52px 0 70px}
.post .eyebrow{
  display:inline-block;font-size:12px;font-weight:800;color:var(--cyan);
  text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;
}
.post h1{font-size:clamp(28px,4.5vw,40px);font-weight:900;letter-spacing:-1px;line-height:1.2;margin-bottom:14px}
.post .meta{font-size:13.5px;color:var(--t3);margin-bottom:34px}

/* Leesbaarheid gaat voor: iets groter dan de rest van de site, want dit
   zijn geen kopjes maar lopende tekst. */
.post p{font-size:16.5px;line-height:1.8;color:var(--t2);margin-bottom:20px}
.post h2{font-size:23px;font-weight:800;color:var(--t1);margin:38px 0 14px;letter-spacing:-.4px}
.post h3{font-size:18px;font-weight:800;color:var(--t1);margin:28px 0 10px}
.post ul,.post ol{margin:0 0 20px 22px}
.post li{font-size:16.5px;line-height:1.8;color:var(--t2);margin-bottom:8px}
.post strong{color:var(--t1);font-weight:700}
.post blockquote{
  border-left:3px solid var(--cyan);padding:4px 0 4px 18px;margin:0 0 20px;
  color:var(--t2);font-style:italic;
}
.post table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.post th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);color:var(--t3);font-size:12.5px;text-transform:uppercase;letter-spacing:.5px}
.post td{padding:11px 12px;border-bottom:1px solid var(--border);color:var(--t2)}
.post td:first-child{color:var(--t1);font-weight:600}
.tabel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- Wie schreef dit ---- */
.auteur{
  display:flex;gap:16px;align-items:center;margin-top:48px;padding-top:26px;
  border-top:1px solid var(--border);
}
.auteur img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--border)}
.auteur .naam{font-size:15px;font-weight:800}
.auteur .rol{font-size:13px;color:var(--t3);line-height:1.5}

/* ---- Rustige verwijzing onderaan ---- */
.slot{
  margin-top:30px;padding:22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(6,182,212,.09),rgba(6,182,212,.02));
  border:1px solid rgba(6,182,212,.28);
}
.slot .kop{font-size:16px;font-weight:800;margin-bottom:5px}
.slot .sub{font-size:13.5px;color:var(--t2);line-height:1.6;margin-bottom:14px}
.slot a{
  display:inline-block;padding:11px 20px;border-radius:10px;background:var(--cyan);
  color:#04252c;font-weight:800;text-decoration:none;font-size:14px;
}

/* ---- Overzichtspagina ---- */
.lijst{padding:46px 0 70px}
.lijst h1{font-size:clamp(28px,4.5vw,38px);font-weight:900;letter-spacing:-1px;margin-bottom:10px}
.lijst .intro{font-size:16px;color:var(--t2);margin-bottom:34px;line-height:1.7}
.kaart{
  display:block;text-decoration:none;padding:20px;border-radius:14px;
  border:1px solid var(--border);background:var(--card);margin-bottom:14px;
  transition:border-color .15s,background .15s;
}
.kaart:hover{border-color:rgba(6,182,212,.4);background:rgba(255,255,255,.06)}
.kaart .datum{font-size:12px;color:var(--t3);margin-bottom:6px}
.kaart .titel{font-size:19px;font-weight:800;color:var(--t1);margin-bottom:6px;line-height:1.35}
.kaart .samenvatting{font-size:14.5px;color:var(--t2);line-height:1.65}

/* ---- Voettekst ---- */
.voet{border-top:1px solid var(--border);padding:26px 0;text-align:center}
.voet a{font-size:13.5px;color:var(--t2);text-decoration:none;margin:0 10px}
.voet a:hover{color:var(--t1)}