:root {
  --papier: #f8f4e9;
  --papier-diep: #efe9db;
  --zee: #d9e6ec;
  --zee-sectie: #dde9ee;
  --ink: #0c1112;
  --ink-zacht: #2a3a41;
  --data: #3e6377;
  --signal: #ffd633;
  --night: #0a0f14;
  --papier-warm: #f5efdc;
  --lijn: #817d72;
  --quiet: #55544c;
  --display: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --body: "Newsreader", Georgia, serif;
  --mono: "Azeret Mono", ui-monospace, monospace;
  --kader: 1480px;
  --rand: max(3vw, calc((100% - var(--kader)) / 2));
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; background: var(--papier); }
body {
  margin: 0; max-width: 100%; overflow-x: clip;
  background: var(--papier);
  color: var(--ink); font-family: var(--body); font-size: 18px;
}
body, button, input, textarea { -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
::selection { background: var(--signal); color: var(--night); }
:focus-visible { outline: 2px solid #1f4c56; outline-offset: 5px; }
footer :focus-visible { outline-color: var(--signal); }
.px-arrow { width: .8em; height: .8em; flex: none; display: inline-block; vertical-align: -.06em; fill: currentColor; }

.skip-link {
  position: fixed; z-index: 500; left: 14px; top: 14px; transform: translateY(-180%);
  padding: 11px 14px; background: var(--ink); color: var(--papier);
  font: 600 12px/1 var(--mono); text-decoration: none;
}
.skip-link:focus { transform: none; }

.masthead {
  position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 64px; padding: 0 var(--rand); border-bottom: 1px solid var(--ink); background: rgba(248, 244, 233, .94);
}
.masthead a { text-decoration: none; }
.wordmark { display: flex; align-items: center; gap: 9px; font: 400 29px/1 "Micro 5", var(--mono); color: var(--ink); }
.wordmark .ai, .hero-copy h1 .ai, .footer-mark .ai { background: var(--signal); color: #131208; line-height: .58; padding: .17em .13em .1em; }
.nav-links { display: flex; gap: clamp(20px, 2.6vw, 44px); }
.wordmark { padding: 8px 0; }
.wordmark canvas.brand-mark { width: 26px; height: 26px; }
.menu-knop { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); }
.px-menu { width: 22px; height: 22px; fill: currentColor; }
.menu-knop .px-menu-dicht { display: none; }
.menu-knop[aria-expanded="true"] .px-menu-open { display: none; }
.menu-knop[aria-expanded="true"] .px-menu-dicht { display: block; }
.mobiel-menu {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column;
  padding: 92px 22px 30px; background: var(--papier);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
}
.mobiel-menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease; }
.mobiel-menu a { opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
.mobiel-menu[data-open="true"] a { opacity: 1; transform: none; }
.mobiel-menu[data-open="true"] a:nth-child(1) { transition-delay: .06s; }
.mobiel-menu[data-open="true"] a:nth-child(2) { transition-delay: .11s; }
.mobiel-menu[data-open="true"] a:nth-child(3) { transition-delay: .16s; }
.mobiel-menu[data-open="true"] a:nth-child(4) { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .mobiel-menu, .mobiel-menu a { transition: none; transform: none; }
}
.mobiel-menu a { padding: 20px 0; font: 700 clamp(32px, 9vw, 42px)/1 var(--display); letter-spacing: -.02em; text-decoration: none; border-bottom: 1px solid var(--lijn); }
.mobiel-menu a:last-of-type { border-bottom: 0; }
.mobiel-menu .mobiel-menu-actie {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  padding: 18px 20px; background: var(--signal); color: #131208; border-bottom: 0;
  font-size: clamp(24px, 6.5vw, 30px);
}
.nav-links a, .nav-action {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 13px/1 var(--display); letter-spacing: .09em; text-transform: uppercase;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--data); }
.nav-action { justify-self: end; padding: 0 12px; box-shadow: inset 0 -3px 0 var(--signal); }
.nav-action:hover, .nav-action:focus-visible { background: var(--signal); box-shadow: none; }

/* De kaart staat midden in het beeld, niet tegen de linkerrand. Het water loopt
   er dan aan alle vier de kanten omheen door, zoals op de holdingpagina, en dat
   is precies waar de animatie voor gemaakt is. */
.hero {
  position: relative; overflow: clip; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: center; min-height: min(calc(100svh - 88px), 1080px);
  padding: 5vh var(--rand) 6vh; background: #dce9ef;
}
.hero-kaartvlak { position: absolute; inset: 0; }
.hero-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-copy {
  position: relative; z-index: 3; grid-column: 1; grid-row: 1; justify-self: center;
  width: min(100%, 620px); padding: clamp(28px, 3vw, 52px);
  background: var(--papier); border: 1px solid var(--ink);
  animation: kaart-entree .7s cubic-bezier(.2, .7, .2, 1) .12s backwards;
}
@keyframes kaart-entree {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy { animation: none; }
}
.hero-copy h1 { display: flex; align-items: center; gap: .28em; margin: 0; font: 400 clamp(56px, 7.3vw, 122px)/.9 "Micro 5", var(--mono); color: var(--ink); }
.hero-lead { max-width: 24ch; margin: 36px 0 0; font-size: clamp(23px, 2vw, 34px); font-weight: 500; line-height: 1.16; }
.hero-detail { max-width: 44ch; margin: 16px 0 0; color: var(--ink-zacht); font-size: clamp(18px, 1.3vw, 21px); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }
.hero-action {
  display: inline-flex; align-items: center; gap: 14px; padding: 17px 24px;
  background: var(--signal); color: #131208; text-decoration: none;
  font: 600 clamp(19px, 1.6vw, 24px)/1 var(--display); letter-spacing: -.01em;
}
.hero-action:hover, .hero-action:focus-visible { background: var(--ink); color: var(--signal); }
.hero-action-secundair { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.hero-action-secundair:hover, .hero-action-secundair:focus-visible { background: var(--ink); color: var(--papier); }

.community, .roster { padding: clamp(60px, 8vw, 112px) var(--rand) clamp(48px, 6vw, 88px); }
.community h2, .roster h2, .question h2 { margin: 0; font-family: var(--display); font-weight: 700; line-height: .94; letter-spacing: -.02em; text-wrap: balance; }
.community h2 { font-size: clamp(56px, 7vw, 118px); }
.community-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; margin: 4vw 0 0; }
.community-cols p { max-width: 44ch; margin: 0; font-size: clamp(18px, 1.3vw, 21px); line-height: 1.5; }
.community-lead { font-size: clamp(20px, 1.55vw, 26px); font-weight: 500; line-height: 1.4; }
.exchange { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; margin: 5vw 0 0; }
.exchange h3 { margin: 0 0 18px; font: 600 14px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--data); }
.exchange ul { margin: 0; padding: 0; list-style: none; }
.exchange li { position: relative; max-width: 44ch; padding: 9px 0 9px 36px; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.45; }
.ex-icon { position: absolute; left: 0; top: .62em; width: 21px; height: 21px; fill: var(--ink); }
.practice-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 34px; align-items: center;
  margin-top: 5vw; padding: 15px 0 16px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.practice-woord { font: 600 13px/1.4 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--data); }
