/* @dc-shared */
/* AETHERION Worldwide site tokens + componentbibliotheek.
   Canonieke bron: website/dc/tokens.css. Dit blok wordt door scripts/sync-shared.mjs
   byte-identiek in elke artboard-helmet geplaatst; structure-lint bewaakt drift.

   KALIBRATIE 2026-09-01, tweede ronde. Eigenaarsbesluit, letterlijk: "I want
   everything to be the same not just the typeface. Layout, pictures everything."
   De site volgt nu het meetprofiel van de stijlreferentie
   (research/bailliegifford-structuur.json) op skelet, maatvoering, typeklasse,
   schrijfwijze, kaartpatroon en beeldgebruik.

   Wat daarmee bewust van de brief is overschreven, en terug te draaien:
   - Source Serif 4 is van de paginatekst af. De referentie voert een grotesk op
     elke maat, ook op 64px, en dat was de grootste reden dat de vorige versie
     niet op haar leek. Archivo is de dichtstbijzijnde vrij beschikbare grotesk.
   - De serif blijft wel het woordmerk dragen (--font-mark). Dat is precies wat
     de referentie zelf doet: serif logo, grotesk pagina.
   - Geen uppercase en geen letter-spacing meer in de paginatekst. De mono caps
     kicker is vervangen door de gemeten eyebrow: 16px bold, sentence case.
   - Er is geen mono meer: de referentie voert er nergens een, en de bronvoetnoot
     in mono viel op als een vreemd lettertype. Nu dezelfde grotesk, klein en gedempt.
   - Insight-kaarten dragen weer een 1px rand: de referentie doet dat, en de
     eigenaar heeft expliciet om die uitvoering gevraagd.
   - Een verzadigde volle-breedte accentband is toegevoegd. De referentie breekt
     haar pagina met zo'n vlak; het palet van de brief kende die kleur niet. */
:root{
  /* Vlakken */
  --bg-dark:#131d31;
  --bg-dark-2:#0e1626;
  --bg-0:#f5f6f9;
  --bg-1:#fbfcfe;
  --bg-2:#eceef4;
  --bg-3:#e1e5ee;
  /* Accentband: het enige verzadigde vlak op de pagina, het equivalent van het
     roze interruptorvlak van de referentie. Zandtint afgeleid van het goud. */
  --band-accent:#efe7d8;
  /* Inkt licht register */
  --text-0:#131d31;
  --text-1:#3a4763;
  --text-2:#66738f;
  --text-3:#8d97ad;
  /* Inkt donker register */
  --text-inv-0:#fbfcfe;
  --text-inv-2:#8d97ad;
  --hairline-dark:rgba(251,252,254,0.12);
  --hairline-light:#e1e5ee;
  /* Accenten: betekenis, geen decoratie */
  --gold:#b98a2e;
  --gold-dim:#8f6a20;
  --teal:#1f8d84;
  --danger:#c94f4f;
  /* Type: een grotesk voor de hele pagina, een serif alleen voor het woordmerk. */
  --font-display:'Archivo',Helvetica,Arial,sans-serif;
  --font-ui:'Archivo',Helvetica,Arial,sans-serif;
  --font-mark:'Cormorant Garamond',Georgia,serif;
  --radius-chip:6px;
  /* Ritme, gemeten: 96px tussen secties, 56px binnen banden, 120px marge */
  --rhythm:96px;
  --band-pad:56px;
  --marge:120px;
}
/* Typeschaal, exact het gemeten profiel: 64/1.2/400 monument, 40/1.1/400
   hoofdstuk, 24/1.5 lead, 24/1.2 kaartkop, 18/1.5 body, 16/600 eyebrow,
   14/600 meta. Een grotesk op 64px vraagt strakkere tracking dan een serif. */
.display-xl{font-family:var(--font-display);font-weight:400;font-size:64px;line-height:1.2;letter-spacing:-0.022em;margin:0}
.display-m{font-family:var(--font-display);font-weight:400;font-size:40px;line-height:1.1;letter-spacing:-0.016em;margin:0}
/* Vier herotypes, gemeten: de referentie varieert de kop per paginatype en
   dat is waar de vormvariatie vandaan komt. 64 voorpagina, 56 hoofdbinnenpagina,
   40 compact voor overzichten, 40 kaal voor lijstpagina's. */
