/* =============================================================
   ESTORA — Variant C · Structuur / Blauwdruk (Zwitsers grid)
   Typografie: Space Grotesk (display) + IBM Plex Mono (metadata),
   lokaal zelf-gehost — geen externe font-CDN (AVG-vriendelijk, offline)
   Palet: papierwit #FBFBF9 · inkt #111111 · inkt-blauw #1E2A4A
   ============================================================= */

/* ---- Zelf-gehoste fonts (woff2, latin-subset) ----------------------- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-grotesk-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/space-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}

/* ---- Reset / basis -------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* anker-doelen niet onder de sticky header laten landen */
  scroll-padding-top: calc(var(--header-h) + 1.25rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  /* Lining-cijfers in de lopende tekst zodat een getal als "26 woningen" of
     "ca. 4.200 m²" op dezelfde hoogte staat als de kapitalen eromheen. */
  font-variant-numeric: lining-nums;
  /* Vangnet: een lang display-woord of brede SVG mag nooit de hele pagina
     horizontaal laten scrollen. 'clip' breekt — anders dan overflow-x:hidden —
     de sticky header niet. */
  overflow-x: clip;
}

/* Lange Nederlandse samenstellingen ("Projectontwikkeling", "Herontwikkeling")
   mogen op smal scherm afbreken i.p.v. de regel uit het grid te duwen.
   Display-regels breken alléén in geval van nood (geen koppelteken: een
   afgebroken kop met streepje oogt slordig); de noodbreuk is het vangnet,
   niet de norm. text-wrap:balance verdeelt de korte koppen over hun regels
   i.p.v. één wees onderaan. */
.display,
.hero h1,
.sec-head__title,
.discipline__name,
.project__name,
.detail-hero h1,
.pager .pname {
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---- Custom properties --------------------------------------------- */
:root {
  /* Palet */
  --paper: #FBFBF9;
  --paper-2: #F4F4F0;
  --ink: #111111;
  --ink-70: #4a4a48;
  /* Gedempt metadata-grijs. Eerder #828280 = 3.72:1 op papierwit: dat haalt
     de WCAG AA-drempel (4.5:1) niet voor de kleine mono-tekst die er werkelijk
     in staat — metatabel-labels (dt), footer-copyright, sectielabels, pager-
     richting. #727270 tilt het naar 4.65:1 (AA) zonder de hiërarchie te slopen:
     het blijft duidelijk lichter dan --ink-70 (8.6:1, de body-demping) en dus
     herkenbaar als de stilste tekst-tier. Puur decoratieve tokens
     (aria-hidden coördinaten, nav-nummers, "·"-scheiders) profiteren mee. */
  --ink-45: #727270;
  --blue: #1E2A4A;
  --blue-tint: #2c3a63;
  --hair: rgba(17, 17, 17, 0.16);
  --hair-soft: rgba(17, 17, 17, 0.08);
  --grid-line: rgba(17, 17, 17, 0.045);

  /* Typografie */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --font-body: "Space Grotesk", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", ui-monospace, monospace;

  --fs-body: clamp(0.98rem, 0.92rem + 0.28vw, 1.12rem);
  --fs-mono: clamp(0.68rem, 0.64rem + 0.16vw, 0.78rem);

  /* Maatvoering / grid */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1440px;
  --header-h: 68px;

  /* Ritme — één baseline-eenheid, alle verticale tussenruimten zijn er
     veelvouden van. Een blauwdruk meet; de witruimte hoort dus net zo goed
     op een maatlat te liggen als de lijnen. */
  --baseline: 1.5rem;            /* 24px — de regelhoogte van de body */
  --space-2xs: calc(var(--baseline) * 0.375);  /* 0.5625rem ≈  9px */
  --space-xs:  calc(var(--baseline) * 0.5);     /* 0.75rem   = 12px */
  --space-sm:  calc(var(--baseline) * 0.75);    /* 1.125rem  = 18px */
  --space-md:  var(--baseline);                 /* 1.5rem    = 24px */
  --space-lg:  calc(var(--baseline) * 1.5);     /* 2.25rem   = 36px */
  --space-xl:  calc(var(--baseline) * 2);       /* 3rem      = 48px */

  /* Sectieademing: zelfde fluïde curve, maar de twee eindpunten zijn nu
     veelvouden van de baseline (3× → 5.333× = 4.5rem → 8rem) zodat de grote
     sprongen óók op de maatlat liggen i.p.v. een los gekozen getal. */
  --section-pad: clamp(calc(var(--baseline) * 3), 9vw, calc(var(--baseline) * 5.333));

  /* Kolommen van het projectregister (desktop) */
  --proj-cols: 3.5rem minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 5rem 2.2rem;
}

/* ---- Layout-omgeving ------------------------------------------------ */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Genummerde sectie. Tussen twee haarlijnen is de optische balans niet
   symmetrisch: het genummerde kopje bovenaan zit anders tegen de bovenrand
   dan de witruimte onder de laatste regel. Net iets méér lucht boven het
   nummer (≈+0.75 baseline) laat de kop ademen tegen de rule, zonder dat de
   sectie topzwaar wordt. */
.section {
  position: relative;
  padding-top: calc(var(--section-pad) + var(--space-sm));
  padding-bottom: var(--section-pad);
  border-top: 1px solid var(--hair);
}

.section:first-of-type {
  border-top: none;
}

/* ---- Typografische helpers ----------------------------------------- */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  font-weight: 400;
  /* Tabulaire cijfers: ook wanneer het mono-font niet laadt en een
     proportionele fallback inspringt, blijven jaartallen/coördinaten in
     hun kolom uitlijnen — een blauwdruk mag niet schuiven. */
  font-variant-numeric: tabular-nums lining-nums;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
  font-weight: 400;
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0;
  margin: 0;
}

