@font-face {
    font-family: Rhode;
    src: url("../assets/fonts/RhodeBlackWide.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Rhode;
    src: url("../assets/fonts/RhodeMediumExtended.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Rhode;
    src: url("../assets/fonts/RhodeBoldWide.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Omnes;
    src: url("../assets/fonts/Omnes Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Omnes;
    src: url("../assets/fonts/Omnes Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Omnes;
    src: url("../assets/fonts/Omnes Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Interstate Cond Mono";
    src: url("../assets/fonts/Interstate Cond Mono.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Interstate Cond Mono";
    src: url("../assets/fonts/Interstate Cond Mono Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Interstate Cond Mono";
    src: url("../assets/fonts/Interstate Cond Mono - Lgt.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-h1: "Rhode", sans-serif;
    --font-section: "Omnes", sans-serif;
    --font-subheadline: "Omnes", sans-serif;
    --font-body: "Omnes", sans-serif;
    --font-nav: "Interstate Cond Mono", monospace;
    --font-kicker: "Interstate Cond Mono", monospace;
    --font-caption: "Interstate Cond Mono", monospace;
    --size-h1: 64px;
    --size-section: 40px;
    --size-subheadline: 28px;
    --size-body: 18px;
    --size-body-small: 16px;
    --size-nav: 15px;
    --size-kicker: 14px;
    --size-caption: 13px;
}

body {
    font-family: var(--font-body);
    font-size: var(--size-body);
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.text-h1 {
    font-family: var(--font-h1);
    font-size: var(--size-h1);
    font-weight: 900;
    line-height: 1.1;
}

.text-section-headline {
    font-family: var(--font-section);
    font-size: var(--size-section);
    font-weight: 900;
    line-height: 1.2;
}

.text-subheadline {
    font-family: var(--font-subheadline);
    font-size: var(--size-subheadline);
    font-weight: 900;
    line-height: 1.3;
}

.text-body {
    font-family: var(--font-body);
    font-size: var(--size-body);
    font-weight: 500;
    line-height: 1.6;
}

.text-body-small {
    font-family: var(--font-body);
    font-size: var(--size-body-small);
    font-weight: 500;
    line-height: 1.6;
}

.text-kicker {
    font-family: var(--font-kicker);
    font-size: var(--size-kicker);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.text-caption {
    font-family: var(--font-caption);
    font-size: var(--size-caption);
    font-weight: 300;
    line-height: 1.4;
}

@media (width <= 900px) {
    :root {
        --size-h1: 52px;
        --size-section: 34px;
        --size-subheadline: 24px;
        --size-body: 17px;
        --size-body-small: 15px;
        --size-nav: 14px;
        --size-kicker: 13px;
        --size-caption: 12px;
    }
}

@media (width <= 640px) {
    :root {
        --size-h1: 38px;
        --size-section: 28px;
        --size-subheadline: 20px;
        --size-body: 16px;
        --size-body-small: 14px;
        --size-nav: 13px;
        --size-kicker: 12px;
        --size-caption: 11px;
    }
}