/* hw-boek.css  [BOEK 2026-11-13]
   Opmaak van de pagina's over het boek "Iemand betaalt altijd" (/books/... en /en/books/...).
   Geladen door /_inc/hw-boek.php, alleen op die pagina's. Hoort bij /assets/hw-boek.js.

   Het ontwerp is de wereld van de omslag: een blauw vlak, de titel in geel en een lange kassabon. De kleuren zijn die van
   de omslag en blijven zoals ze zijn (besluit Robert): blauw #0002ea en geel #ecfc00.
   Lettertypen: de tekst staat in de lettertypen van de site (Manrope en Fraunces). Alleen de grote koppen in geel en op de
   bon gebruiken Archivo in de smalle, zware snit van de omslag. De afgedrukte regels van de bon gebruiken het
   systeemlettertype met vaste breedte, dus zonder extra lettertypebestand.
   Beweging: secties en blokken krijgen de gewone sitebeweging (hw-magic.js en holdwise-polish.php). Daarbovenop draait het
   boek mee met de aanwijzer en wordt de bon geprint zodra hij in beeld komt (hw-boek.js). Alles staat stil bij
   "minder beweging", en zonder JavaScript is alle inhoud zichtbaar.
   Alle klassen beginnen met hwb-, zodat niets botst met holdwise-shared.css. */

/* Zolang Archivo laadt, staat de kop in een vet systeemlettertype dat even breed is gemaakt (size-adjust).
   Zo blijft elke regel op zijn plek en verspringt er niets als Archivo binnen is. */
@font-face{font-family:"HWB Kop Reserve";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Roboto Bold"),local("Roboto-Bold"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("DejaVu Sans Bold"),local("DejaVuSans-Bold");font-weight:400 900;size-adjust:70%}

/* De pagina zelf. De korrel over de hele site (body::before) staat hier uit: de kleuren van de omslag blijven exact.
   body krijgt overflow-x:clip in plaats van hidden. Met hidden is body een eigen schuifvak en blijft niets plakken
   (position:sticky); de bestelkaart naast de bon moet wel mee schuiven. De kopregel van de site houdt het gedrag dat hij
   op de rest van de site nu heeft en schuift mee uit beeld. */
body.hwb-pagina{overflow-x:clip}
body.hwb-pagina::before{display:none}
.hwb-pagina .hdr{position:relative}

.hwb{--hwb-blauw:#0002ea;--hwb-blauw-diep:#00018f;--hwb-geel:#ecfc00;--hwb-wit:#fff;--hwb-papier:#f6f5f0;--hwb-inkt:#14151a;--hwb-thermisch:#50535c;--hwb-lijn:rgba(20,21,26,.22);
  --hwb-smal:"Archivo","HWB Kop Reserve",Impact,"Arial Narrow",sans-serif;
  --hwb-sans:"Manrope",system-ui,-apple-system,sans-serif;
  --hwb-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --hwb-bon:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  display:block;background:var(--hwb-blauw);color:var(--hwb-wit);font-family:var(--hwb-sans);font-size:17px;line-height:1.5;overflow-x:clip;color-scheme:light}
.hwb a,.hwb a:hover{color:inherit}
.hwb :focus-visible{outline:3px solid var(--hwb-geel);outline-offset:3px}
.hwb .hwb-bon :focus-visible{outline-color:var(--hwb-blauw)}
.hwb-binnen{max-width:1180px;margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}

/* ---------- kop: kruimelpad, titel of vraag, kort antwoord, knoppen en het boek ---------- */
.hwb-kop{padding-block:clamp(26px,4vw,56px) clamp(48px,7vw,96px)}
.hwb-kop-raster{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:center}
.hwb-kop-tekst{container-type:inline-size;min-width:0}
.hwb-kruimel{margin:0 0 clamp(20px,2.6vw,34px);font-family:var(--hwb-bon);font-size:13px;line-height:1.6}
.hwb-kruimel a{text-decoration:underline;text-underline-offset:3px}
.hwb-kruimel i{font-style:normal;opacity:.7;padding-inline:.5em}
.hwb-auteur{margin:0 0 14px;font-weight:600;font-size:clamp(14px,1.3vw,17px);letter-spacing:.22em;text-transform:uppercase}
.hwb .hwb-titel,.hwb .hwb-vraagkop{margin:0;color:var(--hwb-geel);font-family:var(--hwb-smal);font-stretch:62%;font-weight:900;font-variation-settings:normal;text-transform:uppercase}
.hwb .hwb-titel{font-size:clamp(64px,12vw,186px);font-size:clamp(64px,28cqi,190px);line-height:.84;letter-spacing:-.012em}
.hwb-titel span{display:block}
.hwb .hwb-vraagkop{font-size:clamp(46px,8vw,124px);font-size:clamp(46px,16.5cqi,128px);line-height:.88;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
.hwb .hwb-vraagkop.hwb-ruim{font-size:clamp(40px,6.6vw,100px);font-size:clamp(40px,12.5cqi,100px)}
.hwb .hwb-vraagkop.hwb-lang{font-size:clamp(30px,5.4vw,112px);font-size:clamp(30px,9.5cqi,112px)}
.hwb-onder{margin:clamp(18px,2.4vw,30px) 0 0;max-width:16em;font-weight:600;font-size:clamp(22px,2.7vw,36px);line-height:1.14;text-wrap:balance}
.hwb-kort{margin-top:clamp(20px,2.6vw,32px);max-width:27em}
.hwb-kort p{margin:0;font-weight:600;font-size:clamp(18px,1.9vw,23px);line-height:1.36}
.hwb-kort p + p{margin-top:.8em}
.hwb-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,38px)}
.hwb .hwb-knop{display:inline-flex;flex-direction:column;gap:2px;padding:13px 20px 12px;border:2px solid var(--hwb-wit);color:var(--hwb-wit);text-decoration:none;font-family:var(--hwb-sans);font-weight:700;font-size:16px;line-height:1.2}
.hwb-knop small{font-family:var(--hwb-bon);font-weight:500;font-size:13px;opacity:.9}
.hwb .hwb-knop:hover{background:var(--hwb-wit);color:var(--hwb-blauw)}
.hwb .hwb-knop.hwb-eerst{background:var(--hwb-geel);border-color:var(--hwb-geel);color:var(--hwb-blauw)}
.hwb .hwb-knop.hwb-eerst:hover{background:var(--hwb-wit);border-color:var(--hwb-wit)}
.hwb-klein{margin:16px 0 0;font-family:var(--hwb-bon);font-size:13.5px;line-height:1.55;opacity:.92}
.hwb-klein a{text-underline-offset:3px}

