/* ============================================================
   basis.css — madelonsboeken.nl
   De ontwerpbesluiten uit stap A3.2, vastgesteld 20-09-2026.

   ALLE kleuren, maten en letters staan hier. Gebruik nergens
   anders een losse waarde — verwijs altijd naar een variabele.
   ============================================================ */

/* --- Letters ------------------------------------------------
   Richting 1, gekozen door Madelon: Fraunces voor koppen,
   Karla voor lopende tekst. Meegeleverd vanaf onze eigen
   server — nooit van Google laden.
   ----------------------------------------------------------- */
@font-face{
  font-family:'Fraunces';
  src:url('fonts/Fraunces.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('fonts/Karla.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
  /* --- Papier en inkt ------------------------------------- */
  --papier:        #F8F5F1;   /* achtergrond                  */
  --papier-diep:   #EFE9E1;   /* blokken die opvallen         */
  --lijn:          #E0D8CE;   /* scheidingslijnen             */
  --inkt:          #1F1B18;   /* lopende tekst, koppen        */
  /* 24-09-2026 allebei een tikje donkerder gemaakt, omdat de
     boekwassing van 15% naar 26% ging. Oud: #5A524B en #8A8078.
     Met de oude waarden zakte bijtekst op de donkerste wassing
     (kerst) naar 4,1:1 en haalde --inkt-licht zelfs op gewoon
     papier maar 3,6:1 — allebei onder de norm van 4,5:1. */
  --inkt-zacht:    #544D46;   /* bijtekst, ook op een wassing */
  --inkt-licht:    #6E655D;   /* bijschriften, op papier en papier-diep */
  --wit:           #FFFFFF;

  /* --- Accent ---------------------------------------------
     Uitgesprokener dan het eerste voorstel, op verzoek van
     Madelon. Afgeleid uit het roze van De moeite waard.
     Op papier 4,9:1 · wit erop 5,3:1 — beide boven de norm.
     -------------------------------------------------------- */
  --accent:        #B33D65;
  --accent-diep:   #8E2F50;   /* hover, ingedrukt             */

  /* --- De zes boekkleuren ---------------------------------
     Elk boek brengt zijn eigen kleur mee, rechtstreeks uit
     zijn omslag. `-diep` is de leesbare variant voor tekst.

     24-09-2026: vier van de zes `-diep`-waarden zijn een slag
     donkerder gezet. Bij de sterkere wassing van 26% haalden
     ze anders nog maar 3,8 à 4,0:1 op hun eigen wassing, en
     ze worden ook voor kleine bijschriften gebruikt.
     Oud: moeite #A83A5F · poging #1F6E9E · operatie #A93842 ·
          ogen #8E4A4E
     -------------------------------------------------------- */
  /* 28-09-2026 — de -diep-waarden uit elkaar getrokken.
     Aanleiding: de drie lezersbriefjes onder elk boek staan in de
     kleur van dat boek, maar ogen (#864649), operatie (#96323B) en
     moeite (#993556) waren zo dicht bij elkaar dat vijf boeken als
     één kleur lazen. De oorzaak zat in ronde 1: alle -diep-tinten
     zijn toen donkerder gemaakt om wit erop leesbaar te houden, en
     daardoor naar elkaar toe gekropen.
     Elke kleur houdt de toon van zijn eigen omslag en krijgt een
     eigen plek op de licht/donker-as. Poging (blauw) en kerst
     (donker bordeaux) stonden al apart en blijven zoals ze waren.
     Oud: onderzoeken #8F4E08 · moeite #993556 · operatie #96323B ·
          ogen #864649 */
  --onderzoeken:      #E58111;  --onderzoeken-diep: #9D560B;
  --moeite:           #CE4B77;  --moeite-diep:      #B8366B;
  --poging:           #439CD6;  --poging-diep:      #1C648F;
  --operatie:         #A93842;  --operatie-diep:    #B32836;
  --ogen:             #A35E62;  --ogen-diep:        #A54870;
  --kerst:            #5E2022;  --kerst-diep:       #5E2022;

  /* --- En een derde variant: kleur als TEKST ----------------
     `-diep` doet één ding: een vlak vullen waar wit overheen
     gaat — een knop, een merkje, een briefje. Daar wil je hem
     uitgesproken hebben, want daaraan herkent de lezer welk
     boek hij voor zich heeft.

     Kleur als tekst is iets anders. Dan staat een dunne letter
     op een lichte boekwassing, en dan moet de kleur juist
     dónker zijn. Met één token voor allebei kan het niet: maak
     je hem uitgesproken genoeg voor het briefje, dan zakt de
     knoptekst naar 3,7:1.

     Dit zijn de waarden die `-diep` tot 28-09-2026 had. Ze
     haalden op elke wassing 4,5:1 en doen dat nog steeds.
     -------------------------------------------------------- */
  /* --- En de twee andere kleuren van hetzelfde omslag --------
     Onder elk boek staan drie reacties van lezers. Die hadden
     alle drie de kleur van het boek, en dan lees je ze als één
     blok in plaats van als drie losse briefjes.

     Kaart 1 houdt de boekkleur — daaraan zie je bij welk boek
     je bent. Kaart 2 en 3 krijgen twee ándere kleuren die
     wérkelijk op datzelfde omslag staan: bij Operatie liefde
     het turkoois van het uitgeverslogo en het blauw van de
     ziekenhuisgang, bij Door jouw ogen de lucht en het haar.

     Ze zijn bemonsterd uit de omslagbestanden zelf, per
     kleurtoon gegroepeerd, en daarna allemaal op dezelfde
     leesbaarheid gebracht: wit erop haalt 4,75:1. Kleuren uit
     een donkere hoek van het omslag zijn dus opgehaald in
     plaats van verder verdiept — anders worden ze modder.
     Wat te dicht bij de boekkleur zelf lag, viel af; dat staat
     al op kaart 1.
     -------------------------------------------------------- */
  --onderzoeken-kaart2: #825FC7;  --onderzoeken-kaart3: #197D96;
  --moeite-kaart2:      #197D96;  --moeite-kaart3:      #8F59C5;
  --poging-kaart2:      #A4641B;  --poging-kaart3:      #DB2553;
  --operatie-kaart2:    #2C7E7E;  --operatie-kaart3:    #4A71C0;
  --ogen-kaart2:        #377A9B;  --ogen-kaart3:        #9C6733;
  --kerst-kaart2:       #9A6836;  --kerst-kaart3:       #6767CA;

  --onderzoeken-tekst: #8F4E08;
  --moeite-tekst:      #993556;
  --poging-tekst:      #1C648F;
  --operatie-tekst:    #96323B;
  --ogen-tekst:        #864649;
  --kerst-tekst:       #5E2022;

  /* Per sectie gezet met [data-kleur]; zie onderaan. */
  --boek:        var(--accent);
  --boek-diep:   var(--accent-diep);
  --boek-tekst:  var(--accent-diep);
  --boek-kaart2: var(--accent-diep);
  --boek-kaart3: var(--accent-diep);
  --boek-wash:   color-mix(in srgb, var(--boek) 26%, var(--papier));
  --boek-rand:   color-mix(in srgb, var(--boek) 55%, var(--papier));
  /* Voor een knop die al op --boek-diep staat: nog een slag
     dieper, maar wel in dezelfde kleur. */
  --boek-hover:  color-mix(in srgb, var(--boek-diep) 78%, var(--inkt));

  /* --- Sterren --------------------------------------------- */
  --ster:      #E9A81C;   /* goud, zoals op Hebban */
  --ster-leeg: #DDD5CB;

  /* --- Ruimte: één raster van 8 px ------------------------- */
  --r1:8px; --r2:16px; --r3:24px; --r4:32px;
  --r5:48px; --r6:64px; --r7:96px; --r8:128px;

  /* --- Tekstgrootte: 18 px basis, schaal 1,25 -------------- */
  --t--1: .80rem;   /* bijschrift          */
  --t-0:  1rem;     /* lopende tekst 18 px */
  --t-1:  1.25rem;
  --t-2:  clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  --t-3:  clamp(1.6rem,  1.2rem + 2.2vw, 2.4rem);
  --t-4:  clamp(2.1rem,  1.4rem + 3.6vw, 3.4rem);
  --t-5:  clamp(2.6rem,  1.5rem + 5.4vw, 5rem);

  /* --- Vorm ------------------------------------------------ */
  --rond: 4px;
  --schaduw: 0 12px 34px -14px rgba(31,27,24,.45);
  --rand: 1px solid var(--lijn);

  /* --- Maten ----------------------------------------------- */
  --breed: 1180px;    /* maximale paginabreedte */
  --lees: 66ch;       /* maximale regellengte   */
  --duim: 44px;       /* minimaal aanraakvlak   */
}

/* ============================================================
   Grondslag
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

/* 112,5% van 16 px = 18 px. Zo is 1rem overal 18 px en klopt de
   hele schaal hierboven — en blijft de tekst meegroeien als
   iemand zijn browser groter heeft gezet. */
html{
  font-size:112.5%;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--papier);
  /* `clip` in plaats van `hidden`: hidden maakt van de pagina een
     scrollvenster, en daardoor blijft de kop niet meer bovenaan
     plakken tijdens het scrollen. `clip` knipt wel af maar laat
     position:sticky met rust. */
  overflow-x:clip;
}
@supports not (overflow-x: clip){ html{overflow-x:hidden} }
@media (min-width:900px){ html{font-size:125%} }   /* 20 px */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papier);
  color:var(--inkt);
  font-family:'Karla',system-ui,-apple-system,sans-serif;
  font-weight:400;
  line-height:1.65;
}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-weight:400;
  font-variation-settings:'SOFT' 30,'WONK' 1;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 var(--r2);
  text-wrap:balance;
}
h1{font-size:var(--t-5)}
h2{font-size:var(--t-4)}
h3{font-size:var(--t-2)}
h4{font-size:var(--t-1);font-weight:600}

