/* ════════════════════════════════════════════════════
   nav.css — Top navigation bar
   Edit this file to change: nav height, logo size,
   link styles, CTA button, frosted glass effect
════════════════════════════════════════════════════ */

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding: 20px 52px;
  border-bottom: 1px solid transparent;
  transition:
    background    0.45s ease,
    border-color  0.45s ease,
    backdrop-filter 0.45s ease;
}

/* Frosted glass state on scroll */
nav.scrolled {
  background: rgba(250, 250, 247, 0.88);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-color: var(--border);
}

/* Logo */
.nav-logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  text-decoration: none;
  font-family:     'Fraunces', serif;
  font-size:       17px;
  font-weight:     400;
  color:           var(--text);
  letter-spacing:  -0.02em;
}

.nav-orb {
  width:  8px;
  height: 8px;
  border-radius: 50%;
  background:  var(--sage);
  box-shadow:  0 0 12px rgba(90, 148, 112, 0.55);
  flex-shrink: 0;
  animation:   pulse 3s ease-in-out infinite;
}

/* Links */
.nav-links {
  display:     flex;
  align-items: center;
  gap:         36px;
}

.nav-link {
  color:           var(--text-muted);
  text-decoration: none;
  font-size:       13px;
  font-family:     'Geist', sans-serif;
  letter-spacing:  0.04em;
  transition:      color 0.2s;
}
.nav-link:hover { color: var(--sage); }

/* CTA button */
.nav-cta {
  background:      var(--sage);
  color:           #fff;
  padding:         10px 22px;
  border-radius:   100px;
  font-family:     'Geist', sans-serif;
  font-size:       11px;
  font-weight:     500;
  letter-spacing:  0.07em;
  text-decoration: none;
  transition:
    background  0.2s,
    transform   0.25s var(--spring),
    box-shadow  0.25s;
  box-shadow: 0 2px 14px rgba(90, 148, 112, 0.32);
}
.nav-cta:hover {
  background:  var(--sage-hover);
  transform:   translateY(-1px);
  box-shadow:  0 5px 20px rgba(90, 148, 112, 0.42);
}