/* ================================================================
     DESIGN TOKENS
     Change these values to quickly restyle the whole site.
     ================================================================ */

:root {
    --color-ink: #17221c;
    --color-paper: #f3efe6;
    --color-coral: #bd3d2b;
    --color-coral-text: #bd3d2b;
    --color-line: rgba(23, 34, 28, 0.22);

    --font-sans: Arial, Helvetica, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;

    --page-padding: clamp(1.25rem, 4vw, 4.5rem);
    --page-width: 1440px;
}


/* ================================================================
     RESET
     Small browser-normalization layer. No external reset required.
     ================================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--color-ink);
    background: var(--color-paper);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ================================================================
     SHARED TYPOGRAPHY
     ================================================================ */

h1,
h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.045em;
}

h1 {
    max-width: 1000px;
    margin: 0;
    font-size: clamp(3rem, 7.4vw, 7.4rem);
    line-height: 0.93;
}

.home-title {
    margin: 0;
    font: inherit;
    line-height: 1;
    letter-spacing: normal;
}

.eyebrow {
    margin: 0 0 1.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lede {
    max-width: 660px;
    margin: 2rem 0 0;
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
}


/* ================================================================
     SHARED PAGE CONTAINER
     ================================================================ */

.wrap {
    width: min(100%, var(--page-width));
    margin-inline: auto;
    padding-inline: var(--page-padding);
}