/* ============================================================================
   vincentnap.com — the interface in the visual language of Detroit: Become Human
   ----------------------------------------------------------------------------
   Same house style as Argus and Verhaal (September/October 2026): the light
   menus of Detroit — white, ink in a deep navy, one android-blue accent.
   Yellow and red only as signals, like the LED ring at the temple. Thin
   lines, corner brackets, spaced capitals, big hollow numbers, and motion
   that starts fast and runs out long (--uit).

   Type: Barlow (DIN-like, like Bahnschrift in Argus) for the interface;
   TeX Gyre Termes (the Times of Verhaal) for running text. Both served from
   this site — no third party sees who opens it.

   The ornament (grid, rain, watermark) moves only with transform and opacity
   and stops when the tab is not visible (html.rustig).
   ========================================================================== */
@font-face { font-family: "Barlow"; src: url(/assets/fonts/barlow-300.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/assets/fonts/barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/assets/fonts/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/assets/fonts/barlow-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Termes"; src: url(/assets/fonts/TeXGyreTermes-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Termes"; src: url(/assets/fonts/TeXGyreTermes-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #ffffff;
  --bg-2: #f3f5f9;
  --panel: rgba(255, 255, 255, .9);
  --line: rgba(20, 27, 73, .13);
  --line-strong: rgba(20, 27, 73, .27);
  --ink-sterk: #0b1030;
  --ink: #161c40;
  --ink-soft: #48507a;
  --ink-faint: #646c92;
  --accent: #1d6fe0;
  --accent-2: #1553b0;
  --accent-soft: rgba(29, 111, 224, .08);
  --accent-glow: rgba(29, 111, 224, .32);
  --geel: #8f5c00;
  --geel-led: #e0a100;
  --rood: #c8102e;
  --radius: 2px;
  --f-kop: "Barlow", "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  --f-tekst: "Termes", "Times New Roman", Times, serif;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
  --uit: cubic-bezier(.16, 1, .3, 1);
  --in-uit: cubic-bezier(.65, 0, .35, 1);
  --rand: clamp(18px, 3.2vw, 48px);
  --menu-b: 300px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 16px/1.6 var(--f-tekst);
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(29, 111, 224, .22); color: var(--ink-sterk); }
a { color: var(--accent); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink-sterk); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background-color: rgba(20, 27, 73, .2); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(29, 111, 224, .5); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* ---------- the room: glow, grid, rain, watermark ---------- */
#decor {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 82% -18%, rgba(29, 111, 224, .09), transparent 60%),
    radial-gradient(900px 600px at -10% 112%, rgba(30, 39, 97, .07), transparent 60%),
    radial-gradient(520px 520px at 50% 46%, rgba(29, 111, 224, .06), transparent 70%);
}
#decor::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(30, 39, 97, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 39, 97, .07) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 12%, transparent 70%);
          mask-image: radial-gradient(ellipse at 50% 42%, #000 12%, transparent 70%);
  animation: fadeIn 1.2s ease-out both;
}
.sliert {
  position: absolute; top: -30%; width: 1px; height: 160px; will-change: transform, opacity;
  background: linear-gradient(to bottom, rgba(29, 111, 224, 0), rgba(29, 111, 224, .3), rgba(29, 111, 224, 0));
  animation: sliert-dalen linear infinite;
}
.sliert.s1 { left: 9%;  height: 140px; animation-duration: 14s;   animation-delay: 0s; }
.sliert.s2 { left: 21%; height: 200px; animation-duration: 19s;   animation-delay: 2.2s; }
.sliert.s3 { left: 33%; height: 120px; animation-duration: 16s;   animation-delay: 5.1s; }
.sliert.s4 { left: 47%; height: 180px; animation-duration: 21s;   animation-delay: 1.3s; }
.sliert.s5 { left: 58%; height: 150px; animation-duration: 17.5s; animation-delay: 7.4s; }
.sliert.s6 { left: 70%; height: 210px; animation-duration: 23s;   animation-delay: 3.6s; }
.sliert.s7 { left: 82%; height: 130px; animation-duration: 15.5s; animation-delay: 9.2s; }
.sliert.s8 { left: 93%; height: 170px; animation-duration: 20s;   animation-delay: 4.8s; }
@keyframes sliert-dalen { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(140vh); opacity: 0; } }
html.rustig .sliert { animation-play-state: paused; }

/* The title of the screen, huge and hollow behind everything. */
#watermerk {
  position: absolute; left: var(--rand); bottom: -.2em; user-select: none; white-space: nowrap;
  font: 300 clamp(80px, 13vw, 220px)/1 var(--f-kop); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(29, 111, 224, .025); -webkit-text-stroke: 1px rgba(30, 39, 97, .16);
  transition: opacity .5s, transform .9s var(--uit);
}
#watermerk.wissel { opacity: 0; transform: translateY(14px); }

/* ---------- the face ---------- */
#face { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; touch-action: pan-y; }

/* The analysis frame (positioned by app.js around the projected face). */
#lock {
  position: fixed; z-index: 2; pointer-events: none; left: 50%; top: 50%; width: 0; height: 0;
  opacity: 0; transform: scale(1.14);
}
body.fase-lock #lock { opacity: 1; transform: none; transition: opacity .25s, transform .42s var(--uit); }
.haak { position: absolute; width: 26px; height: 26px; border: 0 solid var(--accent); opacity: .85; }
.haak.lb { left: 0; top: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.haak.rb { right: 0; top: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.haak.lo { left: 0; bottom: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.haak.ro { right: 0; bottom: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.scanlijn {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
  box-shadow: 0 0 12px var(--accent-glow);
}
body.fase-lock .scanlijn { animation: scan 1.1s var(--in-uit) .15s 1 both; }
@keyframes scan { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

#readout {
  position: fixed; z-index: 3; margin: 0; left: 0; top: 0;
  font: 400 11px/1 var(--f-kop); letter-spacing: .2em; text-transform: uppercase;
  pointer-events: none;
}
#readout > div {
  display: grid; grid-template-columns: 112px auto; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateX(-10px);
}
#readout > div:first-child { border-top: 1px solid var(--line); }
#readout dt { color: var(--ink-faint); }
#readout dt::before { content: "▸ "; color: var(--accent); }
#readout dd { margin: 0; color: var(--ink-sterk); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
body.fase-readout #readout > div { opacity: 1; transform: none; transition: opacity .5s, transform .7s var(--uit); }
body.fase-readout #readout > div:nth-child(2) { transition-delay: .09s; }
body.fase-readout #readout > div:nth-child(3) { transition-delay: .18s; }
body.fase-readout #readout > div:nth-child(4) { transition-delay: .27s; }
body.fase-readout #readout > div:nth-child(5) { transition-delay: .36s; }
body.fase-readout #readout > div:nth-child(6) { transition-delay: .45s; }
body.fase-readout #readout > div:nth-child(7) { transition-delay: .54s; }
body.open #readout > div, body.verplaatst #readout > div { opacity: 0; transition-delay: 0s; }

/* The LED ring at the temple: blue means all is well. */
.led {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--accent); box-shadow: 0 0 9px var(--accent-glow), inset 0 0 4px var(--accent-glow);
  animation: led-adem 3.2s ease-in-out infinite;
}
@keyframes led-adem { 50% { opacity: .45; } }

/* ---------- clock: top right, like the chapter cards ---------- */
#klok {
  position: fixed; z-index: 4; top: var(--rand); right: var(--rand); text-align: right;
  font-family: var(--f-kop); text-transform: uppercase; color: var(--ink-sterk);
  opacity: 0; transform: translateY(-8px);
}
body.fase-klok #klok { opacity: 1; transform: none; transition: opacity .8s, transform 1s var(--uit); }
.klok-datum { font: 500 11px/1.2 var(--f-kop); letter-spacing: .3em; color: var(--ink-soft); }
.klok-tijd { margin-top: 6px; font: 300 46px/1 var(--f-kop); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.klok-sec { color: var(--accent); }
.klok-zone { margin-top: 8px; font: 400 10px/1.2 var(--f-kop); letter-spacing: .24em; color: var(--ink-faint); }
.klok-zone::before { content: "// "; color: var(--accent); }

/* ---------- menu: left, numbered like the menus in the game ---------- */
#menu {
  position: fixed; z-index: 4; left: var(--rand); top: 50%; transform: translateY(-50%);
  width: var(--menu-b);
}
.merk { display: block; margin-bottom: 34px; color: var(--ink-sterk); opacity: 0; transform: translateY(8px); }
.merk-naam { display: block; font: 300 30px/1 var(--f-kop); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
.merk-sub { display: block; margin-top: 12px; font: 400 11px/1 var(--f-kop); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-faint); }
.merk-sub::before { content: "// "; color: var(--accent); }
body.fase-menu .merk { opacity: 1; transform: none; transition: opacity .7s, transform .9s var(--uit); }

#menu ul { counter-reset: tab; border-left: 1px solid var(--line); }
#menu li { opacity: 0; transform: translateX(-16px); }
body.fase-menu #menu li { opacity: 1; transform: none; transition: opacity .5s, transform .8s var(--uit); }
body.fase-menu #menu li:nth-child(1) { transition-delay: .12s; }
body.fase-menu #menu li:nth-child(2) { transition-delay: .2s; }
body.fase-menu #menu li:nth-child(3) { transition-delay: .28s; }
body.fase-menu #menu li:nth-child(4) { transition-delay: .36s; }
body.fase-menu #menu li:nth-child(5) { transition-delay: .44s; }
body.fase-menu #menu li:nth-child(6) { transition-delay: .52s; }
#menu li a {
  position: relative; display: flex; align-items: center; gap: 14px;
  margin-left: -1px; padding: 14px 16px 14px 18px; border-left: 2px solid transparent;
  font: 400 13px/1.2 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
  background: linear-gradient(90deg, rgba(29, 111, 224, .17), rgba(29, 111, 224, 0)) no-repeat left / 0% 100%;
  transition: background-size .45s var(--uit), color .25s, border-color .25s;
}
#menu li a::before {
  counter-increment: tab; content: counter(tab, decimal-leading-zero);
  min-width: 2.1em; font-size: 11px; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--ink-faint); transition: color .25s;
}
#menu li a::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; transform: rotate(45deg);
  border: 1px solid currentColor; opacity: 0; transition: opacity .25s, transform .45s var(--uit);
}
#menu li a:hover { color: var(--ink-sterk); background-size: 100% 100%; }
#menu li a:hover::after { opacity: .6; }
#menu li a[aria-current="page"] {
  color: var(--ink-sterk); border-left-color: var(--accent); background-size: 100% 100%;
  text-shadow: 0 0 14px var(--accent-glow);
}
#menu li a[aria-current="page"]::before { color: var(--accent); }
#menu li a[aria-current="page"]::after { opacity: 1; color: var(--accent); background: var(--accent); }
.tab-kort { display: none; }

