:root {
        --gold: #C9A84C;
        --gold-light: #E8D5A0;
        --gold-dark: #8A6920;
        --cream: #FAF7F0;
        --cream-dark: #F0EBE0;
        --ink: #1C1A16;
        --ink-mid: #3E3A30;
        --ink-soft: #6B6456;
        --green: #2C4A2E;
        --green-mid: #3D6B40;
        --white: #FFFFFF;
        --border: rgba(201, 168, 76, 0.25);
        --border-mid: rgba(201, 168, 76, 0.45);
        --font-display: 'Cormorant Garamond', Georgia, serif;
        --font-body: 'Jost', sans-serif;
        --ease: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--font-body);
        background: var(--cream);
        color: var(--ink);
        overflow-x: hidden;
    }

    img {
        display: block;
        max-width: 100%;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

         /* ── HERO ── */
         /* .gallery-hero {
             padding-top: 72px;
             min-height: 90vh;
             background: linear-gradient(160deg, var(--green) 0%, #1a2e1b 60%, #0e1a0e 100%);
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             text-align: center;
             position: relative;
             overflow: hidden;
         }
    
         .gallery-hero::before {
             content: '';
             position: absolute;
             inset: 0;
             pointer-events: none;
             background:
                 radial-gradient(ellipse 70% 50% at 50% 100%, rgba(201, 168, 76, 0.12) 0%, transparent 70%),
                 url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C9A84C' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
         }
    
         .hero-eyebrow {
             font-size: 11px;
             font-weight: 500;
             letter-spacing: 0.22em;
             text-transform: uppercase;
             color: #D4820A;
             margin-bottom: 20px;
             display: flex;
             align-items: center;
             gap: 14px;
         }
    
         .hero-eyebrow::before,
         .hero-eyebrow::after {
             content: '';
             display: block;
             width: 36px;
             height: 1px;
             background: #D4820A;
             opacity: 0.6;
         }
    
         .gallery-hero h1 {
             font-family: var(--font-display);
             font-size: clamp(3rem, 7vw, 6rem);
             font-weight: 300;
             line-height: 1.05;
             color: var(--cream);
             letter-spacing: -0.01em;
             margin-bottom: 20px;
         }
    
         .gallery-hero h1 em {
             font-style: italic;
              color: #D4820A;
         }
    
         .hero-sub {
             font-size: 15px;
             font-weight: 300;
             color: rgba(250, 247, 240, 0.65);
             letter-spacing: 0.04em;
             max-width: 480px;
             line-height: 1.7;
         }
    
         .hero-divider {
             margin-top: 48px;
             display: flex;
             align-items: center;
             gap: 12px;
         }
    
         .hero-divider span {
             width: 40px;
             height: 1px;
             background: #D4820A;
         }
    
         .hero-divider svg {
             fill: #D4820A;
             opacity: 0.7;
             width: 18px;
             height: 18px;
         }

 */




/* ── GALLERY BANNER ── */
/* ── GALLERY BANNER ── */
.gallery-banner-section {
    width: 100%;
    background: #0e1a0e;
    margin-top: -100px;
}

.gallery-banner-inner {
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
}

.gallery-banner-inner picture {
    width: 100%;
    display: block;
}

.gallery-banner-img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.80);
}

.gallery-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 6vw;
    background: linear-gradient(90deg, rgba(14, 26, 14, 0.78) 0%, rgba(14, 26, 14, 0.3) 50%, transparent 100%);
}

.gallery-banner-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #D4820A;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gallery-banner-eyebrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: #D4820A;
    opacity: 0.7;
}

.gallery-banner-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 300;
    line-height: 1.1;
    color: #FAF7F0;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

.gallery-banner-title em {
    font-style: italic;
    color: #D4820A;
}

.gallery-banner-sub {
    font-size: 14.5px;
    font-weight: 300;
    color: rgba(250, 247, 240, 0.72);
    letter-spacing: 0.04em;
    max-width: 380px;
    line-height: 1.75;
}

