/* Local font faces: the browser downloads only the weights used on the page. */
@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-Black.woff2?v=bfc711f8a6') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-BlackItalic.woff2?v=321a78df99') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-Bold.woff2?v=ff4a20266f') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-BoldItalic.woff2?v=bab12842bf') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-ExtraBold.woff2?v=eeefbef9d3') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-ExtraBoldItalic.woff2?v=3dda1e9cb5') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-Medium.woff2?v=1b7522949f') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-MediumItalic.woff2?v=cc910a2c24') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-Regular.woff2?v=386ea97ab0') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-SemiBold.woff2?v=92da0b8a9d') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo';
    src: url('../fonts/Chivo-SemiBoldItalic.woff2?v=6feacd1c89') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-Black.woff2?v=4e093aa954') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-BlackItalic.woff2?v=75455b34f9') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-Bold.woff2?v=aa0ecf50a4') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-BoldItalic.woff2?v=371abf5aed') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-ExtraBold.woff2?v=d02412197b') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-ExtraBoldItalic.woff2?v=4a1d1e8769') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-ExtraLight.woff2?v=edc6149b76') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-ExtraLightItalic.woff2?v=175cb17171') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-Italic.woff2?v=bb95cce0ee') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-Light.woff2?v=00d8c0002f') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-LightItalic.woff2?v=17643759cb') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-Medium.woff2?v=2fed2c6511') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-MediumItalic.woff2?v=8f0feea5d5') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-Regular.woff2?v=aa66611c7d') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-SemiBold.woff2?v=2d0f82dbee') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-SemiBoldItalic.woff2?v=8d2bf0f816') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-Thin.woff2?v=210eaa7a10') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../fonts/HankenGrotesk-ThinItalic.woff2?v=4961dad69b') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

:root {
    --font-heading: 'Chivo', Arial, Helvetica, sans-serif;
    --font-body: 'Hanken Grotesk', Arial, Helvetica, sans-serif;
}

/* Replace legacy component font families while preserving their layout and sizes. */
html,
body,
body [data-component-instance],
body :is(.font-body, .font-sans, .big-text, .regular-text, .small-text) {
    font-family: var(--font-body);
}

body :is(h1, h2, h3, h4, h5, h6, .font-heading,
    .h1-title, .h2-title, .subtitle-title, .h3-title, .h4-title, .h5-title, .h6-title) {
    font-family: var(--font-heading);
}

/* Controls retain their existing font sizes and use the readable body family. */
body :is(button, input, select, textarea),
body .site-header :is(a, button) {
    font-family: var(--font-body);
}

body :is(.h1-title, .h2-title, .subtitle-title, .h3-title, .h4-title, .h5-title, .h6-title) {
    font-weight: 600;
    text-wrap: balance;
}