/* =========================
   PROJECTS — extends blog.css
   (no duplicate nav/tags styles)
   ========================= */

body.projects-page{
  background: var(--blog-cream, #fbfaf7);
  color: var(--ink, rgba(0,0,0,0.86));
}

/* Same rhythm as blog page */
.projects-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 72px 22px 70px;
}

/* Grid of project cards */
.projects-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}

/* Project card = blog post card vibe */
.project-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--radius, 16px);
  padding: 18px 18px 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.project-meta{
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.48);
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.project-meta .pill{
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.18);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(0,0,0,0.62);
  background: rgba(0,0,0,0.02);
}

.project-title{
  font-size: 22px;
  line-height: 1.18;
  margin: 0 0 8px;
}

.project-title a{
  text-decoration: none;
  color: rgba(0,0,0,0.86);
}

.project-title a:hover{
  text-decoration: underline;
}

.project-role{
  font-size: 12px;
  color: rgba(0,0,0,0.62);
  margin: 0 0 10px;
}

.project-summary{
  margin: 0 0 12px;
  color: rgba(0,0,0,0.62);
  line-height: 1.55;
  max-width: 72ch;
}

/* Active pill state like blog (important for filter UX) */
.tag-pill.is-active{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.22);
}

.filter-hint{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* Responsive */
@media (max-width: 860px){
  .projects-grid{
    grid-template-columns: 1fr;
  }
}