/* ---------- 0. Letters, van deze server ----------
   Stonden eerst bij Google. Dat betekent dat het IP-adres van elke bezoeker naar
   Google gaat voor je iets gelezen hebt, en dat is precies wat de privacypagina
   belooft dat niet gebeurt. Nu staan ze hier: geen derde partij, en een
   verbinding minder om op te wachten.
   Alleen latin en latin-ext; de site is Engels met Zweedse en Nederlandse namen. */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bodoni-moda-400-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bodoni-moda-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jost-400-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jost-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jost-500-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jost-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   SCILLASDOTTER — stylesheet
   Gebouwd naar DESIGN.md. Elke waarde hieronder staat daar; waar
   ik ben afgeweken staat de reden erbij.
   ============================================================= */

/* ---------- 1. Tokens (DESIGN.md §3) ---------- */
:root{
  /* grond */
  --ink-900:#0A0A0B;
  --ink-800:#101013;
  --ink-700:#16161A;
  --ink-600:#1E1E22;

  /* tekst en lijn */
  --chalk:#F4F3F0;
  --silver:#C9C7C1;
  --ash:#A3A19A;
  --slate:#82807A;
  --edge:#4A4A4F;
  --edge-soft:#2A2A2E;

  /* tekst over beeld */
  --on-image:#FFFFFF;
  --on-image-soft:#E6E5E2;

  /* interactie */
  --focus:#F4F3F0;

  /* ruimte — alles een veelvoud van 8 (§5) */
  --marge:20px;
  --goot:16px;
  --sectie:72px;
  --breuk:96px;
  --kop-tekst:20px;
  --tekst-link:24px;
  --stap:40px;
}
@media (min-width:768px){
  :root{ --marge:32px; --goot:20px; --sectie:120px; --breuk:176px;
         --kop-tekst:24px; --tekst-link:32px; --stap:48px; }
}
@media (min-width:1180px){ :root{ --marge:48px; --goot:24px; } }
@media (min-width:1600px){ :root{ --marge:64px; } }

/* De site kent één wereld. Geen lichte variant: dit is een bewuste
   keuze uit DESIGN.md §3, geen vergeten media query. Daarom staat
   alles hieronder expliciet en erft niets van de host. */

/* ---------- 2. Grondslag ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--silver);
  font-family:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;              /* ondergrens uit §4: nooit lager */
  font-weight:400;             /* 300 valt weg op inkt */
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
a{color:inherit}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.overslaan{
  position:absolute;left:-9999px;top:0;
  background:var(--chalk);color:var(--ink-900);
  padding:12px 20px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;z-index:100;
}
.overslaan:focus{left:var(--marge);top:12px}

/* ---------- 3. Maatvoering ---------- */
.omhulsel{max-width:1440px;margin:0 auto;padding-left:var(--marge);padding-right:var(--marge)}
.kolom{max-width:620px}          /* §4: een tekstregel is nooit breder */
.sectie{padding-block:var(--sectie)}
.breuk{padding-top:var(--breuk)}

/* ---------- 4. Typografie (§4) ---------- */
.hero-regel,h1,h2,.collectietitel,.label,.knop,.stapnummer,.veldlabel{
  text-transform:uppercase;
}
.hero-regel{
  font-size:26px;line-height:1.15;letter-spacing:.05em;font-weight:400;
  margin:0;color:var(--on-image);
  text-shadow:0 1px 24px rgba(0,0,0,.5);   /* tweede vangnet, §7 */
}
h1{font-size:24px;line-height:1.20;letter-spacing:.06em;font-weight:400;color:var(--chalk);margin:0}
h2{font-size:18px;line-height:1.30;letter-spacing:.10em;font-weight:400;color:var(--chalk);margin:0}
.collectietitel{font-size:16px;line-height:1.35;letter-spacing:.12em;font-weight:400;color:var(--chalk)}
.lang{font-size:17px;line-height:1.70;letter-spacing:0}
.label{font-size:12px;line-height:1.40;letter-spacing:.18em;font-weight:500;color:var(--ash)}
.meta{font-size:12px;letter-spacing:.18em;font-weight:500;color:var(--slate);text-transform:uppercase}
@media (min-width:768px){
  .hero-regel{font-size:38px}
  h1{font-size:32px}
  h2{font-size:20px}
  .collectietitel{font-size:17px}
  .lang{font-size:18px}
}
p{margin:0 0 var(--kop-tekst)}
p:last-child{margin-bottom:0}
h1+p,h2+p{margin-top:var(--kop-tekst)}

/* ---------- 5. Woordmerk (§4a) ---------- */
.woordmerk{
  font-size:14px;letter-spacing:.16em;font-weight:400;text-transform:uppercase;
  color:var(--chalk);text-decoration:none;white-space:nowrap;
}
@media (min-width:768px){ .woordmerk{font-size:15px} }

/* ---------- 6. Navigatie (§8.1) ---------- */
.kop-balk{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--marge);
}
.kop-balk.vast{position:sticky;background:var(--ink-900);border-bottom:1px solid var(--edge-soft)}
.nav{display:none;gap:28px}
.nav a{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  color:var(--on-image-soft);text-decoration:none;padding-block:6px;
}
.kop-balk.vast .nav a{color:var(--ash)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--chalk)}
@media (min-width:768px){ .nav{display:flex} .menuknop{display:none} }

