/*
 * V6.7 navigation system.
 * Values are adapted from the user-supplied MOUTHWASH homepage source:
 * 1/6 brand column, compact 2px-radius nav controls, 4px item gap,
 * cap-height padding, neutral translucent hover state, and native cursors.
 * Proprietary MOUTHWASH font files and brand assets are intentionally not copied.
 */
:root {
  --mw-nav-font: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --mw-nav-hover: rgba(219, 219, 219, .52);
  --mw-mobile-menu: #c0c1ba;
  --mw-nav-radius: 2px;
  --mw-nav-duration: 250ms;
}

.site-header,
.site-header[data-scrolled="true"] {
  position: fixed;
  inset: 0 0 auto;
  height: auto;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}

.site-nav {
  display: flex;
  align-items: flex-start;
  width: min(100%, 2000px);
  min-height: 0;
  margin-inline: auto;
  padding: 16px clamp(20px, 4.15vw, 60px);
  gap: 0;
  pointer-events: none;
}

.brand,
.nav-links,
.nav-toggle { pointer-events: auto; }

.brand {
  flex: 0 0 16.6667%;
  display: flex;
  align-items: baseline;
  gap: 0;
  min-width: 0;
  padding-right: 20px;
  color: #000;
  font-family: var(--mw-nav-font);
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.03em;
  transition: opacity var(--mw-nav-duration) ease;
}
.brand:hover,
.brand:focus-visible { opacity: .5; }
.brand-mark::after {
  margin-inline: .42em;
  color: currentColor;
  opacity: .45;
}

.nav-links {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.nav-links > a,
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: .5em .6em .4em;
  border: 0;
  border-radius: var(--mw-nav-radius);
  background: transparent;
  color: #000;
  font-family: var(--mw-nav-font);
  font-size: clamp(14px, 1.25vw, 20px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.03em;
  white-space: nowrap;
  opacity: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: color var(--mw-nav-duration) ease,
              background-color var(--mw-nav-duration) ease,
              transform 100ms ease;
}
.nav-links > a:hover,
.nav-links > a:focus-visible,
.nav-links > a[aria-current="true"],
.nav-links > a[aria-current="page"],
.lang-switch:hover,
.lang-switch:focus-visible {
  color: #000;
  background: var(--mw-nav-hover);
  opacity: 1;
}
.nav-links > a:active,
.lang-switch:active { transform: scale(.985); }

.nav-resume { order: 5; }
.lang-switch {
  order: 6;
  margin-left: auto;
  gap: .28em;
  cursor: pointer;
}
.lang-switch .lang-option { opacity: .42; }
.lang-switch .lang-separator { opacity: .42; }
html[data-lang="zh"] .lang-switch [data-lang-code="zh"],
html[data-lang="en"] .lang-switch [data-lang-code="en"] { opacity: 1; }

.nav-toggle { display: none; }

/* Restore MOUTHWASH-like native pointer behaviour. */
html,
body { cursor: auto; }
a,
button,
[role="button"],
[data-gallery] { cursor: pointer; }
input,
textarea,
[contenteditable="true"] { cursor: text; }

@media (max-width: 760px) {
  .site-header,
  .site-header[data-scrolled="true"] { z-index: 1000; }
  .site-nav {
    min-height: 0;
    padding: 16px 20px;
    align-items: flex-start;
  }
  .brand {
    position: relative;
    z-index: 1003;
    flex-basis: auto;
    padding: 0;
    font-size: clamp(27px, 9.4vw, 42px);
    line-height: .9;
    letter-spacing: -.025em;
  }
  .brand-name { display: none; }
  .brand-mark::after { display: none; }

  .nav-toggle {
    position: fixed;
    z-index: 1004;
    top: 16px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 52px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f0f0f0;
    color: #000;
    transition: background-color var(--mw-nav-duration) ease,
                transform 100ms ease;
  }
  .nav-toggle:hover,
  .nav-toggle:focus-visible { background: #dededb; }
  .nav-toggle:active { transform: scale(.95); }
  .nav-toggle span {
    display: block;
    width: 16px;
    height: 1px;
    border-radius: 0;
    background: currentColor;
    transition: transform 300ms cubic-bezier(.23,1,.32,1), opacity 200ms ease;
  }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2.5px) rotate(-45deg); }

  .nav-links {
    position: fixed;
    z-index: 1002;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    height: 100svh;
    padding: clamp(108px, 26vw, 138px) 20px 20px;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--mw-mobile-menu);
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity 280ms ease, visibility 0s linear 280ms;
  }
  .nav-links[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav-links > a,
  .lang-switch,
  html[data-lang="en"] .nav-links > a,
  html[data-lang="en"] .lang-switch {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #000;
    font-family: var(--mw-nav-font);
    font-size: clamp(40px, 13vw, 58px);
    font-weight: 400;
    line-height: .93;
    letter-spacing: -.035em;
  }
  .nav-links > a + a { margin-top: .06em; }
  .nav-links > a[aria-current="true"],
  .nav-links > a[aria-current="page"] { opacity: .5; }
  .nav-links > a:hover,
  .nav-links > a:focus-visible { opacity: .5; }
  .lang-switch {
    order: 6;
    margin: auto 0 0;
    gap: .22em;
    font-size: clamp(24px, 8vw, 34px);
    letter-spacing: -.025em;
  }
  body.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .nav-links,
  .nav-links > a,
  .lang-switch,
  .nav-toggle,
  .nav-toggle span { transition: none !important; }
}

/* Language-specific line breaking: preserve the locked grid without clipping English copy. */
@media (max-width: 760px) {
  html[data-lang="en"] .hero-role {
    max-width: 100%;
    font-size: clamp(28px, 8.1vw, 32px);
    line-height: 1.03;
    letter-spacing: -.042em;
    overflow-wrap: anywhere;
  }
  html[data-lang="en"] .hero-role span {
    display: block;
    white-space: normal;
  }
}