.gallery-page { background: #f5f0e9; color: #302b29; }
.gallery-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .42fr); gap: clamp(2rem, 7vw, 7rem); align-items: end; overflow: hidden; padding: clamp(5rem, 11vw, 9rem) max(1rem, 6vw) clamp(4rem, 8vw, 7rem); color: #fffaf3; background: #302b29; }
.gallery-hero::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(30,25,22,.92) 0%, rgba(30,25,22,.77) 45%, rgba(30,25,22,.46) 100%), linear-gradient(0deg, rgba(30,25,22,.8), transparent 55%); content: ""; }
.gallery-hero-image { position: absolute; z-index: -2; inset: 0; }
.gallery-hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.gallery-hero-copy { position: relative; z-index: 1; max-width: 54rem; }
.gallery-eyebrow { margin: 0 0 1rem; color: #d8b676; font: 700 .68rem/1.3 Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.gallery-hero h1 { max-width: 48rem; margin: 0; font: 600 clamp(3.1rem, 8vw, 7rem)/.94 Georgia, serif; letter-spacing: -.065em; }
.gallery-hero-copy > p:last-child { max-width: 44rem; margin: 1.6rem 0 0; color: rgba(255,250,243,.72); font: 400 1.05rem/1.7 Georgia, serif; }
.gallery-hero-panel { position: relative; z-index: 1; padding: 1.4rem; border: 1px solid rgba(216,182,118,.52); border-radius: 1rem 2rem 1rem 2rem; background: rgba(48,43,41,.42); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.14); backdrop-filter: blur(3px); }
.gallery-hero-panel span { display: block; color: #d8b676; font: 700 .68rem/1.3 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.gallery-hero-panel strong { display: block; margin: .85rem 0 1.6rem; color: #fffaf3; font: 700 1.6rem/1.12 Georgia, serif; }
.gallery-hero-panel a, .gallery-note a { color: #d8b676; font: 700 .72rem/1.25 Arial, sans-serif; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.gallery-browser { padding: clamp(4.5rem, 9vw, 7rem) max(1rem, 5vw); }
.gallery-browser-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; width: min(100%, 86rem); margin: 0 auto 2rem; }
.gallery-browser-heading h2 { margin: 0; font: 600 clamp(2.2rem, 5vw, 4.5rem)/1 Georgia, serif; letter-spacing: -.055em; }
.gallery-browser-intro { max-width: 24rem; margin: 0; color: #756e65; font: 400 1rem/1.6 Georgia, serif; }
.gallery-controls { display: grid; grid-template-columns: minmax(15rem, 1fr) auto auto; align-items: end; gap: 1.2rem; width: min(100%, 86rem); margin: 0 auto 2.4rem; padding: 1rem; border: 1px solid rgba(162,63,53,.15); border-radius: 1rem 1.7rem 1rem 1.7rem; background: rgba(255,255,255,.7); }
.gallery-search span { display: block; margin-bottom: .45rem; color: #a23f35; font: 700 .66rem/1.3 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.gallery-search input { width: 100%; padding: .78rem .9rem; border: 1px solid rgba(162,63,53,.18); border-radius: .4rem; color: #302b29; background: #fff; font: 400 .9rem/1.3 Arial, sans-serif; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.gallery-filters button { padding: .75rem .85rem; border: 1px solid rgba(162,63,53,.15); border-radius: 999px; color: #756e65; background: transparent; cursor: pointer; font: 700 .68rem/1.2 Arial, sans-serif; letter-spacing: .03em; }
.gallery-filters button span { margin-left: .25rem; color: #a23f35; font-size: .62rem; }
.gallery-filters button.is-active, .gallery-filters button:hover { color: #fffaf3; border-color: #a23f35; background: #a23f35; }
.gallery-filters button.is-active span, .gallery-filters button:hover span { color: #d8b676; }
.gallery-count { margin: 0; color: #756e65; white-space: nowrap; font: 700 .68rem/1.3 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: .8rem; width: min(100%, 86rem); margin: auto; }
.gallery-card { min-width: 0; }
.gallery-card-button { display: block; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
.gallery-card-image { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1.04; border-radius: .85rem 1.9rem .85rem 1.9rem; background: #ddd4ca; }
.gallery-card:nth-child(3n) .gallery-card-image { border-radius: 1.9rem .85rem 1.9rem .85rem; }
.gallery-card-feature { grid-column: span 2; }
.gallery-card-feature .gallery-card-image { aspect-ratio: 2 / 1.15; }
.gallery-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; }
.gallery-card-button:hover .gallery-card-image img, .gallery-card-button:focus-visible .gallery-card-image img { transform: scale(1.045); filter: saturate(1.06); }
.gallery-card-zoom { position: absolute; right: .75rem; bottom: .75rem; padding: .42rem .56rem; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; color: #fff; background: rgba(48,43,41,.65); opacity: 0; font: 700 .62rem/1 Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; transition: opacity .25s ease; }
.gallery-card-button:hover .gallery-card-zoom, .gallery-card-button:focus-visible .gallery-card-zoom { opacity: 1; }
.gallery-card-copy { display: block; padding: .8rem .25rem 1.2rem; }
.gallery-card-number { display: block; color: #a23f35; font: 700 .62rem/1.3 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.gallery-card-copy strong { display: block; margin: .35rem 0 .25rem; color: #302b29; font: 700 1.1rem/1.12 Georgia, serif; }
.gallery-card-copy > span:last-child { display: block; color: #756e65; font: 400 .82rem/1.45 Georgia, serif; }
.gallery-empty { width: min(100%, 86rem); margin: 1rem auto; padding: 2rem; border: 1px dashed rgba(162,63,53,.28); color: #756e65; font: 400 1rem/1.6 Georgia, serif; }
.gallery-note { padding: clamp(4rem, 9vw, 7rem) max(1rem, 5vw); color: #fffaf3; background: #302b29; text-align: center; }
.gallery-note h2 { max-width: 42rem; margin: 0 auto; font: 600 clamp(2.4rem, 5vw, 4.8rem)/.98 Georgia, serif; letter-spacing: -.055em; }
.gallery-note p:not(.gallery-eyebrow) { max-width: 36rem; margin: 1.2rem auto 1.5rem; color: rgba(255,250,243,.72); font: 400 1rem/1.65 Georgia, serif; }
.gallery-lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(25,21,19,.9); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.gallery-lightbox.is-open { opacity: 1; pointer-events: auto; }
.gallery-lightbox-panel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: min(100%, 90rem); max-height: 94vh; }
.gallery-lightbox figure { min-width: 0; margin: 0; }
.gallery-lightbox figure > img { display: block; width: 100%; height: min(72vh, 48rem); object-fit: contain; border-radius: .65rem; background: #1e1a18; }
.gallery-lightbox figcaption { padding: .9rem .2rem 0; color: #fffaf3; }
.gallery-lightbox figcaption span { color: #d8b676; font: 700 .65rem/1.3 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.gallery-lightbox figcaption h2 { margin: .3rem 0 .25rem; font: 700 clamp(1.25rem, 3vw, 2rem)/1.1 Georgia, serif; }
.gallery-lightbox figcaption p { max-width: 42rem; margin: 0; color: rgba(255,250,243,.7); font: 400 .9rem/1.45 Georgia, serif; }
.gallery-lightbox-close, .gallery-lightbox-arrow { border: 1px solid rgba(255,250,243,.35); color: #fffaf3; background: rgba(48,43,41,.75); cursor: pointer; }
.gallery-lightbox-close { position: absolute; z-index: 1; top: -2.75rem; right: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%; font-size: 1.6rem; line-height: 1; }
.gallery-lightbox-arrow { width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: 2.2rem; line-height: 1; }
.gallery-lightbox-close:hover, .gallery-lightbox-arrow:hover { color: #302b29; background: #d8b676; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gallery-controls { grid-template-columns: 1fr; align-items: stretch; } .gallery-count { order: -1; } }
@media (max-width: 680px) { .gallery-hero { grid-template-columns: 1fr; } .gallery-browser-heading { display: block; } .gallery-browser-intro { margin-top: 1rem; } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } .gallery-card-feature { grid-column: span 2; } .gallery-card-copy strong { font-size: .98rem; } .gallery-card-copy > span:last-child { font-size: .76rem; } .gallery-lightbox-panel { grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem; } .gallery-lightbox-arrow { width: 2.2rem; height: 2.2rem; font-size: 1.7rem; } }
@media (max-width: 420px) { .gallery-hero h1 { font-size: 2.8rem; } .gallery-grid { grid-template-columns: 1fr; } .gallery-card-feature { grid-column: span 1; } .gallery-card-feature .gallery-card-image, .gallery-card-image { aspect-ratio: 1.15 / 1; } .gallery-lightbox { padding: .55rem; } .gallery-lightbox-close { top: -2.4rem; } }