/* project detail page + project cards + lightbox (loaded after pages.css) */
a.pcard { display:block; color:inherit; }
.pcard .im { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.85); transition:filter .7s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .im { filter:none; transform:scale(1.07); }
.pcard .cap { position:absolute; z-index:2; inset:auto 18px 16px; display:grid; gap:4px; }
.pcard .cap span { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:#bbb; }
.pcard .cap b { font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.7vw,24px); }

.proj-hero { min-height:84vh; }
img.phero-bg { position:absolute; display:block; background:none; }
.meta { display:flex; flex-wrap:wrap; gap:18px clamp(26px,4vw,64px); margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.22); }
.meta span { display:block; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.meta b { font-weight:400; font-size:clamp(15px,1.3vw,18px); }
.gal { padding-top:10vh; }
.tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:5vh; }
.tabs button { background:rgba(20,20,20,.75); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:10px 22px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; transition:background .3s,color .3s; }
.tabs button sup { margin-inline-start:6px; opacity:.55; font-size:9px; }
.tabs button:hover, .tabs button.on { background:#fff; color:#000; border-color:#fff; }

.masonry { column-count:3; column-gap:14px; }
.shot { display:block; width:100%; margin:0 0 14px; padding:0; border:0; background:#161616; border-radius:4px; overflow:hidden; break-inside:avoid; min-height:120px; cursor:zoom-in; animation:shotIn .7s both; }
@keyframes shotIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.shot img { display:block; width:100%; height:auto; transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .6s; filter:brightness(.92); }
.shot:hover img { transform:scale(1.04); filter:none; }
@media (max-width:1000px){ .masonry{column-count:2} }
@media (max-width:520px){ .masonry{column-count:1} }
.none { color:var(--muted); }

.bgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.bcard { position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:6px; background:#1a1a1a; display:block; }
.bcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.8); transition:filter .7s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.bcard:hover img { filter:none; transform:scale(1.06); }
.bcard::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.78),transparent 60%); pointer-events:none; }
.bcard .cap { position:absolute; z-index:2; inset:auto 16px 14px; display:grid; gap:4px; }
.bcard .cap b { font-family:var(--serif); font-weight:400; font-size:clamp(18px,1.6vw,22px); }
.bcard .cap span { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:#bbb; }
.vgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:14px; margin-top:18px; }
.vid { position:relative; aspect-ratio:16/9; overflow:hidden; border:0; padding:0; border-radius:6px; background:#161616; cursor:pointer; color:#fff; display:block; width:100%; }
.vid img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.8); transition:filter .5s, transform 1s cubic-bezier(.2,.7,.2,1); }
.vid:hover img { filter:none; transform:scale(1.04); }
.vid i { position:absolute; inset:50% auto auto 50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(4px); }
.vid i::after { content:""; position:absolute; inset:50% auto auto 54%; transform:translate(-50%,-50%); border:9px solid transparent; border-left:15px solid #fff; border-right:0; }
.vid span { position:absolute; inset:auto 14px 12px; font-size:13px; text-align:start; text-shadow:0 1px 6px #000; }
.vid.on { cursor:default; }
.vid iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:10px 20px; font-size:13px; transition:background .3s,color .3s; }
.chip:hover { background:#fff; color:#000; }

.pn { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-block:8vh; }
.pn a { border:1px solid rgba(255,255,255,.14); border-radius:6px; padding:30px 26px; display:grid; gap:10px; transition:background .4s,color .4s; }
.pn a:last-child { text-align:end; }
.pn a:hover { background:#fff; color:#000; }
.pn span { font-size:11px; letter-spacing:.25em; text-transform:uppercase; opacity:.6; }
.pn b { font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.2vw,32px); }
@media (max-width:640px){ .pn{grid-template-columns:1fr} .pn a:last-child{text-align:start} }

.lb { position:fixed; inset:0; z-index:2000; background:rgba(5,5,5,.96); display:grid; place-items:center; }
.lb[hidden] { display:none; }
.lb img { max-width:94vw; max-height:88vh; object-fit:contain; }
.lb button { position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; width:48px; height:48px; border-radius:50%; font-size:22px; line-height:1; transition:background .3s; }
.lb button:hover { background:#fff; color:#000; }
.lb-x { top:18px; inset-inline-end:18px; }
.lb-p { inset-inline-start:18px; top:50%; margin-top:-24px; }
.lb-n { inset-inline-end:18px; top:50%; margin-top:-24px; }
[dir=rtl] .lb-p, [dir=rtl] .lb-n { transform:scaleX(-1); }
.lb-c { position:absolute; bottom:18px; font-size:12px; letter-spacing:.25em; color:#aaa; }
@media (max-width:640px){ .lb-p,.lb-n{top:auto;bottom:14px;margin:0} .lb-p{inset-inline-start:14px} .lb-n{inset-inline-end:14px} }

/* <dl> meta in the project hero */
.meta > div { min-width:0; }
.meta dt { display:block; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.meta dd { margin:0; font-weight:400; font-size:clamp(15px,1.3vw,18px); }
.meta dd a { border-bottom:1px solid rgba(255,255,255,.4); }
.masonry[hidden] { display:none; }
a.shot { text-decoration:none; }