/* ==========================================================================
   Nav — 72px bar + 2px rule, 24px side padding (as drawn)
   Brand 173.6px wide / 19px cap · links 17px caps · gaps 33px
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}

.nav::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--rule);
}

.nav__inner {
  height: 100%;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--nav-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ---------------- brand ---------------- */
/* ---------------- brand ----------------
   design ink was 19px tall; the name is mostly CJK now, and CJK ink in the
   10-grid face is 0.9em, so 21px keeps the same 19px cap as the frame
   (latin-only text at 25px looked balanced, CJK at 25px over-weighted) */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-synthesis: none;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.nav__brand:hover {
  opacity: 0.82;
}

.nav__brand img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: none;
}

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

.nav__link {
  position: relative;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--px-nav);
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  padding-block: 6px;
  color: var(--ink);
  transition: color 0.22s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--magenta);
  transform: scaleX(0);
  transition: transform 0.34s var(--ease);
}

.nav__link:hover::after {
  transform: scaleX(1);
}

/* ---------------- language ---------------- */
.nav__lang {
  position: relative;
}

.nav__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--px-nav);
  line-height: 1;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  padding-block: 6px;
  white-space: nowrap;
  transition: opacity 0.22s var(--ease);
}

.nav__lang-btn:hover {
  opacity: 0.72;
}

.nav__lang-btn svg {
  width: 10px;
  height: 10px;
  flex: none;
  transition: transform 0.3s var(--ease);
}

.nav__lang[data-open="true"] .nav__lang-btn svg {
  transform: rotate(180deg);
}

.nav__lang-menu {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  min-width: 128px;
  padding: 6px;
  border-radius: 10px;
  background: #131316;
  border: 1px solid #26262d;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.24s var(--ease);
}

.nav__lang[data-open="true"] .nav__lang-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav__lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.2;
  -webkit-font-smoothing: none;
  color: var(--ink-soft);
  text-align: left;
  transition: background 0.16s, color 0.16s;
}

.nav__lang-item:hover {
  background: #212128;
  color: #fff;
}

.nav__lang-item[aria-selected="true"] {
  color: var(--magenta);
}

/* ---------------- mobile toggle ---------------- */
.nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 9px;
  transition: background 0.2s;
}

.nav__toggle:hover {
  background: rgba(255, 255, 255, 0.07);
}

.nav__toggle span {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  transition: background 0.18s;
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #fff;
  transition: transform 0.3s var(--ease), top 0.3s var(--ease);
}

.nav__toggle span::before {
  top: -6px;
}
.nav__toggle span::after {
  top: 6px;
}

.nav[data-open="true"] .nav__toggle span {
  background: transparent;
}
.nav[data-open="true"] .nav__toggle span::before {
  top: 0;
  transform: rotate(45deg);
}
.nav[data-open="true"] .nav__toggle span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ---------------- narrow ---------------- */
@media (max-width: 820px) {
  .nav__toggle {
    display: grid;
  }

  .nav__brand {
    font-size: 20px;
  }

  .nav__brand img {
    width: 22px;
    height: 22px;
  }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--nav-pad) 20px;
    background: rgba(4, 4, 6, 0.97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.24s var(--ease), transform 0.28s var(--ease);
  }

  .nav[data-open="true"] .nav__links {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .nav__link,
  .nav__lang-btn {
    padding: 14px 2px;
    border-bottom: 1px solid #16161a;
  }

  .nav__link::after {
    display: none;
  }

  .nav__lang,
  .nav__lang-menu {
    width: 100%;
  }

  .nav__lang-menu {
    position: static;
    display: none;
    min-width: 0;
    margin: 4px 0 0;
    box-shadow: none;
    background: #0f0f12;
  }

  .nav__lang[data-open="true"] .nav__lang-menu {
    display: block;
    opacity: 1;
  }
}

/* the name is 11 glyphs wide — shrink it before it collides with the toggle */
@media (max-width: 430px) {
  .nav__brand {
    font-size: 17px;
    gap: 6px;
  }

  .nav__brand img {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 350px) {
  .nav__brand {
    font-size: 15px;
  }
}