/* Lopende tekst: nette afbreking + zachte rag.
   - hyphens:auto breekt lange NL-samenstellingen ("kortetermijnwinst",
     "betonstructuur") op lettergreepgrens mét koppelteken, i.p.v. de harde,
     koppelteken-loze break-word. lang="nl" op <html> levert het woordenboek.
   - De afbreek-drempels houden korte stompjes ("de-", "-en") van de regel:
     min. 4 tekens vóór, 3 erna, en nooit meer dan 2 afgebroken regels op rij.
   - text-wrap:pretty voorkomt een eenzaam laatste woord (wees) onder de
     alinea en strakt de rechter-rag aan. */
.philo__body p,
.philo__lead,
.discipline__text,
.detail-prose p,
.project__kort,
.principe__tekst,
.meaning p,
.sec-head__note,
.hero__intro,
.footer__oneliner {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 4 3;
  hyphenate-limit-lines: 2;
  text-wrap: pretty;
}

/* Korte display-statements lezen als één beeld; balanceer de regels en houd
   ze koppelteken-vrij. */
.hero__tagline,
.philo__lead,
.aanpak__slot,
.footer__oneliner,
.footer__invite {
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
}

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--hair);
  background-color: color-mix(in srgb, var(--paper) 94%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  /* Volle hoogte van de header → comfortabele raakzone (de baseline-uitlijning
     van merk + coördinaat blijft visueel ongewijzigd). */
  min-height: var(--header-h);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.brand__mark {
  display: inline-block;
  width: 16px;
  height: 16px;
  align-self: center;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNNTAgMTJMODggNTBMNTAgODhMMTIgNTBaIiBmaWxsPSJub25lIiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxsaW5lIHgxPSIzMCIgeTE9IjUwIiB4Mj0iNzAiIHkyPSI1MCIgc3Ryb2tlPSIjMUUyQTRBIiBzdHJva2Utd2lkdGg9IjgiLz48L3N2Zz4=") center / contain no-repeat;
}

.brand__coord {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--ink-45);
  text-transform: none;
  align-self: center;
}

/* Navigatie */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
}

.site-nav a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.2s ease;
}

.site-nav a .nr {
  color: var(--ink-45);
  margin-right: 0.45em;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.1rem;
  height: 1px;
  background: var(--blue);
  transition: right 0.28s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.is-active,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.is-active::after,
.site-nav a[aria-current="page"]::after {
  right: 0;
}

.site-nav a.is-active .nr,
.site-nav a[aria-current="page"] .nr {
  color: var(--blue);
}

/* Mobiele nav-toggle — minimaal 44px raakbaar (WCAG 2.5.5). */
.nav-toggle {
  display: none;
  appearance: none;
  background: none;
  border: 1px solid var(--hair);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  border-bottom: 1px solid var(--hair);
}

/* Statische blok-hero in de normale flow (de 3D-pin is verwijderd). */
.hero__inner {
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem);
}
.hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  width: 100%;
}
.hero__text {
  position: relative;
  z-index: 2;
}
@media (min-width: 900px) {
  .hero__layout {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2rem, 4vw, 4rem);
    height: 100%;
    align-content: center;
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  /* Bovenruimte royaal (de hero mag ademen onder de sticky header). De
     onderruimte is bewust kleiner: direct daaronder begint sectie 01 met
     z'n eigen ruime top-padding plus de haarlijn. Eerder stapelden hero-
     bodem (tot 5rem) én sectie-top tot ±13rem dood gat; nu lezen ze samen
     als één bedoeld interval. */
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(1.75rem, 4vw, 3rem);
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  align-items: baseline;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--hair-soft);
}

/* De label is de aankondiging; de mono-tokens zijn stille meetgegevens. */
.hero__eyebrow .label {
  color: var(--ink);
}

.hero__eyebrow .mono {
  color: var(--ink-45);
}

/* coördinaat alleen op breder scherm, rechts uitgelijnd → echte datum-regel */
.hero__eyebrow-coord {
  display: none;
}

@media (min-width: 640px) {
  .hero__eyebrow-coord {
    display: inline;
    margin-left: auto;
  }
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.2rem + 4.6vw, 5.2rem);
  line-height: 1.02;
  letter-spacing: 0;
  margin: 0;
  max-width: 19ch;
  text-wrap: balance;
}

.hero h1 .accent {
  color: var(--blue);
}

.hero__lower {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}

/* Op breder scherm: payoff links, lopende tekst rechts — een echte grid-
   verdeling i.p.v. een losse stapel. De papier-regel scheidt H1 van onderbouw. */
@media (min-width: 760px) {
  .hero__lower {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem);
    padding-top: clamp(1.75rem, 4vw, 2.75rem);
    border-top: 1px solid var(--hair);
  }
}

/* De payoff is een statement, geen aanloop naar de body. */
.hero__tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 0.9rem + 1.2vw, 1.6rem);
  letter-spacing: 0;
  line-height: 1.04;
  color: var(--ink);
  margin: 0;
}

