/**
 * affiche.css — de landingspagina als affiche op een zichtbaar raster (Sessie 238)
 *
 * Direction contract: .impeccable/surfaces/index-html.md ("Het raster van Total Design").
 * Licht papier, zwarte inkt, precies één signaalrood dat uitsluitend "hier ben jij aan
 * zet" betekent. Een 12-koloms raster zonder goot: de kolomgrenzen zijn de haarlijnen,
 * cellen dragen hun eigen binnenruimte. Toestanden spreken via inversie, niet via extra
 * kleur. De terminal is een donkere module die binnen zijn rand zijn eigen
 * betekeniskleuren houdt (prompt, tip, fout) — dat is inhoud, geen decoratie.
 *
 * Alleen index.html laadt dit bestand, als laatste, ná affiche-basis.css. Dat bestand
 * draagt sinds sessie 252 wat elke pagina deelt: het palet (--af-papier, --af-inkt,
 * --af-rood, ...), de Archivo-letter, het hertokenen van de gedeelde regels, en navbar,
 * footer en consentbanner. Hier staat alleen de pagina zelf, onder body.home:
 * - de module- en ritmetokens van deze pagina;
 * - de secties, met eigen af-klassen, zodat de gedeelde regels van landing.css (die 25
 *   pagina's laden) er niet op matchen.
 *
 * Elke kleurwaarde hieronder is gemeten, niet geschat (ratio's in de comments, WCAG 2.x).
 */

/* ==================== Tokens ==================== */
body.home {
  /* De module: in beide thema's zwart. Sinds sessie 250 spreekt hij de taal van de pagina
     (proef A/B, B gekozen): tekst uit de papierfamilie in plaats van GitHub-blauwgrijs, de
     prompt in papier 700 in plaats van lime, de cursor in het signaalrood (jij bent aan
     zet), en een [TIP] — Nederlands — op een papieren label. Fout en waarschuwing zijn de
     enige tinten die blijven, en vallen daardoor meer op.
     Gemeten op #0a0a0a: tekst 13,58 · dim 7,81 · prompt 17,18 · fout 7,74 · waarschuwing 7,84;
     op #000 (donker thema) hoger. Tiplabel: inkt op papier 16,39. */
  --af-m-grond: #0a0a0a;
  --af-m-lijn: #2c2c2a;
  --af-m-tekst: #d6d6d2;
  --af-m-dim: #a3a39d;
  --af-m-prompt: #efefec;
  --af-m-label: #efefec;       /* het papier van een [TIP]-label: vast, ook in het donkere thema */
  --af-m-label-inkt: #111111;
  --af-m-fout: #fa7c76;
  --af-m-waarsch: #d29922;
  --af-m-glos: #d6d6d2;        /* glos ín de module (onder 768px): 13,58 */
  --af-m-oplicht: #23231f;

  /* Maat, ritme en de koppenschaal staan sinds sessie 254 in affiche-basis.css (:root):
     gidsen leest ze ook. De afficheschaal (--af-affiche) draagt hier de h1, de slotkop en
     de cijfers (sessie 247-248). */
  --af-rij: 1.5rem;                              /* 27px regel in de module */
  --af-registratie: 700ms;

  background: var(--af-papier);
  color: var(--af-inkt);
}

/* Het donkere thema: het palet staat in affiche-basis.css (:root[data-theme="dark"]); hier
   alleen de module, die op de inktgrond nog dieper zwart wordt. */
[data-theme="dark"] body.home {
  --af-m-grond: #000000;
  --af-m-lijn: #3a3a37;
}

/* De module op de inktgrond: een papieren haarlijn eromheen, zodat hij als module leest
   en niet als gat in de pagina (#6f6f6a op #000: 3,74 — niet-tekst, lat 3). De rechter-
   rand van het lichaam zit in zijn verloop, want dat lichaam loopt door onder de glossen. */
[data-theme="dark"] body.home .af-term-kop,
[data-theme="dark"] body.home .af-term .terminal-input-line {
  outline: 1px solid var(--af-lijn-sterk);
  outline-offset: -1px;
}

[data-theme="dark"] body.home .af-term .terminal-body {
  background: linear-gradient(to right,
    var(--af-lijn-sterk) 0 1px,
    var(--af-m-grond) 1px calc(58.3333% - 1px),
    var(--af-lijn-sterk) calc(58.3333% - 1px) 58.3333%,
    transparent 58.3333%);
}

[data-theme="dark"] body.home .af-transcript,
[data-theme="dark"] body.home .af-specimen-cmds {
  outline: 1px solid var(--af-lijn-sterk);
  outline-offset: -1px;
}

/* De haarlijnen zijn zichtbaar in het eerste scherm: daar ís het raster de vorm. Eén
   achtergrondlaag, geen extra DOM. Twaalf tegels over de contentbox, plus de rechterrand
   apart (de laatste tegel eindigt precies op de rand en tekent die dus niet).
   Sessie 248 (layout): ook in de cijfers, en verder nergens. Daar is het raster een tabel
   (rijlijnen kruisen kolomlijnen) en geen behang; het stopte tot dan na het eerste scherm.
   Bewaakt: "haarlijnen alleen in hero en cijfers". */
.af-hero-raster,
.af-inventaris .af-raster {
  background-image:
    linear-gradient(to right, var(--af-lijn) 1px, transparent 1px),
    linear-gradient(to left, var(--af-lijn) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-origin: content-box;
  background-clip: content-box;
}

.af-inventaris,
.af-slot,
.af-sample,
.af-news {
  padding-block: var(--af-sectie-kort);
}

/* ==================== HERO ==================== */
.af-hero {
  padding-block: 12px clamp(40px, 5vw, 72px);
}

/* Container voor de registratie (zie .reg): het raster, niet .af-term. container-type
   brengt layout-containment mee, en daarmee valt subgrid terug op `none` — .af-term-col
   en .af-term zijn allebei subgrid. */
.af-hero-raster {
  row-gap: 0;
  container-type: inline-size;
}

.af-term-col {
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
}

/* Kolomkop en uitnodiging staan in .af-term, elk op de rij van hun terminaltegenhanger
   (zie de HTML): de kop naast .af-term-kop, de uitnodiging naast de invoerregel. */
body.home .af-hint,
.af-glos-kop {
  grid-column: 8 / -1;
  align-self: center;
  margin: 0;
  padding: 0 var(--af-cel);
  font-family: var(--af-tekst);
  font-size: var(--af-klein);
  font-weight: 700;
  line-height: 1.3;
  color: var(--af-inkt);
}

.af-glos-kop { color: var(--af-inkt-2); }

/* De uitnodiging is de glos van de invoerregel: dezelfde aanhaallijn als .reg-glos. */
body.home .af-hint {
  position: relative;
}

body.home .af-hint::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--af-cel) - 6px);
  border-top: 1px solid var(--af-inkt);
}

/* Een uitnodiging die je hebt aangenomen is ruis. `visibility` en niet `display`: anders
   krimpt de kolom en verspringt het venster onder de muis (gemeten 29px). */
.af-term-col.is-taken .af-hint {
  visibility: hidden;
}

/* ---------- De module ---------- */
/* body.home erbij: [data-theme="light"] .hero-terminal (0,2,0) zet een schaduw. */
body.home .af-term {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  overflow: visible;
}

.af-term-kop {
  grid-column: 1 / 8;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px var(--af-cel);
  background: var(--af-m-grond);
  border-bottom: 1px solid var(--af-m-lijn);
  font-family: var(--af-mono);
  font-size: var(--af-klein);
  color: var(--af-m-dim);
}

/* Het lichaam loopt over alle twaalf kolommen: links de module, rechts het papier van de
   glossen. Zonder goot is de modulebreedte exact 7/12. */
body.home .af-term .terminal-body {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  align-content: end;
  /* landing.css zet hier justify-content: flex-end voor zijn flexvenster; in een grid
     schuift dat de track naar rechts (gemeten: 1150px track, 205px ingesprongen). */
  justify-content: stretch;
  flex-direction: initial;
  height: calc(var(--af-rij) * 7 + 16px);
  /* De lucht boven en onder is een rand en geen padding (sessie 250): padding scrolt mee,
     en dan piepte er boven en onder 8px van de naburige regel door. Een rand knipt de
     inhoud af op de paddingbox, en de achtergrond (de modulegrond) loopt er gewoon onder
     door. Wat scrolt is zo precies zeven regels hoog. */
  padding: 0;
  border: 0;
  border-block: 8px solid transparent;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  /* Geen ankerpunt voor de paginascroll. Stond de vensterrand binnen de uitvoer, dan koos
     de browser een uitvoerregel als anker; haalde trim() bij 120 regels de oudste weg, dan
     "corrigeerde" hij de pagina 192px omhoog (sessie 243, chromium en firefox). */
  overflow-anchor: none;
  background: linear-gradient(to right, var(--af-m-grond) 0 var(--af-module), transparent 0);
  font-family: var(--af-mono);
  font-size: 0.86rem;
  line-height: var(--af-rij);
}

/* Het oude vervagingsmasker van landing.css hoort bij een ander venster. */
body.home .af-term .terminal-body::before {
  content: none;
}

/* Live: scrollbaar, en bovenaan beginnen. Grid met align-content:end én overflow clipt
   de bovenkant onbereikbaar (css-layout §8) — dus bij overname naar start, en de JS
   brengt het nieuwste command bovenaan in beeld (hero-repl.js toonCommand). */
body.home .af-term .terminal-body.is-live {
  display: grid;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--af-lijn-sterk) transparent;
}

/* ---------- De registratie: één rij, twee cellen ---------- */
/* De modulebreedte gemeten tegen het raster (container .af-hero-raster), niet tegen het
   lichaam. `7fr 5fr` verdeelde de ruimte BINNEN de scrollbalk: met een klassieke balk
   (10px, Linux/Windows) verschoof de naad 5,8px t.o.v. .af-term-kop en .af-glos-kop,
   precies bij het signatuurmoment. Nu eet de balk alleen uit de glos-kolom. */
body.home .af-term {
  --af-module: calc(100cqw * 7 / 12);
}

.reg {
  display: grid;
  grid-template-columns: var(--af-module) minmax(0, 1fr);
  align-items: baseline;
}

/* De cel draagt zelf de modulegrond. Het verloop op het lichaam vult alleen de lege
   ruimte; zonder eigen achtergrondkleur staat de tekst voor elk kleurinstrument
   (contrastspec, forced-colors) op papier — gemeten 1,34:1, terwijl hij op zwart staat. */
body.home .reg .terminal-line {
  margin: 0;
  padding: 0 var(--af-cel);
  background-color: var(--af-m-grond);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--af-m-tekst);
  transition: background-color var(--af-registratie) var(--af-ease);
}

body.home .reg .terminal-line.prompt { color: var(--af-m-prompt); font-weight: 700; }
body.home .reg .terminal-line .dim { color: var(--af-m-dim); }

/* Een [TIP] is de Nederlandse laag van de 80/20-output, dus hij staat op papier: een label
   achter de tekst, binnen de module. Een strook over de volle modulebreedte (eerste proef)
   las als een snee: dezelfde kleur als de pagina, op de rand van de module. Het label
   breekt mee als de regel omslaat (clone). Vaste kleuren: in het donkere thema is
   --af-papier de grond, en dan verdween het label. */
body.home .reg .terminal-line > .tip,
body.home .af-transcript .terminal-line > .tip {
  background: var(--af-m-label);
  color: var(--af-m-label-inkt);
  padding: 1px 6px;
  margin-left: -6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
body.home .reg .terminal-line .warn { color: var(--af-m-waarsch); }
body.home .reg .terminal-line .err { color: var(--af-m-fout); }

.reg-glos {
  position: relative;
  padding: 0 var(--af-cel);
  font-family: var(--af-tekst);
  font-size: var(--af-klein);
  line-height: var(--af-rij);
  color: var(--af-inkt);
  transition: background-color var(--af-registratie) var(--af-ease), color var(--af-registratie) var(--af-ease);
}

/* Op de basislijn van zijn regel zakt de glos 1px (Chromium, WebKit) of 0,5px (Firefox),
   en de rij groeide mee tot 28: het venster van 7 x 27px ging dan nooit op een hele
   regel uit, en na help stond de [TIP] half afgesneden onderaan (sessie 250). De marge
   geeft die pixel terug zonder de basislijn te raken: elke rij is weer 27. Alleen naast
   elkaar: onder 768 staat de glos onder zijn regel, en daar maakte hij de rij 47. */
@media (min-width: 768px) {
  .reg-glos:not(:empty) {
    margin-bottom: -1px;
  }
}

/* Een glos met inhoud snijdt zich uit het raster (papieren vlak) en hangt met een
   aanhaallijn van 1px aan zijn regel. Een lege cel laat de rasterlijnen doorlopen. */
.reg-glos:not(:empty) {
  background: var(--af-papier);
}

.reg-glos:not(:empty)::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--af-rij) / 2);
  width: calc(var(--af-cel) - 6px);
  border-top: 1px solid var(--af-inkt);
}

