@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Source+Sans+3:wght@400;700&display=swap');
:root{--ink:#0f172a;--leaf:#34a853;--soil:#3b3b3b;--bg:#f6fbf7}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Source Sans 3',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,#e9f7ef,#fff);color:var(--ink)}
.wrap{max-width:1100px;margin:40px auto;padding:28px}
h1{font-family:'Outfit',sans-serif;font-weight:800;margin:0 0 18px 0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 4;border:1px solid rgba(15,23,42,.1);border-radius:14px;background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.08);overflow:hidden;transition:transform .12s ease,box-shadow .12s ease}
@media(max-width:900px){.card{grid-column:span 6}}
@media(max-width:620px){.card{grid-column:span 12}}
.thumb{display:block;width:100%;height:auto}
.meta{padding:12px}
.meta .name{font-weight:700;margin:0 0 6px 0;font-family:'Outfit',sans-serif}
.meta .info{margin:0;opacity:.8;font-size:14px;line-height:1.4}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,23,42,.14)}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.topbar a{display:inline-flex;align-items:center;text-decoration:none;font-weight:700;border:1px solid rgba(15,23,42,.1);border-radius:999px;padding:8px 12px;gap:8px;background:#fff}