.hero__intro {
  max-width: 46ch;
  color: var(--ink-70);
  margin: 0;
}


/* ---- Hero-beeld: gekaderde architectuurfoto (vervangt de 3D-stage) ---- */
.hero__figure { margin: 0; }
.hero__figure img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  max-height: min(76vh, 720px);
}
@media (max-width: 759.98px) {
  .hero__figure img { aspect-ratio: 4 / 3; }
}

/* Hero-tekst compacter in de gepinde 3D-hero, zodat de kop niet onder de
   sticky header valt en de tekstkolom binnen 100vh past. */
@media (min-width: 900px) {
  .hero__text h1 { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.4rem); max-width: 16ch; }
  .hero__text .hero__lower { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); }
}

.corner-ticks::before,
.corner-ticks::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink);
  opacity: 0.5;
}

.corner-ticks::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.corner-ticks::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}

/* ===================================================================
   SECTIE-KOP (genummerd)
   =================================================================== */
.sec-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.sec-head__nr {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--blue);
}

.sec-head__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.6rem);
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0;
  max-width: 22ch;
}

/* Stille duiding onder een sectietitel (bv. het register): nuchter, body-
   gedempt, smal — een onderschrift, geen tweede kop. */
.sec-head__note {
  margin: 0;
  max-width: 48ch;
  color: var(--ink-70);
  font-size: 0.95rem;
}

/* ===================================================================
   FILOSOFIE
   =================================================================== */
.philo {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 5vw, 3rem);
}

/* Op breder scherm: stelling links, uitwerking rechts — leesvolgorde
   blijft links-naar-rechts en sluit aan op de genummerde kop erboven.
   De verdeling treedt al in op tablet-portret (≈iPad, 768px): de stelling
   krijgt daar een smallere maat zodat de body niet tot één kolom verschraalt.
   Vanaf 1024px verschuift de balans naar gelijkwaardiger kolommen. */
@media (min-width: 700px) {
  .philo {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .philo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

.philo__lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.2rem);
  line-height: 1.18;
  letter-spacing: 0;
  margin: 0;
  max-width: 18ch;
}

.philo__body {
  max-width: 54ch;
  color: var(--ink-70);
}

.philo__body p {
  margin: 0;
}

.meaning {
  margin-top: clamp(var(--space-md), 4vw, var(--space-lg));
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hair-soft);
  display: flex;
  gap: 1rem;
  align-items: baseline;
  max-width: 54ch;
}

.meaning .label {
  white-space: nowrap;
}

.meaning p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-70);
}

/* ===================================================================
   DISCIPLINES — register-stijl, uitklappend
   =================================================================== */
.disciplines {
  border-top: 1px solid var(--hair);
}

.discipline {
  border-bottom: 1px solid var(--hair);
}

.discipline__row {
  display: grid;
  grid-template-columns: clamp(3rem, 6vw, 5rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  padding-block: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.discipline__nr {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--blue);
  padding-top: 0.35rem;
}

.discipline__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  /* row-gap los van de algemene gap: de these (discipline__lead) hoort dicht
     onder de naam te staan en de uitleg iets ruimer eronder. Per-rij gestuurd
     via marges op de these zelf (zie hieronder), dus de grid-gap is hier de
     ruimte tussen naam-blok en uitleg; op breed scherm regelt het grid het. */
}

.discipline__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
}

/* De these van de discipline: de scherpe regel die elke discipline samenvat
   ("Niet tot aan de oplevering, maar voorbij", "Langjarig eigenaarschap",
   "Kapitaal dat blijft"). Stond eerder als eerste zin verstopt in de gedempte
   body; daar pikt een scanner hem niet op. Nu een eigen leestier: display-
   familie, in inkt (niet gedempt), tussen de naam en de uitleg in — zo leest
   wie alleen koppen scant naast het categorie-woord ook meteen wat Estora
   in die discipline anders doet. Spiegelt de philo__lead/__body-verdeling. */
.discipline__lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.35rem);
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  max-width: 28ch;
  text-wrap: balance;
  /* De these hoort bij de naam erboven: trek hem dichter naar de kop dan de
     algemene grid-gap (die de ruimte naar de uitleg eronder bepaalt). Zo leest
     "Projectontwikkeling — Niet tot aan de oplevering, maar voorbij" als één
     eenheid bij het scannen, met de uitleg als losser blok daaronder. */
  margin-top: calc(var(--space-sm) - clamp(1.5rem, 4vw, 2.5rem));
}

.discipline__text {
  max-width: 50ch;
  color: var(--ink-70);
  margin: 0;
}

.discipline__visual {
  border: 1px solid var(--hair);
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--blue) 5%, var(--paper)),
      var(--paper));
  position: relative;
  overflow: hidden;
  /* Decoratieve (aria-hidden via role=img-broer) plattegrond-/gevel-SVG's:
     layout/paint overslaan tot ze in beeld komen. Het 'auto'-trefwoord laat
     de browser de werkelijke maat onthouden (de hoogte wisselt per breekpunt
     tussen aspect-ratio en min-height), zodat overslaan geen shift geeft. */
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

.discipline__visual svg {
  width: 100%;
  height: 100%;
}

/* Vanaf tablet-portret: tekst links/midden, visual rechts. Treedt al op bij
   760px zodat de 4:3-tekening op een iPad niet beeldvullend boven de tekst
   komt te liggen; de tekstkolom houdt voorrang, de visual is de bijfiguur. */