/* De signatuur: regel en glos lichten samen op (tot sessie 249 ook de poort in het diagram). Erin zonder transitie, eruit met
   een ease-out — het oplichten is het moment, het nagloeien de rust. */
.reg.is-lit .reg-glos:not(:empty) {
  background: var(--af-inkt);
  color: var(--af-papier);
  transition: none;
}

.reg.is-lit .reg-glos:not(:empty)::before {
  border-top-color: var(--af-papier);
}

body.home .reg.is-lit .terminal-line {
  background: var(--af-m-oplicht);
  transition: none;
}

/* ---------- Invoerregel ---------- */
body.home .af-term .terminal-input-line {
  grid-column: 1 / 8;
  display: flex;
  align-items: center;
  gap: 1ch;
  min-height: 44px;
  padding: 0 var(--af-cel);
  box-sizing: border-box;
  background: var(--af-m-grond);
  border-top: 1px solid var(--af-m-lijn);
  font-family: var(--af-mono);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--af-m-prompt);
  cursor: text;
  /* Het lichaam erboven is position: relative (scrollTop, css-layout §8) en schildert
     daardoor over de outline van een statische broer: de bovenzijde van de focusring
     verdween (gemeten sessie 246, 0 rode pixels boven). Gepositioneerd en later in de
     boom schildert deze regel erna. Het enige absolute kind is het sr-only-label. */
  position: relative;
}

.hero-input-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* In rust is het veld één teken breed, zodat de cursor bij de prompt staat en niet aan
   de rechterrand; bij overname krijgt het de hele regel. */
body.home .af-term .hero-input {
  flex: 0 0 auto;
  width: 1ch;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--af-m-tekst);
  caret-color: var(--af-rood);
  font: inherit;
  font-weight: 400;
  outline: none;
}

body.home .af-term-col.is-taken .hero-input,
body.home .af-term:has(.is-live) .hero-input {
  flex: 1 1 auto;
  width: auto;
}

body.home .af-term .hero-input::placeholder {
  color: var(--af-m-dim);
  opacity: 1;
}

/* Staand, niet knipperend: het veld is in rust readonly en tekent dus geen eigen caret;
   dit blokje zegt "hier typ je". De beweging die de pagina heeft, is de registratie. */
body.home .af-term .cursor {
  color: transparent;
  background: var(--af-rood);
  animation: none;
  /* Op de plek waar je eerste letter komt (finish review s250): de gap van 1ch en het
     rustveld van 1ch stonden ervoor, dus het blok stond 2ch rechts van het invoerpunt.
     Het veld houdt zijn breedte (klik en tests rekenen erop); het blok schuift eroverheen,
     en laat een klik door naar het veld eronder: het is beeld, geen doel. */
  margin-left: -2ch;
  pointer-events: none;
}

body.home .af-term:has(.is-live) .cursor {
  display: none;
}

/* Focus: de invoerregel krijgt de ring die elk ander focusbaar element hier draagt: jij
   bent aan zet, en hier typ je. Tot sessie 246 waren het twee rode strepen van 4px links
   op kop en invoerregel: 308 veranderde pixels tegen ~3300 die WCAG 2.4.13 vraagt
   (omtrek x 2px), en een zijstreep waar de rest van de pagina een ring heeft. Een echte
   outline tekent ook onder forced-colors, dus het transparante vangnet is niet meer nodig. */
body.home .af-term:focus-within .terminal-input-line {
  outline: 2px solid var(--af-focus);
  outline-offset: 2px;
  /* Sinds de toetsenrij strak onder de invoerregel ligt (sessie 249) schilderden de chips
     (later in de boom, ook gepositioneerd) over de onderkant van de ring. */
  z-index: 1;
}

body.home .af-term .hero-input:focus-visible {
  outline: none;
}

/* ---------- De toetsenrij ---------- */
/* De chips zijn het toetsenbord van de terminal (sessie 249, proef H2): één rij zonder
   tussenruimte, vast onder de invoerregel, met hun randen op de rasterlijnen die erachter
   lopen (twee kolommen per chip). Tot dan zes losse kaders op inhoudsbreedte met 8px
   ertussen: de randen vielen 5-11px naast de lijnen, en 16px eronder begon het diagram,
   zodat terminal, chips en diagram als één massa lazen (het diagram is sinds sessie 249
   uit de hero). De herkomst per chip ("netwerk ·
   gevorderd") is vervallen: een derde tekstniveau dat de beginner niet nodig heeft om te
   tikken. Knoppen hebben een inktkader van 2px en een schaduwloze inversie. */
