:root {
  --ink: #0a0f1c;
  --ink-2: #0f1628;
  --line: #22304f;
  --line-soft: #1a2540;

  --paper: #f5f7fc;
  --paper-2: #eaeff9;
  --paper-line: #d6deee;

  --text: #e8eefc;
  --muted: #93a3c4;
  --muted-dark: #55627e;

  --blue: #3d8bff;
  --blue-hi: #6aa8ff;
  --blue-lo: #1d4fb8;
  --blue-wash: #dce8ff;
  --green: #4fd1a1;

  --panel: #0b1122;
  --panel-line: #2a3a63;
  --panel-rule: #1e2a48;
  --panel-muted: #8696b8;

  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1200px;
  --gutter: 24px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

svg { display: block; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.mono { font-family: var(--mono); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 680px) {
  :root { --gutter: 16px; }
  body { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}