/* ================================================================
SPAIK DECK — de enige slide-CSS van /spaik-design
Link na tokens.css en print-safe.css:
Waarden komen uit de --slide-* tokens in tokens.css, nooit letterlijk.
Elk recept heeft zijn eigen namespace (.r-); de catalogus staat in
references/slide-recepten.md, de gerenderde versie in examples/deck-kit.html.
================================================================ */
@font-face{ font-family:"IvyPresto Headline"; src:url("fonts/IvyprestoHeadline-Thin.woff2") format("woff2"); font-weight:100; }
@font-face{ font-family:"IvyPresto Headline"; src:url("fonts/IvyprestoHeadline-Regular.woff2") format("woff2"); font-weight:400; }
@font-face{ font-family:"PP Agrandir Tight"; src:url("fonts/PPAgrandir-TightMedium.otf") format("opentype"); font-weight:500; }
@font-face{ font-family:"PP Agrandir Tight"; src:url("fonts/PPAgrandir-TightBold.otf") format("opentype"); font-weight:700; }
/* Zonder deze regel cropt Chrome naar letter-formaat, ook bij één slide. */
@page { size: 1280px 720px; margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
p, h1, h2, h3, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
/* ──────────── STAGE ────────────
Zonder .deck-wrapper staan slides gewoon onder elkaar (losse slide, render).
Met .deck is het een presentatie: gestapeld, geschaald, één tegelijk. */
.slide {
position: relative;
width: var(--slide-w); height: var(--slide-h);
overflow: hidden;
display: flex; flex-direction: column;
padding: var(--slide-pad);
background: var(--bg-paper);
color: var(--ink-primary);
font-family: var(--font-body);
font-size: var(--slide-body);
line-height: 1.4;
}
/* Achter de geschaalde slide. Presenter-chrome, geen slide-inhoud; weg in print. */
html:has(.deck), body:has(.deck) { background: #1A1816; height: 100%; overflow: hidden; }
.deck { position: fixed; inset: 0 0 56px 0; } /* onderste band is voor de toolbar */
:root:fullscreen .deck { bottom: 0; }
.deck .slide {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(var(--s, 1));
/* Wisselen via visibility/opacity, nooit via display: recepten zetten zelf
display:flex en dan staan alle slides tegelijk in beeld. */
visibility: hidden; opacity: 0; pointer-events: none;
transition: opacity .35s ease, visibility .35s ease;
}
.deck .slide.active { visibility: visible; opacity: 1; pointer-events: auto; }
/* ──────────── VASTE ONDERDELEN ──────────── */
/* M10: de mark staat op élke slide. Zwart op licht, Logomark-orange op donker. */
.slide > .mark {
position: absolute; top: 50px; right: 72px; z-index: 3;
height: var(--slide-mark); width: auto; display: block;
}
.eyebrow {
font-family: var(--font-primary); font-weight: 500;
font-size: var(--slide-label); letter-spacing: .06em; text-transform: uppercase;
color: var(--spaik-orange-wcag);
margin-bottom: 14px;
}
.slide h1 {
font-size: var(--slide-cover);
line-height: var(--slide-line-display);
letter-spacing: -0.01em;
max-width: 17ch;
text-wrap: balance;
}
.slide h2 {
font-family: var(--font-specific); font-weight: 100;
font-size: var(--slide-title);
line-height: var(--slide-line-display);
letter-spacing: -0.01em;
color: var(--fg-1);
max-width: 34ch;
text-wrap: balance;
}
.slide h3 {
font-family: var(--font-specific); font-weight: 100;
font-size: var(--slide-h3);
line-height: 1.15;
color: var(--fg-1);
}
/* Display-koppen tekenen onder hun regelbox: de onderstok van g, j, p en y
valt buiten de doos en landt dan op het blok eronder zonder dat R8 of
fits.sh het ziet (FedEx 20 aug 2026). Padding neemt die inkt op in de doos;
de ruimte eronder is daarop afgestemd (.kop, de lead onder een h1). */
.slide h1 { padding-bottom: .22em; }
.slide h2 { padding-bottom: .2em; }
.slide p { color: var(--fg-2); }
/* Hiërarchie onder een kop in een rij, kaart of fase: de kop draagt, de tekst
ondersteunt. Een stap kleiner en zachter, anders lezen ze als even groot
(IvyPresto Thin oogt kleiner dan SF op dezelfde px). */
.slide h3 + p, .slide h3 + ul { font-size: var(--slide-small); line-height: 1.45; color: var(--ink-soft); }
.slide b, .slide strong { font-family: var(--font-primary); font-weight: 500; color: var(--fg-1); }
.lead { font-size: var(--slide-lead); line-height: 1.35; color: var(--fg-2); max-width: 40ch; }
.klein { font-size: var(--slide-small); line-height: 1.45; }
.label {
font-family: var(--font-primary); font-weight: 500;
font-size: var(--slide-label); letter-spacing: .06em; text-transform: uppercase;
color: var(--ink-muted);
}
/* Kapitalen zijn voor wat een as of kolom benoemt (maanden, kolomkoppen,
legenda). Datum, status en het label van een kaart zijn gewone woorden:
sentence case op leesbare maat. Een slide vol 15px-kapitalen in grijs oogt
als formulier (impeccable-critique, 25 sep 2026). */
.meta {
font-family: var(--font-primary); font-weight: 500;
font-size: var(--slide-meta); line-height: 1.25; letter-spacing: 0;
color: var(--ink-muted);
}
/* Eén zin die het punt van de slide maakt, boven een grid dat zijn eigen
hoogte houdt. Vult de ruimte met betekenis in plaats van met een uitgerekt
pastelvlak (impeccable-critique, 25 sep 2026). */
.slide .stelling {
font-family: var(--font-specific); font-weight: 100;
font-size: var(--slide-stelling); line-height: var(--slide-line-display);
letter-spacing: -0.01em; color: var(--fg-1);
max-width: 30ch; text-wrap: balance; padding-bottom: .2em;
}
/* In het werkvlak zweeft de stelling in de vrije ruimte tussen kop en grid,
zodat er geen lege band van een kwart slide ontstaat. */
.vul > .stelling { margin-block: auto; }
/* Kop van een content-slide. Titel→eerste inhoud ≥30px, overal gelijk. */
.kop { margin-bottom: 23px; padding-right: 64px; } /* 34px zichtbaar, 11px zit al in de h2-padding */
/* Kruimelpad boven de kop: hoofdstuk · stap · deze slide, het laatste deel vet.
Zo weet de lezer waar hij zit, ook als hij twee tellen niet oplette (JJ en
Jochem, 29 sep 2026). Geen oranje: dat is de eyebrow van een sectie-opener. */
.kop > .kruimel { font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-meta); line-height: 1.25; color: var(--ink-muted); margin-bottom: 10px; }
.kop > .kruimel b { color: var(--fg-1); }
/* Het werkvlak onder de kop vult de stage. Op een slide mag dat (de stage is
altijd groter dan de inhoud); op een printpagina niet, zie S9. */
.vul { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Streep onder het payoff-woord van een kop: kleur vraagt aandacht voor wat
de kop beweert. Eén per kop. Op body-slides oranje; op de cover mag het de
klantkleur zijn (style="--streep: var(--accent-sig)"). */
.streep {
text-decoration: underline;
text-decoration-color: var(--streep, var(--spaik-orange));
text-decoration-thickness: 3px;
text-underline-offset: .16em;
text-decoration-skip-ink: none;
}
/* Oranje uitkomst of badge: tekst plus outline, nooit een vlak (M1). */
.badge {
display: inline-block; align-self: flex-start;
font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-label);
letter-spacing: .04em; color: var(--spaik-orange-wcag);
border: 1.5px solid var(--spaik-orange); border-radius: var(--radius-full);
padding: 5px 12px;
}
/* ──────────── ACHTERGRONDEN ──────────── */
/* Lichte gradient: sectie-opener, cover, pauze, slot. Als ![]()
, dekking .62.
01-06: kleurmassa rechtsonder (kop links). 07: gespiegeld (kop rechts). */
.slide > .bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: .62; z-index: 0;
}
/* Til de inhoud boven de achtergrond, maar sluit .bg én .mark uit: anders
verliest de absoluut gepositioneerde mark zijn anker. */
.slide > *:not(.bg):not(.mark) { position: relative; z-index: 1; }
/* Donker vlak: nooit plat (M2). Gloed plus dot-textuur. */
.donker {
isolation: isolate;
color: var(--ink-inverse);
background:
/* Eén warme gloedbron, niet oranje plus blauw: die combinatie leest als
neon op donker, de bekendste AI-tell (impeccable-critique, besluit
Jochem 25 sep 2026). Maximaal één donker vlak per deck, gate M2. */
radial-gradient(120% 90% at 12% 0%, rgba(255,113,80,0.18) 0%, rgba(255,113,80,0) 55%),
linear-gradient(135deg, #1A1816 0%, #0B0B0B 60%, #14110F 100%);
}
.donker::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background-image: radial-gradient(rgba(243,237,237,0.06) 1px, transparent 1.4px);
background-size: 22px 22px; opacity: .5;
-webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0,0,0,0.15) 70%, transparent 100%);
mask-image: linear-gradient(135deg, #000 0%, rgba(0,0,0,0.15) 70%, transparent 100%);
pointer-events: none; z-index: 0;
}
.donker h1, .donker h2, .donker h3, .donker b { color: var(--ink-inverse); }
.donker p { color: rgba(243,237,237,.78); }
/* Ink-beelden hebben een warmere, lichtere achtergrond dan het papier. Multiply
plus een tik brightness laat die achtergrond in #F3EDED opgaan, zodat het
beeld geen blok op de slide wordt. Geldt voor elk ![]()
. */
.slide img.ink { mix-blend-mode: multiply; filter: brightness(1.05); }
/* Multiply mengt alleen binnen de eigen stacking context: de ouder moet dus
zelf papier zijn, anders mengt het beeld met transparant en gebeurt er niets. */
.slide .beeld { background: var(--bg-paper); }
/* ──────────── VLAKKEN EN TINTEN ────────────
Een component zet zijn standaardvlak via :where() (specificiteit 0), een
tint zet --vlak met een attribuut (0,1,0). De tint wint dus altijd, hoe
specifiek het recept ook is. Nooit background direct op een recept-element
zetten: gebruik var(--vlak). */
:where(.vlak) { --vlak: var(--bg-card-tint); background: var(--vlak); border: var(--hairline); border-radius: var(--radius-md); }
[data-tint] { border-color: transparent; }
[data-tint="groen"] { --vlak: var(--spaik-pastel-green); }
[data-tint="blauw"] { --vlak: var(--spaik-sky-blue); }
[data-tint="klei"] { --vlak: var(--spaik-clay); }
[data-tint="lila"] { --vlak: var(--spaik-lilac); }
[data-tint="rood"] { --vlak: var(--spaik-pastel-red); }
[data-tint="kaart"] { --vlak: var(--bg-card-tint); border-color: rgba(11,11,11,.10); }
[data-tint="leeg"] { --vlak: transparent; border: var(--hairline); }
[data-tint] p { color: var(--ink-soft); }
/* =================================================================
RECEPTEN
Volgorde = volgorde in de kit. Nieuw recept: eigen namespace, dichtheids-
contract in slide-recepten.md, en een slide in examples/deck-kit.html.
================================================================= */
/* ── cover-gradient ── two-clause kop, max 4 tekst-elementen (S2). */
.r-cover-gradient { padding: 150px 96px 64px; }
.r-cover-gradient .klant { position: absolute; top: 46px; left: 72px; height: 40px; width: auto; }
.r-cover-gradient .lead { margin-top: 10px; max-width: 34ch; color: var(--fg-2); }
.r-cover-gradient .proof-strip { margin-top: auto; font-size: var(--slide-label); color: var(--fg-2); }
/* ── tijdlijnrijen ── chronologie zonder kaarten. Max 4 rijen, 1 zin per rij. */
.r-tijdlijnrijen .rijen { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.r-tijdlijnrijen .rijen { border-top: var(--hairline); padding-top: 12px; }
/* Een verticale as verbindt de stippen; horizontale lijnen per rij zouden
hem kruisen, dus die zijn weg. Datum en kop delen een basislijn. */
.r-tijdlijnrijen .rij {
--stip-y: 48px; /* hart van de stip vanaf de bovenkant van de rij, gemeten 29 sep 2026 */
position: relative;
display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: baseline;
padding: 18px 0;
}
/* Elke rij tekent zijn eigen stuk as binnen zijn doos (anders loopt hij over
zijn buur en faalt R8): de eerste vanaf zijn stip, de laatste tot zijn stip. */
.r-tijdlijnrijen .rij::before {
content: ""; position: absolute; left: 6px; width: 2px; top: 0; bottom: 0;
background: rgba(11,11,11,.18);
}
.r-tijdlijnrijen .rij:first-child::before { top: var(--stip-y); }
.r-tijdlijnrijen .rij:last-child::before { bottom: auto; height: var(--stip-y); }
.r-tijdlijnrijen .rij:only-child::before { content: none; }
/* De datum is gewone tekst met een stip ervoor, de dot uit de logomark:
inkt voor wat al gebeurd is, oranje voor het nu (data-nu), net als de
zwarte en de oranje mark. Geen gekleurde pil per rij: vier tints naast
elkaar lazen als regenboog, niet als tijd, en een pastel stip viel weg
tegen het papier (Jochem, 29 sep 2026). */
.r-tijdlijnrijen .rij .meta {
justify-self: start;
position: relative; padding-left: 26px; color: var(--fg-1);
}
.r-tijdlijnrijen .rij .meta::before {
content: ""; position: absolute; left: 0; top: .32em;
width: 14px; height: 14px; border-radius: 50%;
background: var(--fg-1);
}
.r-tijdlijnrijen .rij .meta[data-nu]::before { background: var(--spaik-orange); left: 9px; top: calc(.32em + 4px); }
/* Het nu is de enige pil op deze slide: oranje rand op papier (M1: oranje
nooit als vlak). De pil schuift 9px naar links zodat de stip op de as blijft. */
.r-tijdlijnrijen .rij .meta[data-nu] {
margin-left: -10.5px; padding: 4px 14px 4px 35px;
border: 1.5px solid var(--spaik-orange); border-radius: var(--radius-full);
background: var(--bg-paper);
}
.r-tijdlijnrijen .rij h3 { margin-bottom: 8px; }
.r-tijdlijnrijen .rij p { max-width: 52ch; }
/* ── investering ── drie opties, één springt eruit (S8: hiërarchie). */
/* Het grid houdt zijn eigen hoogte en zakt naar onder; de lucht staat tussen
kop en opties, niet als leeg pastel in de kaart (impeccable-critique, 25 sep 2026). */
.r-investering .opties { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.r-investering .optie { display: flex; flex-direction: column; }
.r-investering .optie .top { display: flex; justify-content: space-between; align-items: center; height: 34px; margin-bottom: 8px; }
/* De prijs staat vrij op het papier, boven de kaart: een getal dat het oog
trekt staat nooit in een pastelvlak (S11, Jochem 29 sep 2026). Het vlak
draagt wat je krijgt, en alleen bij het voorstel is het gevuld (S12). */
.r-investering .prijs {
font-family: var(--font-specific); font-weight: 100;
font-size: var(--slide-stat); line-height: var(--slide-line-display); letter-spacing: -0.02em; color: var(--fg-1);
}
.r-investering .per { font-size: var(--slide-small); color: var(--ink-muted); margin-bottom: 18px; }
.r-investering .wat { flex: 1; padding: 24px 28px 26px; }
.r-investering .wat ul { display: flex; flex-direction: column; gap: 10px; }
.r-investering .wat li { font-size: var(--slide-small); line-height: 1.35; color: var(--ink-soft); padding-left: 22px; position: relative; }
.r-investering .wat li::before { content: "·"; position: absolute; left: 4px; color: var(--spaik-orange); font-weight: 700; }
.r-investering .optie.voorstel .wat { outline: 1.5px solid var(--fg-1); outline-offset: -1.5px; }
/* Wat voor alle opties geldt: borderloos onder het grid, geen tweede kaartrij. */
.r-investering .noot { margin-top: 20px; font-size: var(--slide-small); color: var(--ink-muted); }
/* ── demo-browser ── het echte scherm in een browserraam; kop en 3 punten links. */
.r-demo-browser { flex-direction: row; gap: 52px; align-items: stretch; }
.r-demo-browser .links { flex: 0 0 400px; display: flex; flex-direction: column; }
.r-demo-browser .links .kop { padding-right: 0; }
.r-demo-browser .punten { display: flex; flex-direction: column; gap: 26px; }
.r-demo-browser .punten li { display: grid; grid-template-columns: 40px 1fr; line-height: 1.35; color: var(--fg-2); }
.r-demo-browser .punten .n { font-family: var(--font-specific); font-weight: 100; font-size: var(--slide-h3); line-height: 1.05; color: var(--spaik-orange-wcag); }
.r-demo-browser .raam {
flex: 1; min-width: 0; margin-top: 52px;
display: flex; flex-direction: column;
border: 1px solid rgba(11,11,11,.14); border-radius: 14px; overflow: hidden;
background: var(--bg-card);
}
.r-demo-browser .balk {
flex: 0 0 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px;
border-bottom: 1px solid rgba(11,11,11,.08); background: var(--bg-card-tint);
}
.r-demo-browser .balk i { width: 10px; height: 10px; border-radius: 50%; background: rgba(11,11,11,.16); }
.r-demo-browser .balk .url {
margin-left: 14px; flex: 1; height: 22px; border-radius: 6px; background: rgba(11,11,11,.05);
font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); line-height: 22px; padding: 0 10px;
}
.r-demo-browser .scherm { flex: 1; min-height: 0; position: relative; }
.r-demo-browser .scherm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* Plaatshouder tot het echte screenshot er is: vervang .schets door ![]()
. */
.r-demo-browser .schets { position: absolute; inset: 0; display: grid; grid-template-columns: 150px 1fr; }
.r-demo-browser .schets .nav { border-right: 1px solid rgba(11,11,11,.06); padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; }
.r-demo-browser .schets .nav i { height: 10px; border-radius: 5px; background: rgba(11,11,11,.08); }
.r-demo-browser .schets .nav i:first-child { background: rgba(11,11,11,.18); width: 70%; }
.r-demo-browser .schets .main { padding: 22px 24px; display: grid; grid-template-rows: 18px 1fr 1fr; gap: 16px; }
.r-demo-browser .schets .main i { border-radius: 8px; background: rgba(11,11,11,.05); }
.r-demo-browser .schets .main i:first-child { width: 40%; background: rgba(11,11,11,.14); }
.r-demo-browser .schets .main i:nth-child(2) { --vlak: var(--spaik-pastel-green); background: var(--vlak); opacity: .55; }
/* ── cover-ink ── illustratie links tot de rand, titel rechts, proof-strip erboven. */
.r-cover-ink { padding: 0; flex-direction: row; }
/* Split met beeld: altijd een staande ink (A-verhouding, 0,71) in een vak van
44% breed (0,78). Dan valt er hooguit ~10% van de plaat weg; een liggende ink
verloor hier de helft (S10). Liggend beeld? Recept ink-liggend. */
.r-cover-ink .beeld { flex: 0 0 44%; position: relative; overflow: hidden; }
.r-cover-ink .beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.r-cover-ink .beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243,237,237,0) 72%, var(--bg-paper) 100%); }
.r-cover-ink .tekst { flex: 1; min-width: 0; padding: 150px 72px 64px 36px; display: flex; flex-direction: column; }
.r-cover-ink .proof-strip { font-size: var(--slide-label); color: var(--fg-2); margin-bottom: 26px; }
.r-cover-ink h1 { font-size: 70px; max-width: 13ch; }
.r-cover-ink .lead { margin-top: 12px; }
.r-cover-ink .datum { margin-top: auto; }
/* ── agenda ── leest kolomsgewijs: links boven→onder, dan rechts. Max 8 blokken. */
.r-agenda .blokken { flex: 1; display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-template-columns: 1fr 1fr; column-gap: 56px; align-content: start; }
.r-agenda .blok { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 18px 16px; border-bottom: var(--hairline); border-radius: 0; }
.r-agenda .blok:nth-child(4n+1) { border-top: var(--hairline); }
.r-agenda .blok .tijd { font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-small); color: var(--fg-1); padding-top: 3px; }
.r-agenda .blok b { display: block; font-weight: 500; font-size: var(--slide-body); line-height: 1.25; }
.r-agenda .blok span.klein { color: var(--ink-muted); }
/* Het hoofdmoment van de dag krijgt het vlak; pauzes gedempt op tijd én titel. */
.r-agenda .blok[data-tint] { background: var(--vlak); border-color: transparent; border-radius: var(--radius-sm); }
.r-agenda .blok.pauze .tijd, .r-agenda .blok.pauze b { color: var(--ink-muted); font-family: var(--font-body); font-weight: 400; }
/* ── sectie-gradient ── deel-overgang. Eyebrow, korte kop, één regel belofte. */
.r-sectie-gradient { padding: 0 96px; justify-content: center; }
.r-sectie-gradient h1 { font-size: 76px; }
.r-sectie-gradient .lead { margin-top: 8px; }
/* ── sectie-ink ── deel-overgang met beeld: tekst links, illustratie vult rechts. */
.r-sectie-ink { padding: 0; flex-direction: row; }
.r-sectie-ink .tekst { flex: 0 0 56%; padding: 0 24px 0 72px; display: flex; flex-direction: column; justify-content: center; }
.r-sectie-ink .tekst h2 { font-size: 64px; }
.r-sectie-ink .tekst .lead { margin-top: 10px; }
.r-sectie-ink .beeld { flex: 1; position: relative; overflow: hidden; }
.r-sectie-ink .beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; }
.r-sectie-ink .beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-paper) 0%, rgba(243,237,237,0) 22%); }
/* ── quote ── één uitspraak groot, max 3 regels (S6), attributie naam + rol. */
.r-quote { padding: 62px 120px 64px 132px; justify-content: center; }
.r-quote blockquote { position: relative; font-family: var(--font-specific); font-weight: 100; font-size: 54px; line-height: 1.18; letter-spacing: -0.01em; color: var(--fg-1); max-width: 26ch; }
/* Het Nederlandse openingsteken „ hoort laag, op de basislijn van de eerste
regel, vlak voor het eerste woord. Los tussen de regels las hij als een
sluitteken ”. Inline met line-height 0 zet hem op die basislijn zonder de
regel hoger te maken; de negatieve marge laat hem links naast de tekst
hangen (impeccable-critique, 25 sep 2026). */
.r-quote blockquote::before { content: "\201E"; display: inline-block; width: 46px; margin-left: -46px; font-size: 120px; line-height: 0; color: var(--spaik-orange); }
.r-quote .wie { margin-top: 30px; font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-small); color: var(--fg-1); }
.r-quote .wie span { font-family: var(--font-body); font-weight: 400; color: var(--ink-muted); }
.r-quote .payoff { margin-top: 56px; padding-top: 22px; border-top: var(--hairline); font-size: var(--slide-lead); color: var(--fg-2); max-width: 44ch; }
/* ── werkvorm ── de opdracht voor de zaal: wat, hoe lang, met wie, wat lever je op. */
.r-werkvorm { flex-direction: row; gap: 56px; }
.r-werkvorm .links { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.r-werkvorm .links .kop { padding-right: 0; }
.r-werkvorm .stappen { display: flex; flex-direction: column; }
.r-werkvorm .stappen li { display: grid; grid-template-columns: 48px 1fr; padding: 22px 0; border-bottom: var(--hairline); color: var(--fg-2); line-height: 1.35; }
.r-werkvorm .stappen li:first-child { border-top: var(--hairline); }
.r-werkvorm .stappen .n { font-family: var(--font-specific); font-weight: 100; font-size: var(--slide-h3); line-height: 1.05; color: var(--spaik-orange-wcag); }
/* De tijd is het getal van de opdracht en staat dus vrij op het papier (S11);
het vlak eronder draagt de afspraken: met wie, en wat je oplevert. */
.r-werkvorm .kader { flex: 0 0 380px; margin-top: 52px; display: flex; flex-direction: column; }
.r-werkvorm .kader .tijd { font-family: var(--font-specific); font-weight: 100; font-size: var(--slide-stat-xl); line-height: var(--slide-line-display); letter-spacing: -0.03em; color: var(--fg-1); }
.r-werkvorm .kader .tijd small { font-size: 36px; letter-spacing: 0; margin-left: 6px; }
.r-werkvorm .kader dl { margin: auto 0 0; padding: 22px 28px 24px; }
.r-werkvorm .kader dt { font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-meta); line-height: 1.25; color: var(--ink-soft); padding-top: 14px; border-top: 1px solid rgba(11,11,11,.14); }
.r-werkvorm .kader dt:first-child { padding-top: 0; border-top: 0; }
.r-werkvorm .kader dd { margin: 4px 0 14px; font-size: var(--slide-small); color: var(--fg-1); }
.r-werkvorm .kader dd:last-child { margin-bottom: 0; }
/* ── pauze ── gradient, de tijd waarop we verder gaan. Verder niets. */
.r-pauze { padding: 0 96px; justify-content: center; }
.r-pauze h1 { font-size: 104px; }
.r-pauze .lead { margin-top: 0; }
/* ── slot ── één zin waar het naartoe gaat. */
.r-slot { padding: 0 96px; justify-content: center; }
.r-slot .lead { margin-top: 8px; max-width: 44ch; }
/* ── kerngetal-licht ── het ene getal van de slide vrij op het papier, duiding ernaast.
Het getal stond tot 29 sep 2026 op een pastelkaart; het vlak vocht met het
getal (S11). Contrast komt nu uit de maat, de tint zit op een korte streep. */
.r-kerngetal-licht { padding: 0; flex-direction: row; }
/* Het getal hangt aan dezelfde bovenlijn als de kop ernaast: zonder kaart
eromheen zweeft een getal onderaan de slide los van zijn duiding. */
.r-kerngetal-licht .getal { flex: 0 0 440px; margin: 62px 0 56px 72px; padding-top: 58px; display: flex; flex-direction: column; }
.r-kerngetal-licht .getal .n { font-family: var(--font-specific); font-weight: 100; font-size: var(--slide-stat-xl); line-height: var(--slide-line-display); letter-spacing: -0.03em; color: var(--fg-1); }
.r-kerngetal-licht .getal .lijn { display: block; width: 96px; height: 4px; border-radius: 2px; background: var(--vlak); margin: 4px 0 20px; }
.r-kerngetal-licht .getal .eenheid { font-size: var(--slide-lead); color: var(--fg-2); max-width: 16ch; }
.r-kerngetal-licht .duiding { flex: 1; padding: 150px 72px 0 56px; margin-bottom: 56px; display: flex; flex-direction: column; }
.r-kerngetal-licht .duiding .lead { margin-top: 14px; }
.r-kerngetal-licht .duiding .bron { margin-top: auto; }
/* ── kerngetal-donker ── het zwaartepunt van het bewijs: getal links, citaat rechts. */
.r-kerngetal-donker { padding: 62px 72px 64px; }
.r-kerngetal-donker .kop h2 { max-width: 22ch; }
.r-kerngetal-donker .duo { flex: 1; display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: end; }
.r-kerngetal-donker .n { font-family: var(--font-specific); font-weight: 100; font-size: var(--slide-stat-xl); line-height: .95; letter-spacing: -0.03em; color: var(--ink-inverse); }
.r-kerngetal-donker .n + p { margin-top: 12px; font-size: var(--slide-small); }
.r-kerngetal-donker blockquote { font-family: var(--font-specific); font-weight: 100; font-size: 32px; line-height: 1.3; color: var(--ink-inverse); padding-left: 28px; border-left: 2px solid var(--spaik-orange); }
.r-kerngetal-donker blockquote + p { margin-top: 16px; padding-left: 30px; font-size: var(--slide-small); }
/* ── matrix ── twee methodes naast elkaar op dezelfde rijen. Max 5 rijen.
De kolomkop draagt de tint; de betere waarde per rij krijgt de streep. */
.r-matrix .tabel { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px 1fr 1fr; grid-template-rows: auto; grid-auto-rows: 1fr; column-gap: 18px; }
.r-matrix .kolkop { padding: 12px 18px; border-radius: var(--radius-sm); background: var(--vlak, transparent); font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-small); color: var(--fg-1); }
.r-matrix .rlabel, .r-matrix .cel { padding: 18px 18px; border-bottom: var(--hairline); }
.r-matrix .rlabel { padding-left: 0; font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-small); color: var(--fg-1); align-self: stretch; display: flex; align-items: center; }
.r-matrix .cel { display: flex; align-items: center; gap: 14px; }
.r-matrix .cel .n { font-family: var(--font-specific); font-weight: 100; font-size: 48px; line-height: 1.1; color: var(--fg-1); }
.r-matrix .cel .klein { color: var(--ink-muted); }
/* ── voorbeeldtabel ── per rij een brontekst en twee oordelen. Max 4 rijen. */
.r-voorbeeldtabel .tabel { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: auto; grid-auto-rows: 1fr; }
.r-voorbeeldtabel .th { padding: 0 18px 12px 0; }
.r-voorbeeldtabel .td { padding: 22px 22px 22px 0; border-top: var(--hairline); font-size: var(--slide-small); line-height: 1.4; color: var(--fg-2); }
.r-voorbeeldtabel .td.bron { font-family: var(--font-specific); font-weight: 100; font-size: 32px; line-height: 1.22; color: var(--fg-1); }
/* Pillen zijn voor aandacht. Kleur betekent hier één ding, het oordeel: de
gekozen categorie staat op een neutrale pil (data-tint="kaart"), de foute
keuze op rood (data-tint="rood"). Groen en rood op labels die een
categorie noemden klopte niet met het type (Jochem, 29 sep 2026). */
.r-voorbeeldtabel .oordeel { display: inline-block; padding: 5px 12px; border: 1px solid transparent; border-radius: var(--radius-full); background: var(--vlak, transparent); font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-small); color: var(--fg-1); margin-bottom: 8px; }
.r-voorbeeldtabel .td .klein { display: block; color: var(--ink-muted); }
/* ── staafgrafiek ── twee groepen naast elkaar, conclusie per groep eronder.
Staven zijn divs met een hoogte in %; de uitschieter krijgt de sterke tint. */
.r-staafgrafiek .groepen { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.r-staafgrafiek .groep { display: flex; flex-direction: column; min-height: 0; }
.r-staafgrafiek .groep > .label { margin-bottom: 14px; }
.r-staafgrafiek .staven { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 14px; border-bottom: 1px solid rgba(11,11,11,.3); }
.r-staafgrafiek .staaf { flex: 1; position: relative; border-radius: 6px 6px 0 0; background: var(--vlak, var(--spaik-clay)); }
.r-staafgrafiek .staaf span { position: absolute; top: -32px; left: 0; right: 0; text-align: center; font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-meta); color: var(--fg-1); }
.r-staafgrafiek .as { display: flex; gap: 14px; margin-top: 10px; }
.r-staafgrafiek .as span { flex: 1; text-align: center; font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-meta); color: var(--ink-muted); }
.r-staafgrafiek .conclusie { margin-top: 18px; font-size: var(--slide-small); color: var(--fg-2); }
/* ── gerangschikte-balken ── categorieën op volgorde van grootte. Max 7 balken. */
.r-gerangschikte-balken .balken { display: flex; flex-direction: column; gap: 22px; }
.r-gerangschikte-balken .regel { display: grid; grid-template-columns: 260px 1fr 70px; gap: 18px; align-items: center; }
.r-gerangschikte-balken .regel .wat { color: var(--fg-1); }
.r-gerangschikte-balken .spoor { height: 46px; background: rgba(11,11,11,.05); border-radius: 6px; overflow: hidden; }
.r-gerangschikte-balken .spoor i { display: block; height: 100%; border-radius: 6px; background: var(--vlak, var(--spaik-clay)); }
.r-gerangschikte-balken .regel .n { font-family: var(--font-specific); font-weight: 100; font-size: 36px; text-align: right; color: var(--fg-1); }
.r-gerangschikte-balken .noot { margin-top: auto; font-size: var(--slide-small); color: var(--ink-muted); }
/* ── bronfragmenten ── twee echte fragmenten naast elkaar als bewijs, met de
bevinding eronder. Letterlijke tekst in mono, geen samenvatting. */
.r-bronfragmenten .duo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.r-bronfragmenten .bron { padding: 24px 28px 28px; display: flex; flex-direction: column; }
.r-bronfragmenten .bron pre { margin: auto 0; }
.r-bronfragmenten .bron .meta { margin-bottom: 12px; }
.r-bronfragmenten pre { margin: 0; font-family: var(--font-mono); font-size: 21px; line-height: 1.6; color: var(--fg-2); white-space: pre-wrap; }
/* Het verschil zelf: vaste pastel rood, los van de kaart-tint. */
.r-bronfragmenten pre mark { background: var(--spaik-pastel-red); color: var(--fg-1); padding: 0 3px; border-radius: 3px; }
.r-bronfragmenten .bevinding { margin-top: 26px; padding-top: 22px; border-top: var(--hairline); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.r-bronfragmenten .bevinding p { font-size: var(--slide-small); }
/* ── klantbewijs ── één case met casetint links, logo's van wie het al draait rechts.
Casetint: hue van de klant, verzadiging uit de familie in tokens.css (M11). */
.r-klantbewijs { flex-direction: row; gap: 48px; }
.r-klantbewijs .links { flex: 0 0 540px; display: flex; flex-direction: column; }
.r-klantbewijs .links .kop { padding-right: 0; }
/* Een gewone kaart in de casetint: hairline rondom, geen dikke rand links.
Die eenzijdige rand is M9 en leest als AI-sjabloon (impeccable-critique,
25 sep 2026). :where() houdt de specificiteit op 0, dus een data-tint wint. */
:where(.r-klantbewijs .case) { --vlak: var(--case-tint, var(--tint-euphoria)); }
/* Geen holle kaart: het citaat staat in een kaart op eigen hoogte, het kerngetal
eronder als typografie en onderaan de kolom (impeccable-critique, 25 sep 2026). */
.r-klantbewijs .case { padding: 28px 30px; display: flex; flex-direction: column; }
.r-klantbewijs .case blockquote { font-family: var(--font-specific); font-weight: 100; font-size: 36px; line-height: 1.25; color: var(--fg-1); }
.r-klantbewijs .case .wie { margin-top: 14px; font-size: var(--slide-small); color: var(--ink-muted); }
.r-klantbewijs .links > .n { margin-top: auto; font-family: var(--font-specific); font-weight: 100; font-size: var(--slide-stat); line-height: 1; letter-spacing: -0.02em; color: var(--fg-1); }
.r-klantbewijs .links > .n + .meta { margin-top: 8px; }
.r-klantbewijs .logos { flex: 1; margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 12px; }
.r-klantbewijs .logo { display: flex; align-items: center; justify-content: center; border: var(--hairline); border-radius: var(--radius-sm); padding: 14px; }
.r-klantbewijs .logo img { max-width: 80%; max-height: 44px; filter: grayscale(1); opacity: .75; }
/* Plaatshouder tot er een echt logo staat: vervang de tekst door ![]()
. */
.r-klantbewijs .logo span { font-family: var(--font-primary); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: rgba(11,11,11,.4); }
/* ── milestone-spoor ── gepland versus gehaald op één lijn. Max 6 mijlpalen.
Gevulde punt = gehaald, oranje ring = vandaag, open = gepland. De lijn
kleurt mee tot vandaag (--voortgang op .spoor). */
.r-milestone-spoor .spoor { margin: auto 0; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); position: relative; }
.r-milestone-spoor .spoor::before, .r-milestone-spoor .spoor::after { content: ""; position: absolute; left: 12px; top: 70px; height: 4px; border-radius: 2px; }
.r-milestone-spoor .spoor::before { right: 12px; background: rgba(11,11,11,.10); }
.r-milestone-spoor .spoor::after { width: var(--voortgang, 50%); background: var(--spaik-pastel-green); }
.r-milestone-spoor .mijl { position: relative; z-index: 1; padding-right: 26px; display: grid; grid-template-rows: 44px 56px auto; }
.r-milestone-spoor .mijl > .meta { align-self: end; padding-bottom: 10px; color: var(--fg-1); }
.r-milestone-spoor .mijl .punt { align-self: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fg-1); margin-left: 1px; }
.r-milestone-spoor .mijl.nu .punt { background: var(--bg-paper); border: 4px solid var(--spaik-orange); }
.r-milestone-spoor .mijl.straks .punt { background: var(--bg-paper); border: 2px solid rgba(11,11,11,.35); }
.r-milestone-spoor .mijl h3 { margin-top: 10px; margin-bottom: 8px; }
.r-milestone-spoor .mijl > div { padding-top: 16px; }
.r-milestone-spoor .mijl.straks h3 { color: var(--ink-muted); }
.r-milestone-spoor .mijl.nu .status { color: var(--spaik-orange-wcag); }
/* ── fase-flow ── drie fases als reeks: even groot, nevengeschikt (S8). */
.r-fase-flow .flow { margin-top: auto; display: flex; gap: 12px; align-items: stretch; }
/* De fases houden hun eigen hoogte; de stelling erboven draagt het punt
(impeccable-critique, 25 sep 2026: 200px leeg pastel per fase). */
.r-fase-flow .fase { flex: 1; padding: 26px 28px 28px; display: flex; flex-direction: column; }
.r-fase-flow .fase .meta { margin-bottom: 44px; }
.r-fase-flow .fase h3 { margin-top: auto; margin-bottom: 10px; }
.r-fase-flow .pijl { align-self: center; font-family: var(--font-specific); font-weight: 100; font-size: 40px; color: var(--ink-muted); }
/* ── twee-sporen ── één ingang, twee parallelle sporen, één uitgang. Tel de
sporen tegen de kop (R10): "twee sporen" = twee rijen, geen drie kaarten. */
.r-twee-sporen .schema { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 48px 1fr 48px 200px; align-items: center; }
.r-twee-sporen .eind { padding: 24px 22px; text-align: left; }
.r-twee-sporen .eind .meta { display: block; margin-bottom: 8px; }
.r-twee-sporen .eind b { font-size: var(--slide-body); line-height: 1.25; }
.r-twee-sporen .pijl { text-align: center; font-family: var(--font-specific); font-weight: 100; font-size: 36px; color: var(--ink-muted); }
.r-twee-sporen .sporen { align-self: stretch; display: flex; flex-direction: column; gap: 16px; }
.r-twee-sporen .spoor { flex: 1; padding: 30px 34px; display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: center; }
.r-twee-sporen .spoor h3 { font-size: 40px; }
.r-twee-sporen .spoor p { color: var(--ink-soft); }
/* ── baanflow ── de keten nu (boven) tegen wat hij kan worden (onder).
Handwerk krijgt rood, wat verdwijnt of automatisch gaat groen. */
.r-baanflow .banen { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 56px; }
.r-baanflow .baan { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 20px; }
.r-baanflow .baan > .label { color: var(--fg-1); }
.r-baanflow .stappen { display: flex; align-items: stretch; gap: 10px; }
.r-baanflow .stap { flex: 1; min-height: 116px; padding: 20px 20px; border-radius: var(--radius-sm); background: var(--vlak, transparent); border: var(--hairline); font-size: var(--slide-small); line-height: 1.3; color: var(--fg-1); display: flex; align-items: center; }
.r-baanflow .stap[data-tint] { border-color: transparent; }
.r-baanflow .stappen i { align-self: center; font-style: normal; font-family: var(--font-specific); font-weight: 100; font-size: 28px; color: var(--ink-muted); }
.r-baanflow .legenda { margin-top: 22px; display: flex; gap: 22px; justify-content: flex-end; font-size: var(--slide-label); color: var(--ink-muted); }
.r-baanflow .legenda span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; background: var(--vlak); }
/* ── ladder ── niveaus trapsgewijs, status per trede. Max 5 treden.
Waar de klant nu staat krijgt de rand; tints lopen op met het niveau. */
.r-ladder .treden { flex: 1; min-height: 0; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 10px; }
.r-ladder .trede { display: grid; grid-template-columns: 64px 1fr 200px; align-items: center; gap: 18px; padding: 16px 24px; margin-left: calc(var(--i, 0) * 72px); }
.r-ladder .trede .n { font-family: var(--font-specific); font-weight: 100; font-size: 44px; line-height: 1; color: var(--fg-1); }
.r-ladder .trede b { display: block; font-size: var(--slide-body); line-height: 1.2; }
.r-ladder .trede span.klein { color: var(--ink-soft); }
.r-ladder .trede .meta { justify-self: end; }
.r-ladder .trede.hier .meta { color: var(--fg-1); }
.r-ladder .trede.hier { outline: 1.5px solid var(--fg-1); outline-offset: -1.5px; }
/* ── sporenraster ── werkstromen × maanden met echte tekst in de blokken, geen
Gantt-balken. Plaats blokken met style="grid-column: 3 / 6". Max 4 stromen, 6 maanden. */
.r-sporenraster .raster { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px repeat(6, 1fr); grid-template-rows: auto; grid-auto-rows: 1fr; column-gap: 8px; row-gap: 10px; }
.r-sporenraster .maand { padding-bottom: 6px; border-bottom: var(--hairline); }
.r-sporenraster .stroom { grid-column: 1; align-self: center; font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-small); color: var(--fg-1); line-height: 1.2; }
.r-sporenraster .blok { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--vlak); font-size: 17px; line-height: 1.3; color: var(--fg-1); display: flex; align-items: center; }
.r-sporenraster .ritme { margin-top: 14px; display: flex; justify-content: space-between; font-size: var(--slide-label); color: var(--ink-muted); padding-left: 198px; }
/* ── vier-stappen ── een programma of leerlijn, groot cijfer per stap. */
.r-vier-stappen .stappen { margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.r-vier-stappen .stap { padding: 24px 24px 26px; display: flex; flex-direction: column; }
.r-vier-stappen .stap .n { font-family: var(--font-specific); font-weight: 100; font-size: var(--slide-stat); line-height: 1; color: var(--fg-1); }
.r-vier-stappen .stap h3 { margin-top: 36px; margin-bottom: 10px; font-size: 30px; }
/* ── ink-pills ── beeld links, vier korte uitspraken rechts. Eén zin per pill. */
.r-ink-pills { padding: 0; flex-direction: row; }
.r-ink-pills .beeld { flex: 0 0 44%; position: relative; overflow: hidden; }
/* Zachte overgang van beeld naar papier, zoals bij cover-ink. */
.r-ink-pills .beeld::after, .r-ink-rollen .beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243,237,237,0) 80%, var(--bg-paper) 100%); }
.r-ink-pills .beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
.r-ink-pills .rechts { flex: 1; min-width: 0; padding: 62px 72px 56px 40px; display: flex; flex-direction: column; }
.r-ink-pills .rechts .kop { padding-right: 40px; }
.r-ink-pills .pills { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.r-ink-pills .pill { padding: 18px 24px; border-radius: var(--radius-lg); border-width: 1px; border-style: solid; background: var(--vlak); font-size: var(--slide-small); line-height: 1.35; color: var(--fg-1); }
/* ── ink-rollen ── beeld links, 2×2 rollen rechts, profiel met chips eronder. */
.r-ink-rollen { padding: 0; flex-direction: row; }
.r-ink-rollen .beeld { flex: 0 0 38%; position: relative; overflow: hidden; }
.r-ink-rollen .beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.r-ink-rollen .rechts { flex: 1; min-width: 0; padding: 62px 72px 56px 40px; display: flex; flex-direction: column; }
.r-ink-rollen .rechts .kop { padding-right: 40px; }
.r-ink-rollen .rollen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.r-ink-rollen .rol { padding: 16px 0; border-top: var(--hairline); }
.r-ink-rollen .rol b { display: block; font-size: var(--slide-body); line-height: 1.25; margin-bottom: 4px; }
.r-ink-rollen .rol span { font-size: var(--slide-small); color: var(--ink-soft); }
.r-ink-rollen .profiel { margin-top: auto; padding: 20px 22px; }
.r-ink-rollen .profiel .meta { display: block; margin-bottom: 12px; color: var(--ink-soft); }
.r-ink-rollen .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.r-ink-rollen .chip { padding: 6px 14px; border-radius: var(--radius-full); background: var(--bg-paper); font-size: var(--slide-label); font-family: var(--font-primary); font-weight: 500; color: var(--fg-1); }
/* ── team ── portretten met naam, rol en één regel. Max 4 per rij; bij 5 liever
2+3 dan één uitgerekte rij. Verwijder de initialen zodra de foto er is. */
.r-team .mensen { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 28px; align-content: center; }
.r-team .mens { display: flex; flex-direction: column; }
/* Eén neutrale behandeling voor elk portret; vier pastels lazen als een
avatarlijst. Het kleurmoment zit op de rol (impeccable-critique, 25 sep 2026). */
.r-team .foto { width: 168px; height: 168px; border-radius: 50%; border: var(--hairline); background: var(--vlak, var(--bg-card-tint)) center 24% / 130% no-repeat; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.r-team .foto span { font-family: var(--font-specific); font-weight: 100; font-size: 56px; color: var(--fg-1); }
.r-team .mens h3 { margin-bottom: 4px; }
.r-team .mens .meta { margin-bottom: 8px; color: var(--spaik-orange-wcag); }
.r-team .mens p { font-size: var(--slide-small); color: var(--ink-soft); }
/* ── tegelraster ── wat wel (gevuld) en wat niet (hairline, met reden). */
.r-tegelraster .blokken { flex: 1; min-height: 0; display: grid; grid-template-rows: auto 1fr auto 1fr; row-gap: 12px; }
.r-tegelraster .rij { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 12px; }
.r-tegelraster .tegel { padding: 18px 20px; display: flex; flex-direction: column; justify-content: flex-end; }
.r-tegelraster .tegel b { font-size: var(--slide-body); line-height: 1.2; }
.r-tegelraster .tegel span { margin-top: 4px; font-size: var(--slide-small); color: var(--ink-soft); }
.r-tegelraster .blokken > .label + .rij { margin-bottom: 14px; }
/* ── genummerde-vragen ── twee of drie vragen groot, toelichting klein. */
.r-genummerde-vragen .vragen { flex: 1; display: flex; flex-direction: column; }
.r-genummerde-vragen .vraag { flex: 1; display: grid; grid-template-columns: 72px 1fr; align-content: center; padding: 22px 0; border-bottom: var(--hairline); }
.r-genummerde-vragen .vraag:first-child { border-top: var(--hairline); }
.r-genummerde-vragen .vraag .n { font-family: var(--font-specific); font-weight: 100; font-size: 52px; line-height: 1; color: var(--spaik-orange-wcag); }
.r-genummerde-vragen .vraag h3 { font-size: 44px; }
.r-genummerde-vragen .vraag h3 + p { margin-top: 8px; }
/* ── ask-opbrengst ── links wat we vragen, rechts wat het oplevert. */
/* Kaarten op eigen hoogte, onderaan de stage: de lucht staat tussen kop en
kaarten, niet als leeg vlak ín de kaart (impeccable-critique, 25 sep 2026). */
.r-ask-opbrengst .duo { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.r-ask-opbrengst .kaart { padding: 30px 32px; display: flex; flex-direction: column; }
.r-ask-opbrengst .kaart .meta { margin-bottom: 14px; }
.r-ask-opbrengst .kaart h3 { font-size: 46px; line-height: 1.12; margin-bottom: 40px; max-width: 16ch; }
.r-ask-opbrengst .kaart ul { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.r-ask-opbrengst .kaart li { padding-left: 30px; position: relative; font-size: 22px; line-height: 1.4; color: var(--fg-1); }
.r-ask-opbrengst .kaart li::before { content: "\2192"; position: absolute; left: 0; color: var(--ink-muted); }
.r-ask-opbrengst .kaart[data-tint] li::before { content: "\2713"; color: var(--fg-1); }
/* ── lijst-herkomst ── backlog-regels: wat, waar het vandaan komt, hoe hard het is. */
.r-lijst-herkomst .lijst { flex: 1; display: flex; flex-direction: column; }
.r-lijst-herkomst .regel { display: grid; grid-template-columns: 1fr 190px; align-items: center; gap: 24px; padding: 13px 0; border-bottom: var(--hairline); }
.r-lijst-herkomst .regel:first-child { border-top: var(--hairline); }
.r-lijst-herkomst .regel b { display: block; font-size: var(--slide-body); line-height: 1.25; }
/* Herkomst is een gewoon woord onder de titel, in SF: Agrandir heeft alleen
Medium en Bold, dus in Agrandir was het even zwaar als de titel. Geen
gekleurde pil: vijf afdelingen in vijf tints was kleurcodering zonder
legenda (29 sep 2026). */
.r-lijst-herkomst .herkomst { display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 400; font-size: var(--slide-meta); color: var(--ink-muted); }
/* De aandacht gaat naar wat de kop belooft: alleen 'Gemeten' (.hard) staat op
een groene pil. Geschat en idee zijn gewone tekst. */
.r-lijst-herkomst .bewijs { justify-self: end; }
.r-lijst-herkomst .bewijs.hard { padding: 5px 14px; border-radius: var(--radius-full); background: var(--spaik-pastel-green); color: var(--fg-1); }
/* ── besluit ── twee opties, één voorstel springt eruit (S8: hiërarchie). */
/* Zelfde als ask-opbrengst: opties op eigen hoogte, onderaan de stage. */
.r-besluit .opties { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.r-besluit .optie { padding: 26px 30px 26px; display: flex; flex-direction: column; }
.r-besluit .optie .top { display: flex; justify-content: space-between; align-items: center; height: 34px; margin-bottom: 12px; }
.r-besluit .optie h3 { font-size: 42px; line-height: 1.12; margin-bottom: 12px; }
.r-besluit .optie h3 + p { margin-bottom: 40px; }
.r-besluit .optie .gevolg { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(11,11,11,.14); font-size: var(--slide-small); color: var(--fg-1); }
.r-besluit .optie.voorstel { outline: 1.5px solid var(--fg-1); outline-offset: -1.5px; }
.r-besluit .noot { margin-top: 20px; font-size: var(--slide-small); color: var(--ink-muted); }
/* ── kaartrij ── drie gelijkwaardige punten naast elkaar, als kolommen onder
één hairline. Geen pastel per kaart en geen gekleurde bovenrand. Het label
staat op een pil, en alle drie in dezelfde tint: gelijke punten, gelijke
kleur. Drie tints voor drie gelijke punten was kleur zonder betekenis
(29 sep 2026).
Het grid zakt naar onder; subgrid legt label, vraag en antwoord van de
drie kolommen op dezelfde rijen, dus de antwoorden beginnen op één lijn. */
.r-kaartrij .kaarten { margin-top: auto; min-height: 340px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr auto; column-gap: 48px; padding-top: 28px; border-top: var(--hairline); }
.r-kaartrij .kaart { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
.r-kaartrij .kaart .meta { justify-self: start; margin-bottom: 20px; padding: 6px 14px; border-radius: var(--radius-full); background: var(--vlak, transparent); color: var(--fg-1); }
.r-kaartrij .kaart h3 { font-size: 50px; line-height: 1.12; }
.r-kaartrij .kaart p { padding-top: 28px; }
/* ── bewering ── één zin die iets beweert, zonder kader. Het tegenwicht voor de
blokken-recepten: typografie doet het werk. Max 2x per deck, als punchline na
bewijs of vlak voor een besluit. Mag monochroom: bewuste rust in het ritme. */
.r-bewering { padding: 62px 140px 64px 96px; justify-content: center; }
.r-bewering .zin {
font-family: var(--font-specific); font-weight: 100;
font-size: var(--slide-bewering); line-height: var(--slide-line-display);
letter-spacing: -0.015em; color: var(--fg-1); max-width: 17ch; text-wrap: balance;
padding-bottom: .2em;
}
.r-bewering .meta { margin-top: 18px; }
/* ── ink-liggend ── een liggende ink (16:9) in een venster van dezelfde verhouding,
met tekst ernaast. Voor elk beeld dat geen staande variant heeft: nooit een
liggend beeld in een staand split-vak (S10). */
.r-ink-liggend .rij { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: center; }
.r-ink-liggend .venster { aspect-ratio: 16 / 9; width: 100%; position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-paper); }
.r-ink-liggend .venster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-ink-liggend .tekst .lead { margin-bottom: 22px; }
.r-ink-liggend .tekst li { font-size: var(--slide-small); line-height: 1.4; color: var(--fg-2); padding: 12px 0; border-top: var(--hairline); }
/* ================================================================
Zeven recepten erbij, goedgekeurd door Jochem op 29 sep 2026 na een
voorstel-deck. De eerste zes werken ook als pagina in een voorstel.
================================================================ */
/* ── voor-na-tabel ── twee kolommen op dezelfde rijen: vandaag tegenover
straks. De na-kolom draagt één doorlopende tint, oranje alleen op het
pijlrondje. Max 4 rijen, kop plus één regel per cel. */
.r-voor-na-tabel .tabel { display: grid; grid-template-columns: 1fr 72px 1fr; }
.r-voor-na-tabel .midden { position: relative; }
.r-voor-na-tabel .midden::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(11,11,11,.14); }
.r-voor-na-tabel .pijlrond {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
width: 40px; height: 40px; border-radius: 50%; background: var(--bg-paper);
border: 1.5px solid var(--spaik-orange); color: var(--spaik-orange);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-primary); font-weight: 500; font-size: 20px; line-height: 1;
}
.r-voor-na-tabel .kolkop { padding: 18px 28px 16px; font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-small); border-bottom: 1px solid rgba(11,11,11,.3); }
.r-voor-na-tabel .kolkop.voor { color: var(--fg-2); padding-left: 0; }
.r-voor-na-tabel .kolkop.na { color: var(--fg-1); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.r-voor-na-tabel .cel { padding: 20px 28px; display: flex; flex-direction: column; gap: 4px; border-bottom: var(--hairline); }
.r-voor-na-tabel .cel.voor { padding-left: 0; }
.r-voor-na-tabel .cel b { font-size: var(--slide-body); line-height: 1.3; }
.r-voor-na-tabel .cel span { font-size: var(--slide-small); line-height: 1.4; }
.r-voor-na-tabel .voor b, .r-voor-na-tabel .voor span { color: var(--fg-2); }
.r-voor-na-tabel .na { background: var(--vlak); }
.r-voor-na-tabel .na span { color: var(--ink-soft); }
.r-voor-na-tabel .cel.laatst { border-bottom: 0; }
.r-voor-na-tabel .cel.na.laatst { border-radius: 0 0 var(--radius-md) var(--radius-md); }
/* ── portretweb ── wie met wie werkt, als los web rond de AI-collega. Elke
persoon draagt zijn rol als pil naast zijn naam; een zachte boog loopt van
ieder naar het midden. Max 8 knopen, geen kruisende lijnen: bogen eindigen
onder de ronde van het midden, dus kruisen ze alleen daar, onzichtbaar.
Tekst staat aan de buitenkant van elke ronde, zodat geen boog erdoor loopt.
Plaats rond en naam met style="left/top" op de 1136×470-maat van .web. */
.r-portretweb .web { position: relative; width: 100%; height: 470px; }
.r-portretweb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.r-portretweb svg path { fill: none; stroke: rgba(11,11,11,.32); stroke-width: 1.25; }
.r-portretweb .rond {
position: absolute; z-index: 1; width: 84px; height: 84px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--vlak, var(--bg-card-tint)); border: 1px solid rgba(11,11,11,.14);
font-family: var(--font-specific); font-weight: 100; font-size: 32px; line-height: 1; color: var(--fg-1);
}
.r-portretweb .rond[data-tint] { border-color: transparent; }
.r-portretweb .rond.kern { width: 112px; height: 112px; background: var(--bg-paper); border-color: rgba(11,11,11,.22); }
.r-portretweb .rond.kern img { width: 48px; height: auto; display: block; }
.r-portretweb .wie { position: absolute; z-index: 1; width: 210px; display: flex; flex-direction: column; align-items: flex-start; }
.r-portretweb .wie.l { align-items: flex-end; text-align: right; }
.r-portretweb .wie.m { align-items: center; text-align: center; }
.r-portretweb .wie b { font-size: var(--slide-small); line-height: 1.3; }
.r-portretweb .wie .meta { margin-top: 2px; }
.r-portretweb .rol {
margin-bottom: 6px; padding: 3px 12px; border-radius: var(--radius-full);
border: 1px solid rgba(11,11,11,.22); background: var(--bg-paper);
font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-label); line-height: 1.4; color: var(--fg-1);
}
.r-portretweb .legenda { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 22px; }
.r-portretweb .legenda span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-weight: 500; font-size: var(--slide-label); color: var(--ink-muted); }
.r-portretweb .legenda i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(11,11,11,.22); background: var(--vlak, var(--bg-card-tint)); }
.r-portretweb .legenda i[data-tint] { border-color: transparent; }
/* ── geannoteerd-object ── één object in het midden op een hairline-kaart,
korte labels op 1px-steeltjes. Eén punt oranje: het ding dat telt. De
steeltjes wijzen naar een plek in het beeld, dus bij een ander beeld zet je
de x/y in de