/* Adobe Source Han Sans 2.005R, Simplified Chinese variable font; SIL OFL 1.1. */
@font-face {
  font-family: "Source Han Sans CN";
  src: url("/_releases/739a4c8ecee211d340fe046bfb08334f918ca81ea5240778897e69a6f91ac21e/assets/source-han-sans-cn-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 250 900;
  font-display: swap;
}

/* The menu stays screen-sized inside the desktop design canvas. */
.language-picker {
  --language-scale: var(--art-scale);
  --language-ink: #242525;
  --language-paper: rgb(252 252 252 / .97);
  --language-line: rgb(36 37 37 / .14);
  --language-hover: rgb(36 37 37 / .055);
  position: relative;
  flex: 0 0 auto;
  width: calc(32px / var(--language-scale));
  height: calc(32px / var(--language-scale));
  margin-block: calc(-9px / var(--language-scale));
  color: inherit;
}
.language-picker .language-toggle {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: calc(4px / var(--language-scale));
  color: inherit;
  opacity: .68;
  transition: opacity .18s ease, background-color .18s ease;
}
.language-toggle svg {
  display: block;
  width: calc(20px / var(--language-scale));
  height: calc(20px / var(--language-scale));
  pointer-events: none;
}
.language-picker .language-toggle:hover,
.language-picker .language-toggle[aria-expanded="true"] {
  background: var(--language-hover);
  opacity: 1;
}
.language-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px / var(--language-scale));
  right: 0;
  display: grid;
  gap: calc(2px / var(--language-scale));
  width: calc(148px / var(--language-scale));
  padding: calc(6px / var(--language-scale));
  border: calc(1px / var(--language-scale)) solid var(--language-line);
  border-radius: calc(6px / var(--language-scale));
  background: var(--language-paper);
  color: var(--language-ink);
  box-shadow: 0 calc(6px / var(--language-scale)) calc(24px / var(--language-scale)) rgb(0 0 0 / .065);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(calc(-5px / var(--language-scale)));
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.language-menu[hidden] { display: none; }
.language-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.language-menu button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px / var(--language-scale));
  min-height: calc(36px / var(--language-scale));
  padding: calc(8px / var(--language-scale)) calc(10px / var(--language-scale));
  border-radius: calc(3px / var(--language-scale));
  color: inherit;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(13px / var(--language-scale));
  font-weight: 400;
  line-height: calc(20px / var(--language-scale));
  text-align: left;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.language-menu button::after {
  content: "";
  flex: 0 0 auto;
  width: calc(5px / var(--language-scale));
  height: calc(5px / var(--language-scale));
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
}
.language-menu button[aria-pressed="true"] { font-weight: 600; }
.language-menu button[data-language="zh-CN"] { font-family: "Source Han Sans CN", sans-serif; }
.language-menu button[aria-pressed="true"]::after { opacity: .65; }
.language-menu button:hover { background: var(--language-hover); }
.language-picker .language-toggle:focus-visible,
.language-menu button:focus-visible {
  outline: calc(1.5px / var(--language-scale)) solid currentColor;
  outline-offset: calc(2px / var(--language-scale));
  opacity: 1;
}
.language-menu button:focus-visible { outline-offset: calc(-2px / var(--language-scale)); }
.article-hero .language-picker {
  --language-ink: #ededea;
  --language-paper: rgb(25 27 27 / .97);
  --language-line: rgb(237 237 234 / .2);
  --language-hover: rgb(237 237 234 / .09);
}

/* The self-hosted Chinese family keeps every title, paragraph and control consistent.
   Latin brand lettering and the homepage word roller retain their original fonts. */
