/* ==========================================================================
   De Nieuwe PLAG — design tokens & componenten
   Middernacht-groen + honing-goud/brons + helder saliewit ("Verfijnd Veld").
   Goud in twee rollen: --ochre (display, op donker) · --ochre-deep (tekst/randen op licht).
   Merriweather (koppen) · Vestula (UI/body)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-display:swap; font-family:"Merriweather"; font-style:normal; font-weight:400;
  src:url("../fonts/Merriweather-Regular.woff2") format("woff2"); }
@font-face { font-display:swap; font-family:"Merriweather"; font-style:italic; font-weight:400;
  src:url("../fonts/Merriweather-Italic.woff2") format("woff2"); }
@font-face { font-display:swap; font-family:"Merriweather"; font-style:normal; font-weight:700;
  src:url("../fonts/Merriweather-Bold.woff2") format("woff2"); }
@font-face { font-display:swap; font-family:"Merriweather"; font-style:italic; font-weight:700;
  src:url("../fonts/Merriweather-BoldItalic.woff2") format("woff2"); }
@font-face { font-display:swap; font-family:"Vestula"; font-style:normal; font-weight:400;
  src:url("../fonts/VestulaPro-Regular.woff2") format("woff2"); }
@font-face { font-display:swap; font-family:"Vestula"; font-style:italic; font-weight:400;
  src:url("../fonts/VestulaItalic-Regular.woff2") format("woff2"); }
@font-face { font-display:swap; font-family:"Vestula"; font-style:normal; font-weight:700;
  src:url("../fonts/VestulaPro-DemiBold.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --paper:       #FBFCF9;
  --paper-2:     #DFF1E6;
  --paper-3:     #CEE9D8;
  --ink:         #1A2E24;
  --ink-2:       #2C4A3A;
  --ink-3:       #4F6E5D;
  --ochre:       #D8A73E;
  --ochre-deep:  #7E5A18;
  --ochre-soft:  #F0E7C7;
  --moss:        #2A6644;
  --moss-deep:   #1A2E24;
  --moss-soft:   #7DAE8F;
  --brick:       #B85033;
  --line:        #B5D9C2;
  --line-2:      #8DC4A1;
  --serif:       "Merriweather", Georgia, serif;
  --sans:        "Vestula", "Segoe UI", system-ui, sans-serif;
  --wrap:        1360px;
  --radius:      14px;
  --radius-lg:   26px;
  --sh-sm:       0 2px 8px rgba(26,46,36,.07);
  --sh-md:       0 10px 24px rgba(26,46,36,.11);
  --sh-lg:       0 22px 50px rgba(26,46,36,.17);
  --ease:        cubic-bezier(.45,0,.55,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


.embed-media {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin: 4rem auto;
  clear: both;
}

.embed-media iframe,
.embed_media object,
.embed_media embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

img { max-width: 100%; display: block; border: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 700; margin: 0; line-height: 1.12; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--ochre-soft); color: var(--ink); }

/* Papiergrein overlay */
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: .04; mix-blend-mode: multiply;
}
.grain > * { position: relative; z-index: 1; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
@media (min-width: 1240px) { .wrap { padding: 0; } }
.eyebrow {
  font-family: var(--sans); font-weight: 700; color: var(--moss);
  font-size: 1.35rem; letter-spacing: .16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6em; margin: 0;
}
/* .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--ochre-deep); display: inline-block; } */
.section-title { font-size: clamp(2.8rem, 4vw, 4rem); letter-spacing: -.01em; }
.lead { font-family: var(--sans); font-size: 2rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 100px;
}
.brand-text {
  font-family: var(--serif); font-weight: 700; font-size: 2.8rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.01em; line-height: 1;
}
.brand-text .small {
  font-family: var(--sans); font-weight: 400; font-size: 1.5rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ochre-deep);
  display: block; margin-bottom: 4px;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--sans); font-weight: 400; font-size: 1.6rem; color: var(--ink);
  padding: 9px 14px; border-radius: 9px; position: relative;
  transition: background .2s var(--ease); text-decoration: none; text-transform: uppercase;
}
.nav a:hover { background: var(--paper-2); }
.nav a.is-active { font-weight: 700; }
.nav a.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 3px; border-radius: 3px; background: var(--moss-deep);
}
.nav .lang {
  margin-left: 10px; border: 1.5px solid var(--line-2); border-radius: 100vh;
  padding: 7px 16px; font-size: 1.45rem; font-weight: 700; color: var(--ink);
  letter-spacing: .06em; transition: background .2s, color .2s, border-color .2s;
}
.nav .lang:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Hamburger-knop (alleen zichtbaar onder 920px, zie Responsive) */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: transparent; border: 1.5px solid var(--line-2); border-radius: 12px;
  cursor: pointer; color: var(--ink);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.nav-toggle:hover { background: var(--paper-2); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle.is-open .nav-toggle__bars { background: transparent; }
.nav-toggle.is-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans); font-weight: 700; font-size: 1.7rem;
  padding: 15px 28px; border-radius: 100vh;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  text-decoration: none;
}
.btn--primary { background: var(--moss); color: var(--paper); box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.link-arrow { font-weight: 700; color: var(--moss); display: inline-flex; align-items: center; gap: .4em; }
.link-arrow svg { width: .95em; height: .95em; transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Missie kicker ---------- */
.mission-kicker {
  font-family: var(--sans); font-weight: 700; font-size: 1.4rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--moss); display: inline-flex; align-items: center; gap: .7em;
}
.mission-kicker::before { content: ""; width: 30px; height: 2px; background: var(--ochre-deep); }
.mission-h { font-family: var(--serif); font-weight: 700; color: var(--ink); letter-spacing: -.015em; line-height: 1.07; }
.mission-h em { font-style: italic; color: var(--moss); }

/* ---------- Hero slideshow ---------- */
.hero-slide {
  position: relative; overflow: hidden;
  min-height: 640px; background: var(--paper-3);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.slide-img {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity 1.2s ease;
}
.slide-img.active { opacity: 1; }
.slide-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.slide-wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(95deg,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 90%, transparent) 26%,
    color-mix(in srgb, var(--paper) 52%, transparent) 42%,
    transparent 60%);
}
.hero-inner {
  position: relative; z-index: 2; min-height: 640px;
  display: flex; align-items: center; padding-block: 60px 140px;
}
.hero-panel { max-width: 560px; }
.hero-h1 {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(3rem, 4.6vw, 5.4rem); line-height: 1.07;
  letter-spacing: -.015em; margin-top: 20px;
}
.hero-h1 em { font-style: italic; color: var(--moss); }
.hero-sub {
  font-family: var(--serif); font-size: 2rem; line-height: 1.5;
  color: var(--ink-2); max-width: 42ch; margin-top: 22px;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-block: 32px; }
