/* Every screenshot retains its original 8:5 frame. Shared spacing comes from layout-system.css. */
.work-gallery{--work-h:220px;--work-w:352px;--work-gap:var(--layout-gap);--work-bleed:clamp(64px,6vw,120px);--work-content-gutter:max(calc(var(--rail) + 2 * var(--rail-inset) + 20px),clamp(80px,7vw,144px));position:relative;z-index:3;overflow:clip;background:var(--paper) url('/assets/paper-seamless.webp');color:#0a0a0a;padding:clamp(56px,5vw,96px) 0 var(--layout-section-space)}
.work-ribbon{--work-tilt:-5deg;position:relative;left:calc(-1 * var(--work-bleed));width:calc(100% + 2 * var(--work-bleed));height:var(--work-h);transform:rotate(var(--work-tilt));transform-origin:50% 50%;overflow:hidden;user-select:none}
.work-track{display:flex;width:max-content;will-change:auto}
.work-group{flex:0 0 auto;display:flex;align-items:center;gap:var(--work-gap);padding:0 var(--work-gap) 0 0;margin:0;list-style:none}
.work-card{position:relative;flex:0 0 auto;width:var(--work-w);height:var(--work-h);margin:0;padding:0;overflow:hidden;background:#eee1d5}
.work-card img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none}
.work-content{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);column-gap:clamp(48px,5vw,96px);align-items:start;margin:var(--layout-section-space) var(--work-content-gutter)}
.work-story{width:auto;min-width:0;margin:0;padding-top:21px;font-family:LiraStudioUnbounded,Unbounded,Arial,sans-serif;font-weight:400;font-size:clamp(18px,1.45vw,28px);font-synthesis:none;line-height:1.3;letter-spacing:-.035em;text-align:left;overflow-wrap:break-word}
.work-cta{min-width:0;border-top:3px solid #ef5143;padding-top:18px;color:#ef5143}
.work-cta-title{margin:0 0 28px;font-family:Oswald,'Arial Narrow',sans-serif;font-size:clamp(22px,1.85vw,34px);font-weight:700;font-synthesis:none;line-height:1.14;letter-spacing:0;text-transform:uppercase}
.work-cta-title span{display:block}
.work-cta-button{display:block;width:100%;min-height:58px;margin:0;padding:16px 18px;border:0;border-radius:0;background:#ef5143;color:#fff3e2;font:600 clamp(18px,1.4vw,24px)/1.2 Onest,Arial,sans-serif;text-align:center;cursor:pointer;transition:background-color 160ms ease}
.work-cta-button:hover{background:#dc4437}
.work-cta-button:active{background:#c93b30}
.work-cta-button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}

@media(max-width:1199px){.work-gallery{--work-h:180px;--work-w:288px}}
@media(max-width:767px){
 .work-gallery{--work-h:120px;--work-w:192px;--work-bleed:48px;padding-top:44px;padding-bottom:var(--layout-section-space)}
 .work-content{margin-inline:var(--layout-content-left) var(--layout-gutter)}
 .work-story{font-size:clamp(16px,4.1vw,19px)}
 .work-cta-title{font-size:24px}
}
/* The static portfolio shows the original cases, followed by the live overview. */
.work-gallery:not([data-motion="scroll"]) .work-ribbon{left:0;width:auto;height:auto;transform:none;overflow:visible;margin-inline:var(--work-content-gutter)}
.work-gallery:not([data-motion="scroll"]) .work-track{display:block;width:auto;will-change:auto;transform:none!important}
.work-gallery:not([data-motion="scroll"]) .work-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;gap:var(--layout-gap)}
.work-gallery:not([data-motion="scroll"]) .work-card{width:auto;height:auto;aspect-ratio:1.6}
.work-gallery:not([data-motion="scroll"]) [data-work-clone],.work-gallery:not([data-motion="scroll"]) .work-ribbon--bottom{display:none}
.work-gallery:not([data-motion="scroll"]) .work-content{margin-top:var(--layout-section-space);margin-bottom:0}
@media(max-width:767px){.work-gallery:not([data-motion="scroll"]) .work-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}}
@media(prefers-reduced-motion:reduce){.work-story{animation:none!important}.work-track{will-change:auto}}
html[data-motion="reduced"] .work-story{animation:none!important}
@media print{.work-gallery{padding-block:24px}.work-ribbon{left:0!important;width:auto!important;height:auto!important;transform:none!important}.work-track{display:block;width:auto;transform:none!important}.work-group{display:grid;grid-template-columns:repeat(2,1fr);padding:0}.work-card{width:auto;height:auto;aspect-ratio:1.6}.work-ribbon--bottom,[data-work-clone]{display:none!important}.work-story{animation:none!important}}

.work-gallery[data-active="true"] .work-track{will-change:transform}
.work-gallery[data-story="playing"] .work-story{animation:work-story-enter 520ms cubic-bezier(.22,.7,.2,1) both}
@keyframes work-story-enter{from{opacity:.72;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(max-width:1100px){.work-content{grid-template-columns:1fr;row-gap:32px}.work-story{padding-top:0}.work-story-break{display:none}.work-cta{width:min(480px,100%)}}
@media(max-width:767px){.work-gallery:not([data-motion="scroll"]) .work-ribbon{margin-inline:var(--layout-content-left) var(--layout-gutter)}}