/* ---------- het boek in drie dimensies ---------- */
.hwb-toneel{perspective:1700px;display:grid;place-items:center;padding-block:10px 34px}
.hwb-boek-in{transform-style:preserve-3d;animation:hwb-boek-in 1.3s cubic-bezier(.2,.7,.1,1) both}
.hwb-boek{--b:min(310px,60vw);--h:calc(var(--b) * 1.5);--d:calc(var(--b) * .1);display:block;position:relative;width:var(--b);height:var(--h);transform-style:preserve-3d;transform:rotateX(var(--rx,5deg)) rotateY(var(--ry,27deg));transition:transform .3s ease-out}
.hwb-vraag .hwb-boek{--b:min(250px,50vw)}
.hwb-boek > *{position:absolute}
.hwb-boek .hwb-voor{inset:0;background:var(--hwb-blauw);transform:translateZ(calc(var(--d) / 2));backface-visibility:hidden}
.hwb-boek .hwb-voor img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.hwb-boek .hwb-voor::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,40,.28) 0,rgba(255,255,255,.13) 3.5%,rgba(255,255,255,0) 9%,rgba(255,255,255,0) 70%,rgba(255,255,255,.1) 100%)}
.hwb-boek .hwb-achter{inset:0;background:var(--hwb-blauw-diep);transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.hwb-boek .hwb-rug{top:0;left:0;width:var(--d);height:100%;background:linear-gradient(90deg,#0001b4,#0002d6);transform:translateX(calc(var(--d) / -2)) rotateY(-90deg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hwb-boek .hwb-rug span{font-family:var(--hwb-smal);writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;color:var(--hwb-geel);font-stretch:70%;font-weight:900;text-transform:uppercase;font-size:calc(var(--d) * .5);letter-spacing:.02em}
.hwb-boek .hwb-snede{top:.8%;right:0;width:var(--d);height:98.4%;transform:translateX(calc(var(--d) / 2)) rotateY(90deg);background:repeating-linear-gradient(90deg,#f1eee4 0 1px,#d9d5c8 1px 2px)}
.hwb-boek .hwb-boven,.hwb-boek .hwb-onderkant{left:.6%;width:98.8%;height:var(--d);background:repeating-linear-gradient(0deg,#f1eee4 0 1px,#d9d5c8 1px 2px)}
.hwb-boek .hwb-boven{top:0;transform:translateY(calc(var(--d) / -2)) rotateX(90deg)}
.hwb-boek .hwb-onderkant{bottom:0;transform:translateY(calc(var(--d) / 2)) rotateX(-90deg)}
.hwb-boek .hwb-schaduw{left:4%;right:-14%;bottom:-7%;height:9%;background:radial-gradient(closest-side,rgba(0,0,50,.55),rgba(0,0,50,0));transform:translateZ(calc(var(--d) * -1.2)) rotateX(90deg) scale(1.1);filter:blur(10px)}
@keyframes hwb-boek-in{from{transform:rotateY(-58deg) translateY(26px)}to{transform:none}}

/* ---------- drie momenten uit het boek ---------- */
.hwb-momenten{padding-block:clamp(20px,4vw,48px) clamp(56px,8vw,110px);border-top:2px solid rgba(255,255,255,.28)}
.hwb-moment{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,4vw,56px);align-items:center;padding-block:clamp(18px,3vw,34px);border-bottom:2px solid rgba(255,255,255,.28)}
.hwb-jaar{margin:0;color:var(--hwb-geel);font-family:var(--hwb-smal);font-stretch:62%;font-weight:900;font-size:clamp(96px,17vw,230px);line-height:.8;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.hwb-verhaal{margin:0;max-width:30em;font-family:var(--hwb-serif);font-weight:400;font-size:clamp(19px,2vw,26px);line-height:1.42}
.hwb-drie{padding-top:clamp(40px,6vw,80px)}
.hwb-drie .hwb-aanloop{margin:0 0 clamp(14px,2vw,24px);font-weight:600;font-size:clamp(20px,2.2vw,28px)}
.hwb-drie ol{list-style:none;margin:0;padding:0;color:var(--hwb-geel);font-family:var(--hwb-smal);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(44px,8.6vw,128px);line-height:.9;letter-spacing:-.01em}
.hwb-drie li{text-wrap:balance}
.hwb-drie li + li{margin-top:.12em}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @media (min-width:901px){
      .hwb-jaar{animation:hwb-schuif linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    }
    @keyframes hwb-schuif{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
  }
}
/* De gouden lijn van de site (hw-goudkader) tekent zich in deze wereld in het geel van de omslag. */
.hwb .hw-goudkader::after{background:var(--hwb-geel)}
.hwb .hw-goudkader:hover{box-shadow:none;border-color:var(--hwb-geel)}

/* ---------- de bon ---------- */
.hwb-kassa{padding-bottom:clamp(70px,9vw,130px)}
.hwb-vraag .hwb-kassa{padding-top:4px}
.hwb-kassa-raster{display:grid;grid-template-columns:minmax(0,660px) minmax(0,1fr);gap:clamp(28px,6vw,88px);align-items:start}
.hwb-bonhouder{position:relative;min-width:0;clip-path:inset(0 -120px -260px -120px)}
.hwb-gleuf{position:relative;z-index:2;height:18px;margin-inline:-14px;border-radius:9px;background:linear-gradient(#00004f,#000070);box-shadow:inset 0 3px 6px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.2)}
.hwb-bon{position:relative;margin-top:-8px;background:linear-gradient(90deg,#ecebe5 0,var(--hwb-papier) 3%,var(--hwb-papier) 97%,#ecebe5 100%);color:var(--hwb-inkt);padding:44px clamp(20px,4.6vw,46px) 40px;box-shadow:0 34px 80px rgba(0,0,60,.5)}
.hwb-bon::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;background:linear-gradient(135deg,var(--hwb-papier) 25%,transparent 25%) 0 0 / 20px 20px repeat-x,linear-gradient(225deg,var(--hwb-papier) 25%,transparent 25%) 0 0 / 20px 20px repeat-x}
.hwb-bon.hwb-print{animation:hwb-print 1.7s steps(17,end) both}
@keyframes hwb-print{from{transform:translateY(-170px)}to{transform:none}}

.hwb-bonkop{text-align:center;font-family:var(--hwb-bon);text-transform:uppercase}
.hwb-bonkop strong{display:block;font-family:var(--hwb-smal);font-stretch:62%;font-weight:900;font-size:clamp(34px,5vw,46px);line-height:.9;letter-spacing:0;text-wrap:balance}
.hwb-bonkop span{display:block;margin-top:10px;font-size:12.5px;letter-spacing:.08em;color:var(--hwb-thermisch)}
.hwb-deel{margin-top:30px;padding-top:28px;border-top:2px dashed var(--hwb-lijn)}
.hwb-deel > h2{margin:0 0 16px;font-family:var(--hwb-bon);font-weight:600;font-size:13.5px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--hwb-thermisch)}
.hwb-bon p{margin:0}
.hwb-bon p + p{margin-top:.9em}
.hwb-bon a{text-underline-offset:3px}
/* holdwise-shared.css haalt de streep onder elke link weg; tekstlinks in deze wereld krijgen hem terug */
.hwb-bon a:not(.hwb-knop),.hwb-slot a,.hwb-klein a{text-decoration:underline}

/* leestekst op de bon: koppen in Fraunces, tekst in Manrope, zoals in de kennisbank */
.hwb-deel.hwb-stuk > h2{margin:0 0 12px;font-family:var(--hwb-serif);font-weight:500;font-size:clamp(22px,2.6vw,26px);line-height:1.2;letter-spacing:-.01em;text-transform:none;color:var(--hwb-inkt)}
.hwb-stuk p,.hwb-boekblok p{font-size:17px;line-height:1.7;max-width:36em}
.hwb-stuk p + p,.hwb-boekblok p + p{margin-top:1em}
.hwb-flap{font-family:var(--hwb-serif);font-size:18px;line-height:1.58}
.hwb-flap .hwb-groot{font-family:var(--hwb-smal);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(34px,5.2vw,50px);line-height:.92;margin-bottom:18px;text-wrap:balance}

.hwb-regels{list-style:none;margin:0;padding:0;font-family:var(--hwb-bon);font-size:15px;line-height:1.45}
.hwb-regels li{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:8px;padding-block:5px}
.hwb-regels .hwb-n{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.hwb-regels.hwb-tijd li{grid-template-columns:5.8em minmax(0,1fr)}
.hwb-regels.hwb-tijd .hwb-n{text-align:left}

.hwb-klap details{border-bottom:1px solid var(--hwb-lijn)}
.hwb-klap details:first-of-type{border-top:1px solid var(--hwb-lijn)}
.hwb-klap summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding-block:12px;font-weight:700;font-size:17px;line-height:1.3}
.hwb-klap summary::-webkit-details-marker{display:none}
.hwb-klap summary::after{content:"+";font-family:var(--hwb-bon);font-weight:500;font-size:20px;line-height:1}
.hwb-klap details[open] summary::after{content:"\2212"}
.hwb-klap ol{list-style:none;margin:0;padding:0 0 14px;font-family:var(--hwb-bon);font-size:14.5px;line-height:1.4}
.hwb-klap ol li{display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:8px;padding-block:4px}
.hwb-klap ol .hwb-n{text-align:right;color:var(--hwb-thermisch);font-variant-numeric:tabular-nums}
.hwb-klap .hwb-los{font-family:var(--hwb-bon);font-size:14.5px;padding-block:10px}
.hwb-klap .hwb-los + details{border-top:1px solid var(--hwb-lijn)}
.hwb-klap .hwb-antwoord{font-size:16.5px;line-height:1.65;padding-bottom:16px;max-width:36em}

.hwb-fragment h3{margin:0 0 6px;font-family:var(--hwb-serif);font-weight:500;font-size:25px;line-height:1.15}
.hwb-fragment .hwb-motto{font-family:var(--hwb-serif);font-style:italic;font-weight:300;font-size:18px;line-height:1.5;margin-bottom:18px}
.hwb-fragment .hwb-tekst{font-family:var(--hwb-serif);font-size:18px;line-height:1.62}

.hwb-gegevens{margin:0;display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:6px 10px;font-family:var(--hwb-bon);font-size:14.5px;line-height:1.4}
.hwb-gegevens dt{color:var(--hwb-thermisch)}
.hwb-gegevens dd{margin:0}
.hwb-streepjes{display:block;width:min(250px,100%);margin:26px auto 0}
.hwb-streepjes text{font-family:var(--hwb-bon);font-size:9.5px;fill:var(--hwb-inkt)}

.hwb-totaal{font-family:var(--hwb-bon)}
.hwb-rij{display:flex;align-items:baseline;gap:8px;font-size:18px;font-weight:600;padding-block:4px}
.hwb-som .hwb-rij{font-size:16px}
.hwb-rij i{flex:1;border-bottom:2px dotted var(--hwb-inkt);transform:translateY(-4px);min-width:16px}
.hwb-rij b{font-variant-numeric:tabular-nums;white-space:nowrap}
.hwb-som .hwb-noot{margin-top:14px;font-size:14px;line-height:1.55;color:var(--hwb-thermisch)}
.hwb-bon .hwb-knoppen{margin-top:20px}
.hwb .hwb-bon .hwb-knop{border-color:var(--hwb-inkt);color:var(--hwb-inkt)}
.hwb .hwb-bon .hwb-knop:hover{background:var(--hwb-inkt);color:var(--hwb-papier)}
.hwb .hwb-bon .hwb-knop.hwb-eerst{background:var(--hwb-blauw);border-color:var(--hwb-blauw);color:var(--hwb-wit)}
.hwb .hwb-bon .hwb-knop.hwb-eerst:hover{background:var(--hwb-inkt);border-color:var(--hwb-inkt);color:var(--hwb-papier)}
.hwb-totaal .hwb-winkel{margin-top:16px;font-size:13.5px;line-height:1.55;color:var(--hwb-thermisch)}

.hwb-bronnen{list-style:none;margin:0;padding:0;font-family:var(--hwb-bon);font-size:13px;line-height:1.55}
.hwb-bronnen li + li{margin-top:12px}
.hwb-bronnen a{overflow-wrap:anywhere}
.hwb-bon .hwb-stand{margin-top:16px;font-family:var(--hwb-bon);font-size:13px;line-height:1.55;color:var(--hwb-thermisch)}
.hwb-andere{list-style:none;margin:0;padding:0;font-weight:700;font-size:17px;line-height:1.3}
.hwb-andere li{padding-block:11px;border-bottom:1px solid var(--hwb-lijn)}
.hwb-andere li:first-child{border-top:1px solid var(--hwb-lijn)}
.hwb-bon .hwb-andere a{text-decoration:none;display:block}
.hwb-andere a:hover b{text-decoration:underline;text-underline-offset:3px}
.hwb-andere b{display:block;font-weight:700}
.hwb-andere span{display:block;margin-top:4px;font-weight:400;font-size:15px;line-height:1.55;color:var(--hwb-thermisch)}
.hwb-boekblok .hwb-meer{margin-top:18px;font-family:var(--hwb-bon);font-size:14px}
.hwb-bon .hwb-dank{margin-top:30px;padding-top:28px;border-top:2px dashed var(--hwb-lijn);text-align:center;font-family:var(--hwb-smal);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(28px,4.4vw,40px);line-height:.95;text-wrap:balance}

/* ---------- bestelkaart die mee schuift ---------- */
.hwb-kaart{position:sticky;top:calc(24px + env(safe-area-inset-top,0px));display:grid;gap:16px;max-width:330px}
.hwb-kaart img{display:block;width:132px;height:auto;box-shadow:0 14px 30px rgba(0,0,60,.5)}
.hwb-kaart h2{margin:0;font-family:var(--hwb-sans);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:0;color:var(--hwb-wit)}
.hwb-kaart p{margin:0;font-family:var(--hwb-bon);font-size:13.5px;line-height:1.5}
.hwb-kaart .hwb-knoppen{margin-top:0;flex-direction:column}

/* ---------- slot ---------- */
.hwb-slot{border-top:2px solid rgba(255,255,255,.28);padding-block:34px 44px;font-size:15px;line-height:1.6}
.hwb-slot .hwb-binnen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(24px,5vw,72px)}
.hwb-slot p{margin:0;max-width:34em}
.hwb-slot a{text-underline-offset:3px}
.hwb-slot .hwb-adres{font-family:var(--hwb-bon);font-size:13.5px}

@media (max-width:900px){
  .hwb-kop-raster{grid-template-columns:minmax(0,1fr)}
  .hwb-toneel{order:2}
  .hwb-kassa-raster{grid-template-columns:minmax(0,1fr)}
  .hwb-kaart{display:none}
  .hwb-moment{grid-template-columns:minmax(0,1fr);gap:8px}
  .hwb-slot .hwb-binnen{grid-template-columns:minmax(0,1fr)}
  .hwb-gleuf{margin-inline:-6px}
}
@media (max-width:480px){
  .hwb-regels li{grid-template-columns:4.4em minmax(0,1fr)}
  .hwb-regels.hwb-tijd li{grid-template-columns:5.2em minmax(0,1fr)}
  .hwb-knop{flex:1 1 100%}
  .hwb-som .hwb-rij{font-size:14.5px}
  .hwb-rij{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  .hwb-boek-in,.hwb-bon.hwb-print{animation:none}
  .hwb-boek{transition:none}
}