:root {
  --bg: #f5ede1; --fg: #2b1e17; --muted: #5e4a3e; --accent: #9c6b17; --rule: rgba(43, 30, 23, 0.14);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #17100d; --fg: #f1e6da; --muted: #cdbbaa; --accent: #e6b865; --rule: rgba(241, 230, 218, 0.14); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.65 "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
main { max-width: 680px; margin: 0 auto; padding: 56px 20px 80px; }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
header svg { width: 44px; height: 44px; flex: none; }
header a { color: inherit; text-decoration: none; font: 600 22px/1 system-ui, -apple-system, sans-serif; letter-spacing: -0.01em; }
h1 { font: 600 34px/1.2 system-ui, -apple-system, sans-serif; letter-spacing: -0.02em; margin: 0 0 12px; }
h2 { font: 600 20px/1.3 system-ui, -apple-system, sans-serif; margin: 36px 0 8px; }
p, li { margin: 0 0 12px; }
ul { padding-left: 22px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0 20px; }
footer { color: var(--muted); font: 14px/1.6 system-ui, -apple-system, sans-serif; }
.shots { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 28px -20px 32px; padding: 4px 20px 12px; }
.shots figure { flex: 0 0 200px; margin: 0; scroll-snap-align: start; }
.shots img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--rule); display: block; }
.shots figcaption { color: var(--muted); font: 13px/1.4 system-ui, -apple-system, sans-serif; margin-top: 8px; }