/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --gold:       #e8780a;
  --gold-light: #f5b94e;
  --dark:       #0f0a1a;
  --surface:    #1a1028;
  --card-bg:    #261638;
  --text:       #f5ede2;
  --text-muted: #8a7a9e;
  --radius:     12px;

  /* Extended palette */
  --purple:     #7c3aed;
  --purple-mid: #9d5cf5;
  --purple-light: #c4a0ff;
  --red:        #dc2626;
  --red-light:  #f87171;
  --orange:     #ea580c;
  --orange-light: #fb923c;
  --yellow:     #ca8a04;
  --yellow-light: #fbbf24;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--dark);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  min-height: 100vh;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  background: linear-gradient(135deg, #1a1028 0%, #0f0a1a 100%);
  border-bottom: 1px solid rgba(124,58,237,.3);
}

.site-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  background: linear-gradient(90deg, var(--purple-light), var(--orange-light), var(--yellow-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.03em;
}

.folder-label {
  font-size: .8rem;
  color: var(--orange);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.btn-back {
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.35);
  color: var(--purple-light);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  transition: background .2s, transform .15s;
  cursor: pointer;
}
.btn-back:hover {
  background: rgba(124,58,237,.3);
  color: var(--purple-light);
  transform: translateX(-2px);
}

/* ── Thumbnail cards ─────────────────────────────────────────────────────── */
.thumb-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .2s, box-shadow .2s;
}
.thumb-card:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 28px rgba(124,58,237,.35);
}
.thumb-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .25s;
}
.thumb-card:hover .thumb-img { filter: brightness(.65); }
.thumb-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 1.6rem;
  opacity: 0; transition: opacity .2s;
}
.thumb-card:hover .thumb-overlay { opacity: 1; }

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lightbox-content {
  background: #100a1e;
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 16px;
}
.lightbox-top { border-bottom: 1px solid rgba(255,255,255,.06); }
.lightbox-body {
  position: relative; min-height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-img {
  max-width: 100%; max-height: 70vh;
  border-radius: 8px; object-fit: contain; display: block;
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff; border-radius: 50%;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  cursor: pointer; font-size: 1.1rem;
  transition: background .2s; z-index: 10; padding: 0;
}
.lb-nav:hover { background: rgba(234,88,12,.3); }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-nav:disabled { opacity: .25; pointer-events: none; }
@media (min-width: 576px) {
  .lb-prev { left: -52px; }
  .lb-next { right: -52px; }
}
.lightbox-footer { border-top: 1px solid rgba(255,255,255,.06); }
.btn-download {
  background: linear-gradient(135deg, var(--red) 0%, var(--orange) 50%, var(--yellow) 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  padding: .4rem .9rem;
  border-radius: 8px;
  transition: opacity .2s, transform .15s;
  font-family: 'DM Sans', sans-serif;
}
.btn-download:hover {
  opacity: .88;
  transform: translateY(-1px);
  color: #fff;
}