@media (min-width: 760px) {
  .discipline__main {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: stretch;
  }
  .discipline__name {
    grid-column: 1;
  }
  .discipline__lead {
    grid-column: 1;
  }
  .discipline__text {
    grid-column: 1;
    align-self: end;
  }
  .discipline__visual {
    grid-column: 2;
    grid-row: 1 / span 3;
    aspect-ratio: auto;
    /* groeit mee met de tekstkolom i.p.v. een vaste hoogte: zo blijft de
       beeld/tekst-verhouding over de hele tabletband in proportie */
    min-height: clamp(200px, 28vw, 300px);
  }
}

/* Vanaf desktop kantelt de balans terug naar tekst-met-meer-lucht. */
@media (min-width: 1024px) {
  .discipline__main {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
  .discipline__visual {
    min-height: 240px;
  }
}

/* ===================================================================
   PROJECTEN — index/register
   =================================================================== */
.register {
  border-top: 1px solid var(--ink);
}

.register__head {
  display: none;
}

@media (min-width: 880px) {
  .register__head {
    display: grid;
    grid-template-columns: var(--proj-cols);
    gap: 1.5rem;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--hair);
  }
  .register__head span {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-45);
  }
}

.project {
  display: block;
  border-bottom: 1px solid var(--hair);
  position: relative;
  transition: background-color 0.25s ease;
}

.project:hover,
.project:focus-within {
  background-color: color-mix(in srgb, var(--blue) 4%, var(--paper));
}

.project__link {
  display: block;
  padding-block: clamp(1.4rem, 3.2vw, 2.2rem);
}

/* Terugkeer vanaf een projectpagina: de back-link landt op de exacte rij
   (#project-0n). Een korte, ingetogen inkt-blauwe markering aan de
   register-rand laat de bezoeker de landingsplek zien — register-eigen,
   geen knipperende highlight. */
.project:target {
  background-color: color-mix(in srgb, var(--blue) 4%, var(--paper));
}

.project:target::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--blue);
  animation: project-mark 2.4s ease forwards;
}

@keyframes project-mark {
  0%,
  70% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Geen fade-uit: markering blijft staan, geen beweging. */
  .project:target::before { animation: none; }
}

.project__link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -4px;
}

.project__meta {
  display: grid;
  grid-template-columns: var(--proj-cols);
  gap: 0.4rem 1.5rem;
  align-items: baseline;
}

.project__nr {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--blue);
  letter-spacing: 0.08em;
}

.project__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--ink);
}

.project__plaats,
.project__type,
.project__jaar {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-70);
  font-variant-numeric: tabular-nums lining-nums;
}

.project__arrow {
  font-family: var(--font-mono);
  color: var(--blue);
  justify-self: end;
  transition: transform 0.28s ease;
}

.project:hover .project__arrow,
.project:focus-within .project__arrow {
  transform: translateX(4px);
}

.project__kort {
  grid-column: 1 / -1;
  max-width: 60ch;
  color: var(--ink-70);
  font-size: 0.95rem;
  margin-top: 0.85rem;
}

/* Rustige mono-noot onder de register-paginakop (representatief werk). */
.register__note {
  color: var(--ink-45);
  margin: 0.85rem 0 0;
}

/* "In samenwerking met" — stille, genoemde-partners-rij (over.html). Geen
   logo-grid: tekst op een haarlijn, in de mono-stem. */
.partners__row {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.5rem;
  color: var(--ink-70);
}
.partners__row li { margin: 0; }

/* Discipline-annotatie onder elke registerrij — volle breedte (deelt het
   grid-gedrag van .project__kort, dus raakt --proj-cols/areas niet), in de
   blauwdruk-mono-stem; geen pill/badge. */
.project__disc {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-top: 0.5rem;
}
@media (max-width: 879px) { .project__disc { grid-column: 2 / -1; } }

/* Stille slotzin onder het homepage-register (propositie i.p.v. losse link). */
.register__close {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

/* Editorial fotoblok (gekaderd, mono-onderschrift) — gedeeld door over.html en
   de homepage-filosofie. Echt, ingetogen beeld; koel van toon (lichte grade). */
.editorial-figure { margin: clamp(2rem, 5vw, 3.5rem) 0 0; }
.editorial-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hair);
  background: var(--paper-2);
  filter: saturate(0.92) contrast(1.02);
}
.editorial-figure figcaption {
  display: flex; justify-content: space-between;
  gap: var(--space-md); flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.editorial-figure figcaption .mono { color: var(--ink-45); }
.editorial-figure__cap { color: var(--ink-70); max-width: 52ch; }

/* Bandvariant: cinematische uitsnede die het groen vooropzet (mist langs de
   bovenrand). object-position laag → de groene heuvels domineren. */
.editorial-figure--band img {
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center;
}

/* Portretvariant (staand beeld op ingetogen maat) — bv. de figuur bij het raam. */
.editorial-figure--portrait { max-width: min(100%, 440px); }

/* Hero (<760px): daar maakt .hero__lower geen scheiding via padding/border —
   die zit in de ≥760px-grid. Geef de payoff dan lucht t.o.v. de H1, anders
   plakt "Vastgoed met overtuiging." als 5e koplijn tegen de H1. */
@media (max-width: 759.98px) {
  .hero__lower { margin-top: clamp(1.5rem, 6vw, 2.25rem); }
}

/* Forced-colors (Windows High Contrast): borg de structuur-haarlijnen die het
   register-ritme dragen — in deze modus vervangt het systeempalet rgba-randen. */
@media (forced-colors: active) {
  .section, .register, .project, .discipline, .site-footer,
  .metatable, .pager, .group-head { border-color: CanvasText; }
  .site-header[data-scrolled="true"] { border-bottom-color: CanvasText; }
  :focus-visible { outline-color: Highlight; }
}

/* Project-visual: dunne strook met tekening.
   content-visibility: de inline-SVG-tekeningen zijn puur decoratief
   (aria-hidden) en staan ver onder de vouw. We slaan layout/paint over
   tot de strook bijna in beeld komt; contain-intrinsic-size houdt de
   gereserveerde hoogte gelijk aan de werkelijke (clamp 80–132px), zodat
   het overslaan géén layout-shift kan veroorzaken. */
.project__strip {
  margin-top: 1.1rem;
  border: 1px solid var(--hair);
  height: clamp(80px, 14vw, 132px);
  width: 100%;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto clamp(80px, 14vw, 132px);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--blue) 5%, var(--paper)),
      var(--paper));
}

