/* Tokens from docs/grout-ui-spec-v0.1.md §2. Dark only, monospace, sentence case.
   Caps only in the wordmark. */
:root {
  --base: #1a1c20;
  --panel: #23262b;
  --line: #353a41;
  --ink: #e8e4dc;
  --ink2: #9ba1aa;
  --ink3: #5b616a;
  --accent: #37b8a8; /* t5 */
  --unit: 4px;
}

* { box-sizing: border-box; }

html {
  background: var(--base);
  color-scheme: dark;
}

body {
  margin: 0;
  padding: calc(var(--unit) * 12) calc(var(--unit) * 6) calc(var(--unit) * 10);
  background: var(--base);
  color: var(--ink);
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.page {
  max-width: 62ch;
  margin: 0 auto;
}

/* Wordmark — the only caps on the site. */
.wordmark {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--ink);
}

a.wordmark { text-decoration: none; }
a.wordmark:hover { color: var(--accent); }

h1.title,
h2 {
  margin: calc(var(--unit) * 10) 0 calc(var(--unit) * 2);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

p {
  margin: calc(var(--unit) * 3) 0;
  color: var(--ink);
}

p.lede { margin-top: calc(var(--unit) * 6); }

hr + h2 { margin-top: 0; }

p.meta {
  color: var(--ink2);
}

hr {
  height: 0;
  margin: calc(var(--unit) * 8) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink3);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

nav {
  margin-top: calc(var(--unit) * 3);
  color: var(--ink3);
}

nav a { margin-right: calc(var(--unit) * 3); }

nav a[aria-current="page"] {
  color: var(--ink2);
  text-decoration: none;
}

footer {
  margin-top: calc(var(--unit) * 10);
  padding-top: calc(var(--unit) * 4);
  border-top: 1px solid var(--line);
  color: var(--ink3);
  font-size: 12px;
}

footer p { margin: 0; color: var(--ink3); }

@media (max-width: 480px) {
  body { padding: calc(var(--unit) * 8) calc(var(--unit) * 4); }
  .wordmark { font-size: 24px; }
}