.practice-marquee { overflow: hidden; }
.practice-track {
  display: flex; width: max-content; will-change: transform;
  touch-action: pan-y; cursor: grab; user-select: none;
}
.practice-track:active { cursor: grabbing; }
.practice-items {
  flex: none; margin: 0; white-space: nowrap; font: 600 13px/1.5 var(--display);
  letter-spacing: .06em; text-transform: uppercase; color: var(--quiet);
}
.amb-sep { display: inline-block; margin: 0 clamp(18px, 2.2vw, 34px); color: var(--lijn); }

.roster { border-top: 1px solid var(--ink); background: var(--papier-diep); }
.roster .roster-media { background: var(--papier); }
.roster h2 { font-size: clamp(56px, 7vw, 118px); }
.roster-head p { max-width: 56ch; margin: 26px 0 0; color: var(--ink-zacht); font-size: clamp(17px, 1.25vw, 20px); line-height: 1.5; }
.roster-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 5vw;
  margin: 4.5vw 0 0; padding: 0; list-style: none; counter-reset: lid;
}
.roster-list { row-gap: 0; }
.roster-list li {
  position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto;
  column-gap: 30px; align-items: baseline; padding: 37px 0 40px;
}
.roster-list li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(12, 17, 18, .58) 0 5px, transparent 5px 11px);
}
.roster-media {
  position: relative; grid-row: 1 / span 4; align-self: start; display: block;
  width: 220px; aspect-ratio: 1; overflow: hidden; background: var(--papier); border: 1px solid var(--ink);
}
.roster-media img {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) sepia(.13) contrast(1.05);
}
.roster-init {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--data); font: 600 26px/1 var(--display); letter-spacing: .02em;
}
.roster-name { grid-column: 2; margin: 0; font: 600 clamp(25px, 2.1vw, 34px)/1.02 var(--display); letter-spacing: -.015em; }
.roster-work { grid-column: 2 / -1; grid-row: 2; margin-top: 9px; color: var(--quiet); font-size: 17px; line-height: 1.5; }
.roster-summary { grid-column: 2 / -1; grid-row: 3; margin-top: 13px; max-width: 50ch; color: var(--ink-zacht); font-size: 16px; line-height: 1.55; }
.roster-links { grid-column: 2 / -1; grid-row: 4; justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 14px; }
.roster-link {
  font: 500 12px/1 var(--mono); letter-spacing: .03em;
  text-decoration: none; border-bottom: 1px solid var(--lijn); padding-bottom: 3px; color: var(--data);
}
.roster-link:hover, .roster-link:focus-visible { border-bottom-color: var(--ink); color: var(--ink); }
.roster-li { display: block; color: var(--ink-zacht); }
.roster-li:hover, .roster-li:focus-visible { color: var(--ink); }
.li-icon { width: 16px; height: 16px; display: block; fill: currentColor; }

