@font-face{font-family:ProjectPingFang;src:url('assets/project-pingfang-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:ProjectHelvetica;src:url('assets/project-helvetica.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:ProjectPingFang;src:url('assets/project-pingfang.woff2?v=2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:ProjectPingFang;src:url('assets/project-pingfang-light.woff2') format('woff2');font-weight:300;font-display:swap}
.project-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.625vw;margin:.833333vw 0 0;padding:0;font:400 1.041667vw/1.4 ProjectPingFang,sans-serif}
.project-tags li{border:1.2px solid currentColor;border-radius:30px;padding:.208333vw .833333vw;white-space:nowrap}
.project-char{display:inline-block;white-space:pre}
.project-copy-line{display:block;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.project-overview{position:relative;scroll-margin-top:var(--nav-height)}
/* Line positions are measured from the image viewport, including scrollbar width. */
.project-grid{display:none;position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.is-animated .project-grid{display:block}
.project-grid-reveal{position:absolute;inset:0;opacity:0;visibility:hidden}
.project-grid img{display:block;max-width:none;transform-origin:0 0}
.project-grid-horizontal{position:absolute;left:0;top:0}
.project-grid-vertical{position:absolute;top:0}

.project-stage{position:relative;background:var(--blue);overflow:hidden;--project-width:31.25vw;--project-left:52.083333vw}
.project-intro{margin:0;padding:18vh 5.208333vw;font-family:ProjectHelvetica,Arial,sans-serif;font-size:9.375vw;line-height:1;font-weight:500;opacity:.9}
.project-intro-cn{display:block;font-family:ProjectPingFang,sans-serif;font-size:4.166667vw;font-weight:700;line-height:1.4;margin-top:12px}
.project-guide{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.project-labels{display:none}
.project-descriptions article{padding:30px 5.208333vw;font:700 24px/1.6 ProjectPingFang,sans-serif}
.project-descriptions p{margin:0}
.project-descriptions,.project-window,.project-image-track{display:contents}
.project-descriptions article{grid-column:1}
.project-image-track img{grid-column:2}
.project-descriptions article:nth-child(1),.project-image-track img:nth-child(1){grid-row:1}
.project-descriptions article:nth-child(2),.project-image-track img:nth-child(2){grid-row:2}
.project-descriptions article:nth-child(3),.project-image-track img:nth-child(3){grid-row:3}
.project-descriptions article:nth-child(4),.project-image-track img:nth-child(4){grid-row:4}
.project-image-track img{display:block;width:100%;height:auto}
/* A sticky viewport keeps the document's scroll geometry stable for navigation. */
.project-overview.is-animated{height:700svh}
.is-animated .project-stage{position:sticky;top:0;height:100svh}
.is-animated .project-intro{position:absolute;left:5.208333vw;top:33.055556%;padding:0}
.is-animated .project-guide{position:absolute;inset:0;display:block}
.is-animated .project-labels{display:block;position:absolute;left:var(--project-left);top:calc(50.555556% - 40px);transform:translateY(-100%);width:var(--project-width);font:500 2.604167vw/1.2 ProjectHelvetica,Arial,sans-serif;opacity:.1}
.project-label-track{display:flex;width:100%;will-change:transform}
.project-label-track span{flex:0 0 100%;white-space:nowrap}
.is-animated .project-labels-lit{opacity:.9;overflow:hidden}
.is-animated .project-descriptions{display:block;position:absolute;left:5.208333vw;top:50.555556%;width:26.302083vw}
.is-animated .project-descriptions article{position:absolute;inset:0 auto auto 0;width:100%;padding:0;font-size:1.979167vw;line-height:1.4;opacity:0}
.is-animated .project-window{display:block;position:absolute;left:var(--project-left);top:50.555556%;width:var(--project-width);height:49.444444%;padding:0;overflow:hidden}
.is-animated .project-image-track{display:flex;width:100%;height:100%;will-change:transform}
.is-animated .project-image-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover}
@media(max-width:700px){
 .project-stage{--project-left:7vw;--project-width:86vw}
 .is-animated .project-intro{left:7vw;top:34%;font-size:17vw}
 .project-intro-cn{font-size:9vw}
 .is-animated .project-labels{top:calc(40% - 40px);font-size:5.967742vw}
 .is-animated .project-descriptions{top:19%;left:7vw;width:86vw}
 .is-animated .project-descriptions article{font-size:4.2vw;line-height:1.6}
 .project-tags{font-size:12px;gap:6px;margin-top:10px}.project-tags li{padding:3px 9px}
 .is-animated .project-window{top:40%;height:auto;aspect-ratio:600/534}
 .is-animated .project-image-track img{object-fit:cover;object-position:center}
 .project-guide{grid-template-columns:1fr;gap:20px;padding-bottom:40px}
 .project-descriptions article,.project-image-track img{grid-column:1}
 .project-descriptions article:nth-child(1){grid-row:1}.project-image-track img:nth-child(1){grid-row:2}
 .project-descriptions article:nth-child(2){grid-row:3}.project-image-track img:nth-child(2){grid-row:4}
 .project-descriptions article:nth-child(3){grid-row:5}.project-image-track img:nth-child(3){grid-row:6}
 .project-descriptions article:nth-child(4){grid-row:7}.project-image-track img:nth-child(4){grid-row:8}
}