/* Element-level resets and site-wide utilities.
   Design tokens live in colors_and_type.css — change values there, not here. */

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

html, body { margin: 0; padding: 0; }
body { background: var(--earth-deep); color: var(--fg-1); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }

/* Zichtbaar waar de toetsenbordfocus staat — op elke link, knop en veld. */
:focus-visible {
  outline: 2px solid var(--goud);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Voor een label dat een schermlezer nodig heeft en een ziend oog niet. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===== Maatvoering ===== */

/* De kolom waar alles in staat. */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; }

/* Een tekstkolom van ongeveer 76 tekens per regel in EB Garamond op 18px.
   Over de volle 1120px zouden het er 145 worden en dan gaat het mis bij de
   terugsprong naar de volgende regel. De lege ruimte rechts is dus geen
   vergeten kolom: hij houdt één leesas van boven naar beneden. Wil je die
   ruimte vullen, zet er dan iets anders neer — rek de tekst niet uit. */
.smal { max-width: 62ch; }

/* Twee kolommen die bovenaan uitlijnen, niet in het midden. Bij centreren
   ligt de gedeelde lijn in het midden, waar je hem niet ziet; bovenaan valt
   de bovenrand van het beeld samen met het labeltje ernaast, en dat is de
   lijn waar je oog aan begint. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* ===== Herhaalde onderdelen ===== */

.label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--goud);
  font-weight: 600;
  margin: 0 0 14px;
}

/* Goud en niet crème. Het kaartblok is het enige lichte vlak op de
   pagina — "voeg geen tweede licht vlak toe, dan is het kaartblok niets
   bijzonders meer" — en een crème knop in de balk wás zo'n tweede vlak. Goud
   met donkere tekst haalt 7,30; goud met crème tekst zou 2,27 halen en dat is
   ver onder de 4,5 die een knoplabel nodig heeft. */
.knop {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  background: var(--goud);
  color: var(--grond);
  text-decoration: none;
  padding: 5px 14px;
  border-radius: 2px;
  white-space: nowrap;
}
.knop:hover { background: #D9AE66; }
.knop--groot { font-size: 18px; padding: 14px 28px; }
.knop svg { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.14em; margin-right: 0.55em; }
.knop--groot svg { margin-right: 0.6em; }

/* Wie aangeeft geen beweging te willen, krijgt er geen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}