@font-face { font-family: "Big Shoulders"; src: url("/fonts/big-shoulders-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-next-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-next-italic-latin.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
    --tf-paper: #f3ede2;
    --tf-paper-deep: #e9dfcd;
    --tf-card: #fbf8f2;
    --tf-ink: #1f1a17;
    --tf-slate: #5b5650;
    --tf-brick: #a3402e;
    --tf-brick-deep: #7e2f21;
    --tf-bottle: #1f4a3a;
    --tf-bottle-deep: #143428;
    --tf-brass: #b98a3e;
    --tf-gilt: #d9b56a;
    --tf-line: rgb(31 26 23 / 14%);
    --tf-line-strong: rgb(31 26 23 / 32%);
    --tf-display: "Big Shoulders", "Arial Narrow", sans-serif;
    --tf-text: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
    --tf-gutter: clamp(1rem, 4vw, 3rem);
    --tf-measure: 38rem;
    --tf-radius: 3px;
    --tf-step--1: clamp(.83rem, .8rem + .15vw, .9rem);
    --tf-step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
    --tf-step-1: clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
    --tf-step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --tf-step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
    --tf-step-4: clamp(2.8rem, 2rem + 4.2vw, 5.6rem);
    --ui-color-text: var(--tf-ink);
    --ui-color-surface: var(--tf-card);
    --ui-color-border: var(--tf-line-strong);
    --ui-color-accent: var(--tf-brick);
    --ui-color-accent-text: var(--tf-paper);
    --ui-color-error: var(--tf-brick-deep);
    --ui-radius-control: var(--tf-radius);
    --ui-radius-surface: var(--tf-radius);
    --ui-border-width: 1.5px;
    --ui-space-sm: .6rem;
    --ui-space-md: 1.1rem;
    --ui-space-lg: 1.6rem;
    --ui-font-body: var(--tf-text);
    --ui-size-body: var(--tf-step-0);
    color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--tf-paper);
    color: var(--tf-ink);
    font: 400 var(--tf-step-0)/1.55 var(--tf-text);
    font-feature-settings: "ss01";
}

main { flex: 1; }

h1, h2, h3 {
    margin: 0;
    font-family: var(--tf-display);
    font-weight: 800;
    line-height: .95;
    letter-spacing: .01em;
    text-wrap: balance;
}

h1 { font-size: var(--tf-step-4); text-transform: uppercase; }
h2 { font-size: var(--tf-step-3); text-transform: uppercase; }
h3 { font-size: var(--tf-step-1); font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { color: var(--tf-brick); }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--tf-brass); outline-offset: 3px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font: 700 var(--tf-step--1)/1 var(--tf-text);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tf-brick);
}

.lede { font-size: var(--tf-step-1); line-height: 1.45; max-width: var(--tf-measure); color: var(--tf-slate); }

.tf-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}