/* One stylesheet, because the site is two pages and neither of them is an app. */
:root {
  --bg: #fbfaf8;
  --ink: #16211f;
  --meta: #6a7b77;
  --line: #e2e0da;
  --teal: #0f766e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1211;
    --ink: #e8ecea;
    --meta: #8b9c98;
    --line: #1e2b28;
    --teal: #5eead4;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    16px/1.6 ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    Inter,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 18vh 1.5rem 6rem;
}
h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 7vw, 2.75rem);
  letter-spacing: -0.022em;
  font-weight: 600;
}
p {
  margin: 0 0 1rem;
  max-width: 30rem;
}
.lede {
  font-size: 1.125rem;
}
.meta {
  color: var(--meta);
  font-size: 0.9375rem;
}
a {
  color: var(--teal);
  text-underline-offset: 3px;
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}