/* ----------------------------------------------------------------------
   Krug Groeimotor - gedeelde huisstijl
   Gebruikt door de homepage, het publicatie-overzicht en losse publicaties.
   ---------------------------------------------------------------------- */

:root{
  --bg:#F7F6F2;
  --surface:#FFFFFF;
  --ink:#1A2238;
  --ink-muted:#5B6478;
  --accent:#1B6E4F;
  --accent-soft:#E7F0EA;
  --line:#DCDAD0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12181A; --surface:#182121; --ink:#EDEFEA; --ink-muted:#9AA6A0;
    --accent:#5CB596; --accent-soft:#1C2B26; --line:#2A3436;
  }
}
:root[data-theme="dark"]{
  --bg:#12181A; --surface:#182121; --ink:#EDEFEA; --ink-muted:#9AA6A0;
  --accent:#5CB596; --accent-soft:#1C2B26; --line:#2A3436;
}

*{box-sizing:border-box;}
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Source Serif 4", Georgia, serif; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1000px; margin:0 auto; padding:0 24px; }

.topbar{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:62px; }
.brand{
  font-family:"Libre Franklin", sans-serif; font-weight:700; font-size:14px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); text-decoration:none;
}
.navlinks{ display:flex; gap:26px; }
.navlinks a{
  font-family:"Libre Franklin", sans-serif; font-weight:500; font-size:13.5px;
  color:var(--ink-muted); text-decoration:none;
}
.navlinks a:hover{ color:var(--accent); }
.navlinks a.nav-taal{ border-left:1px solid var(--line); padding-left:20px; font-weight:600; letter-spacing:0.06em; }
@media (max-width:720px){ .navlinks a:not(.nav-taal){ display:none; } .navlinks{ gap:0; } .navlinks a.nav-taal{ border-left:none; padding-left:0; } }

.kicker{
  font-family:"Libre Franklin", sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 16px;
}
h1{
  font-family:"Libre Franklin", sans-serif; font-weight:800;
  font-size:clamp(30px,4.6vw,42px); letter-spacing:-0.015em; line-height:1.18;
  margin:0 0 18px; text-wrap:balance;
}
h2{
  font-family:"Libre Franklin", sans-serif; font-weight:700;
  font-size:clamp(20px,2.6vw,25px); letter-spacing:-0.01em; margin:0 0 10px; text-wrap:balance;
}
p{ margin:0 0 16px; }
.lead{ font-size:19px; color:var(--ink-muted); max-width:60ch; text-wrap:balance; }
.section-label{
  font-family:"Libre Franklin", sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 18px;
}

.colophon{
  border-top:1px solid var(--line); padding:26px 0 40px; text-align:center;
  font-family:"Libre Franklin", sans-serif; font-size:12px; letter-spacing:0.06em;
  color:var(--ink-muted);
}
.colophon a{ color:var(--ink-muted); }

/* ---------- voet ---------- */
.voet{
  border-top:1px solid var(--line); padding:30px 0 46px; text-align:center;
  font-family:"Libre Franklin", sans-serif; font-size:13px; color:var(--ink-muted);
}
.voet p{ margin:0 0 6px; }
.voet a{ color:var(--ink-muted); text-decoration:none; border-bottom:1px solid var(--line); }
.voet a:hover{ color:var(--accent); border-color:var(--accent); }

/* Logo in de kop (licht/donker, zelfde als homepage) */
.brand{ display:block; line-height:0; }
.brand .logo{ height:50px; width:auto; display:block; }
.logo-donker{ display:none !important; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-licht{ display:none; }
  :root:not([data-theme="light"]) .logo-donker{ display:block !important; }
}
:root[data-theme="dark"] .logo-licht{ display:none; }
:root[data-theme="dark"] .logo-donker{ display:block !important; }

/* middelgrote schermen: alleen de vier belangrijkste menu-onderdelen */
@media (max-width:920px){ .navlinks a.nav-extra{ display:none; } }