/* ---------- panel ---------- */
/* The panel runs from the menu towards the right margin. On screens wide enough it
   stops short of it, leaving a column where the head gathers again beside it; on
   smaller ones the head waits behind its glass. */
#paneel {
  position: fixed; z-index: 3;
  left: calc(var(--rand) + var(--menu-b) + 40px); right: var(--rand); top: calc(var(--rand) + 96px); bottom: 52px;
  max-width: 1180px;
  overflow: auto; overscroll-behavior: contain;
  padding: 40px 52px 52px;
  /* corner brackets top left and bottom right, like the menus */
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 16px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1px 16px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 16px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 1px 16px no-repeat,
    var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 26px 64px -18px rgba(20, 27, 73, .22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transform: translateX(-18px);
  transition: opacity .35s, transform .7s var(--uit), visibility 0s .7s;
  outline: none;
}
@media (min-width: 1200px) {
  #paneel { right: calc(var(--rand) + clamp(300px, 24vw, 480px)); }
}
/* the panel waits a moment, so the head is seen blowing apart before the glass covers it */
body.open #paneel { opacity: 1; visibility: visible; transform: none; transition: opacity .35s .18s, transform .7s var(--uit) .18s, visibility 0s; }
.sluit {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft);
  transition: border-color .25s, color .25s;
}
.sluit svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.sluit:hover { border-color: var(--accent); color: var(--accent); }

.pane[hidden] { display: none; }
.pane > * { animation: fadeUp .7s var(--uit) both; }
.pane > *:nth-child(2) { animation-delay: .05s; } .pane > *:nth-child(3) { animation-delay: .1s; }
.pane > *:nth-child(4) { animation-delay: .15s; } .pane > *:nth-child(5) { animation-delay: .2s; }
.pane > *:nth-child(n+6) { animation-delay: .25s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.pane-kop { position: relative; padding: 4px 0 22px; margin-bottom: 8px; }
.pane-kop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent) 0 72px, var(--line-strong) 72px, transparent);
}
/* The big hollow number: the chapter numbers of Detroit. */
.pane-nr {
  position: absolute; top: -14px; right: 52px; pointer-events: none; user-select: none;
  font: 300 84px/1 var(--f-kop); color: rgba(29, 111, 224, .05); -webkit-text-stroke: 1px rgba(29, 111, 224, .38);
}
.pane-kop h2 { font: 300 28px/1.1 var(--f-kop); letter-spacing: .26em; text-transform: uppercase; }
.pane-sub { margin-top: 10px; font: 400 11px/1.3 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }
.pane-sub::before { content: "// "; color: var(--accent); }
/* the title and its subtitle keep clear of the big number in the corner (they wrap instead) */
.pane-kop > h2, .pane-kop > .pane-sub { padding-right: 150px; }
.pane-kop .knop { margin-top: 16px; }

/* Headings as menu lines: spaced capitals with a line that runs out. */
.blok {
  display: flex; align-items: center; gap: 14px; margin: 34px 0 14px;
  font: 500 12px/1.3 var(--f-kop); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-sterk);
}
.blok::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

.inleiding { margin: 22px 0 6px; font-size: 18px; line-height: 1.65; color: var(--ink); max-width: 62ch; }

/* ---------- buttons: the fill sweeps in from the left ---------- */
.knop {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 500 11px/1.1 var(--f-kop); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  padding: 12px 18px; border-radius: var(--radius); border: 1px solid var(--line-strong); color: var(--ink-sterk);
  background: linear-gradient(90deg, rgba(29, 111, 224, .22), rgba(29, 111, 224, .06)) no-repeat left / 0% 100%, rgba(255, 255, 255, .94);
  transition: background-size .45s var(--uit), border-color .25s, box-shadow .3s;
}
.knop:hover { background-size: 100% 100%; border-color: var(--accent); box-shadow: 0 0 20px -6px var(--accent-glow); }
.knop-klein { padding: 9px 14px; font-size: 10.5px; }
.knop.gelukt { border-color: var(--accent); color: var(--accent); }

/* ---------- CV ---------- */
.cv-lijst { display: grid; gap: 2px; }
.cv-item {
  position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px;
  padding: 16px 0 16px; border-bottom: 1px solid var(--line);
}
.cv-item:last-child { border-bottom: 0; }
.cv-jaar { padding-top: 2px; font: 500 11.5px/1.4 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-variant-numeric: tabular-nums; }
.cv-org {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  font: 500 14px/1.3 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-sterk);
}
.cv-plaats { font: 400 10.5px/1.3 var(--f-kop); letter-spacing: .18em; color: var(--ink-faint); }
.cv-rol { margin-top: 5px; font: italic 400 15px/1.4 var(--f-tekst); color: var(--ink-soft); }
.cv-kern ul { margin-top: 8px; display: grid; gap: 5px; max-width: 78ch; }
.cv-kern li, .cv-plat li {
  position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.55; color: var(--ink);
}
.cv-kern li::before, .cv-plat li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: var(--accent);
}
.cv-plat { display: grid; gap: 6px; }
.cv-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.cv-talen { display: grid; gap: 10px; }
.cv-talen li { display: grid; grid-template-columns: 76px 74px 1fr; align-items: center; gap: 12px; font: 400 12px/1.2 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-sterk); }
.cv-talen .niveau { color: var(--ink-faint); font-size: 10.5px; }
/* The level as five segments, like the stress meters in the game. */
.meter { height: 6px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 12px, transparent 12px 15px); position: relative; }
.meter::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 12px, transparent 12px 15px); }
.meter.n5::after { width: 100%; }
.meter.n3::after { width: 60%; }