.project__strip svg {
  width: 100%;
  height: 100%;
}

/* Mobiel + tabletband (<880px): register als gestapelde kaartjes zonder schaduw.
   Eronder loopt een meta-regel: plaats · type · jaar. De drie mono-waarden
   krijgen elk een eigen kolom op die regel, zodat ze naast elkáár staan met
   een punt ertussen. (Eerder deelden ze één grid-cel en lagen ze óver elkaar
   — "2023Transformatie".) De waarden mogen krimpen maar nooit overlappen;
   "kort" en de strip lopen daaronder over de volle breedte. */
@media (max-width: 879px) {
  .project__meta {
    grid-template-columns:
      3rem
      minmax(0, auto) minmax(0, auto) minmax(0, 1fr)
      1.4rem;
    grid-template-areas:
      "nr   name   name  name  arrow"
      "nr   plaats type  jaar  arrow";
    column-gap: 0;
    row-gap: 0.55rem;
    align-items: baseline;
  }
  .project__nr { grid-area: nr; align-self: start; padding-top: 0.15rem; }
  .project__name {
    grid-area: name;
    margin-bottom: 0.15rem;
  }
  .project__arrow { grid-area: arrow; align-self: center; }

  .project__plaats { grid-area: plaats; }
  .project__type   { grid-area: type; }
  .project__jaar   { grid-area: jaar; }

  /* Punt-scheiders tússen de waarden: vóór type en jaar, dus nooit een los
     streepje aan het eind. min-width:0 laat lange waarden binnen hun kolom
     afbreken i.p.v. de regel uit het grid te duwen op smalle schermen. */
  .project__plaats,
  .project__type,
  .project__jaar {
    min-width: 0;
    overflow-wrap: break-word;
  }
  .project__type::before,
  .project__jaar::before {
    content: "·";
    color: var(--ink-45);
    padding-inline: 0.5em;
  }

  /* De korte omschrijving en de strip lopen onder de hele meta heen. */
  .project__kort { grid-column: 2 / -1; }
}

/* ===================================================================
   AANPAK — vier principes
   =================================================================== */
.principes {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--hair);
}

@media (min-width: 720px) {
  .principes {
    grid-template-columns: repeat(2, 1fr);
  }
  .principe:nth-child(odd) {
    border-right: 1px solid var(--hair);
  }
}

@media (min-width: 1080px) {
  .principes {
    grid-template-columns: repeat(4, 1fr);
  }
  .principe {
    border-right: 1px solid var(--hair);
  }
  .principe:last-child {
    border-right: none;
  }
}

.principe {
  padding: clamp(2.1rem, 3.8vw, 3.25rem) clamp(0rem, 2vw, 2rem)
    clamp(2.1rem, 3.8vw, 3.25rem) 0;
  border-bottom: 1px solid var(--hair);
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

@media (min-width: 720px) {
  .principe {
    padding-inline: clamp(1.6rem, 2.8vw, 2.4rem);
  }
  .principe:nth-child(odd) {
    padding-left: 0;
  }
}

@media (min-width: 1080px) {
  /* In de 4-koloms rij krijgt elk blok links lucht t.o.v. de scheidingslijn.
     De :nth-child(odd)-regel uit de 2-koloms-stand (padding-left:0) moet hier
     met gelijke specificiteit worden teruggezet, anders plakt o.a. 'Discretie'
     (3e blok = oneven) tegen de haarlijn links. */
  .principe,
  .principe:nth-child(odd) {
    padding-left: clamp(1.5rem, 2.2vw, 2rem);
  }
  .principe:first-child {
    padding-left: 0;
  }
}

.principe__nr {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--blue);
}

.principe__naam {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  letter-spacing: 0;
  margin: 0;
}

.principe__tekst {
  color: var(--ink-70);
  font-size: 0.95rem;
  margin: 0;
  max-width: 30ch;
}

/* Slotregel onder de vier principes: het sluitstuk van de scroll. De haarlijn
   herneemt de sectie-deellijnen, de display-maat tilt de zin net boven body
   uit zonder een vijfde kop te worden — de horizon die de hero opende, hier
   gesloten, vlak vóór de footer. */
