/* Projects (selected work) page */

.pj-blobs .b1{position:absolute;width:55vw;height:55vw;right:-18vw;top:-22vw;border-radius:50%;background:radial-gradient(circle,#12363e 0%,transparent 65%);filter:blur(70px);animation:flowA 16s ease-in-out infinite}

.pj-hero{position:relative;z-index:1;padding:22vh 44px 60px;max-width:1400px;margin:0 auto;box-sizing:border-box}
.pj-hero h1{font-size:clamp(52px,8vw,130px);font-weight:800;letter-spacing:-.02em;line-height:.96;margin:0}
.pj-hero h1 .outline{color:transparent;-webkit-text-stroke:1.5px rgba(238,243,242,.8)}

.pj-filters{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px;font-family:Jost,sans-serif;font-size:11px;letter-spacing:.24em}
.pj-filters button{cursor:pointer;padding:10px 20px;border-radius:2px;background:transparent;color:rgba(238,243,242,.65);border:1px solid rgba(238,243,242,.25);font:inherit;letter-spacing:inherit}
.pj-filters button.active{background:#eef3f2;color:#050e12;border:1px solid #eef3f2}

.pj-section{position:relative;z-index:1;padding:20px 44px 120px;max-width:1400px;margin:0 auto;box-sizing:border-box}
.pj-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px 28px}
.pcard{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.pcard:hover{transform:translateY(-6px)}
.pj-grid.all-view .pcard.big{grid-column:span 2}
.pcard.hide{display:none}
.pcard .cardimg{position:relative;height:56vh;overflow:hidden;cursor:pointer}
.pcard .cardimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.pcard:hover .cardimg img{transform:scale(1.05)}
.pcard .pcue{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:8px;background:rgba(5,14,18,.72);backdrop-filter:blur(4px);border:1px solid rgba(143,208,207,.4);color:#8fd0cf;font-family:Jost,sans-serif;font-size:10px;letter-spacing:.28em;padding:9px 16px;border-radius:2px;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.pcard:hover .pcue{opacity:1;transform:translateY(0)}
.pcard .meta{display:flex;justify-content:space-between;align-items:baseline;padding:18px 2px 0;cursor:pointer}
.pcard .name{font-size:22px;font-weight:700}
.pcard .loc{font-size:14px;font-weight:300;color:rgba(238,243,242,.55);margin-top:4px}
.pcard .tag{font-family:Jost,sans-serif;font-size:11px;letter-spacing:.28em;color:#8fd0cf}

.pj-modal{position:fixed;inset:0;z-index:100;background:rgba(3,9,12,.82);backdrop-filter:blur(10px);overflow-y:auto;display:none}
.pj-modal.open{display:block}
.pj-modal .box{max-width:1060px;margin:7vh auto 7vh;background:#081820;border:1px solid rgba(238,243,242,.16);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.pj-modal .head{display:flex;justify-content:space-between;align-items:flex-start;padding:44px 48px 0;gap:24px}
.pj-modal .tag{font-family:Jost,sans-serif;font-size:11px;letter-spacing:.34em;color:#8fd0cf;margin:0 0 14px}
.pj-modal .name{font-size:clamp(30px,3.4vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1;margin:0}
.pj-modal .close{background:transparent;border:1px solid rgba(238,243,242,.3);color:#eef3f2;width:44px;height:44px;border-radius:50%;font-size:18px;cursor:pointer;flex:none}
.pj-modal .close:hover{border-color:#8fd0cf;color:#8fd0cf}
.pj-detail{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(238,243,242,.12);border-bottom:1px solid rgba(238,243,242,.12);margin:36px 48px 0;padding:22px 0}
.pj-detail > div{padding-right:20px}
.pj-detail .lbl{font-family:Jost,sans-serif;font-size:10px;letter-spacing:.3em;color:rgba(238,243,242,.45);margin-bottom:8px}
.pj-detail .val{font-size:15px;font-weight:300}
.pj-modal .desc{font-size:16px;line-height:1.7;font-weight:300;color:rgba(238,243,242,.75);margin:26px 48px 0;text-wrap:pretty}
.pj-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:36px 48px 48px}
.pj-shots > div{position:relative;aspect-ratio:1;overflow:hidden}
.pj-shots img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1024px){.sitenav{padding:18px 28px}}
@media (max-width:760px){
  .pj-hero,.pj-section{padding-left:24px;padding-right:24px}
  .pj-grid{grid-template-columns:1fr;gap:36px}
  .pj-grid.all-view .pcard.big{grid-column:auto}
  .pj-detail{grid-template-columns:1fr 1fr;gap:20px 24px}
  .pj-shots{grid-template-columns:1fr 1fr}
  .pcard .cardimg{height:52vh}
}