.year-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; justify-content: center; }
.year-filter button { background: var(--bg-elev); border: 1.5px solid var(--line); padding: 10px 18px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; transition: all 0.2s; }
.year-filter button:hover { border-color: var(--pink); color: var(--pink); }
.year-filter button.active { background: var(--pink); color: #fff; border-color: var(--pink); }
.gallery-year { margin-bottom: 60px; scroll-margin-top: 100px; }
.gallery-year.hidden { display: none; }
.year-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--line); flex-wrap: wrap; gap: 10px; }
.year-head h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.year-head h2 em { color: var(--pink); font-style: normal; }
.year-meta { font-size: 13px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-item { aspect-ratio: 1; border-radius: 12px; cursor: pointer; position: relative; overflow: hidden; transition: transform 0.3s; }
.gallery-item:hover { transform: scale(1.02); }
.gallery-item .img-placeholder { font-size: 14px; opacity: 0.85; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 95vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.lightbox-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.15); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; transition: all 0.2s; }
.lightbox-close:hover { background: var(--pink); }
@media (max-width: 640px) {
  .year-head h2 { font-size: 32px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* Database-backed image buttons retain the existing gallery layout. */
.gallery-item { border: 0; padding: 0; display: block; width: 100%; font: inherit; }
.gallery-item img { width: 100%; height: 100%; object-fit: contain; }