/* ── SHARED NAV ─────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 400;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 40px;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.monogram { display: block; height: 38px; width: auto; text-decoration: none; flex-shrink: 0; }
.monogram img { height: 38px; width: 52px; display: block; object-fit: contain; object-position: left center; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a {
  font-family: var(--sans); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  color: var(--mid); transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }

@media (max-width: 600px) {
  nav {
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 24px 22px;
    background: #F0EDE8;
    background: var(--bg);
    isolation: isolate;
  }
  .nav-links { gap: 1.2rem; }
  .nav-links a { font-size: 0.58rem; }
  .monogram, .monogram img { height: 28px; }
  .monogram img { width: 38px; }
}

/* ── NAV SHIELD (mobile only) ────────────────────────────────────────
   Masks content scrolling up behind the nav on iOS Safari.
──────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  nav::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0; right: 0;
    height: 34px;
    background: #F0EDE8;
    background: var(--bg);
    z-index: -1;
    pointer-events: none;
  }
}