:root { --bg:#ffffff; --fg:#1a1a1a; --muted:#6b7280; --brand:#0f766e; --brand-2:#0ea5a4; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; font-size:14px; line-height:20px; font-weight:400; color:#444; background:var(--bg); }
.container { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* Header & Nav */
.site-header { background:#ffffff; border-bottom:1px solid #e5e7eb; }
.site-header .container { display:flex; align-items:center; justify-content:flex-start; height:72px; }
.site-title { font-weight:600; letter-spacing:0.2px; }
.site-nav ul { list-style:none; padding:0; margin:0; }
.site-nav a { display:block; text-decoration:none; color:#1d4ed8; padding:8px 0; }
.site-nav a:hover { text-decoration:underline; }
.site-nav a[aria-current="page"] { font-weight:600; color:#1e40af; position:relative; }
.site-nav a[aria-current="page"]::before { content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:18px; background:#1d4ed8; border-radius:2px; }

/* Sections */
.section { padding:16px 0; }
.section.alt { background:transparent; }
h1, h2 { margin:0 0 12px 0; }
p { margin:0 0 12px 0; color:var(--muted); }
.board-list { padding-left:18px; margin:0; }

/* Footer */
.site-footer { border-top:1px solid #e5e7eb; padding:24px 0; color:var(--muted); }

/* Small helpers */
@media (max-width: 640px) {
  .site-header .container { height: auto; padding: 12px 16px; gap: 12px; }
}

/* Layout similar to stichting site: left sidebar, right content */
.layout { display:flex; gap:24px; padding:24px 0; }
.sidebar { width:240px; flex:0 0 240px; border-right:1px solid #e5e7eb; padding-right:16px; }
.content { flex:1 1 auto; max-width:720px; }

.content h1 { font-size: 20px; margin-top: 8px; margin-bottom: 10px; }
.content h2 { font-size: 18px; margin-top: 8px; margin-bottom: 10px; }
.content p, .content li { color:#374151; }
.board-list { padding-left:18px; }

/* Breadcrumbs */
.breadcrumb { font-size: 14px; margin-bottom: 8px; color:#6b7280; }
.breadcrumb a { color:#1d4ed8; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb .sep { margin: 0 6px; color:#9ca3af; }

/* Media */
.content img { max-width: 100%; height: auto; display: block; }
.content figure { margin: 12px 0; }
.content figcaption { font-size: 14px; color:#6b7280; margin-top: 6px; }

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .sidebar { width:100%; flex:0 0 auto; border-right:0; border-bottom:1px solid #e5e7eb; padding:0 0 12px 0; }
}