:root {
  --bg: #0e0f11;
  --surface: #17181b;
  --text: #e8e6e3;
  --muted: #9a9791;
  --accent: #d4a24e;
  --radius: 10px;
  --max: 1200px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.site-header { max-width: var(--max); margin: 0 auto; padding: 2.5rem 1.5rem 1rem; }
.home-link { text-decoration: none; color: inherit; }
#site-title { font-size: 1.6rem; font-weight: 600; margin: 0; letter-spacing: 0.01em; }
.tagline { color: var(--muted); margin: 0.2rem 0 0; font-size: 0.95rem; }

main { max-width: var(--max); margin: 0 auto; padding: 1.5rem; }

/* Album list */
.album-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.album-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border-radius: var(--radius); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.album-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.album-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.album-card .cover-fallback { width: 100%; aspect-ratio: 3/2; display: grid; place-items: center; font-size: 2rem; background: #232427; }
.album-card .album-info { padding: .8rem 1rem 1rem; }
.album-card h2 { font-size: 1rem; margin: 0; font-weight: 600; }
.album-card .album-meta { color: var(--muted); font-size: .82rem; margin: .15rem 0 0; }

/* Photo grid (masonry-ish via CSS columns) */
.photo-grid { column-gap: .9rem; }
.photo-grid .item { break-inside: avoid; margin-bottom: .9rem; position: relative; cursor: zoom-in; }
.photo-grid img, .photo-grid video { width: 100%; display: block; border-radius: 8px; background: var(--surface); }
.item .play-badge {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 2.4rem; text-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none;
}

.back-link { display: inline-block; color: var(--muted); text-decoration: none; margin-bottom: 1rem; }
.back-link:hover { color: var(--accent); }
.album-header h2 { margin: 0 0 0.1rem; font-size: 1.35rem; }
.album-header .album-meta { color: var(--muted); margin: 0 0 1.5rem; font-size: .9rem; }

/* Password gate */
.gate { max-width: 380px; margin: 4rem auto; text-align: center; background: var(--surface); padding: 2rem; border-radius: var(--radius); }
.gate input {
  width: 100%; padding: .7rem .9rem; margin: 1rem 0; border-radius: 8px;
  border: 1px solid #333; background: #0e0f11; color: var(--text); font-size: 1rem;
}
.gate button {
  padding: .7rem 1.6rem; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--accent); color: #141414; font-weight: 600;
}
.gate .gate-error { color: #e06c60; font-size: .9rem; min-height: 1.2em; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(10,10,12,.96);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 94vw; max-height: 88vh; display: grid; place-items: center; }
.lightbox img, .lightbox video { max-width: 94vw; max-height: 88vh; object-fit: contain; }
.lb-close, .lb-prev, .lb-next {
  position: fixed; background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 2.6rem; line-height: 1; padding: .5rem; z-index: 51;
}
.lb-close { top: .6rem; right: 1.2rem; }
.lb-prev { left: .8rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .8rem; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: #fff; }
.lb-caption { position: fixed; bottom: 1.1rem; width: 100%; text-align: center; color: var(--muted); font-size: .9rem; margin: 0; }

.site-footer { max-width: var(--max); margin: 2rem auto 0; padding: 1.5rem; color: var(--muted); font-size: .82rem; border-top: 1px solid #1e2023; }

@media (min-width: 640px) { .photo-grid { column-count: 2; } }
@media (min-width: 960px) { .photo-grid { column-count: 3; } }