/* Next case — the next project's picture full bleed; the whole plate is the link. */
.wrk-next{position:relative;background:var(--paper)}
.wrk-next__a{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(420px,64svh,700px);overflow:hidden;background:var(--ink);color:var(--on-ink);text-decoration:none}
.wrk-next__ph{position:absolute;inset:0;z-index:-2}
.wrk-next__ph picture,.wrk-next__ph img{display:block;width:100%;height:100%}
.wrk-next__ph img{object-fit:cover;transform:scale(1.02);transition:transform 1.6s var(--e)}
/* the text zone sits on solid ink (opaque to about half the plate), the 11px line on its own plate: legible on any picture */
.wrk-next__a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);opacity:.86;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,#000 48%,transparent 92%);mask-image:linear-gradient(0deg,#000 0%,#000 48%,transparent 92%)}
.wrk-next__a:hover .wrk-next__ph img,.wrk-next__a:focus-visible .wrk-next__ph img{transform:scale(1.07)}
.wrk-next__a:focus-visible{outline:2px solid var(--blue);outline-offset:-6px}
.wrk-next__in{display:flex;flex-direction:column;gap:14px;padding-block:clamp(48px,6vw,88px)}
.wrk-next__k{align-self:flex-start;padding:7px 14px;border-radius:var(--r-pill);background:var(--ink);box-shadow:inset 0 0 0 1px var(--on-ink-line);
  font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink)}
.wrk-next__t.h2{max-width:20ch;color:var(--on-ink)}
.wrk-next__b{max-width:54ch;font-size:var(--t-lead);line-height:1.6;color:var(--on-ink)}
.wrk-next__go{display:inline-flex;align-items:center;gap:.5em;margin-top:6px;font-size:var(--t-sm);font-weight:500;color:var(--on-ink)}
.wrk-next__go .i{transition:transform var(--d2) var(--e)}
.wrk-next__a:hover .wrk-next__go .i{transform:translateX(5px)}
.wrk-next__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-block:18px}
.wrk-next__prev{max-width:100%}
.wrk-next__back{flex:none;width:8px;height:8px;margin-right:4px;border-left:1.6px solid var(--blue);border-bottom:1.6px solid var(--blue);transform:rotate(45deg);transition:transform var(--d2) var(--e)}
.wrk-next__prev:hover .wrk-next__back{transform:translateX(-3px) rotate(45deg)}
@media (prefers-reduced-motion:reduce){.wrk-next__ph img,.wrk-next__a:hover .wrk-next__ph img{transition:none;transform:none}}