.works-v2{--works-header-height:98px}.works-v2 .work-stage{height:min(clamp(520px, 62.5vw, 880px), calc(100svh - var(--works-header-height)));touch-action:pan-y;min-height:0}.works-v2 .work-image{opacity:0;z-index:-2;width:100%;height:100%;transition:opacity .68s;display:block;position:absolute;inset:0;overflow:hidden;transform:none}.works-v2 .work-image.is-active{opacity:1;transform:scale(1)}.works-v2 .work-image img{object-fit:cover;object-position:var(--photo-position);width:100%;height:100%;display:block}.works-v2 .work-stage:after{background:linear-gradient(#0000,#000f22c7);inset:45% 0 0}.works-v2 .work-caption{bottom:54px;right:360px}.works-v2 .work-caption h3{max-width:24ch;animation:work-caption-in .5s var(--ease);font-size:clamp(2rem,3.2vw,3.7rem)}.works-v2 .work-caption p{margin-top:14px;font-size:1rem}.works-v2 .work-controls{right:var(--page-inset,var(--gutter));color:#fff;flex-direction:row;align-items:center;gap:32px;display:flex;bottom:43px}.works-v2 .work-position{font-variant-numeric:tabular-nums;align-items:baseline;gap:12px;font-size:1rem;font-weight:300;display:flex}.works-v2 .work-position>span:first-child{color:#fff;font-size:1.8rem}.works-v2 .work-position>span:last-child{color:#d0dded}.works-v2 .work-transport{align-items:center;gap:9px;display:flex}.works-v2 .work-transport button{color:#fff;background:0 0;border:1px solid #d3deec85;place-items:center;min-width:46px;min-height:46px;padding:0;transition:background .16s,border-color .16s;display:grid}.works-v2 .work-transport button:hover{background:#ffffff20;border-color:#fff}.works-v2 .work-transport button svg{stroke:currentColor;stroke-width:1.2px;fill:none;width:17px;height:17px}.works-v2 .work-transport .pause-button{border:0;min-width:66px;font-size:.82rem}.works-v2 .work-time{background:#a8bcd740;height:3px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.works-v2 .work-time span{transform-origin:0;background:#fff;width:100%;height:100%;display:block;transform:scaleX(0)}.works-v2 .work-time .running{animation:linear both work-time}.works-v2 .works-index{scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#c8d3e0 transparent;scroll-padding-inline:var(--page-inset,var(--gutter));isolation:isolate;gap:24px;padding-top:28px;padding-bottom:25px;display:flex;position:relative;overflow:auto hidden}.works-v2 .works-index button{opacity:1;text-align:left;scroll-snap-align:center;background:0 0;border:0;border-bottom:2px solid #0000;flex-direction:column;flex:0 0 clamp(176px,19vw,258px);align-items:stretch;gap:0;min-width:0;padding:0 0 12px;transition:border-color .2s;display:flex}.works-v2 .works-index button.is-active{border-color:var(--blue)}.works-v2 .work-thumb{aspect-ratio:16/10;background:#edf1f5;margin-bottom:16px;display:block;overflow:hidden}.works-v2 .work-thumb img{object-fit:cover;width:100%;height:100%;transition:transform .5s var(--ease), opacity .3s;opacity:.75}.works-v2 .works-index button.is-active img,.works-v2 .works-index button:hover img{opacity:1}.works-v2 .works-index button:hover img{transform:scale(1.025)}.works-v2 .works-index .work-thumb-name{text-wrap:balance;min-height:2.6em;font-size:1rem;font-weight:400;line-height:1.3}.works-v2 .works-index .work-location{color:var(--muted);margin-top:5px;font-size:.82rem;line-height:1.45;display:block}.works-v2 .works-index button>span:last-child{grid-area:auto;font-size:.82rem;font-weight:400}@keyframes work-time{to{transform:scaleX(1)}}@keyframes work-caption-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (min-width:1800px){.works-v2 .work-image img{object-position:var(--wide-position)}.works-v2 .work-caption{right:calc(var(--page-inset) + 320px)}}@media (max-width:1100px){.works-v2{--works-header-height:84px}}@media (min-width:681px) and (max-width:1000px){.works-v2 .work-image img{object-position:var(--tablet-position)}}@media (max-width:900px){.works-v2 .work-stage{height:min(clamp(500px, 75vw, 660px), calc(100svh - var(--works-header-height)))}.works-v2 .work-caption{right:290px}.works-v2 .work-controls{gap:16px}.works-v2 .work-caption h3{font-size:2.5rem}.works-v2 .works-index{gap:20px}}@media (max-width:680px){.works-v2{--works-header-height:76px}.works-v2 .work-stage{height:min(clamp(430px, 125vw, 620px), calc(100svh - var(--works-header-height)))}.works-v2 .work-image img{object-fit:cover;object-position:var(--mobile-position)}.works-v2 .work-caption{bottom:104px;left:0;right:0}.works-v2 .work-caption h3{max-width:21ch;font-size:2rem}.works-v2 .work-caption p{margin-top:12px;font-size:.9rem}.works-v2 .work-controls{left:var(--gutter);right:var(--gutter);justify-content:space-between;gap:16px;bottom:24px}.works-v2 .work-position>span:first-child{font-size:1.5rem}.works-v2 .work-position{font-size:.9rem}.works-v2 .works-index{gap:18px;padding-top:22px;padding-bottom:20px}.works-v2 .works-index button{flex-basis:176px;min-height:0;padding-bottom:10px}.works-v2 .work-thumb{margin-bottom:12px}.works-v2 .works-index .work-thumb-name{min-height:2.6em;font-size:.9rem}.works-v2 .works-index .work-location{font-size:.76rem}.works-v2 .work-transport{gap:6px}}@media (prefers-reduced-motion:reduce){.works-v2 .work-image{transition:none;transform:none}.works-v2 .work-time .running,.works-v2 .work-caption h3{animation:none}}
