:root { --bg:#f6f6f4; --fg:#1d1d1b; --muted:#6b6b66; --tile:#e4e4e0; }
@media (prefers-color-scheme: dark) { :root { --bg:#151514; --fg:#ececea; --muted:#9a9a94; --tile:#262624; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, sans-serif; }
header, main { max-width:1400px; margin:0 auto; padding:16px; }
h1 { margin:.2em 0 0; font-size:1.6rem; font-weight:600; }
a { color:inherit; }
.back { color:var(--muted); text-decoration:none; font-size:.9rem; }
.back:hover { color:var(--fg); }
.grid { list-style:none; margin:0; padding:0; display:grid; gap:8px;
        grid-template-columns:repeat(auto-fill, minmax(min(220px, 45vw), 1fr)); }
.grid img { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:var(--tile); border-radius:4px; }
.grid a { display:block; text-decoration:none; }
.galleries span { display:block; padding:6px 2px 12px; font-weight:500; }
.galleries small { color:var(--muted); font-weight:400; margin-left:4px; }
.photos a:hover img, .galleries a:hover img { opacity:.88; }

.lb { position:fixed; inset:0; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; z-index:10; }
.lb[hidden] { display:none; }
.lb img { max-width:100vw; max-height:100vh; object-fit:contain; user-select:none; }
.lb button { position:absolute; background:rgba(0,0,0,.4); color:#fff; border:0; font-size:2rem; line-height:1;
             width:48px; height:48px; border-radius:24px; cursor:pointer; }
.lb button:hover { background:rgba(255,255,255,.2); }
.lb .prev { left:12px; top:50%; transform:translateY(-50%); }
.lb .next { right:12px; top:50%; transform:translateY(-50%); }
.lb .close { right:12px; top:12px; }
.lb .bar { position:absolute; left:0; right:0; bottom:0; padding:10px 16px; color:#ccc; font-size:.85rem;
           display:flex; justify-content:space-between; background:linear-gradient(transparent, rgba(0,0,0,.6)); }
.lb .bar a { color:#ccc; }