/* Hallmark · genre: editorial · macrostructure: Split Studio
 * thema: huisstijl op slot (CLAUDE.md § De huisstijl) — géén catalogusthema
 * nav: N9 edge-aligned minimal + ondertekenaarsband · voet: Ft4 dense colophon
 * secties: S2 hanging · F3 tabular spec sheet · C1 outlined chip
 * hero: H2 split diptych (7/5, hairline-scheiding, bewijskolom rechts)
 * enrichment: Tier B handgebouwde SVG · motion: 3 primitieven
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 *
 * =========================================================================
 * zegelkamer.nl — de website
 *
 * Eén stylesheet voor beide pagina's. Alles staat op deze server: geen
 * lettertype van Google, geen script van een derde, dus er hoeft niets over
 * de bezoeker naar buiten.
 *
 * Waarom hier één bestand staat en geen aparte tokens.css: dit is een site
 * van twee statische pagina's met een versiemerk achter de stylesheet. Een
 * tweede bestand is een tweede verzoek en een tweede merk om bij te houden,
 * en levert hier niets op. Het tokenblok hieronder staat daarom bovenaan en
 * apart; daaronder wordt géén kleur en géén letter meer los ingetypt.
 * ========================================================================= */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* De letter waaruit het woordmerk in het logo is getekend: geometrisch, ronde
   bollen, een enkelvoudige a en g. Alleen voor de naam en de koppen; lopende
   tekst blijft Inter. Licentie SIL OFL. */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/poppins-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ Tokens ═══════════════════════════════════════════════════════════════
   Hieronder komt geen losse kleurwaarde en geen losse font-family meer voor.
   Is er een waarde nodig die hier niet staat, dan komt hij hier eerst bij. */

:root {
    /* Kleur. Het oranje is dat van het beeldmerk en ligt vast. */
    --brand:      #F28532;
    --brand-600:  #E8731D;   /* dezelfde knop onder de muis */
    --brand-kop:  #E0700F;   /* accentwoord in een kop: groot genoeg voor 3:1 */
    --brand-ink:  #B0521A;   /* links: kleine tekst op wit, dus 4,5:1 */
    --brand-diep: #8E3F10;
    --brand-wash: #FFF1E3;
    --brand-lijn: #FBD9B8;
    --op-brand:   #1C1917;   /* wat er op --brand leesbaar is */
    --ink:        #1C1917;
    --ink-soft:   #57514C;
    --ink-faint:  #7B736E;
    --line:       #E7E2DB;
    --line-zacht: #F1EDE7;
    --line-sterk: #D9D3CB;   /* een lijn die net iets moet dragen */
    --canvas:     #FAF8F5;
    --surface:    #FEFCFA;   /* geen zuiver wit: dat leest als scherm, niet als vel */
    --groen:      #2E8544;
    --groen-diep: #246935;
    --groen-licht:#4CB864;
    --groen-wash: #EAF6EC;
    --groen-lijn: #C6E4CE;
    /* Inkt op het merkvlak, een tint zachter. Voor de tweede regel onder een
       naam in de merkband: even leesbaar, maar niet even luid. */
    --op-brand-zacht: #3A2C21;

    /* Letters */
    --letter-kop:  'Poppins', 'Inter', -apple-system, sans-serif;
    --letter-tekst:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --letter-code: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Ruimte, veelvouden van vier */
    --ruimte-3xs: 4px;
    --ruimte-2xs: 8px;
    --ruimte-xs:  12px;
    --ruimte-sm:  16px;
    --ruimte-md:  24px;
    --ruimte-lg:  32px;
    --ruimte-xl:  48px;
    --ruimte-2xl: 72px;
    --ruimte-3xl: 104px;
    --marge-zij:  clamp(20px, 5vw, 40px);

    /* Tekstmaten. Vijf op een pagina is het maximum; hierarchie verder met
       gewicht en kleur, niet met nog een maat erbij. */
    --tekst-xs:   .78rem;
    --tekst-sm:   .88rem;
    --tekst-md:   1.06rem;
    --tekst-lg:   1.22rem;
    --tekst-xl:   clamp(1.35rem, 3vw, 1.7rem);
    --tekst-2xl:  clamp(1.7rem, 4vw, 2.3rem);
    --tekst-groot:clamp(2.2rem, 5.6vw, 3.5rem);

    /* Lijnen */
    --lijn-haar: 1px;
    --rond-sm: 6px;
    --rond-md: 10px;

    /* Beweging. Drie easings, drie duren, en niets anders. */
    --soepel-uit:  cubic-bezier(0.16, 1, 0.3, 1);
    --soepel-in:   cubic-bezier(0.7, 0, 0.84, 0);
    --soepel-heen: cubic-bezier(0.65, 0, 0.35, 1);
    --duur-micro: 120ms;
    --duur-kort:  220ms;
    --duur-lang:  420ms;

    /* Stapelvolgorde. Zes niveaus met een naam, geen 9999. */
    --z-onder:   0;
    --z-basis:   1;
    --z-kop:     10;
    --z-zwevend: 100;
}

/* ═══ Grondslag ════════════════════════════════════════════════════════════ */

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

/* clip en niet hidden: hidden maakt van de wortel een scrollcontainer en
   breekt position: sticky verderop in de pagina. */
html, body { overflow-x: clip; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--letter-tekst);
    font-size: 16px;
    line-height: 1.62;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-diep); }
/* De focusring verschijnt op slag. Hem laten invaden betekent dat wie met het
   toetsenbord werkt de eerste tweehonderd milliseconde niet ziet waar hij is. */
a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--rond-sm); }

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

/* ═══ Maatvoering ══════════════════════════════════════════════════════════ */

.wrap {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding-inline: var(--marge-zij);
}
.wrap--lezen { max-width: 760px; }

main { flex: 1; position: relative; z-index: var(--z-basis); }

/* Het zegel groot en flauw achter de kop. Decoratie, dus aria-hidden, en op
   een smal scherm weg: daar zou het achter de tekst gaan zitten. */
.zegel {
    position: fixed;
    top: -140px; right: -150px;
    width: 480px; height: 480px;
    opacity: .06;
    pointer-events: none;
    z-index: var(--z-onder);
}
@media (max-width: 1180px) { .zegel { display: none; } }

/* ═══ De band voor de ondertekenaar ════════════════════════════════════════
   N9 laat de ruimte tussen woordmerk en knop bewust leeg, en dat is juist:
   die ruimte ís het ontwerp. Maar er komen twee soorten bezoekers binnen. De
   tweede is een wederpartij die net een uitnodiging kreeg, de link niet kan
   openen en gaat zoeken. Die hoort niet te moeten raden waar hij heen moet.
   Vandaar één regel bóven de kop, en dus niet vier links erin. */

.ondertekenaarsband {
    position: relative;
    z-index: var(--z-kop);
    background: var(--brand-wash);
    border-bottom: var(--lijn-haar) solid var(--brand-lijn);
    font-size: var(--tekst-sm);
    color: var(--brand-diep);
}
.ondertekenaarsband__inhoud {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--ruimte-3xs) var(--ruimte-sm);
    padding-block: var(--ruimte-2xs);
}
.ondertekenaarsband a {
    color: var(--brand-diep);
    font-weight: 600;
    white-space: nowrap;
}

/* ═══ Kop: N9, woordmerk hard links, één knop hard rechts ══════════════════ */

.kop {
    position: relative;
    z-index: var(--z-kop);
    border-bottom: var(--lijn-haar) solid var(--line);
    background: var(--canvas);
}
.kop__inhoud {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--ruimte-md);
    padding-block: var(--ruimte-sm);
}

/* ── Het merk ─────────────────────────────────────────────────────────────
   Het woordmerk is gezet in de huisletter en niet getekend als plaatje. Een
   naam in een afbeelding wordt op elk formaat opnieuw geschaald en loopt dan
   dicht; letters uit een font blijven scherp, ook ingezoomd. Het beeldmerk
   ernaast is wél een tekening, want dat is het ook. */
