/* ============================================
   Layout — Navigation & Footer (Revamped 2026)
   ============================================ */

/* ─────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(24px, 5vw, 64px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all var(--duration-normal) var(--ease-default);
}

/* On hero: light text */
.nav .nav-logo,
.nav .nav-links a {
  color: rgba(251,250,245,.92);
  transition: color var(--duration-normal);
}
.nav .nav-toggle span { background: var(--white); }

/* Scrolled state */
.nav.scrolled {
  padding: 18px clamp(24px, 5vw, 64px);
  background: rgba(251,250,245,.92);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(var(--gold-rgb),.22);
  box-shadow: var(--shadow-nav);
}
.nav.scrolled .nav-logo,
.nav.scrolled .nav-links a { color: var(--ink); }
.nav.scrolled .nav-toggle span { background: var(--ink); }

/* Logo */
.nav-logo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Nav links */
.nav-links {
  display: flex;
  gap: 40px;
}
.nav-links a {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .75;
  position: relative;
  transition: opacity .3s, color .3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-deep);
  transition: width .3s var(--ease-default);
}
.nav-links a:hover,
.nav-links a.active { opacity: 1; }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav.scrolled .nav-links a:hover { color: var(--forest); }

/* Nav CTA */
.nav-cta {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--forest);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  transition: background .3s, transform .3s;
}
.nav-cta:hover {
  background: var(--forest-deep);
  transform: translateY(-2px);
}
.nav.scrolled .nav-cta { color: var(--gold); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  transition: transform .3s var(--ease-default), opacity .3s;
  transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─────────────────────────────────────────
   MOBILE MENU
───────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-default), visibility .5s;
}
.mobile-menu.open { opacity: 1; visibility: visible; }

.mobile-menu a {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .1em;
  color: var(--forest);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s var(--ease-default), transform .4s var(--ease-default), color .3s;
}
.mobile-menu.open a { opacity: 1; transform: translateY(0); }
.mobile-menu.open a:nth-child(1) { transition-delay: .08s; }
.mobile-menu.open a:nth-child(2) { transition-delay: .14s; }
.mobile-menu.open a:nth-child(3) { transition-delay: .20s; }
.mobile-menu.open a:nth-child(4) { transition-delay: .26s; }
.mobile-menu.open a:nth-child(5) { transition-delay: .32s; }
.mobile-menu a:hover { color: var(--gold-text); }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer {
  background: var(--forest-deep);
  color: var(--gold);
  padding: 100px clamp(24px, 5vw, 64px) 60px;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto 72px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.footer-logo {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: .15em;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer-tagline {
  font-size: .88rem;
  color: rgba(var(--gold-rgb),.55);
  line-height: 1.8;
  max-width: 300px;
}

.footer-col h4 {
  font-family: var(--serif);
  font-size: .95rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--gold-deep);
  margin-bottom: 28px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 14px; }

.footer-col a {
  font-size: .83rem;
  color: rgba(var(--gold-rgb),.5);
  letter-spacing: .04em;
  transition: color .3s, padding-left .3s;
}
.footer-col a:hover { color: var(--gold); padding-left: 4px; }

/* Footer quote */
.footer-quote {
  max-width: var(--max-width);
  margin: 0 auto 44px;
  padding-top: 44px;
  border-top: 1px solid rgba(var(--gold-rgb),.12);
  text-align: center;
}
.footer-quote p {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(var(--gold-rgb),.65);
  line-height: 1.75;
  margin-bottom: 14px;
}
.footer-hashtags {
  font-family: var(--serif);
  font-size: .82rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--gold-deep);
  opacity: .5;
}

/* Footer bottom bar */
.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 36px;
  border-top: 1px solid rgba(var(--gold-rgb),.1);
  font-size: .65rem;
  color: rgba(var(--gold-rgb),.3);
  letter-spacing: .12em;
  flex-wrap: wrap;
  gap: 8px;
}