.slide-dots {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; gap: 9px;
}
.slide-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  border: 1.5px solid var(--moss-deep);
  cursor: pointer; padding: 0;
  transition: background .25s, transform .25s;
}
.slide-dot.active { background: var(--moss-deep); border-color: var(--moss-deep); transform: scale(1.35); }
.hero-cap {
  position: absolute; right: 28px; bottom: 30px; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.hero-cap.active { opacity: 1; pointer-events: auto; }
.hero-cap__text {
  display: none; max-width: 280px; text-align: right;
  font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--ink);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  padding: 6px 13px; border-radius: 6px;
}
.hero-cap.is-open .hero-cap__text { display: block; }
.hero-cap__toggle {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: none;
  font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 1.3rem;
  color: var(--ink); background: color-mix(in srgb, var(--paper) 84%, transparent);
  cursor: pointer; line-height: 1;
}
.hero-cap__toggle:hover { opacity: .8; }

/* ---------- Sectie 2: Blog + Team ---------- */
.section-blogteam {
  background: var(--moss-soft);
  padding: 80px 0;
}
.blogteam-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start;
  position: relative; z-index: 2;
}

.blogteam-grid > * { min-width: 0; }

/* Blog kaarten — verticaal */
.blog-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.blog-stack > * { min-width: 0; }
.blog-card {
  background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--sh-sm); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  text-decoration: none; color: inherit;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.blog-card__img { height: 200px; overflow: hidden; background: var(--paper-3); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: 28px 28px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card__meta { font-family: var(--sans); font-size: 1.4rem; color: var(--ink-3); }
.blog-card__title { font-family: var(--serif); font-weight: 700; font-size: 2.6rem; color: var(--ink); line-height: 1.15; }
.blog-card__excerpt { font-family: var(--serif); font-size: 1.6rem; color: var(--ink-2); line-height: 1.5; }
.blog-card__more {
  margin-top: auto; padding-top: 12px;
  font-family: var(--sans); font-weight: 700; font-size: 1.5rem; color: var(--moss);
  display: inline-flex; align-items: center; gap: .4em;
}
.blog-card__more svg { width: .85em; height: .85em; transition: transform .2s var(--ease); }
.blog-card:hover .blog-card__more svg { transform: translateX(4px); }
.all-blogs {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: 18px; font-family: var(--sans); font-weight: 700;
  font-size: 1.5rem; color: #fff; text-decoration: none;
}
.all-blogs svg { width: .9em; height: .9em; transition: transform .2s var(--ease); }
.all-blogs:hover svg { transform: translateX(4px); }

/* Team box */
.team-box {
  background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--sh-sm); padding: 28px 28px 22px;
}
.team-box-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px dotted var(--line-2); padding-bottom: 16px; margin-bottom: 22px;
}
.team-box-head h3 { font-family: var(--serif); font-weight: 700; font-size: 2rem; color: var(--ink); }
.team-box-head a {
  font-family: var(--sans); font-size: 1.4rem; font-weight: 700; color: var(--moss);
  text-decoration: none; display: inline-flex; align-items: center; gap: .3em;
}
.team-box-head a svg { width: .9em; height: .9em; transition: transform .2s var(--ease); }
.team-box-head a:hover svg { transform: translateX(4px); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-swiper { display: none; }
.team-swiper-pagination { display: none; }
.tmb {
  min-width: 0;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  align-items: center; text-align: center;
  transition: transform .25s var(--ease);
}
.tmb:hover { transform: translateY(-4px); }
.tmb-photo-wrap {
  width: 90px; height: 90px; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-3); flex-shrink: 0;
  box-shadow: var(--sh-sm);
  transition: box-shadow .25s var(--ease);
}
.tmb:hover .tmb-photo-wrap { box-shadow: var(--sh-md); }
.tmb-photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.tmb:hover .tmb-photo { transform: scale(1.06); }
.tmb-avatar {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 2.4rem; color: var(--paper);
}
.tmb-body {
  padding: 12px 8px 0;
}
.tmb .name { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); font-weight: 700; line-height: 1.25; display: block; }
.tmb .role { font-family: var(--serif); font-size: 1.5rem; color: var(--ink-3); margin-top: 4px; line-height: 1.3; display: block; }