.merk { display: inline-flex; align-items: center; gap: var(--ruimte-xs); text-decoration: none; }
.merk__zegel { width: 34px; height: 34px; flex: 0 0 auto; }
.merk__woord {
    font-family: var(--letter-kop);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
}
.merk__woord b { font-weight: 600; color: var(--brand-kop); }

/* ═══ Tekst ════════════════════════════════════════════════════════════════
   Poppins voor de koppen, Inter voor lopende tekst. Twee letters door elkaar
   in één alinea is onrustig; in een kop is het een accent. */

h1, h2, h3 {
    font-family: var(--letter-kop);
    font-weight: 600;
    font-style: normal;
    letter-spacing: -.032em;
    line-height: 1.1;
    /* Een lange samenstelling — 'ondertekenrapport', 'vaststellingsovereenkomst' —
       past op 320 px in geen enkele kopmaat. Zonder deze twee regels duwt hij
       de hele pagina zijwaarts. */
    overflow-wrap: anywhere;
    min-width: 0;
}
h1 { margin: 0; font-size: var(--tekst-groot); }
h2 { margin: 0; font-size: var(--tekst-2xl); }
h3 { margin: 0; font-size: var(--tekst-xl); letter-spacing: -.025em; line-height: 1.22; }
.accent { color: var(--brand-kop); }

p { margin: var(--ruimte-sm) 0 0; max-width: 38em; }
.lead { margin: var(--ruimte-md) 0 0; font-size: var(--tekst-lg); color: var(--ink-soft); max-width: 32em; }
.klein { font-size: var(--tekst-sm); color: var(--ink-soft); }
.zacht { color: var(--ink-soft); }

/* ── Hanging kop (S2): de kop hangt in de ruimte boven zijn sectie, zonder
      lijn en zonder kader. Geen bovenschrift erbij: een genummerd labeltje
      boven élke sectie leest als een tic en niet als een hoofdstuk. */
.kop-hangend { padding-block: var(--ruimte-3xl) var(--ruimte-lg); max-width: 26em; }
.kop-hangend p { margin-top: var(--ruimte-sm); }

/* ═══ Knoppen ══════════════════════════════════════════════════════════════
   De knop is het oranje van het merk zelf, met inkt erop: wit haalt op deze
   kleur 2,6:1 en inkt 6,8:1. Verdiepen tot er wit op kan maakt er een bruine
   knop van, en bruin staat niet in het logo. */

.acties { margin: var(--ruimte-xl) 0 0; display: flex; flex-wrap: wrap; gap: var(--ruimte-xs); align-items: center; }

.knop {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--ruimte-2xs);
    min-height: 44px;
    padding: var(--ruimte-xs) var(--ruimte-md);
    border: var(--lijn-haar) solid transparent;
    border-radius: var(--rond-sm);
    background: var(--brand);
    color: var(--op-brand);
    font-size: var(--tekst-md); font-weight: 600;
    text-decoration: none;
    /* Nooit transition-all: de focusring zit in outline en die hoort niet mee
       te bewegen. */
    transition: background-color var(--duur-micro) var(--soepel-uit),
                transform var(--duur-micro) var(--soepel-uit);
    /* Een knoplabel is een regel. Breekt hij over twee, dan leest hij als een
       opmaakfout en niet als een keuze. */
    white-space: nowrap;
}
.knop:hover { background: var(--brand-600); color: var(--op-brand); }
.knop:active { transform: translateY(1px); }

/* C1 outlined chip: dezelfde vorm, alleen de rand. Rechthoekig en ruim, geen
   pil en zeker geen verloop. */
