* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--fs);
    background: var(--canvas);
    color: var(--stone);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-size: 16.5px;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
}

p {
    margin: 0;
}

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

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

[hidden] {
    display: none !important;
}

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

.fd {
    font-family: var(--fd);
}

.it {
    font-style: normal;
}

.teal {
    color: var(--teal);
}

.coral {
    color: var(--coral-k);
}

.green {
    color: var(--green);
}

.accent {
    color: var(--teal);
}

.accent--coral {
    color: var(--coral-k);
}

.accent--green {
    color: var(--green);
}

.accent--bright {
    color: var(--teal-bright);
}

.accent--coral-bright {
    color: var(--coral);
}

.accent--green-bright {
    color: var(--dk-green);
}

.accent--pale {
    color: #D9F5F0;
}

.lk {
    font-family: var(--fm);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .03em;
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lk:hover {
    color: var(--teal-deep);
}

.link {
    color: var(--teal);
    font-weight: 600;
    transition: color .2s;
}

.link:hover {
    color: var(--teal-deep);
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.reveal--visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}