/* Tokens are copied from docs/BRAND.md. Use the variables below, never raw hex values. */
:root {
  /* color */
  --paper: #f6f3ec;
  --paper-raised: #ffffff;
  --ink: #1a1d1c;
  --ink-muted: #585d5a;
  --rule: #d8d3c6;
  --proof: #0b5c68;
  --on-proof: #ffffff;
  --proof-tint: #d6e8e8;
  --rot: #ad430e;
  --rot-tint: #fbe9de;

  /* type */
  --font-display: "Newsreader", Georgia, serif;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* spacing */
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;

  /* radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;
}

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

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
}

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

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/26px var(--font-sans);
}

.page {
  max-width: calc(680px + 2 * var(--space-4));
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-12);
}

.wordmark {
  margin: 0 0 var(--space-12);
  font: 500 18px/26px var(--font-display);
}

h1 {
  margin: 0 0 var(--space-6);
  font: 500 56px/60px var(--font-display);
  text-wrap: balance;
}

h2 {
  margin: var(--space-12) 0 var(--space-4);
  font: 500 30px/36px var(--font-display);
}

p,
ul,
pre {
  margin: 0 0 var(--space-4);
}

ul {
  padding-left: var(--space-6);
}

li + li {
  margin-top: var(--space-2);
}

strong {
  font-weight: 600;
}

a {
  color: var(--proof);
}

a:focus-visible {
  outline: 2px solid var(--proof);
  outline-offset: 2px;
}

code {
  font: 400 14px/22px var(--font-mono);
}

pre {
  padding: var(--space-4);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.links {
  padding-left: 0;
  list-style: none;
}

.links li + li {
  margin-top: 0;
}

.links a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

.footer {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 20px;
}

.footer p {
  margin: 0;
}

@media (max-width: 480px) {
  h1 {
    font-size: 30px;
    line-height: 36px;
  }

  .wordmark {
    margin-bottom: var(--space-6);
  }
}