/* Projects index — filterable grid (Editorial direction). */

.projects-index {
  background: var(--bg);
  padding: clamp(56px, 7vw, 96px) var(--pad-inline) clamp(76px, 9vw, 130px);
}

.projects-index__intro { max-width: 760px; margin-bottom: 56px; }
.projects-index__intro .eyebrow { margin-bottom: 20px; }
.projects-index__title {
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 500;
  text-wrap: balance;
}
.projects-index__sub { margin-top: 26px; font-size: 18px; line-height: 1.72; color: var(--body-text); text-wrap: pretty; }

.projects-index__filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line-on-light);
  margin-bottom: 48px;
}

.projects-index__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 28px 20px;
}
.projects-index__empty { color: var(--muted); font-size: 16px; grid-column: 1 / -1; }

/* ---- project card ---- */
.project-card { display: block; cursor: pointer; }
.project-card__media {
  position: relative;
  height: clamp(230px, 30vw, 340px);
  border-radius: var(--radius);
  overflow: hidden;
}
.project-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
.project-card__name { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.project-card__year { font-size: 12px; color: var(--muted); }
.project-card__meta { margin-top: 10px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }