:root {
  --bg: #fff; --fg: #151515; --muted: #75777b; --line: #e4e4e1; --code: #f3f3f1;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111214; --fg: #e4e4e1; --muted: #8f9297; --line: #2a2c30; --code: #1c1d20; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto; max-width: 95ch; padding: 3rem 1rem 5rem;
  background: var(--bg); color: var(--fg);
  font: 15px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--muted); }
a:hover { text-decoration-color: currentColor; }

header { margin-bottom: 2.5rem; }
header p { margin: 0; }
.name { font-weight: 700; }
nav, nav a, .meta, .meta a, figcaption, .posts time { color: var(--muted); }

/* Text keeps a comfortable line length; figures, code and tables use the full width. */
main > :is(h1, h2, h3, h4, p, ol, blockquote),
main > ul:not(.posts) { max-width: 72ch; }
p { text-wrap: pretty; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.35; margin: 2.2em 0 .6em; text-wrap: balance; }
h1 { font-size: 1.6em; margin: 0 0 .3em; }
h2 { font-size: 1.45em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.05em; }
.meta { margin: 0 0 2.5em; }

.posts { list-style: none; margin: 0; padding: 0; }
.posts li { display: grid; grid-template-columns: 11ch 1fr; gap: 0 1ch; margin: .15em 0; }
.posts a { text-decoration: none; }
.posts a:hover { text-decoration: underline; }
@media (max-width: 30rem) { .posts li { grid-template-columns: 1fr; margin: .6em 0; } }

img { max-width: 100%; height: auto; }
figure { margin: 2em 0; }
figcaption { font-size: .85em; margin-top: .5em; max-width: 72ch; }

pre { overflow-x: auto; padding: .9em 1.1em; background: var(--code); border-radius: 3px; font-size: .87em; line-height: 1.55; }
code { font: inherit; }
:not(pre) > code { background: var(--code); padding: .1em .35em; border-radius: 3px; font-size: .92em; }
blockquote { margin: 1.4em 0; padding-left: 1.5ch; border-left: 2px solid var(--line); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
table { border-collapse: collapse; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--line); padding: .3em .7em; text-align: left; }
ul, ol { padding-left: 2.5ch; }
li + li { margin-top: .3em; }