*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#E62B1E;--black:#0a0a0a;--off-black:#111111;--charcoal:#1c1c1c;
  --white:#f5f2ee;--grey:#888;--light-grey:#333;
}
body{background:var(--black);color:var(--white);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(10,10,10,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--light-grey);padding:1.2rem 3rem;display:flex;align-items:center;justify-content:space-between;}
.nav-logo img{height:36px;width:auto;object-fit:contain}
.nav-back{font-size:0.72rem;letter-spacing:3px;text-transform:uppercase;color:var(--grey);text-decoration:none;transition:color 0.2s;}
.nav-back:hover{color:var(--white)}

/* HERO */
.gallery-hero{padding:5rem 3rem 3rem;max-width:1400px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:2rem}
.gh-left span{font-size:0.65rem;letter-spacing:5px;text-transform:uppercase;color:var(--red);display:block;margin-bottom:1rem}
.gh-left h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,10vw,8rem);line-height:0.9;letter-spacing:-2px;color:var(--white)}
.gh-left h1 em{color:var(--red);font-style:normal}
.gh-right p{font-size:0.88rem;color:var(--grey);line-height:1.8;max-width:340px}
.divider{width:60px;height:3px;background:var(--red);margin:1.5rem 0}

/* TABS */
.tab-row{padding:0 3rem 2rem;max-width:1400px;margin:0 auto;display:flex;gap:0;border-bottom:1px solid var(--light-grey)}
.g-tab{padding:0.7rem 1.8rem;font-size:0.68rem;letter-spacing:3px;text-transform:uppercase;color:var(--grey);background:none;border:none;border-right:1px solid var(--light-grey);cursor:pointer;transition:all 0.2s;font-family:'DM Sans',sans-serif}
.g-tab:last-child{border-right:none}
.g-tab.active{background:var(--red);color:var(--white)}
.g-tab:not(.active):hover{background:var(--charcoal);color:var(--white)}

/* YEAR DIVIDERS */
.yr-divider{max-width:1400px;margin:2.5rem auto 1rem;padding:0 3px;display:flex;align-items:center;gap:1.2rem;font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:6px;color:var(--red)}
.yr-divider::after{content:'';flex:1;height:1px;background:var(--light-grey)}
.yr-count{font-family:'DM Sans',sans-serif;font-size:0.65rem;letter-spacing:4px;text-transform:uppercase;color:var(--grey)}

/* MASONRY GRID */
.gm-wrap{max-width:1400px;margin:0 auto;padding:0 3px;content-visibility:auto;contain-intrinsic-size:auto 2000px}
.gm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
@media(max-width:900px){.gm-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.gm-grid{grid-template-columns:repeat(2,1fr)}}

.gm-item{position:relative;overflow:hidden;cursor:pointer;background:#111;contain:layout paint;transform:translateZ(0);
/* content-visibility: auto tells the browser to skip rendering this cell entirely
   when it is off-screen. The browser does NOT decode the image texture or composite
   the layer until the cell is about to enter the viewport. This is the most
   efficient approach — no JS needed, no broken images, works on scroll-back. */
content-visibility:auto;
/* contain-intrinsic-size gives the browser a size hint so the page height is
   correct before cells render (prevents layout shift / scroll-jump). */
contain-intrinsic-size:auto 300px;}
.gm-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94),opacity 0.4s ease;will-change:transform;opacity:0}
.gm-item img.loaded{opacity:1}
.gm-item:hover img{transform:scale(1.07) translateZ(0)}
.gm-item-overlay{position:absolute;inset:0;background:rgba(230,43,30,0);transition:background 0.3s;display:flex;align-items:center;justify-content:center;pointer-events:none}
.gm-item:hover .gm-item-overlay{background:rgba(230,43,30,0.14)}
.gm-item-icon{width:46px;height:46px;border:2px solid rgba(255,255,255,0.85);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1rem;background:rgba(0,0,0,0.5);opacity:0;transform:scale(0.65) translateZ(0);transition:opacity 0.2s,transform 0.2s}
.gm-item:hover .gm-item-icon{opacity:1;transform:scale(1) translateZ(0)}
.gm-item-label{position:absolute;bottom:0;left:0;right:0;padding:2rem 1rem 0.8rem;background:linear-gradient(transparent,rgba(0,0,0,0.82));transform:translateY(100%) translateZ(0);transition:transform 0.28s ease;will-change:transform}
.gm-item:hover .gm-item-label{transform:translateY(0) translateZ(0)}
.gm-item-label span{font-size:0.6rem;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.9)}
.gm-item.h-sq{aspect-ratio:1/1}.gm-item.h-4x3{aspect-ratio:4/3}.gm-item.h-3x4{aspect-ratio:3/4}.gm-item.h-169{aspect-ratio:16/9}
.gm-item.col2{grid-column:span 2}.gm-item.row2{grid-row:span 2}
.gm-item.hidden{display:none}

/* LIGHTBOX */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.96);z-index:9000;align-items:center;justify-content:center;flex-direction:column}
.lightbox.open{display:flex}
.lb-img-area{width:85vw;max-width:1000px;aspect-ratio:16/9;position:relative;background:#111}
.lb-img-area img{width:100%;height:100%;object-fit:contain}
.lb-close{position:absolute;top:2rem;right:2rem;width:44px;height:44px;border:1px solid var(--light-grey);border-radius:50%;background:none;color:var(--white);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:10}
.lb-close:hover{border-color:var(--red);color:var(--red)}
.lb-caption{margin-top:1.2rem;font-size:0.68rem;letter-spacing:4px;text-transform:uppercase;color:var(--grey)}
.lb-counter{font-size:0.62rem;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-top:0.4rem}
.lb-nav{display:flex;gap:1rem;margin-top:1rem}
.lb-btn{width:48px;height:48px;border:1px solid var(--light-grey);background:none;color:var(--white);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.lb-btn:hover{border-color:var(--red);color:var(--red)}

/* FOOTER */
footer{background:var(--black);border-top:1px solid var(--light-grey);padding:3rem;text-align:center;margin-top:4rem}
footer p{font-size:0.75rem;color:var(--grey);letter-spacing:2px}
footer a{color:var(--red);text-decoration:none}