/* One offset keeps the optional language bar, navigation and story aligned. */
html { --site-language-offset: 0px; scroll-padding-top: var(--site-language-offset); }
html:has(.site-language-notice[data-open="true"]) { --site-language-offset: 44px; }
body { padding-top: var(--site-language-offset); transition: padding-top 280ms cubic-bezier(.22,1,.36,1); }
body .sp-global, body .sp-local { top: var(--site-language-offset); transition: top 280ms cubic-bezier(.22,1,.36,1), transform .35s ease, opacity .25s ease; }
body .sp-projects { max-height: calc(100dvh - 68px - var(--site-language-offset)); }
body .sp-contents { max-height: calc(100dvh - 76px - var(--site-language-offset)); }
body .sp-backdrop { height: calc(100dvh - 44px - var(--site-language-offset)); }
.site-language-notice, .site-language-notice * { box-sizing: border-box; }
.site-language-notice { position: fixed; z-index: 10001; inset: 0 0 auto; background: var(--apple-light-gray); border-bottom: 1px solid rgba(0,0,0,.06); color: var(--apple-black); font: 400 13px/1.5 var(--font-sans); opacity: 0; visibility: hidden; transform: translateY(-100%); transition: opacity 180ms ease, transform 280ms cubic-bezier(.22,1,.36,1), visibility 280ms; }
.site-language-notice[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.site-language-inner { display: flex; align-items: center; justify-content: center; gap: 32px; min-height: 43px; max-width: 1200px; margin: auto; padding: 0 22px; }
.site-language-notice p { margin: 0; font-weight: 500; text-wrap: balance; }
.site-language-actions { display: flex; align-items: center; flex-shrink: 0; gap: 24px; }
.site-language-actions a, .site-language-actions button { display: inline-flex; align-items: center; gap: 8px; min-height: 43px; padding: 0; border: 0; background: none; font: inherit; text-decoration: none; cursor: pointer; }
.site-language-actions a { color: var(--apple-blue); }
.site-language-actions button { color: #6e6e73; }
.site-language-actions :is(a,button):hover { color: var(--apple-blue-hover); }
.site-language-actions :is(a,button):focus-visible { outline: 2px solid var(--apple-blue); outline-offset: 3px; border-radius: 3px; }

@media (max-width: 600px) {
  .site-language-inner { gap: 12px; padding: 0 16px; }
  .site-language-actions { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { body, body .sp-global, body .sp-local, .site-language-notice { transition: none; } }

/* Actual content language drives typography, including English fallback bodies. */
body:lang(zh-CN) { font-family: var(--font-sans-zh); }
:lang(zh-CN) { line-break: strict; }
:is(.hero-title, .section-title, .hero-subtitle, .section-subtitle):lang(zh-CN) { letter-spacing: 0; text-wrap: balance; }
:is(.hero-subtitle, .section-subtitle):lang(zh-CN) { line-height: 1.65; }
.section-subtitle:lang(zh-CN) { text-wrap: pretty; }
.i18n-nowrap { white-space: nowrap; }
/* Prefer a semantic break in short headings; still wrap within a phrase if
   a narrow column or enlarged text leaves too little room for the phrase. */
.i18n-phrase { display: inline-block; max-width: 100%; vertical-align: top; text-wrap: balance; }
.site-project-content :is(h2, h3):lang(zh-CN) { letter-spacing: 0; line-height: 1.3; }
.site-project-content :is(p:not(.hero-subtitle), li):lang(zh-CN) { text-wrap: pretty; }
.i18n-affiliations { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.i18n-affiliations > span { white-space: nowrap; }
.i18n-author-notes { display: block; margin-top: 8px; font-size: 12px; }
.site-project-content { display: contents; }