/* Shared mobile/tablet navigation. Each page keeps its own nav styles;
   this only adds the Menu control and the drop-down panel. */

.nav-links a { white-space: nowrap; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px 0 10px 20px;
  margin: -10px 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #d6b266;
  cursor: pointer;
}

.nav-toggle:focus-visible { outline: 0.5px solid #d6b266; outline-offset: 4px; }

@media (max-width: 900px) {
  nav { padding-left: 24px; padding-right: 24px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }

  nav.nav-open .nav-links {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 24px 20px;
    list-style: none;
    background: #0c0f1a;
    border-bottom: 0.5px solid rgba(214,178,102,0.12);
  }

  nav.nav-open .nav-links li { border-top: 0.5px solid rgba(214,178,102,0.12); }
  nav.nav-open .nav-links li:first-child { border-top: 0; }

  nav.nav-open .nav-links a {
    display: block;
    padding: 18px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(240,236,228,0.85);
  }

  nav.nav-open .nav-links a.active,
  nav.nav-open .nav-links a:hover { color: #d6b266; }
}