:root { color-scheme: dark; font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; background: #101824; color: #f9f8ee; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 280px; margin: 0; }
body { overflow: hidden; }
a { color: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
::selection { background: #dfd18a; color: #101824; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 20; top: -100px; left: 20px; padding: 10px 15px; background: #f9f8ee; color: #101824; }
.skip-link:focus { top: 18px; }
.anniversary-page { position: relative; isolation: isolate; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: radial-gradient(ellipse at 50% 47%, rgba(34, 68, 104, .44), transparent 52%), #101824; }
.anniversary-page::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(9, 15, 24, .56), transparent 26%), linear-gradient(90deg, rgba(9, 15, 24, .56), transparent 20%, transparent 78%, rgba(9, 15, 24, .26)); }
.anniversary-page::before { content: ""; position: absolute; z-index: 2; inset: 55% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(9, 15, 24, .25) 55%, rgba(9, 15, 24, .7)); }
.art-stage, .art-pieces { position: absolute; inset: 0; }
.art-stage { overflow: hidden; }
.poster-underlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .23; transform: scale(1.06); }
.art-stage.is-arranged .poster-underlay { animation: ambient-pan 15s ease-in-out 1.9s infinite alternate; }
@keyframes ambient-pan { from { transform: translate3d(-1%, .7%, 0) scale(1.08); } to { transform: translate3d(1%, -.7%, 0) scale(1.11); } }
.art-pieces { z-index: 1; }
.art-piece { position: absolute; left: var(--wide-x); top: var(--wide-y); width: var(--wide-w); aspect-ratio: var(--ratio); opacity: 0; transform: translate3d(var(--enter-x), var(--enter-y), 0) rotate(var(--enter-turn)) scale(.86); transform-origin: center; transition: transform 1250ms cubic-bezier(.18, .7, .18, 1) var(--enter-delay), opacity 1000ms ease var(--enter-delay); will-change: transform, opacity; }
.art-piece img { display: block; width: 100%; height: 100%; object-fit: fill; filter: saturate(1.13); }
.art-stage.is-arranged .art-piece { opacity: .88; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
.art-stage.is-arranged .art-piece img { animation: drift var(--drift-time) ease-in-out var(--drift-start) infinite; }
@keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 42% { transform: translate3d(var(--sway-x), var(--sway-y), 0) rotate(var(--sway-turn)) scale(1.012); } 78% { transform: translate3d(var(--sway-back-x), var(--sway-back-y), 0) rotate(var(--sway-back-turn)) scale(.997); } }
.source-five { position: absolute; z-index: 2; left: 50%; top: 49%; display: block; width: clamp(280px, 31vw, 460px); height: auto; max-height: 70%; object-fit: contain; opacity: 0; transform: translate(-50%, -50%) scale(1); transition: opacity 900ms ease 280ms; }
.art-stage.is-arranged .source-five { opacity: 1; }
.poster-fallback { width: 100%; height: 100%; object-fit: cover; }
.brand-mark { position: absolute; z-index: 3; top: clamp(26px, 4vw, 58px); left: clamp(24px, 4.2vw, 64px); pointer-events: none; text-shadow: 0 1px 18px rgba(6, 13, 22, .5); }
.brand-mark p { margin: 0; }
.brand-chinese { font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif; font-size: clamp(27px, 3.2vw, 45px); font-weight: 600; letter-spacing: .1em; line-height: 1.2; }
.brand-english { margin-top: 6px !important; font-size: clamp(12px, 1.4vw, 19px); letter-spacing: .055em; }
.brand-edition { margin-top: 6px !important; font-size: clamp(11px, 1.05vw, 15px); letter-spacing: .06em; }
.art-caption { position: absolute; z-index: 3; left: clamp(24px, 4.2vw, 64px); bottom: clamp(76px, 8vw, 115px); font-size: clamp(11px, 1.08vw, 15px); letter-spacing: .12em; line-height: 1.55; text-shadow: 0 1px 14px rgba(6, 13, 22, .5); }
.art-caption span { display: block; }
.project-direct-link { position: absolute; z-index: 4; right: clamp(24px, 4.2vw, 64px); bottom: clamp(76px, 8vw, 115px); display: inline-flex; align-items: center; padding-bottom: 9px; border-bottom: 1px solid rgba(249, 248, 238, .85); font-size: clamp(16px, 1.4vw, 20px); letter-spacing: .08em; line-height: 1.2; text-decoration: none; text-shadow: 0 1px 14px #101824; transition: color .2s ease; }
.project-direct-link:hover { color: #f0d66d; }
.project-direct-link:focus-visible { outline: 2px solid #f4d666; outline-offset: 5px; }
.hero-legal { position: absolute; z-index: 3; left: clamp(24px, 4.2vw, 64px); right: clamp(24px, 4.2vw, 64px); bottom: clamp(19px, 2.4vw, 36px); display: flex; justify-content: space-between; gap: 15px; font-size: 10px; letter-spacing: .08em; line-height: 1.5; color: rgba(247, 247, 240, .8); text-shadow: 0 1px 12px #101824; }
.hero-legal a { text-decoration: none; }
.hero-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-menu { position: fixed; z-index: 10; top: clamp(23px, 3.6vw, 48px); right: clamp(24px, 4.2vw, 64px); width: 215px; color: #f9f8ee; }
.menu-toggle { display: flex; align-items: center; justify-content: flex-end; gap: 11px; width: fit-content; margin-left: auto; padding: 8px 0 10px 12px; list-style: none; cursor: pointer; font-size: 12px; letter-spacing: .12em; text-shadow: 0 1px 10px #101824; }
.menu-toggle::-webkit-details-marker { display: none; }
.menu-icon { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 24px; height: 20px; }
.menu-icon span { display: block; height: 1px; width: 24px; background: currentColor; transition: transform .25s ease; }
.site-menu[open] .menu-icon span:first-child { transform: translateY(3.5px) rotate(45deg); }
.site-menu[open] .menu-icon span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.menu-toggle:focus-visible, .menu-panel a:focus-visible, .hero-legal a:focus-visible { outline: 2px solid #f4d666; outline-offset: 4px; }
.menu-panel { position: absolute; top: 100%; right: 0; width: 215px; padding: 4px 17px; border: 1px solid rgba(238, 239, 235, .4); background: rgba(13, 23, 36, .96); }
.menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 8px; border-bottom: 1px solid rgba(238, 239, 235, .2); text-decoration: none; font-size: 15px; letter-spacing: .055em; transition: color .2s ease, padding-left .2s ease; }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a:hover { color: #f0d66d; padding-left: 5px; }
.menu-panel a span[aria-hidden="true"] { font-size: 16px; font-weight: 300; }
@media (max-aspect-ratio: 1/1) { .art-piece { left: var(--tall-x); top: var(--tall-y); width: var(--tall-w); } .source-five { top: 48%; width: min(55vw, 260px); max-height: 48%; } .brand-mark { top: 30px; } .art-caption, .project-direct-link { bottom: 106px; } .hero-legal { flex-direction: column; gap: 3px; } }
@media (max-width: 390px) { .brand-chinese { font-size: 26px; } .brand-english { font-size: 11px; } .brand-edition { font-size: 10px; } .site-menu { width: 155px; min-height: 82px; } .menu-panel { top: 82px; width: 190px; } .menu-label { display: none; } }
@media (max-height: 500px) { .brand-mark { top: 16px; } .brand-chinese { font-size: 24px; } .brand-english, .brand-edition { font-size: 10px; margin-top: 2px !important; } .site-menu { top: 14px; } .art-caption { display: none; } .hero-legal { bottom: 11px; } .source-five { max-height: 70%; } }
@media (prefers-reduced-motion: reduce) { .art-piece, .source-five, .menu-icon span, .menu-panel a { transition: none; } .art-stage.is-arranged .art-piece img, .art-stage.is-arranged .poster-underlay { animation: none; } }
.not-found { overflow: auto; }
.not-found-main { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(24px, 6vw, 80px); background: radial-gradient(circle at 75% 35%, #223e67, transparent 45%), #101824; }
.not-found-main p { margin: 0 0 28px; font-size: 12px; letter-spacing: .16em; }
.not-found-main h1 { margin: 0 0 44px; font-family: "Songti SC", "Noto Serif CJK SC", "SimSun", serif; font-size: clamp(38px, 7vw, 96px); font-weight: 400; }
.not-found-main a { border-bottom: 1px solid currentColor; padding-bottom: 8px; text-decoration: none; font-size: 14px; }
.not-found-main a span { margin-left: 30px; }