.menuknop{
  background:none;border:0;color:var(--on-image);cursor:pointer;
  font-family:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;padding:8px 0;
}
.overlay{
  position:fixed;inset:0;z-index:30;background:rgba(22,22,26,.98);
  display:none;flex-direction:column;justify-content:center;gap:8px;padding:0 var(--marge);
}
.overlay[open],.overlay.open{display:flex}
.overlay a{
  font-size:22px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk);
  text-decoration:none;padding:14px 0;border-bottom:1px solid var(--edge-soft);
}
.overlay .sluit{position:absolute;top:24px;right:var(--marge)}

/* ---------- 7. Hero (§5, §7) ---------- */
.hero{position:relative;height:78vh;min-height:460px;overflow:hidden;background:var(--ink-900)}
@media (min-width:768px){ .hero{height:88vh} }
.hero > img,.hero > video,.hero > picture{
  position:absolute;inset:0;width:100%;height:100%;
}
.hero > img,.hero > video,.hero > picture img{
  width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% var(--beeldhoogte,50%);
}
/* GEVONDEN BIJ HET NAKIJKEN. Zodra er een mobiele uitsnede bij kwam zit het
   beeld in een <picture>, en dan is de <img> geen direct kind meer van .hero.
   De regel hierboven greep hem dus niet: position bleef static, het beeld stond
   op ware grootte (1200x2150) in de flow en de hero leek zwart. */
.hero video{opacity:0;transition:opacity .8s ease}
.hero video.klaar{opacity:1}
/* De scrim: verloop van 78% onderaan naar 0 op 58% hoogte (§7). Nooit een blok. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,11,.78) 0%,rgba(10,10,11,.55) 22%,rgba(10,10,11,0) 58%);
}
.hero-tekst{
  position:absolute;left:var(--marge);bottom:48px;right:var(--marge);z-index:2;
  max-width:720px;
}
@media (min-width:768px){ .hero-tekst{left:48px;bottom:64px} }
.hero-tekst .label{color:var(--on-image-soft);margin:0 0 16px;text-shadow:0 1px 24px rgba(0,0,0,.5)}

/* ---------- 8. Links en de CTA-ladder (§8.8) ---------- */
.cta-zwaar{
  display:inline-block;border:1px solid var(--chalk);
  padding:15px 30px;font-size:13px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;color:var(--chalk);text-decoration:none;
  transition:background .25s ease,color .25s ease;
}
.cta-zwaar:hover{background:var(--chalk);color:var(--ink-900)}
.cta-midden{
  display:inline-block;font-size:13px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;line-height:1;color:var(--chalk);text-decoration:none;
  border-bottom:1px solid var(--edge);padding-bottom:6px;
}
.cta-midden:hover{border-bottom-color:var(--chalk)}
.cta-licht{
  display:inline-block;font-size:17px;color:var(--ash);
  text-decoration:none;border-bottom:1px solid var(--edge-soft);padding-bottom:2px;
}
.cta-licht:hover{color:var(--chalk);border-bottom-color:var(--edge)}
.op-beeld .cta-zwaar,.op-beeld .cta-midden{color:var(--on-image);border-color:var(--on-image)}

/* ---------- 9. Collectieraster (§5, §8.3) ---------- */
.raster{display:grid;gap:var(--goot);row-gap:calc(var(--goot) * 1.5);grid-template-columns:1fr}
@media (min-width:768px){ .raster{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1180px){ .raster.drie{grid-template-columns:repeat(3,1fr)} }
.look figure{margin:0}
.look img{width:100%;aspect-ratio:3/4;object-fit:cover}
/* Een rij met liggende beelden: een staande uitsnede zou de tafel en het
   raam er half afsnijden. */
.raster.breed .look img{aspect-ratio:4/3}
.look figcaption{margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);line-height:1.5}
.look figcaption .nr{color:var(--slate);margin-right:8px}
.look figcaption .toelichting{display:block;margin-top:6px;text-transform:none;letter-spacing:0;
  font-size:14px;color:var(--slate);line-height:1.55}

/* ---------- 10. Het proces (§8.5) ---------- */
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:var(--stap)}
.stap{display:grid;gap:10px;max-width:620px}
.stapnummer{font-size:12px;letter-spacing:.16em;font-weight:500;color:var(--slate);line-height:1}
.stap h3{margin:0;font-size:17px;letter-spacing:.10em;text-transform:uppercase;font-weight:400;color:var(--chalk)}
.stap p{margin:0;color:var(--silver)}

/* ---------- 11. Op afspraak (§8.6) ---------- */
.afspraak{
  border-top:1px solid var(--edge-soft);margin-top:var(--sectie);padding-top:24px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);
}

/* ---------- 12. Formulier (§8.7) ---------- */
.formulier{display:grid;gap:28px;max-width:620px}
.veld{display:grid;gap:8px}
.veldlabel{font-size:12px;letter-spacing:.16em;font-weight:500;color:var(--ash);line-height:1}
/* Hulptekst staat ónder het label, niet als placeholder: een placeholder
   verdwijnt zodra iemand typt, en dit is juist de tekst die moet blijven staan.
   Afwijking van COPY.md, vastgelegd in DESIGN.md §8.7. */
