:root {
    /* Kleuren */
    --kleur-achtergrond: #FAF1DC;
    --kleur-cirkel: #FFF8EA;
    --kleur-cirkel-rand: #E0B878;
    --kleur-tekst: #4A1E0C;
    --kleur-tekst-zacht: #7A4E24;
    --kleur-accent: #1A6AA3;

    /* Lettertype: Baloo 2 */
    --font: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
    --font-extrabold: 800;
    --font-normaal: 500;

    /* Lettergroottes */
    --grootte-kop: clamp(3rem, 7vw, 6rem);
    --grootte-tekst: clamp(1.125rem, 1.6vw, 1.375rem);
    --grootte-klein: 0.95rem;

    /* Ruimte */
    --ruimte-zijkant: clamp(1.25rem, 8vw, 8.75rem);
    --ruimte-boven: clamp(2rem, 5vw, 4rem);
    --ruimte-tussen: clamp(2rem, 6vw, 5rem);

    /* Maten */
    --breedte-beeld: 26.875rem;
    --breedte-tekst: 34rem;
    --rand-cirkel: 3px dashed var(--kleur-cirkel-rand);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    font-family: var(--font), sans-serif;
    font-weight: var(--font-normaal);
    font-size: 1.125rem;
    line-height: 1.5;
}

main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ruimte-tussen);
    padding: var(--ruimte-boven) var(--ruimte-zijkant);
}

.beeld {
    position: relative;
    flex: 0 1 var(--breedte-beeld);
    aspect-ratio: 1 / 1;
    margin: 0;
    display: grid;
    place-items: center;
}

.beeld img {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.tekst {
    flex: 1 1 0;
    max-width: var(--breedte-tekst);
}

h1 {
    margin: 0 0 1.5rem;
    font-weight: var(--font-extrabold);
    font-size: var(--grootte-kop);
    line-height: 0.95;
    letter-spacing: -0.01em;

    span {
        color: var(--kleur-accent);
    }
}

.tekst p {
    margin: 0;
    font-size: var(--grootte-tekst);
    max-width: 31rem;
}

a {
    color: var(--kleur-accent);
    font-weight: var(--font-extrabold);
    text-underline-offset: 0.15em;
}

a:hover { color: var(--kleur-tekst); }

a:focus-visible {
    outline: 3px solid var(--kleur-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

footer {
    padding: 0 var(--ruimte-zijkant) 2rem;
    font-size: var(--grootte-klein);
    font-weight: var(--font-extrabold);
    color: var(--kleur-tekst-zacht);
}

footer p { margin: 0; }

@media (max-width: 760px) {
    main {
        flex-direction: column;
        text-align: center;
    }
    .beeld {
        width: min(100%, 22rem);
        flex-basis: auto;
    }
    .tekst,
    .tekst p { margin-inline: auto; }
    footer { text-align: center; }
}