/* TYPOGRAPHY */
@font-face {
    font-family: 'Circular XX';
    src: url('../fonts/CircularXX-Regular.woff2') format('woff2'),
        url('../fonts/CircularXX-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular XX';
    src: url('../fonts/CircularXX-BlackItalic.woff2') format('woff2'),
        url('../fonts/CircularXX-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Circular XX';
    src: url('../fonts/CircularXX-Bold.woff2') format('woff2'),
        url('../fonts/CircularXX-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Circular XX', sans-serif;
    font-size: clamp(1rem, 1.455vw, 1.375rem);
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Apply these utilities to headings, copy, buttons and labels. */
.t-xl {
    font-size: clamp(3.5rem, 6.615vw, 6.25rem);
    letter-spacing: -.03em;
    line-height: .9;
    font-weight: 900;
    font-style: italic;
}

.t-l {
    font-size: clamp(1.625rem, 2.515vw, 2.375rem);
    letter-spacing: -.02em;
    line-height: 1.1;
    font-weight: 900;
    font-style: italic;
}

.t-m {
    font-style: normal;
    font-size: clamp(1rem, 1.455vw, 1.375rem);
    line-height: 1.3;
    font-weight: 400;
}

.t-s {
    font-style: normal;
    font-size: clamp(.8125rem, 1.125vw, 1.0625rem);
    line-height: 1.3;
    font-weight: 400;
}

.t-xs {
    font-size: clamp(.6875rem, .8vw, .8125rem);
    line-height: 1.4;
    font-weight: 400;
}

.t-bold {
    font-weight: 700;
}

.t-muted {
    color: var(--grey);
}

.t-white-muted {
    color: var(--white-muted);
}