body.home .af-chips-rij {
  grid-column: 1 / -1;
  margin-top: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* Gelijke kolommen: zes vanaf 1280 (twee rasterkolommen per chip), drie tot 1279, twee
   onder 768. Aangrenzende kaders delen één lijn van 2px: elke chip na de eerste in zijn
   rij laat zijn linkerrand weg, elke rij na de eerste zijn bovenrand, en krijgt die 2px
   als binnenruimte terug, zodat alle chips even hoog zijn en hun tekst even ver van de
   gedeelde lijn staat (gemeten: zonder compensatie 55 tegen 53px op 375). */
.af-chips {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}

body.home .hero-chip {
  position: relative;
  display: grid;
  /* De indexkolom meet zich in zijn eigen letter (min-width op .af-chip-nr), niet in
     `ch` van de chip: WebKit gaf 3ch hier 31px (Chromium 27), zes keer 4px was precies
     het tekort waardoor de nmap-chip op 1280 over zijn rand liep (sessie 243). */
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  align-content: center;
  min-height: 52px;
  padding: 8px var(--af-cel);
  box-sizing: border-box;
  background: var(--af-papier);
  color: var(--af-inkt);
  border: 2px solid var(--af-inkt);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms var(--af-ease), color 160ms var(--af-ease);
}

@media (min-width: 1280px) {
  /* Ná de basisregel hieronder, niet ervoor: met gelijke specificiteit won die op volgorde,
     en de eerste chip hield --af-cel (20px op 1440), 8px meer dan de rest (sessie 250). */
  /* "nmap 192.168.1.1" is 144px; met de celmaat links haalde hij op 1280 3,9px lucht tot
     zijn rand (gemeten, de guard vraagt 6). 12px is de kleinste celmaat. */
  body.home .hero-chip { padding-left: 12px; }
  body.home .hero-chip:not(:first-child) { border-left-width: 0; padding-left: 14px; }
  /* Sinds de toetsenrij zes gelijke kolommen heeft (s249) stond "nmap 192.168.1.1" op
     1280-1296 in Firefox en WebKit 3,2px van zijn rand (gate sessie 250; Chromium haalde het).
     Het command breekt nooit en staat links, dus alleen wat links van hem staat telt. De
     indexkolom is drie tekens breed voor [✓]; een nummer is er twee. Op 1,6em steekt [✓]
     0,2em in de gap van 8 (blijft 5px), een gewone chip verandert niet zichtbaar, en het
     command krijgt 3px terug. */
  body.home .hero-chip .af-chip-nr { min-width: 1.6em; }
}

.af-chip-nr {
  align-self: center;
  position: relative;
  /* Drie tekens breed voor [✓]. In em en niet in ch: `--font-terminal` begint met de
     kadertekensubset, en WebKit rekent ch op dat font (3ch = 22px). JetBrains Mono heeft
     een advance van 600/1000, dus drie tekens = 1,8em, in elke engine 27px. */
  min-width: 1.8em;
  font-family: var(--af-mono);
  font-size: var(--af-klein);
  color: var(--af-inkt-2);
}

.af-chip-cmd {
  grid-column: 2;
  font-family: var(--af-mono);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  /* Een command is één ding dat je typt, dus het breekt nooit. Dit is ook de intrinsieke
     maat: zonder nowrap gaf WebKit de nmap-chip in de auto-kolommen op 1280-1296px te
     weinig breedte (brak), en schatte het de tweede chiprij op mobiel 85 in plaats van
     68px hoog (sessie 243). */
  white-space: nowrap;
}

/* De volgende: het indexnummer inverteert (inktblok, papieren cijfer). Niet rood: rood is per scherm één drager, de primaire actie
   (hero-accent-budget.spec.js). Tot sessie 246 een inkten balk van 6px links: een
   zijstreep in plaats van de inversie van deze wereld, en bij hover verdween hij in de
   geïnverteerde chip (proef C0/C1, .playwright-mcp/s246-proef-chips-*.png). De kolom
   houdt zijn 1.8em, zodat command en herkomst niet verschuiven. */
body.home .hero-chip.is-next .af-chip-nr {
  justify-self: start;          /* op mobiel staat de index in één kolom: niet oprekken */
  background: var(--af-inkt);
  color: var(--af-papier);
  text-align: center;
}

/* Gedaan: het nummer maakt plaats voor [✓]. `visibility` en niet `display`, zodat de
   kolom niet verspringt; het vinkje staat over dezelfde plek. */
body.home .hero-chip.is-done .af-chip-nr {
  visibility: hidden;
}

body.home .hero-chip.is-done .af-chip-nr::after {
  content: '[✓]';
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--af-inkt);
}

body.home .hero-chip:hover,
body.home .hero-chip:focus-visible {
  background: var(--af-inkt);
  color: var(--af-papier);
  transform: none;
}

body.home .hero-chip:hover .af-chip-nr,
body.home .hero-chip:focus-visible .af-chip-nr,
body.home .hero-chip:hover .af-chip-nr::after,
body.home .hero-chip:focus-visible .af-chip-nr::after {
  color: var(--af-papier);
}

/* In de geïnverteerde chip inverteert het label terug: het blijft zichtbaar als blok. */
body.home .hero-chip.is-next:hover .af-chip-nr,
body.home .hero-chip.is-next:focus-visible .af-chip-nr {
  background: var(--af-papier);
  color: var(--af-inkt);
}

/* ---------- De scan (sessie 247, overdrive) ----------
   Het memorabele moment zonder klik: de reeks rolt regel voor regel uit (.reg.is-rol),
   elke regel met zijn glos. Tot sessie 249 tekende zich ook een scanpijl naar een router
   en sprongen er poorten open; dat netwerkdiagram is uit de hero (proef V3: te veel lagen,
   en het herhaalde wat de glos al zegt). De vertragingen zet hero-registratie.js (STAP_MS);
   hier staat alleen de vorm. Alles beweegt vanuit een zichtbare eindstand: zonder animatie
   (reduced motion, een meting) staat er meteen het eindbeeld. */
.reg.is-rol {
  animation: af-rol 180ms var(--af-ease) var(--reg-vertraging, 0ms) backwards;
}

@keyframes af-rol {
  from { clip-path: inset(0 100% 0 0); }
}

/* ---------- Kop en actie ---------- */
/* Het instappunt: de kop op afficheschaal over alle twaalf kolommen; ondertitel en actie
   eronder (zie de regel vanaf 1280px). */
.af-hero-tekst {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: end;
  /* Lucht naar groep (sessie 250, eigenaar: "krap op elkaar"): kop, zin en knop zijn één
     groep en staan dicht op elkaar; tussen die groep en de terminal zit de grote stap.
     Gemeten op 1440 vóór: 30 / 14 / 20 / 26px, alles even ver. Maximaal wat de vouw op
     1280x800 toelaat (chips onder op 793). */
  padding-top: clamp(24px, 2.5vw, 44px);
  margin-bottom: clamp(40px, 3.45vw, 56px);
}

.af-hero-tekst h1 {
  grid-column: 1 / -1;
  font-size: var(--af-affiche);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
  padding-right: var(--af-cel);
}

.af-hero-zij {
  grid-column: 10 / -1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: var(--af-cel);
}

.af-hero-sub {
  font-size: 1rem;
  color: var(--af-inkt);
}

