/* ============================================================
   Boekje Vol — de bladzijde
   Alles wat bepaalt hoe een bladzijde eruitziet en hoe hij afdrukt.
   Eén bestand, gebruikt door zowel de maakomgeving als de winkel,
   zodat wat de koper ziet altijd hetzelfde is als wat gedrukt wordt.
   De kleuren komen uit het sjabloon zelf (sjabloon/<naam>.js).
   ============================================================ */

  /* ============ DE BLADZIJDE ============
     A4 liggend = 297 x 210 mm. De bladzijde is een container, dus 1cqw = 2,97 mm.
     Daarmee is 1 mm exact 0,3367 cqw. Alle geldvakken staan in millimeters,
     zodat ze op het scherm en op papier dezelfde ware grootte houden.       */
  .page{
    --mm:0.336700cqw;
    width:100%;aspect-ratio:1.414/1;background:#FDFAF7;color:#2E1F1F;
    border:1px solid var(--rule);box-shadow:0 18px 44px -30px rgba(46,31,31,.55);
    position:relative;overflow:hidden;container-type:inline-size;
    display:grid;grid-template-columns:1fr;grid-template-rows:1fr;
  }
  .inner{padding:8% 8.5%;display:flex;flex-direction:column;gap:3%;position:relative;z-index:2;grid-area:1/1}
  .inner.c{justify-content:center}
  .inner.b{justify-content:flex-end}
  .inner.t{justify-content:flex-start}
  .inner.right{align-items:flex-end;text-align:right}
  .inner.mid{align-items:center;text-align:center}
  .inner.krap{padding:4% 4.2%}

  /* ---- ondergronden ---- */
  .page.field{background:var(--merk);color:var(--merk-op-vol);border-color:var(--merk)}
  .page.wine{background:var(--merk-diep);color:var(--merk-op-diep);border-color:var(--merk-diep)}
  .page.wash{background:var(--merk-licht);color:#2E1F1F;border-color:var(--merk-licht-rand)}
  /* Op de lichte bladzijden heeft het invulvlakje anders dezelfde kleur als
     de bladzijde en zie je niet wat je zelf invult. Een tint donkerder. */
  .page.wash .ph{--ph-vlak:color-mix(in srgb, var(--merk) 18%, var(--merk-licht))}
  .page:not(.field):not(.wine):not(.gold):not(.wash) .ph{--ph-vlak:color-mix(in srgb, var(--merk) 9%, var(--merk-licht))}
  .page.gold{background:#DB9C24;color:#FFFAF0;border-color:#DB9C24}

  .page.gold .hi{color:var(--merk-hi-goud)}
  .page.gold .venster,.page.gold .munt{border-color:#FFFAF0}
  .page.gold .venster::after{border-color:rgba(255,250,240,.55)}
  .page.gold .ph{--ph-vlak:rgba(255,255,255,.28);color:#FFFAF0}
  .page.gold .spot{border-color:rgba(255,250,240,.55);color:rgba(255,250,240,.8)}
  .page.gold .pnum{color:#FFFAF0;opacity:.55}

  .page.wine .ph{--ph-vlak:rgba(255,255,255,.2);color:var(--merk-op-vol)}
  .page.wine .venster,.page.wine .munt{border-color:currentColor}
  .page.wine .venster::after{border-color:rgba(255,255,255,.5)}
  .page.wine .hi{color:#E0A32E}
  .page.wine .op{color:currentColor}
  .page.wine .spot{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.75)}
  .page.wine .pnum,.page.wash .pnum{color:currentColor;opacity:.45}
  .page.wash .hi{color:var(--merk-hi)}

  /* ---- verstrooide stipjes ---- */
  .dots{position:absolute;inset:0;z-index:1;pointer-events:none}
  .dots i{position:absolute;display:block;border-radius:50%;background:#E0A32E}
  .dots i.snipper{border-radius:.5cqw}

  /* ---- fotovak ---- */
  .photo{box-sizing:border-box;border:2px dashed currentColor;opacity:.55;
    border-radius:.7cqw .7cqw 2.2cqw 2.2cqw;
    display:grid;place-items:center;
    font-size:2cqw;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:3%}
  .page.field .ph{--ph-vlak:rgba(255,255,255,.22);color:var(--merk-op-vol)}
  .page.field .venster,.page.field .munt{border-color:var(--merk-op-vol)}
  .page.field .venster::after{border-color:rgba(255,255,255,.55)}
  .page.field .hi{color:var(--merk-op-vol)}

  /* type-schaal */
  .t{margin:0;font-weight:400;letter-spacing:-.02em;text-wrap:balance;line-height:1.14}
  .mega{font-size:24cqw;line-height:.86;letter-spacing:-.05em;font-weight:500}
  .huge{font-size:13cqw;line-height:1.02;letter-spacing:-.035em}
  .grand{font-size:10cqw;line-height:1.04;letter-spacing:-.035em}
  .big{font-size:8.4cqw;line-height:1.12;letter-spacing:-.03em;max-width:15ch}
  .mid2{font-size:5.4cqw;line-height:1.24;max-width:20ch}
  .sm{font-size:3.7cqw;line-height:1.4;max-width:28ch;font-weight:400}
  .xs{font-size:2.5cqw;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
  .hi{color:var(--merk)}
  .gold-t{color:#E0A32E}
  .pink-t{color:var(--merk-hi-goud)}
  .home .t.gold-t{color:#B8860B}
  .home .t.pink-t{color:var(--merk-hi)}
  .home .ph.gold-t{color:#B8860B}
  /* De binnenmarge zit in een negatieve buitenmarge, anders springt de tekst
     in het vlakje 6 mm in ten opzichte van de regel erboven. */
  /* Een lang woord zonder spatie — een achternaam, of iemand die doortypt —
     kan nergens afbreken en duwde de hele bladzijde van het papier. De
     preflight zag dat pas ná de betaling, en dan mislukt de levering.
     Nu breekt zo'n woord af in plaats van uit te steken. */
  /* Het gekleurde vlak is niet de hele regelhoogte maar een band die .07em
     lager begint. Reden: het vlak van een inline-element is zo hoog als de
     letter zelf — bij Rubik 1,18 — en de regelafstand hier is 1,12. Het vlak
     van de volgende regel kwam dus over de staart van een g, j of p van de
     regel erboven heen. Meer regelafstand loste het ook op, maar dan zakt
     bladzijde 3 door de drukcontrole: de tekst raakt dan de snijrand.
     De kleur komt uit --ph-vlak, zodat elke ondergrond alleen die hoeft te
     zetten en de band overal hetzelfde blijft. */
  /* Links maar een klein randje (.08em): een spatie is ~.25em, dus het vlakje
     begint na de laatste letter van het woord ervoor in plaats van erover. */
  .ph{color:var(--merk-hi);--ph-vlak:var(--merk-licht);
    background:linear-gradient(var(--ph-vlak),var(--ph-vlak)) no-repeat 0 .07em/100% 1.11em;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
    border-radius:2px;padding:0 .26em 0 .08em;margin:0 -.26em 0 -.08em;
    overflow-wrap:anywhere}
  .page .t{overflow-wrap:anywhere}
  .page .ph.gold-t,.page.field .ph.gold-t,.page.wine .ph.gold-t{color:#E0A32E;--ph-vlak:rgba(255,255,255,.14)}
  .home .page .ph.gold-t,.home .page.field .ph.gold-t{color:#B8860B;--ph-vlak:#FDF4E4}

  .mark{font-family:var(--f-mark);font-size:6cqw;line-height:1}
  /* right:6% = 17,8 mm. Op 5,5% stond het nummer op 16,3 mm van de rand, krap
     langs de wire-o bindzone van 15,65 mm; een millimeter snijverloop en het
     staat in de ponsgaten. Verder naar binnen kan niet: op bladzijde 3 staat
     het fotovak met zijn rechterrand op 25,5 mm, en daar moet het nummer
     zichtbaar naast blijven passen. */
  .pnum{position:absolute;bottom:4.5%;right:6%;font-size:2.1cqw;letter-spacing:.15em;color:#C4B2B2;z-index:3}
  .page.field .pnum{color:rgba(255,244,247,.6)}

  /* ============ HET VENSTER — altijd op ware grootte ============
     Eurobiljetten (mm): 5 = 120x62 · 10 = 127x67 · 20 = 133x72 · 50 = 140x77 · 100 = 147x82
     Munten (doorsnede):  1c 16,25 · 2c 18,75 · 5c 21,25 · 10c 19,75 · 50c 24,25 · 1 euro 23,25 · 2 euro 25,75
     Elk vak krijgt 3 mm speling, zodat het geld binnen de lijn valt en de lijn zichtbaar blijft. */
  .venster{border:2px solid var(--merk);border-radius:4px;display:grid;place-items:center;flex:none;
    width:calc(var(--w)*var(--mm));height:calc(var(--h)*var(--mm))}
  .venster.mv::after{content:"";border:1.5px dashed var(--merk-45);border-radius:50%;
    width:calc(var(--c)*var(--mm));height:calc(var(--c)*var(--mm))}
  .munt{border:2px dashed var(--merk);border-radius:50%;flex:none;
    width:calc(var(--c)*var(--mm));height:calc(var(--c)*var(--mm))}
  .venster.inline,.munt.inline{display:inline-grid;vertical-align:-.16em}

  /* invulveld-regel onder het ontwerp */
  .velden b{color:var(--accent);font-weight:500}

  /* decoratieve vlakken */
  .blob{position:absolute;border-radius:50%;z-index:1}
  .band{position:absolute;left:0;right:0;z-index:1}
  .ring{position:absolute;border-radius:50%;border:2px solid var(--merk);z-index:1}

  .eq{display:flex;align-items:center;justify-content:center;gap:1.6cqw}
  .eq .op{font-size:5cqw;color:var(--merk);font-weight:300;line-height:1}
  /* Een rij van twee biljetten naast elkaar vult de bladzijde bijna helemaal.
     De vensters staan op ware grootte en mogen dus niet krimpen; wat wél mag
     is de tussenruimte. Zo blijft de rij vrij van de wire-o bindzone —
     de eerste 15,65 mm vanaf de bindrand, waar de ponsgaten komen. */
  .eq.breed{gap:0.6cqw}
  .eq.breed .op{font-size:4.2cqw}
  .page.wine .eq .op{color:currentColor}

  .row{display:flex;align-items:center;gap:3cqw}
  .row.base{align-items:baseline}
  .wrapline{display:flex;flex-wrap:wrap;align-items:center;gap:1.2cqw 2.4cqw}

  .spot{border:2px dashed var(--merk-50);border-radius:4px;display:grid;place-items:center;
    font-size:2cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--merk-zacht);text-align:center;padding:2%}
  .page.field .spot{border-color:rgba(255,255,255,.5);color:rgba(255,244,247,.8)}

  /* ---- de instructiekaart ---- */
  .instr .inner{gap:0}
  .instr .regel{display:flex;gap:2.2cqw;align-items:flex-start;margin-top:2.2cqw}
  .instr .cijf{font-weight:700;font-size:2.9cqw;line-height:1.5;color:var(--merk);flex:none;width:3cqw}
  .instr .rt{font-size:2.3cqw;line-height:1.5;max-width:62ch}
  .instr p{margin:0}

  /* ============ THUISPRINT-MODUS ============ */
  .home .page.field,.home .page.wine,.home .page.wash,.home .page.gold{
    background:#FDFAF7;color:#2E1F1F;border-color:var(--rule)}
  .home .mega,.home .huge,.home .grand{color:var(--merk)}
  .home .page.field .hi,.home .page.wine .hi,.home .page.wash .hi{color:var(--merk-hi)}
  .home .page.gold .hi{color:#B8860B}
  .home .page.gold .venster,.home .page.gold .munt{border-color:#B8860B}
  .home .page.gold .venster::after{border-color:rgba(184,134,11,.45)}
  .home .page.gold .mega,.home .page.gold .huge,.home .page.gold .grand,.home .page.gold .big{color:#B8860B}
  .home .page.field .venster,.home .page.wine .venster,
  .home .page.field .munt,.home .page.wine .munt{border-color:var(--merk)}
  .home .page.field .venster::after,.home .page.wine .venster::after{border-color:var(--merk-45)}
  .home .page.field .ph,.home .page.wine .ph{--ph-vlak:var(--merk-licht);color:var(--merk-hi)}
  .home .page.field .spot,.home .page.wine .spot{border-color:var(--merk-50);color:var(--merk-zacht)}
  .home .page.field .photo,.home .page.wine .photo{color:var(--merk-hi)}
  .home .page.field .pnum,.home .page.wine .pnum{color:#C4B2B2;opacity:1}
  .home .page.field .op,.home .page.wine .op{color:var(--merk)}
  .home .page.field .mark{color:var(--merk)}
  .home .dots i{background:#E0A32E}
  .home .page .inner [style*="opacity"]{opacity:1 !important}
  /* Een accent dat in de thuisprint goud wordt, zodat het niet wegvalt tegen de rest. */
  .home .page .hi.thuis-goud{color:#B8860B}
  /* Twee kleuren in de thuisprint, zodat het net zo gezellig oogt als het
     gedrukte boekje: de lichte tint van het boekje op de bladzijden die
     gedrukt donker of gekleurd zijn, en warm geel op de gele. Binnen een
     witte rand van 5 mm, want een thuisprinter drukt nooit tot de rand;
     een rand die er al in zit ziet er bedoeld uit. Licht genoeg om weinig
     inkt te kosten. 5 mm is 1,7% van de breedte en 2,4% van de hoogte. */
  .home .page.wine,.home .page.wash{
    background:linear-gradient(var(--merk-licht),var(--merk-licht)) 50% 50%/96.6% 95.2% no-repeat #FDFAF7}
  .home .page.gold{
    background:linear-gradient(#FBEFD6,#FBEFD6) 50% 50%/96.6% 95.2% no-repeat #FDFAF7}
  .home .page.wine .ph,.home .page.wash .ph,.home .page.gold .ph,
  .home .page.gold .ph.gold-t{--ph-vlak:rgba(255,255,255,.75)}

  /* ============ AFDRUKKEN ============
     Zestien vellen A4 liggend, zonder marge van de browser, op ware grootte. */
  #printsheet{display:none}
  @media print{
    body{padding:0;background:#fff}
    /* In de bestanden geen vlakje achter wat de koper schreef: het boekje is
       af en de tekst hoort er gewoon bij. Op het scherm blijft het, om te
       laten zien wat je zelf invult. Zonder vlakje valt ook niets meer over
       het woord ervoor heen (de -0,26em marge van .ph). */
    .page .ph{background:none}
    .wrap{display:none}
    #printsheet{display:block}
    /* Elk vel is het drukvel; de bladzijde blijft exact 297 x 210 mm, want
       daar hangen alle geldmaten aan vast. Bij drukwerk ligt er een vel van
       303 x 216 mm omheen: 3 mm afloop rondom. */
    #printsheet .vel{display:grid;place-items:center;overflow:hidden;
      width:297mm;height:210mm;break-after:page;page-break-after:always}
    #printsheet .vel:last-child{break-after:auto;page-break-after:auto}
    body.afloop #printsheet .vel{width:303mm;height:216mm}
    #printsheet .page{width:297mm;height:210mm;aspect-ratio:auto;border:0;box-shadow:none;
      -webkit-print-color-adjust:exact;print-color-adjust:exact}
    body.afloop #printsheet .page{overflow:visible}
    body.afloop #printsheet .page::before{content:"";position:absolute;inset:-3mm;
      background:inherit;z-index:0}
  }

/* ============ EEN ECHTE FOTO IN HET KADER ============
   Zolang er geen foto gekozen is blijft het gestippelde kader staan.
   Zodra hij er is vult hij het kader helemaal — de uitsnede bepaalt de
   koper zelf, met slepen en zoomen. */
/* Een gekozen foto krijgt een gekleurde rand als een polaroid: onder breder
   dan de andere drie. Door box-sizing groeit die rand naar binnen, dus het
   vak blijft precies even groot en de bladspiegel verandert niet. */
/* display:block overschrijft het grid van het lege vak. In een grid met
   place-items:center valt height:100% van de foto terug op automatisch,
   waardoor hij buiten het vak uitstak in plaats van erin te passen. */
.photo.gevuld{display:block;opacity:1;padding:0;overflow:hidden;position:relative;
  background:transparent;border:0;
  /* Onder ronder dan boven. Een foto met vier gelijke hoeken leest als een
     plaatje in een document; deze vorm leest als een foto op een bladzijde.
     In cqw, niet in pixels, zodat het meeschaalt met het papier: 1cqw is
     2,97 mm, dus onder is de ronding krap 6,5 mm. */
  border-radius:.7cqw .7cqw 2.2cqw 2.2cqw}
/* Geen rand om een gekozen foto: die maakte het beeld druk en trok de
   aandacht weg van de foto zelf. De foto staat kaal op de bladzijde.
   Inzoomen, uitzoomen en verschuiven blijven gewoon werken. */
/* contain in plaats van cover: bij schaal 1 zie je de hele foto, en de
   schuif rekent vanaf de stand waarin hij het kader precies vult. Zo kun
   je ook uitzoomen en zie je dan méér van de foto, niet minder. */
/* Op een bladzijde met een foto wordt niets samengeknepen. Anders vangt de
   opmaak een te grote foto stilletjes op door iets anders kleiner te maken —
   eerst de foto zelf (en dan liet Chrome in de PDF de ronde hoeken vallen),
   daarna het hartje eronder. Zonder samenknijpen loopt een te volle bladzijde
   zichtbaar over, en dat ziet de grens in het invulformulier wel. */
.inner:has(.photo.gevuld) > *{flex-shrink:0}

/* De ronding staat ook op de foto zelf, niet alleen op het vak. Op het scherm
   knipt het vak de hoeken af; Chrome deed dat in de PDF bij een grote foto
   níét — bladzijde 13 kreeg rechte hoeken terwijl bladzijde 3 rond was. Nu
   de foto precies zijn vak vult, kan hij de ronding gewoon zelf dragen. */
.photo.gevuld img{width:100%;height:100%;object-fit:contain;display:block;transform-origin:center;
  border-radius:inherit}

/* ============ STEMPEL ============
   Rechtsboven op elke bladzijde die je op het scherm ziet: "Voorbeeld" in de
   winkel, "Concept" tijdens het invullen. Nooit in de PDF — die wordt zonder
   deze klasse getekend.

   Het verving een raster van gedraaide woordmerken over de hele bladzijde.
   Dat lag te zwaar over het ontwerp, en het stond alleen in het
   invulformulier: de winkel toonde alle zestien bladzijden schoon. Nu staat
   er overal hetzelfde, en valt het nergens in de weg. */
.page[data-stempel]::after{content:attr(data-stempel);position:absolute;
  top:4.5%;right:6%;z-index:9;pointer-events:none;
  font-family:var(--f),system-ui,sans-serif;font-size:1.9cqw;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
  color:currentColor;opacity:.42}