/* Erfverhaal, binnenkort-pagina. Mobiel eerst.
   Geen zwarte achtergrond, geen lijnen, geen kaders. */

@font-face { font-family: "Libre Caslon Display"; src: url("../fonts/LibreCaslonDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("../fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ev-paper);
  color: var(--ev-ink);
  font-family: var(--ev-text);
  font-size: var(--ev-t-body);
  line-height: var(--ev-t-body-lh);
  text-wrap: pretty;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--ev-accent); text-decoration: none; }
a:hover { color: var(--ev-ink); text-decoration: underline; }

.ev-wrap { max-width: 440px; margin: 0 auto; padding: 0 var(--ev-s5) var(--ev-s8); }
@media (min-width: 900px) { .ev-wrap { max-width: 720px; } }

.ev-label { font-size: var(--ev-t-label); font-weight: 700;
  letter-spacing: var(--ev-t-label-ls); text-transform: uppercase;
  color: var(--ev-ink-faint); }
.ev-label--accent { color: var(--ev-accent); }

/* Het raster is een band met lucht eromheen, nooit een achtergrond onder tekst.
   Zoals in het boek zet je hier het aantal kolommen en rijen, geen hoogte: de
   tegel is breedte gedeeld door kolommen en daarmee vierkant, en er valt aan
   geen enkele rand een bolletje af. De hoogte volgt uit het aantal rijen. */
.ev-band, .ev-omslag__band {
  width: 100%;
  aspect-ratio: var(--ev-kol) / var(--ev-rij);
  background-size: calc(100% / var(--ev-kol)) calc(100% / var(--ev-rij));
  flex: none;
}
.ev-band { --ev-kol: 44; --ev-rij: 3; margin: var(--ev-s7) 0; }

h1 { font-family: var(--ev-display); font-size: var(--ev-t-hero);
  line-height: var(--ev-t-hero-lh); font-weight: 400; margin: 0 0 var(--ev-s4); }
@media (min-width: 900px) { h1 { font-size: 54px; } }
p { margin: 0 0 var(--ev-s4); color: var(--ev-ink-soft); }
.ev-lead { font-size: 17px; line-height: 1.5; }

/* Invoer. Het veld is een vlak, niet een omlijning. */
.ev-field { background: var(--ev-tint); border: 0; border-radius: var(--ev-radius);
  padding: var(--ev-s4) 18px; width: 100%;
  font-family: var(--ev-display); font-size: 22px; color: var(--ev-ink); }
.ev-field::placeholder { color: var(--ev-ink-faint); }
.ev-field:focus { outline: 2px solid var(--ev-accent); outline-offset: 2px; }

.ev-btn { display: block; width: 100%; border: 0; border-radius: var(--ev-radius);
  background: var(--ev-ink); color: var(--ev-on-ink);
  font-family: var(--ev-text); font-size: 16px; font-weight: 700;
  padding: 17px; margin-top: var(--ev-s3); text-align: center; cursor: pointer; }