/* Lopende tekst snijdt zich uit het raster, net als de glos: een haarlijn door een regel
   van 15-18px maakt hem slechter leesbaar (gemeten: 6 lijnen door de ondertitel, 4 door
   het onderschrift). Populatie, geen lijst: elke alinea in het hero-raster, zodat een
   nieuwe er vanzelf onder valt. De kop op afficheschaal mag over het raster staan. */
.af-hero-raster p {
  width: fit-content;
  background: var(--af-papier);
}

.af-hero-zij .af-actie {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Desktop: de kop over de volle breedte, daaronder de ondertitel (kolom 1-8) en de actie
   (kolom 10-12) op één rij. Stond de ondertitel naast de kop, dan werd die kolom (vier
   regels + knop) hoger dan de kop en zakte het instappunt 100px (gemeten: kop op 197 i.p.v.
   ~100). `display: contents` en geen `order`: de DOM-volgorde kop → ondertitel → actie blijft de
   leesvolgorde, en de actie is het enige focusbare element van de drie.
   Pas vanaf 1280px: daaronder is de kolom naast de kop 3/12 van ~1000px en brak de knop
   over twee regels (gemeten @1024). Het is ook de grens van de mobiele CTA-balk. */
@media (min-width: 1280px) {
  .af-hero-zij {
    display: contents;
  }

  .af-hero-tekst h1 {
    grid-row: 1;
  }

  .af .af-hero-sub {
    grid-column: 1 / 9;
    grid-row: 2;
    align-self: start;   /* de actie ernaast is hoger; met `end` zakte de ondertitel 25px */
    padding-top: clamp(16px, 1.56vw, 24px);
  }

  /* De actie staat in de leesrij: kop, zin, knop, met de microcopy naast de knop (sessie
     249, proef V1-V3). Van sessie 247 tot 249 stond hij rechts in kolom 10-12, op de rij
     van de ondertitel: los van de zin die hij afsluit ("vreemd gepositioneerd", eigenaar).
     Dat kostte geen hoogte; nu wel (76px), en die komt uit het diagram dat de hero verliet. */
  .af-hero-zij .af-actie {
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: start;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 24px 0 0;
  }

  .af-hero-zij .af-actie .af-microcopy { margin: 0; }
}

/* ==================== Herkenbaar? ==================== */
/* Papier op papier na de hero: één inktlijn scheidt ze (de rand van de vroegere
   feitenband). */
.af-pijn {
  border-top: 1px solid var(--af-inkt);
}

.af-pijn-rij {
  display: grid;
  grid-template-columns: subgrid;
  border-top: 1px solid var(--af-inkt);
  padding-block: 32px;
}

.af-pijn-rij:last-child {
  border-bottom: 1px solid var(--af-inkt);
}

.af-transcript {
  grid-column: 1 / 8;
  align-self: start;
  padding: 16px var(--af-cel);
  background: var(--af-m-grond);
  font-family: var(--af-mono);
  font-size: 0.8rem;
  line-height: 1.6;
}

body.home .af-transcript .terminal-line {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--af-m-tekst);
}

body.home .af-transcript .terminal-line.prompt { color: var(--af-m-prompt); font-weight: 700; }
body.home .af-transcript .terminal-line.warning { color: var(--af-m-waarsch); }
body.home .af-transcript .terminal-line.error { color: var(--af-m-fout); }
.af-sub { color: var(--af-m-dim); }

/* Smal: een afgebroken regel springt in, zodat hij als vervolg leest en niet als nieuwe
   regel, en de glos staat op een eigen regel onder zijn waarde, zoals in de mobiele hero.
   Voorheen viel "← Je lokale IP adres" uit elkaar en liep "IP adres" terug naar kolom 0
   (gemeten sessie 246: 4 gebroken regels op 320-414). De inspringing in em, niet in ch
   (TASKS #86). De glos springt in met dezelfde acht spaties als zijn waarde, niet met een
   em-maat: Chromium rondt de tekenbreedte af op 8px, Firefox niet (7,68), dus 4,8em stond
   in Chromium 2,6px naast "inet". De transcript is aria-hidden: de spaties worden niet
   voorgelezen. */
@media (max-width: 767px) {
  body.home .af-transcript .terminal-line {
    padding-left: 2em;
    text-indent: -2em;
  }

  /* Ook in de hero (finish review s250): na `cat notes.txt` brak item 1 zacht terug naar
     kolom 0 terwijl item 2 zijn eigen, harde vervolgregel met drie spaties heeft (zo staat
     het in het bestand). Drie tekens, 1,8em (advance 0,6em), en niet de 2em hierboven:
     dan stond de zachte omslag 2,6px naast de harde. De inhoud blijft letterlijk. */
  body.home .reg .terminal-line {
    padding-left: calc(var(--af-cel) + 1.8em);
    text-indent: -1.8em;
  }

  body.home .af-transcript .af-sub {
    display: block;
    margin-left: -2em;
    text-indent: 0;
  }

  body.home .af-transcript .af-sub::before {
    content: '        ';
  }
}

.af-pijn-tekst {
  grid-column: 8 / -1;
  padding-left: var(--af-cel);
  display: grid;
  gap: 12px;
  align-content: start;
}

.af-pijn-tekst p {
  max-width: 46ch;
}

/* De glos-grammatica van de hero: de kop staat op de rij van de promptregel en hangt er
   met dezelfde aanhaallijn van 1px aan. */
.af-pijn-tekst {
  padding-top: 12px;
}

.af-pijn-tekst h3 {
  position: relative;
}

.af-pijn-tekst h3::before {
  content: '';
  position: absolute;
  left: calc(var(--af-cel) * -1);
  top: 0.6em;
  width: calc(var(--af-cel) - 6px);
  border-top: 1px solid var(--af-inkt);
}

/* ==================== Inventaris ==================== */
/* Over de volle breedte, op het raster (sessie 248, layout): het getal in kolom 1-3, wat
   het is in 4-9, de bron in 10-12. Tot dan stond de tabel in kolom 1-7 en bleef 8-12 leeg
   (sessie 245, proef N3). Elke cel snijdt zich met papier uit de haarlijnen, zoals de
   alinea's in de hero, zodat er geen lijn door een cijfer loopt. De cellen staan op de
   rasterranden en dragen zelf hun binnenruimte (--af-cel), links en rechts gelijk: de
   finish review vond het getal op de lijn en de bron 20px ervan, en bij hover plakte het
   getal tegen de rand van zijn inktblok. */
