/* Nav bar (hidden until the intro ends), phone menu overlay. docs/02-design-spec.md › Nav bar */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--side);
  background: rgba(12, 11, 10, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  color: var(--ivory);
  opacity: 0;
  visibility: hidden;
}

.nav-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-decoration: none;
  min-height: 44px;
  justify-content: center;
}
.nav-logo-word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-right: -0.1em; /* letter-spacing trails the last letter; keep the word optically centred */
}
.nav-logo .ornament {
  width: 64px;
  height: auto;
  stroke-width: 12;
}

.nav-links { display: none; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-lang,
.nav-links a,
.menu-close,
.menu-lang {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-lang {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
}

.nav-menu-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 7px;
}
.nav-menu-btn span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
}

@media (min-width: 900px) {
  .nav-logo-word { font-size: 26px; }
  .nav-logo .ornament { width: 76px; }

  .nav-menu-btn { display: none; }

  .nav-links {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .nav-links ul {
    display: flex;
    gap: 34px;
    list-style: none;
  }
  .nav-links a {
    position: relative;
    display: inline-block;
    padding: 8px 0;
  }
  /* underline grows from the left on hover; stays for the active section */
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-links a:hover::after,
  .nav-links a[aria-current="true"]::after { transform: scaleX(1); }
}

/* ---------- phone menu (a modal <dialog>) ---------- */

.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0 var(--side) 40px;
  background: var(--black);
  color: var(--ivory);
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.35s ease, display 0.35s allow-discrete, overlay 0.35s allow-discrete;
}
.menu[open] {
  display: flex;
  opacity: 1;
}
@starting-style {
  .menu[open] { opacity: 0; }
}
.menu::backdrop { background: transparent; }

.menu-top {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-close {
  min-height: 44px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.menu-close span { font-size: 18px; letter-spacing: 0; }

.menu-links {
  list-style: none;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.menu-links a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 12vw, 56px);
  line-height: 1.15;
  text-decoration: none;
}
.menu-links a[aria-current="true"] { color: var(--butter); }

.menu-lang {
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--butter);
}