/* Avatar fallback kleuren */
.av0  { background: #2A6644; } .av1  { background: #A67C28; }
.av2  { background: #B85538; } .av3  { background: #1A3C2C; }
.av4  { background: #406855; } .av5  { background: #2A6644; }
.av6  { background: #A67C28; } .av7  { background: #B85538; }
.av8  { background: #1A3C2C; } .av9  { background: #406855; }
.av10 { background: #2A6644; }

/* ---------- Sectie 3: Nieuws/Agenda + Handboek ---------- */
.section-newshand {
  padding: 80px 0; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.newshand-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
/* Voorkomt dat lange woorden de grid-kolom breder maken dan beschikbaar */
.newshand-grid > * { min-width: 0; }

/* Nieuws + Agenda stroom */
.news-stream { display: flex; flex-direction: column; gap: 30px; }
.news-stream--grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

/* Agenda item */
.si--agenda {
  display: grid; grid-template-columns: 200px 1fr;
  min-height: 150px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sh-sm);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.si--agenda:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.si-agenda__body { padding: 24px 28px; display: flex; flex-direction: column; gap: 5px; }
.si-agenda__label {
  font-family: var(--sans); font-weight: 700; font-size: 1.2rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brick);
}
.si-agenda__title { font-family: var(--serif); font-weight: 700; font-size: 2.6rem; color: var(--ink); line-height: 1.18; }
.si-agenda__sub { font-family: var(--sans); font-size: 1.6rem; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.si-agenda__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 14px; text-align: center;
  background: var(--paper-2);
}
.si-agenda__day { 
    font-family: var(--sans);
    font-weight: 700;
    font-size: 5rem;
    color: var(--ink);
    line-height: .9;
}
.si-agenda__month {     
    font-family: var(--sans);
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--ochre-deep);
    text-transform: uppercase;
    line-height: 1.4;
   }

.si-agenda__year { 
    font-family: var(--sans);
    font-size: 1.8rem;
    color: var(--ink);
    line-height: 1;
    margin-top: 6px;
 }

/* Nieuws item */
.si--news {
  display: grid; grid-template-columns: 200px 1fr;
  min-height: 150px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sh-sm);
  overflow: hidden; 
  text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.si--news:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.si-news__img { overflow: hidden; background: var(--ochre-soft); }
.si-news__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-news__body { padding: 28px 28px 22px; display: flex; flex-direction: column; gap: 4px; }
.si-news__date { font-family: var(--sans); font-size: 1.2rem; color: var(--ink-3); }
.si-news__title { font-family: var(--serif); font-weight: 700; font-size: 2.6rem; color: var(--ink); line-height: 1.2; transition: color .2s; }
.si--news:hover .si-news__title { color: var(--moss); }

.all-news {
  display: inline-flex; align-items: center; gap: .4em;
  margin-top: 18px; font-family: var(--sans); font-weight: 700;
  font-size: 1.5rem; color: var(--moss); text-decoration: none;
}
.all-news svg { width: .9em; height: .9em; transition: transform .2s var(--ease); }
.all-news:hover svg { transform: translateX(4px); }

/* Handboek aankondiging */
.handboek-card {
  background: var(--paper-2);
  border-radius: var(--radius-lg); padding: 42px; color: var(--ink);
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  overflow-wrap: break-word;
}
.handboek-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: .04; mix-blend-mode: multiply;
}
.handboek-card > * { position: relative; z-index: 1; }
.hk-kicker {
  font-family: var(--sans); font-weight: 700; font-size: 1.25rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ochre-deep);
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 16px;
}
/* .hk-kicker::before { content: ""; width: 22px; height: 2px; background: var(--ochre-deep); display: inline-block; } */
.handboek-card h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.4rem, 2.8vw, 3.2rem); color: var(--ink);
  line-height: 1.1; margin-bottom: 14px;
  /* Lange samenstellingen ("Plattelandsgeschiedschrijving") netjes afbreken */
  overflow-wrap: break-word; hyphens: auto;
}
.handboek-card .hk-lead {
  font-family: var(--serif); font-size: 1.75rem; line-height: 1.52;
  color: var(--ink-2); margin-bottom: 28px;
}
.hk-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.hk-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(26,46,36,.07); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 14px 16px;
  transition: background .2s, border-color .2s;
}
.hk-item:hover { background: rgba(26,46,36,.11); border-color: var(--line-2); }
.hk-item svg { width: 22px; height: 22px; color: var(--ochre-deep); flex: 0 0 auto; margin-top: 2px; }
.hk-item strong { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); display: block; line-height: 1.2; margin-bottom: 2px; }
.hk-item span { font-family: var(--sans); font-size: 1.35rem; color: var(--ink-2); line-height: 1.35; }
.hk-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.btn--outline-gold {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--sans); font-weight: 700; font-size: 1.7rem;
  padding: 15px 28px; border-radius: 100vh;
  border: 1.5px solid var(--ink); color: var(--ink);
  background: transparent; text-decoration: none;
  transition: background .2s, color .2s;
}
.btn--outline-gold:hover { background: var(--ink); color: var(--paper); }
.btn--outline-gold svg { width: 1em; height: 1em; transition: transform .2s var(--ease); }
.btn--outline-gold:hover svg { transform: translateX(4px); }

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); color: #E2EBE6; padding: 72px 0 40px; }
.site-foot a { color: #E2EBE6; text-decoration: none; }
.site-foot a:hover { color: var(--ochre); }
.foot__top {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px;
}
.foot-brand-name { font-family: var(--serif); font-weight: 700; font-size: 2.4rem; color: var(--paper); letter-spacing: -.01em; line-height: 1; }
.foot-brand-name .small { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ochre); display: block; margin-bottom: 6px; }
.foot__brand p { font-family: var(--serif); font-size: 1.7rem; color: #C7DCCB; max-width: 38ch; margin-top: 16px; line-height: 1.55; }
.foot-logos { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.foot-logos__leiden { height: 50px; width: auto; }
.foot-logos__nwo { height: 60px; width: auto;    opacity: .9; }
.foot__col h4 { color: var(--ochre); font-family: var(--serif); font-weight: 700; font-size: 1.25rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.foot__col ul { display: flex; flex-direction: column; gap: 12px; font-family: var(--serif); font-size: 1.6rem; }
.foot__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 28px; font-family: var(--serif); font-size: 1.4rem; color: #7A9E8A; flex-wrap: wrap;
}

/* ---------- Responsive ---------- */
/* Tussen tablet en volle desktop is het tekstpaneel (560px) een groter deel van
   de breedte, waardoor het rechterdeel van de regels buiten de sluier viel. */
@media (min-width: 921px) and (max-width: 1180px) {
  .slide-wash {
    background: linear-gradient(95deg,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 93%, transparent) 40%,
      color-mix(in srgb, var(--paper) 74%, transparent) 62%,
      color-mix(in srgb, var(--paper) 30%, transparent) 80%,
      transparent 93%);
  }
}
@media (max-width: 920px) {
  .blogteam-grid, .newshand-grid { grid-template-columns: 1fr; }
  .news-stream--grid { grid-template-columns: 1fr; }
  .blog-stack { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .foot__top { grid-template-columns: 1fr; gap: 30px; }
  /* Foto en tekst niet langer over elkaar heen: de foto wordt een losse band
     bovenaan (scherp, geen sluier), de tekst staat er in normale flow onder
     op de effen achtergrond. Voorheen stond de tekst over de volle breedte
     over de foto heen met een sluier die de foto bijna helemaal wegdrukte. */
  .hero-slide { min-height: 0; }
  .hero-media { position: relative; inset: auto; aspect-ratio: 4 / 3; z-index: auto; }
  .hero-inner { min-height: 0; padding-block: 50px; }
  .slide-wash { background: none; }
  .slide-dots { bottom: 14px; }
  .hero-cap { right: 14px; bottom: 44px; }
  .hero-cap__text { font-size: 1.25rem; max-width: calc(100vw - 90px); }

  /* Hoofdmenu achter hamburger-knop */
  .site-head__bar { height: 84px; }
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 20px 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
  }
  .nav.is-open { display: flex; }
  .nav a { font-size: 1.8rem; padding: 14px 12px; }
  .nav a.is-active::after { left: 12px; right: auto; width: 28px; bottom: 8px; }
  .nav .lang {
    margin-left: 0; margin-top: 10px; align-self: flex-start;
    padding: 9px 20px; font-size: 1.5rem;
  }
}
@media (max-width: 600px) {
  .team-grid { display: none; }
  .team-swiper {
    display: block; margin: 0; overflow: hidden;
  }
  .team-swiper-pagination {
    display: flex; justify-content: center; gap: 9px; margin-top: 14px;
  }
  .team-swiper-pagination .swiper-pagination-bullet {
    width: 10px; height: 10px; margin: 0; opacity: 1;
    background: color-mix(in srgb, var(--paper) 70%, transparent);
    border: 1.5px solid var(--moss-deep);
    transition: background .25s var(--ease), transform .25s var(--ease);
  }
  .team-swiper-pagination .swiper-pagination-bullet-active {
    background: var(--moss-deep); transform: scale(1.35);
  }
  .si--agenda { grid-template-columns: 80px 1fr; min-height: 110px; }
  .si--news { grid-template-columns: 90px 1fr; min-height: 110px; }
  .si-agenda__day { font-size: 3.6rem; }
  .si-agenda__month { font-size: 1.1rem; }
  .wrap { padding-inline: 20px; }
  .handboek-card { padding: 28px 24px; }
  .btn--outline-gold { font-size: 1.55rem; padding: 13px 22px; }
}

/* ==========================================================================
   INNER PAGES — pagina-header, prose, blog, team, publications, research
   ========================================================================== */

/* ---------- Pagina-header (donkere balk, alle inner pages) ---------- */
.page-head {
  background: var(--moss);
  padding: 52px 0 48px;
  border-bottom: 3px solid var(--moss);
  position: relative; overflow: hidden;
}
/* Verkavelings-/kadastermotief: perceellijnen in goud, rechts in het vlak.
   Mask houdt de titelzone links rustig. */
.page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23D8A73E' stroke-width='1.3' stroke-linecap='round'><path d='M0 34 L1440 10'/><path d='M0 92 L1440 74'/><path d='M0 150 L1440 144'/><path d='M0 208 L1440 216'/><path d='M0 258 L1440 278'/><path d='M980 0 L1120 260'/><path d='M330 0 L280 260'/><path d='M141 32 L138 90'/><path d='M470 26 L473 86'/><path d='M700 22 L697 83'/><path d='M1210 14 L1212 77'/><path d='M250 89 L252 149'/><path d='M590 85 L588 148'/><path d='M860 81 L862 146'/><path d='M1300 76 L1298 145'/><path d='M90 150 L88 209'/><path d='M400 148 L403 210'/><path d='M760 147 L758 212'/><path d='M1060 146 L1062 214'/><path d='M200 209 L202 260'/><path d='M530 211 L528 260'/><path d='M920 213 L922 260'/><path d='M1190 215 L1188 260'/></g></svg>") center / cover no-repeat;
  opacity: .14;
  -webkit-mask-image: linear-gradient(100deg, transparent 34%, #000 64%);
  mask-image: linear-gradient(100deg, transparent 34%, #000 64%);
}
.page-head > .wrap { position: relative; z-index: 1; }
.page-head__eyebrow {
  font-family: var(--sans); font-weight: 700; font-size: 1.25rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ochre); display: inline-flex; align-items: center; gap: .5em;
  margin-bottom: 14px;
}
.page-head__eyebrow a { color: var(--ochre); text-decoration: none; }
.page-head__eyebrow a:hover { text-decoration: underline; }
.page-head__eyebrow span { opacity: .5; }
.page-head__title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(3rem, 4vw, 4.8rem); color: var(--paper);
  line-height: 1.08; letter-spacing: -.02em; margin: 0;
}
.page-head__sub {
  font-family: var(--sans); font-size: 1.8rem; color: #A8C4B0;
  margin-top: 14px; max-width: 58ch; line-height: 1.5;
}

