:root { color-scheme: light dark; --accent: #e8927c; --accent-ink: #b5503a; }
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65; margin: 0; color: #1f2328; background: #fffdfb;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
nav.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 1.25rem; align-items: center;
  padding: .75rem 1.25rem; border-bottom: 1px solid #efe7e2;
  background: rgba(255,253,251,.85); backdrop-filter: blur(8px);
  font-size: .95rem;
}
nav.top .brand { font-weight: 700; margin-right: auto; }
main { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
h2 { font-size: 1.45rem; margin-top: 2.5rem; padding-top: .5rem; border-top: 1px solid #efe7e2; }
h3 { font-size: 1.1rem; margin-top: 1.75rem; }
p.lede { font-size: 1.1rem; color: #6b6560; }
img.shot {
  display: block; max-width: 320px; width: 100%; height: auto;
  margin: 1.25rem auto; border: 1px solid #efe7e2; border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}
blockquote { border-left: 3px solid var(--accent); margin: 1.25rem 0; padding: .25rem 0 .25rem 1rem; color: #6b6560; }
ul { padding-left: 1.25rem; }
li { margin: .35rem 0; }
code { background: #f4ece8; padding: .1rem .35rem; border-radius: 5px; font-size: .9em; }
hr { border: none; border-top: 1px solid #efe7e2; margin: 2.5rem 0; }
footer { border-top: 1px solid #efe7e2; padding: 2rem 1.25rem 3rem; text-align: center; color: #8a847e; font-size: .9rem; }
.signoff { font-style: italic; color: #6b6560; }
@media (prefers-color-scheme: dark) {
  body { color: #e6e6e6; background: #141312; }
  a { color: #f0a892; }
  nav.top { background: rgba(20,19,18,.85); border-color: #2c2926; }
  h2, hr, footer, nav.top, img.shot { border-color: #2c2926; }
  p.lede, blockquote, .signoff, footer { color: #a8a29c; }
  code { background: #2a2522; }
}