/* ══════════════════════════════════════════════════════════════════════════
   Huisbiografie — huisstijl (september 2026)

   Wat de homepage en elke andere publieke pagina delen: de kleuren, de twee
   letters, de topbalk, de voet en de cookievraag. Laadt ná stijl.css; de
   homepage zet daarna nog home.css erbovenop.

   De nieuwe stijl van de homepage (ontwerp „Finale", 24 sep 2026) gold eerst
   alleen daar. Wie doorklikte naar /check, de voorproef of de bedankpagina
   kwam in de oude site terecht: nachtblauwe balk, typemachineletter, gespatieerde
   kapitalen, een perkamentvel op linnen — de stijl die Tom „te Claude" vond.
   Sinds 25 sep 2026 draagt elke pagina met `class="hs"` op body deze stijl.

   HOE DE OUDE PAGINA'S OMGAAN (zonder hun HTML te herschrijven). stijl.css
   tekent de merkelementen met twee variabelen: `--mono` (de typemachineletter)
   en `--display` (Fraunces). Onder .hs wijzen die naar Hanken Grotesk en
   Newsreader, zodat elke regel die ze gebruikt vanzelf meegaat. Wat daarnaast
   kapitalen en letterafstand zette, staat hieronder bij naam.

   HET BOEK BLIJFT HET BOEK. De bladzijden van de voorproef (#boek) en de
   kaftvoorbeelden dragen de letters van het boek, zoals de leeskamer en het
   voorbeeldboek. Daar krijgen de variabelen hun oude waarde terug.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --h-papier:#FBF8F1; --h-perkament:#F3ECDD; --h-titel:#F6F0E3; --h-wit:#FFFFFF;
  --h-inkt:#1E2433; --h-mat:#5A5F6E; --h-lijn:#E4DBC8;
  --h-rood:#A63D30; --h-nacht:#182031; --h-nacht2:#1D2639;
  --h-goud:#C7AE78; --h-goudl:#E2C083; --h-maan:#C5C2B8;
  --h-serif:'Newsreader',Georgia,serif;
  --h-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --h-rand:clamp(20px,4.4vw,56px);
  --h-sectie:clamp(64px,8vw,104px);
  --h-maat:1168px;
}

.hs{
  background:var(--h-papier);background-image:none;
  font-family:var(--h-serif);color:var(--h-inkt);line-height:1.6;font-size:18px;
}
.hs :focus-visible{outline:2px solid var(--h-rood);outline-offset:3px}

/* De oude merkelementen in de nieuwe letters — behalve op de homepage, die
   ze al per element zelf zet (home.css). */
.hs:not(.home){--mono:var(--h-sans);--display:var(--h-serif);--serif:var(--h-serif)}
.hs :is(#boek,.kaft,.bedankt-kaft,.kaftvoorbeeld-boek,.gevel-proef){
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Fraunces','Newsreader',Georgia,serif;
}

/* Het kaartanker: de cirkel met het kruis waarmee elk boek het huis op de
   oude kaarten aanwijst. Goud op papier, lichter goud op nachtblauw. */
.h-anker{width:24px;height:24px;flex:none;fill:none;stroke:#A5813C;stroke-width:1.7;stroke-linecap:round}
#colofon .h-anker{stroke:var(--h-goudl)}

/* ── topbalk ──────────────────────────────────────────────────────────── */
.hs .topbalk{background:var(--h-titel);border-bottom:0;padding:18px var(--h-rand);gap:24px}
.hs .topbalk .merk{display:flex;align-items:center;gap:10px;font-family:var(--h-serif);
  font-size:26px;font-weight:500;letter-spacing:-.01em;text-transform:none;color:var(--h-inkt)}
.hs .topbalk .merk b{display:none}
.hs .topbalk nav{display:flex;align-items:center;gap:28px}
.hs .topbalk nav a.h-menulink{font-family:var(--h-sans);font-size:16px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--h-inkt);text-decoration:none}
.hs .topbalk nav a.h-menulink:hover{color:var(--h-rood)}
.hs .topbalk :focus-visible{outline-color:var(--h-rood)}
@media(max-width:900px){
  .hs .topbalk nav a.h-menulink{display:none}
  .hs .topbalk .merk{font-size:22px}
}

