/* =========================================================================
   olefinn.com — de landing. "Eén vel materiaal, één kleur."

   Gegroeid uit proef B (7 sep 2026 gekozen). Eén letter (Archivo variabel),
   één kleur (Wada's Blue), nul afbeeldingen op het eerste scherm. Alle andere
   kleur op de pagina komt uit de negen zaken die er echt in draaien; het vel
   zelf heeft er daardoor bijna geen nodig.

   TWEE SCHEMA'S, ÉÉN MATERIAAL. Licht is geen ander ontwerp maar hetzelfde vel
   omgekeerd: papier in exact de tint van het roest-zwart (Oklch H 34, alleen de
   lichtheid draait om). Wat per schema verschuift staat in het tokenblok
   hieronder, en nergens anders — een losse hexkleur in een gewone regel is per
   definitie fout in één van de twee.

   Het accent blijft in BEIDE schema's letterlijk Wada's Blue #0d75ff; dat was
   het hele punt van de kleurpitch. Het draagt de grote kop, de twee slotregels
   en de voortgangslijn. Gemeten haalt hij op papier 3,68:1 — genoeg voor de
   kop van 188 px (eis 3,0), te weinig voor kleine tekst (eis 4,5). Daarom
   draagt `--accent-tekst` de kleine rollen én de Mail-capsule (tekst in de
   velkleur erop: 4,55:1) — Apple's "one primary action, trailing". In donker
   zijn die twee dezelfde kleur, want daar haalt het accent 4,77:1.
   Nagemeten 10 sep 2026 met scripts/kleur_meten.py.
   ========================================================================= */

/* ---- De letter --------------------------------------------------------- */
/* Archivo variabel, twee assen (wght 100-900, wdth 62-125), OFL 1.1.
   Herkomst en bewerking staan in letter/herkomst.json.
   format("woff2") en niet format("woff2-variations"): dat tweede trefwoord is
   een overblijfsel uit een ingetrokken concept, en een browser die het niet
   kent slaat de hele bron over — dan valt de pagina stil terug op de
   systeemletter, precies het gat dat deze ronde moet dichten. */
