.page-hero{ background: var(--paper-dim); padding-bottom: 44px; }
.page-hero h1{ font-size: clamp(2rem, 4vw, 2.9rem); max-width: 14ch; }
.page-hero-lede{ color: var(--text-on-paper-dim); font-size: 1.02rem; margin-top: 16px; }
.page-hero-lede a{ color: var(--brass-dim); text-decoration: underline; }

.filter-bar{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 40px 0 30px;
}
.filter-btn{
  background: transparent;
  border: 1px solid rgba(23,24,28,0.25);
  color: var(--text-on-paper-dim);
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.filter-btn:hover{ border-color: var(--brass-dim); color: var(--text-on-paper); }
.filter-btn.is-active{ background: var(--ink); border-color: var(--ink); color: var(--text-on-ink); }

.gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery-item{ margin: 0; }
.gallery-item[hidden]{ display: none; }
.frame-tall{ aspect-ratio: 4/5; }
.frame-square{ aspect-ratio: 1/1; }
.gallery-item figcaption{
  font-size: 0.82rem;
  color: var(--text-on-paper-dim);
  margin-top: 8px;
}

.gallery-note{
  margin-top: 34px;
  font-size: 0.85rem;
  color: var(--text-on-paper-dim);
}
.gallery-note code{
  background: var(--paper-dim);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.82em;
}

@media (max-width: 980px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .gallery{ grid-template-columns: 1fr; }
}