/* ========================================
   Stone & Grain — Navigation
   Fixed top bar with frosted glass
   ======================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: var(--z-nav);
  background: rgba(250, 247, 242, 0.96);
  transition: box-shadow 0.3s ease;
}

@supports (backdrop-filter: blur(8px)) {
  .nav {
    background: rgba(250, 247, 242, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.nav--scrolled {
  box-shadow: 0 1px 0 var(--border);
}

.nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.nav__logo {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--charcoal);
  white-space: nowrap;
}

.nav__logo span {
  color: var(--accent);
  font-weight: 400;
}

/* Links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__link {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-gray);
  transition: color 0.25s ease;
  position: relative;
}

.nav__link:hover,
.nav__link.active {
  color: var(--accent);
}

.nav__link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
}

/* CTA Button */
.nav__cta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 10px 24px;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav__cta:hover {
  background: var(--accent);
  color: var(--warm-white);
}

/* Mobile Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.nav__hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--charcoal);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav--open .nav__hamburger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav--open .nav__hamburger span:nth-child(2) {
  opacity: 0;
}

.nav--open .nav__hamburger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile Menu Panel */
.nav__mobile-panel {
  display: none;
}