:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.65 Georgia, "Times New Roman", serif;
  background: #fbf8f3;
  color: #26221d;
}
.wrap { max-width: 680px; margin: 0 auto; padding: 0 20px; }
header.wrap { padding-top: 48px; padding-bottom: 8px; }
h1 { font-size: 2rem; margin: 0 0 4px; }
.tag { color: #8a7f6d; margin: 0 0 16px; font-style: italic; }
nav { font-size: .95rem; padding-bottom: 20px; border-bottom: 1px solid #e6ddcd; }
nav a { color: #7a4a1d; text-decoration: none; }
nav a:hover { text-decoration: underline; }
main.wrap { padding-top: 8px; padding-bottom: 40px; }
article { padding: 24px 0; border-bottom: 1px solid #ece3d2; }
article:last-child { border-bottom: 0; }
h2 { font-size: 1.3rem; margin: 0 0 10px; }
footer.wrap { padding: 24px 20px 60px; color: #9a8f7c; font-size: .9rem; }
@media (prefers-color-scheme: dark) {
  body { background: #1c1a17; color: #ded7c9; }
  .tag { color: #9a8f7c; }
  nav { border-color: #35312a; }
  nav a { color: #d99a5b; }
  article { border-color: #302c25; }
}