@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/bebas-neue-400.woff2') format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/rajdhani-300.woff2') format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/rajdhani-400.woff2') format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/rajdhani-500.woff2') format('woff2'); }
@font-face { font-family:'Rajdhani'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/rajdhani-600.woff2') format('woff2'); }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --white:      #FAFAF8;
  --warm-white: #F5F3F0;
  --cream:      #EDE9E3;
  --sage:       #7A7A78;
  --sage-light: #B0B0AE;
  --black:      #0C0C0A;
  --dark:       #1A1A18;
  --grey-800:   #2E2E2C;
  --grey-600:   #5A5A58;
  --font-serif: 'Bebas Neue', sans-serif;
  --font-sans:  'Rajdhani', sans-serif;
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; width: 100%; }
body { background: var(--black); color: var(--white); font-family: var(--font-sans); font-weight: 300; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* NAV */
nav { position: sticky; top: 0; z-index: 500; display: flex; align-items: center; justify-content: space-between;
      padding: 1.3rem 4rem; background: rgba(12,12,10,.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-logo img { width: 42px; height: 42px; object-fit: contain; filter: invert(1); }
.nav-back { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,.7); transition: color .3s; }
.nav-back:hover { color: var(--white); }

/* HEADER */
header.gal-head { padding: 5rem 4rem 3rem; text-align: center; }
.gal-eyebrow { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sage-light); margin-bottom: 1rem; }
h1 { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.4rem, 6vw, 4.4rem); letter-spacing: .02em; }
h1 em { font-style: normal; color: var(--sage-light); }
.gal-sub { margin-top: 1rem; color: rgba(255,255,255,.6); max-width: 520px; margin-left: auto; margin-right: auto; }

/* GRID (masonry via columns) */
.gal-grid { column-count: 4; column-gap: .6rem; padding: 0 4rem 6rem; }
.gal-item { break-inside: avoid; margin-bottom: .6rem; overflow: hidden; cursor: pointer; position: relative; background: var(--dark); }
.gal-item img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease), opacity .4s; opacity: 0; }
.gal-item img.loaded { opacity: 1; }
.gal-item:hover img { transform: scale(1.04); }

@media (max-width: 1100px) { .gal-grid { column-count: 3; } }
@media (max-width: 720px)  { .gal-grid { column-count: 2; padding: 0 1.2rem 4rem; column-gap: .4rem; } .gal-item { margin-bottom: .4rem; }
                              header.gal-head { padding: 3rem 1.5rem 2rem; } nav { padding: 1rem 1.5rem; } }
@media (max-width: 420px)  { .gal-grid { column-count: 1; } }

/* LIGHTBOX */
.lightbox { position: fixed; inset: 0; background: rgba(6,6,5,.97); z-index: 3000; display: none;
            align-items: center; justify-content: center; padding: 2rem; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; user-select: none; }
.lb-close, .lb-prev, .lb-next { position: fixed; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
                                 color: var(--white); width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center;
                                 justify-content: center; font-size: 1.3rem; cursor: pointer; transition: background .25s; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.2); }
.lb-close { top: 1.6rem; right: 1.6rem; }
.lb-prev { left: 1.6rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.6rem; top: 50%; transform: translateY(-50%); }
.lb-counter { position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%); font-size: .8rem; letter-spacing: .12em;
              color: rgba(255,255,255,.6); }
@media (max-width: 640px) { .lb-prev, .lb-next { width: 38px; height: 38px; font-size: 1.1rem; } .lb-close { width: 38px; height: 38px; top: 1rem; right: 1rem; } .lb-prev{left:.6rem;} .lb-next{right:.6rem;} }