:root { --bg: #f4f3f0; --fg: #1d1d1b; --muted: #7a776f; --rule: #dedbd3; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #141413; --fg: #ecebe6; --muted: #8f8c84; --rule: #2c2b28; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2rem; }
header a.home { font-weight: 600; letter-spacing: .04em; text-transform: lowercase; color: var(--fg); text-decoration: none; }
nav a { margin-left: 1.2rem; color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--fg); }
a { color: inherit; }
.intro { max-width: 34rem; color: var(--muted); margin-bottom: 2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.2rem; }
figure { margin: 0; }
figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--rule); }
figcaption { display: flex; justify-content: space-between; font-size: .85rem; padding-top: .4rem; }
figcaption span { color: var(--muted); }
.single img { width: 100%; max-height: 80vh; object-fit: contain; }
.meta { color: var(--muted); font-size: .9rem; }
footer { margin-top: 3rem; padding-top: .8rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .8rem; }