.gallery-v2-page { overflow-x: hidden; background: var(--makki-white); }
.gallery-v2-page.gallery-v2-lightbox-open { overflow: hidden; }
.gallery-v2-page :where(main button, main a):focus-visible { outline: 3px solid var(--makki-gold); outline-offset: 4px; }

.gallery-v2-hero { position: relative; padding-block: clamp(2.8rem, 5vw, 4.6rem); overflow: hidden; background: linear-gradient(115deg, rgba(255,255,255,.46), transparent 58%), var(--makki-ivory); border-bottom: var(--makki-border); }
.gallery-v2-hero::after { position: absolute; right: -4rem; bottom: -8rem; width: 19rem; height: 19rem; border: 1px solid rgba(198,161,91,.22); border-radius: 50%; content: ""; }
.gallery-v2-hero__inner { position: relative; z-index: 1; display: grid; align-items: center; grid-template-columns: minmax(0,1fr) 170px; gap: clamp(2rem,5vw,6rem); }
.gallery-v2-breadcrumb { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; color: var(--makki-sage); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gallery-v2-breadcrumb a { color: var(--makki-navy); text-decoration: none; }
.gallery-v2-breadcrumb a:hover { color: var(--makki-wood); }
.gallery-v2-hero h1 { margin: 0; font-size: clamp(2.8rem,6vw,5rem); letter-spacing: -.035em; }
.gallery-v2-hero__copy > p { max-width: 680px; margin: 1rem 0 0; color: var(--makki-sage); font-size: clamp(1rem,1.5vw,1.12rem); }
.gallery-v2-hero__arch { position: relative; width: 145px; height: 165px; justify-self: end; border: 1px solid rgba(23,59,87,.2); border-radius: 80px 80px 8px 8px; }
.gallery-v2-hero__arch::before { position: absolute; inset: 12px; border: 1px solid rgba(198,161,91,.52); border-radius: 68px 68px 4px 4px; content: ""; }
.gallery-v2-hero__arch::after { position: absolute; right: 50%; bottom: -20px; width: 1px; height: 85px; background: var(--makki-gold); content: ""; opacity: .6; }
.gallery-v2-hero__arch span { position: absolute; top: 46px; left: 50%; width: 42px; height: 42px; border: 1px solid rgba(23,59,87,.18); transform: translateX(-50%) rotate(45deg); }

.gallery-v2-collection { background: linear-gradient(180deg, var(--makki-white), rgba(248,245,237,.45)); }
.gallery-v2-intro { display: grid; max-width: 880px; margin-bottom: clamp(2rem,4vw,3.25rem); grid-template-columns: minmax(0,.95fr) minmax(280px,.75fr); column-gap: clamp(2rem,6vw,5.5rem); }
.gallery-v2-intro .v2-eyebrow { grid-column: 1 / -1; }
.gallery-v2-intro h2 { margin: 0; font-size: clamp(2.25rem,4vw,3.15rem); letter-spacing: -.025em; }
.gallery-v2-intro p { align-self: end; margin: 0 0 .3rem; padding-left: 1.35rem; border-left: 1px solid rgba(198,161,91,.65); color: var(--makki-sage); font-size: .98rem; }

.gallery-v2-grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(1rem,1.5vw,1.5rem); }
.gallery-v2-item { min-width: 0; margin: 0; }
.gallery-v2-item--wide { grid-column: span 2; }
.gallery-v2-trigger { position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; overflow: hidden; background: var(--makki-navy-deep); border: 0; border-radius: var(--makki-radius-lg); box-shadow: 0 10px 30px rgba(16,42,63,.09); cursor: zoom-in; aspect-ratio: 4 / 3; }
.gallery-v2-item--wide .gallery-v2-trigger { aspect-ratio: 8 / 3; }
.gallery-v2-image { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 200ms ease; }
.gallery-v2-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: clamp(1rem,2vw,1.5rem); background: linear-gradient(to top,rgba(16,42,63,.68),transparent 45%); color: var(--makki-white); text-align: left; }
.gallery-v2-caption { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gallery-v2-view { display: inline-flex; width: 42px; height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.36); border-radius: 50%; backdrop-filter: blur(6px); transition: background-color 200ms ease, transform 200ms ease; }
.gallery-v2-view > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.gallery-v2-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 52px; height: 52px; place-items: center; background: rgba(16,42,63,.82); border: 1px solid rgba(248,245,237,.72); border-radius: 50%; box-shadow: 0 8px 24px rgba(16,42,63,.3); color: var(--makki-white); transform: translate(-50%,-50%); transition: background-color 200ms ease,transform 200ms ease; }
.gallery-v2-play i { margin-left: 3px; font-size: .9rem; }
.gallery-v2-media-type { position: absolute; z-index: 2; top: .75rem; left: .75rem; padding: .24rem .5rem; background: rgba(16,42,63,.8); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: var(--makki-white); font-size: .62rem; font-weight: 800; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.gallery-v2-trigger:hover .gallery-v2-image { transform: scale(1.03); }
.gallery-v2-trigger:hover .gallery-v2-view { background: rgba(255,255,255,.23); transform: translateY(-2px); }
.gallery-v2-trigger:hover .gallery-v2-play { background: rgba(198,161,91,.94); color: var(--makki-navy-deep); transform: translate(-50%,-50%) scale(1.04); }

.gallery-v2-lightbox[hidden] { display: none; }
.gallery-v2-lightbox { position: fixed; z-index: 2000; inset: 0; display: grid; padding: clamp(.75rem,2vw,1.5rem); place-items: center; background: rgba(7,20,31,.94); }
.gallery-v2-lightbox__dialog { position: relative; display: grid; width: 100%; height: 100%; max-width: 1500px; place-items: center; outline: none; }
.gallery-v2-lightbox__figure { display: grid; max-width: calc(100% - 8rem); max-height: calc(100dvh - 3rem); margin: 0; place-items: center; grid-template-rows: minmax(0,1fr) auto; }
.gallery-v2-lightbox-image, .gallery-v2-lightbox-video { display: block; max-width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; border-radius: var(--makki-radius-sm); box-shadow: 0 24px 80px rgba(0,0,0,.36); }
.gallery-v2-lightbox-video { width: auto; height: auto; background: #05080a; }
.gallery-v2-lightbox-video[hidden], .gallery-v2-lightbox-image[hidden] { display: none; }
.gallery-v2-lightbox-caption { min-height: 1.5rem; margin-top: .8rem; color: rgba(255,255,255,.78); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-align: center; }
.gallery-v2-lightbox-close, .gallery-v2-lightbox-nav { position: absolute; z-index: 2; display: inline-grid; width: 48px; height: 48px; padding: 0; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: var(--makki-white); transition: background-color 180ms ease,border-color 180ms ease; }
.gallery-v2-lightbox-close:hover, .gallery-v2-lightbox-nav:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); }
.gallery-v2-lightbox :where(button):focus-visible { outline: 3px solid var(--makki-gold); outline-offset: 3px; }
.gallery-v2-lightbox-close { top: 0; right: 0; }
.gallery-v2-lightbox-nav { top: 50%; transform: translateY(-50%); }
.gallery-v2-lightbox-nav--previous { left: 0; }
.gallery-v2-lightbox-nav--next { right: 0; }

