@font-face {
  font-family: "Instrument Serif";
  src: url("/brand/fonts/instrument-serif-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/brand/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/brand/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/brand/fonts/inter-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/brand/fonts/inter-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --ink: #0E1A2B;
  --amber: #E8A33D;
  --amber-deep: #A8791A;
  --paper: #F5F1EA;
  --paper-deep: #ECE6DA;
  --ink-60: #5B6878;
  --ink-20: #7A8494;
  --paper-on-ink-body: rgba(245, 241, 234, 0.85);
  --paper-on-ink-legend: rgba(245, 241, 234, 0.7);
  --x: 18px;
  --sp-0: 0;
  --sp-1: calc(var(--x) * 0.25);
  --sp-2: calc(var(--x) * 0.5);
  --sp-3: calc(var(--x) * 1);
  --sp-4: calc(var(--x) * 2);
  --sp-5: calc(var(--x) * 3);
  --sp-6: calc(var(--x) * 5);
  --sp-7: calc(var(--x) * 8);
  --type-wordmark: "Instrument Serif", Georgia, serif;
  --type-mono: "IBM Plex Mono", ui-monospace, monospace;
  --type-body: "Inter", system-ui, sans-serif;
  --size-legend: 13px;
  --size-label: 15px;
  --size-body: 17px;
  --size-stat: 28px;
  --size-h3: 22px;
  --size-h2: 32px;
  --size-h1: 48px;
  --line-tight: 1.1;
  --line-body: 1.55;
  --track-wordmark: 0.04em;
  --track-endorse: 0.12em;
  --track-label: 0.08em;
  --track-legend: 0.16em;
  --hairline: 1px solid var(--ink-20);
  --hairline-strong: 1px solid var(--ink);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --tick: calc(var(--x) / 3);
  --page-max: 1120px;
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--type-body);
  font-size: var(--size-body);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-family: var(--type-wordmark);
  font-size: var(--size-h1);
  font-weight: 400;
  line-height: var(--line-tight);
  letter-spacing: var(--track-wordmark);
}

h2 {
  font-family: var(--type-body);
  font-size: var(--size-h2);
  font-weight: 500;
  line-height: var(--line-tight);
}

h3 {
  font-family: var(--type-body);
  font-size: var(--size-h3);
  font-weight: 500;
  line-height: var(--line-tight);
}

.wordmark {
  font-family: var(--type-wordmark);
  font-size: var(--size-h1);
  font-weight: 400;
  line-height: var(--line-tight);
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
}

.endorse {
  font-family: var(--type-mono);
  font-size: var(--size-label);
  font-weight: 500;
  line-height: var(--line-tight);
  letter-spacing: var(--track-endorse);
  text-transform: uppercase;
}

.legend {
  font-family: var(--type-mono);
  font-size: var(--size-legend);
  font-weight: 400;
  line-height: var(--line-tight);
  letter-spacing: var(--track-legend);
  text-transform: uppercase;
  color: var(--ink-60);
}

.label {
  font-family: var(--type-mono);
  font-size: var(--size-label);
  font-weight: 400;
  line-height: var(--line-tight);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.numeric {
  font-family: var(--type-mono);
  font-variant-numeric: tabular-nums;
}