/* Basis: kleuren, typografie, knoppen. Elke pagina laadt dit. */

:root {
    --groen:      #003B1E;
    --groen-diep: #002313;
    --papier:     #F7F3E9;
    --papier-dof: #EFE9DA;
    --lijn:       #C8BFA8;
    --wijn:       #7B2D26;
    --zacht:      rgba(0, 59, 30, .66);
    --breed:      1020px;
    --serif:      "Cormorant Garamond", "Times New Roman", Georgia, serif;
    --sans:       "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: clamp(0rem, 3vw, 3rem);
    background: var(--groen-diep);
    color: var(--groen);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.005em;
}

h1, h2, h3 { text-wrap: balance; }

h1 { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 4.7rem); }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.1vw, 2.9rem); }

p { text-wrap: pretty; }

p { margin: 0 0 1.1rem; }

a { color: inherit; }

img { max-width: 100%; height: auto; }

.verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Kleine kapitalen: het label-lettertje van de hele kaart. */
.label, .feit-label, .kicker, .stempel, .knop, .kaartvoet, .klein, .formulier label {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.label { margin: 0 0 .9rem; color: var(--wijn); }
.klein { margin: 1rem 0 0; letter-spacing: .12em; color: var(--zacht); }

/* ── Knoppen ───────────────────────────────────────────────────────────── */
.knop {
    display: inline-block;
    padding: .95rem 2.1rem;
    background: var(--groen);
    color: var(--papier);
    text-decoration: none;
    border: 1px solid var(--groen);
    border-radius: 0;
    cursor: pointer;
    transition: background .15s linear, color .15s linear;
}
.knop:hover { background: var(--wijn); border-color: var(--wijn); color: var(--papier); }

.knop-leeg { background: transparent; color: var(--groen); }
.knop-leeg:hover { background: var(--groen); color: var(--papier); border-color: var(--groen); }

:where(a, button, input, textarea):focus-visible {
    outline: 2px solid var(--wijn);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}