@font-face {
  font-family: "Archivo";
  src: url("letter/Archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* Metriek-gelijke terugval voor de wandvullende regel. Zonder deze springt een
   regel van ~193 px zichtbaar op het moment dat de letter binnenkomt.
   Gemeten in Chromium op de echte subset, 4 sep 2026, per em:
       Archivo wdth 125 / wght 800   "om de hoek"  7,14936 em, asc .88, desc .21
       deze terugval (Helvetica Neue Bold)          5,61000 em, asc .98, desc .22
   7,14936 / 5,61 = 1,2744 -> size-adjust 127,4 %. De hoogtes worden ná
   size-adjust gerekend, dus .88 / 1,2744 = 69,1 % en .21 / 1,2744 = 16,5 %. */
@font-face {
  font-family: "Archivo terugval";
  src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
       local("Helvetica Bold"), local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 700 900;
  size-adjust: 127.4%;
  ascent-override: 69.1%;
  descent-override: 16.5%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  /* Palet "Kobalt", uit Sanzo Wada's combinatie 186 (Blue met Hay's Russet).
     Het accent is letterlijk zijn Blue. Het vel is zijn Hay's Russet: in donker
     teruggebracht naar velniveau (Oklch L .135), in licht opgetild naar papier
     (L .955) — dezelfde tint H 34, alleen de lichtheid draait om. Waarom weg van
     het natriumoranje: dat stond in Oklch op 1 graad van Tuindorp en 1 van Linde
     warm, dus het frame zat in dezelfde kleurfamilie als het werk dat erin hangt.
     Kobalt botst met geen van de negen. Zie plans/premium-2.kleurpitches.md.

     LICHT is de standaard hieronder; donker staat in het @media-blok eronder.
     Gemeten contrast op het eigen vel — licht / donker:
       inkt          15,6  /  17,3
       gedempt        7,0  /   6,9
       accent-tekst   4,6  /   4,8   (kleine tekst, eis 4,5)
       accent         3,7  /   4,8   (alleen kop en vlakken, eis 3,0) */
  --vel:      #f7eeec;   /* papier, Hay's Russet op L .955 */
  --vel-op:   #fdf9f8;   /* een tint óp het vel, alleen onder een venster */
  --inkt:     #1e1614;
  --gedempt:  #584f4d;
  --accent:      #0d75ff;   /* Wada's Blue, letterlijk; kop en vlakken */
  --accent-tekst:#0064ed;   /* dezelfde kleur, donker genoeg voor 4,5:1 */
  --lijst:    #d9cecb;   /* het blad waar het vel op ligt; L .86, 1,35:1 (Ole koos variant 3, 10 sep) */

  --haar:  color-mix(in oklab, var(--inkt) 14%, transparent);
  --gloed: color-mix(in oklab, var(--inkt) 3%, transparent);

  /* Korrel: één SVG-ruis van ~0,6 kB, geen bestand, geen verzoek. In donker
     leest bijna-zwart zonder deze laag als "leeg" in plaats van als "gedrukt";
     in licht is het de tand van het papier. De filterverwijzing binnenin staat
     percent-gecodeerd als %28 %23 %29; anders leest de poort dat als een tweede
     verwijzing naar een bestand dat er niet is. */
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url%28%23k%29' opacity='.028'/%3E%3C/svg%3E");

  /* Het vel ligt ingelegd op een blad, met ronde hoeken — een bewust neergelegd
     object in plaats van een pagina die de vensterrand raakt. --rand is de
     zichtbare lijst rondom, --velhoek de ronding. Ze zitten ook in de
     panberekening van de etalage verderop; verander je ze, meet dan opnieuw. */
  --rand:    clamp(10px, 1.1vw, 18px);
  --velhoek: clamp(12px, 1.4vw, 22px);

  /* Hoogte van de glazen strook: één tikdoel van 44 px plus tweemaal 10 px.
     Apple's eigen stroken zijn 44–52 px (globalnav, localnav v9); dit is de
     variant met capsules erin. De gepinde etalage rekent hiermee. */
  --kophoogte: 4rem;

  --display: "Archivo", "Archivo terugval", ui-sans-serif, system-ui, sans-serif;
  --tekst:   "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;

  /* Lopende tekst 17 px op de telefoon, 18 px vanaf 52 rem. Bewust terug van
     de 27 px van de oude landing: de hiërarchie moet aan twee kanten. */
  --t-tekst: 1.0625rem;
  --t-klein: 0.8125rem;   /* alleen getrackte kapitalen; 13 px */
  --t-meta:  0.875rem;    /* kleinste lopende tekst op de pagina; 14 px */
  --t-h2:    clamp(1.6rem, 1rem + 2.7vw, 2.75rem);

  --goot: clamp(1.125rem, 3.6vw, 3.5rem);
  --gat:  1.5rem;
  --tegel: clamp(16.5rem, 74vw, 20.5rem);
  --raam: clamp(19rem, 52svh, 30rem);
  --soepel: cubic-bezier(.22, 1, .36, 1);

  /* De negen matten. Vier waarden per zaak — grond, vlak, inkt en accent —
     letterlijk overgenomen uit de :root van die site zelf. Nul kilobyte, en in
     rust al de goede kleur, zodat een venster niet uit het niets aanspringt.
     Deze negen veranderen NIET met het schema: het zijn de kleuren van de
     klantsites, en die hebben hun eigen identiteit. Dat is ook het idee — het
     vel is bijna kleurloos zodat het werk de kleur levert. */
  --restaurant-aster-1: #f4f1ea;         --restaurant-aster-2: #1c1b18;         --restaurant-aster-3: #1c1b18;         --restaurant-aster-4: #2e4a3b;
  --restaurant-tuindorp-1: #fbf8f1;      --restaurant-tuindorp-2: #ece6d8;      --restaurant-tuindorp-3: #1f1d1a;      --restaurant-tuindorp-4: #b8451f;
  --bistro-lood-1: #17181a;              --bistro-lood-2: #23252a;              --bistro-lood-3: #ecebe6;              --bistro-lood-4: #e0c36a;
  --cafe-de-overkant-avond-1: #171310;   --cafe-de-overkant-avond-2: #241d18;   --cafe-de-overkant-avond-3: #f1e6d0;   --cafe-de-overkant-avond-4: #f3c14a;
  --cafe-de-overkant-dag-1: #f4f7f4;     --cafe-de-overkant-dag-2: #e6eee8;     --cafe-de-overkant-dag-3: #17201c;     --cafe-de-overkant-dag-4: #185d46;
  --kapper-salon-linde-1: #fbfaf7;       --kapper-salon-linde-2: #6f6b64;       --kapper-salon-linde-3: #201f1c;       --kapper-salon-linde-4: #201f1c;
  --kapper-salon-linde-warm-1: #f3e9dc;  --kapper-salon-linde-warm-2: #2a1b1e;  --kapper-salon-linde-warm-3: #2a1b1e;  --kapper-salon-linde-warm-4: #ad4322;
  --bosman-onderste-derde-1: #101113;    --bosman-onderste-derde-2: #1c1e22;    --bosman-onderste-derde-3: #f2f0eb;    --bosman-onderste-derde-4: #d9b23a;
  --bosman-buurtwinkel-1: #f4ecdc;       --bosman-buurtwinkel-2: #1f4b3c;       --bosman-buurtwinkel-3: #24211b;       --bosman-buurtwinkel-4: #9c5f1e;
}

/* Donker. Alleen de zes tokens die van schema verschillen; al het andere erft.
   Het vel is Hay's Russet op velniveau: een roest-zwart, geen neutraal zwart. */
@media (prefers-color-scheme: dark) {
  :root {
    --vel:      #0c0706;
    --vel-op:   #171110;
    --inkt:     #f4edec;
    --gedempt:  #aa9e9d;   /* L +.03 t.o.v. #a19594: 7,71:1 op het vel (variant 3) */
    --accent:      #0d75ff;
    --accent-tekst:#0d75ff;   /* haalt hier 4,77:1, dus geen tweede kleur nodig */
    /* Gespiegeld aan licht. Daar is de lijst donkerder dan het vel (1,19:1),
       dus hier hoort hij lichter — zwart-op-zwart gaf 1,05 en dat las als niets.
       Dit is twee stappen in Oklch-lichtheid: 1,24:1, net iets meer dan licht,
       zoals gevraagd. Zelfde kleurfamilie (Oklch H 28 tegen H 34 van het vel;
       bij C .011 is dat verschil niet te zien), dus het blijft warm. */
    --lijst:    #302928;   /* L +.04 t.o.v. #261f1e: 1,41:1 op het vel (variant 3) */
    /* Zwarte ruis slaat op papier veel harder aan dan op bijna-zwart: dezelfde
       .07 maakte het lichte vel vuil in plaats van gedrukt. Licht staat op .028,
       donker houdt .07. */
    --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url%28%23k%29' opacity='.07'/%3E%3C/svg%3E");
  }
}

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

html { -webkit-text-size-adjust: 100%; background: var(--lijst); }
/* Zacht scrollen is er voor de ankers, en het staat alleen aan als JavaScript het
   ook weer uit kan zetten. Tijdens tabben moet de focus er meteen zijn, niet over
   300 ms — landing.js zet daarvoor de klasse `tabt` op <html>.
   Waarom niet gewoon op `html`: zonder JavaScript bestaat `tabt` niet, en dan
   bleef er één tab hangen die de browser nog aan het animeren was. Gemeten 8 sep:
   1 van de 40 zonder JS, 0 met deze regel. */
html.js:not(.tabt) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

body { margin: 0; }

/* Het vel: één doorlopend bijna-zwart blad, met de korrel erin en één zeer
   flauwe lichtval van boven. Dat is de materiaallaag; hij kost 0,6 kB. */
.vel {
  background-color: var(--vel);
  background-image: var(--korrel), radial-gradient(120% 60% at 50% -10%, var(--gloed), transparent 70%);
  background-size: 200px 200px, auto;
  background-repeat: repeat, no-repeat;
  border-radius: var(--velhoek);
  margin: var(--rand);
  min-height: calc(100svh - 2 * var(--rand));
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: var(--t-tekst);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: clip;
}

a { color: inherit; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 500; }
ol { margin: 0; padding: 0; list-style: none; }

:where(a):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.overslaan:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.overslaan:focus {
  position: fixed; inset: 1rem auto auto 1rem; z-index: 100;
  /* Tekst óp een vlak, dus 4,5:1 en niet 3,0 — vandaar de tekstvariant. */
  background: var(--accent-tekst); color: var(--vel); padding: .95em 1.4em; text-decoration: none;
}

.opschrift {
  font-size: var(--t-klein); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gedempt); font-weight: 500;
}

/* ---- Kop: de glazen strook -------------------------------------------- */
/* Gebouwd naar Apple's Human Interface Guidelines (Materials, Toolbars, Layout,
   Scroll views; WWDC25 "Meet Liquid Glass") en naar wat Apple zélf op het web
   doet (apple.com globalheader.css en ac-localnav v9, gelezen 8 sep 2026).
   Per regel de bron:

   - IN RUST IS ER NIETS. Geen achtergrond, geen lijn. "Reduce the use of toolbar
     backgrounds" (HIG Toolbars); apple.com's strook is transparant tot de
     inhoud eronder scrolt. De held staat met flex-end onderin, dus er kruist in
     rust ook niets met de strook ("avoid intersections between content and
     Liquid Glass" — WWDC25 219).
   - ZODRA ER INHOUD ONDER LOOPT, MATERIALISEERT HET GLAS: blur, verzadiging én
     dekking samen, over de eerste 6 rem scrollen. "Instead of fading, Liquid
     Glass objects materialize in and out by gradually modulating the light
     bending" (219). Dit ís het scroll edge effect: de scheiding komt van het
     materiaal, niet van een haarlijn ("Instead of a background, use a scroll
     edge effect" — HIG Layout).
   - HET RECEPT IS LETTERLIJK APPLE'S: saturate(180%) blur(20px), de
     oppervlaktekleur op .8 dekking, .92 zonder backdrop-filter (globalheader.css,
     ac-localnav.built.css). Geen schaduw, geen specular, geen refractie —
     Apple doet dat op het web ook niet. Wat wij méér doen dan apple.com: de
     oppervlaktekleur is ons vel, dus het glas neemt het schema over.
   - DE STROOK NESTELT IN DE VELHOEK. Hij zit met gat 0 bovenin het vel, dus zijn
     bovenhoeken zijn exact de velhoek: concentrisch met een gat van nul. "Glass
     controls nest perfectly into the rounded corners of windows, maintaining
     concentricity" (219); "concentric shapes calculate their radius by
     subtracting padding from the parent's" (356). Onderhoeken 0: hij loopt
     over in de inhoud.
   - DE KNOPPEN ERIN ZIJN CAPSULES, en krijgen géén eigen glas. "Capsules use a
     radius that's half the height" (356); "always avoid glass on glass ... use
     fills, transparency, and vibrancy for the top elements" (219). Hover is een
     vibrant fill uit de inkt. Vorm en waarden volgen apple.com's pillen van 2026
     (macos.built.css: 1 px halftransparante rand, alpha-vulling).
   - ÉÉN GETINTE ACTIE, RECHTS. "Only specify one primary action, and put it on
     the trailing side ... apply color to the background rather than to symbols
     or text" (HIG Toolbars, Color). Dat is Mail — de enige knop op de pagina
     die een klant oplevert. Tekst en merk blijven monochroom.
   - DE GLASLAAG ZIT OP EEN PSEUDO-ELEMENT, niet op de strook zelf, zodat de tekst
     nooit mee-blurt. Zo doet apple.com het ook (.ac-ln-background).
   - DRIE TOEGANKELIJKHEIDSSTANDEN, onderaan dit blok. "Reduced Transparency makes
     Liquid Glass frostier ... Increased contrast makes elements predominantly
     black or white and highlights them with a contrasting border ... Reduced
     Motion disables any elastic properties" (219).

   Zonder JavaScript of zonder scroll-tijdlijnen staat het glas gewoon aan: de
   veiligste mislukking, want zonder glas loopt tekst onder de knoppen door. */
.kop {
  position: sticky; top: var(--rand); z-index: 40;
  display: flex; align-items: center; gap: var(--goot);
  min-height: var(--kophoogte);
  padding: .625rem var(--goot);
  border-radius: var(--velhoek) var(--velhoek) 0 0;
}
.kop::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  /* Terugval zonder backdrop-filter: bijna dekkend, zoals apple.com's .92. */
  background: color-mix(in oklab, var(--vel) 92%, transparent);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .kop::before {
    background: color-mix(in oklab, var(--vel) 80%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
/* Materialiseren op de scrollstand: in rust niets, na 6 rem vol glas. Alleen
   met JavaScript (de klasse) én zonder reduced-motion; anders staat het glas
   statisch aan — zie boven. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html.js .kop::before {
      animation: materialiseren linear both;
      animation-timeline: scroll(root);
      animation-range: 0 6rem;
    }
    @keyframes materialiseren {
      from { opacity: 0; -webkit-backdrop-filter: saturate(100%) blur(0px); backdrop-filter: saturate(100%) blur(0px); }
      to   { opacity: 1; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
    }
  }
}

.kop__merk {
  font-family: var(--display); font-variation-settings: "wdth" 112, "wght" 700;
  font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none;
  color: var(--inkt);
  /* Tikdoel 44 px zonder dat de regel opschuift. */
  padding-block: .6em; margin-block: -.6em;
}
.kop__nav {
  margin-left: auto; display: flex; gap: .5rem;
  font-size: var(--t-klein); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gedempt);
}
/* Capsules: 44 px hoog (het tikdoel), radius de halve hoogte. Geen glas op
   glas — de rand is een haarlijn uit de inkt, hover een vibrant fill. */
.kop__nav a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding-inline: 1.1em;
  border-radius: 999px;
  border: 1px solid var(--haar);
  background: color-mix(in oklab, var(--inkt) 5%, transparent);
  text-decoration: none;
  transition: background-color .15s var(--soepel), color .15s var(--soepel), border-color .15s var(--soepel);
}
.kop__nav a:hover { background: color-mix(in oklab, var(--inkt) 12%, transparent); color: var(--inkt); }
/* De ene getinte actie. Tekst in de velkleur op het accent: 4,55:1 in licht,
   4,77:1 in donker — daarom --accent-tekst en niet --accent. Hover iets dieper,
   niet lichter, zodat het contrast niet onder de 4,5 zakt. */