/* ---------- projects ---------- */
/* one card to a row in a narrower panel, two in a wider one (an even grid, like the skills) */
#projects { container-type: inline-size; }
.projecten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 26px; }
@container (min-width: 760px) { .projecten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.project {
  position: relative; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255, 255, 255, .8); transition: border-color .35s, box-shadow .35s;
}
.project::before, .project::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border: 0 solid var(--accent); opacity: .7; transition: width .45s var(--uit), height .45s var(--uit), opacity .35s;
}
.project::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.project::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.project:hover { border-color: var(--line-strong); box-shadow: 0 18px 40px -26px rgba(20, 27, 73, .4); }
.project:hover::before, .project:hover::after { width: 28px; height: 28px; opacity: 1; }
.project-nr {
  position: absolute; top: 10px; right: 16px; pointer-events: none;
  font: 300 46px/1 var(--f-kop); color: rgba(29, 111, 224, .04); -webkit-text-stroke: 1px rgba(29, 111, 224, .32);
}
.project-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 56px; }
.project h3 { font: 400 18px/1.2 var(--f-kop); letter-spacing: .2em; text-transform: uppercase; }
.project-meta { margin: 8px 0 12px; font: 400 10.5px/1.4 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.project p:not(.project-meta) { font-size: 15.5px; line-height: 1.6; }
/* The main project spans the full width, with a stronger frame. */
.project-hoofd { grid-column: 1 / -1; border-color: var(--line-strong); background: linear-gradient(135deg, rgba(29, 111, 224, .06), rgba(255, 255, 255, .85) 55%); }
.project-hoofd::before, .project-hoofd::after { width: 22px; height: 22px; opacity: 1; }
.project-hoofd h3 { font-size: 22px; }
.hoofd-label { margin-left: auto; padding: 4px 9px; font: 500 9.5px/1 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: #fff; background: var(--ink-sterk); }
.project-link { display: inline-block; margin-top: 14px; font: 500 11px/1.2 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid rgba(29, 111, 224, .3); }
.project-link::after { content: " ↗"; }
.project-link:hover { border-bottom-color: var(--accent); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tags li { padding: 4px 8px; border: 1px solid var(--line); font: 400 10px/1.2 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.status { display: inline-flex; align-items: center; gap: 7px; font: 500 10px/1 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; }
.status-blauw { color: var(--accent); } .status-blauw::before { box-shadow: 0 0 8px var(--accent-glow); }
.status-geel { color: var(--geel); } .status-geel::before { border-color: var(--geel-led); box-shadow: 0 0 8px rgba(224, 161, 0, .4); }
.status-grijs { color: var(--ink-faint); }

/* ---------- brief history: the flowchart of Detroit ---------- */
.stroom { position: relative; margin: 30px 0 10px 10px; padding-left: 34px; }
.stroom::before {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 26px; width: 1px;
  background: linear-gradient(var(--accent), var(--line-strong) 70%, transparent);
  transform-origin: top; animation: lijn-groei 1.4s var(--in-uit) .1s both;
}
@keyframes lijn-groei { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.knoop { position: relative; padding: 0 0 26px; }
.knoop .ruit, .tak .ruit {
  position: absolute; left: -34px; top: 4px; width: 13px; height: 13px; transform: rotate(45deg);
  background: var(--bg); border: 1.5px solid var(--accent); box-shadow: 0 0 10px -2px var(--accent-glow);
}
.knoop-jaar { font: 500 11px/1.3 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.knoop-titel { margin-top: 3px; font: 400 15px/1.3 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-sterk); }
.knoop p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; max-width: 60ch; }
.knoop-open .ruit { background: var(--accent); animation: led-adem 2.4s ease-in-out infinite; }
/* The path not taken: a branch that stops at a closed node. */
.tak { position: relative; display: flex; align-items: center; margin: 12px 0 0 0; padding-left: 64px; }
.tak::before { content: ""; position: absolute; left: 0; top: 50%; width: 56px; height: 1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 7px); }
.tak .ruit { position: relative; left: auto; top: auto; margin-right: 12px; flex: 0 0 auto; }
.ruit.ruit-dicht { border-color: var(--ink-faint); box-shadow: none; background: repeating-linear-gradient(45deg, var(--line-strong) 0 1px, transparent 1px 3px); }
.tak-tekst { font: 400 10.5px/1.3 var(--f-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* ---------- contact ---------- */
.kanalen { margin-top: 26px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.kanaal { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.kanaal-label { font: 500 10.5px/1.2 var(--f-kop); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); }
.kanaal-waarde { font: 300 22px/1.2 var(--f-kop); letter-spacing: .04em; color: var(--ink-sterk); overflow-wrap: anywhere; }
a.kanaal-waarde:hover { color: var(--accent); }
.kanaal-coord { font: 400 10.5px/1.2 var(--f-kop); letter-spacing: .18em; color: var(--ink-faint); }

/* ---------- skills: cards like the projects; opened, a card takes the full width
   and its sources run down a trace like the brief history ---------- */
/* Two to a row, the cards of a row equally tall with the trace link on one line; a card
   left alone on its row (the seventh, or one just before an opened card) is centred
   (li.alleen, set in app.js). One to a row in a narrow panel. */
#skills { container-type: inline-size; }
.vaardigheden { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 26px; }
@container (min-width: 760px) {
  .vaardigheden { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vaardigheden > li { grid-column: span 2; }
  .vaardigheden > li.alleen { grid-column: 2 / span 2; }
}
.project.vaardigheid { padding: 0; }
.vaardigheid summary { display: block; padding: 22px 22px 20px; cursor: pointer; list-style: none; }
.vaardigheid:not([open]) { height: 100%; }
.vaardigheid:not([open]) summary { height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.vaardigheid:not([open]) .spoor-knop { margin-top: auto; }
.vaardigheid .tags { margin-bottom: 18px; }
.vaardigheid summary::-webkit-details-marker { display: none; }
.vaardigheid summary:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }
.vaardigheid h3 { padding-right: 56px; }
.vaardigheid .tags { margin-top: 12px; }
.spoor-knop {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 10.5px/1.2 var(--f-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.spoor-knop .ruit { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--accent); background: var(--bg); transition: background .3s, box-shadow .3s; }
.vaardigheid summary:hover .spoor-knop .ruit { box-shadow: 0 0 10px -2px var(--accent-glow); }
.spoor-open { display: none; }
.vaardigheid[open] .spoor-dicht { display: none; }
.vaardigheid[open] .spoor-open { display: inline; }
.vaardigheid[open] .spoor-knop .ruit { background: var(--accent); box-shadow: 0 0 10px -2px var(--accent-glow); }
.vaardigheden > li:has(> .vaardigheid[open]) { grid-column: 1 / -1; }
.vaardigheid:not([open]) h3 { font-size: 16px; letter-spacing: .18em; line-height: 1.3; }
.vaardigheid[open] { border-color: var(--line-strong); background: linear-gradient(135deg, rgba(29, 111, 224, .06), rgba(255, 255, 255, .85) 55%); }
.vaardigheid[open]::before, .vaardigheid[open]::after { width: 22px; height: 22px; opacity: 1; }
.vaardigheid[open] h3 { font-size: 22px; }
.stroom.spoor { margin: 0 22px 0 32px; padding-top: 2px; }
.vaardigheid[open] .spoor { animation: fadeUp .6s var(--uit) both; }

/* ---------- ask a question ---------- */
.vraag { display: grid; gap: 14px; max-width: 760px; }
.veld { display: grid; gap: 7px; }
.veld-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.veld label { font: 500 10.5px/1.2 var(--f-kop); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); }
.veld input, .veld textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: 400 16px/1.5 var(--f-tekst); color: var(--ink-sterk); background: rgba(255, 255, 255, .94);
  transition: border-color .25s, box-shadow .3s;
}
.veld textarea { resize: vertical; min-height: 110px; }
.veld input:focus, .veld textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 20px -8px var(--accent-glow); }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vraag-voet { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vraag-status { font: 400 11px/1.4 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.vraag-status.goed { color: var(--accent); }
.vraag-status.fout { color: var(--rood); }
.vraag-status a { color: inherit; }
.vraag button[disabled] { opacity: .55; pointer-events: none; }

/* ---------- theses: one card per thesis, each opening its presentation ---------- */
.scripties { display: grid; gap: 18px; margin-top: 26px; }
.scriptie { padding: 24px 26px 22px; }
.scriptie-soort {
  padding: 4px 9px; border: 1px solid var(--line-strong);
  font: 500 9.5px/1 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.project-hoofd .scriptie-soort { color: #fff; background: var(--ink-sterk); border-color: var(--ink-sterk); }
.project .scriptie-onder { margin-top: 10px; font: italic 400 17px/1.45 var(--f-tekst); color: var(--ink-soft); max-width: 62ch; }
.scriptie > p:not(.project-meta):not(.scriptie-onder) { max-width: 78ch; }
.scriptie-feiten { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 18px 0 2px; }
.scriptie-feiten li { font: 400 10px/1.3 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.scriptie-feiten b { display: block; margin-bottom: 5px; font: 300 30px/1 var(--f-kop); letter-spacing: .02em; color: var(--ink-sterk); font-variant-numeric: tabular-nums; }
.scriptie-feiten .cijfer { flex-basis: 100%; color: var(--accent); }
.scriptie-feiten .cijfer b { color: var(--accent); }
.titel-meta li:last-child { color: var(--accent); }
.scriptie-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; }
.knop-speel::before {
  content: ""; width: 0; height: 0; margin-right: 2px;
  border-left: 7px solid var(--accent); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.scriptie-noot { font: 400 10px/1.3 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- the presentations (deck.js): a slide deck over the whole screen ---------- */
.deck {
  position: fixed; inset: 0; z-index: 8; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  background: var(--bg); outline: none;
  opacity: 0; transition: opacity .35s;
}
.deck[hidden] { display: none; }
.deck.zichtbaar { opacity: 1; }
.deck::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(30, 39, 97, .05) 1px, transparent 1px) center / 56px 56px,
    linear-gradient(90deg, rgba(30, 39, 97, .05) 1px, transparent 1px) center / 56px 56px,
    radial-gradient(1100px 600px at 85% -10%, rgba(29, 111, 224, .08), transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 78%);
}
.deck-balk { display: flex; align-items: center; gap: 18px; padding: 16px var(--rand) 14px; border-bottom: 1px solid var(--line); }
.deck-titel { min-width: 0; font: 500 11px/1.3 var(--f-kop); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-sterk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-titel::before { content: "// "; color: var(--accent); }
.deck-teller { margin-left: auto; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.deck-nu { font: 300 30px/1 var(--f-kop); font-variant-numeric: tabular-nums; color: rgba(29, 111, 224, .06); -webkit-text-stroke: 1px rgba(29, 111, 224, .6); }
.deck-van { font: 400 11px/1 var(--f-kop); letter-spacing: .2em; color: var(--ink-faint); }
.deck-download[hidden] { display: none; }
.deck-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.deck-sluit {
  width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft); transition: border-color .25s, color .25s;
}
.deck-sluit svg, .deck-pijl svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.deck-sluit:hover { border-color: var(--accent); color: var(--accent); }
.deck-podium { position: relative; overflow: hidden; touch-action: pan-y; }
.deck-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent); box-shadow: 0 0 12px var(--accent-glow);
}
.deck-scan.loopt { animation: scan .9s var(--in-uit) 1 both; }
.deck-melding { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; justify-items: center; text-align: center; font: 500 11px/1.4 var(--f-kop); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); }
.deck-melding.laden::before { content: ""; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: laden 1.1s var(--in-uit) infinite; }
@keyframes laden { from { transform: scaleX(.1); opacity: .3; } 50% { opacity: 1; } to { transform: scaleX(1); opacity: .3; } }
.deck-voet { display: flex; align-items: center; gap: 14px; padding: 10px var(--rand) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.deck-pijl { width: 44px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink-sterk); transition: border-color .25s, color .25s, opacity .25s; }
.deck-pijl:hover { border-color: var(--accent); color: var(--accent); }
.deck-pijl:disabled { opacity: .3; pointer-events: none; }
.deck-voortgang { flex: 1; display: flex; gap: 3px; min-width: 0; }
.deck-voortgang li { flex: 1; min-width: 0; }
.deck-voortgang button { position: relative; display: block; width: 100%; height: 22px; padding: 0; }
.deck-voortgang button::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line-strong); transition: background .3s, box-shadow .3s; }
.deck-voortgang button.gezien::after { background: rgba(29, 111, 224, .4); }
.deck-voortgang button[aria-current]::after { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.deck-voortgang button:hover::after { background: var(--accent-2); }

/* A slide. Anything with class "b" builds in, in order (deck.js numbers them: --i). */
.dia {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; padding: clamp(18px, 3.4vh, 42px) clamp(20px, 5vw, 84px) clamp(18px, 3vh, 34px);
  opacity: 0; visibility: hidden; transform: translateX(48px);
  transition: opacity .3s, transform .7s var(--uit), visibility 0s .7s;
}
.dia.voorbij { transform: translateX(-48px); }
.dia.actief { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .1s, transform .8s var(--uit) .1s, visibility 0s; }
.dia.actief .b { animation: dia-in .75s var(--uit) calc(var(--i, 0) * 80ms + 160ms) both; }
@keyframes dia-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.dia-kop, .dia-lijf { width: 100%; max-width: 1240px; margin: 0 auto; }
.dia-kop { position: relative; padding-bottom: 14px; margin-bottom: clamp(14px, 2.6vh, 28px); }
.dia-kop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--accent) 0 72px, var(--line-strong) 72px, transparent); }
.dia-oog { font: 500 11px/1.3 var(--f-kop); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.dia-kop h3 { margin-top: 8px; font: 300 clamp(22px, 2.5vw, 36px)/1.15 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; }
.dia-lijf { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.4vh, 24px); }
.dia p { font-size: clamp(15px, 1.12vw, 17px); line-height: 1.6; }
.dia em { font-style: italic; }
.dia .lead { font: 400 clamp(17px, 1.5vw, 21px)/1.55 var(--f-tekst); color: var(--ink-sterk); max-width: 58ch; }
.dia .lead.smal { max-width: 80ch; }
.dia .voetnoot { font: 400 10.5px/1.6 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); max-width: 120ch; }
.dia-sub { margin-bottom: 12px; font: 500 11px/1.3 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-sterk); }
.dia-sub::before { content: "▸ "; color: var(--accent); }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.duo-breed-links { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.duo-breed-rechts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.duo > div > * + *, .duo > div > .b + .b { margin-top: 14px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }

/* the title slide */
.dia-titel .dia-lijf { align-items: flex-start; }
.dia-titel .dia-oog { font-size: 12px; }
.titel-groot { margin-top: 16px; font: 300 clamp(34px, 5.6vw, 82px)/1.04 var(--f-kop); letter-spacing: .12em; text-transform: uppercase; }
.dia .titel-onder { margin-top: 14px; font: italic 400 clamp(17px, 1.7vw, 25px)/1.45 var(--f-tekst); color: var(--ink-soft); max-width: 50ch; }
.titel-lijn { display: block; width: min(440px, 70%); height: 1px; margin: 18px 0 6px; background: linear-gradient(90deg, var(--accent) 0 72px, var(--line-strong) 72px, transparent); transform-origin: left; }
.dia.actief .titel-lijn { animation: groei-x 1.1s var(--in-uit) .45s both; }
.titel-meta { display: flex; flex-wrap: wrap; gap: 10px 0; }
.titel-meta li { padding: 0 16px; border-left: 1px solid var(--line-strong); font: 400 11px/1.3 var(--f-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.titel-meta li:first-child { padding-left: 0; border-left: 0; color: var(--ink-sterk); }

/* quotes, cards, numbers */
.citaat { margin: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--accent); font: italic 400 clamp(18px, 1.7vw, 24px)/1.45 var(--f-tekst); color: var(--ink-sterk); max-width: 52ch; }
.dia-citaat .dia-lijf { align-items: center; }
.citaat-groot { font-size: clamp(21px, 2.3vw, 33px); max-width: 44ch; }
.dia .vertaling { max-width: 72ch; padding-left: 22px; color: var(--ink-soft); }
.vertaling::before { content: "// Translation  "; font: 500 10px/1 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.kaart { position: relative; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .86); }
.kaart::before, .kaart::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--accent); opacity: .75; pointer-events: none; }
.kaart::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.kaart::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.kaart h4 { padding-right: 42px; font: 500 13px/1.35 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-sterk); }
.kaart p { margin-top: 8px; font-size: 15px; }
.kaart-nr { position: absolute; top: 10px; right: 14px; font: 300 32px/1 var(--f-kop); color: rgba(29, 111, 224, .04); -webkit-text-stroke: 1px rgba(29, 111, 224, .38); }
.kaart-accent { border-color: var(--line-strong); background: linear-gradient(135deg, rgba(29, 111, 224, .08), rgba(255, 255, 255, .92) 60%); }
.kaart-accent::before, .kaart-accent::after { width: 22px; height: 22px; opacity: 1; }
.kaart-lijst ul, .punten { display: grid; gap: 8px; margin-top: 10px; }
.kaart-lijst li, .punten li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.punten li { font-size: clamp(15px, 1.12vw, 17px); }
.kaart-lijst li::before, .punten li::before { content: ""; position: absolute; left: 0; top: .78em; width: 9px; height: 1px; background: var(--accent); }
.punten { gap: 14px; }
.punten-twee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 48px; }
.stat-rij { display: flex; flex-wrap: wrap; gap: 16px 44px; }
.stat-rij-kol { flex-direction: column; gap: 20px; }
.stat-getal { display: block; font: 300 clamp(30px, 3.3vw, 48px)/1 var(--f-kop); color: var(--ink-sterk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-label { display: block; margin-top: 7px; max-width: 30ch; font: 400 10.5px/1.45 var(--f-kop); letter-spacing: .17em; text-transform: uppercase; color: var(--ink-faint); }
.vraag-kader { position: relative; padding: 18px 20px; border: 1px solid var(--line-strong); background: linear-gradient(135deg, rgba(29, 111, 224, .08), rgba(255, 255, 255, .9) 60%); }
.vraag-label { font: 500 10px/1 var(--f-kop); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.vraag-kader p { margin-top: 8px; font: italic 400 clamp(17px, 1.45vw, 21px)/1.5 var(--f-tekst); color: var(--ink-sterk); }
.vraag-kader-groot p { font-size: clamp(20px, 2vw, 28px); max-width: 48ch; }

/* charts */
.grafiek { margin: 0; min-width: 0; }
.grafiek svg { display: block; width: 100%; height: auto; max-height: 50vh; }
.grafiek-hoog svg { max-height: calc(100vh - 330px); max-height: calc(100dvh - 330px); }
.bron { margin-top: 10px; font: 400 10px/1.5 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.svg-grafiek text { font-family: var(--f-kop); }
.as-tekst { font-size: 10px; fill: var(--ink-faint); letter-spacing: .05em; }
.as-kop { font-size: 10px; font-weight: 500; fill: var(--ink-soft); letter-spacing: .18em; text-transform: uppercase; }
.lbl { font-size: 11px; fill: var(--ink); letter-spacing: .03em; }
.lbl-klein { font-size: 9.5px; fill: var(--ink-soft); }
.lbl-case { font-weight: 600; fill: var(--ink-sterk); }
.lbl-fin { fill: var(--ink-faint); }
.val { font-size: 10.5px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.val-case { font-weight: 600; fill: var(--accent); }
.rij-fin { opacity: .42; }
.groei-x > *, .groei-y > *, .pop > *, .pop-y > * { transform-box: fill-box; }
.dia.actief .groei-x > * { transform-origin: left center; animation: groei-x .9s var(--uit) calc(var(--j, 0) * 30ms + 380ms) both; }
.dia.actief .groei-y > * { transform-origin: center bottom; animation: groei-y .9s var(--uit) calc(var(--j, 0) * 70ms + 380ms) both; }
.dia.actief .pop > * { transform-origin: center; animation: pop .45s var(--uit) calc(var(--j, 0) * 6ms + 380ms) both; }
.dia.actief .pop-y > * { transform-origin: center top; animation: groei-y .7s var(--uit) calc(var(--j, 0) * 110ms + 380ms) both; }
.dia.actief .teken-reeks > * { stroke-dasharray: 1; animation: teken .8s var(--in-uit) calc(var(--j, 0) * 22ms + 380ms) both; }
@keyframes groei-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes groei-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes teken { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legenda span { display: inline-flex; align-items: center; gap: 8px; font: 400 10px/1.3 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.legenda i { width: 14px; height: 10px; border: 1px solid transparent; }
.legenda .c1 { background: #161c40; } .legenda .c2 { background: #1d6fe0; } .legenda .c3 { background: #7fa9ec; } .legenda .c4 { background: #c9daf6; }
.legenda .e0 { border-color: var(--line-strong); } .legenda .e1 { background: rgba(29, 111, 224, .22); } .legenda .e2 { background: rgba(29, 111, 224, .55); } .legenda .e3 { background: var(--accent); }
.merkteken { display: inline-block; width: 10px; height: 14px; margin-right: 10px; vertical-align: -2px; }
.merkteken-case { border: 1.5px solid var(--accent); border-right: 0; }
.merkteken-fin { background: rgba(20, 27, 73, .22); }

/* timelines: a line that runs out, diamonds on it */
.tijdlijn { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 22px; padding-top: 30px; }
.tijdlijn::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--line-strong) 75%, transparent); transform-origin: left; }
.dia.actief .tijdlijn::before { animation: groei-x 1.3s var(--in-uit) .2s both; }
.tijdlijn li { position: relative; }
.tijdlijn li::before { content: ""; position: absolute; left: 0; top: -30px; width: 11px; height: 11px; transform: rotate(45deg); background: var(--bg); border: 1.5px solid var(--accent); box-shadow: 0 0 10px -2px var(--accent-glow); }
.tijdlijn li.tl-nu::before { background: var(--accent); animation: led-adem 2.4s ease-in-out infinite; }
.tl-jaar { display: block; font: 500 12px/1.3 var(--f-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.tl-titel { display: block; margin-top: 4px; font: 500 13px/1.35 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-sterk); }
.tijdlijn p { margin-top: 8px; font-size: 15px; }
.tijdlijn-v { grid-auto-flow: row; gap: 20px; padding: 0 0 0 30px; }
.tijdlijn-v::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; background: linear-gradient(var(--accent), var(--line-strong) 75%, transparent); transform-origin: top; }
.dia.actief .tijdlijn-v::before { animation-name: groei-y; }
.tijdlijn-v li::before { left: -30px; top: 3px; }

/* the problem: one firm, many pools */
.schema-partitie { display: grid; gap: 16px; }
.sp-firma { position: relative; padding: 38px 18px 18px; border: 1px dashed var(--line-strong); }
.sp-label { font: 500 10px/1.3 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); }
.sp-firma > .sp-label { position: absolute; top: 12px; left: 16px; }
.sp-entiteiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-e { display: grid; place-items: center; aspect-ratio: 1.7; border: 1px solid var(--line-strong); background: #fff; }
.sp-e i { width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(29, 111, 224, .4), rgba(29, 111, 224, .05) 70%); }
.sp-doel { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29, 111, 224, .08), 0 0 18px -4px var(--accent-glow); }
.dia.actief .sp-e { animation: pop .6s var(--uit) both; }
.dia.actief .sp-e:nth-child(2) { animation-delay: .5s; } .dia.actief .sp-e:nth-child(3) { animation-delay: .6s; }
.dia.actief .sp-e:nth-child(4) { animation-delay: .7s; } .dia.actief .sp-e:nth-child(5) { animation-delay: .8s; }
.dia.actief .sp-e:nth-child(6) { animation-delay: .9s; } .dia.actief .sp-e:nth-child(1) { animation-delay: .4s; }
.sp-schuldeiser { display: flex; align-items: center; gap: 12px; padding-left: calc(50% - 6px); }
.sp-pijl { position: relative; width: 1px; height: 34px; background: var(--accent); }
.sp-pijl::after { content: ""; position: absolute; left: -4px; top: -1px; border: 4.5px solid transparent; border-bottom: 6px solid var(--accent); border-top: 0; }
.dia.actief .sp-pijl { transform-origin: bottom; animation: groei-y .6s var(--uit) 1.2s both; }

/* steps: down a column, and across a route */
.stappen-v { display: grid; gap: 18px; }
.stappen-v li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; }
.sv-nr, .route-nr, .toets-nr, .deelvragen span {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 34px; height: 34px;
  font: 500 12px/1 var(--f-kop); color: var(--accent);
}
.sv-nr::before, .route-nr::before, .toets-nr::before, .deelvragen span::before {
  content: ""; position: absolute; inset: 6px; z-index: -1; transform: rotate(45deg);
  border: 1.5px solid currentColor; background: var(--bg); box-shadow: 0 0 10px -2px var(--accent-glow);
}
.stappen-v b, .route b { font: 500 13px/1.3 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-sterk); }
.stappen-v p { margin-top: 4px; font-size: 15px; }
.route { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.route li { position: relative; padding: 18px 16px 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .86); }
.route li:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 32px; z-index: 1; width: 9px; height: 9px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); transform: rotate(45deg); }
.route .route-nr { margin: -4px 0 8px -4px; }
.route p { margin-top: 6px; font-size: 14.5px; }
.route-knel { border-color: var(--geel-led) !important; background: linear-gradient(135deg, rgba(224, 161, 0, .1), rgba(255, 255, 255, .9) 60%) !important; }
.route-knel .route-nr { color: var(--geel); }
.route-knel .route-nr::before { border-color: var(--geel-led); box-shadow: 0 0 10px -2px rgba(224, 161, 0, .5); }
.deelvragen { display: grid; gap: 14px; }
.deelvragen li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; font: 400 clamp(16px, 1.3vw, 19px)/1.45 var(--f-tekst); color: var(--ink-sterk); }
.deelvragen-groot li { font-size: clamp(19px, 1.8vw, 26px); }
.toets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: toets; }
.toets li { position: relative; padding: 18px 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .88); }
.toets li:not(:last-child)::after { content: "+"; position: absolute; right: -12px; top: 26px; z-index: 1; width: 10px; text-align: center; font: 500 14px/1 var(--f-kop); color: var(--accent); }
.toets-nr { margin: -4px 0 8px -4px; }
.toets p { font-size: 15px; }
.bronnen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bronnen span { padding: 5px 9px; border: 1px solid var(--line); font: 400 10px/1.2 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.bronnen span:first-child { border-color: transparent; padding-left: 0; color: var(--accent); }

/* the eight methods */
.methoden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.methoden li { position: relative; display: flex; flex-direction: column; padding: 16px 16px 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .88); }
.m-code { font: 300 30px/1 var(--f-kop); color: rgba(29, 111, 224, .05); -webkit-text-stroke: 1px rgba(29, 111, 224, .5); }
.methoden b { margin-top: 8px; font: 500 12.5px/1.3 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-sterk); }
.methoden p { margin: 6px 0 10px; font-size: 14.5px; line-height: 1.5; }
.m-bron { margin-top: auto; font: 400 9.5px/1.4 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* two columns set against each other */
.vergelijk { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vg-kol { padding: 16px 16px 14px; border: 1px solid var(--line); border-top-width: 2px; background: rgba(255, 255, 255, .88); }
.vg-wel { border-top-color: var(--accent); }
.vg-niet { border-top-color: var(--rood); }
.vg-kop { font: 500 11px/1.2 var(--f-kop); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-sterk); }
.vg-kol ul { display: grid; gap: 7px; margin-top: 10px; }
.vg-kol li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; }
.vg-wel li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font: 500 12px/1.6 var(--f-kop); }
.vg-niet li::before { content: "✕"; position: absolute; left: 0; color: var(--rood); font: 500 11px/1.7 var(--f-kop); }
.dia .vg-voet { grid-column: 1 / -1; font-size: 14px; color: var(--ink-soft); }
.poorten { display: grid; gap: 8px; counter-reset: poort; }
.poorten li { position: relative; padding: 10px 14px 10px 92px; border: 1px solid var(--line); background: rgba(255, 255, 255, .88); font-size: 15px; }
.poorten li::before { counter-increment: poort; content: "Gate " counter(poort); position: absolute; left: 14px; top: 13px; font: 500 10px/1.2 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }

/* two poles */
.polen { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 28px; align-items: center; }
.pool { position: relative; padding: 24px 24px 20px; border: 1px solid var(--line-strong); background: linear-gradient(135deg, rgba(29, 111, 224, .07), rgba(255, 255, 255, .92) 60%); }
.pool-score { display: block; font: 300 clamp(40px, 4.6vw, 64px)/1 var(--f-kop); color: rgba(29, 111, 224, .05); -webkit-text-stroke: 1px rgba(29, 111, 224, .55); font-variant-numeric: tabular-nums; }
.pool h4 { margin-top: 10px; font: 400 clamp(18px, 1.7vw, 24px)/1.2 var(--f-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-sterk); }
.dia .pool-sub { margin-top: 4px; font: 500 10.5px/1.3 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.pool ul { display: grid; gap: 7px; margin-top: 14px; }
.pool li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; }
.pool li::before { content: ""; position: absolute; left: 0; top: .74em; width: 9px; height: 1px; background: var(--accent); }
.pool-as { display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 10px/1.2 var(--f-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.pool-as i { position: relative; width: 120px; height: 1px; background: linear-gradient(90deg, var(--accent), var(--ink-sterk)); }
.pool-as i::before, .pool-as i::after { content: ""; position: absolute; top: -4px; width: 8px; height: 8px; border: solid var(--accent); }
.pool-as i::before { left: 0; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }
.pool-as i::after { right: 0; border-width: 1.5px 1.5px 0 0; border-color: var(--ink-sterk); transform: rotate(45deg); }

/* a chain of entities, tier by tier */
.keten { display: grid; gap: 14px; }
.keten li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; }
.keten li:not(:last-child)::after { content: ""; position: absolute; left: calc(34px + 12px + 22px); top: 100%; width: 1px; height: 14px; background: var(--accent); }
.keten-t { font: 500 10.5px/1 var(--f-kop); letter-spacing: .16em; color: var(--ink-faint); }
.keten-n { padding: 9px 14px; border: 1px solid var(--line-strong); background: #fff; font: 400 12.5px/1.3 var(--f-kop); letter-spacing: .08em; color: var(--ink-sterk); }
.keten li:last-child .keten-n { border-color: var(--accent); box-shadow: 0 0 14px -4px var(--accent-glow); }
.keten-dicht { gap: 9px; }
.keten-dicht li:not(:last-child)::after { height: 9px; }
.keten-dicht .keten-n { padding: 6px 12px; font-size: 12px; }

/* the 403, round in a circle */
.cirkel { position: relative; height: 230px; max-width: 460px; }
.ck-ouder, .ck-dochter { position: absolute; left: 0; right: 0; padding: 12px 16px; border: 1px solid var(--line-strong); background: #fff; text-align: center; font: 500 12.5px/1.35 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-sterk); }
.ck-ouder { top: 0; }
.ck-ouder small { display: block; margin-top: 4px; font: 400 10px/1.4 var(--f-kop); letter-spacing: .12em; color: var(--ink-faint); }
.ck-dochter { bottom: 0; border-color: var(--accent); }
.ck-pijl { position: absolute; top: 76px; bottom: 50px; width: 1px; background: var(--accent); font: 500 10px/1.2 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.ck-pijl-1 { left: 26%; }
.ck-pijl-2 { right: 26%; background: var(--ink-sterk); color: var(--ink-sterk); }
.ck-pijl-1::after, .ck-pijl-2::after { content: ""; position: absolute; left: -4px; border: 4.5px solid transparent; }
.ck-pijl-1::after { bottom: -1px; border-top: 6px solid var(--accent); border-bottom: 0; }
.ck-pijl-2::after { top: -1px; border-bottom: 6px solid var(--ink-sterk); border-top: 0; }
.ck-pijl-1 { text-indent: 12px; line-height: 104px; }
.ck-pijl-2 { direction: rtl; text-indent: 12px; line-height: 104px; }
.dia.actief .ck-pijl-1 { transform-origin: top; animation: groei-y .7s var(--uit) .7s both; }
.dia.actief .ck-pijl-2 { transform-origin: bottom; animation: groei-y .7s var(--uit) 1.2s both; }

/* the wall and who gets through it */
.muur { display: grid; gap: 0; max-width: 520px; }
.muur-boven span { display: block; padding: 12px 16px; border: 1px solid var(--line-strong); background: #fff; text-align: center; font: 500 12.5px/1.3 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-sterk); }
.muur-lijn { position: relative; height: 54px; margin: 0 0; background: repeating-linear-gradient(90deg, var(--ink-sterk) 0 10px, transparent 10px 14px) center / 100% 3px no-repeat; }
.muur-gat { position: absolute; left: 4%; top: 0; bottom: 0; width: 34%; display: grid; place-items: center; background: var(--bg); border-left: 1px solid var(--accent); border-right: 1px solid var(--accent); font: 500 10px/1.2 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-align: center; }
.muur-onder { display: flex; flex-wrap: wrap; gap: 6px; }
.muur-onder span { padding: 7px 10px; border: 1px solid var(--line); font: 400 10.5px/1.2 var(--f-kop); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); background: rgba(255, 255, 255, .9); }
.muur-onder .mo-wel { flex-basis: 42%; border-color: var(--accent); color: var(--accent); }
.muur-onder .mo-niet { text-decoration: line-through; text-decoration-color: rgba(200, 16, 46, .5); }

/* scorecard and matrix */
.scorekaart, .matrix { width: 100%; border-collapse: collapse; }
.scorekaart th, .scorekaart td, .matrix th, .matrix td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.scorekaart thead th, .matrix thead th { font: 500 11px/1.3 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-sterk); border-bottom-color: var(--line-strong); }
.scorekaart tbody th { display: flex; align-items: center; gap: 14px; font: 400 13px/1.3 var(--f-kop); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-sterk); }
.scorekaart .m-code { width: 44px; font-size: 24px; }
.sc { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; }
.sc::before { content: ""; width: 26px; height: 9px; }
.sc-s { color: var(--accent); } .sc-s::before { background: var(--accent); }
.sc-l { color: var(--ink-soft); } .sc-l::before { background: rgba(29, 111, 224, .35); }
.sc-t { color: var(--ink-soft); } .sc-t::before { border: 1.5px solid var(--accent); }
.sc-a { color: var(--ink-faint); } .sc-a::before { background: repeating-linear-gradient(45deg, var(--line-strong) 0 1px, transparent 1px 4px); border: 1px solid var(--line-strong); }
.matrix tbody th { width: 22%; font: 500 11.5px/1.4 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-sterk); }
.matrix td { font-size: 15px; line-height: 1.5; }
.matrix tbody tr:nth-child(odd) td { background: rgba(29, 111, 224, .03); }

/* a spectrum with points on it */
.spectrum { position: relative; padding: 58px 0 74px; }
.sp-kop { position: absolute; top: 0; font: 500 11px/1.3 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-sterk); }
.sp-kop small { display: block; margin-top: 4px; max-width: 34ch; font: 400 10px/1.4 var(--f-kop); letter-spacing: .12em; color: var(--ink-faint); }
.sp-links { left: 0; } .sp-rechts { right: 0; text-align: right; }
.sp-rechts small { margin-left: auto; }
.sp-balk { position: relative; height: 4px; background: linear-gradient(90deg, var(--ink-sterk), var(--accent)); transform-origin: left; }
.dia.actief .sp-balk { animation: groei-x 1.1s var(--in-uit) .3s both; }
.sp-punt { position: absolute; top: 46px; transform: translateX(-50%); padding-top: 26px; font: 500 10.5px/1.3 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-sterk); text-align: center; white-space: nowrap; }
.sp-punt small { display: block; margin-top: 3px; font: 400 9.5px/1.3 var(--f-kop); letter-spacing: .1em; text-transform: none; color: var(--ink-faint); }
.sp-punt::before { content: ""; position: absolute; left: 50%; top: 7px; width: 11px; height: 11px; margin-left: -5.5px; transform: rotate(45deg); background: var(--bg); border: 1.5px solid var(--accent); box-shadow: 0 0 10px -2px var(--accent-glow); }
.dia.actief .sp-punt { animation: dia-in .6s var(--uit) both; }
.sp-a { left: 36%; animation-delay: .9s !important; } .sp-b { left: 50%; animation-delay: 1.05s !important; } .sp-c { left: 64%; animation-delay: 1.2s !important; }
.sp-zone { position: absolute; left: 30%; right: 26%; bottom: 0; padding-top: 8px; border-top: 1px dashed var(--line-strong); text-align: center; font: italic 400 14px/1.3 var(--f-tekst); color: var(--ink-soft); }
.spectrum-zaken { padding-bottom: 54px; }
.sp-1 { left: 10%; animation-delay: .9s !important; } .sp-2 { left: 40%; animation-delay: 1.05s !important; }
.sp-3 { left: 64%; animation-delay: 1.2s !important; } .sp-4 { left: 89%; animation-delay: 1.35s !important; }