.display-l{font-family:var(--font-display);font-weight:400;font-size:56px;line-height:1.15;letter-spacing:-0.02em;margin:0}
/* Hoofdstukkop op 40 binnen een tweekolomsblok: hun paired-chapters-patroon,
   waar h3 uitzonderlijk op 40px staat in plaats van 24. */
.h3-lg{font-family:var(--font-display);font-weight:400;font-size:40px;line-height:1.1;letter-spacing:-0.016em;margin:0}
.statement{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1.5;letter-spacing:-0.004em;margin:0}
.h3t{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-0.008em;margin:0}
.serif24{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.3;margin:0}
.intro{font-family:var(--font-ui);font-size:20px;line-height:1.55;margin:0}
.bodyt{font-family:var(--font-ui);font-size:18px;line-height:1.5;margin:0}
.body16{font-family:var(--font-ui);font-size:16px;line-height:1.6;margin:0}
/* Eyebrow: gemeten 16px bold, sentence case, geen tracking. .kicker is nu
   hetzelfde en blijft bestaan zodat de andere artboards meelopen. */
.eyebrow,.kicker{font-family:var(--font-ui);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.4}
.label{font-family:var(--font-ui);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none}
.meta{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--text-2)}
/* Er is geen mono meer op de site. De referentie voert er nergens een, en de
   bronvoetnoot in mono was het laatste restant van de oude huisstijl; hij viel
   op als een vreemd lettertype. Nu dezelfde grotesk, klein en gedempt. */
.mono-s{font-family:var(--font-ui);font-size:14px}
.mono-xs{font-family:var(--font-ui);font-size:13px}
/* Woordmerk: de serif uit het logo, wijd gespatieerd in kapitaal. Dit is de
   enige plek op de site waar uppercase en tracking nog voorkomen. */
