/* ===== selected-work.css — #work: three editorial case cards (scoped .sw-*) ===== */
.sw-head{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vh,20px);margin-bottom:clamp(36px,5vh,56px)}
.sw-head h2{margin:0;font-size:clamp(38px,4.4vw,76px);line-height:.96;letter-spacing:-.035em;white-space:nowrap}
.sw-head .lead{display:none}
.sw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,32px);align-items:stretch}
.sw-card{position:relative;display:flex;flex-direction:column;min-width:0;margin:0!important;text-decoration:none;color:var(--ink);background:#0A0A0A;border-radius:22px;overflow:hidden;transition:transform 700ms var(--ease),box-shadow 700ms var(--ease)}
.sw-card:hover{transform:translateY(-6px);box-shadow:0 40px 90px -40px rgba(20,19,15,.45)}
.sw-card:focus-visible{outline:2px solid #14130F;outline-offset:4px}
.sw-img{position:relative;margin:0;aspect-ratio:4/5;background:#141414;overflow:hidden;flex:none}
.sw-img image-slot{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;color:rgba(245,245,240,.5);transform:scale(1);transition:transform 1200ms var(--ease)}
.sw-img image-slot[fit="contain"]{inset:6%;width:88%!important;height:88%!important}
.sw-img:has(image-slot[fit="contain"]){background:#fff}
.sw-img:has(image-slot[fit="contain"])::after{background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.18))}
.sw-card:hover .sw-img image-slot{transform:scale(1.04)}
.sw-img::after{content:'';position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.55));pointer-events:none}
.sw-tag{position:absolute;z-index:2;left:18px;top:18px;display:inline-flex;align-items:center;gap:12px;padding:12px 18px;border-radius:999px;background:rgba(10,10,10,.8);backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:clamp(13px,1vw,15px);letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:#fff}
.sw-tag i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sw-client{display:none}
.sw-body{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.2vw,32px);color:#F5F5F0;flex:1}
.sw-body h3{margin:0;font-size:clamp(22px,1.75vw,30px);line-height:1.08;letter-spacing:-.025em;color:#fff;text-wrap:pretty}
.sw-body p{margin:0;font-size:clamp(15px,1.05vw,17px);line-height:1.5;color:rgba(245,245,240,.72);text-wrap:pretty}
.sw-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,240,.5);line-height:1.6}
.sw-cta{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:18px;border-top:1px solid rgba(245,245,240,.14);font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#fff}
.sw-cta i{font-style:normal;display:inline-block;transition:transform 500ms var(--ease)}
.sw-card:hover .sw-cta i{transform:translateX(6px)}
.sw-card:hover .sw-cta span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (max-width:1024px){.sw-head h2{white-space:normal}}
@media (max-width:900px){.sw-grid{grid-template-columns:1fr;gap:20px}.sw-img{aspect-ratio:4/3}.sw-card:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.sw-card,.sw-img image-slot,.sw-cta i{transition:none}.sw-card:hover{transform:none}.sw-card:hover .sw-img image-slot{transform:none}}
/* Reframe mode: let the spill layer + corner handles escape the card mask and freeze hover motion so drags stay stable. */
.sw-card:has(image-slot[data-reframe]),.sw-card:has(image-slot[data-reframe]) .sw-img{overflow:visible;z-index:20}
.sw-card:has(image-slot[data-reframe]),.sw-card:has(image-slot[data-reframe]):hover{transform:none;transition:none}
.sw-card:has(image-slot[data-reframe]) .sw-img image-slot{transform:none!important;transition:none}
.sw-card:has(image-slot[data-reframe]) .sw-img::after{display:none}
.sw-grid:has(image-slot[data-reframe]){position:relative;z-index:20}