.kop__nav a.kop__actie {
  background: var(--accent-tekst); border-color: transparent; color: var(--vel);
}
.kop__nav a.kop__actie:hover { background: color-mix(in oklab, var(--accent-tekst) 86%, var(--inkt)); color: var(--vel); }

/* Toegankelijkheid. Niet als uitzondering maar als drie echte standen. */
@media (prefers-reduced-transparency: reduce) {
  .kop::before {
    background: color-mix(in oklab, var(--vel) 94%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(28px);
    backdrop-filter: saturate(140%) blur(28px);          /* "frostier" */
  }
}
@media (prefers-contrast: more) {
  .kop::before {
    background: var(--vel);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 1px solid var(--inkt);                /* "a contrasting border" */
  }
  .kop__nav a { border-color: var(--inkt); }
}

/* ---- Het eerste scherm ------------------------------------------------- */
/* De bovenste helft is leeg zwart; alles zakt naar onderen. Nul afbeeldingen. */
.held {
  container-type: inline-size;
  padding: 0 var(--goot) clamp(2.5rem, 6vh, 5rem);
  min-height: calc(100svh - 6rem);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.held__titel { display: block; }
.held__klein {
  display: block; font-size: var(--t-klein); letter-spacing: .2em;
  text-transform: uppercase; color: var(--gedempt);
  margin-bottom: clamp(1rem, 2.5vh, 1.6rem); font-weight: 500;
}

/* ---- De maatvoering van de grote regel ---------------------------------
   De regel loopt van goot tot goot omdat zijn grootte uit de voorschoot- en
   inktbreedte van de échte subset komt, niet uit een schatting. Gemeten in
   Chromium op letter/Archivo-var.woff2 bij wdth 125 / wght 800, per em,
   4 sep 2026 (voorschot = getBoundingClientRect, inkt = canvas
   actualBoundingBoxLeft/Right):

     tekst          voorschot   inkt links   inkt rechts
     "om de hoek"    7,14936      0,04239       7,13959
     "om de"         3,79606      0,04239       3,75366
     "hoek"          3,04960      0,06502       3,03984

   Met letter-spacing -0,02em schuift elke volgende letter mee: de inkt eindigt
   dan op (inkt rechts - (n-1) x 0,02). De deler hieronder is die inktbreedte,
   dus inkt-rechts min inkt-links, en de negatieve marge hangt de linkerschouder
   in de goot. Zo raakt de inkt beide goten, niet de letterdoos.

     "om de hoek"  7,13959 - 0,18 - 0,04239 = 6,91720   marge -0,04239em
     "om de"       3,75366 - 0,08 - 0,04239 = 3,63127   marge -0,04239em
     "hoek"        3,03984 - 0,06 - 0,06502 = 2,91482   marge -0,06502em

   VERANDERT DE TEKST, DAN MOET DIT OPNIEUW GEMETEN. Anders breekt de zetting
   stil: de regel raakt de goot niet meer, of loopt eroverheen.
   100cqw is de binnenbreedte van .held, dus precies de ruimte tussen de goten. */
.held__groot {
  display: block;
  font-family: var(--display);
  font-variation-settings: "wdth" 125, "wght" 800;
  letter-spacing: -.02em;
  line-height: .85;
  color: var(--accent);
  white-space: nowrap;
}
.held__regel { display: block; }
.held__regel--een  { font-size: calc(100cqw / 3.63127); margin-left: -.04239em; }
.held__regel--twee { font-size: calc(100cqw / 2.91482); margin-left: -.06502em; }

.held__voet {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 1rem clamp(1.5rem, 5vw, 4rem);
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
}
.held__alinea { max-width: 30ch; color: var(--inkt); text-wrap: pretty; }
.held__anker {
  font-size: var(--t-klein); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gedempt); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--haar); padding-bottom: .35em;
  /* Het tikdoel groeit naar boven, de streep blijft waar hij stond. */
  padding-top: 1.5em; margin-top: -1.5em;
}
.held__anker:hover { color: var(--inkt); border-color: var(--accent); }