.wordmark{font-family:var(--font-mark);font-weight:500;font-size:23px;letter-spacing:0.26em;text-transform:uppercase;color:var(--text-0);text-decoration:none;white-space:nowrap;line-height:1}
.wordmark-sub{font-family:var(--font-mark);font-weight:400;letter-spacing:0.26em;color:var(--text-2)}
[data-register="dark"] .wordmark{color:var(--text-inv-0)}
[data-register="dark"] .wordmark-sub{color:var(--text-inv-2)}
/* Knoppen: gemeten 48px hoog, rechthoekig, label 18 bold in sentence case */
.btn-gold{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;background:var(--gold);color:#ffffff;font-family:var(--font-ui);font-size:18px;font-weight:600;letter-spacing:0;text-transform:none;text-decoration:none;border:none;white-space:nowrap}
.btn-gold:hover{background:var(--gold-dim);color:#ffffff}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;background:transparent;border:1px solid var(--text-0);color:var(--text-0);font-family:var(--font-ui);font-size:18px;font-weight:600;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap}
.btn-ghost:hover{background:rgba(19,29,49,0.06);color:var(--text-0)}
[data-register="dark"] .btn-ghost{border-color:var(--text-inv-0);color:var(--text-inv-0)}
[data-register="dark"] .btn-ghost:hover{background:rgba(251,252,254,0.08);color:var(--text-inv-0)}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}
/* Tekstlink: gemeten 18px bold, geen onderstreping, inkt met gouden pijl */
.link-arrow{font-family:var(--font-ui);font-size:18px;font-weight:600;letter-spacing:0;color:var(--text-0);text-decoration:none}
.link-arrow:hover{color:var(--gold)}
[data-register="dark"] .link-arrow{color:var(--text-inv-0)}
[data-register="dark"] .link-arrow:hover{color:var(--gold)}
.arrow{color:var(--gold)}
/* ISO-chip: het enige ornament */
.chip-iso{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:14px;font-weight:600;padding:7px 13px;border:1px solid var(--gold);border-radius:var(--radius-chip);color:var(--gold-dim);text-decoration:none;letter-spacing:0}
a.chip-iso:hover{background:var(--gold);color:#ffffff}
/* Statblok: cijfers in de grotesk, niet meer in mono. Alleen de bronvoetnoot
   eronder blijft mono; die kleine annotatie maakt het cijfer geloofwaardig. */
.stat-num{font-family:var(--font-display);font-size:88px;font-weight:400;line-height:1;letter-spacing:-0.03em;color:var(--gold);font-variant-numeric:tabular-nums}
.stat-unit{font-family:var(--font-display);font-size:36px;font-weight:400;color:var(--text-inv-0);letter-spacing:-0.02em}
.stat-label{font-family:var(--font-ui);font-size:18px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-inv-0);line-height:1.5}
/* Bronvoetnoot: nooit weglaten bij een cijfer */
.source-note{font-family:var(--font-ui);font-size:14px;font-weight:400;color:var(--text-2);line-height:1.5}
[data-register="dark"] .source-note{color:var(--text-inv-2)}
/* Callout-kolom, gemeten: geen kaart en geen omdoos, maar wel een ZWARE regel
   bovenaan: 1.6px in volle inkt, niet in haarlijngrijs. Dat is de meest
   zichtbare lijn op de referentie en het middel waarmee zij een kolommenrij
   markeren. Bij ons 2px in navy. */
.card-pillar{background:transparent;border:none;border-top:2px solid var(--text-0);padding:20px 0 0}
[data-register="dark"] .card-pillar{border-top-color:var(--text-inv-0)}
/* Verticale scheiding binnen een tweekolomsblok: gemeten 0.8px in volle inkt op
   de linkerrand van een kolom. Hun enige verticale lijn. */
.rule-left{border-left:1px solid var(--text-0);padding-left:32px}
[data-register="dark"] .rule-left{border-left-color:var(--hairline-dark)}
.card-pillar-title{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:-0.008em;color:var(--text-0);margin:0}
/* Insight-kaart, gemeten: witte kaart met 1px rand, padding 16/16/24, beeld boven */
.card-insight{background:var(--bg-1);border:1px solid var(--bg-3);border-radius:0;padding:16px 16px 24px;text-decoration:none;display:block}
.card-insight:hover{border-color:var(--gold)}
/* Beeldvlak. Tot de beeldproductie is goedgekeurd staat hier een leeg vlak met
   het onderschrift van de opname, op de gemeten maat. Nooit stock. */
.img-slot{background:var(--bg-3);display:flex;align-items:flex-end;padding:16px;overflow:hidden}
.img-slot-label{font-family:var(--font-ui);font-size:12px;color:var(--text-2);letter-spacing:0.02em;line-height:1.5}
.img-ph{background:var(--bg-3);display:flex;align-items:flex-end;padding:16px}
.img-ph-caption{font-family:var(--font-ui);font-size:12px;color:var(--text-2);letter-spacing:0.02em}
/* Haarlijnen */
.hairline{height:1px;background:var(--hairline-light);border:none;margin:0}
[data-register="dark"] .hairline{background:var(--hairline-dark)}
/* Tijdpad */
.tl-num{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--gold);letter-spacing:0}
.tl-node{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.tl-node-long-pole{width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--teal);flex:none}
/* Formulierveld */
.field-label{font-family:var(--font-ui);font-size:16px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-1)}
.field-input{height:52px;display:flex;align-items:center;background:var(--bg-1);border:1px solid var(--bg-3);border-radius:0;padding:0 16px;font-family:var(--font-ui);font-size:18px;color:var(--text-3)}
.field-area{min-height:120px;display:block;background:var(--bg-1);border:1px solid var(--bg-3);border-radius:0;padding:14px 16px;font-family:var(--font-ui);font-size:18px;line-height:1.5;color:var(--text-3)}
/* Navigatie: gemeten 18px, weight 400, sentence case, geen tracking */
.navlink{font-family:var(--font-ui);font-size:18px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-0);text-decoration:none}
.navlink:hover{color:var(--gold)}
[data-register="dark"] .navlink{color:var(--text-inv-0)}
.footlink{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--text-inv-0);text-decoration:none;line-height:2}
.footlink:hover{color:var(--gold)}
/* Container: gemeten 1200 content binnen 1440, marges 120 */
.container{width:min(1200px,calc(100% - 240px));margin:0 auto}
/* Layoutrasters als fracties: op 1200 leveren ze exact de gemeten maten
   (3x373, 4x270, 2x580, 620/580, 440/680, 200/920 bij gutters 40 dan wel 80),
   en op elke andere breedte klopt de pagina nog steeds. Bewust geen media
   queries en geen vw: een artboard is een vast vlak van 1440 en die meten het
   browservenster. Breekpunten komen in de productiefase (PRD paragraaf 3). */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.split-hero{display:grid;grid-template-columns:620fr 580fr;gap:0}