.hulp{font-size:14px;color:var(--slate);line-height:1.5;margin:0}
.veld input,.veld select,.veld textarea{
  font-family:inherit;font-size:17px;line-height:1.40;color:var(--chalk);
  background:var(--ink-700);border:0;border-bottom:1px solid var(--edge);
  padding:12px 14px;width:100%;border-radius:0;appearance:none;
}
.veld textarea{min-height:132px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  background:var(--ink-600);border-bottom-color:var(--chalk);outline:none;
}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;
}
.keuzerij{display:flex;flex-wrap:wrap;gap:10px}
.keuzerij label{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--silver);
  border:1px solid var(--edge-soft);padding:10px 14px;cursor:pointer;
}
.keuzerij input{width:auto;accent-color:var(--chalk)}
.verzend{
  justify-self:start;background:var(--chalk);color:var(--ink-900);border:0;
  font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 34px;cursor:pointer;
}
.verzend:hover{background:#fff}
.verplicht{color:var(--slate)}

/* ---------- 13. Footer (§8.9) ---------- */
.voet{
  border-top:1px solid var(--edge-soft);margin-top:var(--breuk);
  padding:48px var(--marge) 56px;font-size:12px;letter-spacing:.10em;line-height:1.60;color:var(--slate);
}
.voet-binnen{max-width:1440px;margin:0 auto;display:grid;gap:32px}
@media (min-width:768px){ .voet-binnen{grid-template-columns:1fr auto;align-items:end} }
.voet a{color:var(--ash);text-decoration:none;border-bottom:1px solid var(--edge-soft)}
.voet a:hover{color:var(--chalk);border-bottom-color:var(--edge)}
.voet .woordmerk{display:block;margin-bottom:10px}

/* ---------- 14. Beweging (§6) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero video{display:none}
}
/* AFWIJKING VAN DESIGN.md §7, op verzoek van de opdrachtgever.
   De spec zei: geen video op mobiel, want het scheelt data, batterij en een
   seconde. Hij wil hem er wél, en dan is de vraag niet "of" maar "hoe duur".
   Antwoord: een eigen staande uitsnede op 720px breed en CRF 33 — gemiddeld
   475 KB tegenover 1,2 MB voor de liggende versie. De <source media=...>
   in de HTML kiest hem; de telefoon laadt de zware nooit. */

/* ---------- 15. Toegevoegd bij het bouwen ---------- */
/* De hero-hoogte komt uit de generator, zodat een tweede hero op dezelfde
   pagina lager kan zijn dan de eerste zonder een tweede klasse. */
.hero{height:var(--hoog,78vh)}
@media (max-width:767px){ .hero{height:min(var(--hoog,78vh),78vh)} }

/* Twee ingangen op Home: beeld, titel, één regel eronder. Geen kaart, geen
   rand, geen schaduw — het beeld staat gewoon op de grond. */
.ingang{display:grid;gap:14px;text-decoration:none;color:inherit}
.ingang img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ingang .collectietitel{display:block;color:var(--chalk)}
.ingang .ingang-onder{display:block;font-size:15px;color:var(--slate);line-height:1.55;max-width:38ch}
.ingang:hover .collectietitel{color:#fff}
.ingang:hover img{filter:brightness(1.06)}
.ingang img{transition:filter .4s ease}

/* De lichtste sport met een zin eronder (alleen op Bridal). */
.cta-licht-blok{margin-top:var(--tekst-link)}
.cta-licht-blok span{display:block;margin-top:10px;font-size:15px;color:var(--slate);line-height:1.55}

/* De ondertekening onder de atelier-tekst: klein, rechts, geen functietitel. */
.ondertekening{margin-top:40px;text-align:right;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash)}

/* Het proces staat in een <ol>; de eigen nummering vervangt die van de browser. */
ol.stappen{list-style:none}

/* ---------- 16. De naam in de hero ----------
   TERUG OP VERZOEK. Het veldonderzoek zei: geen didone, alle vijftien huizen
   draaien één schreefloze. Volkert koos de mockup, en daar stond de naam in
   Bodoni — dat is wat hij goed vond. Dus komt hij terug, maar ALLEEN hier:
   de naam in de hero en nergens anders. De navigatie, de lopende tekst, de
   labels en het formulier blijven Jost. Eén afwijking, één plek. */
.hero-naam{
  font-family:"Bodoni Moda",Didot,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(38px,9vw,86px);
  line-height:.94;
  letter-spacing:-.01em;
  text-transform:none;          /* een naam schreeuwt niet in kapitalen */
  color:var(--on-image);
  margin:0;
  text-shadow:0 1px 24px rgba(0,0,0,.5);
}

/* ---------- 17. Scrim aan de bovenkant ----------
   GEVONDEN BIJ HET NAKIJKEN. DESIGN.md §7 rekent de scrim alleen onderaan door,
   waar de tekst staat. Maar de navigatie ligt óók over het beeld, en in de
   eerste schermafdruk viel "BRIDAL" weg tegen een lichte plek in de foto.
   Zelfde redenering als de onderste scrim, gespiegeld: een verloop van boven
   naar beneden dat op 26% van de hoogte niets meer doet, plus de schaduw als
   tweede vangnet. Het beeld blijft daaronder onaangetast. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom,rgba(10,10,11,.62) 0%,rgba(10,10,11,.34) 12%,rgba(10,10,11,0) 26%);
}
.kop-balk:not(.vast) .nav a,
.kop-balk:not(.vast) .woordmerk,
.kop-balk:not(.vast) .menuknop{ text-shadow:0 1px 18px rgba(0,0,0,.75) }

/* ---------- 18. Van kleur naar zwart-wit, langzaam ----------
   Eerst sloeg het beeld meteen om naar monochroom. Nu begint de film in
   volle kleur en zakt hij over twaalf seconden naar zwart-wit — de eerste
   acht seconden gebeurt er bijna niets, daarna trekt de kleur weg.

   Waarom zo lang: wie binnenkomt ziet kleur, wie blijft kijken ziet het
   verdwijnen. Dat is één beweging in plaats van een schakelaar, en het is
   het enige effect op de pagina.

   Het posterbeeld blijft zwart-wit; als de film niet speelt (reduced motion,
   trage verbinding) klopt de pagina nog steeds. */
.hero video{
  filter:grayscale(0) contrast(1.02) saturate(1.06);
  animation:ontkleuren 12s ease-in 1s forwards;
}
@keyframes ontkleuren{
  0%   {filter:grayscale(0)   contrast(1.02) saturate(1.06)}
  55%  {filter:grayscale(.18) contrast(1.03) saturate(1.00)}
  100% {filter:grayscale(1)   contrast(1.06) brightness(.94)}
}
@media (prefers-reduced-motion:reduce){
  .hero video{animation:none;filter:grayscale(1) contrast(1.06) brightness(.94)}
}

/* ---------- 19. Knoppen: duidelijker en moderner ----------
   De oude waren een dunne lijn met wijde letterspatiëring. Correct voor het
   segment, maar je zag pas dat het een knop was als je erop stond.

   Wat er anders is:
   · de zware knop is nu gevuld in plaats van omlijnd. Eén gevuld vlak per
     scherm is genoeg om te weten waar je moet klikken.
   · groter raakoppervlak: 54px hoog, ruim boven de 44px die een duim nodig heeft.
   · een pijl die bij hover een stukje opschuift, zodat hij reageert.
   · de middelste sport houdt zijn onderlijn, maar die is nu vol in plaats van
     grijs, en hij groeit bij hover van links naar rechts. */
.cta-zwaar{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  background:var(--chalk);color:var(--ink-900);border:1px solid var(--chalk);
  padding:0 34px;height:54px;font-size:13px;font-weight:500;letter-spacing:.14em;
  transition:background .2s ease,color .2s ease,gap .2s ease;
}
.cta-zwaar::after{content:"→";font-size:15px;letter-spacing:0;transition:transform .2s ease}
.cta-zwaar:hover{background:transparent;color:var(--chalk);gap:18px}
.cta-zwaar:hover::after{transform:translateX(3px)}
.op-beeld .cta-zwaar{background:var(--on-image);color:var(--ink-900);border-color:var(--on-image)}
.op-beeld .cta-zwaar:hover{background:transparent;color:var(--on-image)}

.cta-midden{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  border-bottom:0;padding:10px 0;font-size:13px;letter-spacing:.14em;
}
/* Als een cta-midden een <button> is, geeft de browser hem een grijze vulling
   en zijn eigen letter. Op zwart werd dat een wit blok met witte tekst. */
button.cta-midden,button.cta-zwaar{
  appearance:none;-webkit-appearance:none;font-family:inherit;cursor:pointer;
  text-transform:uppercase;font-weight:500;
}
button.cta-midden{background:none;border:0;color:var(--silver)}
.kopieer{
  appearance:none;-webkit-appearance:none;font-family:inherit;cursor:pointer;
  margin-left:12px;padding:5px 12px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);background:none;
  border:1px solid var(--edge);border-radius:2px;transition:color .2s ease,border-color .2s ease;
}
.kopieer:hover{color:var(--chalk);border-color:var(--silver)}
.kopieer.gelukt{color:var(--chalk);border-color:var(--chalk)}
button.cta-midden:hover{color:var(--chalk)}
.cta-midden::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;opacity:.35;transition:opacity .2s ease;
}
.cta-midden::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width .3s cubic-bezier(.2,.7,.3,1)}
.cta-midden:hover::before{opacity:0}
.cta-midden:hover::after{width:100%}