/* ownership, and timing */
.eigendom { display: grid; justify-items: start; gap: 0; max-width: 420px; }
.eg-blok { padding: 12px 18px; min-width: 260px; border: 1px solid var(--line-strong); background: #fff; font: 500 12.5px/1.3 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-sterk); }
.eg-blok small { display: block; margin-top: 4px; font: 400 10px/1.3 var(--f-kop); letter-spacing: .14em; color: var(--accent); }
.eg-lt { border-color: var(--accent); box-shadow: 0 0 16px -6px var(--accent-glow); }
.eg-staat { border-color: var(--rood); }
.eg-pijl { position: relative; margin-left: 28px; padding: 12px 0 12px 16px; border-left: 1px solid var(--accent); font: 500 10.5px/1 var(--f-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.eg-claim { border-left-color: var(--rood); color: var(--rood); }
.timing { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; padding-top: 40px; }
.tm-as { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(var(--rood) 0 6px, transparent 6px 10px); }
.tm-dispuut { position: absolute; top: 0; left: 12px; white-space: nowrap; font: 500 10.5px/1 var(--f-kop); letter-spacing: .2em; text-transform: uppercase; color: var(--rood); }
.tm-zaak { position: relative; padding: 18px 18px 16px; border: 1px solid var(--line); border-top-width: 2px; background: rgba(255, 255, 255, .9); }
.tm-goed { border-top-color: var(--accent); }
.tm-fout { border-top-color: var(--rood); }
.tm-zaak b { font: 500 12.5px/1.3 var(--f-kop); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-sterk); }
.tm-zaak p { margin-top: 6px; font-size: 15px; }

@media (max-width: 1100px), (max-height: 760px) {
  .dia p, .punten li { font-size: 15px; }
  .methoden p { font-size: 13.5px; }
  .toets p, .route p { font-size: 14px; }
}
@media (max-width: 1100px) {
  .methoden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* on a phone a slide is one column that scrolls; a swipe turns the page */
@media (max-width: 820px) {
  .deck-balk { padding: 12px 16px 10px; gap: 12px; }
  .deck-titel { font-size: 10px; letter-spacing: .22em; }
  .deck-nu { font-size: 22px; }
  .deck-download { display: none; }
  .deck-voet { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
  .deck-voortgang { gap: 2px; }
  .dia { padding: 20px 18px 28px; }
  .dia-lijf { justify-content: flex-start; }
  .dia-titel .dia-lijf, .dia-citaat .dia-lijf { justify-content: center; }
  .duo, .duo-breed-links, .duo-breed-rechts, .trio, .vier, .vergelijk, .timing, .polen { grid-template-columns: minmax(0, 1fr); }
  .methoden, .punten-twee { grid-template-columns: minmax(0, 1fr); }
  .toets, .route { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
  .route li:not(:last-child)::after { right: auto; left: 30px; top: auto; bottom: -11px; transform: rotate(135deg); }
  .toets li:not(:last-child)::after { right: auto; left: 22px; top: auto; bottom: -13px; }
  .tijdlijn { grid-auto-flow: row; gap: 18px; padding: 0 0 0 30px; }
  .tijdlijn::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; background: linear-gradient(var(--accent), var(--line-strong) 75%, transparent); transform-origin: top; }
  .dia.actief .tijdlijn::before { animation-name: groei-y; }
  .tijdlijn li::before { left: -30px; top: 3px; }
  .grafiek svg, .grafiek-hoog svg { max-height: none; }
  .pool-as { flex-direction: row; justify-content: center; }
  .pool-as i { width: 60px; }
  .timing { gap: 18px; padding: 0; }
  .tm-as { display: none; }
  .tm-dispuut { position: static; display: block; order: 0; }
  .tm-goed::after { content: "Before the dispute"; position: absolute; right: 12px; top: 10px; font: 500 9.5px/1 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
  .tm-fout::after { content: "After the dispute"; position: absolute; right: 12px; top: 10px; font: 500 9.5px/1 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--rood); }
  .spectrum { padding: 0 0 0 28px; display: grid; gap: 14px; }
  .sp-kop, .sp-punt, .sp-zone { position: static; transform: none; text-align: left; white-space: normal; }
  .sp-rechts small { margin-left: 0; }
  .sp-balk { position: absolute; left: 4px; top: 0; bottom: 0; width: 4px; height: auto; background: linear-gradient(var(--ink-sterk), var(--accent)); }
  .dia.actief .sp-balk { transform-origin: top; animation-name: groei-y; }
  .sp-punt { padding: 0 0 0 4px; }
  .sp-punt::before { left: -28px; top: 2px; margin: 0; }
  .sp-zone { border-top: 0; padding: 0; }
  .scorekaart th, .scorekaart td { padding: 8px 6px; }
  .scorekaart tbody th { gap: 8px; font-size: 11px; letter-spacing: .08em; }
  .scorekaart .m-code { width: 30px; font-size: 18px; }
  .sc { font-size: 9px; letter-spacing: .1em; }
  .sc::before { width: 14px; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: auto; }
  .matrix thead { display: none; }
  .matrix tbody th { width: auto; padding-top: 16px; border-bottom: 0; }
  .matrix td { padding: 6px 0 6px 16px; border-bottom: 0; background: none !important; }
  .matrix td::before { display: block; font: 500 9.5px/1.4 var(--f-kop); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
  .matrix td:nth-of-type(1)::before { content: "Factoring"; }
  .matrix td:nth-of-type(2)::before { content: "Covered bonds · CBC"; }
  .matrix td:nth-of-type(3)::before { content: "Financial collateral"; }
  .cirkel { height: 250px; }
  .stat-rij { gap: 16px 28px; }
  .titel-meta li { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .dia.actief .b, .dia.actief .sp-punt { animation: none; opacity: 1; transform: none; }
}

/* ---------- the easter egg: a code box and a beard trimmer (app.js) ---------- */
.code { position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; background: rgba(243, 245, 249, .4); }
.code[hidden] { display: none; }
.code-vak {
  position: relative; width: min(340px, calc(100vw - 40px)); padding: 24px 26px 16px;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 16px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1px 16px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 16px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 1px 16px no-repeat,
    var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 26px 64px -18px rgba(20, 27, 73, .3);
  animation: fadeUp .45s var(--uit) both;
}
.code-vak.schud { animation: schud .4s; }
@keyframes schud { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.code-kop { font: 500 10.5px/1.2 var(--f-kop); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-faint); }
.code-kop::before { content: "// "; color: var(--accent); }
.code-vak input {
  width: 100%; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: 400 18px/1.2 var(--f-kop); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-sterk);
  background: rgba(255, 255, 255, .94); transition: border-color .25s, box-shadow .3s;
}
.code-vak input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 20px -8px var(--accent-glow); }
.code-status { min-height: 1.2em; margin-top: 10px; font: 500 10.5px/1.2 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; }
.code-status.goed { color: var(--accent); }
.code-status.fout { color: var(--rood); }

#tondeuse {
  position: fixed; left: 0; top: 0; z-index: 6; width: 44px; height: 124px; pointer-events: none;
  transform-origin: 22px 2px; opacity: 0; transition: opacity .15s;
  filter: drop-shadow(0 12px 14px rgba(11, 16, 48, .28));
}
#tondeuse svg { display: block; }
#tondeuse.zichtbaar { opacity: 1; }
#tondeuse.snijdt svg { animation: zoem .06s linear infinite; }
@keyframes zoem { 50% { transform: translate(.8px, -.6px); } }
/* while shaving: the trimmer is the cursor over the face; the page does not scroll or zoom under a finger */
html.scheren, html.scheren body, html.scheren #face { touch-action: none; overscroll-behavior: none; }
html.scheren body:not(.open) { cursor: none; }
html.scheren #menu, html.scheren #paneel, html.scheren #klok, html.scheren .scheer-uit, html.scheren .code { cursor: auto; }
.scheer-uit { position: fixed; z-index: 6; left: 50%; bottom: 22px; transform: translateX(-50%); }
.scheer-uit[hidden] { display: none; }
/* while shaving the readout steps aside: on a phone it sits right under the head */
html.scheren #readout > div { opacity: 0; transition-delay: 0s; }

/* ---------- footer ---------- */
#voet {
  position: fixed; z-index: 4; left: var(--rand); right: var(--rand); bottom: 18px;
  display: flex; justify-content: space-between; gap: 16px;
  font: 400 10px/1.2 var(--f-kop); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint);
  opacity: 0; transition: opacity 1s .4s;
}
body.fase-menu #voet { opacity: 1; }

/* framed by another site: nothing to see or click (app.js) */
html.ingelijst body { visibility: hidden; }

/* ---------- without JS or without WebGL ---------- */
html.no-js #klok, html.no-js #menu li, html.no-js .merk, html.no-js #voet { opacity: 1; transform: none; }
html.no-js body { overflow: auto; }
html.no-js #paneel { position: relative; left: auto; top: auto; bottom: auto; width: auto; max-width: 820px; margin: 120px auto 80px; opacity: 1; visibility: visible; transform: none; }
html.no-js .pane[hidden] { display: block; }
html.no-js #lock, html.no-js #readout, html.no-js #face, html.no-js .sluit, html.no-js .vraag, html.no-js #h-vraag { display: none; }
html.no-js #menu { position: absolute; top: 260px; }
body.geen-gl #readout { display: none; }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
  :root { --menu-b: 250px; }
  .merk-naam { font-size: 24px; }
}
@media (max-width: 820px) {
  body { overflow: hidden; }
  #klok { top: 16px; right: 16px; }
  .klok-tijd { font-size: 30px; margin-top: 4px; }
  .klok-datum { font-size: 9.5px; letter-spacing: .24em; }
  .klok-zone { display: none; }
  /* no backdrop-filter here: it would become the containing block of the fixed name */
  #menu { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: auto; padding: 0 0 env(safe-area-inset-bottom); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); }
  .merk { position: fixed; top: 16px; left: 16px; margin: 0; }
  .merk-naam { font-size: 18px; letter-spacing: .22em; }
  .merk-sub { margin-top: 8px; font-size: 9.5px; }
  #menu ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-left: 0; }
  #menu li a { flex-direction: column; gap: 4px; padding: 12px 4px 12px; border-left: 0; border-top: 2px solid transparent; margin: 0; text-align: center; font-size: 9.5px; letter-spacing: .1em; justify-content: center; }
  #menu li a::after { display: none; }
  #menu li a[aria-current="page"] { border-top-color: var(--accent); }
  .tab-label { display: none; }
  .tab-kort { display: inline; }
  #voet { display: none; }
  #paneel { left: 0; right: 0; top: 84px; bottom: calc(58px + env(safe-area-inset-bottom)); max-width: none; padding: 26px 18px 34px; border-left: 0; border-right: 0; transform: translateY(18px); background: var(--panel); }
  .pane-nr { position: static; display: block; margin-bottom: 8px; font-size: 44px; }
  .pane-kop h2 { font-size: 21px; letter-spacing: .2em; }
  .pane-kop > h2 { padding-right: 40px; }
  .pane-kop > .pane-sub { padding-right: 0; }
  .cv-item { grid-template-columns: 1fr; gap: 6px; }
  .cv-duo { grid-template-columns: 1fr; }
  .veld-duo { grid-template-columns: 1fr; }
  .stroom.spoor { margin: 0 16px 0 22px; }
  .kanaal { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .kanaal-label { grid-column: 1 / -1; }
  .kanaal-waarde { font-size: 18px; }
  .inleiding { font-size: 16.5px; }
  #readout { font-size: 9.5px; }
  #readout > div { grid-template-columns: 88px auto; padding: 5px 0; }
  #watermerk { font-size: calc((100vw - 36px) / 6.7); bottom: 60px; }
  .scheer-uit { bottom: auto; top: 76px; }
}

/* Whoever turned animations off gets the same screens, standing still. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .sliert { display: none; }
}

/* ---------- print: the CV on paper ---------- */
@media print {
  @page { margin: 16mm 16mm; }
  body { overflow: visible; background: #fff; font-size: 10.5pt; }
  #decor, #face, #lock, #readout, #klok, #menu, #voet, .sluit, .pane-nr, .pane-kop .knop { display: none !important; }
  #paneel { position: static; width: auto; padding: 0; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; overflow: visible; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pane { display: none !important; }
  #cv { display: block !important; }
  .pane > * { animation: none !important; }
  .cv-item { break-inside: avoid; padding: 8px 0; }
  .cv-kern li, .cv-plat li { font-size: 10.5pt; }
  .blok { margin: 16px 0 6px; }
  a { color: inherit; }
}