/* Latest projects: SEN's image-led composition, with Yong Xin's type and identity. */
.projects-page{background:#fff;color:#303630}
.projects-page .site-header{color:#303630}
.projects-page .brand img{filter:none}
.projects-page .menu-toggle{color:#25372f;background:rgba(255,255,255,.65)}
.projects-page .site-header.on-footer .menu-toggle{color:var(--ivory);background:rgba(255,255,255,.08)}
.projects-main{--project-unit:max(.848px,.07142857vw);padding-top:100px;background:#fff;overflow:clip}
.project-navigation{position:absolute;top:40px;right:7.3%;display:flex;gap:32px;align-items:center}
.project-navigation a{padding:6px 0;font-size:12px;line-height:1.5;letter-spacing:.1em;border-bottom:1px solid transparent}
.project-navigation a:hover,.project-navigation a[aria-current]{border-color:var(--green);color:var(--green)}
.project-opening{min-height:calc(336 * var(--project-unit));padding:calc(120 * var(--project-unit)) 7.3% calc(60 * var(--project-unit));display:flex;justify-content:space-between;align-items:flex-start;gap:60px}
.project-opening h1{font-size:clamp(36px,4vw,56px);font-weight:400;line-height:1.45;letter-spacing:.11em;padding:0}
.project-opening__title>p{margin-top:14px;font-size:13px;line-height:1.6;letter-spacing:.2em;color:#777d77}
.project-opening__copy{width:32.4vw;padding-right:7.3vw;font-size:clamp(13px,1.1vw,16px);font-weight:300;line-height:2;letter-spacing:.02em}
.project-visual{position:relative;margin-left:7.3%;width:92.7%;height:61.7vw;overflow:hidden;background:#e4e5df}
.project-visual img{width:100%;height:125%;object-fit:cover;object-position:center;transform:translate3d(0,var(--project-image-shift,-14%),0);transition:transform .2s ease-out}
.project-visual figcaption,.project-feature__image figcaption{position:absolute;bottom:16px;right:18px;padding:4px 7px;background:rgba(255,255,255,.7);font-size:10px;line-height:1.5;letter-spacing:.1em;color:#303630}
.project-introduction{display:flex;justify-content:space-between;gap:70px;min-height:calc(535 * var(--project-unit));padding:calc(144 * var(--project-unit)) 14.6% calc(120 * var(--project-unit));scroll-margin-top:40px}
.project-heading>p{font-size:13px;line-height:1.6;font-weight:300;letter-spacing:.13em}
.project-heading>p small{display:block;font-size:9px;line-height:1.6;letter-spacing:.17em;color:#747b75;margin-top:5px}
.project-heading h2{margin:calc(35 * var(--project-unit)) 0 0;font-size:clamp(23px,2.286vw,34px);font-weight:300;line-height:1.75;letter-spacing:.07em}
.project-introduction__copy{width:27.5vw;flex-shrink:0;font-size:clamp(13px,1.072vw,16px);font-weight:300;line-height:2.25;letter-spacing:.02em}
.project-introduction__copy p+p{margin-top:24px}
.project-feature{scroll-margin-top:40px}
.project-feature__details{display:flex;align-items:flex-start;justify-content:space-between;gap:6.4vw;margin-top:calc(144 * var(--project-unit))}
.project-feature__text{box-sizing:content-box;width:37vw;padding-left:14.6vw;padding-bottom:calc(180 * var(--project-unit))}
.project-feature__copy{margin-top:calc(60 * var(--project-unit));padding-left:7.3vw;padding-right:calc(35 * var(--project-unit));font-size:clamp(13px,1.072vw,16px);font-weight:300;line-height:2.25;letter-spacing:.02em}
.project-feature__copy p+p{margin-top:calc(60 * var(--project-unit))}
.project-feature__image{position:relative;width:42vw;flex-shrink:0}
.project-feature__image img{width:100%;height:auto}
.project-gallery{--gallery-gap:48px;--gallery-width:min(42vw,640px,78vh);padding-bottom:calc(144 * var(--project-unit));overflow:hidden;scroll-margin-top:100px}
.project-gallery:focus-visible{outline:1px solid var(--green);outline-offset:-4px}
.project-gallery__viewport{width:100%;overflow:hidden;touch-action:pan-y;cursor:grab}
.project-gallery__viewport:active{cursor:grabbing}
.project-gallery__track{display:flex;gap:var(--gallery-gap);transform:translate3d(calc(50vw - var(--gallery-width)/2),0,0);will-change:transform}
.project-gallery.is-ready .project-gallery__track{transition:transform 1.6s ease}
.project-gallery__slide{position:relative;flex:0 0 var(--gallery-width);width:var(--gallery-width);height:calc(var(--gallery-width) * 2 / 3);margin:0;user-select:none}
.project-gallery__slide img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.project-gallery__slide figcaption{position:absolute;left:calc(100% + 6px);top:0;writing-mode:vertical-rl;font-size:10px;font-weight:300;line-height:1.7;color:#7b807b;letter-spacing:.04em;white-space:nowrap}
.project-gallery__pagination{display:flex;justify-content:center;gap:0;padding-top:18px}
.project-gallery__pagination button{position:relative;display:grid;place-items:center;width:26px;height:32px;padding:0;border:0;background:transparent;color:#25372f;cursor:pointer}
.project-gallery__pagination button:after{content:"";width:5.5px;height:5.5px;border-radius:50%;background:currentColor;opacity:.24}
.project-gallery__pagination button[aria-current]:after{opacity:1}
.project-gallery__pagination button svg{position:absolute;left:5px;top:8px;width:16px;height:16px;opacity:0}
.project-gallery__pagination button[aria-current] svg{opacity:1}
.project-gallery__pagination .animation_circle{stroke-dasharray:50.265;stroke-dashoffset:50.265}
.project-gallery.is-playing button[aria-current] .animation_circle{animation:gallery-countdown 3s linear forwards}
.project-gallery__pagination button:focus-visible{outline:1px solid var(--green);outline-offset:-2px}
@keyframes gallery-countdown{to{stroke-dashoffset:0}}
@media(max-width:1000px) and (min-width:797px){.project-navigation{gap:20px}.project-introduction{gap:40px}.project-heading h2{font-size:22px}.project-opening__copy{width:36vw;padding-right:0}}
@media(max-width:796px){
 .projects-main{--project-unit:calc(100vw / 375);padding-top:84px}
 .project-navigation{position:relative;top:auto;right:auto;justify-content:center;gap:28px;padding:12px 24px;border-top:1px solid #edf0ec;border-bottom:1px solid #edf0ec}
 .project-navigation a{font-size:11px}
 .project-opening{width:79%;min-height:calc(310 * var(--project-unit));margin:0 auto;padding:calc(35 * var(--project-unit)) 0 calc(48 * var(--project-unit));display:block}
 .project-opening h1{font-size:36px;line-height:1.4}
 .project-opening__title>p{font-size:11px;margin-top:10px}
 .project-opening__copy{width:100%;padding:0;margin-top:28px;font-size:13px;line-height:1.9}
 .project-visual{margin-left:4%;width:96%;height:138vw}
 .project-visual img{height:130%;object-position:50% center}
 .project-visual figcaption,.project-feature__image figcaption{right:10px;bottom:10px;font-size:8px}
 .project-introduction{width:79%;min-height:0;margin:auto;display:block;padding:calc(72 * var(--project-unit)) 0 calc(60 * var(--project-unit))}
 .project-heading>p{font-size:12px}.project-heading>p small{font-size:9px}
 .project-heading h2{margin-top:calc(16 * var(--project-unit));font-size:22px;line-height:1.75;letter-spacing:.05em}
 .project-introduction__copy{width:100%;margin-top:24px;font-size:13px;line-height:2.25}
 .project-introduction__copy p+p{margin-top:16px}
 .project-feature__details{display:flex;flex-direction:column;gap:0;margin-top:calc(60 * var(--project-unit))}
 .project-feature__image{order:-1;width:80%;margin:0 auto}
 .project-feature__text{box-sizing:border-box;width:80%;padding:0 0 calc(96 * var(--project-unit));margin:calc(60 * var(--project-unit)) auto 0}
 .project-feature__copy{margin-top:24px;padding:0;font-size:13px;line-height:2.25}
 .project-feature__copy p+p{margin-top:24px}
 .project-gallery{--gallery-gap:20px;--gallery-width:calc((100vw - 5px) / 1.25);padding-bottom:calc(96 * var(--project-unit))}
 .project-gallery__slide figcaption{display:none}
 .project-gallery__pagination{padding-top:10px}.project-gallery__pagination button{width:28px;height:32px}
 .project-gallery__pagination button svg{left:6px}
}
@media(prefers-reduced-motion:reduce){.project-visual img{transform:none;transition:none}.project-gallery.is-ready .project-gallery__track{transition:none}.project-gallery.is-playing button[aria-current] .animation_circle{animation:none;stroke-dashoffset:0}}