/* ---------- Prose — leesbare body tekst ---------- */
.prose {
  font-family: var(--serif); font-size: 1.8rem;
  line-height: 1.75; color: var(--ink-2);
  overflow-wrap: break-word;
}
.prose h2 { font-size: 2.6rem; margin: 3.6rem 0 1.2rem; color: var(--ink); }
.prose h3 { font-size: 2.1rem; margin: 2.8rem 0 1rem; color: var(--ink); }
/* Lange samenstellingen in koppen netjes afbreken i.p.v. laten overlopen */
.prose h1, .prose h2, .prose h3, .prose h4 { hyphens: auto; }

/* ---------- Afbeeldingsblokken in de prose ---------- */
.content-image { margin: 3rem 0; }
.content-image img { border-radius: var(--radius); width: 100%; display: block; }
.content-image figcaption {
  font-family: var(--sans); font-size: 1.4rem; color: var(--ink-3); margin-top: 8px;
}

/* Links/rechts: de tekst loopt eromheen.
   Let op: een zwevend element krimpt naar zijn inhoud, dus hier hoort een
   echte width -- met alleen max-width valt het terug op een paar honderd pixels. */
.content-image--left,
.content-image--right { width: 38%; margin-block: .8rem 1.6rem; }
.content-image--left  { float: left;  margin-right: 2.6rem; }
.content-image--right { float: right; margin-left: 2.6rem; }

