/* =========================================================================
   Voorwerk — ONTWERP B. Een voorstel, niet de site.

   Te zien op /proef. De echte site (/) blijft staan zoals hij was; deze
   pagina is er om naast te leggen en over te beslissen. Wordt hij het niet,
   Dat oordeel is gekomen: op 2026-09-09 is dit de site geworden. Heette tot die dag site-b.css.
   =========================================================================

   WAAROM DEZE RICHTING EN GEEN ANDERE.

   Er liggen er al vijf in de geschiedenis: donker met een gloed, crème met een
   schreefletter, een werktekening, een Notion-achtige, en een kobalten bouwbord
   dat uitgesproken was en ook te veel. De huidige site is de nette
   categoriestandaard, goed uitgevoerd. Op de vraag wat eraan schort was het
   antwoord "niets concreets, gewoon toe aan iets nieuws" — en dat is precies de
   omstandigheid waarin je iets bouwt dat opvalt en daarna sneuvelt omdat het te
   veel is.

   Dus: de énige richting uit die lijst die hier nog niet geprobeerd is, en de
   enige die karakter haalt uit iets wat niet uit de mode raakt. Geen kleurvlak,
   geen glas, geen textuur, geen effect. **De typografie ís het ontwerp.**
   Woorden groot genoeg om te lezen als een gevel, een grond die papier is, en
   één signaalkleur die alleen daar staat waar je moet klikken.

   Dat is ook waarom het bij dít product past. Voorwerk wordt gebruikt door
   mensen die dingen bouwen. Een pagina die zijn indruk maakt met een truc, moet
   die truc blijven waarmaken; een pagina die zijn indruk maakt met maatvoering
   en rust hoeft dat niet.

   DE DRIE KEUZES, EN WAT ZE KOSTEN

   1. ARCHIVO IN PLAATS VAN HANKEN GROTESK. Een grotesk met twee assen: gewicht
      (100–900) én breedte (62–125). Die tweede as is de reden. Grote koppen
      staan hier smal en zwaar — dat is hoe letters op een bouwbord staan en op
      een machine, en het is iets wat je met een gewone letter niet kunt doen.
      Zelf gehost, één bestand van 88 kB, net als de rest.

   2. PAPIER EN INKT IN PLAATS VAN GEBROKEN WIT EN PETROL. De grond is warm en
      licht, de inkt bijna zwart. Er is nergens een tweede vlakkleur.

   3. ÉÉN SIGNAALKLEUR, EN BIJNA NERGENS. Vermiljoen, alleen op de knop waar je
      op moet drukken, op links, en op één merkteken. Het staat in --sein: één
      regel om te wisselen als de kleur het niet wordt. Dat is met opzet zo
      gebouwd, want de kleur is het makkelijkst om ruzie over te krijgen en de
      goedkoopste om te veranderen.

   WAT ER NIET VERANDERT, en dat is bewust. Nul JavaScript. Eén stand (licht).
   Echte schermafdrukken en geen nagetekende. Het antwoord bij het indrukken en
   de drie voorkeuren van de bezoeker (beweging, doorschijnendheid, contrast)
   staan er net zo goed in als in site.css — die zijn vandaag toegevoegd en het
   zou raar zijn om ze in een nieuw ontwerp weer kwijt te raken.
   ========================================================================= */

/* Archivo: één variabel bestand, twee assen. De smalle stand gebruiken we alleen
   groot; onder de 24px leest smal slechter en staat de letter gewoon op 100. */
