:root{--bg:#f6f5f2;--card:#fff;--ink:#1a1d23;--muted:#5c6370;--rule:#e2e0db;--accent:#c2410c;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#14161a;--card:#1d2025;--ink:#eceae5;--muted:#a0a6b0;--rule:#2c3037;--accent:#fb923c;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
main{max-width:1100px;margin:0 auto;padding:56px 16px 72px}
h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:0;letter-spacing:-.02em}
.lede{color:var(--muted);margin:8px 0 36px}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.grid a{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .15s,border-color .15s}
.grid a:hover,.grid a:focus-visible{transform:translateY(-3px);border-color:var(--accent)}
.grid a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.grid img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--rule)}
.name{font-weight:650;font-size:1.1rem;padding:14px 16px 2px}
.desc{color:var(--muted);font-size:.93rem;padding:0 16px 16px}
@media (prefers-reduced-motion:reduce){.grid a{transition:none}.grid a:hover{transform:none}}