.header {
  position: absolute;
  z-index: 20;
  top: calc(64 * var(--design-unit));
  left: 0;
  width: 100%;
  min-height: calc(63 * var(--design-unit));
  display: flex;
  align-items: center;
}
.header__menu { display: none; }
.header__brand {
  width: calc(202 * var(--design-unit));
  flex-shrink: 0;
  margin-left: calc(210 * var(--design-unit));
}
.header__brand img {
  width: 100%;
  height: auto;
}
.header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(579 * var(--design-unit));
  margin-left: calc(235 * var(--design-unit));
}
.header__link {
  position: relative;
  font-size: calc(20 * var(--design-unit));
  font-weight: 600;
  letter-spacing: calc(-0.4 * var(--design-unit));
  color: rgba(255, 255, 255, 0.4);
  line-height: calc(45 * var(--design-unit));
  transition: color 0.2s ease;
}
.header__link:hover,
.header__link:focus-visible,
.header__link--active {
  color: white;
}
.header__link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(35 * var(--design-unit));
  width: calc(29 * var(--design-unit));
  height: calc(12 * var(--design-unit));
  transform: translateX(-50%);
  background: url("../../images/common/navigation-selected.svg")
    center/contain no-repeat;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.header__link--active::after {
  opacity: 1;
}
.header__language {
  margin-left: auto;
  margin-right: calc(179 * var(--design-unit));
  margin-top: calc(7.5 * var(--design-unit));
  display: flex;
  align-self: flex-start;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: calc(124 * var(--design-unit));
  min-height: calc(45 * var(--design-unit));
  color: #5b5b5b;
  /* Keep the Chinese reference typography in every language. */
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(20 * var(--design-unit));
  line-height: calc(27 * var(--design-unit));
  font-weight: 600;
  letter-spacing: calc(-0.4 * var(--design-unit));
  white-space: nowrap;
}
.header__language-choice {
  padding: calc(9 * var(--design-unit)) 0;
}
.header__language-choice.is-current {
  color: #fff;
}

/* Figma 44:499: the compact navigation appears once the hero header reaches the top. */
.header--scrolled {
  position: fixed;
  top: 0;
  min-height: calc(110 * var(--design-unit));
  align-items: flex-start;
  background: rgba(19, 4, 1, 0.9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.header--scrolled .header__brand {
  margin-left: calc(184 * var(--design-unit));
  margin-top: calc(31 * var(--design-unit));
}
.header--scrolled .header__nav {
  width: calc(605 * var(--design-unit));
  min-height: calc(60 * var(--design-unit));
  margin-top: calc(29 * var(--design-unit));
  margin-left: calc(260.5 * var(--design-unit));
}
.header--scrolled .header__language {
  margin-top: calc(36.5 * var(--design-unit));
  color: rgba(255, 255, 255, 0.4);
}
.header--scrolled .header__link {
  color: rgba(255, 255, 255, 0.4);
}
.header--scrolled .header__link:hover,
.header--scrolled .header__link:focus-visible,
.header--scrolled .header__link--active {
  color: #fff;
}
.header--scrolled .header__link--active::after {
  top: calc(35 * var(--design-unit));
}

@media (prefers-reduced-motion: reduce) {
  .header__link,
  .header__link::after {
    transition: none;
  }
}
@media (max-width: 768px) {
  .header, .header--scrolled {
    position: absolute; top: 0; min-height: .72rem; align-items: flex-start;
    padding-top: env(safe-area-inset-top); background: transparent; backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .header--scrolled { position: fixed; background: rgba(20, 7, 0, .94); }
  .header .header__brand { width: .51rem; margin: .24rem 0 0 .39rem; }
  .header .header__nav, .header .header__language { display: none; }
  .header__menu {
    display: grid; place-items: center; width: .44rem; height: .44rem;
    position: absolute; right: .31rem; top: calc(.12rem + env(safe-area-inset-top));
  }
  .header__menu-symbol { position: relative; width: .28rem; height: .28rem; }
  .header__menu-symbol i { position: absolute; width: .11rem; height: .11rem; background: #fff; border-radius: .03rem; }
  .header__menu-symbol i:nth-child(1) { top: .02rem; left: 0; }
  .header__menu-symbol i:nth-child(2) { top: .17rem; left: 0; }
  .header__menu-symbol i:nth-child(3) { top: .17rem; left: .14rem; }
  .header__menu-symbol i:nth-child(4) { top: .023rem; left: .145rem; transform-origin: center; transform: rotate(0); transition: transform .25s ease; }
  .header__menu:hover .header__menu-symbol i:nth-child(4),
  .header__menu:focus-visible .header__menu-symbol i:nth-child(4),
  .header__menu:active .header__menu-symbol i:nth-child(4),
  .header__menu[aria-expanded="true"] .header__menu-symbol i:nth-child(4),
  .mobile-menu[open] .mobile-menu__close .header__menu-symbol i:nth-child(4),
  .menu-page .header__menu-symbol i:nth-child(4) { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .header__menu-symbol i:nth-child(4) { transition: none; }
}