:root {
  --bg: #faf7f0; --fg: #2a2622; --muted: #8a8177; --hl: #a8321f;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #16140f; --fg: #e8e2d4; --muted: #8f877a; --hl: #e0825f; }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
main { max-width: 42rem; padding: 2rem 16px; transition: opacity .6s ease; }
main.fade { opacity: 0; }
blockquote { margin: 0; font-size: clamp(1.15rem, 2.6vw, 1.7rem); line-height: 1.6; }
blockquote em, blockquote .hl { color: var(--hl); font-style: normal; font-weight: 600; }
#cite { margin: 1.6rem 0 0; text-align: right; color: var(--muted); font-size: 1rem; }
#cite i { color: var(--fg); }
#note { text-align: right; color: var(--muted); font-size: .8rem; margin: .4rem 0 0; min-height: 1em; }
footer { position: fixed; bottom: 1rem; right: 16px; }
#time {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font: 1rem ui-monospace, Consolas, monospace; letter-spacing: .05em; opacity: .7;
}
#time:hover { opacity: 1; }
body.hide-time #time { opacity: 0; }