.af-lijst {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: subgrid;
  border-top: 2px solid var(--af-inkt);
}

.af-inventaris .af-kop > * {
  width: fit-content;
  background: var(--af-papier);
}

/* Label en bron staan op de basislijn van het getal (sessie 249; FORM belooft "zelfde
   basislijn", tot dan gecentreerd). `last baseline`: breekt het label op 768-1279 in twee,
   dan staat zijn laatste regel op de basislijn. Onder 768 staat de bron onder het label en
   blijft de rij gecentreerd. */
body.home .af-lijst-rij {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: last baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--af-lijn-sterk);
  color: var(--af-inkt);
  text-decoration: none;
}

body.home .af-lijst-rij > * {
  width: fit-content;
  background: var(--af-papier);
}

/* Focus is dezelfde toestand als hover: inversie, plus de rode ring (finish review s248:
   focus gaf alleen de ring). */
body.home .af-lijst-rij:hover,
body.home .af-lijst-rij:hover > *,
body.home .af-lijst-rij:focus-visible,
body.home .af-lijst-rij:focus-visible > * {
  background: var(--af-inkt);
  color: var(--af-papier);
}

body.home .af-lijst-rij:hover .af-lijst-waar,
body.home .af-lijst-rij:focus-visible .af-lijst-waar {
  color: var(--af-papier);
}

/* De getallen op afficheschaal, in inkt (sessie 242, proef N/G). Dat is geen
   metric-tegel: die zet een los accentgetal in een kaart en claimt impact. Hier staat
   elk getal in een tabelrij met zijn bron ernaast, natelbaar, zonder kleur. Op 19px mono
   was het getal het kleinste element van een sectie die "in cijfers" heet. */