@media (max-width: 1100px) {
    .gallery-v2-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
    .gallery-v2-intro { grid-template-columns: 1fr; }
    .gallery-v2-intro p { max-width: 650px; margin-top: 1.15rem; }
}
@media (max-width: 800px) {
    .gallery-v2-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(.625rem,3vw,1rem); }
}
@media (max-width: 767px) {
    .gallery-v2-hero__inner { grid-template-columns: minmax(0,1fr) 90px; gap: 1rem; }
    .gallery-v2-hero__arch { width: 80px; height: 105px; }
    .gallery-v2-hero__arch span { top: 35px; width: 26px; height: 26px; }
    .gallery-v2-trigger { min-height: 0; aspect-ratio: 4 / 3; border-radius: var(--makki-radius-md); }
    .gallery-v2-lightbox { padding: .75rem; }
    .gallery-v2-lightbox__figure { max-width: 100%; max-height: calc(100dvh - 5rem); }
    .gallery-v2-lightbox-image, .gallery-v2-lightbox-video { max-width: 100%; max-height: calc(100dvh - 10rem); }
    .gallery-v2-lightbox-close, .gallery-v2-lightbox-nav { width: 46px; height: 46px; }
    .gallery-v2-lightbox-close { top: 0; }
    .gallery-v2-lightbox-nav { top: auto; bottom: 0; transform: none; }
    .gallery-v2-lightbox-nav--previous { left: calc(50% - 56px); }
    .gallery-v2-lightbox-nav--next { right: calc(50% - 56px); }
}
@media (max-width: 560px) {
    .gallery-v2-hero__inner { grid-template-columns: 1fr; }
    .gallery-v2-hero__arch { display: none; }
    .gallery-v2-intro p { padding-left: 1rem; }
}
@media (max-width: 430px) {
    .gallery-v2-overlay { padding: .75rem; }
    .gallery-v2-caption { font-size: .68rem; letter-spacing: .05em; }
    .gallery-v2-view { width: 36px; height: 36px; flex-basis: 36px; font-size: .8rem; }
    .gallery-v2-play { width: 42px; height: 42px; }
    .gallery-v2-play i { font-size: .76rem; }
    .gallery-v2-media-type { top: .55rem; left: .55rem; padding: .2rem .4rem; font-size: .54rem; }
}
@media (max-width: 319px) {
    .gallery-v2-grid { grid-template-columns: 1fr; }
    .gallery-v2-item--wide { grid-column: auto; }
    .gallery-v2-item--wide .gallery-v2-trigger { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-v2-image, .gallery-v2-view, .gallery-v2-play, .gallery-v2-lightbox button { transition: none; }
    .gallery-v2-trigger:hover .gallery-v2-image, .gallery-v2-trigger:hover .gallery-v2-view { transform: none; }
    .gallery-v2-trigger:hover .gallery-v2-play { transform: translate(-50%,-50%); }
}