:root { --bg:#111; --fg:#f2f2f2; --muted:#999; --accent:#fff; }
* { 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; }
.site-header { position:sticky; top:0; z-index:10; background:#111e; backdrop-filter:blur(8px); border-bottom:1px solid #222; padding:.7rem 1rem; display:grid; grid-template-columns:auto 1fr; gap:.8rem 1.2rem; align-items:center; }
.brand { font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.brand span { font-weight:300; color:var(--muted); }
.filters { display:grid; grid-template-columns:repeat(6, 1fr); gap:.45rem; }
.filters button { background:#1c1c1c; color:var(--fg); border:1px solid #333; border-radius:999px; padding:.4rem .2rem; cursor:pointer; font-size:.85rem; white-space:nowrap; }
.filters button.active, .filters button:hover { background:#f2f2f2; color:#111; border-color:#f2f2f2; }
@media (max-width:760px) { .filters { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:420px) { .site-header { grid-template-columns:1fr; } }
.hero { padding:2.5rem 1.2rem 1rem; max-width:1100px; margin:0 auto; }
.hero h1 { margin:0 0 .3rem; font-size:2.2rem; }
.hero p { color:var(--muted); margin:0; }
.grid { columns:300px; column-gap:10px; max-width:1400px; margin:0 auto; padding:1rem 1.2rem 4rem; }
.grid figure { margin:0 0 10px; break-inside:avoid; border-radius:10px; overflow:hidden; background:#1a1a1a; }
.grid img { width:100%; display:block; aspect-ratio:auto; }
footer { text-align:center; color:var(--muted); padding:2rem 1rem 3rem; border-top:1px solid #222; font-size:.85rem; }