/* ── Custom Properties ── */
:root {
  --navy-950: #0a0f1e;
  --navy-900: #0f1629;
  --navy-800: #151d35;
  --navy-700: #1e2a4a;
  --navy-600: #2a3a62;
  --navy-300: #94a3c4;
  --navy-200: #b8c4de;
  --navy-100: #dfe6f5;
  --gold-500: #c8a45e;
  --gold-400: #dbb96e;
  --gold-300: #e8cc8a;
}

/* ── Font Imports ── */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ── Base ── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Lato', sans-serif;
  background-color: var(--navy-950);
  color: var(--navy-100);
}

.font-playfair {
  font-family: 'Playfair Display', serif;
}

.font-lato {
  font-family: 'Lato', sans-serif;
}

/* ── Scroll Reveal ── */
.scroll-reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
  }

  .scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Mobile Menu Transition ── */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

#mobile-menu.open {
  max-height: 400px;
}

/* ── Form Focus Styles ── */
input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 2px rgba(200, 164, 94, 0.3);
}

/* ── Selection ── */
::selection {
  background-color: var(--gold-500);
  color: var(--navy-950);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--navy-950);
}

::-webkit-scrollbar-thumb {
  background: var(--navy-600);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-500);
}

/* ── Image aspect ratios ── */
.aspect-\[4\/5\] {
  aspect-ratio: 4 / 5;
}