/* =========================
   Design tokens (predefined)
   ========================= */
:root {
    /* Colors */
    --c-ink: #2b1e28;
    --c-cream: #dedad3;
    --c-plum: #2a0f21; /* aubergine */
    --c-plum-light: #614D5B;
    --c-accent: #E45C3B; /* orange-ish */

    /* Typography */
    --ff-serif: "mencken-std", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --ff-sans: "gill-sans-nova", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;

    --fs-900: clamp(1.9rem, 2.8vw, 3.1rem); /* hero title */
    --fs-500: 1rem;
    --fs-600: 1.3rem;

    --lh-tight: 1.15;
    --lh-normal: 1.55;

    /* Layout */
    --container: 1100px;
    --gutter: clamp(1rem, 3vw, 2rem);

    /* Spacing */
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;

    /* Radius */
    --radius: 16px;

    /* Focus */
    --focus: 2px solid rgba(224, 106, 58, 0.9);
}

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

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

body {
    margin: 0;
    color: var(--c-ink);
    background: var(--c-plum);
    font-family: var(--ff-sans);
    line-height: var(--lh-normal);
}

/* Accessibility: skip link */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    padding: var(--space-2) var(--space-3);
    background: #fff;
    color: #000;
    border-radius: 10px;
    z-index: 9999;
}

.skip-link:focus {
    left: var(--space-3);
    top: var(--space-3);
    outline: var(--focus);
}

/* Container + row system */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

/* Header */
.page-header {
    background: var(--c-plum);
    padding-block: var(--space-5);
}

.header-row {
    justify-content: center;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.brand-logo {
    display: block;
    height: auto;
    max-width: 100%;
}

.brand-subtitle {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.85);
}

/* Hero */
.hero {
    background: var(--c-cream);
    padding-block: clamp(2.25rem, 5vw, 4.5rem);
}

.hero-row {
    width: 100%;
}

.hero-content {
    max-width: 44rem;
    text-align: center;
}

.hero-title {
    margin: 0;
    font-family: var(--ff-serif);
    font-size: var(--fs-900);
    line-height: var(--lh-tight);
    color: rgba(43, 30, 40, 1);
}

.hero-title span {
    color: var(--c-plum-light);
}

.hero-lead {
    margin: var(--space-4) 0 0;
    font-size: var(--fs-600);
    color: rgba(43, 30, 40, 0.85);
}

.hero-figure {
    margin: var(--space-5) 0 0;
    display: flex;
    justify-content: center;
}

.avatar {
    width: 150px;
    height: 150px;
    border-radius: var(--radius);
    object-fit: cover;
    display: block;
    /* subtiele rand zodat de foto “loskomt” van het vlak */
    outline: 1px solid rgba(43, 30, 40, 0.18);
    outline-offset: 3px;
}

/* Footer */
.page-footer {
    background: var(--c-plum);
    padding-block: clamp(2.25rem, 4vw, 4rem);
}

.footer-row {
    justify-content: center;
}

.contact {
    font-style: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.contact-link {
    color: var(--c-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.8rem;
}

.contact-link:hover {
    text-decoration: underline;
}

.contact-link:focus {
    outline: var(--focus);
    outline-offset: 3px;
}

.contact-address {
    color: var(--c-cream);
}

/* Responsive tweaks */
@media (max-width: 520px) {
    .brand-subtitle {
        letter-spacing: 0.14em;
    }

    .contact-link {
        font-size: 1.05rem;
    }

    .hero-lead {
        font-size: 1rem;
    }
}

/* Respect reduced motion (future-proof) */
@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}