/* Homepage project selector. Detail pages will be designed separately. */
.case-selector{display:flex;gap:10px;height:570px;isolation:isolate}
.case-panel{position:relative;display:block;flex:1 1 0;min-width:0;overflow:hidden;color:var(--ivory);background:var(--graphite);transition:flex-grow .48s cubic-bezier(.22,.7,.24,1)}
.case-panel.is-active{flex-grow:3}
.case-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.25) contrast(.94);opacity:.55;object-position:center;transition:opacity .5s cubic-bezier(.22,.7,.24,1),filter .5s cubic-bezier(.22,.7,.24,1)}
.case-panel:hover>img,.case-panel:focus-visible>img{filter:saturate(.92) contrast(1.025);opacity:1}
.case-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,26,31,.2),rgba(19,26,31,.04) 35%,rgba(19,26,31,.84));pointer-events:none}
.case-number{position:absolute;top:25px;left:25px;font-size:11px;letter-spacing:.12em;z-index:1}
.case-spine{position:absolute;left:25px;bottom:32px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:27px;font-weight:400;letter-spacing:-.035em;z-index:1;transition:opacity .18s}
.case-caption{position:absolute;bottom:30px;left:30px;right:30px;z-index:1;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .25s;pointer-events:none}
.case-caption h3{font-size:clamp(25px,2.5vw,37px);font-weight:400;line-height:1.12;letter-spacing:-.045em;margin:12px 0 9px}
.case-location{font-size:10px;letter-spacing:.07em;line-height:1.5}.case-service{font-size:13px;color:oklch(88% .01 78)}
.case-open{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-top:26px;padding-top:17px;border-top:1px solid rgba(243,241,235,.3)}.case-open>span{font-size:23px}
.case-arrow{position:absolute;right:20px;top:18px;font-size:26px;z-index:1;opacity:.8}
.case-panel.is-active .case-caption{opacity:1;transform:none;transition-delay:.15s}
.case-panel.is-active .case-spine{opacity:0}
.case-panel:focus-visible{outline:3px solid var(--oxide);outline-offset:4px;z-index:2}
@media(max-width:1000px) and (min-width:761px){.case-selector{height:500px;gap:8px}.case-caption{left:22px;right:22px}.case-spine{left:20px;font-size:24px}.case-number{left:20px}}
@media(max-width:760px),(hover:none){.case-panel>img{filter:saturate(.92) contrast(1.025);opacity:1}.case-selector{display:grid;grid-template-columns:1fr 1fr;height:auto;gap:12px}.case-panel,.case-panel.is-active{min-height:330px}.case-spine{display:none}.case-caption{opacity:1;transform:none;bottom:22px;left:22px;right:22px;transition:none}.case-caption h3{font-size:27px}.case-caption .case-location{font-size:9px}.case-open{margin-top:18px;padding-top:13px}.case-number{top:20px;left:22px}.case-arrow{display:none}}
@media(max-width:540px){.case-selector{grid-template-columns:1fr;gap:14px}.case-panel,.case-panel.is-active{min-height:320px}.case-caption h3{font-size:29px}.case-panel>img{object-position:center 60%}}
@media(prefers-reduced-motion:reduce){.case-panel,.case-panel>img,.case-spine,.case-caption{transition:none!important}}

/* Give the selected work a reason to be here, without adding another section. */
.featured-work .work-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:5vw}
.work-story{max-width:46ch;margin:0;font-size:18px;line-height:1.7;color:var(--graphite)}
.case-reason{font-size:16px;line-height:1.45;max-width:30ch;margin:14px 0 0}
@media(max-width:760px){.featured-work .work-heading{grid-template-columns:1fr;gap:24px}.work-story{font-size:17px;max-width:48ch}.case-reason{font-size:15px}}