/*
 * 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 {
  --white-primary: #f6f1e6;
  --white-secondary: #efe8da;
  --white-tertiary: #e5dccb;
  --text-dark: #151917;
  --text-medium: #4b544f;
  --text-light: #6b736d;
  --gold-primary: #c9a84c;
  --gold-secondary: #ddbf6d;
  --silver-primary: #bfc8c4;
  --accent-gold: rgba(201, 168, 76, 0.18);
  --accent-silver: rgba(191, 200, 196, 0.12);
  --vaulk-panel: rgba(255, 255, 255, 0.74);
  --vaulk-border: rgba(21, 25, 23, 0.12);
  --vaulk-border-strong: rgba(201, 168, 76, 0.44);
  background:
    radial-gradient(920px 500px at 8% -15%, rgba(201, 168, 76, 0.16), transparent 60%),
    radial-gradient(760px 420px at 88% -8%, rgba(191, 200, 196, 0.16), transparent 62%),
    linear-gradient(165deg, #f8f4ea 0%, #efe7d9 48%, #f7f2e8 100%);
  color: var(--text-dark);
}

body.odyssey-page .cursor-glow,
body.creations-page .cursor-glow {
  background: radial-gradient(circle, rgba(201, 168, 76, 0.15) 0%, rgba(191, 200, 196, 0.08) 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 10px 28px rgba(17, 21, 19, 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(--text-dark);
}

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.54) 0%, rgba(235, 228, 214, 0.88) 100%);
}

body.odyssey-page .page-hero::before,
body.creations-page .page-hero::before {
  background:
    radial-gradient(circle at 22% 26%, rgba(201, 168, 76, 0.2) 0%, transparent 46%),
    radial-gradient(circle at 78% 72%, rgba(191, 200, 196, 0.15) 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: 2px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 18px 36px rgba(17, 21, 19, 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: 2px;
  border: 1px solid var(--vaulk-border);
  box-shadow: 0 18px 30px rgba(17, 21, 19, 0.08);
  background: rgba(255, 255, 255, 0.72);
  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(17, 21, 19, 0.12);
  transform: translateY(-7px) scale(1.012);
}

body.odyssey-page .overlay,
body.creations-page .overlay {
  background: linear-gradient(150deg, rgba(201, 168, 76, 0.18), rgba(191, 200, 196, 0.14));
}

body.odyssey-page .overlay h4,
body.creations-page .overlay h4 {
  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: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--vaulk-border);
  border-radius: 2px;
  padding: 0.8rem 1rem;
}

body.creations-page .cat-tab {
  border-radius: 0;
  border: 1px solid var(--vaulk-border);
  color: var(--text-medium);
  background: rgba(255, 255, 255, 0.58);
  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: var(--gold-primary);
  color: #ffffff;
}

body.odyssey-page .lightbox,
body.creations-page .lightbox {
  background: rgba(10, 14, 13, 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(201, 168, 76, 0.24);
  background: rgba(14, 18, 17, 0.84);
}

body.odyssey-page .lb-close,
body.creations-page .lb-close,
body.odyssey-page .lb-nav,
body.creations-page .lb-nav {
  border-radius: 0;
  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 .coming-soon,
body.creations-page .coming-soon {
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.58);
  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;
  }
}