@font-face {
    font-family: "Recursive";
    src: url("../fonts/recursive-variable.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --cd-steel: #2f6b8a;
    --cd-steel-deep: #1e4c66;
    --cd-crema: #c8996b;
    --cd-espresso: #14181c;
    --cd-bean: #39424c;
    --cd-cream: #f6efe1;
    --cd-sand-soft: #e9dcc0;
    --cd-paper: #fdf9f0;
    --cd-white: #ffffff;
    --cd-umber: #3a2a1e;
    --cd-dot-close: #d98a7a;
    --cd-dot-minimize: #d9b97a;
    --cd-dot-expand: #8ab98a;
    --cd-hairline: color-mix(in srgb, var(--cd-umber) 15%, transparent);
    --cd-hairline-soft: color-mix(in srgb, var(--cd-umber) 12%, transparent);
    --cd-hairline-strong: color-mix(in srgb, var(--cd-umber) 18%, transparent);
    --cd-hairline-faint: color-mix(in srgb, var(--cd-umber) 10%, transparent);
    --cd-hairline-heavy: color-mix(in srgb, var(--cd-umber) 30%, transparent);
    --cd-sans: "Recursive", "Archivo", system-ui, sans-serif;
    --cd-serif: var(--cd-sans);
    --cd-mono: var(--cd-sans);
    --cd-display: var(--cd-sans);
    --cd-display-weight: 600;
    --cd-gutter: 56px;
    --cd-gutter-narrow: 24px;
    --cd-text-hero: clamp(44px, 5.9vw + 25.2px, 84px);
    --cd-text-title: clamp(42px, 4.4vw + 27.9px, 72px);
    --cd-text-page: clamp(40px, 3.5vw + 28.7px, 64px);
    --cd-text-figure: clamp(40px, 2.4vw + 32.5px, 56px);
    --cd-text-price: clamp(38px, 2.1vw + 31.4px, 52px);
    --cd-text-band: clamp(36px, 1.8vw + 30.4px, 48px);
    --cd-text-section-large: clamp(32px, 1.8vw + 26.4px, 44px);
    --cd-text-section: clamp(30px, 1.5vw + 25.3px, 40px);
    --cd-text-section-small: clamp(29px, 1.3vw + 24.8px, 38px);
    --cd-text-subsection: clamp(27px, 1vw + 23.7px, 34px);
    --cd-text-lead: 20px;
    --cd-text-intro: 19px;
    --cd-text-emphasis: 18px;
    --cd-text-prose: 17px;
    --cd-text-copy-large: 16px;
    --cd-text-copy: 15px;
    --cd-text-body: 14px;
    --cd-text-body-small: 13.5px;
    --cd-text-meta: 12px;
    --cd-text-label: 11px;
    --cd-text-chip: 10px;
    --cd-space-40: 40px;
    --cd-space-50: 50px;
    --cd-space-60: 60px;
    --cd-space-70: 70px;
    --cd-space-80: 80px;
    --cd-space-90: 90px;
    --cd-space-100: 100px;
    --cd-space-110: 110px;
}

*, *::before, *::after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--cd-sand-soft);
    color: var(--cd-espresso);
    font-family: var(--cd-sans);
    font-size: var(--cd-text-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased
}

::selection {
    background: var(--cd-steel);
    color: var(--cd-cream)
}

a {
    color: var(--cd-steel-deep)
}

a:hover {
    color: var(--cd-steel)
}

img {
    max-width: 100%
}

/* Layout primitives */
.container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%
}

.section {
    padding-left: var(--cd-gutter);
    padding-right: var(--cd-gutter)
}

.legal-body {
    padding-bottom: var(--cd-space-70)
}

.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0
}

/* Type atoms */
.kicker {
    font-family: var(--cd-mono);
    font-size: var(--cd-text-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cd-steel)
}

.display {
    font-family: var(--cd-display);
    font-weight: var(--cd-display-weight);
    letter-spacing: -.025em;
    margin: 0;
    overflow-wrap: break-word;
    hyphens: auto
}

.italic {
    font-style: italic
}

.mono {
    font-family: var(--cd-mono)
}

/* Buttons & links */
.button {
    background: var(--cd-steel);
    color: var(--cd-cream);
    padding: 12px 22px;
    border-radius: 999px;
    font-size: var(--cd-text-body);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.button:hover {
    background: var(--cd-steel-deep);
    color: var(--cd-cream)
}

.button-cream {
    background: var(--cd-cream);
    color: var(--cd-espresso);
    padding: 16px 30px;
    border-radius: 999px;
    font-size: var(--cd-text-copy);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.button-cream:hover {
    color: var(--cd-espresso);
    background: var(--cd-white)
}

.arrow-link {
    font-size: var(--cd-text-body);
    font-weight: 500;
    color: var(--cd-steel-deep);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--cd-steel);
    padding-bottom: 2px
}

/* Chips */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.chip {
    font-family: var(--cd-mono);
    font-size: var(--cd-text-chip);
    padding: 3px 8px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--cd-steel) 10%, transparent);
    color: var(--cd-steel-deep)
}

.chip-pill {
    border-radius: 999px;
    padding: 3px 9px
}

@media (max-width: 880px) {
    .section {
        padding-left: var(--cd-gutter-narrow);
        padding-right: var(--cd-gutter-narrow)
    }
}