/* Boschalet Nutter · basis: font, tokens, typografie, layout */
@font-face { font-family: "Short Stack"; src: url("../assets/fonts/shortstack.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("../assets/fonts/caladea-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("../assets/fonts/caladea-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* uit het eigen drukwerk: bosgroen, salie-papier, mint, hout, zon */
  --wit: #ffffff;
  --papier: #d4d9cb;
  --lucht: #c0c6b6;
  --lucht-licht: #e2e6da;
  --mint: #aedfd6;
  --hout: #9f775a;
  --bos: #374532;
  --bos-diep: #2b3627;
  --mos: #46523f;
  --zon: #e2b759;
  --zon-diep: #d4a443;
  --roest: #a4532d;
  --lijn: #aab29f;

  --f: "Caladea", Cambria, Georgia, serif;
  --hand: "Short Stack", "Comic Neue", "Segoe Print", sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.15vw, 1.15rem);
  --step-1: clamp(1.125rem, 1.07rem + 0.3vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.26rem + 0.55vw, 1.75rem);
  --step-3: clamp(1.6rem, 1.4rem + 0.9vw, 2.25rem);
  --step-4: clamp(1.9rem, 1.55rem + 1.6vw, 3.1rem);

  /* 8px-schaal */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --rand: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --sectie: clamp(56px, 8vw, 112px);

  /* met de schaar geknipt: net niet regelmatig, zoals de lijn van het logo */
  --knip: 22px 30px 24px 34px / 30px 22px 34px 26px;
  --r: 14px;
  --ease: cubic-bezier(.22, .7, .2, 1);

  --scheur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 42' preserveAspectRatio='none'%3E%3Cpath d='M0 42 L0 17 L22 24 L42 22 L70 11 L103 11 L133 12 L153 19 L195 13 L219 24 L263 23 L292 31 L312 29 L338 13 L359 17 L400 14 L434 24 L463 22 L482 11 L506 25 L536 17 L571 20 L597 27 L635 15 L669 22 L711 26 L737 32 L759 19 L798 13 L829 11 L866 27 L900 29 L927 25 L962 23 L992 28 L1037 20 L1073 11 L1111 24 L1157 28 L1183 18 L1220 10 L1250 14 L1272 11 L1311 13 L1336 19 L1379 12 L1409 22 L1440 26 L1440 42Z' fill='%23d4d9cb'/%3E%3C/svg%3E");
  --z-kop: 20; --z-balk: 30; --z-menu: 40; --z-lb: 50;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kop-h, 64px) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--bos);
  font-family: var(--f);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  font-optical-sizing: auto;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--zon-diep); }
:focus-visible { outline: 3px solid var(--bos); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--zon); color: var(--bos); }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; text-wrap: balance; }
h1, h2 { font-family: var(--hand); font-weight: 400; line-height: 1.2; letter-spacing: 0; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.25; }
p { margin: 0 0 var(--s2); max-width: 62ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; }
strong { font-weight: 700; }
.klein { font-size: var(--step--1); color: var(--mos); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--bos); color: var(--wit); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

main > section { padding-inline: max(var(--rand), calc((100% - var(--max)) / 2)); }

.knip { border-radius: var(--knip); }
/* foto als afdruk: witte rand, zacht afgerond, licht scheef, zoals in het welkomstboekje */
.afdruk { border: 6px solid var(--wit); border-radius: 16px; box-shadow: 0 6px 18px rgba(43, 54, 39, .18); }
.scheef-l { transform: rotate(-2deg); } .scheef-r { transform: rotate(1.6deg); }
@media (prefers-reduced-motion: reduce) { .scheef-l, .scheef-r { transform: none; } }
.hand { font-family: var(--hand); }

/* reveal: alleen als JS draait en beweging gewenst is */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .rv.in { opacity: 1; transform: none; }
}