@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Light.woff2') format('woff2');
    font-weight: 300;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/Euclid-CircularA-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular A';
    src: url('../fonts/EuclidCircularA-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style:  normal;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    line-height: 1.15;
    color:       var(--color-text);
}

h1, .h1 {
    font-size:      clamp(3rem, 7vw, 6rem);
    font-weight:    var(--fw-semibold);
    letter-spacing: -0.03em;
    line-height:    0.9;
    text-transform: uppercase;
}

h2, .h2 {
    font-size:      clamp(2rem, 4vw, 3rem);
    font-weight:    var(--fw-light);
    text-transform: uppercase;
}

h3, .h3 {
    font-size:   clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--fw-light);
}

h4, .h4 { font-size: clamp(1.25rem, 2vw, 1.5rem);   font-weight: var(--fw-regular); }
h5, .h5 { font-size: clamp(1rem, 1.5vw, 1.25rem);    font-weight: var(--fw-regular); }
h6, .h6 { font-size: 1rem;                            font-weight: var(--fw-regular); }

body {
    font-weight: var(--fw-light);
}

p {
    font-family: var(--font-body);
    font-size:   1rem;
    font-weight: var(--fw-light);
    line-height: var(--line-height);
    color:       var(--color-text);
}

.text-label {
    font-size:      1rem;
    font-weight:    var(--fw-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:          var(--color-orange);
}

.text-nav {
    font-size:   1.0625rem;
    font-weight: var(--fw-light);
}

.text-price {
    font-size:   0.6875rem;
    font-weight: var(--fw-light);
}

.text-footer {
    font-size:      0.875rem;
    font-weight:    var(--fw-regular);
    letter-spacing: 0.04em;
    color:          var(--color-gray);
}

.text-ticker {
    font-size:      1rem;
    font-weight:    var(--fw-medium);
    letter-spacing: 0.05em;
}

.text-btn {
    font-size:      1rem;
    font-weight:    var(--fw-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.text-btn--medium {
    font-size:      0.875rem;
    font-weight:    var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.text-lead  { font-size: 1.125rem; font-weight: var(--fw-light); line-height: 1.5; }
.text-sm    { font-size: 0.875rem; }
.text-xs    { font-size: 0.75rem; }
.text-muted { color: var(--color-muted); }
.text-upper { text-transform: uppercase; letter-spacing: 0.05em; }

a {
    color:      inherit;
    transition: color var(--transition);
}

a:hover { opacity: 0.75; }