.split-map{display:grid;grid-template-columns:440fr 680fr;gap:80px;align-items:center}
.split-media{display:grid;grid-template-columns:680fr 440fr;gap:80px;align-items:center}
.split-house{display:grid;grid-template-columns:200fr 920fr;gap:80px;align-items:start}
/* Gemeten blokpatronen van de binnenpagina's. Fracties tellen met hun gutter
   op tot 1200, zodat ze op het raster exact de gemeten maten opleveren. */
.split-feature{display:grid;grid-template-columns:600fr 500fr;gap:100px;align-items:center}
.split-square{display:grid;grid-template-columns:575fr 500fr;gap:125px;align-items:center}
.split-close{display:grid;grid-template-columns:550fr 580fr;gap:70px;align-items:center}
.pair{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 40px}
.split-row{display:flex;align-items:flex-end;justify-content:space-between;gap:64px;flex-wrap:wrap}
.split-cta{display:flex;align-items:center;justify-content:space-between;gap:64px;flex-wrap:wrap}
/* Sectieritme: gemeten 96px tussen secties, banden 56px binnen */
.sec{padding:var(--rhythm) 0 0}
.band{padding:var(--band-pad) 0}
/* Scroll-cue */
@keyframes cuePulse{0%,100%{opacity:0.35}50%{opacity:1}}
.scroll-cue{width:1px;height:40px;background:var(--gold);animation:cuePulse 2.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.scroll-cue{animation:none}}

html{background:var(--bg-1)}
body{margin:0;padding:0;background:var(--bg-1);color:var(--text-0);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
main{max-width:none}
@media (max-width:1320px){
  .container{width:calc(100% - 96px)}
  .display-xl{font-size:clamp(38px,4.6vw,64px)}
  .display-l{font-size:clamp(34px,4vw,56px)}
  .display-m{font-size:clamp(28px,3vw,40px)}
  .h3-lg{font-size:clamp(26px,2.8vw,40px)}
  .statement{font-size:clamp(20px,1.9vw,24px)}
  .stat-num{font-size:clamp(52px,6.4vw,88px)}
  header .container{gap:24px}
  header nav{gap:22px}
  .navlink{font-size:16px}
}
@media (max-width:1080px){
  header nav .navlink{display:none}
  .split-hero,.split-map,.split-media,.split-house,.split-feature,.split-square,.split-close{grid-template-columns:1fr;gap:40px}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .pair{gap:48px 40px}
}
@media (max-width:720px){
  .container{width:calc(100% - 40px)}
  .wordmark{font-size:13px !important;letter-spacing:0.1em !important;white-space:normal !important}
  header{height:auto !important;padding:16px 0}
  header .container{flex-wrap:wrap;gap:14px}
  .btn-gold,.btn-ghost{font-size:16px;padding:0 18px}
  .grid-2,.grid-3,.grid-4,.pair{grid-template-columns:1fr}
  .split-row,.split-cta{gap:28px}
  [style*="width:min("]{width:calc(100% - 40px) !important}
  section[data-section="timeline"] [style*="repeat(5"]{grid-template-columns:1fr !important;gap:28px !important}
}
@media print{header,.btn-gold,.btn-ghost{display:none}}