@font-face {
    font-family: Geom;
    font-weight: 300 900;
    font-display: swap;
    src: url("geom-variable.woff2") format("woff2");
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #fbfbfb;
    color: #010101;
    font: 300 18px/1.6 Geom, sans-serif;
}

a {
    color: inherit;
}

strong {
    font-weight: 400;
}

header {
    max-width: 752px;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 2rem);
}

header img {
    display: block;
    width: 158px;
    height: auto;
}

.cover {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 112px 32px;
    background: url("hero.webp") center / cover fixed;
}

/* iOS ignores fixed backgrounds */
@supports (-webkit-touch-callout: inherit) {
    .cover {
        background-attachment: scroll;
    }
}

.card {
    width: 100%;
    max-width: 896px;
    padding: 64px 64px 0;
    background: #fbfbfb;
    border-radius: 48px 8px;
    text-align: center;
}

.card p {
    max-width: 672px;
    margin: 24px auto 0;
    font-size: 16px;
}

.card .lead {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.417), 18px);
}

.card hr {
    width: 100px;
    margin: 128px auto 0;
    border: 0;
    border-top: 2px solid currentColor;
}

footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1328px;
    margin: 0 auto;
    padding: 290px 1.5rem 1.5rem;
    font-size: 16px;
}

footer img {
    width: 42px;
    height: auto;
}

footer a,
.card a {
    text-decoration: none;
}

.page {
    max-width: 672px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    font-size: 16px;
}

.page h3 {
    margin-top: 2em;
}

@media (max-width: 600px) {
    .cover {
        padding: 48px 16px;
    }

    .card {
        padding: 32px 24px 0;
    }

    footer {
        padding-top: 96px;
    }
}