.facilitators {
  position: relative; display: grid; grid-template-columns: auto 1fr 1fr; gap: 4vw; align-items: center;
  margin-top: 4.5vw; padding: 28px 0 24px;
}
.facilitators::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(12, 17, 18, .58) 0 5px, transparent 5px 11px);
}
.facilitators-kop { display: grid; gap: 12px; }
.facilitators-label { margin: 0; font: 600 12px/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--data); }
.facilitators-logo { display: block; width: clamp(130px, 11vw, 170px); }
.facilitators-logo img { display: block; width: 100%; height: auto; }
.facilitator { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center; }
.facilitator .roster-media { grid-row: 1 / span 2; width: 84px; aspect-ratio: 1; align-self: center; }
.facilitator .roster-li { grid-column: 2; justify-self: start; margin-top: 8px; }
.facilitator .roster-init { font-size: 22px; }
.facilitator-naam { margin: 0; font: 600 19px/1.15 var(--display); }

/* Geen scheidingslijn boven dit blok, net als bij de hero: een harde streep dwars
   over een bewegend rasterveld leest als een fout in de animatie in plaats van als
   een sectiegrens. De kleurwissel van papier naar zeeblauw scheidt al genoeg. */
.question { position: relative; padding: clamp(72px, 9.5vw, 140px) var(--rand) clamp(80px, 10.5vw, 152px); background: var(--zee-sectie); }
.question-veld { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Eiland: de kaart blijft bewust smal en laag, zodat het water er aan alle
   kanten omheen loopt en de branding tegen de rand zichtbaar blijft. */
.question-card {
  /* z-index moet hoger dan het ditherveld: de engine zet zijn canvas op 1 en het
     videobron-element op 0, en zonder eigen stapelwaarde zakt de kaart eronder. */
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(250px, .82fr) minmax(320px, 1.18fr); gap: 3.4vw;
  max-width: 860px; margin: 0 auto; padding: clamp(26px, 3vw, 46px);
  background: var(--papier); border: 1px solid var(--ink);
}
.question h2 { max-width: 12ch; font-size: clamp(34px, 3vw, 50px); }
.question-intro > p { max-width: 34ch; margin: 20px 0 0; color: var(--ink-zacht); font-size: clamp(16px, 1.05vw, 18px); line-height: 1.5; }
.question-contact { margin-top: 24px; }
.question-contact-label { display: block; margin-bottom: 10px; font: 600 12px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--data); }
.question-contact a {
  display: block; width: fit-content; margin-top: 8px; color: var(--ink);
  font: 500 15px/1.5 var(--mono); letter-spacing: .02em;
  text-decoration: none; border-bottom: 1px solid var(--lijn); padding-bottom: 2px;
}
.question-contact a:hover, .question-contact a:focus-visible { border-bottom-color: var(--ink); }