/* Vanaf 50 rem staat "om de hoek" op één regel van goot tot goot. Daaronder
   zou die ene regel te klein worden voor de hiërarchie-eis — op 390 px wordt
   hij 51 px tegen 17 px lopende tekst, dus 3,0 staat tot 1 — en daarom valt hij
   op smalle schermen in twee regels die állebei van goot tot goot lopen. Dat
   is de enige plek waar deze proef van de spec afwijkt, en het is precies de
   plek waar de spec (55 px op 390) en de eis (minstens 6 staat tot 1) elkaar
   tegenspreken.
   De tweede voorwaarde vangt het liggende scherm: onder 30 rem hoogte passen
   twee regels van ruim 200 px domweg niet, en daar wint niet omvallen van de
   verhouding (die zakt daar naar ~5,3 staat tot 1).
   Gemeten uitkomst: 390 -> 121/17 = 7,1 · 800 -> 107/17 = 6,3 (het laagste punt
   van de hele reeks) · 1024 -> 137/18 = 7,6 · 1440 -> 193/18 = 10,7. */
@media (min-width: 50rem), (max-height: 30rem) {
  .held__groot { font-size: calc(100cqw / 6.91720); margin-left: -.04239em; }
  .held__regel { display: inline; font-size: inherit; margin-left: 0; }
}
@media (min-width: 50rem) {
  .held__voet { flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; }
}
@media (min-width: 56rem) {
  :root { --t-tekst: 1.125rem; }
}

