/* System font stack; geen externe fonts */
:root{
  --fg: #0a0a0a;
  --bg: #ffffff;
  --muted: #4b5563;
  --accent: #0f766e;
  --focus: #1d4ed8;
  --border: #e5e7eb;
  --maxw: 75ch;
}

@media (prefers-color-scheme: dark){
  :root{
    --fg: #f5f5f5;
    --bg: #0b0b0b;
    --muted: #9ca3af;
    --accent: #22d3ee;
    --focus: #93c5fd;
    --border: #1f2937;
  }
}

/* Hoog-contrast modus (toggle) */
.hc :where(body, body *){
  color: #000 !important;
  background: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
}

*{ box-sizing:border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height:1.6;
  color:var(--fg);
  background:var(--bg);
}

.container{
  width:min(92vw, var(--maxw));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;
  left:1rem; top:1rem;
  width:auto;height:auto; padding:.75rem 1rem;
  background:#fff; color:#000; outline:3px solid var(--focus);
  z-index:1000;
}

.site-header{
  position:sticky; top:0;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  z-index:10;
}
.brand h1{ margin:.75rem 0 0 0; font-size:1.375rem; }
.subtitle{ margin:.25rem 0 .75rem 0; color:var(--muted); }
.site-nav ul{
  display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:center;
  padding:0; margin:0 0 .75rem 0; list-style:none;
}
.site-nav a, .linklike{
  text-decoration:none;
  padding:.5rem .75rem;
  border-radius:.375rem;
  border:1px solid transparent;
}
.site-nav a:hover, .linklike:hover{ text-decoration:underline; }
.site-nav a:focus, .linklike:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
.linklike{
  background:none; border:1px solid var(--border); cursor:pointer;
}

.section{ padding:3rem 0; border-bottom:1px solid var(--border); }
.section h2{ margin-top:0; font-size:1.5rem; }
.role h3{ margin-bottom:.25rem; }
.time{ color:var(--muted); margin-top:.25rem; }

.pill-list{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0; list-style:none; }
.pill-list li{
  border:1px solid var(--border);
  padding:.5rem .75rem; border-radius:999px;
}

.cards{ display:grid; grid-template-columns:1fr; gap:1rem; padding:0; list-style:none; }
.cards li{ border:1px solid var(--border); padding:1rem; border-radius:.5rem; }
.cards h3{ margin:.25rem 0 .5rem 0; }

.meta{ color:var(--muted); }
.small{ font-size:.9375rem; color:var(--muted); }

.site-footer{
  padding:2rem 0;
}
.backtotop{
  display:inline-block; margin-top:.5rem;
}
.backtotop:focus{ outline:3px solid var(--focus); outline-offset:2px; }

/* Toetsenbord focus zichtbaar, niet alleen kleur */
a, button{
  min-height: 44px;
  min-width: 44px;
}

/* Mobiel menu: progressieve enhancement via JS */
#navlist{ /* default: zichtbaar en toegankelijk zonder JS */ }
.nav-toggle{ display:none; }

@media (max-width: 640px){
  .nav-toggle{ display:inline-block; }
  .site-nav[aria-expanded="false"] #navlist{ display:block; }
}