.verzend{
  display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 38px;
  font-size:13px;letter-spacing:.14em;transition:gap .2s ease,background .2s ease;
}
.verzend::after{content:"→";font-size:15px;letter-spacing:0}
.verzend:hover{gap:18px;background:#fff}

/* ---------- 20. De vragen ----------
   Staat er voor twee lezers tegelijk: iemand die twijfelt, en de antwoord-
   machine die een citaat zoekt. Daarom letterlijke vragen als kop en een
   antwoord dat op zichzelf klopt, los van de rest van de pagina. */
.vragen{display:grid;gap:var(--stap);margin-top:var(--kop-tekst)}
@media (min-width:1180px){ .vragen{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--goot)} }
.vraag-blok{max-width:620px;border-top:1px solid var(--edge-soft);padding-top:20px}
.vraag-blok h3{margin:0 0 10px;font-size:16px;line-height:1.4;letter-spacing:.02em;
  font-weight:500;color:var(--chalk);text-transform:none}
.vraag-blok p{margin:0;color:var(--silver)}

/* ---------- 21. Het formulier, duidelijker ----------
   Het was een rij velden op een donkere grond, en je zag nauwelijks waar een
   veld begon. Dit is de pagina waar het geld binnenkomt, dus die mag zichzelf
   wel aanwijzen.

   Wat er anders is:
   · elk veld staat in een eigen vlak met een lijn eromheen, in plaats van
     alleen een streep eronder. Je ziet nu wát je aanraakt.
   · 56px hoog, ruim boven wat een duim nodig heeft.
   · een lichte linkerrand die oplicht zodra je in het veld staat, zodat je op
     een lang formulier ziet waar je bent.
   · verplichte velden dragen een teken en een uitleg bovenaan, in plaats van
     dat je het pas merkt bij het verzenden.
   · naam en telefoon staan naast elkaar op een breed scherm; de rest niet,
     want die hebben de volle breedte nodig. */