/* De prose moet de floats omsluiten, anders lopen ze door in de volgende sectie */
.prose::after { content: ""; display: block; clear: both; }

@media (max-width: 640px) {
  /* Te smal om omheen te lopen; dan liever op volle breedte */
  .content-image--left,
  .content-image--right {
    float: none; width: 100%;
    margin: 2.4rem 0;
  }
}
.prose p { margin: 1.6rem 0; }
.prose a { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose ul, .prose ol { padding-left: 2.2rem; margin: 1.6rem 0; }
.prose li { margin-bottom: .6rem; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose em { font-style: italic; }
.prose blockquote {
  border-left: 3px solid var(--ochre-deep);
  margin: 2.4rem 0; padding: 1.2rem 2rem;
  background: var(--paper-2); border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic; color: var(--ink);
}
/* .prose figure { margin: 0 3rem 0 0; } */
.prose figcaption { font-family: var(--sans); font-size: 1.4rem; color: var(--ink-3); margin-top: 8px; }

/* Page wrapper */
.page-body { background: var(--paper); padding: 64px 0 96px; }
.page-inner { max-width: 860px; margin: 0 auto; padding: 0 32px; }
.page-inner--wide { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.page-2col { display: grid; grid-template-columns: 1fr 320px; gap: 64px; align-items: start; }
.page-2col > * { min-width: 0; }

/* Broodkruimel + sectie-link */
.back-link {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--sans); font-size: 1.4rem; font-weight: 700;
  color: var(--moss); text-decoration: none; margin-bottom: 32px;
}
.back-link svg { width: .9em; height: .9em; transition: transform .2s var(--ease); }
.back-link:hover svg { transform: translateX(-4px); }

/* ---------- Blog list (3 kolommen) ---------- */
.blog-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 28px; margin-top: 40px;
}
.bcard {
  background: var(--paper); 
  border-radius: var(--radius); box-shadow: var(--sh-sm);
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bcard:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.bcard__img { height: 200px; overflow: hidden; background: var(--paper-3); }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.bcard__meta { font-family: var(--sans); font-size: 1.3rem; color: var(--ink-3); }
.bcard__title { font-family: var(--serif); font-weight: 700; font-size: 2.1rem; color: var(--ink); line-height: 1.18; }
.bcard__excerpt { font-family: var(--sans); font-size: 1.55rem; color: var(--ink-2); line-height: 1.45; }
.bcard__more {
  margin-top: auto; padding-top: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 1.4rem;
  color: var(--moss); display: inline-flex; align-items: center; gap: .4em;
}
.bcard__more svg { width: .85em; height: .85em; transition: transform .2s var(--ease); }
.bcard:hover .bcard__more svg { transform: translateX(4px); }

/* ---------- Blog detail ---------- */
.entry-hero-wrap { margin-top: 40px; }
.entry-hero-img-wrap { position: relative; }
.entry-hero-img {
  width: 100%; max-height: 480px; object-fit: cover;
  display: block; border-radius: 12px;
}
.entry-hero-credit {
  font-family: var(--sans); font-size: 1.4rem; color: var(--ink-3);
  margin: 10px 0 0; text-align: right;
}
.entry-title {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.8rem, 4vw, 4.2rem); color: var(--ink);
  line-height: 1.1; letter-spacing: -.02em; margin: 0 0 8px;
}
.blog-byline {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.blog-byline__authors { display: flex; gap: 12px; flex-wrap: wrap; }
.blog-author-pill {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
}
.blog-author-pill img {
  width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--ochre);
}
.blog-author-pill span { font-family: var(--sans); font-weight: 700; font-size: 1.75rem; color: var(--ink); }
.blog-byline__meta { font-family: var(--sans); font-size: 1.6rem; color: var(--ink-3); margin-left: auto; }
.blog-intro {
  font-family: var(--serif); font-size: 2.2rem; color: var(--ink);
  line-height: 1.5; margin-bottom: 3.2rem; font-style: italic;
}

/* Share */
.share-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 24px 0; border-top: 1px solid var(--line); margin-top: 48px;
}
.share-row span { font-family: var(--sans); font-weight: 700; font-size: 1.4rem; color: var(--ink-3); }
.share-btn {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--sans); font-size: 1.4rem; font-weight: 700;
  padding: 8px 16px; border-radius: 100vh; border: 1.5px solid var(--line-2);
  color: var(--ink-2); text-decoration: none; transition: background .2s, border-color .2s;
}
.share-btn:hover { background: var(--paper-2); border-color: var(--line); }
.share-row .share-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }

