:root { --bg:#0d0d0d; --card:#1a1a1a; --accent:#7cb342; --text:#f4f4f0; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; padding:24px 16px 64px; }
header { text-align:center; margin:8px 0 28px; }
header h1 { font-size:clamp(1.6rem,6vw,2.6rem); letter-spacing:.04em; }
header p { opacity:.7; margin-top:6px; font-size:.95rem; }
.back { display:inline-block; margin-bottom:18px; color:var(--accent); text-decoration:none; font-size:.9rem; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); max-width:1100px; margin:0 auto; }
.card { background:var(--card); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; border:1px solid #2a2a2a; transition:transform .15s,border-color .15s; }
.card:hover { transform:translateY(-3px); border-color:var(--accent); }
.card img { width:100%; aspect-ratio:16/10; object-fit:cover; background:#222; display:block; }
.card .meta { padding:12px 14px 16px; }
.card .yr { font-size:1.35rem; font-weight:700; color:var(--accent); }
.card .name { font-size:.95rem; margin:2px 0 6px; }
.card .desc { font-size:.8rem; opacity:.65; line-height:1.4; }
.card .note { font-size:.7rem; opacity:.5; margin-top:6px; font-style:italic; }
@media (max-width:420px){ .grid{ grid-template-columns:1fr; } }