p{margin:0 0 var(--r2);max-width:var(--lees)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-diep)}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ============================================================
   Bouwstenen
   ============================================================ */
.omhulsel{width:100%;max-width:var(--breed);margin-inline:auto;padding-inline:var(--r3)}
@media (min-width:700px){ .omhulsel{padding-inline:var(--r5)} }

.opschrift{
  font-size:var(--t--1);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--inkt-licht);
  margin:0 0 var(--r2);
}

.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--r1);
  min-height:var(--duim);padding:var(--r1) var(--r3);
  font:600 var(--t-0)/1 'Karla',sans-serif;
  border:0;border-radius:var(--rond);cursor:pointer;
  /* --boek-diep en niet --boek: wit op het oranje van Het onderzoeken
     waard haalt maar 2,8:1, op het blauw van Een poging waard 3,0:1.
     Op de diepe variant haalt elke knop ruim 6:1. */
  background:var(--boek-diep);color:var(--wit);text-decoration:none;
  transition:background .18s ease,transform .18s ease;
}
.knop:hover{background:var(--boek-hover);color:var(--wit);transform:translateY(-1px)}
.knop--tweede{
  /* Tekst, geen vlak: dus --boek-tekst. Met --boek-diep haalde deze knop
     op de boekwassing nog maar 3,7:1. */
  background:transparent;color:var(--boek-tekst);
  box-shadow:inset 0 0 0 1.5px var(--boek-rand);
}
.knop--tweede:hover{background:var(--boek-wash);color:var(--boek-tekst)}

