/* ═══ WORK · SECTION 3 — PROJECT GRID ═══ */
.work{padding:clamp(30px,5vh,58px) var(--gut) clamp(70px,12vh,140px)}
.count-line{font-size:11px;letter-spacing:.16em;color:var(--dim);
  padding-bottom:clamp(22px,3.6vh,34px)}
.count-line b{color:var(--text)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px)}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}

.proj{display:block;position:relative;
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .75s cubic-bezier(.16,1,.3,1)}
.proj.is-in{opacity:1;transform:none}
.proj.is-out{opacity:0;transform:scale(.96) translateY(10px);pointer-events:none}
.proj.is-hidden{display:none}
@media(min-width:1001px){
  .proj.wide{grid-column:span 2}
}

.p-media{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--surface-alt);
  clip-path:polygon(0 0,0 0,-36% 100%,-36% 100%);
  transition:clip-path .95s cubic-bezier(.65,0,.2,1) .08s}
.proj.is-in .p-media{clip-path:polygon(0 0,136% 0,100% 100%,0 100%)}
.proj.wide .p-media{aspect-ratio:16/9}
.proj.tall .p-media{aspect-ratio:3/4}
/* .inner is taller than the frame so JS can drift the image inside it (parallax) */
.p-media .inner{position:absolute;inset:-9% 0;display:block;will-change:transform}
.p-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.34) brightness(.82);
  transition:filter .55s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.proj:hover .p-media img{filter:grayscale(0) brightness(1);transform:scale(1.045)}
.p-media .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(36.5deg,#161616 0 13px,#111 13px 26px)}
.p-media .ph i{font-style:normal;font-size:10.5px;letter-spacing:.16em;font-weight:600;color:var(--dim)}

.p-meta{display:block;padding-top:15px}
.p-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.p-top b{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:800;
  font-size:clamp(1rem,1.5vw,1.28rem);letter-spacing:-.024em;line-height:1.1}
.p-top em{font-style:normal;font-size:10.5px;letter-spacing:.14em;color:var(--dim);flex-shrink:0}
.p-type{display:block;margin-top:8px;font-size:.9rem;line-height:1.45;color:var(--muted)}
.p-svc{display:inline-flex;align-items:center;gap:8px;margin-top:11px;
  font-size:10px;letter-spacing:.15em;font-weight:600;color:var(--dim);
  transition:color .35s ease}
.p-svc::before{content:"";width:6px;height:6px;background:var(--cut);flex-shrink:0}
.proj:hover .p-svc{color:var(--cut)}

.empty{display:none;padding:clamp(50px,9vh,100px) 0;text-align:center;color:var(--dim);
  font-size:13px;letter-spacing:.06em}
.empty.is-on{display:block}

.more-wrap{display:flex;justify-content:center;padding-top:clamp(38px,6.5vh,72px)}
.more-wrap .btn{font-size:12.5px;padding:17px 32px;
  font-family:inherit;cursor:pointer;background:none}   /* it's a <button>, so reset the browser defaults */
.more-wrap.is-done{display:none}   /* hidden once every matching project is showing */

@media(prefers-reduced-motion:reduce){
  .proj{opacity:1;transform:none}
  .p-media{clip-path:none!important}
  .p-media .inner{inset:0;transform:none!important}
}