/*
 * Vaulk-inspired structural treatment for the gallery pages,
 * aligned to the main site palette instead of a separate dark/orange branch.
 */

body.odyssey-page,
body.creations-page {
  --vaulk-panel: linear-gradient(165deg, rgba(255, 255, 255, 0.8), rgba(248, 247, 245, 0.72));
  --vaulk-border: rgba(212, 175, 55, 0.14);
  --vaulk-border-strong: rgba(212, 175, 55, 0.34);
  background:
    radial-gradient(920px 500px at 8% -15%, rgba(212, 175, 55, 0.14), transparent 60%),
    radial-gradient(760px 420px at 88% -8%, rgba(192, 192, 192, 0.14), transparent 62%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.24) 0%, rgba(248, 247, 245, 0.14) 48%, rgba(255, 255, 255, 0.22) 100%);
  color: var(--text-dark);
}

body.odyssey-page .cursor-glow,
body.creations-page .cursor-glow {
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, rgba(192, 192, 192, 0.1) 42%, transparent 72%);
}

body.odyssey-page nav,
body.creations-page nav {
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid var(--vaulk-border);
  box-shadow: 0 12px 30px rgba(90, 67, 24, 0.08);
}

body.odyssey-page nav.scrolled,
body.creations-page nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--vaulk-border-strong);
}

body.odyssey-page .logo-text,
body.creations-page .logo-text {
  color: var(--gold-primary);
}

body.odyssey-page .nav-links a,
body.creations-page .nav-links a {
  color: var(--text-medium);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.16em;
}

body.odyssey-page .nav-links a.active,
body.creations-page .nav-links a.active,
body.odyssey-page .nav-links a:hover,
body.creations-page .nav-links a:hover {
  color: var(--gold-primary);
}

body.odyssey-page .page-hero,
body.creations-page .page-hero {
  min-height: 62vh;
  border-top: 1px solid var(--vaulk-border);
  border-bottom: 1px solid var(--vaulk-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(248, 247, 245, 0.14) 100%);
}

body.odyssey-page .page-hero::before,
body.creations-page .page-hero::before {
  background:
    radial-gradient(circle at 22% 26%, rgba(212, 175, 55, 0.2) 0%, transparent 46%),
    radial-gradient(circle at 78% 72%, rgba(192, 192, 192, 0.16) 0%, transparent 52%);
}

body.odyssey-page .page-hero-content,
body.creations-page .page-hero-content {
  max-width: 980px;
  padding: 0 1.8rem;
}

body.odyssey-page .page-hero h1,
body.creations-page .page-hero h1 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  text-wrap: balance;
}

body.odyssey-page .page-hero p,
body.creations-page .page-hero p {
  font-family: var(--body);
  color: var(--text-medium);
  max-width: 760px;
}

body.odyssey-page .section-label,
body.creations-page .section-label,
body.odyssey-page .gallery-meta,
body.creations-page .gallery-meta {
  font-family: var(--display);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body.odyssey-page .gallery-label,
body.creations-page .gallery-label {
  position: relative;
  background: var(--vaulk-panel);
  border: 1px solid var(--vaulk-border);
  border-radius: 22px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 18px 36px rgba(90, 67, 24, 0.08);
  backdrop-filter: blur(16px);
}

body.odyssey-page .gallery-label::before,
body.creations-page .gallery-label::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 32px;
  height: 32px;
  border-top: 1px solid var(--vaulk-border-strong);
  border-left: 1px solid var(--vaulk-border-strong);
}

body.odyssey-page .gallery-grid,
body.creations-page .art-grid {
  gap: 20px;
}

body.odyssey-page .gallery-item,
body.creations-page .art-item {
  border-radius: 20px;
  border: 1px solid var(--vaulk-border);
  box-shadow: 0 18px 30px rgba(90, 67, 24, 0.08);
  background: var(--vaulk-panel);
  backdrop-filter: blur(14px);
}

body.odyssey-page .gallery-item:hover,
body.creations-page .art-item:hover {
  border-color: var(--vaulk-border-strong);
  box-shadow: 0 22px 38px rgba(90, 67, 24, 0.12);
  transform: translateY(-7px) scale(1.012);
}

