@font-face {
    font-family: "DM Sans";
    src: url("/fonts/instrument-sans/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
}


/* ========================================
   GLOBAL VARIABLES
======================================== */

:root {
    --site-bg: #f5f4f1;

    --surface: #ffffff;
    --surface-soft: #efeeea;

    --text-primary: #111111;
    --text-secondary: #686868;

    --border-soft: rgba(17, 17, 17, 0.08);
}


/* ========================================
   RESET
======================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;

    background: var(--site-bg);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ========================================
   BODY
======================================== */

body {
    min-height: 100vh;

    margin: 0;

    font-family:
        "DM Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-weight: 400;

    color: var(--text-primary);

    background: var(--site-bg);
}


/* ========================================
   FORM ELEMENTS
======================================== */

button,
input,
textarea,
select {
    font: inherit;
}


/* ========================================
   SCROLL REVEAL
======================================== */

.scroll-reveal-enabled
[data-scroll-reveal] {
    opacity: 0;

    transform:
        translate3d(
            0,
            22px,
            0
        );

    transition:
        opacity 620ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        transform 720ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    will-change:
        opacity,
        transform;
}

.scroll-reveal-enabled
[data-scroll-reveal].is-revealed {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


/* Accessibility */

@media (
prefers-reduced-motion: reduce
) {

    .scroll-reveal-enabled
    [data-scroll-reveal] {
        opacity: 1;

        transform: none;

        transition: none;
    }

}