.formulier{gap:22px;max-width:660px}
@media (min-width:768px){
  .formulier{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .formulier > .veld:nth-child(-n+2){grid-column:auto}
  .formulier > .veld,.formulier > fieldset,.formulier > .verzend,.formulier > .form-uitleg{grid-column:1 / -1}
  .formulier > .veld.half{grid-column:auto}
}
.form-uitleg{margin:0 0 4px;font-size:13px;color:var(--slate);letter-spacing:0}
.form-uitleg b{color:var(--ash);font-weight:500}
.veld{gap:6px}
.veld input,.veld select,.veld textarea{
  background:var(--ink-700);
  border:1px solid var(--edge-soft);
  border-left:2px solid var(--edge-soft);
  min-height:56px;padding:14px 16px;
  transition:border-color .18s ease,background .18s ease;
}
.veld textarea{min-height:150px}
.veld input:hover,.veld select:hover,.veld textarea:hover{border-color:var(--edge)}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  background:var(--ink-600);border-color:var(--edge);border-left-color:var(--chalk);
}
.veld input::placeholder,.veld textarea::placeholder{color:#5E5C58}
.veldlabel .nodig{color:var(--slate);margin-left:6px;letter-spacing:0;font-weight:400}
.veld select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),
                   linear-gradient(135deg,var(--ash) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px;
}
.keuzerij label{min-height:48px;padding:0 18px;border-color:var(--edge-soft);transition:border-color .18s ease,color .18s ease}
.keuzerij label:hover{border-color:var(--edge);color:var(--chalk)}
.keuzerij input:checked + *,.keuzerij label:has(input:checked){border-color:var(--chalk);color:var(--chalk)}

/* ---------- 22. Uitlijning rechtgezet ----------
   Op de telefoon liep de onderkant uit elkaar: een gat van bijna twee
   schermhoogtes boven de voet, de 'by appointment'-regel die over twee regels
   brak met te veel letterspatiëring, en een rij voetlinks waarvan 'Enquire'
   als enige op een tweede regel viel.

   Drie oorzaken, alle drie opgeteld: de sectie had al zijn eigen padding,
   .afspraak zette daar 72px bovenop, en de voet nog eens 96px marge. */

/* 1. De afspraakregel: minder ruimte erboven, en op de telefoon minder
      letterspatiëring zodat hij niet ongelukkig breekt. */
.afspraak{margin-top:32px;padding-top:20px;letter-spacing:.12em;line-height:1.7}
@media (max-width:767px){
  .afspraak{font-size:11px;letter-spacing:.10em;margin-top:28px}
}

/* 2. De voet sluit aan op de sectie erboven in plaats van er ver vanaf te staan. */
.voet{margin-top:0;border-top:1px solid var(--edge-soft);padding-top:56px}
main > section:last-child{padding-bottom:var(--sectie)}

/* 3. De voetlinks: op de telefoon twee nette kolommen in plaats van een rij
      die willekeurig afbreekt. Op een breed scherm blijft het één rij. */
.voet-links{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:22px 0 0;padding:0}
@media (min-width:768px){ .voet-links{display:flex;flex-wrap:wrap;gap:22px} }
.voet-links a{border-bottom:1px solid var(--edge-soft);padding-bottom:3px;letter-spacing:.08em}

/* 4. Het contactblok links uitlijnen met de rest in plaats van rechts, want
      op één kolom hoort alles op dezelfde marge te beginnen. */
.voet-binnen{gap:36px}
.voet-contact{display:grid;gap:6px}
.voet-contact .rij{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:baseline}
.voet-contact .rij span{color:var(--slate)}
@media (min-width:768px){ .voet-binnen{align-items:start} .voet-contact{justify-items:start} }

/* ---------- 23. Keuzerondjes ----------
   GEVONDEN OP DE TELEFOON. De regel voor invoervelden (56px hoog, eigen vlak,
   linkerrand) gold ook voor radio's en vinkjes, want dat zijn ook <input>.
   Daardoor werd elke keuzeknop een blok van 56 bij 56 met een tweede blok
   erin. Nu zijn ze uitgezonderd en zien ze er weer uit als keuzeknoppen. */
.veld input[type="radio"],.veld input[type="checkbox"],
.keuzerij input[type="radio"],.keuzerij input[type="checkbox"]{
  width:16px;height:16px;min-height:0;padding:0;margin:0;border:0;background:none;
  appearance:auto;-webkit-appearance:auto;accent-color:var(--chalk);flex:0 0 auto;
}
.keuzerij label{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px}

/* ---------- 24. De About-pagina: half beeld, half tekst ----------
   Eén scherm, in tweeën gedeeld. Links haar eigen portret over de volle
   hoogte, rechts het verhaal. Op de telefoon staat het beeld boven de tekst,
   want naast elkaar wordt dan twee keer te smal.

   Dit is de enige pagina met een echte foto van haar. Daarom mag hij groot,
   en daarom staat er verder niets omheen. */
.duo{display:grid;grid-template-columns:1fr;gap:0;align-items:stretch;
     border-top:1px solid var(--edge-soft)}
@media (min-width:900px){ .duo{grid-template-columns:minmax(0,42%) minmax(0,58%)} }
.duo-beeld{position:relative;overflow:hidden;background:var(--ink-800);height:64vh}
/* Op een breed scherm blijft de foto staan terwijl de tekst eronderdoor
   scrollt. Dat lost meteen het snijprobleem op: het vlak is nu precies één
   schermhoogte in plaats van zo hoog als het verhaal, dus er wordt niet
   halverwege haar hoofd afgesneden. */
