/* Femmefiliate
   Layout: links uitgelijnd en rustig. Tekst links, rechts een foto die half op een rosé vlak ligt.
   Het "doorzichtige overzicht" blijft het signatuurobject en staat bij het bewijs. Verder wit en veel lucht.
   Beeld: foto's zijn strak uitgesneden afdrukken met een kleine ronding. Kaarten en knoppen blijven zacht.
   Tekst: per blok één boodschap in één zin. Lijstjes krijgen vinkjes, kernpunten een icoon.
   Maat: verticale ruimte loopt in stappen van 8 px. Alleen binnen kleine onderdelen komen 4 en 12 voor.
   Aanraken: op kleine schermen en aanraakschermen is elk los tikdoel minstens 44 px hoog. */

@font-face { font-family: "Ysabeau Variable"; font-style: normal; font-weight: 1 1000; font-display: swap; src: url(fonts/ysabeau-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Commissioner Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/commissioner-latin-wght-normal.woff2) format("woff2"); }

:root {
  /* kleur */
  --paper: #FFFFFF;            /* schoon wit, de ondergrond */
  --rose-50: #FBF0F3;          /* rosé waas voor vlakken */
  --rose-100: #F1D9E0;         /* rosé lijn */
  --rose-300: #D9B3C0;         /* rosé tekst op bordeaux */
  --bordeaux: #7A1638;         /* merkkleur: knoppen en links */
  --bordeaux-deep: #3D0B1E;    /* koppen en de donkere band */
  --ink: #2A1720;              /* lopende tekst */
  --ink-soft: #6B5560;         /* bijschrift */
  --field-line: #C9AEB8;       /* rand van invoervelden */
  --glass: #0E6F66;            /* status: goedgekeurd */
  --glass-50: #E4F3F0;
  --alert: #B3261E;            /* foutmelding */
  --alert-50: #FCEDEB;
  --on-deep: #F8E9EE;          /* tekst op bordeaux */
  --deep-line: #5E2238;        /* lijn op bordeaux */
  --box: #1B0A11;              /* de black box */
  --on-box: #F3E3E8;
  --on-box-soft: #A58C96;
  --box-line: #3A2029;
  --box-bar: #5E4550;
  --veil: rgba(255, 255, 255, 0.93);
  --shadow: rgba(61, 11, 30, 0.26);
  --shadow-soft: rgba(61, 11, 30, 0.09);
  --deep-veil: rgba(61, 11, 30, 0.9);       /* bordeaux over de textuur, kant van de tekst */
  --deep-veil-soft: rgba(61, 11, 30, 0.38); /* en de kant waar de textuur doorkomt */
  --tap: rgba(122, 22, 56, 0.14);           /* oplichten bij aanraken */
  /* kruisje in bordeaux, voor wat we weren */
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' fill='none' stroke='%237A1638' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* type */
  --display: "Ysabeau Variable", "Ysabeau", Optima, Candara, "Gill Sans", "Segoe UI", sans-serif;
  --text: "Commissioner Variable", "Commissioner", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --t-xs: 0.8125rem;
  --t-s: 0.9375rem;
  --t-m: 1.0625rem;
  --t-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --t-h3: 1.5rem;
  --t-h2: clamp(1.875rem, 1.3rem + 2.3vw, 2.875rem);
  --t-h1: clamp(2.375rem, 1.45rem + 3.9vw, 4rem);
  --t-hero: clamp(2.625rem, 1.3rem + 5.2vw, 4.75rem);

  /* maat */
  --gutter: clamp(20px, 4vw, 40px);
  /* zijmarge: de gutter, of meer als een telefoon met inkeping liggend wordt gehouden */
  --side: max(var(--gutter), env(safe-area-inset-left, 0px) + 12px, env(safe-area-inset-right, 0px) + 12px);
  --max: 1180px;
  --band: clamp(56px, 7vw, 96px);
  --r-photo: 6px;   /* foto's */
  --r-card: 22px;   /* kaarten en vlakken */

  color-scheme: light;
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
}
@media (max-width: 339px) { :root { --gutter: 16px; } }