/* ── MOBILE ── */
@media (max-width: 769px) {
    .gallery-banner-section {
        margin-top: 5px;
        /* less pull-up on mobile */
    }

    .gallery-banner-overlay {
        /* text sits in the top-left empty area of the mobile image */
        justify-content: flex-start;
        padding: 55vw 1vw 0;
        background: linear-gradient(180deg, rgba(14, 26, 14, 0.70) 0%, rgba(14, 26, 14, 0.15) 55%, transparent 100%);
    }

        .gallery-banner-eyebrow {
            font-size: clamp(0.3rem, 2vw, 0.6rem);
        }
    .gallery-banner-title {
        font-size: clamp(1.0rem, 5vw, 2.0rem);
    }

    .gallery-banner-sub {
        font-size: 10px;
        max-width: 140px;
    }
    
}

                         /* ── SECTION ── */
                         .section {
                             padding: 90px 5vw;
                             background: var(--cream);
                         }
            
                         .section-inner {
                             max-width: 1280px;
                             margin: 0 auto;
                         }
            
                         .section-header {
                             text-align: center;
                             margin-bottom: 60px;
                         }
            
                         .section-eyebrow {
                             font-size: 10.5px;
                             font-weight: 600;
                             letter-spacing: 0.22em;
                             text-transform: uppercase;
                             /* color: var(--gold); */
                             color: #D4820A;
                             margin-bottom: 14px;
                         }
            
                         .section-title {
                             font-family: var(--font-display);
                             font-size: clamp(2.2rem, 4vw, 3.6rem);
                             font-weight: 300;
                             line-height: 1.1;
                             /* color: var(--ink); */
                            color: #5A7E22;
                             margin-bottom: 16px;
                         }
            
                         .section-title em {
                             font-style: italic;
                             /* color: var(--gold-dark); */
                             color: #D4820A;
                         }
            
                         .section-sub {
                             font-size: 14.5px;
                             color: var(--ink-soft);
                             max-width: 520px;
                             margin: 0 auto;
                             line-height: 1.8;
                         }
            
                         .gold-rule {
                             width: 48px;
                             height: 1px;
                             background: linear-gradient(90deg, transparent, #D4820A, transparent);
                             margin: 24px auto 0;
                         }





                                                 /* ── FILTER TABS ── */
                                                 .filter-bar {
                                                     display: flex;
                                                     justify-content: center;
                                                     gap: 8px;
                                                     flex-wrap: wrap;
                                                     margin-bottom: 48px;
                                                 }
                        
                                                 .filter-btn {
                                                     font-family: var(--font-body);
                                                     font-size: 11px;
                                                     font-weight: 500;
                                                     letter-spacing: 0.14em;
                                                     text-transform: uppercase;
                                                     padding: 9px 22px;
                                                     border: 1px solid var(--border-mid);
                                                     background: transparent;
                                                     cursor: pointer;
                                                     color: var(--ink-soft);
                                                     transition: var(--ease);
                                                 }
                        
                                                 .filter-btn:hover {
                                                     border-color: #D4820A;
                                                     color: #D4820A;
                                                 }
                        
                                                 .filter-btn.active {
                                                     /* background: var(--gold);
                                                     border-color: var(--gold); */
                                                        background: #D4820A;
                                                        border-color: #D4820A;
                                                     color: var(--white);
                                                 }
                        
                                                 /* ── MASONRY GRID ── */
                                                 .media-grid {
                                                     columns: 3;
                                                     column-gap: 14px;
                                                 }
                        
                                                 @media (max-width: 900px) {
                                                     .media-grid {
                                                         columns: 2;
                                                     }
                                                 }
                        
                                                 @media (max-width: 540px) {
                                                     .media-grid {
                                                         columns: 1;
                                                     }
                                                 }
                        
                                                 .media-item {
                                                     break-inside: avoid;
                                                     margin-bottom: 14px;
                                                     position: relative;
                                                     overflow: hidden;
                                                     cursor: pointer;
                                                 }
                        
                                                 .media-item img,
                                                 .media-item video {
                                                     width: 100%;
                                                     display: block;
                                                     transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                                                 }
                        
                                                 .media-item:hover img,
                                                 .media-item:hover video {
                                                     transform: scale(1.04);
                                                 }
                        
                                                 .media-overlay {
                                                     position: absolute;
                                                     inset: 0;
                                                     background: linear-gradient(to top, rgba(28, 26, 22, 0.78) 0%, transparent 55%);
                                                     opacity: 0;
                                                     transition: opacity 0.4s;
                                                     display: flex;
                                                     align-items: flex-end;
                                                     padding: 20px;
                                                 }
                        
                                                 .media-item:hover .media-overlay {
                                                     opacity: 1;
                                                 }
                        
                                                 .media-tag {
                                                     font-size: 9.5px;
                                                     font-weight: 600;
                                                     letter-spacing: 0.18em;
                                                     text-transform: uppercase;
                                                     color: var(--gold-light);
                                                     margin-bottom: 5px;
                                                 }
                        
                                                 .media-caption {
                                                     font-family: var(--font-display);
                                                     font-size: 18px;
                                                     font-weight: 300;
                                                     line-height: 1.3;
                                                     font-style: italic;
                                                     color: var(--cream);
                                                 }
                        
                                                 /* Video items */
                                                 .media-item.is-video::before {
                                                     content: '';
                                                     position: absolute;
                                                     inset: 0;
                                                     z-index: 1;
                                                     background: rgba(0, 0, 0, 0.15);
                                                 }
                        
                                                 .play-icon {
                                                     position: absolute;
                                                     top: 50%;
                                                     left: 50%;
                                                     z-index: 2;
                                                     transform: translate(-50%, -50%);
                                                     width: 52px;
                                                     height: 52px;
                                                     border: 1.5px solid rgba(255, 255, 255, 0.8);
                                                     border-radius: 50%;
                                                     display: flex;
                                                     align-items: center;
                                                     justify-content: center;
                                                     backdrop-filter: blur(4px);
                                                     background: rgba(255, 255, 255, 0.1);
                                                     transition: var(--ease);
                                                     pointer-events: none;
                                                 }
                        
                                                 .media-item:hover .play-icon {
                                                     /* background: var(--gold);
                                                     border-color: var(--gold); */
                                                        background: #D4820A;
                                                        border-color: #D4820A;
                                                     transform: translate(-50%, -50%) scale(1.1);
                                                 }
                        
                                                 .play-icon svg {
                                                     fill: white;
                                                     width: 18px;
                                                     height: 18px;
                                                     margin-left: 3px;
                                                 }
                        
                                                 /* ── LIGHTBOX ── */
                                                 .lightbox {
                                                     position: fixed;
                                                     inset: 0;
                                                     z-index: 9999;
                                                     background: rgba(14, 12, 10, 0.96);
                                                     backdrop-filter: blur(10px);
                                                     display: none;
                                                     align-items: center;
                                                     justify-content: center;
                                                     padding: 40px;
                                                 }
                        
                                                 .lightbox.open {
                                                     display: flex;
                                                 }
                        
                                                 .lightbox-inner {
                                                     position: relative;
                                                     max-width: 900px;
                                                     max-height: 88vh;
                                                     width: 100%;
                                                     display: flex;
                                                     flex-direction: column;
                                                     align-items: center;
                                                 }
                        
                                                 .lightbox img,
                                                 .lightbox video {
                                                     max-width: 100%;
                                                     max-height: 75vh;
                                                     object-fit: contain;
                                                     border: 1px solid rgba(201, 168, 76, 0.2);
                                                 }
                        
                                                 .lightbox-caption {
                                                     margin-top: 18px;
                                                     text-align: center;
                                                     font-family: var(--font-display);
                                                     font-size: 1.1rem;
                                                     font-style: italic;
                                                     color: var(--cream);
                                                     font-weight: 300;
                                                 }
                        
                                                 .lightbox-tag {
                                                     font-size: 10px;
                                                     letter-spacing: 0.16em;
                                                     text-transform: uppercase;
                                                     color: #D4820A;
                                                     margin-bottom: 6px;
                                                     display: block;
                                                 }
                        
                                                 .lightbox-close {
                                                     position: absolute;
                                                     top: -16px;
                                                     right: 0;
                                                     width: 38px;
                                                     height: 38px;
                                                     border: 1px solid rgba(255, 255, 255, 0.2);
                                                     background: none;
                                                     color: rgba(255, 255, 255, 0.7);
                                                     font-size: 18px;
                                                     cursor: pointer;
                                                     display: flex;
                                                     align-items: center;
                                                     justify-content: center;
                                                     transition: var(--ease);
                                                 }
                        
                                                 .lightbox-close:hover {
                                                     border-color: #D4820A;
                                                     color: #D4820A;
                                                 }
                        
                                                 .lightbox-nav {
                                                     position: absolute;
                                                     top: 50%;
                                                     transform: translateY(-50%);
                                                     width: 44px;
                                                     height: 44px;
                                                     border: 1px solid rgba(255, 255, 255, 0.2);
                                                     background: rgba(14, 12, 10, 0.6);
                                                     color: rgba(255, 255, 255, 0.8);
                                                     font-size: 20px;
                                                     cursor: pointer;
                                                     display: flex;
                                                     align-items: center;
                                                     justify-content: center;
                                                     transition: var(--ease);
                                                 }
                        
                                                 .lightbox-nav:hover {
                                                     border-color: #D4820A;
                                                     color: #D4820A;
                                                 }
                        
                                                 .lightbox-prev {
                                                     left: -60px;
                                                 }
                        
                                                 .lightbox-next {
                                                     right: -60px;
                                                 }