@charset "UTF-8";

:root {
  color-scheme: light;
  --glass-opacity: 1;
  --site-header-height: 112px;
  font-family: var(--font-family);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: var(--site-header-height); }
body { margin: 0; color: var(--color-body); font-size: var(--font-body); font-weight: var(--weight-regular); line-height: var(--leading-body); }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: var(--border-width) solid var(--color-focus); outline-offset: var(--space-8); border-radius: var(--radius-sm); }
::selection { background: var(--color-selection); color: var(--color-selection-ink); }

.hero { position: relative; height: 100svh; min-height: 560px; overflow: clip; isolation: isolate; background: #e9edf0; }
.scene, .condensation, .glass-fallback, .glass-edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene { z-index: -4; overflow: hidden; }
.scene__image { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center; transform: scale(var(--scene-scale, 1)) translateY(var(--scene-y, 0px)); }
.condensation { z-index: -3; opacity: var(--glass-opacity); }
.glass-fallback { z-index: -2; backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); background: linear-gradient(112deg, #e7ecf052, #dce4ed38 49%, #f4f6f74a); }
.glass-fallback::after { content: ""; position: absolute; inset: 0; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%237a8795' filter='url(%23n)' opacity='.45' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.hero[data-glass-ready] .glass-fallback { display: none; }
.glass-edge { z-index: -1; background: linear-gradient(180deg, rgba(240,243,245,.42), transparent 21%, transparent 78%, rgba(238,242,245,.48)); box-shadow: inset 0 0 100px #f2f5f61f; }

.media-frame { border-radius: var(--media-radius); overflow: hidden; }
.site-header { position: fixed; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--space-32) var(--gutter); gap: var(--space-32); z-index: 40; transform: translateY(0); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.site-header[data-header-hidden] { transform: translateY(calc(-100% - 1px)); pointer-events: none; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(233 237 240 / .12), rgb(233 237 240 / .025)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask-image: linear-gradient(#000 60%, transparent); -webkit-mask-image: linear-gradient(#000 60%, transparent); }
.site-header [data-header-tone] { transition: color var(--duration-feedback) var(--ease-feedback), text-shadow var(--duration-feedback) var(--ease-feedback); }
.site-header [data-header-tone="light"] { color: var(--color-on-media); text-shadow: var(--shadow-header-on-media); }
.site-header [data-header-tone="light"]:focus-visible, .site-header [data-header-tone="light"] a:focus-visible, .site-header [data-header-tone="light"] button:focus-visible { outline-color: var(--color-focus-on-media); }
.site-header .language-switch[data-header-tone="light"] button { color: var(--color-on-media-muted); }
.site-header .language-switch[data-header-tone="light"] button[aria-pressed="true"], .site-header .language-switch[data-header-tone="light"] button:hover { color: #fff; }
.site-header .language-switch[data-header-tone="light"] > span { color: var(--color-on-media-divider); }
.wordmark { justify-self: start; color: var(--ink); font-size: 14px; font-weight: var(--weight-medium); letter-spacing: .025em; line-height: 1.5; padding: var(--space-8) 0; white-space: nowrap; }
.primary-nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.primary-nav a { position: relative; padding: var(--space-12) 1px; font-size: var(--font-small); line-height: var(--leading-small); letter-spacing: var(--tracking-small); white-space: nowrap; }
.primary-nav a::after { content: ""; position: absolute; bottom: 4px; left: 1px; width: 0; height: 1px; background: currentColor; transition: width var(--duration-feedback) var(--ease-feedback); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after, .primary-nav a[aria-current="location"]::after { width: calc(100% - 2px); }
.language-switch { justify-self: end; display: flex; align-items: center; gap: var(--space-8); font-size: var(--font-micro); }
.language-switch button { border: 0; background: none; padding: var(--space-12) 3px; color: var(--muted); font-size: var(--font-micro); line-height: var(--leading-small); letter-spacing: var(--tracking-small); transition: color var(--duration-feedback) var(--ease-feedback); }
.language-switch button[aria-pressed="true"] { color: var(--ink); }
.language-switch > span { color: var(--muted); font-size: var(--font-micro); }
.language-switch button:hover { color: var(--ink); }

.hero-caption { position: absolute; bottom: clamp(100px, 14svh, 150px); left: var(--gutter); width: min(420px, 43%); z-index: 2; }
.hero-caption:focus { outline: none; }
.intro-name { margin: 0 0 var(--space-16); color: var(--ink); font-size: var(--hero-name-size); font-weight: var(--weight-regular); letter-spacing: .015em; line-height: 1.4; }
.identity { margin: 0; font-size: var(--font-small); font-weight: var(--weight-regular); letter-spacing: .04em; line-height: var(--leading-body); }
.intro-description { margin: var(--space-16) 0 0; max-width: 390px; min-height: 2lh; font-size: var(--font-body); font-weight: var(--weight-regular); letter-spacing: var(--tracking-body); line-height: var(--leading-body); color: var(--color-body); text-wrap: pretty; }
html[lang="zh-CN"] .intro-description { text-wrap: balance; word-break: keep-all; }
.interaction-cue { position: absolute; bottom: 43px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; flex-direction: column; gap: var(--space-8); font-size: var(--font-micro); letter-spacing: .04em; color: var(--muted); white-space: nowrap; transition: opacity .6s; }
.interaction-cue__mark { opacity: .8; }
.hero[data-interacting] .interaction-cue { opacity: 0; }
.edition { position: absolute; right: var(--gutter); bottom: 47px; display: flex; align-items: center; gap: var(--space-8); color: var(--muted); font-size: var(--font-micro); letter-spacing: .04em; }
.edition__dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: #6b7c8d; }

.skip-link { position: fixed; z-index: 50; left: var(--page-padding); top: var(--space-16); padding: var(--space-12) var(--space-16); background: var(--color-surface); font-size: var(--font-small); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.destination { position: fixed; inset: 0 0 0 auto; margin: 0; border: 0; border-left: var(--border-subtle); width: min(480px, 100%); max-width: 100%; height: 100%; max-height: 100%; padding: var(--space-32); color: var(--ink); background: var(--color-surface); }
.destination[open] { display: flex; flex-direction: column; }
.destination::backdrop { background: #9dabb72e; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.destination__header, .destination__footer { display: flex; align-items: center; justify-content: space-between; }
.destination__brand { font-size: var(--font-small); letter-spacing: var(--tracking-small); }
.destination__close { display: grid; place-content: center; min-width: var(--control-size); min-height: var(--control-size); padding: var(--space-12); border: 0; background: transparent; }
.destination__body { margin: auto 0; padding: var(--space-48) 0; }
.destination__eyebrow { font-size: var(--font-micro); letter-spacing: var(--tracking-small); color: var(--muted); }
.destination h1 { margin: var(--space-24) 0; font-size: var(--font-h1); line-height: var(--leading-heading); font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); }
.destination #destination-description { max-width: 320px; font-size: var(--font-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--color-body); }
.return-link { margin-top: var(--space-32); display: inline-flex; align-items: center; min-height: var(--control-size); gap: var(--link-gap); background: transparent; border: 0; border-bottom: var(--border-subtle); padding: var(--space-8) 0; color: var(--color-link); font-size: var(--font-small); transition: border-color var(--duration-feedback) var(--ease-feedback); }
.return-link > span:last-child { display: inline-block; font-size: var(--link-arrow-size); transition: transform var(--duration-feedback) var(--ease-feedback); }
.return-link:hover, .return-link:focus-visible { border-color: currentColor; }
.return-link:hover > span:last-child, .return-link:focus-visible > span:last-child { transform: translate(2px, -2px); }
.destination__footer { font-size: var(--font-micro); letter-spacing: var(--tracking-small); color: var(--muted); padding-top: var(--space-24); border-top: var(--border-subtle); }
.noscript-note { position: fixed; bottom: 90px; width: 100%; text-align: center; padding: 0 var(--page-padding); font-size: var(--font-small); }

html[lang="en"] .intro-name { font-size: var(--hero-name-size-en); letter-spacing: -.015em; }
html[lang="en"] .identity { letter-spacing: .015em; max-width: 390px; }
html[lang="en"] .intro-description { min-height: 3lh; letter-spacing: .005em; }
html[lang="en"] .primary-nav a { letter-spacing: .015em; }
html[lang="en"] .interaction-cue, html[lang="en"] .edition { letter-spacing: .035em; }

@media (max-width: 760px) {
  :root { --site-header-height: 160px; }
  .site-header { padding-block: var(--space-24); gap: var(--space-16); grid-template-columns: 1fr auto; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; width: 100%; gap: var(--space-12); padding-top: var(--space-8); border-top: var(--border-subtle); }
  .primary-nav a { padding: var(--space-12) 0; }
  .language-switch { grid-column: 2; grid-row: 1; }
  .wordmark { font-size: 13px; }
  .hero-caption { left: var(--gutter); bottom: 100px; width: min(390px, calc(100% - 2 * var(--gutter))); }
  .intro-name { margin-bottom: var(--space-16); }
  .identity { letter-spacing: .04em; }
  .intro-description { margin-top: var(--space-12); }
  .interaction-cue { bottom: 28px; }
  .edition { right: var(--gutter); bottom: 31px; }
  .edition > span:last-child { display: none; }
  .destination { padding: var(--space-24); }
  html[lang="en"] .identity { max-width: 340px; }
}
@media (max-height: 600px) and (min-width: 761px) {
  .hero { min-height: 420px; }
  .site-header { padding-top: 20px; }
  .hero-caption { bottom: 75px; }
  .intro-name, html[lang="en"] .intro-name { font-size: 24px; margin-bottom: 12px; }
  .intro-description { margin-top: var(--space-12); }
  .interaction-cue { bottom: 24px; }
  .edition { bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (pointer: coarse) {
  .language-switch button { min-width: 44px; min-height: 44px; }
  .language-switch { gap: 4px; }
  .primary-nav a { min-height: 44px; display: inline-flex; align-items: center; }
}