/* herdsplatform.nl: één pagina in de huisstijl van herds (logo C, palet Weide). */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('/fonts/figtree-latin-wght-normal.woff2') format('woff2');
    font-weight: 300 900;
    font-display: swap;
}

:root {
    --bg: #F3F5F1;
    --text: #132B25;
    --muted: #4F625B;
    --primary: #1D3B33;
    --primary-hover: #132B25;
    --on-primary: #FFFFFF;
    --accent: #E2A21A;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0E1A17;
        --text: #E8EFEA;
        --muted: #A9BAB2;
        --primary: #8CC7AE;
        --primary-hover: #A6D6C1;
        --on-primary: #0E1A17;
        --accent: #F0B941;
    }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font: 400 18px/1.6 'Figtree', system-ui, sans-serif;
}
main {
    flex: 1;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 72px 20px 48px;
}
.logo { display: inline-flex; align-items: center; gap: 8px; font: 700 28px/1 'Bricolage Grotesque', sans-serif; color: var(--primary); }
.logo-mark { width: 40px; height: 31px; }
.logo-mark .m { fill: var(--primary); }
.logo-mark .lead { fill: var(--accent); }
h1 { margin: 64px 0 20px; font: 700 clamp(34px, 7vw, 52px)/1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; }
.lead { margin: 0 0 24px; font-size: 24px; font-weight: 600; color: var(--primary); }
p { margin: 0 0 16px; }
.button {
    display: inline-block;
    margin-top: 16px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    text-decoration: none;
}
.button:hover { background: var(--primary-hover); }
.button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.small { margin-top: 12px; font-size: 15px; color: var(--muted); }
footer { padding: 24px 20px; text-align: center; font-size: 14px; color: var(--muted); }