:root { --bg:#0d0d0f; --fg:#e9e9ec; --muted:#a1a1aa; --card:#16161a; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
header{position:sticky;top:0;background:linear-gradient(var(--bg),rgba(13,13,15,.7));backdrop-filter:saturate(150%) blur(4px);
  padding:.75rem 1rem;display:flex;gap:.75rem;align-items:center;z-index:10;border-bottom:1px solid #1f1f22}
h1{font-size:1rem;margin:0;letter-spacing:.3px}
button{background:#232326;color:#fff;border:1px solid #2c2c31;border-radius:8px;padding:.4rem .7rem;cursor:pointer}
.grid{columns:2 160px;column-gap:.75rem;padding:1rem}
.card{break-inside:avoid;background:var(--card);border:1px solid #232326;border-radius:12px;overflow:hidden;margin:0 0 .75rem}
.card .media-link{display:block}
.card img,.card video{width:100%;height:auto;display:block;background:#0a0a0c}
.meta{display:flex;justify-content:space-between;align-items:center;padding:.5rem .6rem;border-top:1px solid #232326}
.meta .sub{color:var(--muted);font-size:.85rem}
.meta .permalink{color:#8ec7ff;text-decoration:none;font-size:.85rem}
.sentinel{height:1px}
@media (min-width:600px){ .grid{columns:3 220px}}
@media (min-width:900px){ .grid{columns:4 260px}}