@media (min-width:900px){
  .duo{align-items:start}
  .duo-beeld{position:sticky;top:0;height:100vh}
}
.duo-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 28%;filter:grayscale(1) contrast(1.04)}
.duo-beeld figcaption{position:absolute;left:20px;bottom:16px;z-index:2;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-image-soft);
  text-shadow:0 1px 18px rgba(0,0,0,.8)}
.duo-tekst{padding:var(--sectie) var(--marge)}
@media (min-width:900px){ .duo-tekst{padding:var(--sectie) clamp(40px,5vw,72px)} }
.duo-tekst .kolom{max-width:56ch}

/* De tijdlijn naast het verhaal: jaartal en één regel, meer niet. */
.tijdlijn{list-style:none;margin:var(--sectie) 0 0;padding:0;display:grid;gap:0}
.tijdlijn li{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--edge-soft)}
.tijdlijn li:last-child{border-bottom:1px solid var(--edge-soft)}
.tijdlijn .jaar{font-size:12px;letter-spacing:.14em;font-weight:500;color:var(--slate);
  font-variant-numeric:tabular-nums}
.tijdlijn .wat{color:var(--silver);font-size:16px;line-height:1.55}
.tijdlijn .wat b{color:var(--chalk);font-weight:500}

/* ---------- 25. De About-pagina scherper ----------
   Het was netjes en daardoor braaf. Drie ingrepen:

   1. De kop mag groot. Op een pagina met precies één portret en vier alinea's
      is een kleine kop zonde van de ruimte.
   2. De tijdlijn is een stam met takken: een doorlopende verticale lijn met
      een merkteken per jaar, in plaats van een rij streepjes. Dat leest als
      één loopbaan en niet als een cv.
   3. De takken komen binnen terwijl je scrollt, van links, één voor één. Het
      is het enige bewegende element op de pagina en het duurt kort. */

.groot{
  font-size:clamp(30px,5.6vw,58px);line-height:1.02;letter-spacing:-.01em;
  text-transform:none;color:var(--chalk);text-wrap:balance;margin:0;
}

/* de stam */
.tijdlijn.stam{position:relative;margin-top:var(--sectie);padding-left:0}
.tijdlijn.stam::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(to bottom,transparent,var(--edge) 8%,var(--edge) 92%,transparent);
}
@media (min-width:768px){ .tijdlijn.stam::before{left:calc(120px + 7px)} }

.tijdlijn.stam li{
  position:relative;display:grid;grid-template-columns:34px 1fr;gap:0 18px;
  align-items:start;padding:0 0 var(--stap) 0;border:0;
}
@media (min-width:768px){
  .tijdlijn.stam li{grid-template-columns:120px 34px 1fr}
}
.tijdlijn.stam li:last-child{padding-bottom:0}

/* het merkteken op de stam */
.tijdlijn.stam li::before{
  content:"";position:absolute;left:3px;top:9px;width:9px;height:9px;
  background:var(--ink-900);border:1px solid var(--ash);border-radius:50%;
}
@media (min-width:768px){ .tijdlijn.stam li::before{left:calc(120px + 3px)} }
.tijdlijn.stam li:first-child::before{background:var(--chalk);border-color:var(--chalk)}

.tijdlijn.stam .jaar{
  grid-column:1;font-size:13px;letter-spacing:.16em;font-weight:500;color:var(--ash);
  font-variant-numeric:tabular-nums;padding-top:2px;
}
@media (max-width:767px){
  .tijdlijn.stam .jaar{grid-column:2;margin-bottom:8px}
  .tijdlijn.stam li{grid-template-columns:34px 1fr;grid-template-areas:"punt jaar" "punt wat"}
  .tijdlijn.stam .jaar{grid-area:jaar}
  .tijdlijn.stam .wat{grid-area:wat}
}
.tijdlijn.stam .wat{grid-column:3;max-width:58ch;color:var(--silver);font-size:16px;line-height:1.6}
@media (max-width:767px){ .tijdlijn.stam .wat{grid-column:2} }
.tijdlijn.stam .wat b{color:var(--chalk);font-weight:500}

/* de takken komen binnen bij het scrollen */
.tijdlijn.stam li{opacity:0;transform:translateX(-14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.tijdlijn.stam li.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .tijdlijn.stam li{opacity:1;transform:none;transition:none}
}

/* ---------- 26. Het formulier in drie stappen ----------
   Elie Saab, het grootste huis in het onderzoek, doet zijn afspraakaanvraag in
   vier schermen met een of twee vragen per keer. Reden: een couturier vraagt
   dingen die je moet bedenken, en een lijst van acht velden ineens leest als
   werk. Een vraag per keer leest als een gesprek.

   Zonder JavaScript staan alle drie de bladen gewoon open en werkt het als een
   normaal formulier. De knoppen verschijnen pas als het script draait. */
.stappen-form{display:block;max-width:660px}
.stap-blad{border:0;margin:0;padding:0;display:none}
.stap-blad.open{display:grid;gap:22px}
.stappen-form:not(.js) .stap-blad{display:grid;gap:22px}
.stappen-form:not(.js) .stap-knoppen .terug,
.stappen-form:not(.js) .verder{display:none}

.stap-vraag{
  padding:0;margin:0 0 4px;font-size:clamp(20px,3vw,26px);line-height:1.25;
  color:var(--chalk);letter-spacing:-.005em;
}
.stap-knoppen{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:6px}

/* voortgang: drie bolletjes en een teller */
.stap-balk{display:flex;align-items:center;gap:10px;margin-bottom:26px}
.stap-balk .bol{width:7px;height:7px;border-radius:50%;background:var(--edge);
  transition:background .3s ease,transform .3s ease}
.stap-balk .bol.aan{background:var(--chalk);transform:scale(1.25)}
.stap-balk .stap-tel{margin-left:8px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);font-variant-numeric:tabular-nums}

