/* Our work — mobile first, staggered two columns from 760px */
.work-hero{background:var(--dark);color:#fff;padding:72px 0 64px}
.work-hero .eyebrow{font-size:14px;letter-spacing:.08em}
.work-hero h1{font-size:clamp(44px,11vw,96px);line-height:1.02;letter-spacing:-.05em;font-weight:400;margin-top:18px}
.work-hero h1 strong{font-weight:900}
.work-lede{font-size:18px;line-height:1.45;margin-top:22px;max-width:520px;color:rgba(255,255,255,.75)}

.work-list{padding:28px 0 88px}
.pills{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1*var(--page-gutter));padding:4px var(--page-gutter) 4px 0;position:sticky;top:0;z-index:4;background:#fff}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;min-height:44px;padding:0 15px;border-radius:999px;border:1.5px solid #d4d4d8;background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pill:hover{border-color:var(--ink)}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.work-count{font-size:14px;color:#77777f;margin:14px 0 26px;text-transform:uppercase;letter-spacing:.06em}

.work-wall{display:grid;gap:44px}
.work-item[hidden]{display:none}
.work-item a,.work-item .no-case{display:block;color:inherit}
.work-pic{overflow:hidden;border-radius:20px;background:#e6e6e9;aspect-ratio:16/10}
.work-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.work-item a:hover .work-pic img{transform:scale(1.04)}
.work-item h2{font-size:22px;line-height:1.2;font-weight:900;letter-spacing:.01em;text-transform:uppercase;margin-top:18px}
.work-item a:hover h2{color:var(--red)}
.work-tags{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#55555d}
.work-tags .sep{color:var(--red)}
.soon-note{font-size:13px;color:#8a8a92;margin-top:8px}
.work-item{animation:work-in .45s ease both}
@keyframes work-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(min-width:760px){
  .work-hero{padding:120px 0 104px}
  .work-lede{font-size:20px}
  .pills{position:static;margin-right:0;padding:0;flex-wrap:wrap}
  .pill{padding:0 20px;font-size:15px}
  .work-wall{grid-template-columns:repeat(12,1fr);gap:0 24px}
  .work-item{grid-column:1 / span 5;margin-bottom:96px}
  .work-item.is-right{grid-column:7 / span 6;margin-top:150px;margin-bottom:-54px}
  .work-item.is-right .work-pic{aspect-ratio:1.55}
  .work-item h2{font-size:25px}
  .work-list{padding:40px 0 140px}
}
@media(prefers-reduced-motion:reduce){.work-item{animation:none}.work-pic img{transition:none}}
video.work-pic{display:block;width:100%;object-fit:cover}