*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
:root{
  --soil:#1C1408;--soil-mid:#261c0a;
  --blue:#38C8FF;--blue-dim:rgba(56,200,255,.12);
  --green:#5ADB8A;--green-dim:rgba(90,219,138,.13);
  --orange:#E07A28;
  --canvas:#F0EAE0;--card:#FDF9F3;--border:#DDD5C4;
  --text-1:#1a1208;--text-2:#4a4030;--muted:#9a9070;
}
body{font-family:'Nunito',system-ui,sans-serif;background:var(--canvas);color:var(--text-1)}
.g-bar{height:3px;background:linear-gradient(90deg,var(--soil) 0%,var(--green) 35%,var(--blue) 65%,var(--orange) 100%)}
.page-wrap{max-width:960px;margin:0 auto;padding:40px 24px 64px}
.page-title{font-family:'Outfit',sans-serif;font-size:clamp(1.75rem,4vw,2.4rem);font-weight:800;color:var(--text-1);margin-bottom:6px}
.page-sub{font-size:0.9rem;color:var(--muted);margin-bottom:28px}
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.filter-btn{font-family:'Nunito',sans-serif;font-size:0.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 14px;border-radius:20px;border:1.5px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .15s}
.filter-btn:hover{border-color:var(--text-2);color:var(--text-2)}
.filter-btn.active{border-color:var(--soil);background:var(--soil);color:#f0ebe0}
.filter-btn.organic{border-color:var(--green);color:#2a8a54}
.filter-btn.organic.active{background:var(--green-dim);border-color:var(--green);color:#1a6a38}
.filter-btn.tech{border-color:var(--blue);color:#1570a0}
.filter-btn.tech.active{background:var(--blue-dim);border-color:var(--blue);color:#0e5a85}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.post-card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;display:block;transition:box-shadow .15s,transform .1s}
.post-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.1);transform:translateY(-2px)}
.post-card[data-hidden]{display:none}
.card-thumb{width:100%;height:160px;object-fit:cover;display:block}
.card-body{padding:18px}
.card-meta-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.feat-badge{font-size:0.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.card-title{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;line-height:1.35;color:var(--text-1);margin-bottom:8px}
.card-summary{font-size:0.88rem;color:var(--text-2);line-height:1.6;margin-bottom:12px}
.card-footer{font-size:0.78rem;color:var(--muted)}
.tag{display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:4px}
.tag.organic{background:var(--green-dim);color:#2a8a54}
.tag.tech{background:var(--blue-dim);color:#1570a0}
footer{background:var(--soil-mid);padding:16px 32px;display:flex;align-items:center;gap:16px;margin-top:48px}
.f-logo{display:flex;align-items:center;text-decoration:none}
.f-links{display:flex;gap:16px;margin-left:auto}
.f-links a{font-size:0.875rem;color:rgba(240,235,224,.35);text-decoration:none}
.f-copy{font-size:0.8rem;color:rgba(240,235,224,.2)}

.f-logo img{border-radius:6px}