/* ---------- 27. De voet: glas ----------
   Gevraagd: laat de voet zich afscheiden, met glas en diepte. Uitgevoerd als
   een matglazen plaat die over de inkt ligt: een lichte laag met vervaging
   erachter, een oplichtende rand aan de bovenkant zodat je de plaat ziet
   beginnen, en een zachte schaduw eronder.

   Terughoudend gehouden, want de rest van de site heeft geen enkel vlak met
   diepte. Dit is de enige plek waar iets 'boven' de pagina ligt, en dat is
   precies waarom het werkt als afsluiting. */
.voet{
  position:relative;
  margin-top:var(--sectie);
  background:linear-gradient(180deg,rgba(244,243,240,.055),rgba(244,243,240,.022));
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-top:1px solid rgba(244,243,240,.14);
  box-shadow:0 -18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(244,243,240,.10);
  color:var(--ash);
}
/* de lichtstreep die de plaat aankondigt */
.voet::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(244,243,240,.42) 22%,rgba(244,243,240,.42) 78%,transparent);
}
.voet .woordmerk{color:var(--chalk)}
.voet a{color:var(--chalk);border-bottom-color:rgba(244,243,240,.22)}
.voet a:hover{border-bottom-color:var(--chalk)}
.voet-contact .rij span{color:var(--slate)}
@supports not (backdrop-filter: blur(4px)){
  .voet{background:#141417}
}

/* ---------- Credits op About ----------
   Geen jaartallen: de naam draagt de regel. Elke naam een eigen blok, met een
   dunne lijn ertussen zodat ze los van elkaar staan. */
.credits{list-style:none;margin:0;padding:0;max-width:820px}
.credits li{
  display:grid;gap:6px;padding:26px 0;border-top:1px solid var(--edge-soft);
}
.credits li:first-child{border-top:0;padding-top:0}
@media (min-width:768px){
  .credits li{grid-template-columns:minmax(200px,34%) 1fr;gap:32px;align-items:baseline}
}
.credits .wie{
  font-size:clamp(19px,2.4vw,26px);line-height:1.15;color:var(--chalk);
  letter-spacing:-.005em;text-wrap:balance;
}
.credits .wat{color:var(--silver);line-height:1.55}

/* ---------- Taalkeuze in de kopbalk ---------- */
.kopeind{display:flex;align-items:center;gap:22px}
.verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.taalkeuze select{
  appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:var(--on-image);padding:8px 16px 8px 0;
}
.kop-balk.vast .taalkeuze select{color:var(--ash)}
.taalkeuze{position:relative;display:inline-flex;align-items:center}
.taalkeuze::after{
  content:"";position:absolute;right:2px;top:50%;width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);pointer-events:none;opacity:.7;
}
.taalkeuze select:hover{color:var(--chalk)}
.taalkeuze select option{background:var(--ink-900);color:var(--chalk)}

/* De twee koppen boven de credits: klein en rustig, met lucht eronder. Ze
   stonden strak boven de eerste naam en leken daar bij te horen. */
.kop-klein{
  font-size:12px;letter-spacing:.20em;text-transform:uppercase;font-weight:500;
  color:var(--slate);margin:0 0 34px;line-height:1;
}
@media (min-width:768px){ .kop-klein{margin-bottom:44px} }

/* ---------- Aanraken op een telefoon ----------
   GEMETEN, NIET GESCHAT. Op 375 breed was het woordmerk 23px hoog, de menuknop
   34, de taalkeuze 34 en een voetlink 23. Een vinger raakt betrouwbaar vanaf
   44px; alles daaronder wordt missen en opnieuw proberen.

   De kopbalk krijgt hier minder padding terug, zodat hij niet groeit terwijl de
   knoppen erin juist groter worden. Netto blijft de balk even hoog. */
@media (max-width:767px), (pointer:coarse) {
  .kop-balk{padding-block:16px}
  .kop-balk .woordmerk,
  .menuknop,
  .taalkeuze select{min-height:44px;display:inline-flex;align-items:center}
  .menuknop{min-width:44px;justify-content:flex-end}
  .taalkeuze select{padding-top:0;padding-bottom:0}

  /* Voetlinks stonden op 23px onder elkaar. Meer lucht per regel. */
  .voet-links a{display:inline-flex;align-items:center;min-height:44px}

  /* Een link midden in een zin mag niet uit de regel springen. Padding op een
     inline element vergroot wel het raakvlak en niet de regelhoogte. */
  .cta-licht{padding-block:11px}
  /* De links in de artikelen komen uit markdown en hebben geen klasse. Gemeten
     op 375 breed waren ze 18 tot 25px hoog. Padding vergroot het raakvlak
     zonder de regelhoogte te veranderen, dus de zin blijft een zin. */
  .kolom.lang p a,.kolom.lang li a,.opsomming a{padding-block:11px}
  .cta-midden{min-height:44px}
  /* Op een telefoon breekt de zin met het adres, en dan hangt de knop
     ingesprongen halverwege. Op een eigen regel aan de linkerkant staat hij
     gelijk met de tekst erboven en eronder. */
  .kopieer{min-height:44px;font-size:12px;display:block;margin:12px 0 4px}
  .keuzerij label{display:inline-flex;align-items:center;min-height:44px}

  /* 11px is te klein om te lezen op een telefoon. */
  .afspraak,.stap-balk .stap-tel{font-size:12px}

  /* De voet was het laatste stuk waar alles nog 19 tot 23px hoog was: het
     woordmerk, het mailadres, het nummer, en de twee links naar de voorwaarden
     en de privacyverklaring. Juist daar tikt iemand met een duim. */
  .voet .woordmerk{display:inline-flex;align-items:center;min-height:44px}
  .voet-contact .rij a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- Journal ---------- */
.artikelbeeld{margin:0;height:44vh;min-height:260px;overflow:hidden;background:var(--ink-800)}
@media (min-width:768px){ .artikelbeeld{height:56vh} }
.artikelbeeld img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.15) contrast(1.02)}
.opsomming{margin:0 0 var(--kop-tekst);padding:0 0 0 20px;color:var(--silver)}
.opsomming li{margin-bottom:10px;line-height:1.65}
.kolom.lang h2{margin-top:var(--sectie);margin-bottom:var(--kop-tekst)}
.kolom.lang h3{margin-top:var(--stap);margin-bottom:12px;font-size:15px;letter-spacing:.08em;
  text-transform:none;color:var(--chalk);font-weight:400}