/* De enige beweging op het eerste scherm: bij het uitscrollen drijft de grote
   regel 3,5 % naar links. Dat plant de horizontale gedachte vóór de etalage. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.js .held__groot {
      animation: drijf linear both;
      animation-timeline: view(block);
      animation-range: exit 0% exit 100%;
    }
    @keyframes drijf { to { transform: translateX(-3.5%); } }
  }
}

/* ---- De etalage: standaard een veeglade ------------------------------- */
/* Dit is de toestand op de telefoon, bij gereduceerde beweging, zonder
   scroll-tijdlijnen en zonder JavaScript. Vier terugvallen, één gedrag: een
   gewone veeglade met vastklikken. Een telefoon pint dus nooit. */
.etalage { padding-block: clamp(3.5rem, 9vh, 7rem) clamp(3rem, 7vh, 5.5rem); }
.toneel__kop { padding-inline: var(--goot); max-width: 46rem; }
.toneel__kop h2 {
  font-family: var(--display); font-variation-settings: "wdth" 104, "wght" 600;
  font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.025em;
  margin-top: .7rem; text-wrap: balance;
}
.toneel__regel { color: var(--gedempt); margin-top: 1rem; max-width: 44ch; text-wrap: pretty; }

.spoor {
  display: flex; gap: var(--gat);
  padding: clamp(2rem, 5vh, 3.2rem) var(--goot) 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--goot);
  scrollbar-width: thin; scrollbar-color: var(--haar) transparent;
}

