/* Job-site cards: realistic graphite pencil drawings (3:1 strip, presented like a framed drawing) + tap to view large (Home "Recent work" + /work/ "From the job site") */
.projects.pj-grid li.has-art{grid-template-rows:auto auto 1fr;overflow:hidden}
.projects.pj-grid .pj-art{grid-column:1/-1;grid-row:1;position:relative;display:block;margin:-18px -18px 16px;aspect-ratio:3/1;overflow:hidden;background:#eceae4;border:0;padding:0;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.projects.pj-grid .pj-art::before{content:"";position:absolute;inset:6px;border:1px solid #c6a15b;border-radius:3px;pointer-events:none;z-index:2;opacity:.85}
.projects.pj-grid .pj-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity 1.1s ease,transform .6s ease}
.js .projects.pj-grid li.rv .pj-art img{opacity:0}
.js .projects.pj-grid li.rv.in .pj-art img{opacity:1}
.projects.pj-grid li.has-art:hover .pj-art img{transform:scale(1.02)}
.projects.pj-grid .pj-art .pj-zoom{position:absolute;right:12px;bottom:11px;z-index:3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(10,11,13,.72);box-shadow:inset 0 0 0 1px rgba(198,161,91,.6)}
.projects.pj-grid .pj-art .pj-zoom svg{width:13px;height:13px;fill:none;stroke:#c6a15b;stroke-width:2;stroke-linecap:round}
.projects.pj-grid .pj-art:focus-visible{outline:2px solid #c6a15b;outline-offset:2px}
.projects.pj-grid li.has-art .pj-ico{grid-row:2/4}
.projects.pj-grid li.has-art .k{grid-row:2}
.projects.pj-grid li.has-art .v{grid-row:3}
@media (max-width:640px){.projects.pj-grid .pj-art{margin:-16px -16px 14px}}
@media (prefers-reduced-motion:reduce){.js .projects.pj-grid li.rv .pj-art img{opacity:1;transition:none}.projects.pj-grid li.has-art:hover .pj-art img{transform:none}}

/* lightbox */
.pjlb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(6,7,8,.94);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s;touch-action:pan-y}
.pjlb.open{opacity:1;visibility:visible;transition:opacity .3s ease}
.pjlb-fig{margin:0;max-width:min(1600px,94vw);display:flex;flex-direction:column;align-items:center;gap:12px}
.pjlb-img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;background:#eceae4;border:1px solid #c6a15b;border-radius:4px;padding:6px;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:opacity .25s ease}
.pjlb-cap{color:#c6a15b;font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-align:center}
.pjlb-btn{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:rgba(20,21,23,.85);box-shadow:inset 0 0 0 1px rgba(198,161,91,.55);color:#fff;cursor:pointer;font:inherit}
.pjlb-btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pjlb-x{top:max(14px,env(safe-area-inset-top));right:14px}
.pjlb-prev{left:12px;top:50%;transform:translateY(-50%)}
.pjlb-next{right:12px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.pjlb-prev,.pjlb-next{top:auto;bottom:max(22px,env(safe-area-inset-bottom));transform:none}.pjlb-prev{left:calc(50% - 56px)}.pjlb-next{right:calc(50% - 56px)}.pjlb-fig{max-width:100vw;padding:0 8px}}
html.pjlb-lock,html.pjlb-lock body{overflow:hidden}
/* 4 cards: clean 2x2 grid when there's room for two ~230px columns, single column on phones (never 3+1) */
.projects.pj-grid{grid-template-columns:repeat(auto-fit,minmax(max(230px,calc(50% - 6px)),1fr))}
@media (max-width:640px){.projects.pj-grid{grid-template-columns:1fr}}
/* Home: card links to its twin on /work/ */
.projects.pj-grid li[data-href]{cursor:pointer}
.projects.pj-grid li[data-href] .pj-art{cursor:pointer}
.projects.pj-grid li[data-href]:focus-visible{outline:2px solid #c6a15b;outline-offset:3px}
/* /work/: arrived from Home -> brief brass highlight on the target card */
.projects.pj-grid li[id]{scroll-margin-top:96px}
@keyframes pjHl{0%,100%{box-shadow:inset 0 0 0 1px var(--line),0 0 0 0 rgba(198,161,91,0)}15%,60%{box-shadow:inset 0 0 0 2px #c6a15b,0 0 26px 2px rgba(198,161,91,.35)}}
.projects.pj-grid li.pj-hl{animation:pjHl 2.2s ease 1}
@media (prefers-reduced-motion:reduce){.projects.pj-grid li.pj-hl{animation:none;box-shadow:inset 0 0 0 2px #c6a15b}}