/* ===========================================================
   STĪLED EVENTS — Gallery page
   Layered on styles.css
   =========================================================== */

.gallery-section { padding: clamp(54px, 7vw, 96px) 0 clamp(72px, 9vw, 120px); }

/* page header (gallery doesn't load form.css) */
.page-head {
  background: var(--black);
  color: var(--paper);
  padding: 170px 0 clamp(56px, 8vw, 96px);
  text-align: center;
}
.page-head .eyebrow { color: var(--champagne); margin-bottom: 24px; }
.page-head h1 { max-width: 18ch; margin: 0 auto 22px; }
.page-head .lede { max-width: 56ch; margin: 0 auto; color: #d4ccbf; }

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-bottom: clamp(36px, 5vw, 60px);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.gallery-filters span {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.gallery-filters span:first-child { color: var(--champagne-dim); }

/* masonry via CSS columns */
.masonry {
  column-count: 3;
  column-gap: 22px;
}
@media (max-width: 900px) { .masonry { column-count: 2; column-gap: 18px; } }
@media (max-width: 560px) { .masonry { column-count: 1; } }

.m-item {
  break-inside: avoid;
  margin: 0 0 22px;
  display: inline-block;
  width: 100%;
}
.m-item .m-frame {
  width: 100%;
  overflow: hidden;
  background: #e7e0d4;
  position: relative;
}
.m-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.m-item:hover img { transform: scale(1.04); }

.m-item figcaption {
  padding: 14px 2px 0;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.m-item figcaption .dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  background: var(--champagne);
  margin-top: 8px;
}
.m-item figcaption p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* closing CTA */
.gallery-cta {
  text-align: center;
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: clamp(48px, 6vw, 76px);
  border-top: 1px solid var(--line);
}
.gallery-cta h2 { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 46px); margin-bottom: 18px; }
.gallery-cta p { color: var(--ink-soft); max-width: 50ch; margin: 0 auto 34px; font-size: 16.5px; }