:root {
  color-scheme: dark;
  --ink: #e9e9e4;
  --muted: #a8a8a1;
  --accent: #d1f26d;
  --background: #11110f;
}

* { box-sizing: border-box; }

html { background: var(--background); }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(circle at 20% 0%, #1c1c17 0, var(--background) 34rem);
  color: var(--ink);
  font: 400 1.08rem/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

main { width: min(100%, 43rem); }
.intro { padding: 1rem 0; }
.eyebrow { color: var(--muted); margin: 0; }
h1 { font-size: clamp(2.75rem, 10vw, 4.8rem); letter-spacing: -.09em; line-height: 1; margin: .2rem 0 2.5rem; }
.about { color: var(--muted); max-width: 40rem; }
.about p { margin: 0 0 1.25rem; }
a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .2em; }
a:hover, a:focus-visible { color: var(--accent); }
.links { display: grid; gap: .65rem; margin-top: 2.25rem; }
.links a { text-decoration: none; }
.links .link-card { align-items: flex-start; display: flex; gap: .75rem; padding: .75rem 0; }
.links svg { fill: currentColor; height: 1.25rem; width: 1.25rem; }
.link-card span { display: grid; gap: .1rem; }
.link-card strong { font-weight: 500; }
.link-card small { color: var(--muted); font-size: .8rem; }
.page h1 { margin-bottom: 1rem; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { display: flex; gap: 1rem; justify-content: space-between; padding: .65rem 0; border-bottom: 1px solid #292925; }
.post-list time { color: var(--muted); font-size: .85rem; }
.post > time { color: var(--muted); display: block; margin: -1rem 0 2rem; }
.post-content > :first-child { margin-top: 0; }

@media (max-width: 32rem) {
  body { padding: 1.25rem; }
}