@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@700&family=Space+Grotesk:wght@700&display=swap";
@layer base{:root{--bg-color:#efefef;--text-main:#000;--color-primary:#3b82f6;--color-orange:#f97316;--border-color:#000;--color-grey-placeholder:#d1d1d1;--color-grey-text:#666;--color-grey-light:#999;--font-en:"Space Grotesk",sans-serif;--font-cn:"Noto Sans SC",sans-serif;--font-base:var(--font-en),var(--font-cn);--gap-sm:20px;--gap-lg:100px;--page-margin:20px;--font-size-lg:40px;--font-size-sm:24px}*,:before,:after{box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-base);letter-spacing:-.03em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-weight:700}h1,h2,h3,p{margin:0}img,svg{max-width:100%;display:block}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}}@layer components{.text-lg{font-size:var(--font-size-lg);line-height:1.2}.text-sm{font-size:var(--font-size-sm);line-height:1.3}.container{padding:var(--page-margin)}.grid-12{gap:var(--gap-sm);grid-template-columns:repeat(12,1fr);display:grid}.col-3{grid-column:span 3}.col-9{grid-column:span 9}.col-12{grid-column:span 12}.logo-col{grid-area:1/1/3/4}.logo-placeholder{letter-spacing:-.03em;text-transform:uppercase;margin-top:-10px;font-size:8rem;line-height:.8}.header-info-col{padding-bottom:calc(var(--gap-sm)*4);flex-direction:column;grid-area:1/4/auto/13;justify-content:space-between;display:flex}.mission-cn{margin-bottom:var(--page-margin)}.nav-item{color:var(--text-main);text-decoration:none}.nav-item:hover{text-decoration:underline}.nav-item.active{color:var(--color-primary)}.nav-works{grid-area:2/4/auto/6;align-self:end}.nav-info{grid-area:2/6/auto/12;align-self:end}.nav-contact{grid-area:2/11/auto/13;align-self:end}.divider{border:none;border-bottom:2px solid var(--border-color);margin:var(--gap-sm)0 var(--gap-lg)0}.projects-section{gap:var(--gap-lg);flex-direction:column;display:flex}.project-meta,.project-desc-wrapper{flex-direction:column;display:flex}.project-title{color:var(--color-primary);margin-bottom:20px}.project-desc-cn{margin-bottom:20px}.project-desc-en{margin-bottom:30px}.read-more{color:var(--color-grey-text);text-underline-offset:4px;margin-top:auto;text-decoration:underline}.read-more:hover{color:var(--text-main)}.project-visual{aspect-ratio:16/9;width:100%}.bg-white{background-color:#fff;justify-content:center;align-items:center;display:flex}.bg-grey-placeholder{background-color:var(--color-grey-placeholder)}.visual-content{text-align:center}.visual-content h2{letter-spacing:-.03em;margin:0;font-size:4vw;line-height:1.2}.visual-content .subtitle{letter-spacing:-.03em;margin:0;font-size:3vw;line-height:1.2}.text-orange{color:var(--color-orange)}.text-grey{color:var(--color-grey-light);margin-left:.5rem}}@media (max-width:1024px){:root{--gap-lg:60px;--font-size-lg:32px;--page-margin:30px}.logo-placeholder{font-size:6rem}.project-visual{aspect-ratio:auto;min-height:400px}.visual-content h2{font-size:5vw}.visual-content .subtitle{font-size:3vw}.project-row{gap:var(--gap-sm);flex-direction:column;display:flex}.project-row .project-meta{order:1}.project-row .project-visual{order:2}.project-desc-wrapper{gap:var(--gap-sm);flex-direction:row;margin-bottom:30px}.project-desc-wrapper .project-desc-cn,.project-desc-wrapper .project-desc-en{flex:1;margin-bottom:0}}@media (max-width:768px){:root{--gap-sm:15px;--gap-lg:40px;--font-size-lg:28px;--font-size-sm:18px;--page-margin:15px}.logo-col{margin-bottom:var(--gap-sm);grid-area:auto/1/auto/-1}.logo-placeholder{text-align:left;font-size:4rem}.header-info-col{margin-bottom:calc(var(--gap-sm)*2);grid-area:auto/1/auto/-1;padding-bottom:0}.nav-works,.nav-info,.nav-contact{grid-area:auto/span 4;align-self:center}.nav-contact{text-align:right}.project-visual{min-height:250px}.visual-content h2{font-size:6vw}.visual-content .subtitle{margin-top:10px;font-size:4vw;display:block}.text-grey{margin-left:0;display:block}}