/* Portfolio page (/work/). Built on design-study.css, site-nav.css and page-shell.css. */
.wk{color:var(--green)}
.wk-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(30px,6vw,110px);align-items:end;padding:clamp(50px,7vw,110px) var(--gutter) clamp(50px,6vw,90px)}
.wk-hero h1{margin:0;font-weight:400;font-size:clamp(50px,8vw,132px);line-height:.92;letter-spacing:-.07em}
.wk-hero p{margin:0 0 8px;max-width:420px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:#33463f}

.wk-list{list-style:none;margin:0;padding:0 var(--gutter)}
.wk-item{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,90px);align-items:center;padding:clamp(40px,5vw,70px) 0;border-top:1px solid #173e3426}
.wk-item:nth-child(even) .wk-shot{order:2}
.wk-shot{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:22px;background:#e0e2d8;box-shadow:0 1px 0 #173e3410}
.wk-shot img,.wk-shot video{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 5s ease,transform .7s ease}
.wk-shot:hover img,.wk-shot:focus-visible img{object-position:bottom;transform:scale(1.02)}
.wk-shot .wk-open{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:100px;background:var(--cream);color:var(--green);font-size:13.5px;box-shadow:0 8px 24px #173e341f;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s}
.wk-shot:hover .wk-open,.wk-shot:focus-visible .wk-open{opacity:1;transform:none}
.wk-text h2{font-size:clamp(38px,4.4vw,68px);letter-spacing:-.06em;margin:0}
.wk-what{margin:18px 0 0;max-width:440px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:#33463f}
.wk-built{margin:30px 0 0;padding:16px 0 0;border-top:1px solid #173e3426;max-width:440px}
.wk-built dt{font-size:13px;color:var(--muted);margin:0 0 10px}
.wk-built dd{margin:0;display:flex;flex-wrap:wrap;gap:8px}
.wk-built span{display:inline-block;padding:7px 13px;border:1px solid #173e3440;border-radius:100px;font-size:13.5px}
.wk-visit{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:22px;padding:4px 0;border-bottom:1px solid currentColor;font-size:15px}
.wk-visit svg{transition:transform .25s}
.wk-visit:hover svg,.wk-visit:focus-visible svg{transform:translate(2px,-2px)}
.wk-domain{color:var(--muted);font-size:13px;margin-left:4px}

/* Phones and touch: the open label is always visible, since there is no hover */
@media(hover:none){.wk-shot .wk-open{opacity:1;transform:none}}
@media(max-width:860px){
  .wk-hero{grid-template-columns:1fr;align-items:start}
  .wk-item{grid-template-columns:1fr;gap:24px}
  .wk-item:nth-child(even) .wk-shot{order:0}
}
@media(max-width:600px){
  .wk-shot{border-radius:16px;aspect-ratio:1/1.05}
  .wk-shot .wk-open{right:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){.wk-shot img,.wk-shot video{transition:none}}
/* Sky Painting's capture opens on a tall plain hero, so it starts lower down the page */
.wk-shot-low img{object-position:50% 100%}
.wk-shot-low:hover img,.wk-shot-low:focus-visible img{object-position:50% 70%}