.tegel { flex: 0 0 var(--tegel); scroll-snap-align: start; position: relative; }

.venster {
  position: relative; height: var(--raam); overflow: hidden;
  background: var(--vel-op);
  border: 1px solid var(--haar);
  border-radius: 3px;
}

/* De mat is de zaak in vijf vlakken: zijn grond, zijn beeldband, twee regels
   in zijn inkt en zijn accent als knop. Zes achtergrondlagen, nul kilobyte,
   nul verzoeken — en in rust dus al de goede kleur onder het venster. */
.mat {
  position: absolute; inset: 0;
  background-color: var(--m1);
  background-image:
    linear-gradient(var(--m4) 0 100%),
    linear-gradient(var(--m-zacht) 0 100%),
    linear-gradient(var(--m3) 0 100%),
    linear-gradient(var(--m3) 0 100%),
    linear-gradient(var(--m2) 0 100%),
    linear-gradient(var(--m-lijn) 0 100%);
  background-repeat: no-repeat;
  background-size: 34% 5.5%, 44% 2.5%, 40% 3.5%, 66% 5%, 100% 44%, 100% 1px;
  background-position: 8% 90%, 8% 79%, 8% 72%, 8% 65%, 0 12%, 0 8%;
  --m-zacht: color-mix(in oklab, var(--m3) 45%, var(--m1));
  --m-lijn:  color-mix(in oklab, var(--m3) 22%, var(--m1));
}

