:root {
  --bg: #f5f1ea;
  --fg: #0e0e0e;
  --accent: #1f6f3a;
  --dim: color-mix(in oklab, var(--fg) 55%, var(--bg));
  --line: color-mix(in oklab, var(--fg) 22%, var(--bg));
  --pad: clamp(20px, 2.4vw, 36px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 22px var(--pad) 18px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.brand { font-weight: 500; }

.back, .nav-link {
  font-family: "Newsreader", "Source Serif Pro", Georgia, serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 500;
  color: var(--fg);
  transition: color 0.2s ease;
}
.back:hover, .nav-link:hover { color: var(--accent); }

@media (max-width: 820px) {
  :root { --pad: 18px; }
  .topbar { padding: 16px var(--pad) 12px; }
  .back, .nav-link { font-size: 16px; }
}