/* basis */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--paper); scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: var(--tap);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-m);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, label, summary, select { touch-action: manipulation; }
a { color: var(--bordeaux); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--side); top: -80px; z-index: 100; background: var(--bordeaux-deep); color: var(--on-deep); padding: 12px 16px; border-radius: 0 0 8px 8px; }
.skip:focus { top: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* opbouw */
.wrap { width: min(100% - 2 * var(--side), var(--max)); margin-inline: auto; }
.band { padding-block: var(--band); }
.band--rose { background: var(--rose-50); }
.band--deep { background: var(--bordeaux-deep); color: var(--on-deep); }
.band--compact { padding-block: clamp(40px, 6vw, 72px); }
.stack { --gap: 1rem; display: grid; gap: var(--gap); align-content: start; }
.stack > * { min-width: 0; }
.stack--l { --gap: clamp(32px, 4vw, 48px); }
.measure { max-width: 44rem; }

/* typografie */
.h-hero, .h-1, .h-2, .h-3, .h-4 {
  font-family: var(--display);
  color: var(--bordeaux-deep);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
.h-hero { font-size: var(--t-hero); line-height: 0.98; font-weight: 600; letter-spacing: -0.014em; }
.h-1 { font-size: var(--t-h1); line-height: 1.02; font-weight: 600; letter-spacing: -0.012em; }
.h-2 { font-size: var(--t-h2); line-height: 1.06; font-weight: 620; letter-spacing: -0.008em; }
.h-3 { font-size: var(--t-h3); line-height: 1.15; font-weight: 680; }
.h-4 { font-size: 1.25rem; line-height: 1.2; font-weight: 720; }
:is(.band--deep, .cta) :is(.h-1, .h-2, .h-3, .h-4) { color: var(--on-deep); }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 34em; text-wrap: pretty; }
.copy { max-width: 40em; text-wrap: pretty; }
.small { font-size: var(--t-s); color: var(--ink-soft); }
.band--deep .small { color: var(--rose-300); }
.band--deep a { color: var(--on-deep); }

/* knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.65em 1.5em;
  border: 1.5px solid var(--bordeaux); border-radius: 999px;
  background: var(--bordeaux); color: var(--paper);
  font-family: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { background: var(--bordeaux-deep); border-color: var(--bordeaux-deep); }
.btn--ghost { background: transparent; color: var(--bordeaux); }
.btn--ghost:hover { background: var(--rose-100); border-color: var(--bordeaux); color: var(--bordeaux-deep); }
.btn--sm { min-height: 40px; padding: 0.45em 1.15em; font-size: var(--t-s); }
:is(.band--deep, .cta) .btn { background: var(--paper); border-color: var(--paper); color: var(--bordeaux-deep); }
:is(.band--deep, .cta) .btn:hover { background: var(--rose-100); border-color: var(--rose-100); }
:is(.band--deep, .cta) .btn--ghost { background: transparent; border-color: var(--rose-300); color: var(--on-deep); }
:is(.band--deep, .cta) .btn--ghost:hover { background: var(--deep-line); border-color: var(--on-deep); color: var(--on-deep); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* kop van de site */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--veil);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rose-100);
}
.header-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; min-height: 64px; padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--bordeaux-deep); text-decoration: none; margin-right: auto; }
.brand-mark { width: 38px; height: 27px; flex: none; }
.brand-name { font-family: var(--display); font-weight: 680; font-size: 1.5rem; line-height: 1; letter-spacing: -0.01em; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px clamp(16px, 2.2vw, 28px); }
.site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: var(--t-s); font-weight: 500; text-decoration: none; }
.site-nav a:not(.btn):hover { color: var(--bordeaux); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.45em; }
.site-nav a[aria-current="page"] { color: var(--bordeaux); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.45em; }
.nav-actions { display: flex; align-items: center; gap: 16px; padding-left: clamp(16px, 2.2vw, 28px); border-left: 1px solid var(--rose-100); }
.menu-btn { display: none; }

