:root {
  --bg: #f7efe2;
  --ink: #2b1d14;
  --muted: #6b5443;
  --accent: #7a2e1d;
  --thread-a: rgba(122, 46, 29, 0.07);
  --thread-b: rgba(224, 164, 88, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1410;
    --ink: #f3e3c3;
    --muted: #c9b08c;
    --accent: #e0a458;
    --thread-a: rgba(224, 164, 88, 0.06);
    --thread-b: rgba(122, 46, 29, 0.18);
  }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, "Noto Serif", serif;
  font-size: 1.125rem;
  line-height: 1.65;
  background-color: var(--bg);
  /* a quiet woven texture: warp and weft */
  background-image:
    repeating-linear-gradient(0deg, var(--thread-a) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(90deg, var(--thread-b) 0 2px, transparent 2px 14px);
}
main {
  flex: 1;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 12vh 1rem 3rem;
}
.mark { display: block; margin-bottom: 1.25rem; border-radius: 12px; }
h1 {
  margin: 0;
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
}
.lede { margin: 0.25rem 0 1.75rem; font-size: 1.35rem; font-style: italic; color: var(--muted); }
.note { color: var(--muted); }
.hearth { margin: 0 0 2rem; }
.hearth img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(43, 29, 20, 0.28);
}
.hearth figcaption { margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); text-align: right; }
main > p:not(.lede) { max-width: 36rem; }
footer { padding: 1.5rem 1rem; text-align: center; font-size: 0.875rem; color: var(--muted); }