/* ABOUT inherits body background:var(--paper). Reuse that exact token. */
#works{background:var(--paper);color:var(--ink)}
#works .works-container{display:block}
#works .work-entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,100px);align-items:center;min-width:0;margin:0;padding:0;min-height:clamp(420px,43vw,700px)}
#works .work-entry+.work-entry{margin-top:clamp(90px,12vw,180px)}
#works .work-entry>figcaption{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:30px;min-width:0;margin:0;padding:0}
#works .work-entry>.work-media{grid-column:2;grid-row:1}
#works .work-entry:nth-child(even)>figcaption{grid-column:2}
#works .work-entry:nth-child(even)>.work-media{grid-column:1}
#works .work-entry-copy h3{margin:0;color:var(--ink);font-size:clamp(30px,3vw,48px);font-weight:400;line-height:1.5;letter-spacing:-.03em}
#works .work-entry-copy .pjk-link{margin:0;max-width:100%;background:transparent;color:var(--ink);border-color:var(--ink)}
#works .work-entry-copy .pjk-link:hover,#works .work-entry-copy .pjk-link:focus-visible{background:var(--ink);color:var(--paper)}
#works .work-entry .pjk-link-arrow path{fill:currentColor}
#works .work-entry .work-media{display:block;position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:8px;text-decoration:none}
#works .work-entry .work-media::after{display:none}
#works .work-entry .work-media>img:not(.ys-logo){width:100%;height:100%;object-fit:contain;transform:none!important;transition:none}
#works .work-entry .ys-card{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000}
#works .work-entry .ys-logo{width:28%;height:auto;object-fit:contain;flex:none}
#works .work-entry .ys-coming{color:#fff;margin:24px 0 0;font-size:14px;letter-spacing:.12em}
#works .work-entry.soft{opacity:0;transform:none;translate:none;transition:opacity .7s ease}
#works .work-entry.soft.seen{opacity:1;transform:none;translate:none}
@media(min-width:651px) and (max-width:900px){}
@media(max-width:900px){
#works .work-entry{display:flex;flex-direction:column;align-items:stretch;gap:30px;min-height:0}
#works .work-entry+.work-entry{margin-top:80px}
#works .work-entry>figcaption{order:0;gap:22px}
#works .work-entry>.work-media{order:1}
#works .work-entry-copy h3{font-size:30px}
}
@media(max-width:650px){}
@media(prefers-reduced-motion:reduce){#works .work-entry.soft{opacity:1;transition:none}}

/* v50: both copy blocks meet their image at the same shared grid gutter. */
@media(min-width:901px){
#works .work-entry{--work-column-gap:clamp(40px,6vw,100px);column-gap:var(--work-column-gap)}
#works .work-entry>figcaption{align-items:flex-end;text-align:right}
#works .work-entry:nth-child(even)>figcaption{align-items:flex-start;text-align:left}
}




/* v52: alternating images scroll naturally; copy fades at invariant coordinates. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
#works.works-scroll-active .work-entry.soft{opacity:1;transform:none;translate:none;transition:none}
#works.works-scroll-active .work-entry>figcaption{position:fixed;top:35vh;left:var(--works-copy-left);width:var(--works-copy-width);z-index:3;opacity:0;visibility:hidden;transform:none!important;translate:none!important;transition:none;will-change:opacity}
#works.works-scroll-active .work-entry>figcaption h3{transform:none!important;translate:none!important}
}