.intake-form { display: grid; grid-template-columns: minmax(0, 1fr); align-self: start; }
.field { position: relative; padding: 0 0 18px; }
.field label { display: block; padding: 0 0 7px; font: 600 13px/1.3 var(--display); letter-spacing: .04em; }
.field input, .field textarea, .field select {
  display: block; width: 100%; border: 1px solid #7a909a; border-radius: 0;
  background: rgba(255, 255, 255, .6); color: var(--ink); padding: 11px 14px;
  font: 400 clamp(16px, 1.1vw, 18px)/1.35 var(--body); cursor: text;
}
.field :is(input, textarea, select):focus-visible { outline: 2px solid #1f4c56; outline-offset: 2px; }
.field select { cursor: pointer; }
.field input { min-height: 48px; }
.field select { min-height: 48px; }
/* Hoogte staat hier en niet op het rows-attribuut, zodat de kaart laag blijft
   zonder de markup aan te raken. */
.field textarea { height: 112px; min-height: 108px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #756f63; opacity: 1; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--data); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); background: #fff; }
.field [aria-invalid="true"] { border-color: #9a2f1b; }
.field-hint { display: block; margin-top: 8px; color: var(--quiet); font: 400 11px/1.4 var(--mono); }
.honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.honey * { width: 1px; max-width: 1px; }
.submit-action {
  display: inline-flex; align-items: center; gap: 14px; justify-self: start; margin-top: 4px; padding: 14px 24px;
  border: 0; border-radius: 0; background: var(--signal); color: #131208;
  font: 600 clamp(18px, 1.4vw, 21px)/1 var(--display); letter-spacing: -.015em;
}
.submit-action:hover, .submit-action:focus-visible { background: var(--ink); color: var(--signal); }
.submit-action:focus-visible { outline: 2px solid #1f4c56; outline-offset: 3px; }
.submit-action[disabled] { cursor: wait; opacity: .58; }
.form-privacy { margin: 14px 0 0; color: var(--quiet); font: 400 12px/1.5 var(--mono); }
.form-privacy a { color: inherit; text-underline-offset: 3px; }
.form-status { min-height: 1.6em; margin: 10px 0 0; color: var(--quiet); font: 400 12px/1.5 var(--mono); }
.form-status[data-state="success"] { color: #1f4c56; }
.form-status[data-state="error"] { color: #9a2f1b; }

footer { display: grid; gap: 30px; padding: 52px var(--rand) 32px; background: var(--night); color: var(--papier-warm); }
.footer-rij { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 34px; }
.footer-mark { display: flex; align-items: center; gap: .3em; font: 400 clamp(30px, 3.2vw, 44px)/.9 "Micro 5", var(--mono); text-decoration: none; color: var(--papier-warm); }
.footer-mark canvas.brand-mark { width: .85em; height: .85em; flex: none; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; font: 500 13px/1.4 var(--mono); letter-spacing: .04em; }
.footer-nav a { text-decoration: none; border-bottom: 1px solid rgba(245, 239, 220, .35); padding-bottom: 2px; }
.footer-nav a:hover, .footer-nav a:focus-visible { border-bottom-color: var(--signal); }
.footer-meta { margin: 0; color: #a5c0d2; font: 500 12px/1.7 var(--mono); letter-spacing: .025em; }
.footer-meta a { color: var(--papier-warm); }

@media (max-width: 1020px), (max-width: 1240px) and (orientation: portrait) {
  .masthead { grid-template-columns: 1fr auto auto; column-gap: 20px; }
  .nav-links { display: none; }
  .menu-knop { display: inline-flex; justify-self: end; }
  /* Geen gestapelde variant meer: het kaartvlak blijft het decor, de kaart met
     de tekst blijft eroverheen liggen. De kolombreedte komt uit de clamp op
     .hero, dus hier krimpen alleen de marges mee. */
  .hero { padding: 5vh 3vw 6vh; }
  .hero-copy { padding: clamp(22px, 3vw, 40px); }
    .community-cols { margin: 5vw 0 0; }
  .roster-list { grid-template-columns: 1fr; }
  /* Zodra de kaart in één kolom valt heeft hij die breedte niet meer nodig, en
     dan blijft er ook echt water naast staan in plaats van een randje. */
  .question { padding-inline: clamp(32px, 10vw, 140px); }
  .question-card { grid-template-columns: 1fr; max-width: 620px; }
}

@media (max-width: 700px) {
  /* Eén marge voor alle beige vlakken die op een animatie liggen, zodat het
     ditherveld er aan beide kanten omheen doorloopt in plaats van eronder te
     verdwijnen. */
  :root { --mobiel-rand: 26px; }
  body { font-size: 16px; }
  .masthead { grid-template-columns: 1fr auto; grid-template-rows: auto; min-height: 56px; padding: 0 18px; }
  .masthead .nav-action, .masthead .nav-links { display: none; }
  .menu-knop { display: inline-flex; justify-self: end; }
  .wordmark { font-size: 21px; gap: 8px; }
  .wordmark canvas.brand-mark { width: 20px; height: 20px; }
  /* Telefoon-choreografie: het vlak pint schermvullend onder de header; de kaart
     scrolt omhoog het beeld uit, de animatie blijft even vol in beeld staan en
     daarna scrolt de pagina door naar de volgende sectie. */
  /* Hoogte bepaalt de timing. Het kaartje is halverwege het vlak weg, dus factor
     1.8 liet het vlak al na 79px los: de volgende sectie kwam op hetzelfde moment
     dat het kaartje verdween. 2.3 was de correctie daarop maar sloeg door, dan
     scrol je 473px in het niets. 2.0 houdt de animatie nog ongeveer 235px vol in
     beeld, genoeg voor een adempauze, kort genoeg om niet als vastzitten te
     voelen. */
  /* Een grid in plaats van een blok met vaste hoogte. De eerste rij is normaal
     precies één scherm, maar mag groeien als de kaart er niet in past: bij 200%
     tekstvergroting viel de kop anders buiten beeld, en overflow clip sneed hem
     af zonder scroll om erbij te komen. */
  .hero {
    padding: 0; height: auto; min-height: calc((100lvh - 56px) * 2);
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(calc(100lvh - 56px), auto) 1fr;
    align-content: start;
  }
  /* Dekkend, anders spookt het kaartje door de header heen terwijl het eronder
     schuift. Zelfde kleur als de desktopheader, alleen zonder de 6% doorkijk. */
  .masthead { background: #f8f4e9; }
  .hero-kaartvlak {
    position: sticky; inset: auto; top: 56px; margin: 0; aspect-ratio: auto;
    height: calc(100lvh - 56px); grid-column: 1; grid-row: 1 / -1;
  }
  .hero-copy {
    position: relative; z-index: 3; grid-column: 1; grid-row: 1;
    place-self: center; inset: auto; transform: none;
    width: min(calc(100% - var(--mobiel-rand) * 2), 560px);
    margin: 0; padding: 20px 18px 22px;
    animation-name: kaart-fade;
  }
  @keyframes kaart-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .hero-copy h1 { font-size: 38px; }
  .hero-lead { margin-top: 16px; font-size: 19px; }
  .hero-detail { margin-top: 10px; font-size: 15px; }
  .hero-actions { margin-top: 20px; gap: 10px; }
  .hero-action { width: 100%; justify-content: space-between; padding: 13px 16px; font-size: 19px; }
    .community, .roster { padding: 60px 18px 52px; }
  .community h2, .roster h2 { font-size: clamp(48px, 13vw, 60px); }
  .community-cols { display: block; margin: 38px 0 0; }
  .community-cols p { max-width: none; font-size: 17px; }
  .community-cols p + p, .community-cols div + div { margin-top: 18px; }
  .community-lead { font-size: 21px; }
  .exchange { grid-template-columns: 1fr; gap: 26px; margin: 38px 0 0; }
  .exchange li { max-width: none; font-size: 17px; padding-left: 32px; }
  .ex-icon { width: 19px; height: 19px; }
  .practice-line { grid-template-columns: 1fr; gap: 8px; margin-top: 52px; }
  .practice-items { font-size: 12px; line-height: 2; }
  .roster-head p { font-size: 17px; }
  .roster-list { margin-top: 40px; }
  .roster-name { font-size: 24px; }
  .roster-work { font-size: 16px; }
  /* Eén kolom: de foto boven de naam in plaats van ernaast. Naast de tekst gezet
     bleef er onder een foto van 112px een kolom van honderden pixels leeg staan,
     want de omschrijvingen zijn inmiddels veel langer dan de foto hoog is. */
  .roster-list li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; column-gap: 0; padding: 30px 0 32px; }
  /* Op de telefoon loopt het portret over de volle kolombreedte. Dat scheelt de
     lege strook rechts ernaast, en de foto's zijn vierkant dus de rij blijft rustig. */
  .roster-list .roster-media { width: 100%; grid-row: auto; grid-column: 1; margin-bottom: 18px; }
  .roster-list .roster-init { font-size: 20px; }
  /* In de HTML staan de links vóór de omschrijving, wat op desktop niet uitmaakt
     omdat daar vaste rijen gelden. In één kolom wel: zonder deze volgorde staan
     de links tussen de werkregel en de omschrijving in. */
  .roster-name, .roster-work, .roster-summary, .roster-links { grid-column: 1; grid-row: auto; }
  .roster-list .roster-media { order: 1; }
  .roster-name { order: 2; }
  .roster-work { order: 3; }
  .roster-summary { order: 4; }
  .roster-links { order: 5; }
  .roster-summary { font-size: 15px; }
  /* De facilitators houden hun compacte opzet: portret links, naam, rol en
     LinkedIn ernaast. De grote portretregel hierboven geldt alleen voor de
     ledenlijst, anders werd de foto zo hoog dat het icoon eronder uit viel. */
  .facilitators { grid-template-columns: 1fr; gap: 22px; margin-top: 48px; }
  .facilitator { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; }
  .facilitator .roster-media { width: 96px; }
  .question { padding: 56px calc(var(--mobiel-rand) + 6px) 72px; }
  .question-card { padding: 24px 18px 30px; }
  .question h2 { font-size: clamp(34px, 9.5vw, 44px); }
  .question-intro > p { margin-top: 20px; font-size: 16px; }
  .intake-form { grid-template-columns: 1fr; margin-top: 34px; }
  .field, .submit-action, .form-status, .form-privacy { grid-column: 1; }
  .field input, .field textarea, .field select { font-size: 18px; }
  .submit-action { width: 100%; justify-content: space-between; font-size: 22px; }
  footer { gap: 24px; padding: 46px 18px 30px; }
  .footer-rij { flex-direction: column; align-items: flex-start; }
  .footer-mark { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Tikdoelen. Het LinkedIn-icoon was 16 bij 16 pixels en daarmee op een telefoon
   niet te raken; de negatieve marge houdt de opmaak waar hij stond. */
.roster-li { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -14px 0 -14px -14px; }
.facilitator .roster-li { margin: -6px 0 -14px -14px; }
.roster-link { padding: 12px 0 3px; }
.footer-nav a { padding: 8px 0 3px; }

/* Een sticky kopbalk legt zich anders over de kop waar je net naartoe sprong. */
:target, #inhoud, section[id] { scroll-margin-top: 76px; }
@media (max-width: 700px) { :target, #inhoud, section[id] { scroll-margin-top: 66px; } }

/* Reduced motion hoort het laatste woord te hebben; de mobiele regels verderop
   zetten anders alsnog een animatienaam terug. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .practice-track { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   De losse pagina's: de ledenindex, de zeven ledenpagina's en de vragenpagina.
   Ze delen de kop, de voettekst en de typografie met de homepage, maar staan op
   een gewone tekstkolom in plaats van op de secties van de onepager.
   --------------------------------------------------------------------------- */

/* Geen var(--rand) hier. Die is bedoeld voor secties die de volle breedte
   pakken en vormt daar de buitenmarge; in een kolom van 760 pixels gaat hij van
   de inhoud af. Op een breed scherm rekent hij uit tot (viewport - 1480) / 2, en
   dan bleef er van de 760 niets over en brak elke regel na een woord. */
.artikel {
  width: min(760px, 100%); margin: 0 auto;
  padding: clamp(38px, 6vw, 78px) clamp(20px, 4vw, 34px) clamp(56px, 7vw, 96px);
}
.artikel h1 {
  margin: 0; font: 700 clamp(38px, 5.4vw, 68px)/1.02 var(--display); letter-spacing: -.025em; text-wrap: balance;
}
.artikel-h2, .vraag h2 {
  margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.015em; line-height: 1.1;
}
.artikel-h2 { margin-top: 46px; font-size: clamp(21px, 1.8vw, 26px); }

.kruimel {
  margin: 0 0 26px; color: var(--quiet); font: 500 12px/1.4 var(--mono); letter-spacing: .05em;
}
.kruimel a { color: var(--data); text-decoration: none; border-bottom: 1px solid var(--lijn); padding-bottom: 2px; }
.kruimel a:hover, .kruimel a:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

.artikel-werk { margin: 10px 0 0; color: var(--quiet); font-size: 17px; line-height: 1.5; }

.artikel-tekst { margin-top: clamp(26px, 3vw, 40px); }
.artikel-tekst p { margin: 0 0 20px; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.6; }
.artikel-tekst p:last-child { margin-bottom: 0; }

.vragen { margin-top: clamp(30px, 3.5vw, 46px); display: grid; gap: 34px; }
.vraag { position: relative; padding-top: 26px; }
.vraag::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(12, 17, 18, .58) 0 5px, transparent 5px 11px);
}
.vraag h2 { font-size: clamp(21px, 1.9vw, 27px); }
.vraag p { margin: 12px 0 0; max-width: 62ch; color: var(--ink-zacht); font-size: clamp(17px, 1.25vw, 19px); line-height: 1.6; }
/* Wie dit bouwt, onder een domein op de expertisepagina. Kleiner en rustiger dan
   de tekst erboven, zodat het als bronvermelding leest en niet als opsomming. */
.vraag p.domein-wie { margin-top: 10px; font-size: clamp(15px, 1.05vw, 16px); color: var(--data); }
.vraag p.domein-wie a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--lijn); padding-bottom: 1px; }
.vraag p.domein-wie a:hover, .vraag p.domein-wie a:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

.ledenlijst { margin: clamp(28px, 3.5vw, 44px) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ledenkaart {
  position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 22px;
  padding: 26px 0; color: inherit; text-decoration: none;
}
.ledenlijst li + li .ledenkaart::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(12, 17, 18, .58) 0 5px, transparent 5px 11px);
}
.ledenkaart .roster-media { grid-row: auto; width: 110px; }
.ledenkaart-tekst { display: block; align-self: center; }
.ledenkaart-naam { display: block; font: 600 clamp(23px, 2vw, 30px)/1.05 var(--display); letter-spacing: -.015em; }
.ledenkaart-werk { display: block; margin-top: 7px; color: var(--quiet); font-size: 16px; line-height: 1.45; }
.ledenkaart-kort { display: block; margin-top: 10px; max-width: 52ch; color: var(--ink-zacht); font-size: 16px; line-height: 1.55; }
.ledenkaart:hover .ledenkaart-naam, .ledenkaart:focus-visible .ledenkaart-naam { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* De artikelkolom is 760 pixels breed; de driekoloms-opzet van de homepage
   knijpt daar de namen in stukken. */
.artikel .facilitators {
  margin-top: clamp(40px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 34px; align-items: start;
}
.artikel .facilitators-kop { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .ledenkaart { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .ledenkaart .roster-media { width: 84px; }
  .artikel .facilitators { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* De namen in de ledenlijst gaan naar de eigen pagina van dat lid. */
.roster-name a { text-decoration: none; color: inherit; }
.roster-name a:hover, .roster-name a:focus-visible {
  text-decoration: underline; text-decoration-color: var(--signal);
  text-decoration-thickness: 4px; text-underline-offset: 6px;
}
.roster-meer { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.roster-meer a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--data); font: 600 13px/1 var(--display); letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; box-shadow: inset 0 -3px 0 var(--signal);
}
.roster-meer a:hover, .roster-meer a:focus-visible { color: var(--ink); background: var(--signal); box-shadow: none; }

/* ---------------------------------------------------------------------------
   Ledenpagina: kop op het ditherveld, en onderaan een uitgang in plaats van
   een doodlopende weg.
   --------------------------------------------------------------------------- */

/* Op een korte pagina zweefde de voettekst halverwege het scherm. */
body.pagina { display: flex; flex-direction: column; min-height: 100svh; }
body.pagina main { flex: 1 0 auto; }

.lid-kop {
  position: relative; overflow: clip;
  padding: clamp(34px, 5vw, 68px) var(--rand) clamp(44px, 6vw, 84px);
  background: var(--zee-sectie); border-bottom: 1px solid var(--ink);
}
.lid-veld { position: absolute; inset: 0; width: 100%; height: 100%; }
.lid-kaart {
  /* Boven het veld: de engine zet zijn canvas op z-index 1. */
  position: relative; z-index: 2; width: min(100%, 760px); margin: 0 auto;
  padding: clamp(22px, 2.6vw, 38px); background: var(--papier); border: 1px solid var(--ink);
}
.lid-kaart .kruimel { margin-bottom: 20px; }
.lid-kaart-rij { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(20px, 2.6vw, 34px); }
.lid-kaart-rij > div { flex: 1 1 240px; min-width: 0; }
.lid-portret { grid-row: auto; flex: none; width: clamp(120px, 15vw, 176px); }
.lid-kaart h1 { margin: 0; font: 700 clamp(34px, 4.4vw, 56px)/1.02 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.lid-kaart .roster-links { grid-column: auto; grid-row: auto; flex-direction: row; align-items: center; gap: 18px; margin-top: 16px; }

/* De tekstkolom eronder heeft geen eigen kop meer nodig. */
.lid-kop + .artikel { padding-top: clamp(30px, 4vw, 54px); }

.lid-navigatie {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin-top: clamp(38px, 4.5vw, 60px); background: var(--lijn); border: 1px solid var(--lijn);
}
.lid-stap {
  display: grid; gap: 6px; padding: 18px 20px; background: var(--papier);
  text-decoration: none; color: inherit;
}
.lid-stap-verder { text-align: right; }
.lid-stap-label { font: 600 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--data); }
.lid-stap-naam { font: 600 clamp(17px, 1.4vw, 21px)/1.15 var(--display); letter-spacing: -.01em; }
.lid-stap:hover, .lid-stap:focus-visible { background: var(--signal); }
.lid-stap:hover .lid-stap-label, .lid-stap:focus-visible .lid-stap-label { color: #131208; }
.lid-stap-terug .lid-stap-naam::before { content: "\2190\00a0"; color: var(--data); }
.lid-stap-verder .lid-stap-naam::after { content: "\00a0\2192"; color: var(--data); }

.lid-anderen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 16px;
  margin: 18px 0 0; padding: 0; list-style: none;
}
.lid-anderen a { display: grid; gap: 9px; text-decoration: none; color: inherit; }
.lid-anderen .roster-media { grid-row: auto; width: 100%; }
.lid-anderen-naam { font: 600 13px/1.25 var(--display); color: var(--ink-zacht); }
.lid-anderen a:hover .lid-anderen-naam, .lid-anderen a:focus-visible .lid-anderen-naam { color: var(--ink); }
.lid-anderen a:hover .roster-media, .lid-anderen a:focus-visible .roster-media { border-color: var(--data); }

.lid-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(38px, 4.5vw, 60px); }
.lid-acties .hero-action { font-size: clamp(16px, 1.15vw, 18px); padding: 14px 20px; }

@media (max-width: 700px) {
  .lid-kop { padding-inline: clamp(16px, 5vw, 28px); }
  .lid-kaart { padding: 20px 18px 24px; }
  .lid-navigatie { grid-template-columns: minmax(0, 1fr); }
  .lid-stap-verder { text-align: left; }
  .lid-anderen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lid-acties .hero-action { width: 100%; justify-content: space-between; }
}