/* Gegenereerd door staalkaart.py — niet met de hand wijzigen. */

:root {
  --blad: oklch(97% .003 250);
  --blad-2: oklch(93% .005 250);
  --inkt: oklch(22% .01 250);
  --zacht: oklch(48% .01 250);
  --lijn: oklch(85% .006 250);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--blad);
  color: var(--inkt);
  font: 16px/1.6 ui-sans-serif, system-ui, sans-serif;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }

.paginakop { max-width: 62rem; margin: 0 auto; padding: 4rem 1.5rem 2rem; }
.paginakop h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .6rem; letter-spacing: -.02em; }
.paginakop p { margin: 0 0 1rem; color: var(--zacht); max-width: 58ch; }
.waarschuwing {
  border-left: 3px solid var(--inkt); padding: .7rem 1rem;
  background: var(--blad-2); font-size: .88rem; max-width: 58ch;
}
.inhoud { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.inhoud a {
  border: 1px solid var(--lijn); padding: .35rem .8rem; text-decoration: none;
  color: var(--inkt); font-size: .85rem;
}
.inhoud a:hover { background: var(--blad-2); }

/* ---- een strook: alles van één designtaal, op zijn eigen palet ---- */
.strook { padding: 3.5rem 1.5rem 4rem; border-top: 1px solid var(--lijn); }
.strook > * { max-width: 62rem; margin-inline: auto; }
.strook-kop { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.strook-nr {
  font-family: var(--font-display); font-size: 2rem; line-height: 1;
  opacity: .45; font-variant-numeric: tabular-nums;
}
.strook-titel { font-family: var(--font-display); font-size: 1.9rem; margin: 0; letter-spacing: -.01em; }
.strook-bedrijf { margin: .15rem 0 0; font-size: .85rem; opacity: .7; font-family: var(--font-body); }
.strook-link { margin-left: auto; font-size: .85rem; color: var(--color-primary); font-family: var(--font-body); }
.strook-kern {
  font-family: var(--font-body); margin-top: 1.2rem;
  opacity: .82; font-size: .95rem;
}
/* De leesbreedte zit op een inner <span>, niet op de <p> zelf. Zou de <p>
 * een kleinere max-width krijgen, dan centreert de margin-inline:auto van
 * `.strook > *` hem midden op de pagina in plaats van links uit te lijnen. */
.strook-kern span { display: block; max-width: 62ch; }

.blokkop {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .18em;
  opacity: .55; margin: 2.4rem auto .8rem; font-family: var(--font-body);
}

/* ---- typografie ---- */
.typo { margin-top: 2.2rem; display: grid; gap: 1.4rem; }
.typo-proef { margin: 0 0 .3rem; }
.typo-display { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; }
.typo-body { font-family: var(--font-body); font-size: 1rem; max-width: 60ch; }
.typo-meta { margin: 0; font-size: .78rem; opacity: .6; font-family: var(--font-body); }

/* ---- signatuur ---- */
.signatuur { margin-top: 2.2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.signatuur-nummer {
  font-family: var(--font-display); font-size: 1.8rem; line-height: 1;
  color: var(--color-primary); font-variant-numeric: tabular-nums;
}
.signatuur-uitleg { margin: 0; font-size: .78rem; opacity: .6; font-family: var(--font-body); }

/* ---- palet ---- */
.stalen { margin-top: 2.2rem; display: grid; gap: .4rem; }
.staal {
  display: grid; grid-template-columns: 2.4rem 10rem 1fr auto;
  gap: .8rem; align-items: center; font-family: var(--font-body);
}
/* De rand moet stevig zijn: op een donkere strook is base-100 gelijk aan de
 * achtergrond van de strook, dus zonder zichtbare begrenzing zie je dat staal
 * helemaal niet. Gevonden op de gerenderde pagina. */
.staal-vlak { height: 1.6rem; border: 1px solid color-mix(in oklch, var(--color-base-content) 45%, transparent); }
.staal-naam { opacity: .8; }
.staal-waarde, .staal-hex { opacity: .55; }

/* ---- vlakken ---- */
.vlakken {
  margin-top: 2.2rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.vlak { margin: 0; border: 1px solid color-mix(in oklch, var(--color-base-content) 15%, transparent); }
.vlak-proef {
  background: var(--color-base-100); color: var(--color-base-content);
  padding: 1rem; min-height: 8.5rem; display: flex; flex-direction: column; gap: .6rem;
}
.vlak-naam {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--color-primary); font-family: var(--font-body);
}
.vlak-tekst { margin: 0; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; }
.vlak-knop {
  margin-top: auto; align-self: flex-start; background: var(--color-primary);
  color: var(--color-primary-content); padding: .35rem .7rem; font-size: .75rem;
  font-family: var(--font-body);
}
.vlak figcaption { padding: .7rem 1rem 1rem; font-family: var(--font-body); }
.vlak-uitleg { margin: 0 0 .5rem; font-size: .74rem; opacity: .65; }
.vlak-meting { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.vlak-meting li { display: flex; justify-content: space-between; font-size: .72rem; opacity: .8; }
.vlak-meting code.goed::after { content: " ✓"; }
.vlak-meting code.zakt { font-weight: 700; }
.vlak-meting code.zakt::after { content: " ✕ ZAKT"; }

/* ---- kenmerken ---- */
.kenmerken { margin-top: 2.2rem; display: grid; gap: .5rem; font-family: var(--font-body); }
.kenmerk { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline; }
.kenmerk dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; opacity: .55; }
.kenmerk dd { margin: 0; }
.kenmerk code { opacity: .8; word-break: break-word; }

.voet {
  max-width: 62rem; margin: 0 auto; padding: 3rem 1.5rem 5rem;
  border-top: 1px solid var(--lijn); font-size: .82rem; color: var(--zacht);
}
@media (max-width: 640px) {
  .staal { grid-template-columns: 2rem 1fr; }
  .staal-waarde, .staal-hex { grid-column: 2; }
  .kenmerk { grid-template-columns: 1fr; gap: .1rem; }
}


/* ---- per taal: alle zes tokens + beide fonts ---- */
.taal-atelier {
  --color-base-100: oklch(24% .035 320);
  --color-base-200: oklch(29% .038 320);
  --color-base-300: oklch(40% .035 320);
  --color-base-content: oklch(93% .012 330);
  --color-primary: oklch(80% .10 60);
  --color-primary-content: oklch(22% .03 320);
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-blueprint {
  --color-base-100: oklch(26% .045 250);
  --color-base-200: oklch(31% .045 250);
  --color-base-300: oklch(42% .04 250);
  --color-base-content: oklch(94% .015 235);
  --color-primary: oklch(78% .16 72);
  --color-primary-content: oklch(22% .04 250);
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-boeket {
  --color-base-100: oklch(98% .006 30);
  --color-base-200: oklch(95% .010 30);
  --color-base-300: oklch(88% .014 30);
  --color-base-content: oklch(24% .016 340);
  --color-primary: oklch(45% .16 345);
  --color-primary-content: oklch(98% .006 30);
  --font-display: "Space Grotesk", Georgia, serif;
  --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-brief {
  --color-base-100: oklch(98.5% .012 85);
  --color-base-200: oklch(96% .016 85);
  --color-base-300: oklch(90% .020 80);
  --color-base-content: oklch(26% .022 50);
  --color-primary: oklch(44% .065 25);
  --color-primary-content: oklch(98% .008 85);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-bulk {
  --color-base-100: oklch(97.5% .009 85);
  --color-base-200: oklch(94.5% .013 85);
  --color-base-300: oklch(87% .016 82);
  --color-base-content: oklch(25% .014 70);
  --color-primary: oklch(40% .045 75);
  --color-primary-content: oklch(98% .005 85);
  --font-display: "Work Sans", Georgia, serif;
  --font-body: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-doos {
  --color-base-100: oklch(97% .012 75);
  --color-base-200: oklch(94% .018 75);
  --color-base-300: oklch(87% .022 72);
  --color-base-content: oklch(24% .018 55);
  --color-primary: oklch(40% .08 55);
  --color-primary-content: oklch(98% .006 75);
  --font-display: "DM Sans", Georgia, serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-gang {
  --color-base-100: oklch(25% .012 30);
  --color-base-200: oklch(30% .014 30);
  --color-base-300: oklch(41% .014 30);
  --color-base-content: oklch(94% .008 30);
  --color-primary: oklch(70% .15 15);
  --color-primary-content: oklch(22% .03 30);
  --font-display: "Sora", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-praktijk {
  --color-base-100: oklch(98% .006 170);
  --color-base-200: oklch(95% .010 170);
  --color-base-300: oklch(88% .014 170);
  --color-base-content: oklch(25% .020 190);
  --color-primary: oklch(45% .075 185);
  --color-primary-content: oklch(98% .005 185);
  --font-display: "Public Sans", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-profiel {
  --color-base-100: oklch(15% .012 255);
  --color-base-200: oklch(19% .014 255);
  --color-base-300: oklch(30% .014 255);
  --color-base-content: oklch(95% .006 255);
  --color-primary: oklch(63% .13 38);
  --color-primary-content: oklch(20% .03 255);
  --font-display: "Manrope", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-seizoen {
  --color-base-100: oklch(98% .010 108);
  --color-base-200: oklch(95% .014 108);
  --color-base-300: oklch(88% .018 108);
  --color-base-content: oklch(24% .020 118);
  --color-primary: oklch(42% .11 122);
  --color-primary-content: oklch(98% .008 108);
  --font-display: "Outfit", Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-spoed {
  --color-base-100: oklch(22% .010 250);
  --color-base-200: oklch(27% .012 250);
  --color-base-300: oklch(38% .012 250);
  --color-base-content: oklch(95% .006 250);
  --color-primary: oklch(70% .17 27);
  --color-primary-content: oklch(18% .030 250);
  --font-display: "Archivo", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-staal {
  --color-base-100: oklch(97.5% .012 60);
  --color-base-200: oklch(94% .018 60);
  --color-base-300: oklch(87% .024 55);
  --color-base-content: oklch(22% .030 30);
  --color-primary: oklch(42% .13 15);
  --color-primary-content: oklch(98% .008 20);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-traject {
  --color-base-100: oklch(96% .014 205);
  --color-base-200: oklch(92% .020 205);
  --color-base-300: oklch(84% .026 205);
  --color-base-content: oklch(22% .024 215);
  --color-primary: oklch(40% .13 210);
  --color-primary-content: oklch(98% .006 205);
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-vitrine {
  --color-base-100: oklch(98.5% .010 55);
  --color-base-200: oklch(96% .014 55);
  --color-base-300: oklch(90% .018 52);
  --color-base-content: oklch(25% .018 45);
  --color-primary: oklch(40% .11 35);
  --color-primary-content: oklch(98% .006 55);
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}
.taal-werkbank {
  --color-base-100: oklch(97% .016 50);
  --color-base-200: oklch(94% .022 50);
  --color-base-300: oklch(86% .026 46);
  --color-base-content: oklch(23% .024 35);
  --color-primary: oklch(38% .13 32);
  --color-primary-content: oklch(98% .006 50);
  --font-display: "Spectral", Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  color: var(--color-base-content);
  background: var(--color-base-100);
}

/* ---- breedtes die de signatuur-elementen van Tailwind verwachten ---- */
.signatuur .block, .signatuur [class~='block'] { display: block; }
.signatuur .w-3 { width: 0.75rem; }
.signatuur .w-4 { width: 1rem; }
.signatuur .w-14 { width: 3.5rem; }
.signatuur .w-16 { width: 4rem; }
.signatuur .w-20 { width: 5rem; }
.signatuur .w-24 { width: 6rem; }
.signatuur .w-28 { width: 7rem; }
.signatuur .w-32 { width: 8rem; }
.signatuur .w-36 { width: 9rem; }

/* ---- de signatuur-CSS van elke taal, naar strook-scope ---- */
/* === atelier === */
/* Atelier — signatuurstijl voor DyDo Beauty.
 *
 * Uitsluitend var(--color-*). Op het accentvlak (het slot) wordt de grond
 * champagne en de tekst aubergine; alles hierin moet dan omkantelen, anders
 * verdwijnt de plaatrand in zijn eigen achtergrond.
 *
 * Technieken: ::before/::after, transform: rotate(), radial-gradient,
 * linear-gradient, color-mix -- alle Baseline widely. Geen JavaScript.
 */

/* De haal: een dunne streep die naar rechts uitdunt en ophoudt, als een
 * penseelstreek. Anders dan de maatlijn van blueprint heeft hij geen
 * eindstreepjes en geen constante dikte. */
.haal {
  height: 2px;
  background: linear-gradient(
    to right,
    var(--color-primary) 0%,
    color-mix(in oklch, var(--color-primary) 55%, transparent) 45%,
    transparent 100%);
  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0 100%);
}

/* Het signatuur-element van deze taal: een licht gedraaide plaatrand om elk
 * portfoliobeeld. Het beeld zelf blijft recht; alleen het kader staat scheef,
 * zoals een passe-partout dat met de hand is opgelegd.
 *
 * Waarom niet het beeld draaien: een gedraaide <img> geeft schuine randen op
 * de foto zelf en dat leest als een fout. Alleen het kader draaien leest als
 * een keuze. */
.taal-atelier .zoomkader {
  position: relative;
  border-radius: 0;
}
.taal-atelier .zoomkader::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid color-mix(in oklch, var(--color-primary) 45%, transparent);
  transform: rotate(-1.1deg);
  pointer-events: none;
}
/* Elk tweede beeld de andere kant op, zodat de rij niet als een systematische
 * schuinte leest maar als losse opgelegde kaders. */
.taal-atelier .zoomkader:nth-child(even)::after {
  transform: rotate(0.9deg);
  inset: -7px;
}

/* De lamp boven de werktafel: een zachte lichtcirkel bovenaan de pagina, die
 * naar onderen wegvalt. Dit is wat het donkere grondvlak van een vlakke zwarte
 * pagina onderscheidt. */
.taal-atelier {
  background-image: radial-gradient(
    120% 60% at 50% -10%,
    color-mix(in oklch, var(--color-primary) 9%, transparent) 0%,
    transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/* === blueprint === */
/* Blueprint — signatuurstijl voor Begush Las- en Metaalwerk.
 *
 * Alles hierin gebruikt uitsluitend var(--color-*), zodat het meekantelt met
 * het vlak waarop het staat. Geen vaste kleuren.
 *
 * Elke techniek hier is Baseline widely (zie UI-KENNIS-2026.md hoofdstuk 4):
 * repeating-linear-gradient, ::before/::after, clip-path. Geen JavaScript,
 * geen scroll-driven animations (die hebben geen Firefox).
 */

/* Het rasterpapier zelf: een fijn blauwdruk-raster over de hele pagina.
 * Let op de selector: .taal-blueprint, niet body:has(.blauwdruk) -- de klasse
 * staat OP de body, en :has() zoekt een afstammeling. Die eerste versie deed
 * niets, wat pas bleek bij het nameten van de gerenderde pagina.
 * 2 lijnen van 1px per 56px -- zichtbaar genoeg om het papier te suggereren,
 * licht genoeg om nooit met de tekst te concurreren. */
.taal-blueprint {
  background-image:
    repeating-linear-gradient(
      to right,
      color-mix(in oklch, var(--color-base-content) 7%, transparent) 0 1px,
      transparent 1px 56px),
    repeating-linear-gradient(
      to bottom,
      color-mix(in oklch, var(--color-base-content) 7%, transparent) 0 1px,
      transparent 1px 56px);
}

/* Maatlijn tussen de secties: de horizontale streep met een verticaal
 * eindstreepje aan weerszijden, zoals een maatvoering op een werktekening.
 * Dit is het element dat op geen enkele andere demo voorkomt. */
.maatlijn {
  position: relative;
  height: 1px;
  background: color-mix(in oklch, var(--color-base-300) 85%, transparent);
}
.maatlijn::before,
.maatlijn::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: var(--color-base-300);
}
.maatlijn::before { left: 0; }
.maatlijn::after { right: 0; }

/* Het maatgetal dat op de lijn zit, zoals "1200" op een tekening. */
.maatlijn > span {
  position: absolute;
  top: -0.7em;
  left: 50%;
  transform: translateX(-50%);
  padding-inline: 0.8rem;
  background: var(--color-base-100);
  color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Hoekmarkeringen op beeld: vier korte haken, als een uitsnedeaanduiding.
 * Puur decoratief, dus aria-hidden in de opmaak. */
.hoekmerk { position: relative; }
.hoekmerk::before,
.hoekmerk::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-primary);
  pointer-events: none;
}
.hoekmerk::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.hoekmerk::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }


/* === boeket === */
/* Boeket — signatuurstijl voor Bloemenatelier De Zwethkade.
 *
 * Uitsluitend var(--color-*) als basis voor de drie extra tinten -- ze zijn
 * afgeleid met color-mix, niet als losse vaste kleuren neergezet, zodat ze
 * met het basispalet meebewegen als het ooit verandert.
 *
 * Techniek: :nth-of-type() op <section> -- Baseline widely, geen
 * JavaScript.
 *
 * PUUR DECORATIEF: deze drie tinten staan nooit onder tekst (zie de
 * docstring in boeket.py), dus ze zijn niet tegen AA getoetst en dat hoeft
 * ook niet.
 */

.boeketblok {
  background: var(--color-primary);
}

/* Elke sectie op de pagina is een <section>; de derde tint is het accent
 * zelf (geen regel nodig), de eerste twee zijn ernaast gelegde bloemkleuren
 * -- geel-oranje en violet, zodat het blok als een boeket leest in plaats
 * van als één herhaald accent. */
.taal-boeket section:nth-of-type(3n+1) .boeketblok {
  background: color-mix(in oklch, var(--color-primary) 55%, oklch(70% .16 75));
}
.taal-boeket section:nth-of-type(3n+2) .boeketblok {
  background: color-mix(in oklch, var(--color-primary) 55%, oklch(45% .14 300));
}


/* === brief === */
/* Brief — signatuurstijl voor Uw Thuiskapster Alice.
 *
 * Uitsluitend var(--color-*). Technieken: ::first-letter, ::before/::after,
 * repeating-linear-gradient, color-mix -- alle Baseline widely. Geen
 * JavaScript.
 */

/* De ruitjes: drie kleine vierkantjes op hun punt, zoals de scheiding tussen
 * twee delen van een brief.
 *
 * EERSTE VERSIE WERKTE NIET. Die tekende de drie ruiten met één clip-path van
 * twaalf punten. Een polygon() maakt echter ALTIJD één doorlopende vorm -- de
 * drie ruiten werden aan elkaar geregen tot een vlek. Zichtbaar op de
 * gerenderde pagina, niet in de code.
 *
 * Nu: het element zelf is de middelste ruit, de twee pseudo-elementen zijn de
 * buitenste. Precies drie vormen, geen clip-path nodig.
 *
 * Let op de offsets van de pseudo's: de ouder staat 45 graden gedraaid, dus
 * de kinderen draaien mee. Een verschuiving van (+11, -11) in de gedraaide
 * ruimte komt op het scherm uit als ~15px pal naar rechts. Zet je ze op
 * (+15, 0), dan staat de rij diagonaal. */
.ruitjes {
  position: relative;
  width: 7px;
  height: 7px;
  margin: 0 15px;
  background: var(--color-primary);
  transform: rotate(45deg);
}
.ruitjes::before,
.ruitjes::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: color-mix(in oklch, var(--color-primary) 50%, transparent);
}
.ruitjes::before { left: -11px; top: 11px; }
.ruitjes::after  { left: 11px; top: -11px; }

/* Het signatuur-element: een ingesprongen initiaal aan het begin van elke
 * sectiekop, zoals de eerste letter van een alinea in een gedrukte brief.
 *
 * De haak is h2.font-display: sectiekop() zet die klasse altijd op de kop,
 * en de hero gebruikt h1, dus de aanhef van de pagina krijgt er geen. Dat is
 * de bedoeling -- een brief heeft één aanhef en daarna initialen.
 *
 * Waarom float en geen initial-letter: `initial-letter` heeft nog steeds geen
 * Firefox (gecontroleerd 26-08-2026), dus daar zou de letter gewoon niet
 * inspringen. float werkt overal en geeft hetzelfde beeld. */
/* De float moet BINNEN de kop blijven. Zonder dit loopt de intro-alinea
 * onder de kop om de initiaal heen en springt hij een regel of drie in --
 * gezien op de gerenderde pagina, niet te voorzien uit de code.
 * flow-root is de moderne manier om een float in te sluiten en is Baseline
 * widely; overflow: hidden zou de initiaal kunnen afknippen. */
.taal-brief h2.font-display {
  display: flow-root;
}
.taal-brief h2.font-display::first-letter {
  float: left;
  margin-right: 0.08em;
  margin-top: 0.06em;
  font-size: 2.4em;
  line-height: 0.78;
  color: var(--color-primary);
}

/* De vouw in het briefpapier: één verticale lijn op een derde van het blad,
 * zoals een brief die twee keer is gevouwen. Zeer licht -- hij moet pas
 * opvallen als je erop let. */
.taal-brief {
  background-image: linear-gradient(
    to right,
    transparent 0 33.2%,
    color-mix(in oklch, var(--color-base-content) 6%, transparent) 33.2% calc(33.2% + 1px),
    transparent calc(33.2% + 1px) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Beeld in een brief is een ingesloten foto: een witte rand eromheen, zoals
 * een afdruk die is meegestuurd. */
.taal-brief .zoomkader {
  border: 7px solid var(--color-base-100);
  outline: 1px solid color-mix(in oklch, var(--color-base-300) 70%, transparent);
  border-radius: 0;
}


/* === bulk === */
/* Bulk — signatuurstijl voor M. van der Toorn Handelsonderneming.
 *
 * Uitsluitend var(--color-*). Technieken: repeating-radial-gradient,
 * mix-blend-mode -- beide Baseline widely. Geen JavaScript.
 */

/* Het weegbon-tabje naast het sectienummer: een enkele korrelvormige stip
 * in plaats van een lijn. Klein met opzet -- dit is de meest ingehouden
 * STREEP van de vijftien, passend bij het gedempte palet. */
.korrel {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Het korrelfilter: een fijn stippelpatroon over elk beeldkader, alsof je
 * door een laag zand of grind kijkt. mix-blend-mode: multiply laat het
 * onder het patroon liggende beeld donkerder doorschemeren in plaats van
 * het patroon er plat overheen te leggen. */
.taal-bulk .zoomkader {
  position: relative;
}
.taal-bulk .zoomkader::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(
    circle at 0 0,
    color-mix(in oklch, var(--color-base-content) 18%, transparent) 0 1px,
    transparent 1px 6px);
  mix-blend-mode: multiply;
  pointer-events: none;
}


/* === doos === */
/* Doos — signatuurstijl voor Hadui Mover.
 *
 * Uitsluitend var(--color-*). Techniek: border-style: dashed -- Baseline
 * widely sinds jaren. Geen JavaScript.
 */

/* Het verzendlabel: een gestippelde rand met een tabje rechtsboven, zoals de
 * perforatielijn op een etiket dat je van de rol scheurt. Vervangt het
 * streepje naast het sectienummer. */
.verzendlabel {
  position: relative;
  border: 1px dashed color-mix(in oklch, var(--color-primary) 55%, transparent);
}
.verzendlabel::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
}


/* === gang === */
/* Gang — signatuurstijl voor Traiteur Het Kwarteel.
 *
 * Uitsluitend var(--color-*). Geen bijzondere technieken nodig, geen
 * JavaScript.
 */

/* De halte: een lijn met een stip halverwege, als één stop op een
 * horizontale route. Anders dan `traject`s knooppunt (verticaal, met een
 * lijnstuk boven en onder) staat deze stip MIDDEN op een horizontale lijn --
 * de spiegeling die de docstring in gang.py beschrijft. */
.halte {
  position: relative;
  height: 1px;
  background: var(--color-primary);
}
.halte::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  transform: translate(-50%, -50%);
}


/* === praktijk === */
/* Praktijk — signatuurstijl voor Pedicure- en Schoonheidssalon Monique Brands.
 *
 * Uitsluitend var(--color-*), zodat alles meekantelt met het vlak waarop het
 * staat (zie designtalen/LEESMIJ.md). Geen vaste kleuren, geen JavaScript.
 * Gebruikte technieken -- ::before/::after, color-mix, linear-gradient --
 * zijn alle drie Baseline widely.
 */

/* De pluslijn: een dunne scheidingslijn met een klein plusteken aan het
 * rechteruiteinde, zoals de markering op een behandelkaart. Dit element komt
 * op geen enkele andere demo voor.
 *
 * Het plusteken is opgebouwd uit twee gekruiste gradienten in EEN pseudo-
 * element, niet uit twee losse. Reden: ::before en ::after zijn beide al
 * bezet zouden zijn als de lijn zelf een pseudo-element gebruikte, en een
 * extra <span> in de opmaak zou genereer.py raken. */
.pluslijn {
  position: relative;
  height: 1px;
  background: color-mix(in oklch, var(--color-base-300) 90%, transparent);
}
.pluslijn::after {
  content: "";
  position: absolute;
  top: -4.5px;
  right: -5px;
  width: 10px;
  height: 10px;
  background:
    linear-gradient(to right,
      transparent 0 4.5px,
      var(--color-primary) 4.5px 5.5px,
      transparent 5.5px 100%),
    linear-gradient(to bottom,
      transparent 0 4.5px,
      var(--color-primary) 4.5px 5.5px,
      transparent 5.5px 100%);
}

/* Een tweede, zwakker plusteken aan het linkeruiteinde -- het markeert het
 * begin van de lijn zonder de aandacht van het sectienummer te trekken. */
.pluslijn::before {
  content: "";
  position: absolute;
  top: -2.5px;
  left: -3px;
  width: 6px;
  height: 6px;
  background:
    linear-gradient(to right,
      transparent 0 2.5px,
      color-mix(in oklch, var(--color-base-content) 35%, transparent) 2.5px 3.5px,
      transparent 3.5px 100%),
    linear-gradient(to bottom,
      transparent 0 2.5px,
      color-mix(in oklch, var(--color-base-content) 35%, transparent) 2.5px 3.5px,
      transparent 3.5px 100%);
}

/* Beeld in een praktijk is documentatie, geen sfeer: rechte hoeken en een
 * dunne kaderlijn in plaats van de zachte schaduw die de andere beauty-demo's
 * gebruiken. */
.taal-praktijk .zoomkader {
  border: 1px solid color-mix(in oklch, var(--color-base-300) 80%, transparent);
  border-radius: 0;
}

/* Rustiger hover dan de standaard: een praktijk beweegt niet. */
.taal-praktijk .zoomkader img {
  transition: transform 400ms ease;
}
.taal-praktijk .zoomkader:hover img {
  transform: scale(1.02);
}


/* === profiel === */
/* Profiel — signatuurstijl voor Slotenmaker Gantelpoort.
 *
 * Uitsluitend var(--color-*). Techniek: clip-path: polygon() -- Baseline
 * widely. Geen JavaScript.
 */

/* De baardlijn: een getrapte rand, als het profiel van een sleutelbaard.
 * De enige niet-vlakke scheidingslijn van de vijftien -- elke andere STREEP
 * is een rechte, golvende of onderbroken lijn, maar altijd met een vlakke
 * bovenkant. Deze heeft een zaagprofiel. */
.baardlijn {
  background: var(--color-primary);
  clip-path: polygon(
    0 100%, 0 40%, 15% 40%, 15% 100%,
    15% 60%, 30% 60%, 30% 100%,
    30% 20%, 45% 20%, 45% 100%,
    45% 70%, 60% 70%, 60% 100%,
    60% 45%, 75% 45%, 75% 100%,
    75% 10%, 100% 10%, 100% 100%);
}


/* === seizoen === */
/* Seizoen — signatuurstijl voor H.O.M. van den Bos.
 *
 * Uitsluitend var(--color-*), zodat het meekantelt met het vlak waarop het
 * staat. Techniek: color-mix -- Baseline widely (UI-KENNIS-2026.md
 * hoofdstuk 4). Geen JavaScript.
 */

/* Het seizoensbandje: vier segmenten die samen de STREEP vervangen. Elk
 * segment krijgt een oplopende dekking van hetzelfde accent, als vier
 * kwartalen van hetzelfde jaar in plaats van vier losse kleuren -- dat
 * laatste zou een kalender suggereren die er niet is. */
.seizoensbandje span {
  display: block;
  width: 0.85rem;
  height: 2px;
}
.seizoensbandje span:nth-child(1) { background: color-mix(in oklch, var(--color-primary) 30%, transparent); }
.seizoensbandje span:nth-child(2) { background: color-mix(in oklch, var(--color-primary) 55%, transparent); }
.seizoensbandje span:nth-child(3) { background: color-mix(in oklch, var(--color-primary) 80%, transparent); }
.seizoensbandje span:nth-child(4) { background: var(--color-primary); }


/* === spoed === */
/* Spoed — signatuurstijl voor Van der Haak Dak- en Zinkwerk.
 *
 * Uitsluitend var(--color-*). Techniek: position: fixed -- Baseline widely.
 * Geen JavaScript.
 */

/* De spoedstrook: een dunne felrode lijn vast bovenaan het venster, op elke
 * pagina. De telefoonknop staat al in elke koptekst (genereer.kop()); deze
 * strook is de kleurmatige herhaling daarvan, niet een tweede belknop --
 * urgentie in de rand van het scherm, niet in extra tekst. */
.taal-spoed::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-primary);
  z-index: 50;
}


/* === staal === */
/* Staal — signatuurstijl voor SCV Nagelstudio.
 *
 * Uitsluitend var(--color-*): de stalenrij moet meekantelen als hij op het
 * inkt- of accentvlak staat, anders verdwijnt hij. Geen vaste kleuren, geen
 * JavaScript. linear-gradient met harde stops en color-mix zijn beide
 * Baseline widely.
 */

/* De stalenrij: vijf blokjes van hetzelfde accent in oplopende sterkte, met
 * een haarfijne spleet ertussen -- zoals de kleurstrook op een lakkaart.
 *
 * Waarom een gradient met harde stops en geen vijf losse <span>'s: het element
 * komt uit stijl.STREEP en moet dus één stuk HTML zijn dat genereer.py niet
 * kent. Harde stops in een linear-gradient geven exact dezelfde blokjes.
 *
 * De percentages: 5 blokken van 20%, met de laatste 2% van elk blok
 * transparant als voeg. Dat leest als losse stalen, niet als een verloop. */
.stalenrij {
  height: 14px;
  background: linear-gradient(
    to right,
    color-mix(in oklch, var(--color-primary) 22%, transparent) 0 18%,
    transparent 18% 20%,
    color-mix(in oklch, var(--color-primary) 40%, transparent) 20% 38%,
    transparent 38% 40%,
    color-mix(in oklch, var(--color-primary) 58%, transparent) 40% 58%,
    transparent 58% 60%,
    color-mix(in oklch, var(--color-primary) 76%, transparent) 60% 78%,
    transparent 78% 80%,
    var(--color-primary) 80% 98%,
    transparent 98% 100%);
}

/* Het karton onder de kaart: een zeer fijne horizontale streping over de hele
 * pagina. Anders dan het raster van blueprint is dit maar één richting, en op
 * 4% in plaats van 7% -- het moet als papiervezel lezen, niet als raster. */
.taal-staal {
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in oklch, var(--color-base-content) 4%, transparent) 0 1px,
    transparent 1px 7px);
}

/* Beeld op een stalenkaart zit in een uitsparing: een dunne binnenrand die
 * het beeld van het karton scheidt, met een zachte schaduw naar binnen. */
.taal-staal .zoomkader {
  position: relative;
  border-radius: 0;
}
.taal-staal .zoomkader::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
  box-shadow: inset 0 0 0 5px color-mix(in oklch, var(--color-base-100) 90%, transparent);
  pointer-events: none;
}


/* === traject === */
/* Traject — signatuurstijl voor Rijschool Boomawatering.
 *
 * Uitsluitend var(--color-*). Geen bijzondere technieken nodig, geen
 * JavaScript.
 */

/* Het knooppunt: een gevulde stip met een kort lijnstuk erboven en eronder,
 * als een etappe op een route. Vervangt het streepje naast het
 * sectienummer. Elke sectiekop krijgt er één; met vijf tot acht secties per
 * pagina leest de herhaling als een traject, ook zonder dat er een
 * doorlopende lijn tussen de secties hoeft te staan. */
.knooppunt {
  position: relative;
  border-radius: 50%;
  background: var(--color-primary);
}
.knooppunt::before,
.knooppunt::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 10px;
  background: color-mix(in oklch, var(--color-primary) 45%, transparent);
  transform: translateX(-50%);
}
.knooppunt::before { bottom: 100%; }
.knooppunt::after { top: 100%; }


/* === vitrine === */
/* Vitrine — signatuurstijl voor Bakkerij Heulsehof.
 *
 * Uitsluitend var(--color-*). Geen bijzondere technieken nodig, geen
 * JavaScript.
 */

/* De plankregel: een zware balk in plaats van een streepje, alsof de
 * sectiekop op een plank in de vitrine staat. Duidelijk dikker dan elk ander
 * STREEP-element in het project. */
.plankregel {
  height: 6px;
  background: var(--color-primary);
}


/* === werkbank === */
/* Werkbank — signatuurstijl voor Jim's all-in service.
 *
 * Uitsluitend var(--color-*). Techniek: repeating-linear-gradient -- Baseline
 * widely. Geen JavaScript.
 */

/* De houtnerf: twee lijnen van wisselende dikte, als de nerf in een
 * geschaafde plank. Anders dan de maatlijn van `blueprint` (constante dikte,
 * eindstreepjes) en de haal van `atelier` (uitdunnend naar één kant) heeft
 * dit element geen richting -- hout heeft geen begin of eind. */
.houtnerf {
  height: 4px;
  background:
    linear-gradient(to bottom, var(--color-primary) 0 1px, transparent 1px 4px),
    linear-gradient(to bottom, color-mix(in oklch, var(--color-primary) 45%, transparent) 2px 3px, transparent 3px 4px);
}