:root {
  --bg: #000;
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.74);
  --title-design-width: 3840px;
  --title-scale: clamp(0.25, calc(100vw / var(--title-design-width)), 1);
  --font-sans: "Source Han Sans CN", Inter, "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

body.is-header-preview .design-canvas {
  height: 263px;
}

.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(4px * var(--title-scale));
  z-index: 40;
  height: calc(263px * var(--title-scale));
  min-height: 64px;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

.site-header a {
  color: inherit;
  text-decoration: none;
}

.site-header__brand {
  position: absolute;
  left: calc(109.95px * var(--title-scale));
  top: calc(76.36px * var(--title-scale));
  width: calc(238.046px * var(--title-scale));
  height: calc(100.028px * var(--title-scale));
  display: block;
}

.site-header__brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  background: url("./assets/yuzhen-art-logo.svg") center / 100% 100% no-repeat;
}

.site-header__nav {
  position: absolute;
  left: 0;
  top: calc(110px * var(--title-scale));
  width: calc(3840px * var(--title-scale));
  height: calc(123px * var(--title-scale));
  color: var(--text);
  white-space: nowrap;
}

.site-header__nav-link {
  position: absolute;
  top: 0;
  display: block;
  font-size: calc(36px * var(--title-scale));
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  transition:
    color 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.site-header__nav-link:nth-child(1) {
  left: calc(1260px * var(--title-scale));
}

.site-header__nav-link:nth-child(2) {
  left: calc(1665px * var(--title-scale));
}

.site-header__nav-link:nth-child(3) {
  left: calc(1986px * var(--title-scale));
}

.site-header__nav-link:nth-child(4) {
  left: calc(2387px * var(--title-scale));
}

.site-header__nav-link:nth-child(5) {
  left: calc(2761px * var(--title-scale));
}

.site-header__nav-link:nth-child(6) {
  left: calc(3144px * var(--title-scale));
}

.site-header__nav-link:nth-child(7) {
  left: calc(3501px * var(--title-scale));
}

.site-header__nav-link:hover,
.site-header__nav-link:focus-visible,
.site-header__nav-link.is-active {
  color: var(--muted);
  opacity: 0.82;
  outline: none;
}

.site-header__nav-link:hover {
  transform: translateY(calc(-3px * var(--title-scale)));
}