.aanpak__slot {
  margin: clamp(2rem, 5vw, 3.25rem) 0 0;
  padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid var(--hair);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: 0;
  max-width: 30ch;
}

/* ===================================================================
   GATEWAY — gedeelde meer-pagina-bouwstenen
   Herbruikbare klassen die de homepage-teasers en de interieurpaginas
   (over / disciplines / projecten) delen. Geen herstyling van bestaande
   componenten; alles bouwt voort op dezelfde tokens en haarlijn-ritmiek.
   =================================================================== */

/* "lees verder →" — een ingetogen, inline tekstlink met een pijl die bij
   hover/focus een tikje uitloopt (zoals de project__arrow in het register).
   Mono-familie en blauwe onderlijn plaatsen hem als wegwijzer, niet als knop. */
.readmore {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  border-bottom: 1px solid var(--blue);
  /* Touch-raakzone (≥44px) zonder de regel-ritmiek te breken: de extra ruimte
     zit bóven de tekst zodat de onderlijn strak tegen de woorden blijft. */
  padding-top: 1rem;
  padding-bottom: 2px;
  line-height: 1.3;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.readmore:hover,
.readmore:focus-visible {
  color: var(--blue);
  border-color: var(--ink);
}

.readmore__arrow {
  color: var(--blue);
  transition: transform 0.28s ease;
}

.readmore:hover .readmore__arrow,
.readmore:focus-visible .readmore__arrow {
  transform: translateX(4px);
}

/* De readmore-regels onder een teaser krijgen een vol baseline-interval lucht
   boven zich, zodat ze losstaan van het laatste tekstblok. */
.philo__more,
.discipline-teasers__more,
.register__more,
.aanpak__more {
  margin: var(--space-lg) 0 0;
}

/* ---- Disciplines-teaser (homepage) --------------------------------------
   Compacte driedeling: naam + these + korte regel per discipline, zonder de
   uitgebreide uitleg en blauwdruk-tekeningen van de Disciplines-pagina.
   Eén kolom op smal scherm, drie naast elkaar vanaf desktop, met de
   register-eigen haarlijnen als scheiding. */
.discipline-teasers {
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 1fr;
}

.discipline-teaser {
  border-bottom: 1px solid var(--hair);
  padding-block: clamp(1.5rem, 3.5vw, 2.4rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

@media (min-width: 760px) {
  .discipline-teasers {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--hair);
  }
  .discipline-teaser {
    border-bottom: none;
    border-right: 1px solid var(--hair);
    padding-inline: clamp(1.25rem, 2.5vw, 2rem);
  }
  .discipline-teaser:first-child {
    padding-left: 0;
  }
  .discipline-teaser:last-child {
    border-right: none;
    padding-right: 0;
  }
}

.discipline-teaser__nr {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin: 0;
}

.discipline-teaser__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0;
}

.discipline-teaser__lead {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.18rem);
  line-height: 1.22;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.discipline-teaser__text {
  color: var(--ink-70);
  font-size: 0.95rem;
  margin: 0;
  max-width: 34ch;
}

/* ===================================================================
   INTERIEUR-PAGINAKOP (.page-hero)
   De kop van een top-level interieurpagina (over / disciplines / projecten):
   label + één H1 + lede, met een optionele blauwdruk-SVG-band eronder. Volgt
   de detail-hero-ritmiek (eyebrow-haarlijn, gekaderde tekening met crop-ticks
   aan de bovenhoeken) zodat interieur- en projectpaginas als één familie lezen.
   =================================================================== */
.page-hero {
  border-bottom: 1px solid var(--hair);
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;
}

/* Metadata-band: identiek aan .detail-hero__top / .hero__eyebrow — label in
   inkt, mono-tokens als stille meetgegevens, fijne haarlijn eronder. */
.page-hero__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: baseline;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--hair-soft);
}

.page-hero__top .label {
  color: var(--ink);
}

.page-hero__top .mono {
  color: var(--ink-45);
}

.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 1.3rem + 4vw, 4.6rem);
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  max-width: 18ch;
}

/* Optionele blauwdruk-band onder de paginakop: dezelfde gekaderde tekening met
   crop-ticks aan de bovenhoeken als de project-detail-hero, zonder onderrand
   (de band loopt door in de body). */
.page-hero__band {
  position: relative;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--hair);
  border-bottom: none;
  aspect-ratio: 16 / 6;
  width: 100%;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--blue) 5%, var(--paper)),
      var(--paper));
}

.page-hero__band svg {
  width: 100%;
  height: 100%;
}

.page-hero__band::before,
.page-hero__band::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink);
  border-bottom: none;
  opacity: 0.5;
  pointer-events: none;
}

.page-hero__band::before {
  left: -1px;
  border-right: none;
}

.page-hero__band::after {
  right: -1px;
  border-left: none;
}

/* ---- Lede ---------------------------------------------------------------
   Grote introparagraaf onder een paginakop: tilt de eerste regels boven de
   body uit zonder een tweede kop te worden (spiegelt de eerste alinea van
   .detail-prose). Inkt, niet gedempt; ruime maat. */
.lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  max-width: 40ch;
  text-wrap: pretty;
}

