/* The small pages (404 and privacy): the same paper, ink and type as the site, without the point field. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/jost-300.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jost-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); }

:root {
  --paper: #FFFFFF; --ink: #101010; --ink-2: #4B4B4B; --mute: #A1A1A1; --rule: #E8E8E8;
  --font-display: "Jost", "Futura", "Century Gothic", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 16px;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-text); font-weight: 300; font-size: 14.5px; line-height: 1.95;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
.mark { display: block; width: 84px; height: 28px; margin: 0 0 40px; color: var(--ink); }
h1 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 2.8vw, 46px); line-height: 1.2; letter-spacing: -0.005em; }
p { margin: 0 0 30px; color: var(--mute); }
.pill {
  display: inline-flex; align-items: center; gap: 30px; text-decoration: none;
  padding: 10px 16px 10px 20px; border: 1px solid var(--ink); border-radius: 999px;
  font-weight: 400; font-size: 13px; line-height: 1.4; letter-spacing: 0.005em;
  transition: background-color 0.3s, color 0.3s;
}
.pill__arrow { transition: transform 0.35s var(--ease); }
.pill:hover { background: var(--ink); color: var(--paper); }
.pill:hover .pill__arrow { transform: translateX(4px); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.pill:focus-visible { border-radius: 999px; }

/* 404: everything centred */
.center { text-align: center; }
.center .mark { margin: 0 auto 40px; }

/* privacy: a readable column */
.doc { width: min(100%, 560px); }
.doc h1 { margin-bottom: 28px; }
.doc p { color: var(--ink-2); margin-bottom: 18px; }
.doc p a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc .meta { margin: 34px 0 30px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--mute); }