body[data-route="work"]{--work-bg:#0b0b0c;--work-ink:#f2f2ef;background:var(--work-bg);color:var(--work-ink);transition:background .55s ease,color .55s ease}
body[data-route="work"] .header{color:var(--work-ink)}
body[data-route="work"].work-light{--work-bg:#fff;--work-ink:#1c1d20}
.work-view{background:var(--work-bg);color:var(--work-ink);transition:background .55s ease,color .55s ease;min-height:0;overflow:hidden}
.work-view .work-opening{padding-top:clamp(90px,7.6vw,130px);padding-bottom:clamp(14px,2vh,24px)}
.work-view .work-opening>.eyebrow{color:inherit;opacity:.6;margin-bottom:clamp(14px,1.7vw,24px)}
.work-heading-row{display:flex;align-items:flex-start;gap:clamp(25px,5vw,100px)}
.work-heading-row h1{font-size:clamp(48px,5.2vw,90px);line-height:1.02;letter-spacing:-.052em;flex:1;max-width:1190px}
.work-themes{display:flex;align-items:center;gap:15px;padding-top:12px;flex-shrink:0}
.work-theme-button{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:none;border:1px solid currentColor;color:var(--work-ink);transition:transform .3s,border-color .3s;touch-action:manipulation}
.work-theme-button span{width:29px;height:29px;border-radius:50%;background:#111;box-shadow:0 0 0 1px #ffffff70}
.work-theme-button[data-work-color="light"] span{background:#fff;box-shadow:0 0 0 1px #777}
.work-theme-button.is-selected{border-color:#455ce9;transform:scale(1.13)}
.work-theme-button.is-selected:after{content:"";position:absolute;inset:-5px;border:1px solid #455ce9;border-radius:50%}
.work-theme-button:focus-visible{outline:2px solid #455ce9;outline-offset:8px}
.work-gallery{width:100%;padding:0 0 clamp(130px,16vw,260px)}
.work-ribbon{display:flex;width:100%;height:clamp(470px,48vw,720px);gap:clamp(5px,.6vw,12px);padding:0 clamp(12px,1.5vw,30px);overflow:hidden;align-items:stretch;opacity:0;transform:translateY(55px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.work-ribbon.is-visible{opacity:1;transform:translateY(0)}
.work-slice{position:relative;flex:1 1 0;min-width:0;overflow:hidden;isolation:isolate;color:white;text-align:left;border:0;border-radius:3px;background:#292b30;transition:flex-grow .75s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),filter .45s;cursor:pointer}
.work-slice.is-active{flex-grow:8}
.work-slice:not(.is-active){filter:saturate(.75) brightness(.84)}
.work-slice:hover,.work-slice:focus-visible{transform:translateY(-14px);z-index:2;filter:brightness(1.05) saturate(1.1)}
.work-slice:focus-visible{outline:2px solid #455ce9;outline-offset:-5px}.work-slice img,.work-slice video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.88);transition:transform .9s cubic-bezier(.22,1,.36,1),filter .7s;pointer-events:none;user-select:none}.work-slice.is-active img,.work-slice.is-active video{transform:scale(1.025);filter:saturate(1)}.work-slice:hover img,.work-slice:hover video{transform:scale(1.075)}
.work-slice:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(0deg,#000b,transparent);pointer-events:none}
.work-slice-index,.work-slice-title,.work-slice-type{position:absolute;z-index:1;left:clamp(15px,2vw,35px);text-shadow:0 2px 18px #000a;white-space:nowrap}
.work-slice-index{top:23px;font-size:11px;letter-spacing:.08em}
.work-slice-title{bottom:60px;font-size:clamp(31px,4vw,68px);line-height:1;letter-spacing:-.055em;opacity:0;transform:translateY(18px);transition:opacity .45s,transform .55s}
.work-slice-type{bottom:30px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;opacity:0;transition:opacity .45s}
.work-slice.is-active .work-slice-title,.work-slice.is-active .work-slice-type,.work-slice:hover .work-slice-title,.work-slice:focus-visible .work-slice-title{opacity:1;transform:translateY(0)}
.work-slice.is-active .work-slice-type,.work-slice:hover .work-slice-type,.work-slice:focus-visible .work-slice-type{opacity:1}
@media(max-width:760px){.work-view .work-opening{padding:150px 24px 64px}.work-heading-row{flex-direction:column;gap:25px}.work-heading-row h1{font-size:clamp(50px,10vw,72px);line-height:1.1}.work-themes{padding:0}.work-theme-button{width:46px;height:46px}.work-theme-button span{width:25px;height:25px}.work-gallery{padding-bottom:110px}.work-ribbon{height:min(64svh,640px);min-height:430px;padding:0 16px;gap:7px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}.work-ribbon::-webkit-scrollbar{display:none}.work-slice{flex:0 0 72px;scroll-snap-align:center;transition:width .65s cubic-bezier(.22,1,.36,1),transform .4s,filter .4s}.work-slice.is-active{flex:0 0 min(74vw,490px)}.work-slice-index,.work-slice-title,.work-slice-type{left:18px}.work-slice-title{font-size:35px;bottom:59px}}
@media(max-width:370px){.work-slice{flex-basis:60px}.work-slice.is-active{flex-basis:75vw}}
@media(prefers-reduced-motion:reduce){body[data-route="work"],.work-view,.work-ribbon,.work-slice,.work-slice img,.work-slice-title,.work-slice-type,.work-slice video{transition:none!important}.work-ribbon{opacity:1;transform:none}.work-slice:hover{transform:none}}
/* Interactive index: one line per film-strip item, centered above the gallery. */
.work-gallery{padding-bottom:clamp(0px,.4vh,6px);overflow:hidden}
.work-progress{width:min(390px,calc(100vw - 36px));height:40px;margin:0 auto clamp(14px,2vh,25px);display:flex;align-items:center;color:var(--work-ink);touch-action:pan-y}
.work-progress-ticks{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}
.work-progress-tick{position:relative;display:grid;place-items:center;flex:1 1 0;min-width:0;height:100%;padding:0;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation}
.work-progress-tick::before{content:"";display:block;width:2px;height:22px;background:currentColor;opacity:.25;transition:opacity .25s ease,background .25s ease,transform .25s ease}
.work-progress-tick.is-current::before{background:#455ce9;opacity:1}
.work-progress-tick.is-passed::before{opacity:.52}
.work-progress-tick:hover::before,.work-progress-tick:focus-visible::before{opacity:1;transform:scaleY(1.2)}
.work-progress-tick:focus-visible{outline:2px solid #455ce9;outline-offset:2px}
.work-ribbon{display:block;height:auto;min-height:0;padding:16px 0 28px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;scroll-snap-type:none;touch-action:pan-x pan-y;transform:translateY(35px)}
.work-ribbon::-webkit-scrollbar{display:none}
.work-strip{display:flex;align-items:stretch;gap:clamp(9px,1.15vw,17px);width:max-content;min-width:100%;height:clamp(230px,36svh,360px);padding:0 clamp(12px,4vw,70px)}
.work-slice,.work-slice.is-active{flex:0 0 clamp(72px,7.4vw,132px);height:100%;border-radius:0;transition:flex-basis .55s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),filter .45s}
.work-slice.is-active{flex-basis:clamp(150px,17vw,300px);transform:translateY(-12px);filter:brightness(1.08) saturate(.92);z-index:2}
.work-slice:hover,.work-slice:focus-visible{transform:translateY(-19px)}.work-slice img,.work-slice video{filter:grayscale(1) brightness(.62) contrast(1.14);transition:transform .65s,filter .55s}.work-slice.is-active img,.work-slice:hover img,.work-slice:focus-visible img,.work-slice.is-active video,.work-slice:hover video,.work-slice:focus-visible video{filter:grayscale(.32) brightness(.9) contrast(1.04);transform:scale(1.05)}
.work-slice:not(.is-active){filter:none}
.work-slice-index{top:15px;left:10px;font-size:10px}
.work-slice-title{font-size:clamp(26px,3vw,44px);bottom:55px;left:18px}
.work-slice-type{bottom:25px;left:18px}
body[data-route="work"].work-light .work-progress-tick.is-current::before{background:#455ce9}
@media(max-width:1000px){.work-heading-row{flex-direction:column;gap:14px}.work-themes{padding:0}}
@media(max-width:760px){.work-view .work-opening{padding:92px 24px 14px}.work-view .work-opening>.eyebrow{margin-bottom:13px}.work-heading-row h1{font-size:clamp(42px,9vw,60px);line-height:1.02}.work-theme-button{width:42px;height:42px}.work-theme-button span{width:25px;height:25px}.work-progress{margin:0 auto 14px;width:min(320px,calc(100vw - 32px))}.work-gallery{padding-bottom:0}.work-ribbon{min-height:0;height:auto;padding:10px 0 14px;scroll-snap-type:x proximity}.work-strip{height:clamp(235px,38svh,330px);gap:9px;padding:0 18px}.work-slice,.work-slice.is-active{flex-basis:72px;scroll-snap-align:center}.work-slice.is-active{flex-basis:min(47vw,235px)}.work-slice-title{font-size:27px}.work-slice:hover{transform:translateY(-10px)}}
@media(max-width:370px){.work-view .work-opening{padding-top:86px}.work-heading-row h1{font-size:40px}.work-progress-tick::before{width:1.5px}}
@media(prefers-reduced-motion:reduce){.work-ribbon{opacity:1;transform:none}.work-slice,.work-slice.is-active,.work-slice img,.work-progress-tick::before,.work-slice video{transition:none!important}.work-slice:hover,.work-slice.is-active{transform:none}}