.knop--rand {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.knop--rand:hover { background: var(--surface); color: var(--ink); }
.knop--klein { min-height: 38px; padding: var(--ruimte-2xs) var(--ruimte-sm); font-size: var(--tekst-sm); }

@media (pointer: coarse) { .knop { min-height: 48px; } }

.nevenlink { margin: var(--ruimte-sm) 0 0; font-size: var(--tekst-sm); color: var(--ink-faint); max-width: 38em; }

/* ═══ Hero: H2 split diptych, 7/5 ══════════════════════════════════════════ */

.hero {
    display: grid;
    /* minmax(0,…) en niet 1fr: een grid-spoor met een tekening erin gebruikt
       anders de intrinsieke breedte van die tekening als bodem, en dan schuift
       de hele pagina zijwaarts op een telefoon. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--ruimte-2xl);
    align-items: center;
    padding-block: var(--ruimte-2xl) var(--ruimte-3xl);
}
.hero__bewijs { margin: 0; min-width: 0; }
.hero__bewijs svg { display: block; width: 100%; height: auto; }
.hero__bewijs figcaption { margin-top: var(--ruimte-xs); font-size: var(--tekst-xs); color: var(--ink-faint); }

@media (max-width: 60rem) {
    .hero { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-xl); padding-block: var(--ruimte-xl) var(--ruimte-2xl); }
}

/* ═══ Diptiek: bewering links, bewijs rechts, om en om ═════════════════════
   Het scheidingsteken is de goot zelf en geen lijn. Split Studio zet de
   aandacht in twee helften; een streep ertussen maakt er twee kaarten van. */

.diptiek {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ruimte-xl) var(--ruimte-2xl);
    align-items: center;
    padding-block: var(--ruimte-2xl);
}
.diptiek + .diptiek { border-top: var(--lijn-haar) solid var(--line); }
.diptiek__tekst { min-width: 0; }
.diptiek__tekst p { max-width: 34em; }
.diptiek__beeld { margin: 0; min-width: 0; }
.diptiek__beeld svg { display: block; width: 100%; height: auto; border-radius: var(--rond-md); }
.diptiek__beeld figcaption { margin-top: var(--ruimte-2xs); font-size: var(--tekst-xs); color: var(--ink-faint); }
/* Om en om. Op één kolom valt de omkering weg, anders komt bij de helft van de
   blokken het beeld vóór de tekst waar het bij hoort. */
.diptiek--om .diptiek__tekst { order: 2; }

@media (max-width: 60rem) {
    .diptiek { grid-template-columns: minmax(0, 1fr); gap: var(--ruimte-lg); padding-block: var(--ruimte-xl); }
    .diptiek--om .diptiek__tekst { order: 0; }
}

/* ═══ Opsomming zonder kader ═══════════════════════════════════════════════ */

.punten { list-style: none; margin: var(--ruimte-md) 0 0; padding: 0; display: grid; gap: var(--ruimte-xs); max-width: 34em; }
.punten li { position: relative; padding-left: var(--ruimte-md); color: var(--ink-soft); }
.punten li::before {
    content: '';
    position: absolute;
    left: 0; top: .55em;
    width: 9px; height: 9px;
    border-radius: 50%;
    border: 2.5px solid var(--brand);
}
.punten strong { color: var(--ink); font-weight: 600; }

/* ═══ F3 · De spec sheet ═══════════════════════════════════════════════════
   Hier staat wat het is én wat het niet is. Dat tweede hoort erbij: een
   dienst die om vertrouwen vraagt en haar grenzen verzwijgt, vraagt om de
   vraag waaróm ze die verzwijgt. Haarlijnen tussen de regels, geen kaders. */

.spec { width: 100%; border-collapse: collapse; margin-top: var(--ruimte-lg); font-variant-numeric: tabular-nums; }
.spec caption { text-align: left; font-size: var(--tekst-sm); color: var(--ink-faint); padding-bottom: var(--ruimte-sm); }
.spec th, .spec td { text-align: left; vertical-align: top; padding: var(--ruimte-sm) var(--ruimte-md) var(--ruimte-sm) 0; border-top: var(--lijn-haar) solid var(--line); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: var(--lijn-haar) solid var(--line); }
.spec th { font-weight: 600; color: var(--ink); width: 26%; font-size: var(--tekst-sm); }
.spec td:first-of-type { color: var(--ink); width: 36%; }
.spec .spec__noot { color: var(--ink-faint); font-size: var(--tekst-sm); padding-right: 0; }

@media (max-width: 46rem) {
    .spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: auto; }
    .spec tr { border-top: var(--lijn-haar) solid var(--line); padding-block: var(--ruimte-sm); }
    .spec tr:last-child { border-bottom: var(--lijn-haar) solid var(--line); }
    .spec th, .spec td { border: 0; padding: 0; }
    .spec th { color: var(--ink-faint); font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: .06em; }
    .spec td:first-of-type { margin-top: var(--ruimte-3xs); font-weight: 600; }
    .spec .spec__noot { margin-top: var(--ruimte-3xs); }
}

