.filters{display:flex; gap:8px; margin:26px 0 30px; flex-wrap:wrap;}
.filter-chip{
  font-family:'IBM Plex Mono'; font-size:12px; padding:7px 13px; border-radius:2px;
  border:1px solid var(--line); color:var(--text-dim); cursor:pointer;
  background:var(--bg-panel);
}
.filter-chip.active, .filter-chip:hover{border-color:var(--cyan); color:var(--cyan); background:var(--bg-card);}

.project-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; padding-bottom:60px;
}
.card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  cursor:pointer; overflow:hidden;
}
.card:hover{border-color:var(--cyan);}
.card .capsule-art{height:110px;}

/* ---------- project detail ---------- */
.detail{display:none; padding:40px 0 60px;}
.detail.active{display:block; animation:fadeIn .3s ease both;}
.back-link{font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--text-dim); cursor:pointer; display:inline-block; margin-bottom:20px;}
.back-link:hover{color:var(--cyan);}
.detail-banner{
  height:220px; border-radius:var(--radius); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:26px;
}
.detail-banner svg{width:80px; height:80px;}
.detail-head{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;}
.detail-head h2{font-size:26px;}
.detail-head .status{font-family:'IBM Plex Mono'; font-size:12px; color:var(--amber); margin-top:8px;}
.detail-links{display:flex; gap:10px;}
.detail-body{display:grid; grid-template-columns:2fr 1fr; gap:40px; margin-top:26px;}
.detail-body p{color:var(--text-dim); font-size:14.5px; margin-bottom:14px;}
.spec-list{border-top:1px solid var(--line);}
.spec-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px;}
.spec-row span:first-child{color:var(--text-faint); font-family:'IBM Plex Mono'; font-size:11.5px;}

@media (max-width:860px){
  .project-grid{grid-template-columns:1fr 1fr;}
  .detail-body{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .project-grid{grid-template-columns:1fr;}
}