:root {
  --bg: #fbfaf7; --fg: #26231f; --muted: #7a746b; --line: #e6e1d8; --link: #5b4a2e;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1a18; --fg: #e4e0d8; --muted: #9a9389; --line: #34312c; --link: #d2b98a; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 18px/1.65 Georgia, "Iowan Old Style", "Times New Roman", serif;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 48px 20px 64px; }
header { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 36px; }
header a.home { color: var(--fg); text-decoration: none; font-weight: bold; letter-spacing: .02em; }
nav a { color: var(--muted); text-decoration: none; margin-left: 18px; font-size: 16px; }
nav a:hover, header a.home:hover { color: var(--link); }
h1 { font-size: 28px; line-height: 1.25; margin: 0 0 6px; font-weight: normal; }
.meta { color: var(--muted); font-size: 15px; margin: 0 0 28px; }
a { color: var(--link); }
ul.posts { list-style: none; padding: 0; margin: 0; }
ul.posts li { display: flex; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); }
ul.posts time { color: var(--muted); font-size: 15px; min-width: 96px; padding-top: 2px; }
ul.posts a { text-decoration: none; }
ul.posts a:hover { text-decoration: underline; }
ul.posts .by { color: var(--muted); }
footer { margin-top: 56px; color: var(--muted); font-size: 14px; }
@media (max-width: 480px) {
  body { font-size: 17px; }
  ul.posts li { flex-direction: column; gap: 2px; }
}