:root {
  --bg: #16140f;
  --bg-alt: #1c1912;
  --paper: #ece5d4;
  --fg: #ece5d4;
  --muted: #948a76;
  --accent: #c9a668;
  --border: #3a3428;
  --gap: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

body {
  position: relative;
}

/* subtle film-grain overlay across the whole page */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>\
<rect width='100%25' height='100%25' filter='url(%23n)'/>\
</svg>");
  background-size: 160px 160px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2rem 2rem 1.25rem;
  background: linear-gradient(var(--bg) 60%, transparent);
}

/* while the "main" hero photo is showing, float the nav over it instead
   of pushing it down, and dim its own background so it stays legible.
   The gradient alone isn't reliable against bright photo edges, so the
   logo/nav text also get a dark halo below (see body.hero-active .logo /
   .section-nav button) that keeps them readable regardless of what's
   behind them. */
body.hero-active .site-header {
  position: fixed;
  width: 100%;
  background: linear-gradient(rgba(6, 5, 4, 0.6) 0%, rgba(6, 5, 4, 0.25) 70%, transparent 100%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.hero-active #gallery {
  margin: 0;
}

body.hero-active .logo {
  text-shadow:
    1px 0 0 var(--accent),
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.6);
}

body.hero-active .section-nav button {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.6);
}

.logo {
  font-family: "DotGothic16", "IBM Plex Mono", monospace;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  color: var(--paper);
  text-shadow: 1px 0 0 var(--accent);
}

.section-nav {
  display: flex;
  gap: 1.75rem;
}

.section-nav button {
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.3rem 0;
  position: relative;
  transition: color 0.2s ease;
}

.section-nav button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.section-nav button:hover {
  color: var(--fg);
}

.section-nav button.active {
  color: var(--accent);
}

.section-nav button.active::after {
  transform: scaleX(1);
}

#gallery {
  columns: 4 240px;
  column-gap: var(--gap);
  padding: 1rem 2rem 3rem;
}

/* full-bleed cover photo for the "main" section: no border, no caption */
#gallery.hero-gallery {
  columns: initial;
  padding: 0;
}

#gallery .hero-figure {
  margin: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* uses the real visible viewport on mobile browsers */
  overflow: hidden;
  border: none;
  background: none;
  padding: 0;
}

#gallery .hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#gallery .hero-figure img.loaded {
  opacity: 1;
}

@media (max-width: 900px) {
  #gallery { columns: 2 200px; }
}
@media (max-width: 520px) {
  #gallery { columns: 1; padding: 1rem 1rem 3rem; }
}

#gallery figure {
  margin: 0 0 var(--gap);
  break-inside: avoid;
  cursor: pointer;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 8px 8px 0;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

#gallery figure:hover {
  border-color: var(--muted);
  transform: translateY(-2px);
}

#gallery .hero-figure:hover {
  border-color: transparent;
  transform: none;
}

#gallery img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.92) contrast(1.03);
  transition: opacity 0.4s ease, filter 0.3s ease;
  opacity: 0;
}

#gallery figure:hover img {
  filter: saturate(1) contrast(1.05);
}

#gallery img.loaded {
  opacity: 1;
}

#gallery figure figcaption {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0.5rem 0.15rem 0.6rem;
  text-transform: uppercase;
}

.empty-state {
  padding: 4rem 2rem;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.site-footer {
  text-align: center;
  padding: 2rem 1rem 3rem;
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(28, 25, 18, 0.97) 0%, rgba(10, 9, 6, 0.99) 100%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.lightbox.open {
  display: flex;
}

.lightbox-frame {
  margin: 0;
  max-width: 88vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 14px 14px 0;
}

.lightbox-img {
  max-width: 86vw;
  max-height: 78vh;
  object-fit: contain;
  filter: saturate(0.92) contrast(1.03);
}

.lightbox-caption {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.7rem 0.2rem 0.8rem;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: none;
  border: none;
  color: var(--paper);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 1rem;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
  color: var(--accent);
}

.lightbox-close {
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.6rem;
}

.lightbox-prev {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 600px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.25rem 1rem;
  }
  .section-nav {
    gap: 1rem;
    flex-wrap: wrap;
  }
}