: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;
}

html {
  height: 100%;
}

/* sticky footer: pins the footer to the bottom of the viewport when
   a section has little content, without affecting normal scrolling
   once content is taller than the viewport */
body {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#gallery {
  flex: 1 0 auto;
}

.site-footer {
  flex: 0 0 auto;
}

/* 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;
  flex: 0 0 auto;
  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(22, 20, 15, 0.85) 0%, rgba(22, 20, 15, 0.4) 70%, transparent 100%);
}

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 {
  color: var(--paper);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.6);
}

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

.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);
}

/* horizontal filmstrip: photos sit in a row at a fixed height, natural
   aspect ratio (no cropping), and the strip scrolls/snaps sideways.
   Clicking a photo still opens the same prev/next lightbox as before. */
#gallery {
  --strip-height: 74vh;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--gap) * 2);
  padding: 1rem 2rem 3rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding: 0 2rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--border) transparent;
}

#gallery::-webkit-scrollbar {
  height: 6px;
}

#gallery::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

@media (max-width: 900px) {
  #gallery { --strip-height: 62vh; }
}
@media (max-width: 520px) {
  #gallery { --strip-height: 48vh; padding: 1rem 1rem 3rem; }
}

/* full-bleed cover photo for the "main" section: no border, no caption */
#gallery.hero-gallery {
  overflow: hidden;
  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;
}

#gallery figure {
  flex: 0 0 auto;
  scroll-snap-align: center;
  margin: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

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

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

#gallery img {
  display: block;
  height: var(--strip-height);
  width: auto;
  max-width: 82vw;
  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;
}

/* on the hero page, float the footer over the bottom of the photo
   instead of leaving it below the fold, with the same dark-halo
   treatment used on the header so it stays legible on bright photos */
body.hero-active .site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 1.25rem 1rem 1.5rem;
  background: linear-gradient(transparent, rgba(22, 20, 15, 0.4) 30%, rgba(22, 20, 15, 0.85) 100%);
  color: var(--paper);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 2px 10px rgba(0, 0, 0, 0.6);
}

.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;
  gap: 14px;
  z-index: 100;
}

.lightbox.open {
  display: flex;
}

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

/* faint peek of the previous/next photo, so it's clear there's more
   to browse; cropped to a fixed strip since the gallery's images
   don't share an aspect ratio */
.lightbox-peek {
  flex: 0 0 auto;
  width: clamp(50px, 13vw, 190px);
  height: 70vh;
  object-fit: cover;
  opacity: 0.25;
  filter: blur(3px) saturate(0.7);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.lightbox-peek:hover {
  opacity: 0.45;
}

.lightbox-peek[src=""] {
  visibility: hidden;
}

@media (max-width: 800px) {
  .lightbox-peek {
    display: none;
  }
  .lightbox-frame {
    max-width: 92vw;
  }
}

/* ?peek=off in the URL disables the peek carousel entirely, no rebuild needed */
body.no-peek .lightbox-peek {
  display: none;
}

body.no-peek .lightbox-frame {
  max-width: 88vw;
}

.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-prev:disabled,
.lightbox-next:disabled {
  opacity: 0.12;
  cursor: default;
  pointer-events: none;
}

.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;
  }
}