/* tot 1080 px breed: het menu klapt uit onder de kop. Met vier links past de kop pas daarboven op één regel. */
@media (max-width: 1080px) {
  .js .menu-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border: 1.5px solid var(--bordeaux); border-radius: 999px; background: transparent;
    color: var(--bordeaux); font-size: var(--t-s); font-weight: 600; cursor: pointer;
  }
  .site-nav { flex-basis: 100%; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding-bottom: 16px; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; }
  .site-nav a:not(.btn) { min-height: 48px; font-size: var(--t-m); border-top: 1px solid var(--rose-100); }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 0; padding-left: 0; border-left: 0; }
  .nav-actions .btn { min-height: 48px; margin-top: 16px; font-size: 1rem; }
}
@media (max-width: 339px) {
  .brand-name { font-size: 1.25rem; }
  .brand-mark { width: 32px; height: 23px; }
  .js .menu-btn { padding: 0 12px; }
}

/* foto's */
.photo {
  display: block; position: relative; overflow: hidden; max-width: 100%;
  aspect-ratio: var(--ratio, 4 / 5); border-radius: var(--r-photo); background: var(--rose-100);
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.photo--43 { --ratio: 4 / 3; }
.photo--32 { --ratio: 3 / 2; }

/* hero: tekst links, rechts een foto die half op het rosé vlak ligt */
.hero-band { overflow: hidden; }
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); }
.hero-copy { align-self: center; padding-block: clamp(48px, 8vw, 112px); --gap: clamp(24px, 2.4vw, 32px); }
.hero-copy .h-hero { max-width: 11.5em; }
.hero-copy .h-1 { max-width: 12.5em; }
.hero-fig {
  /* op een breed scherm steekt de foto een stukje de marge in */
  --out: clamp(0px, (100vw - var(--max)) / 2 - var(--side), 112px);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  padding-block: clamp(40px, 5vw, 64px);
}
.hero-fig::before {
  content: ""; position: absolute; z-index: -1; inset-block: 0; left: 24%; width: 100vw;
  background: var(--rose-50);
}
.hero-shot { position: relative; width: calc(100% + var(--out)); }
.hero-shot .photo { --ratio: 6 / 5; box-shadow: 0 44px 70px -44px var(--shadow); }
/* een regel uit het overzicht, als voorbeeld bij de foto */
.hero-note {
  position: absolute; z-index: 1; left: clamp(-40px, -3.2vw, -16px); bottom: clamp(-32px, -2.2vw, -16px);
  display: grid; gap: 4px; min-width: min(240px, 100%); padding: 16px;
  background: var(--paper); border: 1px solid var(--rose-100); border-radius: 16px;
  box-shadow: 0 26px 46px -26px var(--shadow), 0 3px 8px -3px var(--shadow-soft);
}
.hero-note-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 4px; }
.hero-note-figure { font-family: var(--display); font-weight: 650; font-size: 1.75rem; line-height: 1; color: var(--bordeaux-deep); font-variant-numeric: lining-nums tabular-nums; }
.hero-note-figure span { font-family: var(--text); font-size: var(--t-s); font-weight: 500; color: var(--ink-soft); }
.hero-note-meta { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
/* smal tweekoloms beeld: het voorbeeld zakt verder onder de foto, zodat de foto vrij blijft */
@media (min-width: 961px) and (max-width: 1180px) {
  .hero-note { left: -24px; bottom: -56px; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding-block: clamp(40px, 9vw, 72px) clamp(32px, 6vw, 48px); }
  .hero-fig { --out: 0px; padding-block: 0 clamp(48px, 9vw, 72px); }
  .hero-fig::before { inset-block: 34% 0; left: 50%; transform: translateX(-50%); }
  .hero-shot .photo { --ratio: 3 / 2; }
  .hero-note { left: 16px; bottom: -24px; }
}
@media (max-width: 560px) {
  /* op een telefoon hangt het voorbeeld onder de foto */
  .hero-shot .photo { --ratio: 4 / 3; }
  .hero-note { position: relative; left: auto; bottom: auto; width: fit-content; max-width: calc(100% - 16px); margin: -32px 0 0 16px; }
}

/* het doorzichtige overzicht */
.record {
  container: record / inline-size;
  display: grid; gap: 16px;
  padding: clamp(16px, 2.6vw, 32px);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rose-100); border-radius: var(--r-card);
  box-shadow: 0 34px 60px -34px var(--shadow), 0 3px 8px -3px var(--shadow-soft);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.record-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 40px; }
