:root {
  --ink: #2b2b2b;
  --soft: #6b6b6b;
  --line: #e4e0da;
  --accent: #7a5c3e;
  --bg: #faf8f5;
}
* { box-sizing: border-box; margin: 0; }
body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}
header.site {
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.mast { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0; }
.brand { font-size: 1.5rem; letter-spacing: .5px; }
.brand small { display: block; font-size: .75rem; color: var(--soft); letter-spacing: 2px; text-transform: uppercase; }
nav.main a { color: var(--soft); text-decoration: none; margin-left: 18px; font-size: .92rem; }
nav.main a:hover { color: var(--ink); }
main { padding: 40px 0 60px; }
h1, h2, h3 { font-weight: normal; line-height: 1.3; }
h1 { font-size: 1.9rem; margin-bottom: 8px; }
.lede { color: var(--soft); margin-bottom: 34px; }
article.teaser { border-top: 1px solid var(--line); padding: 26px 0; }
article.teaser h2 { font-size: 1.25rem; margin-bottom: 6px; }
article.teaser h2 a { color: var(--ink); text-decoration: none; }
article.teaser h2 a:hover { color: var(--accent); }
.meta { font-size: .8rem; color: var(--soft); text-transform: uppercase; letter-spacing: 1px; }
article p { margin-top: 8px; }
.article-body p { margin: 0 0 16px; }
.article-body h2 { font-size: 1.3rem; margin: 26px 0 10px; }
footer.site { border-top: 1px solid var(--line); background: #fff; padding: 24px 0; font-size: .85rem; color: var(--soft); }
footer.site a { color: var(--soft); }
footer.site ul { list-style: none; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .mast { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 0; }
  nav.main a { margin-left: 0; margin-right: 18px; }
  main { padding: 28px 0 44px; }
  h1 { font-size: 1.55rem; }
}