:root {
  --jungle: #0b1f14;
  --gold: #e2b85a;
  --sand: #f3e7c9;
  --muted: #b7cfc0;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Manrope, system-ui, sans-serif;
  color: #eef6ef;
  background: linear-gradient(180deg, #07140e, var(--jungle) 40%, #06110c);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1rem 5vw;
  border-bottom: 1px solid rgba(226,184,90,0.15);
  background: rgba(7,20,14,0.75); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 5;
}
.top a.home { color: var(--gold); font-weight: 700; }
.top nav { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.92rem; color: var(--muted); }
.top nav a:hover, .top nav a.active { color: var(--gold); }
main { padding: 2rem 5vw 3.5rem; }
h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--sand); margin: 0 0 0.4rem;
}
.sub { color: var(--muted); margin: 0 0 1.5rem; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.grid img, .masonry img {
  width: 100%; border-radius: 16px;
  border: 1px solid rgba(226,184,90,0.14);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}
.grid img { aspect-ratio: 4/5; object-fit: cover; }
.masonry { columns: 3 240px; column-gap: 1rem; }
.masonry figure { break-inside: avoid; margin: 0 0 1rem; }
.masonry figcaption { padding: 0.5rem 0.2rem; color: var(--muted); font-size: 0.85rem; }
.credits { margin-top: 1rem; color: #7f998a; font-size: 0.8rem; }