/* ── voet ─────────────────────────────────────────────────────────────── */
.hs #colofon{background:var(--h-nacht);color:var(--h-maan);padding:72px var(--h-rand) 36px;text-align:left;
  font-family:var(--h-serif);letter-spacing:0;text-transform:none}
.h-voet{max-width:var(--h-maat);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);gap:40px}
.h-voetmerk{display:flex;flex-direction:column;gap:14px}
.h-voetlogo{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--h-serif);
  font-size:24px;font-weight:500;color:#FBF8F1}
.h-voetregel{margin:0;font-style:italic;font-size:17px;line-height:1.5;max-width:280px}
.h-voetkolom{display:flex;flex-direction:column;gap:10px;font-family:var(--h-sans);font-size:15px}
.h-voetkolom p{margin:0;font-size:14px;line-height:1.6}
.h-voetkop{font-weight:600;color:#FBF8F1;margin-bottom:4px!important}
.hs #colofon a{color:var(--h-maan);text-decoration:none;font-family:var(--h-sans);font-size:15px}
.hs #colofon a:hover{color:var(--h-goudl)}
.hs #colofon :focus-visible{outline-color:var(--h-goudl)}
.h-voetonder{max-width:var(--h-maat);margin:48px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;font-family:var(--h-sans);font-size:13px;line-height:1.5}
.h-voetonder p{margin:0}
@media(max-width:820px){
  .hs #colofon{padding:44px var(--h-rand) 32px}
  .h-voet{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}
  .h-voetmerk,.h-voetkolom:last-child{grid-column:1 / -1}
  .h-voetonder{flex-direction:column;margin-top:32px}
}

/* ── cookievraag en kaartje: zelfde letters als de pagina ─────────────── */
.hs .cookievraag{font-family:var(--h-serif);background:var(--h-titel);border-top:1px solid var(--h-goud)}
.hs .cookievraag .eyebrow{font-family:var(--h-sans);font-size:15px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--h-inkt)}
.hs .cookievraag .knop{font-family:var(--h-sans);text-transform:none;letter-spacing:0;
  font-size:15px;font-weight:600;border-radius:12px}
.hs .kaartje-melding-kop{font-family:var(--h-serif);font-weight:500}
.hs .kaartje-melding .knop{font-family:var(--h-sans);text-transform:none;letter-spacing:0;
  font-size:15px;font-weight:600;border-radius:12px}

/* ══ de andere pagina's ═══════════════════════════════════════════════════
   Alles hieronder geldt niet op de homepage (die zet het in home.css). */

/* Het vel: geen perkament op linnen meer, maar een witte kaart op papier —
   dezelfde als het bestelformulier op de homepage. */