.tag { display: inline-block; padding: 0.3em 0.8em; border-radius: 999px; background: var(--rose-50); color: var(--bordeaux); font-size: var(--t-xs); font-weight: 600; line-height: 1.3; }
.record-title { font-family: var(--display); font-weight: 700; font-size: 1.4375rem; line-height: 1.12; color: var(--bordeaux-deep); text-wrap: balance; }
.rows { display: grid; }
.row {
  display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); align-items: baseline; gap: 2px 16px;
  padding-block: 12px; border-top: 1px solid var(--rose-100);
  font-size: var(--t-s); line-height: 1.4;
}
.row dt { color: var(--ink-soft); }
.row dd { font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.record-foot { padding-top: 16px; border-top: 1px solid var(--rose-100); font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); }
.chip { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.2em 0.75em 0.2em 0.6em; border-radius: 999px; background: var(--glass-50); color: var(--glass); font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.chip::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.chip--off { background: var(--box-line); color: var(--on-box); }
.bar { display: inline-block; vertical-align: middle; width: var(--w, 8ch); max-width: 100%; height: 0.8em; border-radius: 3px; background: var(--box-bar); }
/* smalle kaart (binnenmaat onder 356 px): het antwoord komt onder de vraag te staan */
@container record (max-width: 355px) {
  .row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .row { grid-template-columns: minmax(0, 1fr); }
}

.seg { display: inline-flex; padding: 3px; border: 1px solid var(--rose-100); border-radius: 999px; background: var(--rose-50); }
.seg-btn {
  -webkit-appearance: none; appearance: none; min-height: 36px; padding: 0 1em; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-soft); font-size: var(--t-xs); font-weight: 600; line-height: 1; cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.seg-btn[aria-pressed="true"] { background: var(--paper); color: var(--bordeaux-deep); box-shadow: 0 1px 3px var(--shadow-soft); }

.record[data-view="blackbox"] { background: var(--box); border-color: var(--box); color: var(--on-box); }
.record[data-view="blackbox"] .record-title { color: var(--on-box); }
.record[data-view="blackbox"] .row,
.record[data-view="blackbox"] .record-foot { border-color: var(--box-line); }
.record[data-view="blackbox"] .row dt,
.record[data-view="blackbox"] .record-foot { color: var(--on-box-soft); }
.record[data-view="blackbox"] .tag { background: var(--box-line); color: var(--on-box); }
.record[data-view="blackbox"] .seg { background: var(--box-line); border-color: var(--box-line); }
.record[data-view="blackbox"] .seg-btn { color: var(--on-box-soft); }
.record[data-view="blackbox"] .seg-btn[aria-pressed="true"] { background: var(--on-box); color: var(--box); box-shadow: none; }
.record[data-view="blackbox"] :focus-visible { outline-color: var(--on-box); }

/* twee kanten: elke kant een foto en een eigen ingang */
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 56px) clamp(24px, 4vw, 56px); }
.side { display: grid; gap: 24px; align-content: start; }
.side > .stack { --gap: 16px; }
.side .h-3 { font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem); line-height: 1.1; font-weight: 650; }
.side-photo img { transition: transform 0.6s ease; }
@media (hover: hover) { .side-photo:hover img { transform: scale(1.03); } }
@media (max-width: 760px) { .sides { grid-template-columns: minmax(0, 1fr); } }

