@layer base {
    :root {
        --ff-primary: "Montserrat", sans-serif;
        --ff-secondary: "Martian Mono", monospace;

        --fs-38-68: clamp(2.375rem, 1.6786rem + 2.8571vw, 4.25rem);
        --fs-28-52: clamp(1.75rem, 1.1929rem + 2.2857vw, 3.25rem);
        --fs-25-46: clamp(1.5625rem, 1.075rem + 2vw, 2.875rem);
        --fs-22-38: clamp(1.375rem, 1.0036rem + 1.5238vw, 2.375rem);
        --fs-18-28: clamp(1.125rem, 0.8929rem + 0.9524vw, 1.75rem);
        --fs-18-24: clamp(1.125rem, 0.9857rem + 0.5714vw, 1.5rem);
        --fs-18-22: clamp(1.125rem, 1.0321rem + 0.381vw, 1.375rem);
        --fs-17-24: clamp(1.0625rem, 0.9rem + 0.6667vw, 1.5rem);
        --fs-17-22: clamp(1.0625rem, 0.9464rem + 0.4762vw, 1.375rem);
        --fs-14-22: clamp(0.875rem, 0.6893rem + 0.7619vw, 1.375rem);
        --fs-18-20: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);
        --fs-16-20: clamp(1rem, 0.9071rem + 0.381vw, 1.25rem);
        --fs-17-19: clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem);
        --fs-17-16: clamp(1.0625rem, 1.0857rem + -0.0952vw, 1rem);
        --fs-13-16: clamp(0.8125rem, 0.7429rem + 0.2857vw, 1rem);
        --fs-11-16: clamp(0.6875rem, 0.5714rem + 0.4762vw, 1rem);
        --fs-16-18: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);
        --fs-15-16: clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem);
        --fs-14-16: clamp(0.875rem, 0.8286rem + 0.1905vw, 1rem);
        --fs-12-15: clamp(0.75rem, 0.6571rem + 0.381vw, 1rem);
        --fs-14-15: clamp(0.875rem, 0.8518rem + 0.0952vw, 0.9375rem);
        --fs-11-13: clamp(0.6875rem, 0.6411rem + 0.1905vw, 0.8125rem);
        --fs-10-12: clamp(0.625rem, 0.5786rem + 0.1905vw, 0.75rem);
        --fs-8-10: clamp(0.5rem, 0.4536rem + 0.1905vw, 0.625rem);
    }

    *, ::before, ::after {
        text-box: trim-both cap alphabetic;
    }

    html {
        text-rendering: geometricPrecision;
    }

    body {
        font-family: var(--ff-primary);
        font-size: var(--fs-14-16);
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: -.05em;
        color: var(--c-body-grey);
        background-color: var(--c-white);
    }

    a {
        color: var(--c-orange);
        text-decoration: underline;
        text-underline-offset: 15%;
    }

    :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) {
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: -.06em;
        color: var(--c-blue);
    }

    :is(h1, .h1) {
        font-size: var(--fs-38-68);
    }

    :is(h2, .h2) {
        font-size: var(--fs-28-52);
    }

    :is(h3, .h3) {
        font-size: var(--fs-25-46);
    }

    :is(h4, .h4) {
        font-size: var(--fs-22-38);
    }

    :is(h5, .h5) {
        font-size: var(--fs-18-28);
        line-height: 1.2;
    }

    :is(h6, .h6, .btn) {
        font-family: var(--ff-secondary);
        font-size: var(--fs-11-13);
        font-weight: 300;
        line-height: 1.3;
        letter-spacing: -.01em;
        text-transform: uppercase;
        color: var(--c-dark-blue);
        text-indent: calc(1em - 2px + .375rem) hanging;
    }

    :is(h6, .h6)::before {
        content: '';
        display: inline-block;
        width: calc(1em - 2px);
        height: calc(1em - 2px);
        margin-right: .375rem;
        background-image: var(--i-double-slash);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: -1px;
    }

    :is(strong, b) {
        font-weight: 700;
    }

    :where(.is-dark) {
        color: var(--c-white);
        background-color: var(--c-dark-blue);
    }

    :where(.is-dark) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .btn) {
        color: var(--c-white);
    }
}