.mat--restaurant-aster           { --m1: var(--restaurant-aster-1); --m2: var(--restaurant-aster-2); --m3: var(--restaurant-aster-3); --m4: var(--restaurant-aster-4); }
.mat--restaurant-tuindorp        { --m1: var(--restaurant-tuindorp-1); --m2: var(--restaurant-tuindorp-2); --m3: var(--restaurant-tuindorp-3); --m4: var(--restaurant-tuindorp-4); }
.mat--bistro-lood                { --m1: var(--bistro-lood-1); --m2: var(--bistro-lood-2); --m3: var(--bistro-lood-3); --m4: var(--bistro-lood-4); }
.mat--cafe-de-overkant-avond     { --m1: var(--cafe-de-overkant-avond-1); --m2: var(--cafe-de-overkant-avond-2); --m3: var(--cafe-de-overkant-avond-3); --m4: var(--cafe-de-overkant-avond-4); }
.mat--cafe-de-overkant-dag       { --m1: var(--cafe-de-overkant-dag-1); --m2: var(--cafe-de-overkant-dag-2); --m3: var(--cafe-de-overkant-dag-3); --m4: var(--cafe-de-overkant-dag-4); }
.mat--kapper-salon-linde         { --m1: var(--kapper-salon-linde-1); --m2: var(--kapper-salon-linde-2); --m3: var(--kapper-salon-linde-3); --m4: var(--kapper-salon-linde-4); }
.mat--kapper-salon-linde-warm    { --m1: var(--kapper-salon-linde-warm-1); --m2: var(--kapper-salon-linde-warm-2); --m3: var(--kapper-salon-linde-warm-3); --m4: var(--kapper-salon-linde-warm-4); }
.mat--bosman-onderste-derde      { --m1: var(--bosman-onderste-derde-1); --m2: var(--bosman-onderste-derde-2); --m3: var(--bosman-onderste-derde-3); --m4: var(--bosman-onderste-derde-4); }
.mat--bosman-buurtwinkel         { --m1: var(--bosman-buurtwinkel-1); --m2: var(--bosman-buurtwinkel-2); --m3: var(--bosman-buurtwinkel-3); --m4: var(--bosman-buurtwinkel-4); }

/* Het levende venster. Het frame bestaat alleen met JavaScript en kruist over
   de mat heen; zonder JavaScript ís de mat de tegel, dus nooit een leeg wit
   vak. Bewust niet gepand bínnen het frame: de klantsites onthullen achter een
   js-klasse, en die onthullingen vuren niet als je het frame-element
   verschuift — dan vallen er witte gaten. Elk venster toont daarom het eerste
   scherm met de onderkant afgesneden, zodat zichtbaar is dat er meer is. */
.venster__frame {
  position: absolute; inset: 0 0 auto 0; width: 100%;
  height: calc(var(--raam) + 16rem);
  border: 0; pointer-events: none;
}
html.js .venster__frame { opacity: 0; animation: aandoen .55s var(--soepel) .1s both; }
@keyframes aandoen { to { opacity: 1; } }

.tegel__voet { padding: 1.05rem .1rem 0; }
.tegel__link {
  font-family: var(--display); font-variation-settings: "wdth" 104, "wght" 600;
  font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none;
}
.tegel__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.tegel:hover .tegel__link { color: var(--accent-tekst); }
.tegel__regel { display: block; color: var(--gedempt); font-size: var(--t-meta); margin-top: .3rem; }

.voortgang { display: none; }