/* vinklijst: korte punten in plaats van alinea's */
.checks { display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 1.8em; max-width: 36em; }
.checks li::before {
  content: ""; position: absolute; left: 0.32em; top: 0.3em; width: 0.4em; height: 0.76em;
  border: solid var(--glass); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.band--deep .checks li::before { border-color: var(--rose-300); }
.checks--l { gap: 16px; font-size: var(--t-lead); line-height: 1.4; }

/* kernpunten: icoon, kop en één zin */
.ico { flex: none; width: 32px; height: 32px; color: var(--bordeaux); }
.band--deep .ico { color: var(--rose-300); }
.items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 56px); }
.item { --gap: 12px; }
.item p { max-width: 26em; }
.items--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 48px); }
/* in één kolom staat het icoon links van de tekst, net als bij de pijlers */
@media (max-width: 760px) {
  .items:not(.items--2) { grid-template-columns: minmax(0, 1fr); }
  .items:not(.items--2) > .item { grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
  .items:not(.items--2) > .item > .ico { grid-row: span 2; margin-top: 1px; }
}
@media (max-width: 600px) {
  .items--2 { grid-template-columns: minmax(0, 1fr); }
  .items--2 > .item { grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
  .items--2 > .item > .ico { grid-row: span 2; margin-top: 1px; }
}

/* bewijs: kernpunten links, het overzicht rechts */
.proof { display: grid; grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.proof-fig { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.proof-fig > .record { width: min(100%, 460px); }
.proof-fig--stage { padding: clamp(24px, 3vw, 40px) clamp(16px, 2.4vw, 32px); border-radius: calc(var(--r-card) + 8px); background: var(--rose-50); }
@media (max-width: 960px) {
  .proof { grid-template-columns: minmax(0, 1fr); }
  .proof-fig { justify-items: start; }
  .proof-fig--stage { justify-items: center; }
}
.pillars { display: grid; gap: clamp(24px, 3vw, 32px); }
.pillar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: start; }
.pillar .ico { grid-row: span 2; margin-top: 1px; }
.pillar p { max-width: 28em; }

/* wat er niet in komt: grote woorden op bordeaux */
.refuse { display: flex; flex-wrap: wrap; gap: 0.12em 0.55em; font-family: var(--display); font-weight: 600; font-size: clamp(1.625rem, 1rem + 2.7vw, 2.875rem); line-height: 1.14; letter-spacing: -0.008em; }
.refuse a { color: var(--on-deep); text-decoration: none; }
.refuse a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
.refuse li:nth-child(even) a { color: var(--rose-300); }

/* begrip links, uitleg rechts */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* namenlijst in twee kolommen: soorten publishers */
.names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px); }
.names li {
  display: flex; align-items: center; min-height: 64px; padding-block: 16px; border-top: 1px solid var(--line, var(--rose-100));
  font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: var(--bordeaux-deep);
}
.band--rose .names { --line: var(--field-line); }
@media (max-width: 520px) { .names { grid-template-columns: minmax(0, 1fr); } }

/* thema's: een foto per thema, de naam eronder */
.themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 24px); }
.theme { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.theme-name { font-family: var(--display); font-weight: 700; font-size: 1.1875rem; line-height: 1.2; color: var(--bordeaux-deep); text-wrap: balance; }
.theme-note {
  display: grid; gap: 8px; align-content: end; min-width: 0; aspect-ratio: 4 / 5; padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--rose-100); border-radius: var(--r-photo); background: var(--rose-50);
}
@media (min-width: 640px) and (max-width: 899px) {
  .theme-name { font-size: 1.0625rem; }
  .theme-note .small { font-size: var(--t-xs); }
}
@media (max-width: 639px) { .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* foto naast tekst */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.feature--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature--flip > .photo { order: 2; }
.feature .pair { gap: clamp(24px, 3vw, 40px); }
@media (max-width: 860px) {
  .feature, .feature--flip { grid-template-columns: minmax(0, 1fr); }
  .feature > .photo, .feature--flip > .photo { order: 0; width: min(100%, 440px); }
}

/* geweerde werkwijzen: kruisje, begrip en één zin */
.bans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); }
.ban { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px 0 16px 2.2em; border-top: 1px solid var(--rose-100); }
.ban::before {
  content: ""; position: absolute; left: 0.1em; top: calc(16px + 0.2em); width: 1.05em; height: 1.05em;
  background: var(--cross) center / contain no-repeat;
}
.ban p { max-width: 30em; }
@media (max-width: 760px) { .bans { grid-template-columns: minmax(0, 1fr); } }

