/* artwork.html — normal scrolling page, reuses the tokens of style.css */
body.page{overflow:auto}
body.page header{position:fixed}
.back{color:var(--ink);opacity:.75;padding:6px 0;position:relative}
.back::before{content:"←";margin-right:12px}
.back:hover{opacity:1}
.works{position:relative;z-index:1;height:auto;overflow:visible;scroll-snap-type:none;scroll-behavior:auto}
.works .wrap{max-width:1400px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.works-hero{position:relative;min-height:62vh;display:grid;align-items:end;padding-top:120px;padding-bottom:clamp(40px,6vw,80px);overflow:hidden}
.works-hero .bg{transform:none;position:absolute;inset:0;z-index:0}
.works-hero .bg::after{background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.6) 70%,#000 100%)}
.works-hero .wrap{position:relative;z-index:1}
.works-hero .t{font-size:clamp(64px,11vw,160px)}
.works-hero .lead{margin-top:26px;max-width:52ch}

.project{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(28px,5vw,80px);padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--line)}
.project:first-child{border-top:0}
.project-head{position:sticky;top:110px;align-self:start}
.project-head .eyebrow{display:block;margin-bottom:18px}
.project-head .t.h2{font-size:clamp(40px,5.6vw,88px);margin-bottom:18px}
.project-head .role{margin:0 0 22px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);line-height:2}
.project-head .lead{margin-bottom:30px}
.links-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:12px;border:1px solid #6a6a6a;padding:11px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.chip:hover{background:var(--ink);color:#000;border-color:var(--ink)}
.chip svg{width:16px;height:9px}
.chip img{width:16px;height:16px;object-fit:contain}

.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transition:opacity .18s}
.project-grid.swap{opacity:0}
.project-media .pager{grid-column:auto;max-width:none;margin-left:0;justify-content:flex-end}
.project-grid figure{position:relative;overflow:hidden;background:#111;aspect-ratio:1;border:1px solid transparent;border-image:linear-gradient(90deg,#b7b7b7 0%,#b7b7b7 10%,rgba(183,183,183,0) 50%) 1}
.project-grid button{display:block;width:100%;height:100%;padding:0}
.project-grid img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .5s,transform .8s cubic-bezier(.2,.7,.2,1)}
.project-grid figure:hover img{filter:none;transform:scale(1.04)}
.project-grid.empty{display:block}
.soon{border:1px solid var(--line);padding:60px 24px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);aspect-ratio:16/7;display:grid;place-items:center}

.works-foot{display:flex;justify-content:space-between;gap:20px;padding:40px clamp(18px,4vw,48px) 48px;max-width:1400px;margin:0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
.works-foot a:hover{color:var(--ink)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.94);display:none;place-items:center;padding:60px clamp(16px,6vw,90px)}
.lightbox.open{display:grid}
.lightbox img{max-width:100%;max-height:calc(100vh - 120px);object-fit:contain;display:block}
.lightbox button{position:absolute;color:var(--ink);font-size:34px;line-height:1;padding:14px;opacity:.7;transition:opacity .2s}
.lightbox button:hover{opacity:1}
.lb-close{top:18px;right:22px}
.lb-prev{left:clamp(6px,2vw,24px);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(6px,2vw,24px);top:50%;transform:translateY(-50%)}
.lb-cnt{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--muted)}

@media (max-width:900px){
  .project{grid-template-columns:1fr;gap:28px}
  .project-head{position:static}
  .project-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .works-hero{min-height:52vh}
  .works-hero .t{font-size:11.5vw;letter-spacing:0}
  .project-head .t.h2{font-size:clamp(36px,10vw,64px)}
}