@layer theme {
    :root {
        --hue: 40deg;
    }
}

:root {
    color-scheme: light dark;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--label);
    font-weight: 700;
    text-decoration: none;
}

.mark {
    display: inline-flex;

    & svg {
        display: block;
    }

    & .mark__tile,
    & .mark__pause {
        fill: var(--tint);
    }

    & .mark__cup {
        fill: var(--system-background);
    }

    & .mark__handle {
        stroke: var(--system-background);
    }
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    & .wordmark__name {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1;
    }
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding-block: 2rem 1rem;

    & .hero__title {
        margin: 0;
        font-size: clamp(2.75rem, 1.5rem + 5vw, 5rem);
        font-weight: 800;
        letter-spacing: -0.045em;
        line-height: 1;
        text-wrap: balance;
    }

    & .hero__signal {
        color: var(--tint);
    }

    & .hero__lead {
        max-inline-size: 38rem;
        margin: 0;
        color: var(--secondary-label);
        font-size: 1.25rem;
        line-height: 1.55;
        text-wrap: pretty;
    }
}

.heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding-block: 1rem;

    & .heading__title {
        margin: 0;
        font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1.05;
    }

    & .heading__subtitle {
        margin: 0;
        font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.1;
    }

    & .heading__lead {
        max-inline-size: 40rem;
        margin: 0;
        color: var(--secondary-label);
        font-size: 1.0625rem;
        line-height: 1.55;
    }
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    & .site-footer__company {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    & .site-footer__address {
        color: var(--tertiary-label);
        font-size: 0.8125rem;
        font-style: normal;

        & a {
            color: inherit;
        }
    }

    & .site-footer__links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;

        & a {
            color: var(--secondary-label);
            text-decoration: none;

            &:hover,
            &[aria-current="page"] {
                color: var(--label);
            }
        }
    }
}