/* One project per row: persistent thumbnail and adjacent information. */
#work .works-list{list-style:none;padding:0;margin:0;display:grid;gap:64px}
#work .works-list>li{margin:0;min-width:0}
#work .work-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;color:#20211f}
#work .work-media{display:block;aspect-ratio:1.6;overflow:hidden;border-radius:12px;background:#efefec}
#work .work-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
#work .work-info{min-width:0;padding:20px 0}
#work .work-platform{display:block;font-size:14px;line-height:1.5;color:#767676;margin-bottom:20px}
#work .work-row h3{font-size:clamp(28px,2.8vw,42px);font-weight:400;letter-spacing:-.04em;line-height:1.3;margin:0 0 22px;word-break:keep-all}
#work .work-strategy{display:block;font-size:15px;line-height:1.7;color:#666}
#work .work-action{display:inline-flex;align-items:center;gap:24px;margin-top:34px;font-size:14px;line-height:1.5;color:#2448e3}
#work .work-arrow{display:inline-block;font-size:24px;transition:transform .3s ease}
#work .work-row:focus-visible{outline:2px solid #2448e3;outline-offset:8px;border-radius:12px}
@media(hover:hover) and (pointer:fine){#work .work-row:hover .work-media img{transform:scale(1.035)}#work .work-row:hover .work-arrow{transform:translate(3px,-3px)}}
@media(max-width:1000px){#work .work-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px}#work .work-row h3{font-size:28px}#work .work-platform{margin-bottom:14px}#work .work-action{margin-top:24px}}
@media(max-width:700px){#work-title,#play-title{font-size:clamp(32px,10vw,48px)}#work .works-list{gap:40px}#work .work-row{grid-template-columns:minmax(0,1fr);gap:20px}#work .work-media{border-radius:8px}#work .work-info{padding:0}#work .work-row h3{font-size:26px;margin-bottom:12px}#work .work-platform{font-size:13px;margin-bottom:10px}#work .work-strategy{font-size:13px}#work .work-action{margin-top:18px;font-size:13px}}
@media(prefers-reduced-motion:reduce){#work .work-media img,#work .work-arrow{transition:none}#work .work-row:hover .work-media img,#work .work-row:hover .work-arrow{transform:none}}

/* Scroll deck: successive projects cover and gently recede the previous card. */
#work .works-list{gap:72px;isolation:isolate}
#work .works-list>li{position:sticky;top:calc(108px + var(--work-index)*14px);align-self:start}
#work .work-row{background:#f8f8f4;border:1px solid #e1e2dc;border-radius:24px;padding:16px;gap:clamp(24px,3vw,48px);transform-origin:50% 0;transform:scale(calc(1 - var(--work-progress,0)*.06));filter:brightness(calc(1 - var(--work-progress,0)*.5));will-change:transform,filter}
#work .work-media{height:100%;min-height:360px;aspect-ratio:auto;border-radius:14px}
#work .work-info{padding:20px 16px 20px 0}
#work .work-platform{margin-bottom:14px}
#work .work-row h3{font-size:clamp(28px,2.5vw,38px);margin-bottom:16px}
#work .work-strategy{font-size:13px;line-height:1.6}
#work .work-description{font-size:15px;line-height:1.8;color:#666;margin:20px 0 24px;word-break:keep-all}
#work .work-outcome{margin:0;padding-top:18px;border-top:1px solid #dedfd9;font-size:14px;line-height:1.65;color:#444}
#work .work-action{margin-top:22px}
@media(max-width:1000px){#work .work-row{gap:24px}#work .work-info{padding:12px 8px 12px 0}#work .work-media{min-height:380px}#work .work-row h3{font-size:28px}}
@media(max-width:700px){#work .works-list{gap:28px}#work .works-list>li{position:relative;top:auto}#work .work-row{padding:12px;border-radius:18px;gap:22px;transform:none;filter:none;will-change:auto}#work .work-media{height:auto;min-height:0;aspect-ratio:1.6;border-radius:10px}#work .work-info{padding:0 8px 12px}#work .work-row h3{font-size:26px;margin-bottom:12px}#work .work-description{font-size:14px;margin:16px 0 20px}#work .work-outcome{font-size:13px;padding-top:16px}}
@media(prefers-reduced-motion:reduce){#work .work-row{transform:none;filter:none;will-change:auto}}

/* Aproduct hover treatment, using the portfolio accent blue. */
#work .work-row h3{transition:color .2s cubic-bezier(.4,0,.2,1)}
#work .work-media{position:relative;user-select:none;transition:box-shadow .2s cubic-bezier(.4,0,.2,1)}
#work .work-media-arrow{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f8f8f4;border:1px solid #d5d6d0;color:#666;font-size:22px;line-height:1;transition:background .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}
@media(hover:hover) and (pointer:fine){#work .work-row:hover h3{color:#2448e3}#work .work-row:hover .work-media{box-shadow:0 4px 12px rgba(26,25,23,.1)}#work .work-row:hover .work-media img{transform:scale(1.035)}#work .work-row:hover .work-action .work-arrow{transform:none}#work .work-row:hover .work-media-arrow{background:#2448e3;border-color:#2448e3;color:#fff;transform:translate(2px,-2px)}}
@media(max-width:700px){#work .work-media-arrow{display:none}}
@media(prefers-reduced-motion:reduce){#work .work-row h3,#work .work-media,#work .work-media-arrow{transition:none}#work .work-row:hover .work-media-arrow{transform:none}}

@media(prefers-reduced-motion:reduce){#work .work-row:hover .work-media img{transform:none}}

/* Thumbnail-local cursor label replaces the fixed corner button. */
#work .work-cursor-label{position:absolute;left:var(--case-x,50%);top:var(--case-y,50%);display:inline-flex;align-items:center;gap:12px;padding:13px 18px;border-radius:40px;background:#2448e3;color:#fff;font-size:13px;line-height:1.4;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .18s ease,transform .25s cubic-bezier(.16,1,.3,1)}
#work .work-cursor-label>span{font-size:19px;line-height:1}
@media(hover:hover) and (pointer:fine){#work .work-media.is-cursor-active{cursor:none}#work .work-media.is-cursor-active .work-cursor-label{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(hover:none),(pointer:coarse){#work .work-cursor-label{display:none}}
@media(prefers-reduced-motion:reduce){#work .work-cursor-label{transition:none}}

#work .work-cursor-label{gap:0;padding:10px 14px;font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;font-size:11px;font-weight:400;letter-spacing:.08em;line-height:1.5;text-transform:none}

#work .work-strategy{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px}
#work .work-strategy>span:not([aria-hidden]){white-space:normal}