:root {
	--ff-color-clay: #b95735;
	--ff-color-spritz: #f36c21;
	--ff-color-court: #284a3b;
	--ff-color-cream: #f4efe3;
	--ff-color-paper: #fbf8f0;
	--ff-color-night: #161b20;
	--ff-color-ball: #d7ed3a;
	--ff-color-white: #fff;
	--ff-color-muted: #6b6b65;
	--ff-space-xs: clamp(.375rem, .25rem + .35vw, .625rem);
	--ff-space-sm: clamp(.75rem, .6rem + .5vw, 1.125rem);
	--ff-space-md: clamp(1.125rem, .9rem + .8vw, 1.75rem);
	--ff-space-lg: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
	--ff-space-xl: clamp(3rem, 2rem + 3.5vw, 5.5rem);
	--ff-space-2xl: clamp(4.5rem, 3rem + 6vw, 8rem);
	--ff-radius-sm: 6px;
	--ff-radius-md: 12px;
	--ff-content-width: 1280px;
	--ff-reading-width: 760px;
	--ff-font-display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
	--ff-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ff-font-editorial: Georgia, "Times New Roman", serif;
	--ff-font-hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
	--ff-shadow-card: 0 18px 50px rgba(22, 27, 32, .12);
}

html { scroll-behavior: smooth; }
body { background: var(--ff-color-paper); color: var(--ff-color-night); font-family: var(--ff-font-body); }
body, button, input, select, textarea { font-family: var(--ff-font-body); }
img { height: auto; max-width: 100%; }
::selection { background: var(--ff-color-ball); color: var(--ff-color-night); }

.ff-display,
.ff-headline {
	font-family: var(--ff-font-display);
	font-stretch: condensed;
	font-weight: 900;
	letter-spacing: -.045em;
	line-height: .88;
	text-transform: uppercase;
}
.ff-display { font-size: clamp(4rem, 13vw, 11rem); }
.ff-headline { font-size: clamp(2.25rem, 5.2vw, 5.25rem); }
.ff-subheadline { font-family: var(--ff-font-editorial); font-size: clamp(1.65rem, 3vw, 3.4rem); line-height: 1.02; }
.ff-body { font-size: clamp(1rem, .96rem + .2vw, 1.125rem); line-height: 1.65; }
.ff-label,
.ff-meta { font-size: .75rem; font-weight: 800; letter-spacing: .075em; line-height: 1.2; text-transform: uppercase; }
.ff-meta { color: var(--ff-color-muted); font-size: .6875rem; }
.ff-handwritten { color: var(--ff-color-spritz); font-family: var(--ff-font-hand); font-size: clamp(2rem, 4vw, 4rem); line-height: .98; transform: rotate(-3deg); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--ff-color-ball);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}