/* ---------- Auth forms (login/register/setpassword) ---------- */
.auth-form { display: flex; flex-direction: column; gap: 20px; max-width: 420px; }
.auth-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--sans); font-weight: 700; font-size: 1.4rem; color: var(--ink-2);
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  font-family: var(--sans); font-weight: 400; font-size: 1.6rem;
  padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); outline: none; transition: border-color .2s;
}
.auth-form input:focus { border-color: var(--moss); }
.auth-form-checkbox { flex-direction: row !important; align-items: center; gap: 8px !important; }
.auth-form-checkbox input { width: auto; }
.auth-form-error { font-family: var(--sans); font-size: 1.4rem; color: var(--brick); }
.auth-form-links { font-family: var(--sans); font-size: 1.5rem; color: var(--ink-3); margin-top: 20px; }
.auth-form-links a { color: var(--moss); font-weight: 700; }
.cc-guest-notice {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-family: var(--sans); font-size: 1.5rem; color: var(--ink-2);
  padding: 20px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.cc-guest-notice p { margin: 0; }
.cc-guest-notice__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cc-w .cc-guest-notice a.share-btn { color: var(--ink-2); text-decoration: none; }
.cc-w .cc-guest-notice a.share-btn:hover { color: var(--ink); }

/* ---------- Reactieformulier (Comments-plugin) ---------- */
.cc-w .cc-i-image { border-radius: 12px; background: var(--paper-2); }
.cc-w .cc-i-image-icon { background: var(--paper-2); }
.cc-w .cc-i-image-icon::after {
  background-color: var(--paper-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%234F6E5D' d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z'%3E%3C/path%3E%3C/svg%3E");
}
.cc-w .cc-i-avatar-initials {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; background: var(--moss);
  font-family: var(--serif); font-weight: 700; font-size: 1.8rem; color: var(--paper);
}
.cc-w .cc-f-wrap .cc-f-textarea,
.cc-w .cc-f-wrap .cc-f-input {
  font-family: var(--sans); font-size: 1.6rem; color: var(--ink);
  border: 1.5px solid var(--line-2); border-radius: var(--radius);
  padding: 14px 16px; background: var(--paper); box-shadow: none; transition: border-color .2s;
}
.cc-w .cc-f-wrap .cc-f-textarea:focus,
.cc-w .cc-f-wrap .cc-f-input:focus { border-color: var(--moss); }
.cc-w .cc-f-wrap .cc-f-btn {
  font-family: var(--sans); font-weight: 700; font-size: 1.5rem; text-transform: none;
  padding: 12px 26px; border: none; border-radius: 100vh;
  background: var(--moss); color: var(--paper); transition: background .2s, transform .2s;
}
.cc-w .cc-f-wrap .cc-f-btn:hover { background: var(--ink); transform: translateY(-2px); border-color: transparent; }

/* Sectiekop */
.cc-w .related-section__head { margin-bottom: 24px; }

/* Reactie-kaartjes */
.cc-w .cc-w-i > .cc-i {
  margin-top: 0; margin-bottom: 16px; padding: 24px 28px;
  background: var(--paper-2); border-top: none; border-radius: var(--radius);
}
.cc-w.cc-w .cc-w-i > .cc-i:first-child { margin-top: 0; padding-top: 24px; }
.cc-w .cc-i .cc-i {
  margin-left: 24px; margin-top: 14px; margin-bottom: 0; padding: 20px 24px;
  background: var(--paper); border: 1px solid var(--line);
}
.cc-w .cc-i-author { font-family: var(--sans); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
.cc-w .cc-i-header { margin-bottom: 10px; }
.cc-w .cc-i-body { padding: 0 0 14px; }
.cc-w .cc-i-comment p { font-family: var(--sans); font-size: 1.6rem; color: var(--ink-2); line-height: 1.5; }
.cc-w .cc-i-footer { margin-top: 2px; }
.cc-w .cc-i a, .cc-w .cc-i .cc-a { color: var(--ink-3); }
.cc-w .cc-i a:hover, .cc-w .cc-i .cc-a:hover { color: var(--moss); }
.cc-w .cc-i-reply { color: var(--ink-3); font-weight: 700; }

/* ---------- Team overview ---------- */
.team-group { margin-bottom: 56px; }
.team-group__heading {
  font-family: var(--sans); font-weight: 700; font-size: 1.3rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--moss);
  display: inline-flex; align-items: center; gap: .6em;
  margin-bottom: 28px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line); width: 100%;
}
.team-group__heading::before { content: ""; width: 26px; height: 2px; background: var(--ochre-deep); display: inline-block; }

.team-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.team-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-sm); overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }

