:root {
  --bg: #121314;
  --bg-raised: #191a1c;
  --fg: #d6d4cf;
  --fg-strong: #f1efea;
  --dim: #7b7d80;
  --faint: #45474a;
  --line: #242628;
  --accent: #d9a25f;
  --accent-ink: #121314;
  --danger: #d9776b;
  --font: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --size: 14px;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f4ef;
    --bg-raised: #eeebe4;
    --fg: #2e2d2a;
    --fg-strong: #111110;
    --dim: #85827b;
    --faint: #c2beb5;
    --line: #e2ded5;
    --accent: #a8641c;
    --accent-ink: #f6f4ef;
    --danger: #b3463a;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--size) / 1.7 var(--font);
  font-feature-settings: 'calt' 0;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--fg-strong); text-decoration: none; border-bottom: 1px solid var(--faint); }
a:hover { border-color: var(--accent); color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }

.fileline {
  max-width: 680px; margin: 0 auto; padding: 20px 20px 0;
  display: flex; justify-content: space-between;
  color: var(--faint); font-size: 12px;
}

main { max-width: 680px; margin: 0 auto; padding: 14vh 20px 64px; }

.dim { color: var(--dim); }
.accent { color: var(--accent); }
.prompt::before { content: '~/ '; color: var(--dim); }

h1, h2, h3 { color: var(--fg-strong); font-weight: 600; line-height: 1.3; margin: 0; }
h1 { font-size: 22px; }

.lead { margin: 6px 0 40px; color: var(--dim); text-wrap: pretty; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 16px; }
.list .key { color: var(--dim); min-width: 96px; }
.section { margin-top: 40px; }
.section-title { color: var(--dim); margin-bottom: 8px; }
.section-title::before { content: '# '; color: var(--faint); }

/* Blog post */
.post-meta { color: var(--dim); margin: 8px 0 40px; }
.prose { color: var(--fg); }
.prose h2, .prose h3 { margin: 40px 0 12px; font-size: 16px; }
.prose h2::before { content: '## '; color: var(--faint); }
.prose h3::before { content: '### '; color: var(--faint); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre { margin: 0 0 18px; }
.prose ul { padding-left: 2ch; list-style: '- '; }
.prose li::marker { color: var(--dim); }
.prose blockquote { border-left: 2px solid var(--faint); padding-left: 16px; color: var(--dim); }
.prose code { background: var(--bg-raised); padding: 1px 5px; border-radius: 3px; }
.prose pre { background: var(--bg-raised); padding: 14px 16px; border-radius: 4px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose img { max-width: 100%; border-radius: 4px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

/* Forms (login + admin) */
input, textarea, button { font: inherit; color: inherit; }
input, textarea {
  width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 10px; outline: none;
}
input:focus, textarea:focus { border-color: var(--faint); }
button {
  background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--dim);
}
button:hover { color: var(--fg-strong); }
button.primary { color: var(--accent); }
button.danger:hover { color: var(--danger); }
button::before { content: '['; color: var(--faint); }
button::after { content: ']'; color: var(--faint); }

@media (max-width: 560px) {
  main { padding-top: 10vh; }
  .list .key { min-width: 72px; }
}