:root {
  --photo-bg: #0b0b0b;
  --photo-surface: #111110;
  --photo-line: oklch(22% 0.004 60);
  --photo-text: oklch(95% 0.006 60);
  --photo-muted: oklch(57% 0.006 60);
  --photo-orange: #ff4d00;
}

body.photo-page {
  background: var(--photo-bg);
  color: var(--photo-text);
}

/* ── Header overrides ───────────────────────────────────── */
body.photo-page .site-header {
  background: oklch(8% 0.003 60 / .9);
  border-bottom-color: oklch(25% 0.003 60);
}
body.photo-page .brand img { filter: invert(1); }
body.photo-page .nav-inline a { color: var(--photo-muted); }
body.photo-page .nav-inline a:hover,
body.photo-page .nav-inline a[aria-current="page"] { color: var(--photo-orange); }
body.photo-page .menu-btn { background: var(--photo-text); color: var(--photo-bg); }

/* ── Index shell ───────────────────────────────────────── */
.photo-index {
  padding-top: var(--hdr);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Grid ──────────────────────────────────────────────── */
.photo-grid-wrap {
  margin: 0 clamp(24px, 5vw, 64px);
  padding: clamp(32px, 5vw, 56px) 0 clamp(80px, 12vw, 160px);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.photo-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--photo-line);
  background: var(--photo-surface);
  cursor: pointer;
  padding: 0;
  transition: border-color .28s ease, box-shadow .38s cubic-bezier(.22,1,.36,1);
}
.photo-item:hover,
.photo-item:focus-visible {
  border-color: oklch(45% 0.004 60);
  box-shadow: 0 20px 48px #0000007a;
}
.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.photo-item:hover img { transform: scale(1.04); }

.photo-empty,
.photo-error {
  grid-column: 1 / -1;
  padding: 64px 0;
  color: var(--photo-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 46ch;
}
.photo-error { color: oklch(70% 0.12 40); }

/* ── Lightbox ──────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(5% 0 0 / .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }

.lightbox-figure {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 6px;
  box-shadow: 0 30px 80px #000000b3;
  transform: scale(.97);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.lightbox.open .lightbox-figure img { transform: scale(1); }

.lightbox-close,
.lightbox-nav {
  position: fixed;
  border: none;
  background: oklch(18% 0 0 / .7);
  color: var(--photo-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--photo-orange); }

.lightbox-close {
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 22px;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 20px;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

/* ── Footer ────────────────────────────────────────────── */
.photo-footer {
  display: flex;
  justify-content: space-between;
  margin: 0 clamp(24px, 5vw, 64px);
  padding: 22px 0 34px;
  border-top: 1px solid var(--photo-line);
  color: var(--photo-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.photo-footer a { color: inherit; text-decoration: none; }
.photo-footer a:hover { color: var(--photo-text); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 760px) {
  body.photo-page .nav-inline {
    background: oklch(8% 0.003 60 / .98);
    border-bottom-color: var(--photo-line);
  }
  body.photo-page .nav-inline a { border-bottom-color: var(--photo-line); }

  .photo-grid-wrap { margin: 0 20px; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .photo-footer { margin: 0 20px; }

  .lightbox-nav { width: 40px; height: 40px; font-size: 16px; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 14px; right: 14px; width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-item, .photo-item img, .lightbox, .lightbox-figure img { transition: none; }
}