/* Formulier ------------------------------------------------- */
.veld{display:block;margin-bottom:var(--r2)}
.veld > span{display:block;font:600 var(--t--1)/1.4 'Karla',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:var(--inkt-zacht);margin-bottom:var(--r1)}
.veld input{
  width:100%;min-height:var(--duim);
  padding:var(--r1) var(--r2);
  font:400 16px/1.5 'Karla',sans-serif;   /* nooit onder 16 px: iOS zoomt dan in */
  color:var(--inkt);background:var(--wit);
  border:1.5px solid var(--lijn);border-radius:var(--rond);
}
@media (min-width:900px){ .veld input{font-size:18px} }
.veld input:focus{border-color:var(--boek);outline:none;box-shadow:0 0 0 3px var(--boek-wash)}
.fout{display:block;margin-top:var(--r1);font-size:var(--t--1);font-weight:600;color:#9B2C2C}

/* ============================================================
   De zes boekkleuren aanzetten
   Gebruik: <section data-kleur="moeite"> … </section>
   ============================================================ */
[data-kleur="onderzoeken"]{--boek:var(--onderzoeken);--boek-diep:var(--onderzoeken-diep);--boek-tekst:var(--onderzoeken-tekst);--boek-kaart2:var(--onderzoeken-kaart2);--boek-kaart3:var(--onderzoeken-kaart3)}
[data-kleur="moeite"]     {--boek:var(--moeite);     --boek-diep:var(--moeite-diep);     --boek-tekst:var(--moeite-tekst);--boek-kaart2:var(--moeite-kaart2);--boek-kaart3:var(--moeite-kaart3)}
[data-kleur="poging"]     {--boek:var(--poging);     --boek-diep:var(--poging-diep);     --boek-tekst:var(--poging-tekst);--boek-kaart2:var(--poging-kaart2);--boek-kaart3:var(--poging-kaart3)}
[data-kleur="operatie"]   {--boek:var(--operatie);   --boek-diep:var(--operatie-diep);   --boek-tekst:var(--operatie-tekst);--boek-kaart2:var(--operatie-kaart2);--boek-kaart3:var(--operatie-kaart3)}
[data-kleur="ogen"]       {--boek:var(--ogen);       --boek-diep:var(--ogen-diep);       --boek-tekst:var(--ogen-tekst);--boek-kaart2:var(--ogen-kaart2);--boek-kaart3:var(--ogen-kaart3)}
[data-kleur="kerst"]      {--boek:var(--kerst);      --boek-diep:var(--kerst-diep);      --boek-tekst:var(--kerst-tekst);--boek-kaart2:var(--kerst-kaart2);--boek-kaart3:var(--kerst-kaart3)}
/* 15% in plaats van 7%: bij 7% leken de zes secties te veel op elkaar
   en verdween het idee dat elk boek zijn eigen kleur heeft.
   24-09-2026 naar 26% en 55%, op verzoek van Madelon: de kleuren uit de
   omslagen mochten duidelijker terugkomen. 26% is de bovengrens die de
   contrastcontrole in bouw.py haalt — bij 28% zakt bijtekst op de
   kerstkleur onder 4,5:1. */
[data-kleur]{
  --boek-wash:color-mix(in srgb, var(--boek) 26%, var(--papier));
  --boek-rand:color-mix(in srgb, var(--boek) 55%, var(--papier));
  --boek-hover:color-mix(in srgb, var(--boek-diep) 78%, var(--inkt));
}

/* Oudere browsers zonder color-mix: dan gewoon papier. */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  [data-kleur]{--boek-wash:var(--papier-diep);--boek-rand:var(--lijn)}
}

/* ============================================================
   Toegankelijkheid
   ============================================================ */
.alleen-voorlezer{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.overslaan{
  position:absolute;left:var(--r2);top:-100px;z-index:100;
  background:var(--inkt);color:var(--papier);
  padding:var(--r1) var(--r2);border-radius:var(--rond);
  text-decoration:none;transition:top .15s ease;
}
.overslaan:focus{top:var(--r2);color:var(--papier)}