/* ---------- Journaal-overzicht ----------
   GEVONDEN BIJ HET NAKIJKEN. Dit stond eerst op .credits, maar daar is de li
   zelf al een raster van twee kolommen. De link erbinnen maakte er nog een
   raster van, en dan wordt de tekstkolom een derde van een derde: één woord
   breed. Hier is de li een gewoon blok en draagt de link het raster. */
.journaal{list-style:none;margin:0;padding:0}
.journaal li{border-top:1px solid var(--edge-soft)}
.journaal li:first-child{border-top:0}
.journaal a{
  display:grid;gap:10px;padding:28px 0;text-decoration:none;
}
@media (min-width:768px){
  /* Titel en tekst links, het beeld rechts. Dat vult de kant die anders leeg
     staat en maakt de lijst scanbaar in plaats van een muur tekst. */
  .journaal a{padding:32px 0;gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,300px);align-items:center}
}
@media (min-width:1080px){ .journaal a{grid-template-columns:minmax(0,1fr) minmax(0,360px)} }
.journaal .tekst{display:grid;gap:12px}
.journaal h2.wie{margin:0;text-transform:none;font-weight:400}
.journaal p.wat{margin:0}
.journaal .beeld{display:block;overflow:hidden;background:var(--ink-800);order:-1}
@media (min-width:768px){ .journaal .beeld{order:0} }
.journaal .beeld img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  filter:grayscale(.2) contrast(1.02);transition:filter .4s ease,transform .6s ease}
.journaal a:hover .beeld img{filter:grayscale(0) contrast(1.04);transform:scale(1.02)}
/* Eén kolom. Twee kolommen naast elkaar duwden de omschrijving in een strook
   van een paar woorden breed, en een titel van tien woorden leest niet als hij
   in vier regels valt. */
.journaal .wie{
  font-size:clamp(20px,2.8vw,27px);line-height:1.22;color:var(--chalk);
  letter-spacing:-.01em;text-wrap:balance;max-width:22ch;
}
@media (min-width:768px){ .journaal .wie{max-width:30ch} }
.journaal .wat{color:var(--slate);line-height:1.6;font-size:15px;max-width:62ch}
.journaal a:hover .wie{color:var(--on-image)}
.journaal a:hover .wat{color:var(--silver)}

/* ---------- Vragen in de voet ----------
   Waarvoor: de vragen staan op de procespagina, maar iemand die onderaan een
   artikel is beland zoekt ze daar niet. Dit is de kortste weg ernaartoe, en
   Google leest de vraagzinnen mee. */
.voet-vragen{display:grid;gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid var(--edge-soft)}
.voet-vragen .voet-kop{font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--slate)}
.voet-vragen a{color:var(--silver);text-decoration:none;font-size:14px;line-height:1.5;
  border-bottom:1px solid transparent;justify-self:start}
.voet-vragen a:hover{color:var(--chalk);border-bottom-color:var(--edge)}
.voet-vragen a.cta-licht{margin-top:6px;font-size:13px;color:var(--slate)}
/* Mobiel: drie uitgeschreven vragen onder elkaar lijnen rommelig uit in de voet.
   Daar blijft alleen het kopje FAQ over, dat naar dezelfde plek gaat. */
@media (max-width:767px), (pointer:coarse){
  .voet-vragen a{min-height:44px;display:inline-flex;align-items:center}
}
.voet-slot{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;row-gap:2px}
/* Scheidingstekens alleen waar de regel op een lijn past. Op een telefoon
   breekt hij toch, en dan blijft er een zwevend punt voor- of achteraan staan. */
@media (min-width:768px){
  .voet-slot > *:not(:first-child)::before{content:"\00B7";margin-right:9px;color:var(--slate)}
}
@media (max-width:767px){
  /* Jaartal op een eigen regel, de drie links daaronder naast elkaar. */
  .voet-slot{column-gap:14px;row-gap:6px}
  .voet-slot > span:first-child{flex:0 0 100%}
  /* De lege labelkolom kost hier ruimte die de regel nodig heeft. */
  .voet-contact .rij:last-child{display:block}
  .voet-contact .rij:last-child > span:first-child{display:none}
}

/* Alleen op smalle schermen weg, niet op pointer:coarse: een laptop met
   aanraakscherm meldt coarse en heeft de ruimte wel. Op mobiel staat FAQ
   als gewone link in het raster erboven. */
@media (max-width:767px){
  .voet-vragen{display:none}
}