.team-card__photo-wrap {
  width: 100%; aspect-ratio: 3/4; overflow: hidden; position: relative; background: var(--paper-3);
}
.team-card__photo {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
  display: block; border-radius: 0; margin: 0; border: none;
}
.team-card:hover .team-card__photo { transform: scale(1.04); }
.team-card__photo-wrap::after {
  content: 'Bekijk profiel →';
  position: absolute; inset: 0;
  background: rgba(26,46,36,.68);
  color: var(--paper); display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 1.3rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; transition: opacity .25s var(--ease);
}
.team-card:hover .team-card__photo-wrap::after { opacity: 1; }

.team-card__photo-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 4rem; color: var(--paper);
}

.team-card__body {
  padding: 18px 22px 22px; border-top: 2px solid var(--ochre);
  display: flex; flex-direction: column; flex: 1;
}
.team-card__name {
  font-family: var(--serif); font-weight: 700; font-size: 1.9rem;
  color: var(--ink); line-height: 1.2; display: block;
}
.team-card__role {
  font-family: var(--sans); font-size: 1.35rem; color: var(--ink-3);
  margin-top: 6px; line-height: 1.3; display: block;
}

/* ---------- Team member detail ---------- */
.member-head {
  display: grid; grid-template-columns: 260px 1fr; gap: 52px;
  align-items: start; margin-bottom: 48px;
}
.member-photo {
  width: 100%; border-radius: var(--radius-lg); object-fit: cover;
  aspect-ratio: 1; box-shadow: var(--sh-lg);
}
.member-photo-placeholder {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 6rem; color: var(--paper);
  background: var(--moss);
}
.member-info__name { font-size: clamp(2.6rem, 3.5vw, 4rem); margin-bottom: 8px; }
.member-info__role { font-family: var(--sans); font-size: 1.8rem; color: var(--ink-3); margin-bottom: 20px; }
.member-info__links { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.member-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 1.5rem; color: var(--moss);
  text-decoration: none; font-weight: 700;
}
.member-link:hover { text-decoration: underline; }
.member-link svg { width: 16px; height: 16px; }
/* Bio stond eerder in een 2-koloms grid; houdt de regellengte leesbaar */
.member-bio { max-width: 860px; }

/* Lege-staat kaart voor sidebars (subprojecten e.d.) */
.aside-empty {
  border: 1.5px dashed var(--line-2); border-radius: var(--radius);
  padding: 22px 24px;
  font-family: var(--sans); font-size: 1.5rem; color: var(--ink-3); line-height: 1.5;
}

/* ---------- Publications ---------- */
.pub-list { display: flex; flex-direction: column; gap: 0; }
.pub-item {
  padding: 20px 0; border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 1.6rem; color: var(--ink-2); line-height: 1.5;
}
.pub-item:first-child { padding-top: 0; }
.pub-item a { color: var(--ink-2); text-decoration: none; display: block; }
.pub-item a:hover { color: var(--moss); }
.pub-item strong { color: var(--ink); font-weight: 700; }
.pub-item__meta { display: block; font-size: 1.4rem; color: var(--ink-3); margin-bottom: 3px; }
.pub-filter { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.pub-filter h3 {
  font-family: var(--sans); font-weight: 700; font-size: 1.25rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--moss);
  margin: 24px 0 10px; padding-top: 20px; border-top: 1px dotted var(--line-2);
}
.pub-filter h3:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.pub-filter label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 1.5rem; color: var(--ink-2);
  padding: 6px 0; cursor: pointer; border-radius: 6px;
}
.pub-filter label:hover { color: var(--moss); }
.pub-filter input[type="checkbox"] { accent-color: var(--moss); width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer; }
.search-bar {
  display: flex; gap: 0; margin-bottom: 28px;
}
.search-bar input {
  flex: 1; font-family: var(--sans); font-size: 1.6rem;
  padding: 12px 16px; border: 1.5px solid var(--line-2); border-right: none;
  border-radius: var(--radius) 0 0 var(--radius); background: var(--paper);
  color: var(--ink); outline: none;
}
.search-bar input:focus { border-color: var(--moss); }
.search-bar button {
  font-family: var(--sans); font-weight: 700; font-size: 1.5rem;
  padding: 12px 20px; background: var(--moss); color: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer;
  transition: background .2s;
}
.search-bar button:hover { background: var(--ink); }