/* ═══ Slotoproep: één knop, niet twee ══════════════════════════════════════ */

.slot {
    border-top: var(--lijn-haar) solid var(--line);
    padding-block: var(--ruimte-3xl) var(--ruimte-2xl);
}
.slot h2 { max-width: 16em; }
.slot .acties { margin-top: var(--ruimte-lg); }

/* ═══ Stappen met een tekening erbij (hoe-werkt-het) ═══════════════════════
   De afbeeldingen zijn tekeningen van de schermen, geen foto's ervan. Ze
   staan als SVG in de pagina zelf: dan gebruiken ze de huisletter en het
   palet hierboven, en blijven ze scherp op elk formaat. */

.stap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--ruimte-lg) var(--ruimte-xl);
    align-items: center;
    margin-top: var(--ruimte-xl);
    padding-top: var(--ruimte-xl);
    border-top: var(--lijn-haar) solid var(--line);
}
.stap:first-of-type { border-top: 0; padding-top: var(--ruimte-2xs); }
.stap__tekst { min-width: 0; }
.stap__tekst p { max-width: 30em; }
/* Het nummer hoort bij een stap die je in volgorde doet, en dat is hier ook
   zo. Het staat bóven de kop en niet ernaast: een label in een eigen kolom
   naast zijn kop is de opmaak van een sjabloon, niet van een hoofdstuk. */
.stap__nr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-bottom: var(--ruimte-2xs);
    border-radius: 50%;
    background: var(--brand); color: var(--op-brand);
    font-size: var(--tekst-xs); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.stap__beeld { margin: 0; min-width: 0; }
.stap__beeld svg { display: block; width: 100%; height: auto; border-radius: var(--rond-md); }
.stap__beeld figcaption { margin-top: var(--ruimte-2xs); font-size: var(--tekst-xs); color: var(--ink-faint); }
.stap:nth-of-type(even) .stap__tekst { order: 2; }

@media (max-width: 60rem) {
    .stap { grid-template-columns: minmax(0, 1fr); }
    .stap:nth-of-type(even) .stap__tekst { order: 0; }
}

/* ═══ Tabbladen zonder JavaScript ══════════════════════════════════════════
   Radioknoppen met labels ervoor. Dat werkt zonder script, en het toetsenbord
   doet meteen het juiste: met de pijltjes wissel je van tab.

   De knoppen blijven in de gewone tekstloop staan. Haal je ze eruit met
   position: absolute, dan springt de pagina bij een klik naar de plek waar de
   browser denkt dat de knop staat. */

.tabs { margin-top: var(--ruimte-xl); }
.tabs__keuze { width: 1px; height: 1px; margin: 0 0 -1px; padding: 0; border: 0; opacity: 0; }
.tabs__strook {
    display: flex; flex-wrap: wrap; gap: var(--ruimte-2xs);
    border-bottom: var(--lijn-haar) solid var(--line);
}
.tabs__strook label {
    padding: var(--ruimte-2xs) var(--ruimte-sm);
    border: var(--lijn-haar) solid transparent;
    border-bottom: 0;
    border-radius: var(--rond-md) var(--rond-md) 0 0;
    font-weight: 600;
    font-size: var(--tekst-sm);
    color: var(--ink-soft);
    cursor: pointer;
    margin-bottom: -1px;
    white-space: nowrap;
    min-height: 40px;
    display: inline-flex; align-items: center;
    transition: color var(--duur-micro) var(--soepel-uit),
                background-color var(--duur-micro) var(--soepel-uit);
}
.tabs__strook label:hover { color: var(--brand-diep); background: var(--brand-wash); }
.tabs__paneel { display: none; padding-top: var(--ruimte-sm); }

