/* ── PROJECTS ── */
.proj-wrap { padding-bottom: 80px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.fbtn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 7px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 100px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all var(--t);
}
.fbtn:hover { border-color: var(--gold); color: var(--gold); }
.fbtn.active { background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 600; }

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.proj-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}
.pc-header { display: flex; justify-content: space-between; align-items: flex-start; }
.pc-icon {
  width: 40px; height: 40px;
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
}
.ds-icon { background: rgba(224,85,85,0.1);    color: var(--danger);   border: 1px solid rgba(224,85,85,0.22); }
.ai-icon { background: var(--gold-glow);        color: var(--gold);     border: 1px solid rgba(201,168,76,0.22); }
.cl-icon { background: rgba(130,170,255,0.1);   color: #82AAFF;         border: 1px solid rgba(130,170,255,0.22); }
.fs-icon { background: rgba(76,175,125,0.1);    color: var(--success);  border: 1px solid rgba(76,175,125,0.22); }
.gh-icon { background: var(--surface-2);        color: var(--text-2);   border: 1px solid var(--border); }

.pc-meta { display: flex; align-items: center; gap: 10px; }
.pc-year { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3); }

.proj-card h3 { font-size: 1.05rem; color: var(--text); }
.proj-card p  { font-size: 0.875rem; flex: 1; line-height: 1.75; }
.proj-card strong { color: var(--gold); font-weight: 600; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

.gh-section { padding-top: 4px; }

@media (max-width: 600px) {
  .proj-grid { grid-template-columns: 1fr; }
}