/* marginalia — a quiet, readerly companion. Calm typography, generous margins. */
:root {
  --ink: #2b2a28;
  --ink-soft: #6b6862;
  --paper: #fbfaf7;
  --rule: #e7e3da;
  --accent: #7a5b3a; /* warm brown, like a margin pencil */
}
* { box-sizing: border-box; }
html { font-size: 18px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap { max-width: 40rem; margin: 0 auto; padding: 3.5rem 1.4rem 5rem; }

/* masthead */
.masthead { margin-bottom: 3rem; }
.masthead a.home { text-decoration: none; color: var(--ink); }
.masthead h1 {
  font-size: 1.55rem; letter-spacing: 0.02em; margin: 0 0 0.2rem;
  font-weight: 600;
}
.masthead .tagline { color: var(--ink-soft); font-style: italic; font-size: 1rem; margin: 0; }
.masthead .rule { border: 0; border-top: 1px solid var(--rule); margin: 1.6rem 0 0; }

/* the index list of posts */
.posts { list-style: none; padding: 0; margin: 0; }
.posts li { margin: 0 0 2rem; }
.posts .date { display: block; color: var(--ink-soft); font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; }
.posts h2 { font-size: 1.2rem; margin: 0.2rem 0 0.3rem; font-weight: 600; }
.posts h2 a { color: var(--ink); text-decoration: none; }
.posts h2 a:hover { color: var(--accent); }
.posts .blurb { color: var(--ink-soft); margin: 0; }

/* an essay */
article h1 { font-size: 1.8rem; line-height: 1.25; margin: 0 0 0.4rem; font-weight: 600; }
article .date { color: var(--ink-soft); font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 2rem; }
article p { margin: 0 0 1.3rem; }
article a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
article blockquote {
  margin: 1.6rem 0; padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 2px solid var(--accent); color: var(--ink-soft); font-style: italic;
}
article em { font-style: italic; }
.backhome { display: inline-block; margin-bottom: 2.5rem; color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; }
.backhome:hover { color: var(--accent); }

/* footer */
.colophon { margin-top: 4rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.85rem; }
.colophon a { color: var(--ink-soft); }