/* stappen: een echte volgorde, dus genummerd */
.steps { counter-reset: stap; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px); }
.step { counter-increment: stap; --gap: 8px; }
.step::before {
  content: counter(stap); font-family: var(--display); font-weight: 500; font-variant-numeric: lining-nums;
  font-size: 3rem; line-height: 1; color: var(--bordeaux);
}
.band--deep .step::before { color: var(--rose-300); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* op een telefoon: het cijfer links, de stap ernaast */
@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .step { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 4px 16px; }
  .step::before { grid-row: span 2; font-size: 2.5rem; }
}

/* veelgestelde vragen */
.faq { display: grid; max-width: 52rem; }
.faq details { border-top: 1px solid var(--field-line); }
.faq details:last-child { border-bottom: 1px solid var(--field-line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 24px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: 1.3125rem; line-height: 1.2; color: var(--bordeaux-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--bordeaux), var(--bordeaux)) center / 100% 2px no-repeat,
    linear-gradient(var(--bordeaux), var(--bordeaux)) center / 2px 100% no-repeat;
  transition: transform 0.2s;
}
.faq details[open] summary::after { background: linear-gradient(var(--bordeaux), var(--bordeaux)) center / 100% 2px no-repeat; }
.faq details p { max-width: 40em; padding-bottom: 24px; }

/* afsluitende oproep: een bordeaux vlak met een aquareltextuur */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px);
  border-radius: var(--r-card); color: var(--on-deep);
  background: var(--bordeaux-deep) url("img/textuur-1600.webp") center / cover no-repeat;
}
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--deep-veil) 15%, var(--deep-veil-soft)); }
.cta .h-2 { max-width: 13em; }

/* "op deze pagina": vier sprongen onder de hero, elk met een pijltje omlaag */
.jump { padding-top: clamp(24px, 3vw, 32px); }
.jump ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px); counter-reset: sprong; }
.jump li { counter-increment: sprong; border-top: 1px solid var(--rose-100); }
.jump a { display: flex; gap: 12px; align-items: baseline; padding-block: 16px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--t-s); line-height: 1.35; }
.jump a::before { content: counter(sprong); flex: none; font-family: var(--display); font-weight: 600; font-size: 1.125rem; font-variant-numeric: lining-nums; color: var(--bordeaux); }
.jump a::after {
  content: ""; flex: none; align-self: center; margin-left: auto; width: 8px; height: 8px;
  border: solid var(--bordeaux); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg);
}
.jump a:hover { color: var(--bordeaux); text-decoration: underline; }
@media (max-width: 860px) { .jump ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .jump ol { grid-template-columns: minmax(0, 1fr); } }