@font-face{font-family:'Archivo';src:url('/fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap}

:root{
  /* Papier en inkt. Twee vlakken, meer niet: de grond en wat erop ligt. */
  --papier:#faf9f6;
  --vlak:#ffffff;
  --vlak-2:#f2f0ea;

  --inkt:#12120f;
  --inkt-2:#4a4842;
  --inkt-3:#6e6b63;

  --lijn:#e3e0d8;
  --lijn-sterk:#cfcbc0;

  /* De enige kleur op de pagina. Eén regel om te wisselen — zie de toelichting
     hierboven. 4,8:1 op papier, dus ook als tekstkleur leesbaar. */
  --sein:#c8371a;
  --sein-diep:#a32a10;
  --sein-op:#ffffff;
  --sein-zacht:#fbeae5;

  /* De trap. Zes treden en niet meer, en de bovenste twee zijn met opzet groot:
     dit ontwerp maakt zijn punt met maat, niet met kleur. */
  --t-maat:12.5px;
  --t-fijn:13.5px;
  --t-klein:15.5px;
  --t-tekst:18px;
  --t-groot:21px;
  --t-kop-1:24px;
  --t-kop-2:clamp(28px,3.4vw,38px);
  --t-kop-3:clamp(38px,5.4vw,64px);
  --t-kop-4:clamp(46px,9vw,124px);

  --maxw:1200px; --prose:660px; --gut:24px;
  --rond:4px; --rond-klein:3px; --rond-pil:999px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--inkt-2);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--t-tekst);line-height:1.6;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--sein-zacht);color:var(--inkt)}

/* KOPPEN. Hier zit het hele ontwerp in. Hoe groter de maat, hoe smaller en
   zwaarder de letter en hoe dichter de regels — precies de trap die vandaag ook
   in site.css is gezet, maar hier veel verder doorgetrokken omdat de maten
   verder uit elkaar liggen. De breedte-as doet het werk dat een kleurvlak
   anders zou doen. */
h1,h2,h3,h4,h5{color:var(--inkt);margin:0;text-wrap:balance;font-synthesis:none}
h1{font-size:var(--t-kop-4);font-weight:800;font-stretch:74%;letter-spacing:-.028em;line-height:.94}
h2{font-size:var(--t-kop-3);font-weight:800;font-stretch:82%;letter-spacing:-.022em;line-height:1.02}
h3{font-size:var(--t-kop-2);font-weight:700;font-stretch:90%;letter-spacing:-.016em;line-height:1.12}
h4{font-size:var(--t-kop-1);font-weight:700;font-stretch:100%;letter-spacing:-.008em;line-height:1.24}
h5{font-size:var(--t-fijn);font-weight:700;font-stretch:100%;letter-spacing:.06em;line-height:1.4;
   text-transform:uppercase;color:var(--inkt-3)}

p{margin:0}
a{color:var(--sein);text-decoration:none;transition:color .16s cubic-bezier(.32,.72,0,1)}
a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
a:active{color:var(--sein-diep);transition-duration:.06s}
:focus-visible{outline:2px solid var(--sein);outline-offset:3px;border-radius:var(--rond-klein)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--t-maat)}

/* ---- balk ----------------------------------------------------------------
   Geen doorschijnend materiaal hier: die pagina is papier, en papier heeft geen
   glas. Wel dezelfde zachte rand in plaats van een streep, om dezelfde reden
   als in site.css — de inhoud schuift eronder door. */
header{position:sticky;top:0;z-index:40;background:var(--papier)}
header::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--inkt) 7%,transparent),transparent)}
.balk{display:flex;align-items:center;gap:22px;height:72px;border-bottom:1px solid var(--lijn)}
.merk{display:inline-flex;align-items:center;gap:11px;color:var(--inkt);text-decoration:none;
  font-weight:800;font-stretch:84%;font-size:23px;letter-spacing:-.02em}
.merk:hover{text-decoration:none}
.merk .teken{width:22px;height:15.6px;flex:none;color:var(--sein)}
.menu{margin-left:auto;display:flex;gap:26px}
.menu a{color:var(--inkt-2);font-size:var(--t-klein);font-weight:500}
.menu a:hover{color:var(--inkt);text-decoration:none}
.balk-doen{display:flex;gap:10px;align-items:center}

/* ---- knoppen -------------------------------------------------------------
   Rechthoekig en zwaar. De ronding van 14px die de huidige site overal heeft is
   hier 4px: dat is het verschil tussen "app" en "gedrukt". */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 24px;border-radius:var(--rond);border:1.5px solid transparent;
  font-family:inherit;font-size:var(--t-klein);font-weight:700;font-stretch:96%;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .16s cubic-bezier(.32,.72,0,1),border-color .16s cubic-bezier(.32,.72,0,1),
             color .16s cubic-bezier(.32,.72,0,1),transform .16s cubic-bezier(.32,.72,0,1)}