.hs:not(.home) .sectie:not(#boek){padding:clamp(40px,6vw,80px) var(--h-rand)}
.hs:not(.home) .vel:not(#boek *){background:var(--h-wit);border:1px solid var(--h-lijn);border-radius:18px;
  box-shadow:0 18px 50px rgba(24,32,49,.06);padding:clamp(24px,4.4vw,48px)}
.hs:not(.home) .vel:not(#boek *)::after{display:none}

.hs:not(.home) :is(.sectie,.doc) :is(h1,h2):not(#boek *,.kaft *,.bedankt-kaft *){font-family:var(--h-serif);font-weight:500;
  letter-spacing:-.015em;line-height:1.1;color:var(--h-inkt)}
.hs:not(.home) .sectie h2 .accent{font-weight:500;color:var(--h-rood)}
.hs:not(.home) .sectie .lead{font-weight:400;color:var(--h-mat)}

/* Knoppen: nachtblauw met ronde hoeken, zoals op de homepage. Niet in #boek:
   de bladerbalk van de voorproef bewaakt meet-boekvel.mjs tot op de pixel. */
.hs:not(.home) .knop:not(#boek *){background:var(--h-nacht);color:#FBF8F1;font-family:var(--h-sans);font-size:16px;
  font-weight:600;letter-spacing:0;text-transform:none;border-radius:12px;padding:15px 26px;line-height:1.2}
.hs:not(.home) .knop:hover:not(#boek *){background:#26314A}
.hs:not(.home) .knop.klein:not(#boek *){padding:11px 20px;font-size:15px}
.hs:not(.home) .knop:is(.blok,.groot):not(#boek *){font-size:17px;padding:18px 26px}
.hs:not(.home) .knop.lijn:not(#boek *){background:transparent;color:var(--h-inkt);box-shadow:inset 0 0 0 1.5px var(--h-inkt)}
.hs:not(.home) .knop.lijn:hover:not(#boek *){background:rgba(24,32,49,.06)}
.hs:not(.home) .knop:disabled:not(#boek *){background:var(--h-lijn);color:var(--h-mat);opacity:1}

/* Wat klein, gespatieerd en in kapitalen stond: nu een gewoon label. */
.hs:not(.home) :is(.eyebrow,.landing-reeks,.doc .datum){font-family:var(--h-sans);
  font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--h-rood)}
.hs:not(.home) :is(.veldgroep label,.bedankt-vragen legend,.wizard-stap .bijdrage > label:not(.bestandsknop)){
  font-family:var(--h-sans);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--h-inkt)}
.hs:not(.home) .veldgroep label small{font-weight:400;letter-spacing:0;color:var(--h-mat)}
.hs:not(.home) .hint{font-family:var(--h-serif);font-size:16px;letter-spacing:0;color:var(--h-mat);line-height:1.5}
.hs:not(.home) .bron:not(#boek *,.kaft *,.bedankt-kaft *){font-family:var(--h-sans);font-size:13.5px;letter-spacing:0;color:var(--h-mat)}
.hs:not(.home) .doc .bedrijfsgegevens li span{font-family:var(--h-sans);font-size:14px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--h-inkt)}
.hs:not(.home) :is(.wizard-spoor li b,.wizard-terug,.wizard-zonder,.start-status-vink,.trustband li,
  .wizard-kaft-stap .gevel-proef figcaption){letter-spacing:0;text-transform:none}
.hs:not(.home) .topbalk nav a:not(.knop):not(.h-menulink){font-family:var(--h-sans);font-size:16px;
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--h-inkt);text-decoration:none}

/* Velden zoals in het bestelformulier op de homepage. */
.hs:not(.home) input:not([type=checkbox]):not([type=radio]):not([type=file]),
.hs:not(.home) select,.hs:not(.home) textarea{min-height:54px;border:1px solid var(--h-lijn);
  border-radius:12px;background:var(--h-wit);padding:12px 16px;font-family:var(--h-serif);font-size:18px;
  color:var(--h-inkt)}
.hs:not(.home) textarea{min-height:110px}
.hs:not(.home) :is(input,select,textarea):focus{outline:2px solid var(--h-rood);outline-offset:0;border-color:var(--h-lijn)}
.hs:not(.home) .suggesties{border-radius:12px;overflow:hidden;border-color:var(--h-lijn);
  box-shadow:0 18px 40px rgba(24,32,49,.16)}
.hs:not(.home) :is(input[type=checkbox],input[type=radio]){accent-color:var(--h-nacht)}
.hs:not(.home) .fout{font-family:var(--h-sans);border-radius:12px}
.hs:not(.home) .doc p,.hs:not(.home) .doc li{font-size:17px;color:var(--h-mat)}
.hs:not(.home) .doc a,.hs:not(.home) .vel a:not(.knop){color:var(--h-inkt)}

/* De wizard na de betaling (bedankt.html): één kaart met ronde hoeken, de
   stappen in leesbare letters in plaats van gespatieerde kapitalen. */
.hs:not(.home) .bedankt-vragen{border-radius:16px;background:var(--h-papier);box-shadow:none}
.hs:not(.home) .bedankt-vragen::after{border-radius:16px;border-color:var(--h-lijn)}
.hs:not(.home) .wizard-kop{background:var(--h-perkament);border-bottom-color:var(--h-lijn)}
.hs:not(.home) .wizard-stand{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--h-mat)}
.hs:not(.home) .wizard-stand span:first-child{color:var(--h-rood)}
.hs:not(.home) .wizard-spoor li b{font-size:13px;font-weight:600}
.hs:not(.home) .wizard-spoor li span{font-size:13px;font-weight:600}
.hs:not(.home) .wizard-spoor li[aria-current="step"] span{background:var(--h-nacht);border-color:var(--h-nacht)}

/* De kaftkeuze, zoals in het bestelformulier op de homepage. */
.hs:not(.home) .kaftkeuze-kaart{border:2px solid var(--h-lijn);border-radius:14px;background:var(--h-wit);box-shadow:none}
.hs:not(.home) .kaftkeuze-kaart strong{font-family:var(--h-sans);font-size:17px;font-weight:600}
.hs:not(.home) .kaftkeuze-kaart small{font-size:15px;color:var(--h-mat)}
.hs:not(.home) .kaftkeuze-radio:checked + .kaftkeuze-kaart{border-color:var(--h-rood);background:var(--h-wit);
  box-shadow:0 10px 26px rgba(166,61,48,.12)}
.hs:not(.home) .kaftkeuze-radio:checked + .kaftkeuze-kaart .kaftkeuze-vink{background:var(--h-rood);border-color:var(--h-rood)}
.hs:not(.home) .kaftkeuze-radio:focus-visible + .kaftkeuze-kaart{outline:2px solid var(--h-rood);outline-offset:3px}

/* De voorproef: de accentregel in hetzelfde rood als op de homepage. De
   bladzijden zelf blijven perkament, zoals in het boek. */
.hs:not(.home) .landing h1 em{color:var(--h-rood)}
.hs:not(.home) .landing-klein{font-family:var(--h-sans);font-size:14px;letter-spacing:0;text-transform:none;color:var(--h-mat)}

/* De strook onder de voorproef: licht, zoals de strook op de homepage. */
.hs:not(.home) .trustband{background:var(--h-papier);border-block:1px solid var(--h-lijn);padding:0 var(--h-rand)}
.hs:not(.home) .trustband ul{max-width:var(--h-maat)}
.hs:not(.home) .trustband li{font-family:var(--h-sans);font-size:15px;letter-spacing:0;text-transform:none;
  color:var(--h-mat);line-height:1.45;padding:22px 24px;border-left-color:var(--h-lijn)}
.hs:not(.home) .trustband li b{font-family:var(--h-serif);font-weight:500;font-size:22px;letter-spacing:0;
  color:var(--h-inkt);line-height:1.2}
@media(max-width:760px){
  .hs:not(.home) .trustband li{padding:16px 14px}
  .hs:not(.home) .trustband li:nth-child(n+3){border-top-color:var(--h-lijn)}
}
.hs:not(.home) .naar-check,.hs:not(.home) .naar-check a{font-family:var(--h-sans);font-size:16px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--h-inkt)}
.hs:not(.home) .naar-check a{border-bottom:0;text-decoration:underline;text-underline-offset:4px}
.hs:not(.home) :is(.wizard-terug,.wizard-zonder){font-family:var(--h-sans);font-size:15px;font-weight:500;color:var(--h-mat)}
.hs:not(.home) :is(.veldgroep,.wizard-stap .bijdrage) label small{font-family:var(--h-sans);font-size:13px;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--h-mat)}