/* nav.css — header, brand, primary nav, mobile overlay */

.head-strip {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.head-strip--inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
}

.brand-mark {
  display: inline-flex;
  align-items: baseline;
  gap: .5ch;
  font-family: var(--ff-display);
  font-size: 1.34rem;
  font-weight: 600;
  letter-spacing: .015em;
  color: var(--content);
  white-space: nowrap;
}
.brand-mark:hover { color: var(--content); }
.brand-mark span {
  font-family: var(--ff-body);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brand);
}

.nav-main { display: none; }
.nav-main--list {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-main--list a {
  font-family: var(--ff-body);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .015em;
  color: var(--content-muted);
  padding: 6px 0;
  position: relative;
}
.nav-main--list a:hover,
.nav-main--list a[aria-current="page"] { color: var(--content); }
.nav-main--list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brand);
}

.nav-cta { display: none; }

.menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-btn span {
  display: block;
  width: 20px; height: 1px;
  margin-inline: auto;
  background: var(--content);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}

/* mobile fullscreen overlay — no transform/backdrop-filter on ancestors */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 86px 26px 40px;
  transform: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.nav-overlay[data-open="true"] { visibility: visible; opacity: 1; }
.nav-overlay--close {
  position: absolute;
  top: 14px; right: 22px;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--content);
  font-size: 1.4rem;
  cursor: pointer;
}
.nav-overlay--list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-overlay--list a {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--content);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.nav-overlay--foot {
  margin-top: auto;
  color: var(--content-muted);
  font-size: .92rem;
}
.nav-overlay--foot a { color: var(--brand); }

body.is-locked { overflow: hidden; }

@media (min-width: 920px) {
  .menu-btn { display: none; }
  .nav-overlay { display: none; }
  .nav-main { display: block; }
  .nav-cta { display: inline-flex; }
}