.ev-btn:hover { background: #0F1C29; }
.ev-btn[disabled] { opacity: .55; cursor: default; }

.ev-fine { font-size: var(--ev-t-fine); line-height: var(--ev-t-fine-lh);
  color: var(--ev-ink-mute); margin-top: var(--ev-s3); }
.ev-foot { margin-top: var(--ev-s8); font-family: var(--ev-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ev-ink-faint); }

/* Bevestiging na aanmelding. Een vlak, geen kader. */
.ev-done { background: var(--ev-tint); border-radius: var(--ev-radius);
  padding: var(--ev-s5) 18px; }
.ev-done p { margin: 0; }
.ev-done__t { font-family: var(--ev-display); font-size: 22px; color: var(--ev-ink); }
.ev-err { color: var(--ev-accent); font-size: var(--ev-t-small); margin-top: var(--ev-s2); }
[hidden] { display: none !important; }

/* Breed scherm: de regel blijft leesbaar en het veld blijft een veld.
   Een invoerveld van 720px breed leest als een fout, niet als ruimte. */
@media (min-width: 900px) {
  .ev-lead { max-width: 560px; }
  #ev-form, .ev-done { max-width: 420px; }
}



/* --- Het omslag. Het enige in kleur, precies als bij het boek. ---
   Grond is --ev-ink, nooit zwart. De band staat op de dichte steek in okergeel
   en loopt over de volle breedte, dus zonder zijpadding; de verhouding 95 bij 25
   is die van het echte omslag, hier op een grovere steek zodat een bolletje op
   een telefoon een bolletje blijft. */
.ev-omslag { background: var(--ev-ink); color: var(--ev-on-ink); }
.ev-omslag__in { max-width: 440px; margin: 0 auto; padding: var(--ev-s7) 0 var(--ev-s8); }
@media (min-width: 900px) { .ev-omslag__in { max-width: 720px;
  padding: var(--ev-s8) 0; } }

.ev-omslag__head { display: flex; justify-content: space-between;
  padding: 0 var(--ev-s5); font-size: var(--ev-t-label); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #8FA3B6; }
.ev-omslag__head span:last-child { color: var(--ev-accent-lt); }

.ev-omslag__band { --ev-kol: 63; --ev-rij: 24; margin: var(--ev-s6) 0 var(--ev-s7); }
/* Op een breed scherm groeit de steek mee terwijl de stip gelijk blijft, en dan
   wordt de band ijl. Vanaf hier de 95 bij 25 van het echte omslag, waarmee de
   tegel op 720px weer rond de 7,6px uitkomt: de dichte steek van het boek. */
@media (min-width: 900px) { .ev-omslag__band { --ev-kol: 95; --ev-rij: 34; } }

.ev-omslag__titel { font-family: var(--ev-display); font-weight: 400;
  font-size: clamp(38px, 11vw, 62px); line-height: 1.08;
  padding: 0 var(--ev-s5); margin: 0 0 var(--ev-s4); }
.ev-omslag__voor { padding: 0 var(--ev-s5); margin: 0;
  font-size: 17px; line-height: 1.5; color: var(--ev-on-ink-alt); }
.ev-omslag__voor b { color: var(--ev-accent-lt); font-weight: 400; }

/* De pagina begint na het omslag, dus het eerste stuk tekst krijgt lucht. */
.ev-wrap { padding-top: var(--ev-s8); }

.ev-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ev-fine--lead { margin-top: 2px; margin-bottom: var(--ev-s4); }

/* Toestemming. Een vlak onderaan het scherm; geen kader, geen lijn erboven. */
.ev-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--ev-tint); }
.ev-consent__in { max-width: 440px; margin: 0 auto;
  padding: var(--ev-s5) var(--ev-s5) var(--ev-s6); }
@media (min-width: 900px) { .ev-consent__in { max-width: 720px;
  padding-bottom: var(--ev-s5); } }
.ev-consent__t { font-family: var(--ev-display); font-size: 20px;
  color: var(--ev-ink); margin: 0 0 var(--ev-s2); }
.ev-consent__p { font-size: var(--ev-t-small); line-height: var(--ev-t-small-lh);
  color: var(--ev-ink-soft); margin: 0 0 var(--ev-s4); max-width: 520px; }
.ev-consent__btns { display: flex; flex-wrap: wrap; gap: var(--ev-s3); }
.ev-btn--sm { width: auto; padding: 12px 22px; font-size: 14px; }
/* Weigeren moet net zo makkelijk zijn als akkoord gaan, dus het is een knop
   van hetzelfde formaat. Alleen de kleur verschilt. */
.ev-btn--quiet { background: var(--ev-paper); color: var(--ev-ink); }
.ev-btn--quiet:hover { background: #F2EFE9; }

/* Ruimte onder de pagina zodat de balk niets afdekt zolang hij er staat. */
body:has(.ev-consent:not([hidden])) .ev-wrap { padding-bottom: 220px; }

/* De band is nu een tijdlijn: het canvas tekent de punten, het CSS-raster blijft
   staan als er geen JavaScript is. Het canvas ligt er precies overheen. */
.ev-omslag__band { position: relative; }
/* Het doek ligt LOS in de band en mag hem nooit hoger maken. Stond het als
   gewoon blok in de stroom, dan duwde zijn eigen hoogte de band groter dan zijn
   aspect-ratio en werd de tegel rechthoekig: de bolletjes werden ovaal. De band
   haalt zijn hoogte uit zijn breedte, en het doek volgt. */
.ev-omslag__band > canvas { position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; }

/* Het bijschrift bij de figuur: klein, oker, in de cijferletter. */
.ev-omslag__jaar { font-family: var(--ev-mono); font-size: var(--ev-t-fine);
  letter-spacing: 0.16em; color: var(--ev-accent-lt);
  padding: 0 var(--ev-s5); margin: calc(-1 * var(--ev-s6)) 0 var(--ev-s7);
  text-align: right; text-transform: lowercase; transition: opacity .3s; }