html[lang="zh-CN"] {
  --body-copy-leading: 1.85;
  --font-zh-body: "Source Han Sans CN", sans-serif;
  --font-zh-heading: var(--font-zh-body);
  font-family: var(--font-zh-body);
}
html[lang="zh-CN"] :is(.about-copy, .article-copy, .ink-caption, .language-menu button, .social-qr-card, .social-qr-card h2) {
  font-family: var(--font-zh-body);
}
html[lang="zh-CN"] :is(.about-title, .career-title, .career-mission-title, .career-card h3, .blog-sidebar h1, .blog-article h2, .article-hero h1, .article-section h2) {
  font-family: var(--font-zh-heading);
  font-style: normal;
  letter-spacing: .025em;
  font-weight: 600;
}
html[lang="zh-CN"] :is(h1.about-title, h1.career-title, h2.career-mission-title, .career-card h3) { font-weight: 500; }
html[lang="zh-CN"] :is(.about-tagline, .about-copy, .career-tagline, .career-summary, .career-card p, .blog-article-summary, .article-copy) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}
html[lang="zh-CN"] .main-nav :is(a, button) { letter-spacing: .025em; }
html[lang="zh-CN"] .about-title { font-size: 96px; line-height: 1.15; }
html[lang="zh-CN"] .about-tagline { line-height: 1.6; letter-spacing: .035em; }
html[lang="zh-CN"] .about-copy p + p { margin-top: 1.3em; }
html[lang="zh-CN"] .career-title {
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 96px);
  font-size: 96px;
  line-height: 1.15;
  text-align: center;
}
html[lang="zh-CN"] .career-tagline { line-height: 1.6; letter-spacing: .04em; }
html[lang="zh-CN"] .career-mission-title br { display: none; }
html[lang="zh-CN"] .career-mission-title { font-size: 52px; line-height: 1.24; }
html[lang="zh-CN"] .career-summary { letter-spacing: .015em; }
html[lang="zh-CN"] .career-card h3 { font-size: 26px; line-height: 1.4; }
html[lang="zh-CN"] .blog-sidebar h1 { line-height: 1.2; }
html[lang="zh-CN"] .blog-count-tagline { line-height: 1.6; letter-spacing: .03em; }
html[lang="zh-CN"] .blog-count-label { line-height: 1.3; }
html[lang="zh-CN"] .blog-article h2 {
  max-width: 300px;
  font-size: calc(17px / var(--art-scale));
  line-height: 1.4;
}
html[lang="zh-CN"] .blog-article-date { top: calc(504px + 31px / var(--art-scale)); }
html[lang="zh-CN"] .blog-article-summary { left: 320px; line-height: 1.7; }
html[lang="zh-CN"] .article-kicker { letter-spacing: .08em; line-height: 1.5; }
html[lang="zh-CN"] .article-hero h1 { font-size: calc(108px * var(--art-scale)); line-height: 1.18; }
html[lang="zh-CN"] .article-toc { line-height: 1.8; }
html[lang="zh-CN"] .article-copy { letter-spacing: .012em; }
html[lang="zh-CN"] .article-copy p + p { margin-top: 1.35em; }
/* The approved Chinese team introduction is one paragraph; English keeps two. */
html[lang="zh-CN"] [data-i18n="article.teamSecond"] { display: none; }
html[lang="zh-CN"] .article-section h2 { line-height: 1.4; -webkit-text-stroke: 0; }
html[lang="zh-CN"] .footer-motto { line-height: 1.5; }

@media (min-width: 1024px) {
  /* Keep the introduction above the divider, with both text blocks centered together. */
  html[lang="zh-CN"] .career-mission-introduction {
    position: absolute;
    left: 48px;
    right: 76px;
    bottom: calc(100% - 346px + 48px);
    display: grid;
    grid-template-columns: 708px 636px;
    column-gap: 44px;
    align-items: center;
  }
  html[lang="zh-CN"] .career-mission-introduction :is(.career-mission-title, .career-summary) {
    position: static;
    width: auto;
  }
}

@media (max-width: 1023px) {
  html[lang="zh-CN"] { --body-copy-leading: 1.9; }
  .language-picker {
    --language-scale: 1;
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    margin: 0;
  }
  .language-menu { top: calc(100% + 4px); width: 156px; }
  .language-menu button { min-height: 44px; font-size: 14px; }
  html[lang="zh-CN"] .about-title { font-size: clamp(38px, 9vw, 54px); line-height: 1.25; }
  html[lang="zh-CN"] .about-tagline { font-size: 20px; line-height: 1.7; }
  html[lang="zh-CN"] .career-title {
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    font-size: clamp(38px, 9vw, 54px);
    line-height: 1.25;
  }
  html[lang="zh-CN"] .career-tagline { font-size: 18px; line-height: 1.75; }
  html[lang="zh-CN"] .career-mission-title { font-size: clamp(32px, 8vw, 44px); line-height: 1.3; }
  html[lang="zh-CN"] .career-card h3 { right: auto; font-size: 23px; line-height: 1.45; }
  html[lang="zh-CN"] .career-card p { right: auto; }
  html[lang="zh-CN"] .blog-sidebar h1 { font-size: 44px; line-height: 1.3; }
  html[lang="zh-CN"] .blog-article h2 { max-width: none; font-size: 26px; line-height: 1.4; }
  html[lang="zh-CN"] .blog-article-date { top: auto; }
  html[lang="zh-CN"] .blog-article-summary { left: auto; line-height: 1.85; }
  html[lang="zh-CN"] .article-hero h1 { font-size: clamp(42px, 9vw, 68px); line-height: 1.3; }
  html[lang="zh-CN"] .article-section h2 { font-size: 24px; line-height: 1.4; }
}
@media (max-width: 599px) {
  .language-picker { grid-column: 2; grid-row: 1; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  html[lang="zh-CN"] .about-title { font-size: 48px; }
  html[lang="zh-CN"] .career-mission-title { font-size: 40px; }
  html[lang="zh-CN"] .career-summary { align-self: center; }
}
@media (max-height: 600px) and (min-width: 1024px) {
  html[lang="zh-CN"] .article-hero h1 { font-size: calc(80px * var(--art-scale)); }
}
@media (max-height: 600px) and (max-width: 1023px) {
  html[lang="zh-CN"] .article-hero h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .language-picker .language-toggle, .language-menu, .language-menu button { transition: none; }
}