/* ---- Groep-kop ----------------------------------------------------------
   Subkop om een lijst te groeperen (bv. het projectregister op status:
   "Opgeleverd" / "In ontwikkeling"). Mono-label op de maatlat van de
   register-kop, met een fijne haarlijn eronder — een tussenkop, geen H2. */
.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ink);
}

.group-head__title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}

.group-head__count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-45);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer {
  border-top: 1px solid var(--ink);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: end;
}

@media (min-width: 760px) {
  .site-footer__grid {
    grid-template-columns: 1fr auto;
  }
}

.footer__oneliner {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
  max-width: 26ch;
}

.footer__contact {
  text-align: left;
}

@media (min-width: 760px) {
  .footer__contact { text-align: right; }
}

/* De uitnodiging boven het e-mailadres: het enige contactpunt verdient één
   regel die uitnodigt in plaats van een kaal "Contact"-label. Display-familie
   op bescheiden maat — net iets meer gewicht dan body, maar bewust kleiner dan
   de one-liner ertegenover, zodat het een open deur blijft en geen tweede kop
   of CTA wordt. Gedempt in --ink-70; de blauw onderstreepte e-mail eronder is
   het accent. Op breder scherm lijnt de regel rechts uit met het adres en
   krijgt een maat die hem in twee, drie kalme regels laat vallen. */
.footer__invite {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink-70);
  max-width: 34ch;
}

@media (min-width: 760px) {
  .footer__invite {
    margin-left: auto;
    text-align: right;
  }
}

.footer__mail {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1rem);
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 1px solid var(--blue);
  /* Touch-raakzone (≥44px) rond het enige contactpunt. De extra ruimte zit
     bóven de tekst zodat de onderlijn strak tegen de e-mail blijft staan. */
  padding-top: 1.2rem;
  padding-bottom: 2px;
  line-height: 1.3;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer__mail:hover,
.footer__mail:focus-visible {
  color: var(--blue);
  border-color: var(--ink);
}

.footer__legal {
  margin-top: clamp(var(--space-xl), 6vw, calc(var(--baseline) * 2.667));
  padding-top: var(--space-sm);
  border-top: 1px solid var(--hair-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.footer__legal span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  /* Mono op ±11px leest als kapitaal: ietwat ruimer spatiëren (was 0.08em,
     te krap tegen de omringende caps-achtige tekens). Sluit aan bij de andere
     micro-labels (register-kop, pager-richting). */
  letter-spacing: 0.12em;
  color: var(--ink-45);
}

/* ===================================================================
   PROJECT-DETAILPAGINA
   =================================================================== */
.detail-hero {
  border-bottom: 1px solid var(--hair);
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;
}

/* Zelfde metadata-band als de index-hero (.hero__eyebrow): label + mono-tokens
   met een fijne haarlijn eronder die de eyebrow van de H1 scheidt. Zo leest de
   eyebrow op detail- én homepagina als hetzelfde component. */
.detail-hero__top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: baseline;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--hair-soft);
}

/* De label is de aankondiging; de mono-tokens zijn stille meetgegevens —
   exact de rolverdeling van de index-eyebrow. */
.detail-hero__top .label {
  color: var(--ink);
}

.detail-hero__top .mono {
  color: var(--ink-45);
}

/* Korte 'opgave'-regel onder de H1: de waarom-deze-plek-zin, vóór het beeld. */
.detail-hero__lead {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.4rem);
  line-height: 1.3;
  color: var(--ink-70);
  max-width: 46ch;
  margin: 0.9rem 0 0;
}

.detail-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 1.3rem + 4.4vw, 5rem);
  letter-spacing: 0;
  line-height: 0.98;
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  max-width: 16ch;
}

.detail-hero__drawing {
  position: relative;
  border: 1px solid var(--hair);
  border-bottom: none;
  aspect-ratio: 16 / 6;
  width: 100%;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--blue) 5%, var(--paper)),
      var(--paper));
}

.detail-hero__drawing svg {
  width: 100%;
  height: 100%;
}

/* Signatuur-snijtekens (crop-marks) zoals op de index-hero. De detail-tekening
   heeft géén onderrand (ze loopt door in de body), dus alleen de twee bóvenste
   hoeken krijgen een tick — een tick onder een open rand zou in de lucht hangen.
   Zo draagt de gekaderde tekening op detail- én homepagina dezelfde
   blauwdruk-markering. */
.detail-hero__drawing::before,
.detail-hero__drawing::after {
  content: "";
  position: absolute;
  top: -1px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink);
  border-bottom: none;
  opacity: 0.5;
  pointer-events: none;
}

.detail-hero__drawing::before {
  left: -1px;
  border-right: none;
}

.detail-hero__drawing::after {
  right: -1px;
  border-left: none;
}

/* Body-layout: metadata-tabel + tekst */
.detail-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vw, 4rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* Tablet-portret en breder: gegevens-tabel naast de tekst i.p.v. eronder.
   Treedt al op bij 760px (iPad-portret) zodat de metatabel niet beeldvullend
   boven de prozakolom hangt met een halflege waarde-kolom. In de tabletband
   krijgt de tabel een smallere, vaste maat; vanaf 1024px verruimt die. */
@media (min-width: 760px) {
  .detail-body {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

@media (min-width: 1024px) {
  .detail-body {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  }
}

.metatable {
  border-top: 1px solid var(--ink);
  align-self: start;
}

.metatable dl {
  margin: 0;
}

.metatable .row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--hair);
}

