/* Gallery — filterable masonry; captions slide up on hover; images lean in with perspective. */
.gal-page { padding-top: 1rem; }
.gal-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.gal-filter button { font: 500 .9rem var(--font-body); padding: .6rem 1rem; background: transparent; color: var(--ink); border: 1.5px solid var(--sand-deep); border-radius: 2px; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.gal-filter button span { margin-left: .35rem; font-size: .75rem; opacity: .65; }
.gal-filter button:hover { border-color: var(--ink); }
.gal-filter button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.gal-note { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: 1.75rem; font-size: .9rem; color: var(--muted); }

.masonry { columns: 1; column-gap: 1.25rem; perspective: 1600px; }
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1100px) { .masonry { columns: 3; } }
.masonry__item { break-inside: avoid; margin-bottom: 1.25rem; }
.masonry__item[hidden] { display: none; }
.masonry__item button {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--sand); cursor: zoom-in; overflow: hidden;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.masonry__item img { width: 100%; height: auto; transition: transform 1.3s var(--ease); }
.masonry__item button:hover, .masonry__item button:focus-visible { transform: translateY(-4px) rotateX(2deg); box-shadow: 0 36px 46px -34px rgba(40, 39, 34, .55); }
.masonry__item button:hover img { transform: scale(1.05); }
.masonry__cap {
  position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: .15rem; padding: 2.2rem 1rem .85rem; text-align: left;
  background: linear-gradient(to top, rgba(255, 255, 255, .96) 30%, rgba(255, 255, 255, 0)); color: var(--ink);
  opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .45s var(--ease);
}
.masonry__cap strong { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; }
.masonry__cap em { font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.masonry__item button:hover .masonry__cap, .masonry__item button:focus-visible .masonry__cap { opacity: 1; transform: none; }
@media (hover: none) { .masonry__cap { opacity: 1; transform: none; } }
.gal-credit { margin-top: 1rem; }

/* Filtered items rise in */
.masonry__item.is-in { animation: gal-in .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes gal-in { from { opacity: 0; transform: translateY(24px) rotateX(-10deg); } to { opacity: 1; transform: none; } }

@media (max-width: 800px) {
  .gal-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: .15rem var(--gutter) .6rem; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gal-filter::-webkit-scrollbar { display: none; }
  .gal-filter button { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .gal-note { font-size: .86rem; }
}
@media (max-width: 800px) { .masonry__cap em { font-size: .74rem; } }
@media (max-width: 800px) { .gal-filter { scroll-padding-inline: var(--gutter); } }