/* twee lijsten naast elkaar */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
@media (max-width: 760px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.pair > .stack { --gap: 16px; }

/* gedragscode */
.code { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); }
@media (max-width: 900px) { .code { grid-template-columns: minmax(0, 1fr); } }
.code ol { display: grid; counter-reset: regel; }
.code li { counter-increment: regel; display: flex; gap: 16px; align-items: baseline; padding-block: 12px; border-top: 1px solid var(--deep-line); }
.code li::before { content: counter(regel); flex: none; width: 1em; font-family: var(--display); font-weight: 600; font-size: 1.25rem; font-variant-numeric: lining-nums; color: var(--rose-300); }

/* aanmelden */
.apply { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .apply { grid-template-columns: minmax(0, 1fr); } }
.form { display: grid; gap: 24px; }
.field { display: grid; gap: 8px; align-content: start; }
.field > label, .field-label { font-size: var(--t-s); font-weight: 600; color: var(--bordeaux-deep); }
.field .hint { font-size: var(--t-s); color: var(--ink-soft); }
.field > .check { font-weight: 400; color: var(--ink); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
@media (max-width: 600px) { .field-grid { grid-template-columns: minmax(0, 1fr); } }
.input, .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--field-line); border-radius: 10px; background: var(--paper); color: var(--ink);
  font-size: 1rem; line-height: 1.4;
}
.form textarea { min-height: 112px; resize: vertical; }
.form select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--bordeaux) 50%), linear-gradient(135deg, var(--bordeaux) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.input:hover, .form select:hover, .form textarea:hover { border-color: var(--bordeaux); }
.input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 1px; border-color: var(--bordeaux); border-radius: 10px; }
.input[aria-invalid="true"], .form select[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--alert); background: var(--alert-50); }
.err { font-size: var(--t-s); font-weight: 500; color: var(--alert); }

.seg--form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 26rem); padding: 4px; }
.seg-opt { position: relative; display: block; }
.seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg-opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1em; border-radius: 999px; color: var(--ink-soft); font-size: 1rem; font-weight: 600; transition: background-color 0.15s, color 0.15s; }
.seg-opt input:checked + span { background: var(--bordeaux); color: var(--paper); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--bordeaux); outline-offset: 3px; }

.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; display: block; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span { display: flex; align-items: center; min-height: 44px; padding: 0 1.05em; border: 1px solid var(--field-line); border-radius: 999px; background: var(--paper); font-size: var(--t-s); font-weight: 500; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.pick input:hover + span { border-color: var(--bordeaux); }
.pick input:checked + span { background: var(--rose-50); border-color: var(--bordeaux); color: var(--bordeaux-deep); font-weight: 600; }
.pick input:focus-visible + span { outline: 2px solid var(--bordeaux); outline-offset: 3px; }

.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; align-content: center; min-height: 44px; font-size: var(--t-s); cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--bordeaux); cursor: pointer; }
.hp { position: absolute; left: -9999px; }

.notice { display: grid; gap: 16px; padding: clamp(24px, 3vw, 32px); border: 1px solid var(--field-line); border-radius: 16px; background: var(--rose-50); }
.notice:focus-visible { outline: none; }
.notice--ok { border-color: var(--glass); background: var(--glass-50); }
.notice--ok .h-3 { color: var(--glass); }
.notice pre { margin: 0; padding: 16px; max-height: 18rem; overflow: auto; border: 1px solid var(--rose-100); border-radius: 10px; background: var(--paper); font-family: var(--text); font-size: var(--t-s); line-height: 1.5; white-space: pre-wrap; -webkit-user-select: all; user-select: all; }
.addr { font-weight: 600; -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }

.aside { display: grid; gap: clamp(32px, 4vw, 40px); }
.aside-photo { --ratio: 3 / 2; }
@media (max-width: 960px) { .aside-photo { display: none; } }
.aside-block { display: grid; gap: 16px; padding-top: 24px; border-top: 2px solid var(--bordeaux-deep); }
.aside-steps { counter-reset: na; display: grid; gap: 12px; }
.aside-steps li { counter-increment: na; display: flex; gap: 16px; align-items: baseline; }
.aside-steps li::before { content: counter(na); flex: none; width: 1em; font-family: var(--display); font-weight: 600; font-size: 1.25rem; font-variant-numeric: lining-nums; color: var(--bordeaux); }

/* lange tekst: de privacyverklaring */
.prose { display: grid; gap: 16px; max-width: 44rem; }
.prose > * { min-width: 0; }
.prose h2 { margin-top: 24px; }
.prose ul { display: grid; gap: 12px; }
.prose li { position: relative; padding-left: 1.4em; }
.prose li::before { content: ""; position: absolute; left: 0.25em; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--bordeaux); }
.prose strong { font-weight: 600; color: var(--bordeaux-deep); }
/* een pagina die nog niet af is: alleen te zien met python build.py --concept, nooit online */
.concept-bar { padding: 12px var(--side); background: var(--alert-50); color: var(--alert); font-size: var(--t-s); font-weight: 600; text-align: center; }
.todo { padding: 0 0.2em; border-radius: 3px; background: var(--alert-50); color: var(--alert); }

/* pagina niet gevonden */
.lost { display: grid; gap: 24px; justify-items: start; padding-block: clamp(64px, 12vw, 160px); }

/* voet van de site */
.site-footer { background: var(--bordeaux-deep); color: var(--rose-300); padding-block: clamp(48px, 7vw, 80px) 32px; font-size: var(--t-s); }
.site-footer a { color: var(--on-deep); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .addr { color: var(--on-deep); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.3fr)); gap: 40px clamp(24px, 4vw, 56px); }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand, .footer-col--wide { grid-column: 1 / -1; }
}
.footer-brand { display: grid; gap: 16px; align-content: start; max-width: 24em; }
.footer-brand .brand { color: var(--on-deep); margin-right: 0; justify-self: start; }
.footer-col { display: grid; gap: 12px; align-content: start; }
.footer-col h2 { font-family: var(--text); font-size: var(--t-s); font-weight: 600; color: var(--on-deep); }
.footer-col ul { display: grid; gap: 8px; justify-items: start; }
.firm { display: grid; gap: 4px; font-style: normal; font-size: var(--t-xs); line-height: 1.45; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: clamp(32px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--deep-line); font-size: var(--t-xs); }

/* aanraken: op kleine schermen en aanraakschermen krijgt elk los tikdoel 44 px hoogte */
@media (pointer: coarse), (max-width: 960px) {
  .btn--sm { min-height: 44px; }
  .seg-btn { min-height: 44px; padding-inline: 1.1em; }
  /* de grote woorden krijgen zoveel lucht dat elk woord ruim 44 px hoog wordt */
  .refuse a { display: inline-block; padding-block: max(0px, (46px - 1.14em) / 2); }
  .footer-col ul { gap: 0; }
  .footer-col a, .footer-base a { display: inline-flex; align-items: center; min-height: 44px; }
  /* links in een zin: het raakvlak wordt hoger, de regelval blijft gelijk */
  main p a:not(.btn), .prose li a, .check a { padding-block: 13px; }
}

/* liggende telefoon: foto's lager, zodat tekst en beeld samen in beeld passen */
@media (orientation: landscape) and (max-height: 520px) {
  .sides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature > .photo { max-height: 76vh; }
}
@media (max-width: 960px) and (orientation: landscape) and (max-height: 520px) {
  /* kop, inleiding en knoppen passen samen op het eerste scherm */
  .hero-copy { padding-block: 24px 32px; --gap: 16px; }
  .hero-copy .h-hero, .hero-copy .h-1 { font-size: 2.25rem; max-width: none; }
  .hero-shot .photo { --ratio: 5 / 2; }
  .hero-shot .photo img { object-position: 50% 68%; }
}