/* Smal scherm: label boven waarde i.p.v. een geknepen 2-koloms-rij.
   Langere waarden ("26 woningen + plint, ca. 4.200 m²") krijgen zo de
   volle breedte en blijven leesbaar. */
@media (max-width: 479px) {
  .metatable .row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding-block: 0.85rem;
  }
}

/* Tabletband (760-1023px): de metatabel staat nu náást de tekst in een smalle
   kolom (≈14rem). De 2-koloms-rij zou daar de waarde tot een paar woorden per
   regel knijpen ("In ontwikkeling", de omvang-regel). Label boven waarde
   geeft elke waarde de volle kolombreedte. Vanaf 1024px verruimt de zijbalk
   naar 18rem en keert de label-naast-waarde-rij terug. */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .metatable .row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding-block: 0.8rem;
  }
}

.metatable dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
  align-self: baseline;
}

.metatable dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
  /* "26 woningen + plint, ca. 4.200 m²" mag in de smalle zijbalk netjes
     afbreken op woordgrens i.p.v. de kolom uit te duwen. */
  overflow-wrap: break-word;
}

.detail-prose {
  max-width: 58ch;
}

.detail-prose .label {
  display: block;
  margin-bottom: var(--space-md);
}

.detail-prose p {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--space-md);
}

.detail-prose p:first-of-type {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  line-height: 1.4;
  letter-spacing: 0;
}

.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  /* Raakzone van min. 44px op touch zonder de ritmiek te verstoren:
     een deel van de marge wordt padding binnen het raakbare gebied. De
     marge boven de terug-link is een vol baseline-interval extra, zodat
     hij losstaat van de laatste alinea. */
  margin-top: var(--space-lg);
  padding-block: 0.55rem;
  min-height: 44px;
  transition: color 0.2s ease, gap 0.2s ease;
}

.detail-back:hover,
.detail-back:focus-visible {
  color: var(--blue);
  gap: 0.85rem;
}

/* Prev / next */
.pager {
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pager a {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: 0.45rem;
  transition: background-color 0.25s ease;
}

.pager a:hover,
.pager a:focus-visible {
  background-color: color-mix(in srgb, var(--blue) 4%, var(--paper));
}

.pager .prev {
  border-right: 1px solid var(--hair);
  padding-right: 1.25rem;
}

.pager .next {
  text-align: right;
  padding-left: 1.25rem;
}

.pager .dir {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.pager .pname {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.7rem);
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: break-word;
}

/* Smal scherm: prev/next gestapeld i.p.v. twee geknepen kolommen waarin de
   projectnaam tot een hoge, smalle blok wordt gewrongen. Elk paneel beslaat
   nu de volle breedte met een ruime raakzone; de scheiding wordt horizontaal. */
@media (max-width: 479px) {
  .pager {
    grid-template-columns: 1fr;
  }
  .pager .prev {
    border-right: none;
    border-bottom: 1px solid var(--hair);
    padding-right: 0;
  }
  .pager .next {
    text-align: left;
    padding-left: 0;
  }
  .pager a {
    padding-block: 1.4rem;
  }
}

/* ===================================================================
   SCROLL-REVEAL (progressive enhancement)
   =================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ===================================================================
   FOCUS / A11Y
   =================================================================== */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Het skip-doel (#hoofd) krijgt tabindex="-1" zodat de skip-link de focus ook
   programmatisch in de inhoud zet — anders verplaatsen sommige browsers (oudere
   Safari/Firefox) alleen het kijkvenster en springt de volgende Tab terug naar
   de skip-link, waarmee de overslaan-link zinloos wordt. Het is een container,
   geen bedienbaar element: een blauw kader rond de hele <main> zou hier
   verwarren, dus die ene programmatische focus-ring onderdrukken we. Echte
   bedienbare elementen behouden hun zichtbare focus onverkort. */
main:focus,
main:focus-visible {
  outline: none;
}

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-120%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  padding: 0.6rem 1rem;
  z-index: 200;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   MOBIELE NAVIGATIE
   =================================================================== */
@media (max-width: 760px) {
  .nav-toggle {
    display: inline-block;
  }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    padding: 0.5rem var(--gutter) 1.25rem;
    transform: translateY(-130%);
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
      visibility 0s linear 0.35s;
    box-shadow: 0 12px 24px -18px rgba(17, 17, 17, 0.4);
  }
  .site-nav[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--hair-soft);
    font-size: 0.9rem;
  }
  .site-nav a .nr {
    /* nummer als index-anker, vaste breedte → de namen lijnen netjes uit */
    display: inline-block;
    min-width: 2.4em;
    margin-right: 0;
    color: var(--ink-45);
  }
  .site-nav a.is-active .nr,
  .site-nav a[aria-current="page"] .nr {
    color: var(--blue);
  }
  .site-nav a:last-child {
    border-bottom: none;
  }
  .site-nav a::after { display: none; }
}

/* No-JS: nav altijd zichtbaar (geen verborgen content) */
@media (max-width: 760px) {
  html:not(.js) .site-nav {
    position: static;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    border: none;
    box-shadow: none;
    padding: 0 0 0.75rem;
    background: transparent;
    visibility: visible;
    pointer-events: auto;
  }
  html:not(.js) .site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: none;
    padding-block: 0.3rem;
    font-size: 0.8rem;
  }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    height: auto;
    padding-block: 0.75rem;
  }
}