/* ==========================================================================
   van Berkel Studio — holding page
   ==========================================================================
   Systeemfonts, geen webfonts. Dat scheelt niet alleen laadtijd: het betekent
   ook dat de pagina nul verzoeken naar derden doet. Geen Google Fonts, dus
   geen IP-adressen van bezoekers die bij een advertentiebedrijf belanden en
   geen cookiebanner-discussie. Dezelfde reden waarom de favicon inline SVG is.
   ========================================================================== */

:root {
    --ink:      #15140f;
    --ink-soft: #5c584c;
    --paper:    #f7f6f3;
    --rule:     #e2dfd7;
    --accent:   #7a6a4f;

    --measure:  34rem;   /* leesbreedte: ~65 tekens */
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink:      #f2f0ea;
        --ink-soft: #a29d90;
        --paper:    #15140f;
        --rule:     #302d25;
        --accent:   #c3ad84;
    }
}

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

html {
    /* Voorkomt dat iOS Safari de tekst opblaast bij liggend scherm. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- Hero ---------------------------------------------------------------- */

/* Verticaal centreren met min-height in plaats van height: bij een klein
   scherm in liggende stand mag de inhoud gewoon buiten beeld doorlopen in
   plaats van samengeperst te worden. 100svh (small viewport height) houdt
   rekening met de adresbalk van mobiele browsers; de dvh/vh-regel ervoor is
   de terugval voor oudere browsers. */
.hero {
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 3rem 1.5rem;
}

.hero__inner {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
}

.hero__title {
    margin: 0;
    font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hero__tagline {
    margin: 0.75rem 0 0;
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    line-height: 1.35;
    color: var(--ink-soft);
    text-wrap: balance;
}

.hero__note {
    margin: 2.5rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-soft);
}

.hero__contact {
    margin: 0.5rem 0 0;
}

/* --- Links --------------------------------------------------------------- */

a {
    color: inherit;
}

.mail {
    color: var(--accent);
    text-decoration: none;
    /* Onderstreping die de staarten van de letters niet doorsnijdt. */
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    padding-bottom: 0.1em;
    transition: border-color 0.15s ease, color 0.15s ease;
    /* Lange adressen mogen breken in plaats van horizontaal scrollen
       veroorzaken op smalle schermen. */
    overflow-wrap: anywhere;
}

.mail:hover,
.mail:focus-visible {
    border-bottom-color: var(--accent);
}

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

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}