#rol-ondertekenaar:checked ~ .tabs__strook label[for="rol-ondertekenaar"],
#rol-portaal:checked        ~ .tabs__strook label[for="rol-portaal"] {
    background: var(--surface);
    border-color: var(--line);
    border-bottom: var(--lijn-haar) solid var(--surface);
    color: var(--ink);
}
#rol-ondertekenaar:checked ~ .tabs__panelen #paneel-ondertekenaar,
#rol-portaal:checked        ~ .tabs__panelen #paneel-portaal { display: block; }

/* De focusring hoort om het label heen, want de radioknop zelf is niet te
   zien. Zonder dit is met het toetsenbord niet te volgen waar je bent. */
#rol-ondertekenaar:focus-visible ~ .tabs__strook label[for="rol-ondertekenaar"],
#rol-portaal:focus-visible        ~ .tabs__strook label[for="rol-portaal"] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ═══ Losse noot in de tekst ═══════════════════════════════════════════════
   Geen dikke gekleurde streep langs één zijde: dat is de vorm die elke
   gegenereerde pagina draagt. Een haarlijn rondom en een rustiger vlak. */

.noot {
    margin-top: var(--ruimte-md);
    padding: var(--ruimte-sm) var(--ruimte-md);
    background: var(--surface);
    border: var(--lijn-haar) solid var(--line);
    border-radius: var(--rond-md);
    max-width: 38em;
}
.noot p:first-child { margin-top: 0; }
.noot strong { color: var(--ink); }

code {
    font-family: var(--letter-code);
    font-size: .88em;
    background: var(--brand-wash);
    border: var(--lijn-haar) solid var(--brand-lijn);
    border-radius: var(--rond-sm);
    padding: 1px 5px;
}

/* ═══ Ft4 · Het colofon ════════════════════════════════════════════════════
   Geen vier kolommen met links en een rij pictogrammen eronder. Dit is een
   dienst die vastlegt wie iets deed; dan hoort onderaan te staan wie hem
   voert, onder welk nummer en op welk adres. Eén dicht blok, ragged right. */

.colofon {
    position: relative;
    z-index: var(--z-basis);
    border-top: var(--lijn-haar) solid var(--line);
    background: var(--surface);
    margin-top: var(--ruimte-2xl);
}
.colofon__inhoud {
    padding-block: var(--ruimte-xl) var(--ruimte-2xl);
    max-width: 64em;
}
.colofon__naam {
    font-family: var(--letter-kop);
    font-size: var(--tekst-md);
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--ink);
    margin: 0;
}
.colofon__naam b { font-weight: 600; color: var(--brand-kop); }
.colofon__blok {
    margin: var(--ruimte-sm) 0 0;
    max-width: none;
    font-size: var(--tekst-sm);
    line-height: 1.75;
    color: var(--ink-faint);
    text-wrap: pretty;
}
.colofon__blok strong { color: var(--ink-soft); font-weight: 600; }
.colofon__blok a { white-space: nowrap; }

/* ═══ De tekeningen ════════════════════════════════════════════════════════
   De schermen en documenten op deze site zijn tekeningen, geen schermafdrukken.
   Ze staan als SVG in de pagina zelf, zodat ze de huisletter en het palet
   hierboven gebruiken en op elk formaat scherp blijven. De letter wordt hier
   gezet en niet per element: font-family in een presentatie-attribuut zou de
   naam van de letter op tweehonderd plekken herhalen. */

.tekening text { font-family: var(--letter-tekst); }
.tekening .t-kop  { font-family: var(--letter-kop); font-weight: 600; }
.tekening .t-code { font-family: var(--letter-code); }

/* ═══ De ene binnenkomst ═══════════════════════════════════════════════════
   Eén reeks bij het laden van de pagina en verder niets. Geen sectie die
   invaart zodra je hem nadert: dan komt de pagina nooit tot rust. */

.komt-op {
    opacity: 0;
    transform: translateY(8px);
    animation: komt-op var(--duur-lang) var(--soepel-uit) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes komt-op { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 150ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 150ms !important;
    }
    .komt-op { transform: none; animation-delay: 0ms; }
}