.knop:hover{text-decoration:none}
.knop.vol{background:var(--sein);color:var(--sein-op)}
.knop.vol:hover{background:var(--sein-diep)}
.knop.lijn{background:none;color:var(--inkt);border-color:var(--inkt)}
.knop.lijn:hover{background:var(--inkt);color:var(--papier)}
.knop.stil{background:none;color:var(--inkt-2);padding:0 14px;height:44px}
.knop.stil:hover{color:var(--inkt)}
.knop svg{width:17px;height:17px;flex:none}
/* Het antwoord komt bij het indrukken, niet bij het loslaten. Zelfde afspraak
   als in site.css: één pixel zakken, sneller erin dan eruit. */
.knop:active{transform:translateY(1px);transition-duration:.06s}
.knop.vol:active{background:var(--sein-diep)}
.knop.lijn:active{background:var(--inkt);color:var(--papier)}

/* ---- de kop --------------------------------------------------------------
   Links uitgelijnd en niet gecentreerd. Een gecentreerde kop is de vorm van de
   categoriestandaard; links uitgelijnd leest als een pagina die iets te zeggen
   heeft en niet als een etalage. */
.hero{padding:88px 0 0}
.stand{display:inline-flex;align-items:flex-start;gap:9px;font-size:var(--t-fijn);font-weight:600;
  color:var(--inkt-2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:30px}
.stand .stip{width:7px;height:7px;border-radius:50%;background:var(--sein);flex:none;margin-top:.45em}
.hero h1{max-width:13ch}
.hero .lead{margin:34px 0 0;max-width:52ch;font-size:var(--t-groot);line-height:1.5;color:var(--inkt-2)}
.hero .lead b{color:var(--inkt);font-weight:700}
.doen{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.fijn{margin-top:18px;font-size:var(--t-klein);color:var(--inkt-3)}
/* Tussenkop binnen een sectie: 'Los bij te nemen', 'Wat er verder geldt'. Staat er sinds
   de prijssectie de add-ons en de voorwaarden weer draagt (2026-09-09). */
.subkop{margin:38px 0 16px}
/* De zin bovenaan een prijskaart: wat krijg je hier bovenop het pakket links ervan. Komt uit
   watErbijKomt() in lib/prijzen.js en dus uit dezelfde tabel die de verschillen beschrijft. */
.prijs .erbij{font-size:var(--t-klein);color:var(--inkt-2);margin:14px 0 0}
/* De fundering als lijst, onder de kaarten: elf regels, dus twee kolommen. Zelfde streepjes als
   op een prijskaart, want het is hetzelfde soort opsomming. */
.kern ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px}
.kern li{display:flex;gap:11px;font-size:var(--t-klein);color:var(--inkt-2);align-items:flex-start}
.kern li::before{content:"—";color:var(--sein);flex:none;font-weight:700}

/* ---- beeld ---------------------------------------------------------------
   Het scherm ligt op de pagina, niet in een kaartje met een schaduw. Eén lijn
   eromheen, verder niets. */
.beeld{margin:64px 0 0}
.beeld .kader{border:1px solid var(--lijn-sterk);background:var(--vlak);overflow:hidden}
.beeld img{display:block;width:100%;height:auto}
.beeld figcaption{margin-top:14px;font-size:var(--t-fijn);color:var(--inkt-3);max-width:70ch}
@media (prefers-reduced-motion:no-preference){
  .hero-beeld{animation:opkomen .7s cubic-bezier(.16,1,.3,1) both}
  @keyframes opkomen{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* ---- cijfers -------------------------------------------------------------- */
.cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:64px;
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.cijfer{padding:26px 26px 26px 0;border-left:1px solid var(--lijn);padding-left:26px}
.cijfer:first-child{border-left:none;padding-left:0}
.cijfer b{display:block;font-size:44px;font-weight:800;font-stretch:80%;letter-spacing:-.03em;
  line-height:1;color:var(--inkt)}
.cijfer span{display:block;margin-top:10px;font-size:var(--t-klein);color:var(--inkt-3);max-width:26ch}

/* ---- secties -------------------------------------------------------------
   De sectiekop staat links en de inhoud rechts. Dat is de asymmetrie die dit
   ontwerp draagt: je oog valt op de kop en loopt dan de kolom in. */
section{padding:96px 0}
section + section{border-top:1px solid var(--lijn)}
.sec-kop{max-width:34ch;margin-bottom:44px}
.sec-kop h2{margin-bottom:16px}
.sec-kop p{color:var(--inkt-3);font-size:var(--t-groot);line-height:1.5}

.raster{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.raster-3{grid-template-columns:repeat(3,1fr)}
.raster-2{grid-template-columns:repeat(2,1fr)}
.vak{background:var(--papier);padding:30px 28px}
.vak h4{margin-bottom:10px}
.vak p{font-size:var(--t-klein);color:var(--inkt-3);line-height:1.55}
.vak .nr{display:block;margin-bottom:16px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:var(--t-maat);color:var(--sein);font-weight:600}

/* ---- prijzen -------------------------------------------------------------- */
.prijs{background:var(--vlak);border:1px solid var(--lijn-sterk);padding:40px 36px}
.prijs .bedrag{font-size:56px;font-weight:800;font-stretch:78%;letter-spacing:-.032em;
  line-height:1;color:var(--inkt)}
.prijs .per{font-size:var(--t-klein);color:var(--inkt-3);margin-top:8px}
.prijs ul{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.prijs li{display:flex;gap:11px;font-size:var(--t-klein);color:var(--inkt-2);align-items:flex-start}
.prijs li::before{content:"—";color:var(--sein);flex:none;font-weight:700}

/* ---- vragen --------------------------------------------------------------- */
.vraag{border-top:1px solid var(--lijn);padding:26px 0}
.vraag:last-child{border-bottom:1px solid var(--lijn)}
.vraag h4{margin-bottom:9px}
.vraag p{font-size:var(--t-klein);color:var(--inkt-3);max-width:74ch}

/* ---- slot ----------------------------------------------------------------- */
.slot{background:var(--inkt);color:var(--papier);padding:96px 0}
.slot h2{color:var(--papier);max-width:16ch}
.slot p{color:#b8b5ad;margin-top:20px;max-width:52ch;font-size:var(--t-groot)}
.slot .doen{margin-top:36px}
.slot .knop.lijn{color:var(--papier);border-color:#4a4842}
.slot .knop.lijn:hover{background:var(--papier);color:var(--inkt);border-color:var(--papier)}
.slot a{color:var(--papier)}

/* ---- voettekst ------------------------------------------------------------ */
footer{border-top:1px solid var(--lijn);padding:56px 0 40px}
.voet{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:44px}
.voet h5{margin:0 0 16px}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.voet a{color:var(--inkt-2);font-size:var(--t-klein)}
.voet a:hover{color:var(--sein)}
.voet .over{margin-top:16px;max-width:36ch;font-size:var(--t-klein);color:var(--inkt-3)}
.voet-onder{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--lijn);
  font-size:var(--t-fijn);color:var(--inkt-3)}

/* ---- smaller scherm ------------------------------------------------------- */
@media (max-width:900px){
  .cijfers{grid-template-columns:1fr}
  .cijfer{border-left:none;border-top:1px solid var(--lijn);padding-left:0}
  .cijfer:first-child{border-top:none}
  .raster-3,.raster-2{grid-template-columns:1fr}
  .kern ul{grid-template-columns:1fr}
  .voet{grid-template-columns:1fr 1fr}
  .voet>div:first-child{grid-column:1/-1}
  .menu{display:none}
}
@media (max-width:680px){
  :root{--gut:18px}
  section{padding:64px 0}
  .hero{padding:56px 0 0}
  .balk-doen .knop.stil{display:none}
}

/* ---- wat de bezoeker heeft ingesteld -------------------------------------
   Drie losse voorkeuren, drie eigen antwoorden. Zelfde redenering als in
   site.css: minder beweging is niet hetzelfde als geen antwoord. */
@media (prefers-reduced-motion:reduce){
  .knop:active{transform:none}
  .knop,a{transition-duration:.01ms}
}
@media (prefers-contrast:more){
  :root{--inkt-3:#4a4842;--lijn:var(--lijn-sterk)}
  .knop.lijn{border-width:2px}
  a:hover{text-decoration-thickness:2px}
}