/* Shared by the homepage and every inner page; loaded after page-specific styles. */
@font-face { font-family: "Yilian Navigation"; src: url("/Content/fonts/home-design.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
body[class] .site-header, body[class] .mobile-nav {
  --serif: "Yilian Navigation", "Songti SC", "SimSun", serif;
  color: #171c1c;
}
body[class] .site-header, body[class] .site-header.is-scrolled {
  position: fixed; top: 0; left: 0; z-index: 30;
  display: grid; grid-template-columns: 18% minmax(0, 1fr) auto;
  gap: 2vw; align-items: center; width: 100%; min-height: 0;
  padding: 16px 2.4vw; transform: none;
  border: 0; border-radius: 0; box-shadow: none;
  background: transparent; backdrop-filter: none;
}
body[class]:not(.page-home) .site-header, body[class] .site-header.is-scrolled, body[class].nav-open .site-header {
  background: rgba(248, 252, 251, .95);
  border-bottom: 1px solid rgba(65, 90, 92, .14);
  backdrop-filter: blur(12px);
}
body[class] .site-header .brand { gap: .2em; font-weight: 400; white-space: nowrap; }
body[class] .site-header .brand span { font-size: clamp(20px, 2.3vw, 44px); letter-spacing: .02em; }
body[class] .site-header .brand strong { font-size: clamp(18px, 1.9vw, 36px); font-weight: 400; }
body[class] .desktop-nav {
  display: flex; justify-content: space-between; min-width: 0;
  border-bottom: 1px solid #72767455;
  font-size: clamp(12px, 1.25vw, 24px); gap: 1vw;
  overflow-x: auto; scrollbar-width: thin;
}
body[class] .desktop-nav a { display: block; flex: 0 0 auto; padding: 0; white-space: nowrap; }
/* The configurable products entry is part of the same top navigation as the
   brand and honour entries. Keep its CMS key, but render it as a plain nav
   link instead of the old pill button. */
body[class] .header-nav-link {
  display: block; flex: 0 0 auto; min-width: 0; min-height: 0;
  padding: 0; color: inherit; font-family: var(--serif);
  font-size: clamp(12px, 1.25vw, 24px); font-weight: 400;
  line-height: 1.5; white-space: nowrap; text-decoration: none;
  border: 0; border-radius: 0; background: transparent;
}
body[class] .header-nav-link:hover,
body[class] .header-nav-link:focus-visible { color: inherit; text-decoration: none; }
body[class] .site-header .menu-button { display: none; }
body[class] .mobile-nav {
  padding-top: calc(var(--site-header-offset, 80px) + 20px);
  overflow-y: auto; visibility: hidden;
}
body[class].nav-open .mobile-nav { visibility: visible; }
body[class] .sub-page, body[class] .about-chapters { padding-top: var(--site-header-offset, 100px); }
body[class] .about-chapters { --home-header-offset: var(--site-header-offset, 100px); }
body[class] .about-chapters section, body[class] .about-story-anchor { scroll-margin-top: var(--site-header-offset, 100px); }
@media (max-width: 980px) {
  body[class] .site-header, body[class] .site-header.is-scrolled { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px 20px; }
  body[class] .desktop-nav, body[class] .header-nav-link { display: none; }
  body[class] .site-header .menu-button { display: block; justify-self: end; }
  body[class] .mobile-nav { align-content: start; }
}