/* ============================================================
   projects.css — projects gallery page only.
   Shared components in site.css, all values from tokens.css.
   ============================================================ */

.prj-lede { max-width: 62ch; }

/* ---------- filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-block: var(--space-3) var(--space-4); }
.chip {
  min-height: 44px;
  padding: .45rem 1.2rem;
  border: 1.5px solid var(--char);
  border-radius: 999px;
  background: transparent;
  color: var(--char);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--small);
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.chip:hover { background: color-mix(in srgb, var(--char) 8%, transparent); }
.chip[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); }
.chip[aria-pressed="true"]:hover { background: var(--sun-deep); border-color: var(--sun-deep); }

/* ---------- before/after project blocks (share .ba from site.css) ---------- */
.prj-list { display: grid; gap: var(--space-4); max-width: 920px; }
.prj-item h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: var(--space-2); }
.prj-caption { margin-top: var(--space-2); margin-bottom: 0; color: var(--ink-dim); font-size: var(--small); max-width: 62ch; }
.prj-note { margin-top: var(--space-4); color: var(--ink-dim); font-size: var(--small); }

/* ---------- stills grid (service imagery) ---------- */
.prj-sibs { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
@media (min-width: 640px) { .prj-sibs { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } }