:root { --bg:#f6f5f2; --fg:#1d1d1f; --muted:#6b6b70; --card:#fff; --line:#e3e1dc; --link:#1f5fa8; }
@media (prefers-color-scheme: dark) { :root { --bg:#151517; --fg:#ececee; --muted:#9a9aa1; --card:#1f1f22; --line:#2e2e33; --link:#7fb2ff; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--link); text-decoration:none; } a:hover { text-decoration:underline; }
header { padding:14px 20px; border-bottom:1px solid var(--line); background:var(--card); }
header .site { font-weight:600; font-size:18px; color:var(--fg); }
main { max-width:1200px; margin:0 auto; padding:20px 16px 40px; }
footer { text-align:center; color:var(--muted); font-size:13px; padding:24px 16px; }
.crumbs { color:var(--muted); font-size:14px; margin-bottom:6px; } .crumbs .sep { margin:0 4px; }
h1 { font-size:26px; margin:4px 0 6px; } .desc { color:var(--muted); margin:0 0 20px; max-width:70ch; }
h2 { font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:28px 0 10px; }
ul.albums, ul.photos { list-style:none; padding:0; margin:0; display:grid; gap:14px; }
ul.albums { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
ul.photos { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
ul.albums a, ul.photos a { display:block; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; color:var(--fg); height:100%; }
ul.albums a:hover, ul.photos a:hover { text-decoration:none; border-color:var(--link); }
ul.albums img, ul.albums .noimg { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--line); }
ul.photos img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--line); }
ul.albums .t { display:block; padding:8px 10px 0; font-weight:600; }
ul.albums .n { display:block; padding:0 10px 10px; color:var(--muted); font-size:13px; }
ul.photos .c { display:block; padding:6px 8px; font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.photo { text-align:center; } .photo img { max-width:100%; height:auto; border-radius:6px; background:var(--line); }
.caption { max-width:70ch; margin:14px auto 4px; } .meta { color:var(--muted); font-size:13px; }
.nav { display:flex; justify-content:space-between; gap:12px; margin:10px 0 16px; font-size:15px; } .nav span { color:var(--muted); }