body.home .af-lijst .result-number {
  grid-column: 1 / 4;
  padding-left: var(--af-cel);
  text-align: left;               /* landing.css zet hem rechts voor de oude tegels */
  font-family: var(--af-kop);
  font-size: var(--af-affiche);   /* sessie 248: de schaalsprong midden op de pagina */
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

body.home .af-lijst .result-label {
  grid-column: 4 / 10;
  padding-left: var(--af-cel);
  font-size: 1.1rem;            /* de maat is de cel (4-9): 40ch brak rij 1 af op kolom 7 */
  color: inherit;
  text-wrap: pretty;   /* "naam)" stond op 1024-1920 alleen op de laatste regel */
}

.af-lijst-waar {
  grid-column: 10 / -1;
  justify-self: end;
  padding-right: var(--af-cel);
  text-align: right;
  font-family: var(--af-mono);
  font-size: var(--af-klein);
  color: var(--af-inkt-2);
}

/* Mono-index: genummerd waar de volgorde de informatie is (chips, leerpad). */
.af-index {
  font-family: var(--af-mono);
  font-weight: 700;
  font-size: 0.83rem;
  color: var(--af-inkt);
}

/* ==================== Leerpad: drie kolommen op het raster ==================== */
/* Sessie 242 (proef L1/L2/L3): geen kaarten meer, maar kolommen gescheiden door een
   haarlijn, zoals Herkenbaar zijn rijen scheidt. Het donkere commandoblok is het enige
   vlak. Van 12 naar 5 lijnen per kolom; de scheidingslijnen in het blok waren geërfd uit
   de gedeelde landing.css, geen keuze van deze pagina. */
.af-specimens {
  display: grid;
  grid-template-columns: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-specimen {
  grid-column: span 4;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
  padding: 0 var(--af-cel);
  border-left: 1px solid var(--af-inkt);
}

.af-specimen:first-child {
  border-left: 0;
  padding-left: 0;
}

.af-specimen:last-child {
  padding-right: 0;
}

.af-specimen-kop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.af-niveau {
  font-family: var(--af-kop);
  font-size: var(--af-h3);
  font-weight: 800;
}

.af-specimen-cmds {
  padding: 12px var(--af-cel);
  background: var(--af-m-grond);
}

/* (0,2,0) wint van landing.css .leerpad-cmd-line (0,1,0): de rand en padding daar zijn
   voor de lijst op de andere pagina's. */
body.home .leerpad-cmd-line {
  padding: 0;
  border-bottom: 0;
  font-family: var(--af-mono);
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--af-m-tekst);
}

/* Eén actie per kolom vooraan: de knop; "Lees eerst" als kleine regel eronder. */
.af-specimen-voet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* De knop staat in de bron vóór "Lees eerst", zoals in beeld (sessie 249). Tot dan zette
   `order: 2` de link visueel na de knop terwijl hij in de Tab-volgorde ervóór kwam
   (WCAG 2.4.3, critique s249). */
.af-specimen-voet .af-leeslink {
  font-size: var(--af-klein);
}

/* ==================== Blog: kantlijn naast de vragen ==================== */
/* Een andere soort dan de vragen, en dat moet je zien: geen Archivo-vet, geen
   scheidingslijnen, geen chevron. Een haarlijn op de naad (kolom 8), een mono-label, en
   per artikel de titel met het pad in mono eronder, zoals de cijferlijst zijn bron noemt
   (sessie 247: boven de titel las het pad als eyebrow, de craft floor verbiedt dat). Tot
   sessie 242 (ronde 2) was de vorm gelijk aan de vragen en lazen ze als drie extra FAQ's.
   Rij 2 expliciet: de kop is rij 1 (css-layout.md §26). */
.af-faq-lees {
  grid-column: 8 / -1;
  grid-row: 2;
  align-self: stretch;          /* de lijn loopt langs de hele lijst, niet tot de inhoud */
  align-content: start;
  display: grid;
  gap: 20px;
  padding: 4px 0 8px var(--af-cel);
  border-left: 1px solid var(--af-inkt);
}

/* ==================== FAQ ==================== */
.af-faq-lijst {
  grid-column: 1 / 8;
  grid-row: 2;
  border-top: 2px solid var(--af-inkt);
}

/* De vragen zelf (rij, vraag, chevron, antwoord) staan sinds sessie 265 in affiche-basis.css:
   contact gebruikt dezelfde FAQ. */

/* ==================== Slot ==================== */
/* De slotklap op inkt (sessie 247): de enige inktband onder de hero, met de rode actie
   erop. Tot dan was de sample de inktband en stond het slot op papier; een slot op inkt
   direct boven een inkten sample gaf ~1000px aaneengesloten zwart (finish review s246).
   Nu wisselen ze: band (vragen), inkt (slot), papier (sample), band (nieuwsbrief). */
.af-slot {
  background: var(--af-inkt);
  color: var(--af-papier);
}

body.home .af-slot h2,
body.home .af-slot-zin,
body.home .af-slot .af-microcopy,
body.home .af-slot .af-microcopy a {
  color: var(--af-papier);
}

/* Op inkt inverteert de actie naar papier, niet naar inkt: anders verdwijnt hij in zijn
   grond (The Inversion Rule: binnen een geïnverteerd blok inverteert het label terug). */
body.home .af-slot .btn-cta.af-cta:hover,
body.home .af-slot .btn-cta.af-cta:focus-visible {
  background: var(--af-papier);
  color: var(--af-inkt);
}

.af-slot h2 {
  grid-column: 1 / -1;
  font-size: var(--af-affiche);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.af-slot-zin {
  grid-column: 1 / 8;
  padding-top: 20px;
  font-size: 1.1rem;
}

.af-slot .af-actie {
  grid-column: 1 / 8;
  padding-top: 32px;
}

/* De tegenhanger van de hero (sessie 248, layout): kop over twaalf kolommen, de zin in
   kolom 1-8 en de actie in 10-12 op dezelfde rij, de knop op de hoogte van de eerste regel
   van de zin. Tot dan stond alles in kolom 1-7 en bleef 5/12 van de inktband leeg.
   Dezelfde grens als de hero: daaronder is kolom 10-12 te smal voor de knop. */
@media (min-width: 1280px) {
  .af-slot-zin {
    grid-column: 1 / 9;
    grid-row: 2;
    align-self: start;
    padding-top: 28px;
  }

  .af-slot .af-actie {
    grid-column: 10 / -1;
    grid-row: 2;
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 28px 0 0 var(--af-cel);   /* 28px = padding-top van de zin */
  }
}


/* ==================== Sample ==================== */
/* Op papier sinds sessie 247 (zie Slot): een inleiding, een inhoudstabel en twee knoppen
   lezen hier als naslag, niet als finale. De HTML houdt .af-band; deze regel komt later
   en wint met dezelfde specificiteit. */
.af-sample {
  background: var(--af-papier);
  color: var(--af-inkt);
}

/* Onder elkaar, in leesvolgorde (sessie 249, proef S3): kop, inleiding, inhoud, actie.
   Tot dan stond de inleiding rechts in de glos-kolom en de knoppen naast de tabel: een kop
   van één regel naast een alinea van vier, een tabel van 146px naast knoppen van 44, en de
   acties 28px hoger dan de inhoud waar ze over gaan ("dit klopt niet qua layout",
   eigenaar). De inleiding hoort onder haar kop, zoals overal (sessie 242, ronde 2). */
.af-sample h2 {
  grid-column: 1 / 8;
}

.af-sample p {
  grid-column: 1 / 8;
  max-width: 62ch;
  margin-top: 16px;
}

.af-sample-acties {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding-top: 24px;
}

/* De inhoudstabel staat sinds sessie 256 in affiche-basis.css (index en de twee samples);
   hier alleen haar afstand onder de inleiding. */
.af-sample .af-sample-inhoud {
  margin-top: 32px;
}

/* ==================== Nieuwsbrief ==================== */
/* De gedeelde .homepage-newsletter centreert en geeft 32px zijpadding; die padding
   versmalt het raster en schuift zijn rail (gemeten). Hier: links, en de rand komt
   van het raster zelf. */
body.home .af-news {
  padding-inline: 0;
  text-align: left;
}

/* Lucht nooit groter dan de inhoud (sessie 248). Tot sessie 262 telde 29px dode reserve onder
   knop en veld (main.css, voor Brevo's verborgen foutlabel) als inhoud mee; zonder die reserve
   is de rij 126px hoog op 1440, en 72px boven en onder werd meer lucht dan inhoud. */
.af-news {
  padding-block: clamp(48px, 3.9vw, 56px);
}

.af-news-tekst {
  grid-column: 1 / 8;
  display: grid;
  gap: 16px;
  align-content: start;
}

.af-news-form {
  grid-column: 8 / -1;
  padding-left: var(--af-cel);
}

/* ==================== Mobiele CTA-balk ==================== */
html.nav-ingeklapt body.home .mobile-cta-bar {
  background-color: var(--af-papier);
  backdrop-filter: none;
  border-top: 1px solid var(--af-inkt);
}

html.nav-ingeklapt body.home .mobile-cta-bar .btn-cta.af-cta {
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  transition-property: opacity;
}


/* ==================== Tot 1280px: kop en actie onder elkaar ==================== */
@media (max-width: 1279px) {
  .af-hero-tekst h1,
  .af-hero-zij {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .af-hero-zij {
    padding-top: 24px;
    gap: 24px;
  }

  .af-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.home .hero-chip:not(:nth-child(3n + 1)) { border-left-width: 0; padding-left: calc(var(--af-cel) + 2px); }
  body.home .hero-chip:nth-child(n + 4) { border-top-width: 0; padding-top: 10px; }
}

/* ==================== Tablet ==================== */
@media (max-width: 1023px) {
  /* Titel en omvang passen pas vanaf 944px naast elkaar in zeven kolommen; daaronder
     braken ze allebei, met een losse "~" op de tweede regel (gemeten sessie 243,
     768-928). De prompt eronder noemt hacker@hacksim al, de omvang zegt iets wat nergens
     anders staat. Eén grens met de rest van de tabletregels in plaats van een eigen. */
  .af-term-titel {
    display: none;
  }

  .af-kop h2,
  .af-kop p {
    grid-column: 1 / -1;
  }

  .af-faq-lijst {
    grid-column: 1 / -1;
  }

  .af-specimen {
    grid-column: 1 / -1;
    padding: 28px 0;
    border-left: 0;
    border-top: 1px solid var(--af-inkt);
  }

  .af-specimen:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .af-specimen:last-child {
    padding-bottom: 0;
  }

  /* Onder 1024 staan de vragen op de volle breedte; de bloglinks volgen eronder. */
  .af-faq-lees {
    grid-column: 1 / -1;
    grid-row: auto;
    padding-left: 0;
  }

  .af-faq-lees {
    margin-top: 40px;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--af-inkt);
  }

  /* Hier opent het blogblok met een eigen lijn, 40px onder de laatste vraag: twee haarlijnen
     vlak onder elkaar. Vanaf 1024 blijft de lijn: daar sluit hij de hoek met de kantlijn
     (proef F0/F1, sessie 245). */
  body.home .af-faq .faq-item:last-child {
    border-bottom: 0;
  }
}

/* ==================== Mobiel ==================== */
/* Eén kolom. De glos gaat de module in, onder zijn regel: op 390px is naast elkaar
   onleesbaar, en onder elkaar houdt de registratie (regel en glos in één rij-element). */
@media (max-width: 767px) {
  /* Twee chips naast elkaar: de index gaat boven het command (proef P1-P3, sessie 243).
     Naast elkaar liet hij 104px voor tekst; "nmap 192.168.1.1" vraagt 120 en brak, en de
     herkomst brak bij de ene chip wel en bij de andere niet (rijen 86/68). Zo zijn alle
     zes even hoog, elk command op één regel, van 360 tot 767. De herkomst is sinds
     sessie 249 weg. */
  body.home .hero-chip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
  }

  .af-chip-nr {
    grid-row: 1;
    align-self: start;
    line-height: 1.3;
  }

  .af-chip-cmd {
    grid-column: 1;
  }

  .af-hero-raster,
  .af-inventaris .af-raster {
    background-size: calc(100% / 4) 100%, 100% 100%;
  }

  .af-glos-kop {
    display: none;
  }

  /* De uitnodiging op een eigen regel onder de invoer, zonder aanhaallijn: er staat
     niets naast om aan te hangen. */
  body.home .af-hint {
    grid-column: 1 / -1;
    padding: 8px 0 0;
  }

  body.home .af-hint::before {
    content: none;
  }

  .af-term-kop,
  body.home .af-term .terminal-input-line {
    grid-column: 1 / -1;
  }

  [data-theme="dark"] body.home .af-term .terminal-body {
    outline: 1px solid var(--af-lijn-sterk);
    outline-offset: -1px;
  }

  body.home .af-term .terminal-body,
  [data-theme="dark"] body.home .af-term .terminal-body {
    /* Twaalf hele regels van 24px plus de padding (was 300: 11,8 regels, en de onderste
       stond na elke tik half in beeld). */
    height: calc(var(--af-rij) * 12 + 16px);
    background: var(--af-m-grond);
    font-size: 0.8rem;
  }

  .reg {
    grid-template-columns: minmax(0, 1fr);
  }

  .reg-glos:empty {
    display: none;
  }

  .reg-glos:not(:empty) {
    background: none;
    color: var(--af-m-glos);
    padding-left: calc(var(--af-cel) + 2ch);
    font-size: 0.78rem;
  }

  .reg-glos:not(:empty)::before {
    left: var(--af-cel);
    width: 1ch;
    border-top-color: var(--af-m-dim);
  }

  .reg.is-lit .reg-glos:not(:empty) {
    background: var(--af-m-oplicht);
    color: var(--af-m-glos);
  }

  .reg.is-lit .reg-glos:not(:empty)::before {
    border-top-color: var(--af-m-dim);
  }

  .af-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Twee per rij: de regels van drie per rij (tot 1279) eerst terugzetten. */
  body.home .hero-chip:nth-child(n) { border-left-width: 2px; border-top-width: 2px; padding-left: var(--af-cel); padding-top: 8px; }
  body.home .hero-chip:nth-child(even) { border-left-width: 0; padding-left: calc(var(--af-cel) + 2px); }
  body.home .hero-chip:nth-child(n + 3) { border-top-width: 0; padding-top: 10px; }

  /* Onder elkaar staat er niets naast de kop om aan te hangen; de aanhaallijn stak dan
     als los streepje buiten de zijmarge (zelfde regel als .af-hint hierboven). */
  .af-pijn-tekst h3::before {
    content: none;
  }

  /* De transcript is een donkere module, geen tekstblok: hij houdt zijn binnenmarge.
     In de lijst hieronder zette padding-left:0 de tekst op x=0 van het zwarte vlak. */
  .af-transcript {
    grid-column: 1 / -1;
  }

  .af-pijn-tekst,
  .af-sample h2,
  .af-sample p,
  .af-sample-inhoud,
  .af-sample-acties,
  .af-news-tekst,
  .af-news-form,
  .af-slot h2,
  .af-slot-zin {
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .af-pijn-tekst,
  .af-sample p,
  .af-news-form {
    padding-top: 20px;
  }


  /* De inhoudstabel zelf staat in affiche-basis.css (s256); hier alleen haar afstand. */
  .af-sample .af-sample-inhoud {
    margin-top: 24px;
  }

  /* Vier kolommen: het getal in de eerste (op de lijn: met binnenruimte past "40+" op 320
     niet in 72px), de omschrijving over de andere drie en de bron eronder, zodat je ook
     zonder hover ziet dat de rij ergens heen gaat (finish review s248; tot dan verborgen). */
  body.home .af-lijst-rij {
    grid-template-rows: auto auto;
    align-items: center;
  }

  body.home .af-lijst .result-number {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    padding-left: 0;
  }

  body.home .af-lijst .result-label {
    grid-column: 2 / -1;
    font-size: 1rem;
  }

  .af-lijst-waar {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
    padding: 4px 0 0 var(--af-cel);
    text-align: left;
  }
}

/* Onder 352px is een halve chip 112px voor tekst en vraagt "nmap 192.168.1.1" 132: met
   nowrap liep het command 8px over de rand (320). Breken op de spatie is dan het mindere
   kwaad; de hero-demo-spec houdt deze grens in twee richtingen vast. */
@media (max-width: 351px) {
  .af-chip-cmd {
    white-space: normal;
  }
}

/* ==================== Minder beweging ==================== */
/* De eindstand is de rusttoestand: niets hoeft te bewegen om de pagina te begrijpen. */
@media (prefers-reduced-motion: reduce) {
  .reg-glos,
  body.home .reg .terminal-line,
  body.home .btn-cta.af-cta,
  body.home .hero-chip {
    transition: none;
  }

  /* hero-registratie.js zet deze klassen onder reduce niet; dit is het vangnet. */
  .reg.is-rol {
    animation: none;
  }

}