/* ---------- Related sections ---------- */
.related-section { padding: 64px 0; background: var(--paper-2); }
.related-section + .related-section { background: var(--paper); border-top: 1px solid var(--line); }
.related-section__head {
  font-family: var(--sans); font-weight: 700; font-size: 1.3rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--moss);
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 28px;
}
/* .related-section__head::before { content: ""; width: 26px; height: 2px; background: var(--ochre-deep); display: inline-block; } */
.related-section.related-section--accent { background: var(--moss-soft); border-top: none; }
.related-section--accent .related-section__head { color: #fff; }
.related-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-pub-list { display: flex; flex-direction: column; gap: 0; max-width: 760px; }

/* ---------- Projectenlijst (research) ---------- */
.project-list { display: flex; flex-direction: column; gap: 12px; }
.project-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 20px;
  text-decoration: none; color: inherit; box-shadow: var(--sh-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.project-item:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.project-item__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--paper-2); flex: 0 0 auto; overflow: hidden; }
.project-item__icon img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.project-item__name { font-family: var(--serif); font-weight: 700; font-size: 1.8rem; color: var(--ink); }
.project-item__duration { font-family: var(--sans); font-size: 1.35rem; color: var(--ink-3); margin-top: 2px; }
.project-item__arrow { margin-left: auto; color: var(--moss); width: 32px; height: 32px; flex: 0 0 auto; }

/* Facts tabel (research detail) */
.facts-table { width: 100%; border-collapse: collapse; margin: 3.2rem 0; font-family: var(--sans); font-size: 1.55rem; }
.facts-table td { padding: 12px 0; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.facts-table td:first-child { font-weight: 700; color: var(--ink-3); width: 28%; padding-right: 20px; }
.facts-table a { color: var(--moss); text-decoration: none; }
.facts-table a:hover { text-decoration: underline; }

/* ---------- Type-tabs (Nieuws & Agenda-filter) ---------- */
.type-tabs { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.type-tabs a {
  font-family: var(--sans); font-size: 1.4rem; font-weight: 700;
  padding: 9px 20px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-3); text-decoration: none; transition: border-color .2s, color .2s, background .2s;
}
.type-tabs a:hover { border-color: var(--moss); color: var(--ink); }
.type-tabs a.is-active { background: var(--moss); border-color: var(--moss); color: var(--paper); }

/* ---------- Paginering ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 48px 0 0; flex-wrap: wrap; }
.pagination__item { list-style: none; }
.pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  font-family: var(--sans); font-size: 1.5rem; color: var(--ink-2);
  text-decoration: none; transition: background .2s, color .2s;
}
.pagination__link:hover { background: var(--paper-2); }
.pagination__item--current { background: var(--moss); color: var(--paper); border-radius: 8px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 1.5rem; font-weight: 700; }
.pagination__link--prev::before { content: "←"; }
.pagination__link--next::after { content: "→"; }

/* ---------- Carousel (Swiper) ---------- */
.carousel { margin: 3.2rem 0; --swiper-navigation-color: #fff; }
.carousel .swiper { margin: 0; }
.swiper { margin: 3.2rem 0; border-radius: var(--radius); overflow: hidden; }

/* Bolletjes onder de foto. Ze staan buiten .swiper, dus de absolute
   positionering van Swiper zelf moet hier uitgezet worden. */
.carousel .swiper-pagination {
  position: static;
  display: flex; justify-content: center; gap: 9px;
  margin-top: 14px;
}
.carousel .swiper-pagination-bullet {
  width: 10px; height: 10px; margin: 0; opacity: 1;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  border: 1.5px solid var(--moss-deep);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.carousel .swiper-pagination-bullet-active {
  background: var(--moss-deep); transform: scale(1.35);
}
.mySwiper2 .swiper-slide { position: relative; aspect-ratio: 16 / 9; }
.mySwiper2 .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mySwiper2 .swiper-slide .swiper-caption {
     position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 24px 16px;
    background: #0000009c;
    font-family: var(--sans);
    font-size: 1.6rem;
    color: #fff;
}

/* ---------- Responsive inner pages ---------- */
@media (max-width: 920px) {
  .blog-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .team-cards { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .page-2col { grid-template-columns: 1fr; }
  .member-head { grid-template-columns: 160px 1fr; gap: 28px; }
  .related-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .blog-grid-3, .related-blog-grid { grid-template-columns: 1fr; }
  .team-cards { grid-template-columns: repeat(2, 1fr); }
  .member-head { grid-template-columns: 1fr; }
  .member-photo, .member-photo-placeholder { max-width: 200px; }
  .page-inner, .page-inner--wide { padding: 0 20px; }
}