/* =========================================================================
   olefinn.com — de studio zelf.
   Bewust géén van de vier branche-paletten: als je eigen site eruitziet als
   je sjabloon, verkoop je het sjabloon en niet jezelf.
   ========================================================================= */
:root {
  /* Twee schema's, het systeem beslist. Het accent is in beide hetzelfde
     vlak; als tekst en focusring is het in donker lichter (2,4:1 anders).
     Meting in site/DESIGN.md. */
  color-scheme: light dark;
  --grond:      light-dark(#f7f7f5, #141413);
  --grond-diep: light-dark(#ecebe7, #1e1e1c);
  --inkt:       light-dark(#111110, #ececea);
  --gedempt:    light-dark(#6a6a64, #a3a39d);
  --lijn:       light-dark(#d8d7d1, #2c2c29);
  --accent:     #1b3fd8;
  --accent-diep:#1230ad;
  --accent-tekst: light-dark(#1b3fd8, #7b93f3);
  --op-accent:  #ffffff;
  /* Het aanbodblok op /voor/ is in beide schema's donkerder dan de pagina,
     het draait dus niet om. */
  --aanbod-grond:   light-dark(#111110, #0b0b0a);
  --aanbod-inkt:    light-dark(#f7f7f5, #ececea);
  --aanbod-gedempt: light-dark(#c9c8c2, #a8a8a2);
  --aanbod-lijn:    light-dark(#33332f, #35352f);
  --aanbod-opschrift: #8fa4f5;

  --display: ui-sans-serif, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tekst:   ui-sans-serif, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Ondergrens 0,875 rem: niets op de site onder 14 px, ook niet op 390 px. */
  --s--1: clamp(0.875rem, 0.79rem + 0.14vw, 0.90rem);
  --s-0:  clamp(1.02rem, 0.97rem + 0.25vw, 1.18rem);
  --s-1:  clamp(1.30rem, 1.19rem + 0.55vw, 1.70rem);
  --s-2:  clamp(1.66rem, 1.44rem + 1.10vw, 2.45rem);
  --s-3:  clamp(2.12rem, 1.72rem + 2.00vw, 3.54rem);
  --s-4:  clamp(2.71rem, 2.01rem + 3.50vw, 5.10rem);

  --r-2xs: .5rem; --r-xs: .75rem; --r-s: 1rem; --r-m: 1.6rem;
  --r-l: 2.6rem; --r-xl: 4.2rem; --r-2xl: 6.5rem;
  --max: 74rem;
  --duur: 200ms; --soepel: cubic-bezier(.2,.9,.3,1);
  --hoek: 1.25rem;
}

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

/* Tegelfoto op de landing en eerste richtingbeeld op /voor/<branche>/ delen
   een naam: één beweging. Firefox springt gewoon. */
@view-transition { navigation: auto; }
.vt--fietsenmaker { view-transition-name: vt-fietsenmaker; }
.vt--kapper { view-transition-name: vt-kapper; }
.vt--restaurant { view-transition-name: vt-restaurant; }
.vt--cafe { view-transition-name: vt-cafe; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Scroll-voortgang als haarlijn van 2 px; alleen met scroll-timelines en
   zonder reduced-motion, anders geen lijn. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    body::before {
      content: ""; position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none;
      width: 100%; height: 2px; background: var(--accent);
      transform-origin: left; transform: scaleX(0);
      animation: haarlijn linear both; animation-timeline: scroll(root);
    }
    @keyframes haarlijn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
body {
  margin: 0; background: var(--grond); color: var(--inkt);
  font-family: var(--tekst); font-size: var(--s-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
/* In donker acht procent gedempt, zodat een lichte foto geen lamp wordt. */
@media (prefers-color-scheme: dark) { img { filter: brightness(.92); } }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
/* Waar cijfers onder of naast elkaar staan, lijnen ze uit. */
.richting__nummer, .stappen li::before, .stand, .branche__meta { font-variant-numeric: tabular-nums; }
h1 { font-size: var(--s-4); font-weight: 800; }
h2 { font-size: var(--s-3); font-weight: 800; }
h3 { font-size: var(--s-1); font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0 0 var(--r-s); max-width: 60ch; text-wrap: pretty; }
/* Koppen hebben margin:0, dus de lucht eronder komt van de volgende alinea. */
h1 + p, h2 + p, h3 + p { margin-top: var(--r-s); }
.sectie h2 + p, .aanbod h2 + p { margin-top: var(--r-m); }
.inleiding { margin-bottom: var(--r-l); }

.omhulsel { width: min(100% - 2 * var(--r-m), var(--max)); margin-inline: auto; }
.sectie { padding-block: var(--r-2xl); }
.opschrift {
  font-size: var(--s--1); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gedempt); margin: 0 0 var(--r-2xs);
}

:where(a, button, input, textarea):focus-visible { outline: 3px solid var(--accent-tekst); outline-offset: 3px; }
.overslaan:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.overslaan:focus { position: fixed; top: var(--r-s); left: var(--r-s); z-index: 100; background: var(--accent); color: var(--op-accent); padding: .6em 1em; text-decoration: none; }

/* ---- Kop --------------------------------------------------------------- */
.kop { border-bottom: 1px solid var(--lijn); }
.kop__binnen { display: flex; align-items: center; gap: var(--r-m); padding-block: var(--r-s); }
.kop__merk { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: var(--s-1); text-decoration: none; }
.kop nav { margin-left: auto; display: flex; gap: var(--r-m); font-size: var(--s--1); }
.kop nav a { text-decoration: none; display: inline-block; padding-block: .8em; margin-block: -.8em; }
.kop nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 40rem) { .kop nav { gap: var(--r-s); } }

/* ---- Held -------------------------------------------------------------- */
.held { padding-block: var(--r-2xl) var(--r-xl); }
.held h1 { max-width: 16ch; overflow-wrap: break-word; }   /* vangnet: een woord dat ook na het
   zachte afbreekstreepje niet past, breekt liever dan dat de pagina zijwaarts schuift (live-klaar-poort V01) */
.held__onder { font-size: var(--s-1); color: var(--gedempt); margin-top: var(--r-m); max-width: 48ch; }
.knop {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .9em 1.7em; font: inherit; font-weight: 600; text-decoration: none; border-radius: 999px;
  background: var(--accent); color: var(--op-accent); border: 2px solid var(--accent);
  transition: transform var(--duur) var(--soepel), background var(--duur) var(--soepel);
}
.knop:hover { transform: translateY(-2px); background: var(--accent-diep); }
.knop--leeg { background: transparent; color: var(--inkt); border-color: var(--inkt); }
.knop--leeg:hover { background: var(--inkt); color: var(--grond); }
.knoppen { display: flex; gap: var(--r-xs); flex-wrap: wrap; margin-top: var(--r-l); }

/* ---- Werk -------------------------------------------------------------- */
.werk { display: grid; gap: var(--r-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.werk a {
  text-decoration: none; background: var(--grond-diep); display: block;
  transition: transform var(--duur) var(--soepel);
}
.werk a:hover { transform: translateY(-4px); }
.werk img { aspect-ratio: 4 / 3; object-fit: cover; }
.werk__tekst { padding: var(--r-s); }
.werk__soort { font-size: var(--s--1); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-tekst); }
.werk__naam { font-family: var(--display); font-weight: 700; font-size: var(--s-1); letter-spacing: -.02em; margin-top: .2em; }
.werk__waar { color: var(--gedempt); font-size: var(--s--1); }

/* ---- Stappen ----------------------------------------------------------- */
.stappen { display: grid; gap: var(--r-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: stap; list-style: none; margin: 0; padding: 0; }
.stappen li { counter-increment: stap; border-top: 2px solid var(--inkt); padding-top: var(--r-s); }
.stappen li::before { content: counter(stap, decimal-leading-zero); display: block; font-family: var(--mono); font-size: var(--s--1); color: var(--accent-tekst); margin-bottom: var(--r-2xs); }
.stappen h3 { margin-bottom: var(--r-2xs); }
.stappen p { font-size: var(--s--1); color: var(--gedempt); }

/* ---- Aanbod ------------------------------------------------------------ */
.aanbod { background: var(--aanbod-grond); color: var(--aanbod-inkt); border-top: 1px solid var(--aanbod-lijn); }
.aanbod h2 { max-width: 20ch; }
.opschrift--licht { color: var(--aanbod-opschrift); }
.stappen { margin-top: var(--r-l); }
.aanbod p { color: var(--aanbod-gedempt); }
.aanbod .knop { background: var(--aanbod-inkt); color: var(--aanbod-grond); border-color: var(--aanbod-inkt); }
.aanbod .knop:hover { background: var(--accent); color: var(--op-accent); border-color: var(--accent); }
.aanbod__rooster { display: grid; gap: var(--r-xl); grid-template-columns: 1.1fr .9fr; align-items: start; }
@media (max-width: 46rem) { .aanbod__rooster { grid-template-columns: 1fr; } }
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li { padding-block: .6em; border-bottom: 1px solid var(--aanbod-lijn); display: flex; gap: .7em; }
/* Een streepje als opsomteken tekenen we, niet typen: een liggend
   streepje in de tekst wordt door schermlezers voorgelezen. */
.lijst li::before { content: ""; flex: 0 0 .7em; height: 2px; margin-top: .75em; background: var(--accent-tekst); }
.lijst li:last-child { border-bottom: 0; }

/* ---- Tekstpagina's: privacy en 404 (klassen, nooit style=; CSP) ---------- */
.kop-klein { font-size: var(--s-3); }
.blok { margin-top: var(--r-l); }
.blok--eerste { margin-top: var(--r-xl); }
.bijgewerkt { margin-top: var(--r-xl); color: var(--gedempt); font-size: var(--s--1); }

/* ---- Voet -------------------------------------------------------------- */
.voet { border-top: 1px solid var(--lijn); padding-block: var(--r-l); font-size: var(--s--1); color: var(--gedempt); }
.voet__binnen { display: flex; justify-content: space-between; gap: var(--r-s); flex-wrap: wrap; }
.voet a { text-underline-offset: 3px; display: inline-block; padding-block: .8em; margin-block: -.8em; }

/* ---- Pitchpagina per branche (/voor/<branche>/) ------------------------- */
.voorbeeld { display: grid; gap: var(--r-xl); grid-template-columns: 1.05fr .95fr; align-items: start; }
@media (max-width: 52rem) { .voorbeeld { grid-template-columns: 1fr; gap: var(--r-m); } }
.voorbeeld__beeld { display: block; background: var(--grond-diep); border-radius: var(--hoek); overflow: hidden; transition: transform var(--duur) var(--soepel); }
.voorbeeld__beeld:hover { transform: translateY(-4px); }
.voorbeeld__beeld img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.voorbeeld__naam { font-family: var(--display); font-weight: 700; font-size: var(--s-1); letter-spacing: -.02em; margin-bottom: var(--r-2xs); }
.voorbeeld .knoppen { margin-top: var(--r-m); }
.voorbeeld__een { display: contents; }

/* Twee of drie richtingen naast elkaar: dit is de pagina waar de brief naar
   wijst. Elke kaart is één richting; ze krijgen dezelfde breedte zodat het
   een vergelijk is en geen rangorde.

   Sinds 4 sep is dat een schuivende strook in plaats van een raster. Gemeten
   aanleiding: bij drie richtingen viel het raster tussen 685 en 1015 px uiteen
   in twee kaarten met een wees eronder, en op 1440 px was een kaart 378 px
   tegen 579 px bij een branche met twee richtingen — de restaurants kregen dus
   65 % van de maat die café en kapper krijgen, en het beeld kromp mee. De
   strook geeft elke kaart dezelfde breedte ongeacht het aantal, en laat de
   volgende kaart half zien: dat is het signaal dat er meer is. Het recept komt
   van de fotostrook van het dagcafé.

   Geen mediaquery: de kaart groeit mee met het venster tot 32 rem, zodat het
   aantal zichtbare kaarten vloeiend loopt van 1,2 op 390 px naar 2,3 op
   1440 px. Een breekpunt zou hier een zichtbare sprong in kaartbreedte geven. */
.richtingen {
  display: flex; gap: var(--r-m); align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  /* De strook loopt door tot de rand van de tekstkolom en klikt daar ook vast,
     zodat een gesnapte kaart niet tegen de rand plakt. */
  margin-inline: calc(-1 * var(--r-m)); padding-inline: var(--r-m); scroll-padding-inline: var(--r-m);
  /* Ruimte voor de vier pixels die een kaart bij hover optilt en voor de
     focusring; zonder deze regel snijdt de overloop ze af. */
  padding-block: .35rem;
}
.richting { flex: 0 0 clamp(16rem, 82%, 32rem); scroll-snap-align: start; display: flex; flex-direction: column; }
/* Bij twee richtingen passen ze allebei zodra het venster dat toelaat: dan is
   het weer een vergelijk in één oogopslag. Wordt het venster smaller, dan
   verandert dezelfde regel het vanzelf terug in een strook. */
.richtingen--2 .richting { flex-basis: clamp(16rem, 82%, max(20rem, calc((100% - var(--r-m)) / 2))); }
.richting .voorbeeld__beeld img { aspect-ratio: 4 / 3; }
.richting .voorbeeld__tekst { padding-top: var(--r-s); display: flex; flex-direction: column; flex: 1; }
.richting__nummer { font-family: var(--mono); font-size: var(--s--1); color: var(--accent-tekst); margin-bottom: var(--r-2xs); }
.richting__regel { font-size: var(--s-0); }
.richting__zaak { color: var(--gedempt); font-size: var(--s--1); }
/* Knoppen op één lijn, ook als de ene regel langer is dan de andere. */
.richting .knoppen { margin-top: auto; padding-top: var(--r-xs); }
.richtingen__onder { margin-top: var(--r-xl); }
.lijst--kolommen { columns: 2; column-gap: var(--r-xl); }
.lijst--kolommen li { break-inside: avoid; }
@media (max-width: 40rem) { .lijst--kolommen { columns: 1; } }

/* Op een lichte ondergrond hoort de scheidingslijn licht te zijn; de .lijst
   uit het donkere aanbodblok gebruikt een donkere. */
.lijst--licht li { border-bottom-color: var(--lijn); }

/* De stappen staan hier in één smalle kolom naast het aanbod, niet als rij
   van vier over de volle breedte. */
.stappen--een { grid-template-columns: 1fr; gap: var(--r-s); margin-top: 0; }
.aanbod .stappen--een li { border-top-color: var(--aanbod-inkt); }
.aanbod .stappen li::before { color: var(--aanbod-opschrift); }
.aanbod .stappen--een h3 { color: var(--aanbod-inkt); }