/* ---- De pin en de pan -------------------------------------------------- */
/* De vondst zit in de hoogte. Schrijf de sectiehoogte als één schermhoogte
   plus de spoorlengte min de vensterbreedte, dan zijn de duur van het
   vastpinnen (sectiehoogte min toneelhoogte) en de afstand van het pannen per
   constructie gelijk. Op 1440 bij 900 is dat 1808 px pin tegen 1808 px pan:
   geen versnelling, geen gevoel van kwijtraken.
   Alleen breed, alleen met beweging, alleen met scroll-tijdlijnen, alleen met
   JavaScript — dat zijn de vier terugvallen, en ze wijzen alle vier naar
   dezelfde veeglade hierboven.

   DE FOCUS MOET MEE. Precies omdat de zijwaartse stand een functie van de
   scrollstand is, verschuift de browser die verticaal naar een tegel scrolt
   diezelfde tegel meteen weer zijwaarts: een jacht die niet convergeert.
   Gemeten 7 sep 2026: 22 van de 40 tabs buiten beeld, elf ook nadat het
   scrollen was uitgedempt, van x = -257 tot x = 2570.

   etalage.js keert de som om, en dat kan exact omdat hij nergens raadt:

     bereik = .etalage-hoogte - vensterhoogte   (scrollafstand van de pin)
     pan    = .etalage-hoogte - .toneel-hoogte  (afstand die het spoor aflegt)

   De tweede maat gebruikt geen aanname over svh: de sectie is één schermhoogte
   plus de pan en het toneel is die ene schermhoogte, dus hun verschil ís de pan,
   wat 100svh ook oplevert. Met p = (scrollY - boven) / bereik is de stand van
   een tegel zónder pan gelijk aan zijn huidige linkerkant plus p x pan, en
   daaruit volgt in één stap de scrollstand waarbij hij tussen de goten past.
   Die som klopt ook middenin een lopende scrollanimatie, want p en de
   linkerkant worden in dezelfde tel gelezen en de pan hangt aan de scrollstand,
   niet aan de tijd. Daarom is één correctie in de frame ná de browser genoeg.

   Het tweede stuk is html.tabt hierboven: met zacht scrollen bleven er drie
   tabs over die ook na een seconde niet aankwamen, omdat de animatie van de
   browser en de pan elkaar bleven opzoeken. Hard scrollen tijdens tabben haalt
   dat weg. Beide helften samen: nul van de veertig buiten beeld. */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.js .etalage {
      --spoor: calc(9 * var(--tegel) + 8 * var(--gat) + 2 * var(--goot));
      --pan: max(0px, calc(var(--spoor) - 100vw + 2 * var(--rand)));
      height: calc(100svh + var(--pan));
      padding-block: 0;
      view-timeline-name: --etalage;
      view-timeline-axis: block;
    }
    html.js .toneel {
      position: sticky; top: 0; height: 100svh;
      display: flex; flex-direction: column; justify-content: center;
      gap: clamp(1.5rem, 3vh, 2.6rem);
      /* Ruimte voor de glazen strook. Overal elders schuift de inhoud er gewoon
         onderdoor — dat is het punt van glas — maar hier staat het toneel stil
         en gecentreerd, en dan is het een kruising in rust: "reposition or
         scale the content to maintain separation" (WWDC25 219). */
      padding-top: calc(var(--rand) + var(--kophoogte) + 1rem);
      /* clip en niet hidden: hidden zou van het toneel een scrollbak maken, en
         dan zou een focus in het spoor de tegels ongemerkt verschuiven. */
      overflow: clip;
    }
    html.js .spoor {
      overflow: visible; scroll-snap-type: none; padding-top: 0;
      animation: pannen linear both;
      animation-timeline: --etalage;
      animation-range: contain 0% contain 100%;
      will-change: transform;
    }
    @keyframes pannen { to { transform: translate3d(calc(-1 * var(--pan)), 0, 0); } }

    /* De voortgangslijn loopt op dezelfde tijdlijn als de pan, dus hij liegt
       niet: waar de lijn staat, staat het spoor. */
    html.js .voortgang {
      display: block; margin-inline: var(--goot); height: 1px; background: var(--haar);
    }
    html.js .voortgang__lijn {
      display: block; height: 1px; background: var(--accent);
      transform: scaleX(0); transform-origin: left;
      animation: vullen linear both;
      animation-timeline: --etalage;
      animation-range: contain 0% contain 100%;
    }
    @keyframes vullen { to { transform: scaleX(1); } }
  }
}

/* ---- Slot -------------------------------------------------------------- */
.slot {
  padding: clamp(4rem, 12vh, 8rem) var(--goot) clamp(2.5rem, 6vh, 4rem);
  container-type: inline-size;
}
.slot__regel {
  font-family: var(--display); font-variation-settings: "wdth" 118, "wght" 700;
  font-size: clamp(1.7rem, 5.4cqw, 3.5rem); line-height: 1.04; letter-spacing: -.03em;
  color: var(--accent); text-wrap: balance;
}
.slot__regel + .slot__regel { margin-top: .3em; }
.slot__voet {
  margin-top: clamp(2.2rem, 5vh, 3.5rem); padding-top: 1.2rem;
  border-top: 1px solid var(--haar);
  font-size: var(--t-meta); color: var(--gedempt);
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: space-between;
  align-items: baseline;
}
/* Padding en negatieve marge samen: het tikdoel wordt 44 px hoog zonder dat de
   regel opschuift. */
.slot__voet a { text-decoration: none; color: var(--inkt); padding-block: .8em; margin-block: -.8em; }
.slot__voet a:hover { color: var(--accent-tekst); }

/* ---- Waarom er geen schakelaar is --------------------------------------- */
/* Het schema volgt het systeem en verder niets. Een knop erbij zou een derde
   toestand zijn om te onderhouden en te meten, en de pagina heeft er geen
   argument voor: hij toont negen klantsites met hun eigen vaste kleuren, en die
   draaien niet mee. Wat draait is het vel eromheen, in beide richtingen even ver.
   --rand en --velhoek zijn in beide schema's gelijk (het vel ligt sinds 8 sep
   ingelegd op --lijst); alleen de kleur van die lijst wisselt mee met het schema. */