.gallery-page { overflow-x: hidden; }

.gallery-main {
  position: relative;
  min-height: calc(100vh - var(--site-header-height));
  padding: clamp(3rem, 7vw, 6rem) 1.25rem clamp(4.5rem, 8vw, 8rem);
  overflow: hidden;
  background: radial-gradient(circle at 50% 19%, rgba(232, 231, 217, 0.56), transparent 30rem), var(--paper);
}

.gallery-intro, .album { position: relative; z-index: 1; width: min(100%, 68rem); margin: 0 auto; }
.gallery-intro { text-align: center; }
.gallery-intro h1 { margin: 0; color: var(--ink); font: 400 clamp(4rem, 9vw, 6.8rem)/.84 var(--display); letter-spacing: -.055em; }
.gallery-divider { display: block; width: min(8.4rem, 37vw); height: auto; margin: 1.15rem auto .85rem; }
.gallery-intro p { margin: 0; color: var(--ink); font: 400 clamp(1.12rem, 2.6vw, 1.4rem)/1.3 var(--display); }
.album { margin-top: clamp(2.7rem, 6vw, 4.5rem); }
.gallery-status { min-height: 1.3rem; margin: 0 0 1rem; color: var(--moss); text-align: center; font: 500 .68rem/1.4 var(--ui); letter-spacing: .08em; }
.gallery-status.is-error { color: #bd4c3a; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.gallery-card { position: relative; align-self: start; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 1px solid rgba(89, 101, 73, .18); background: linear-gradient(110deg, var(--soft-sage) 25%, #f1f0e7 45%, var(--soft-sage) 65%); background-size: 220% 100%; box-shadow: 0 .45rem 1.2rem rgba(39, 51, 50, .06); cursor: zoom-in; animation: gallery-shimmer 1.4s linear infinite; }
.gallery-card.is-loaded, .gallery-card.has-error { background: var(--soft-sage); animation: none; }
.gallery-card img, .gallery-card video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--soft-sage); opacity: 0; transition: opacity 220ms ease, transform 360ms ease; }
.gallery-card.is-loaded img, .gallery-card.is-loaded video { opacity: 1; }
.gallery-card:hover img, .gallery-card:focus-visible img { transform: scale(1.035); }
.video-label { position: absolute; right: .6rem; bottom: .6rem; padding: .38rem .55rem; color: var(--paper); background: rgba(39, 51, 50, .78); font: 600 .58rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.video-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--paper); background: var(--moss); font: 400 2rem/1 var(--ui); }
.gallery-card-error { position: absolute; inset: 0; display: grid; padding: 1rem; place-items: center; color: var(--moss); background: var(--soft-sage); font: 600 .62rem/1.4 var(--ui); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
@keyframes gallery-shimmer { to { background-position-x: -220%; } }

.gallery-pagination { margin-top: clamp(3rem, 6vw, 4.8rem); text-align: center; }
.gallery-page-summary { margin: 0 0 1rem; color: var(--moss); font: 600 .63rem/1.4 var(--ui); letter-spacing: .16em; text-transform: uppercase; }
.gallery-page-controls { display: flex; align-items: center; justify-content: center; gap: clamp(.45rem, 1.2vw, 1rem); min-height: 3rem; }
.gallery-page-action, .gallery-page-number { position: relative; display: inline-flex; min-width: 2.75rem; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0; border: 0; color: var(--moss); background: transparent; cursor: pointer; }
.gallery-page-action { gap: .65rem; min-width: 7rem; font: 600 .62rem/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; }
.gallery-page-action svg { width: 2rem; height: .75rem; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2; }
.gallery-page-action:hover, .gallery-page-action:focus-visible, .gallery-page-number:hover, .gallery-page-number:focus-visible { color: var(--coral); }
.gallery-page-action:focus-visible, .gallery-page-number:focus-visible { outline: 2px solid var(--coral); outline-offset: .2rem; }
.gallery-page-action:disabled { opacity: .28; cursor: default; }
.gallery-page-action:disabled:hover { color: var(--moss); }
.gallery-page-list { display: flex; align-items: center; justify-content: center; gap: .15rem; }
.gallery-page-number { font: 500 .72rem/1 var(--ui); }
.gallery-page-number[aria-current="page"] { color: var(--moss); font: 400 1.9rem/1 var(--display); cursor: default; }
.gallery-page-number[aria-current="page"]::after { position: absolute; right: .75rem; bottom: .15rem; left: .75rem; height: 2px; background: var(--coral); content: ""; }
.gallery-page-ellipsis { width: 1.7rem; color: var(--moss); font: 500 .72rem/1 var(--ui); }
.gallery-page-mobile { display: none; color: var(--moss); font: 400 1.35rem/1 var(--display); white-space: nowrap; }
.gallery-pagination[aria-busy="true"] .gallery-page-controls { opacity: .45; pointer-events: none; }

.gallery-sprig { position: absolute; z-index: 0; width: clamp(22rem, 49vw, 43rem); opacity: .38; pointer-events: none; }
.gallery-sprig-left { top: 7.5rem; left: clamp(-28rem, -19vw, -11rem); transform: rotate(20deg); }
.gallery-sprig-right { right: clamp(-28rem, -19vw, -11rem); bottom: 3rem; transform: rotate(205deg); }

.media-viewer { width: min(96vw, 74rem); max-width: none; max-height: 94vh; padding: 3rem 1rem 1rem; overflow: auto; border: 0; background: rgba(28, 35, 34, .97); box-shadow: 0 1.3rem 4rem rgba(0,0,0,.4); }
.media-viewer::backdrop { background: rgba(20, 27, 26, .82); }
.media-viewer img, .media-viewer video { display: block; width: auto; max-width: 100%; max-height: calc(94vh - 4rem); margin: 0 auto; object-fit: contain; }
.close-viewer { position: absolute; top: .85rem; right: 1rem; padding: .4rem; border: 0; color: var(--paper); background: transparent; cursor: pointer; font: 600 .64rem/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 700px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .72rem; } }
@media (max-width: 600px) {
  .gallery-page-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: .35rem; }
  .gallery-page-list { display: none; }
  .gallery-page-mobile { display: block; }
  .gallery-page-action { min-width: 0; gap: .35rem; }
  .gallery-page-action:first-child { justify-self: start; }
  .gallery-page-action:last-child { justify-self: end; }
  .gallery-page-action svg { width: 1.35rem; }
}
@media (max-width: 430px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-main { padding-inline: 1rem; } }
@media (prefers-reduced-motion: reduce) { .gallery-card { animation: none; } }