:root {
  --paper: #faf7f2;
  --ink: #1d1b19;
  --muted: #6d665d;
  --rule: #ddd5c8;
  --accent: #7a2e2a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #181614; --ink: #ece6dc; --muted: #a39b8f; --rule: #332f2a; --accent: #d89a8f; }
}
* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--serif); line-height: 1.7;
  min-height: 100vh; display: flex; flex-direction: column;
}
.site-header, main, .site-footer { width: 100%; max-width: 44rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.site-header {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem 1.5rem; padding-top: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule);
}
.brand { font-family: var(--sans); font-weight: 650; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
nav { font-family: var(--sans); font-size: .85rem; display: flex; gap: 1.25rem; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, .brand:hover { color: var(--accent); }
main { flex: 1; padding-top: 2.5rem; padding-bottom: 4rem; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.intro { margin-bottom: 3rem; }
.intro h1 { font-size: 2.3rem; line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.01em; }
.intro p { margin: 0; color: var(--muted); font-size: 1.1rem; font-style: italic; }
.section-label { font-family: var(--sans); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.post-list h2 { font-size: 1.4rem; line-height: 1.3; margin: .1rem 0 .4rem; font-weight: 600; }
.post-list h2 a { color: var(--ink); text-decoration: none; }
.post-list h2 a:hover { color: var(--accent); }
.post-list p:last-child { margin: 0; color: var(--muted); font-size: .98rem; }
.meta { font-family: var(--sans); font-size: .78rem; color: var(--muted); letter-spacing: .04em; margin: 0; }
.post-head { margin-bottom: 2rem; }
.post-head h1 { font-size: 2.2rem; line-height: 1.2; margin: .4rem 0 0; letter-spacing: -.01em; }
.prose > p:first-child { font-size: 1.1rem; }
.prose h2 { font-size: 1.5rem; line-height: 1.3; margin: 2.4rem 0 .6rem; }
.prose h3 { font-size: 1.2rem; margin: 2rem 0 .4rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.2rem; }
.prose blockquote { margin: 1.6rem 0; padding: .1rem 0 .1rem 1.2rem; border-left: 3px solid var(--accent); color: var(--muted); font-style: italic; }
.prose img { max-width: 100%; height: auto; display: block; margin: 1.8rem auto; border-radius: 3px; }
.prose figure { margin: 1.8rem 0; }
.prose figcaption, .prose em + br + em { font-size: .85rem; color: var(--muted); text-align: center; }
.prose hr { border: 0; text-align: center; margin: 2.5rem 0; }
.prose hr::after { content: "·  ·  ·"; color: var(--muted); letter-spacing: .4em; }
.prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; background: color-mix(in srgb, var(--rule) 55%, transparent); padding: .1em .35em; border-radius: 3px; }
.prose pre { overflow-x: auto; padding: 1rem; background: color-mix(in srgb, var(--rule) 40%, transparent); border-radius: 4px; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: .95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .5rem .6rem; text-align: left; }
.footnote { font-size: .88rem; color: var(--muted); }
.back { margin-top: 3rem; font-family: var(--sans); font-size: .85rem; }
.site-footer { border-top: 1px solid var(--rule); padding-top: 1.2rem; padding-bottom: 2rem; font-family: var(--sans); font-size: .78rem; color: var(--muted); }
@media (max-width: 34rem) {
  html { font-size: 106.25%; }
  .intro h1, .post-head h1 { font-size: 1.8rem; }
}
@media print { nav, .back, .site-footer { display: none; } body { background: #fff; color: #000; } }

/* cover image, thumbnails, topics */
.cover { margin: 0 0 2rem; }
.cover img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; border-radius: 3px; }
.cover figcaption { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-top: .55rem; }
.post-list li.has-thumb { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.3rem; align-items: start; }
.thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.intro .topics { margin: 1.1rem 0 0; font-style: normal; font-size: .82rem; color: var(--muted); font-family: var(--sans); display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.topics a, .meta a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
.topics a:hover, .meta a:hover { color: var(--accent); border-color: var(--accent); }
.cat-title { font-size: 1.8rem; margin: 0 0 1rem; }
@media (max-width: 34rem) { .post-list li.has-thumb { grid-template-columns: 6rem 1fr; gap: .9rem; } }

/* pagination */
.pager { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 2rem; font-family: var(--sans); font-size: .85rem; }
.pager a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .1rem; }
.pager a:hover { border-color: var(--accent); }
.pager .count { color: var(--muted); }

/* header tools: menu + search */
.header-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-family: var(--sans); font-size: .85rem; }
.menu li { position: relative; }
.menu a { color: var(--muted); text-decoration: none; display: inline-block; padding: .2rem 0; }
.menu a:hover { color: var(--accent); }
.menu .has-sub > a::after { content: " ▾"; font-size: .7em; }
.menu .sub { display: none; position: absolute; left: -.75rem; top: 100%; z-index: 10; list-style: none; margin: 0; padding: .4rem .75rem; min-width: 12rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.menu .sub li { padding: .15rem 0; }
.menu li:hover > .sub, .menu li:focus-within > .sub { display: block; }
@media (max-width: 40rem) {
  .menu .has-sub > a::after { content: ""; }
  .menu .sub { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0 .9rem; min-width: 0; }
}
.search input, .search-big input { font: inherit; font-family: var(--sans); font-size: .85rem; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: .3rem .8rem; width: 9rem; }
.search input:focus, .search-big input:focus { outline: none; border-color: var(--accent); }
.search-big { display: flex; gap: .5rem; margin: 1rem 0 1.5rem; }
.search-big input { flex: 1; width: auto; font-size: 1rem; padding: .5rem 1rem; }
.search-big button { font-family: var(--sans); font-size: .9rem; border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 999px; padding: .4rem 1rem; cursor: pointer; }
.search-big button:hover { border-color: var(--accent); color: var(--accent); }
#results .meta { font-family: var(--sans); font-size: .8rem; color: var(--muted); }
.site-footer a { color: var(--muted); }