@media (min-width: 1024px) {
  body.odyssey-page .gallery-item {
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.7rem, 1vw, 0.95rem);
  }

  body.odyssey-page .gallery-item picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  body.odyssey-page .gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    max-height: clamp(320px, 34vw, 520px);
    object-fit: contain;
    object-position: center center;
    border-radius: 16px;
  }

  body.odyssey-page .gallery-item:hover img {
    transform: scale(1.015);
    filter: brightness(1.05) contrast(1.08) saturate(1.04);
  }

  body.odyssey-page .lb-main {
    padding-inline: clamp(4.5rem, 7vw, 7.5rem);
  }

  body.odyssey-page .lb-img-wrap {
    width: min(84vw, 1180px);
    height: min(76vh, 920px);
    max-width: none;
    max-height: none;
    padding: clamp(0.65rem, 1vw, 0.95rem);
  }

  body.odyssey-page .lb-img-wrap img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

body.odyssey-page .overlay,
body.creations-page .overlay {
  background: linear-gradient(150deg, rgba(212, 175, 55, 0.18), rgba(192, 192, 192, 0.16));
}

body.odyssey-page .overlay h3,
body.creations-page .overlay h3 {
  font-family: var(--display);
  color: var(--text-dark);
  letter-spacing: 0.06em;
}

body.odyssey-page .overlay p,
body.creations-page .overlay p {
  color: var(--text-medium);
}

body.creations-page .cat-filters {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(248, 247, 245, 0.68));
  border: 1px solid var(--vaulk-border);
  border-radius: 18px;
  padding: 0.8rem 1rem;
}

body.creations-page .cat-tab {
  border-radius: 999px;
  border: 1px solid var(--vaulk-border);
  color: var(--text-medium);
  background: rgba(255, 255, 255, 0.7);
  font-family: var(--display);
  letter-spacing: 0.1em;
}

body.creations-page .cat-tab:hover {
  border-color: var(--vaulk-border-strong);
  color: var(--text-dark);
}

body.creations-page .cat-tab.active {
  border-color: var(--vaulk-border-strong);
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.94), rgba(192, 192, 192, 0.88));
  color: var(--text-dark);
}

body.odyssey-page .lightbox,
body.creations-page .lightbox {
  background: rgba(29, 24, 18, 0.96);
}

body.odyssey-page .lb-topbar,
body.creations-page .lb-topbar,
body.odyssey-page .lb-filmstrip-wrap,
body.creations-page .lb-filmstrip-wrap {
  border-color: rgba(212, 175, 55, 0.24);
  background: rgba(43, 35, 27, 0.84);
}

body.odyssey-page .lb-close,
body.creations-page .lb-close,
body.odyssey-page .lb-nav,
body.creations-page .lb-nav {
  border-radius: 999px;
  border-color: rgba(201, 168, 76, 0.42);
  color: #ffffff;
}

body.odyssey-page .lb-close:hover,
body.creations-page .lb-close:hover,
body.odyssey-page .lb-nav:hover,
body.creations-page .lb-nav:hover {
  background: var(--gold-primary);
  color: #0b0f0d;
}

body.odyssey-page .lb-thumb.active,
body.creations-page .lb-thumb.active {
  border-color: var(--vaulk-border-strong);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.22);
}

body.odyssey-page .lb-caption,
body.creations-page .lb-caption {
  width: min(920px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 0.85rem 1rem 1rem;
  text-align: center;
  color: #ffffff;
}

body.odyssey-page .lb-caption h3,
body.creations-page .lb-caption h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: #ffffff;
}

body.odyssey-page .lb-caption p,
body.creations-page .lb-caption p {
  margin: 0.35rem 0 0;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

body.odyssey-page .coming-soon,
body.creations-page .coming-soon {
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(248, 247, 245, 0.68));
  border-color: var(--vaulk-border);
  color: var(--text-dark);
  font-family: var(--display);
}

@media (max-width: 768px) {
  body.odyssey-page .page-hero h1,
  body.creations-page .page-hero h1 {
    letter-spacing: 0.042em;
  }

  body.odyssey-page .gallery-label,
  body.creations-page .gallery-label {
    padding: 1rem 0.95rem;
  }
}