.works-section{position:relative;z-index:1;background:var(--black);padding-top:11.11vw;scroll-margin-top:8rem}
.works-heading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:4.4vw;text-align:center}
.works-title{margin:0;font-size:8.89vw;line-height:1.1;font-weight:600;letter-spacing:-.03em;text-transform:uppercase}
.works-letter{display:inline-block}
.work-project{position:relative;display:flex;align-items:center;justify-content:center;height:100svh;min-height:380px}
.work-visual{position:absolute;display:flex;align-items:center;justify-content:center;width:90vw;height:90vh;height:90svh;overflow:hidden}
.work-visual img{display:block;width:100%;height:100%;object-fit:cover}
.work-ribbon{position:relative;z-index:2;display:block;width:100%;mix-blend-mode:exclusion;color:var(--white)}
.work-arc{display:block;position:relative;width:100%;height:auto;overflow:visible;fill:currentColor;font-size:6rem;font-weight:500;letter-spacing:-.03em}
.work-view-tag{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;width:8rem;height:2rem;padding-left:.2rem;backdrop-filter:blur(2rem);-webkit-backdrop-filter:blur(2rem);border-radius:1rem;text-align:center;font-size:.8rem;font-weight:400;line-height:1.6;letter-spacing:.13rem;text-transform:uppercase;opacity:0;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);transition:opacity .5s}
.work-project.is-hovered .work-view-tag,.work-project:focus-within .work-view-tag{opacity:1}
.work-project:focus-within .work-view-tag{pointer-events:auto}
.work-project:not(.is-hovered):focus-within .work-view-tag{left:50%;top:auto;bottom:8%;transform:translate(-50%,0)}
.works-motion .work-visual{clip-path:polygon(25% 25%,75% 40%,100% 100%,0% 100%)}
.works-motion .works-letter{opacity:0;transform:translateY(300%)}
.project-page{padding:3rem 5% 5rem}
.project-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.85rem;letter-spacing:.08em}
.project-page h1{margin:6rem 0 3rem;font-size:clamp(4rem,12vw,12rem);font-weight:500;line-height:1;letter-spacing:-.05em}
.project-image{display:block;width:100%;height:auto}
@media(max-width:991px){.works-section{padding-top:10rem}.works-heading{padding-bottom:4rem}.works-title{margin-top:.55rem;font-size:6rem}.work-arc{font-size:7rem}.work-view-tag{display:none}}
@media(max-width:767px){.works-section{padding-top:8rem}.works-title{font-size:5rem}}
@media(max-width:479px){.works-section{padding-top:6rem}.works-title{font-size:18vw}.work-arc{font-size:10rem}.work-project{min-height:360px}.project-page{padding-top:2rem}.project-header{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.works-motion .work-visual{clip-path:none}.works-motion .works-letter{opacity:1;transform:none}.work-view-tag{transition:none}}