/*
 * FCTRYLAB-inspired design layer.
 * Adds sharper typography treatment, structured panels, and stronger motion cues
 * without rewriting page-specific layouts.
 */

:root {
  --fx-ink: var(--text-dark);
  --fx-metal: #3c3427;
  --fx-sand: #f7f3eb;
  --fx-panel: linear-gradient(165deg, rgba(255, 255, 255, 0.86), rgba(248, 247, 245, 0.74));
  --fx-line: rgba(212, 175, 55, 0.14);
  --fx-line-strong: rgba(212, 175, 55, 0.28);
  --fx-accent: var(--gold-primary);
  --fx-accent-soft: rgba(212, 175, 55, 0.18);
  --fx-shadow-soft: 0 12px 34px rgba(90, 67, 24, 0.08);
}

body {
  background:
    radial-gradient(900px 480px at 14% -8%, rgba(212, 175, 55, 0.1), transparent 62%),
    radial-gradient(680px 380px at 88% -20%, rgba(192, 192, 192, 0.12), transparent 64%),
    var(--fx-sand);
}

nav {
  border-bottom: 1px solid var(--fx-line);
  box-shadow: var(--fx-shadow-soft);
}

nav.scrolled {
  border-bottom-color: var(--fx-line-strong);
  box-shadow: 0 14px 38px rgba(90, 67, 24, 0.1);
}

.nav-links a {
  font-weight: 600;
  letter-spacing: 0.18em;
}

.hero-title,
.page-hero h1 {
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.hero-subtitle,
.page-hero p {
  max-width: 740px;
  color: rgba(60, 52, 39, 0.82);
}

.hero-cta,
.btn,
button,
.submit-btn,
.cat-tab {
  border-radius: 4px;
  border-width: 1.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.hero-cta:hover,
.btn:hover,
button:hover,
.submit-btn:hover {
  transform: translateY(-2px);
}

.about-grid,
.timeline-category,
.timeline-item,
.bio-section,
.highlight-card,
.art-item,
.gallery-item,
.contact-form,
.social-card,
.info-card {
  background: var(--fx-panel);
  border: 1px solid var(--fx-line);
  box-shadow: var(--fx-shadow-soft);
}

.timeline-category,
.timeline-item,
.contact-form {
  backdrop-filter: blur(8px);
}

.gallery-label h2,
.page-hero h1,
.section-title {
  position: relative;
}

.gallery-label h2::after,
.section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 0.65rem;
  background: linear-gradient(90deg, var(--fx-accent), transparent);
}

.cat-tab.active,
.hero-cta,
.submit-btn,
.social-card:hover,
.timeline-item:hover {
  border-color: var(--fx-accent);
}

.cat-tab.active,
.submit-btn,
.hero-cta::before,
.btn::before,
button::before {
  background: var(--fx-accent);
}

.lb-topbar,
.lb-filmstrip-wrap {
  border-color: rgba(212, 175, 55, 0.24);
}

.lb-thumb.active {
  border-color: var(--fx-accent);
  box-shadow: 0 0 0 2px var(--fx-accent-soft);
}

.gallery-meta,
.coming-soon {
  border-color: rgba(212, 175, 55, 0.2);
  color: var(--fx-metal);
}

.overlay {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.16), rgba(192, 192, 192, 0.14));
}

.footer-copy {
  opacity: 0.84;
}

@media (max-width: 768px) {
  .hero-title,
  .page-hero h1 {
    letter-spacing: 0.02em;
  }

}