/* project — ported from project.html */
/* Hero */
.pj-hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.pj-hero-media{position:absolute;inset:0;transform:scale(1.2)}
.pj-hero-media img{filter:brightness(.72)}
.pj-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,0) 35%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.85));z-index:1}
.pj-hero-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) clamp(28px,6vh,64px)}
.pj-hero .crumbs{color:rgba(255,255,255,.7);margin-bottom:26px}
.pj-hero .crumbs a:hover{color:var(--white)}
.pj-hero h1 .ch{transform:translateY(110%)}
.pj-hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:clamp(26px,5vh,50px);padding-top:22px;border-top:1px solid var(--line-d)}
.pj-chips{display:flex;gap:8px;flex-wrap:wrap}
.pj-chips span{padding:9px 14px;border:1px solid var(--line-d);border-radius:999px;font-size:12px;color:rgba(255,255,255,.85)}
.pj-count{color:rgba(255,255,255,.7)}
.pj-fade{opacity:0}

/* Intro */
.pj-intro{display:grid;grid-template-columns:1fr 2fr;gap:clamp(40px,7vw,120px);padding:clamp(100px,17vh,190px) var(--gutter)}
.pj-meta{border-top:1px solid var(--line);align-self:start}
.pj-meta div{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px}
.pj-meta dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:500}
.pj-meta dd{text-align:right}
.pj-lead{font-weight:300;font-size:clamp(28px,3.4vw,54px);line-height:1.16;letter-spacing:-.04em}
.pj-quote{margin-top:44px;display:flex;gap:18px;align-items:flex-start;max-width:560px}
.pj-quote[hidden]{display:none}
.pj-quote::before{content:"«";font-size:56px;line-height:.7;color:var(--olive);font-weight:300}
.pj-quote p{font-size:17px;line-height:1.7;color:var(--muted)}
.pj-quote small{display:block;margin-top:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--olive);font-weight:500}

/* Gallery */
.pj-gallery{padding:0 var(--gutter) clamp(100px,16vh,170px);display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px)}
.g-item{position:relative;overflow:hidden;cursor:zoom-in;background:var(--white);border:0;padding:0;display:block;transition:border-radius .9s var(--ease)}
.g-item img{position:absolute;inset:-6% 0;height:112%;transition:transform 1.4s var(--ease)}
.g-item:hover{border-radius:0 calc(var(--arch)*.7) 0 0}
.g-item:hover img{transform:scale(1.04)}
.g-item::after{content:"+";position:absolute;right:16px;bottom:16px;width:42px;height:42px;border-radius:50%;background:var(--sand);color:var(--ink);display:grid;place-items:center;font-size:20px;font-weight:300;opacity:0;transform:scale(.6);transition:opacity .5s,transform .6s var(--ease)}
.g-item:hover::after{opacity:1;transform:scale(1)}
/* Editorial rhythm: wide, pair, tall + square, repeat */
.g-item:nth-child(6n+1){grid-column:1/-1;aspect-ratio:21/9}
.g-item:nth-child(6n+2){grid-column:1/8;aspect-ratio:4/3}
.g-item:nth-child(6n+3){grid-column:8/13;aspect-ratio:4/5;margin-top:12vh}
.g-item:nth-child(6n+4){grid-column:2/7;aspect-ratio:4/5}
.g-item:nth-child(6n+5){grid-column:7/13;aspect-ratio:4/3;margin-top:-6vh}
.g-item:nth-child(6n+6){grid-column:3/11;aspect-ratio:16/9}
@media (max-width:760px){.pj-gallery{grid-template-columns:1fr 1fr}.g-item{grid-column:auto!important;margin-top:0!important;aspect-ratio:4/5!important}.g-item:nth-child(3n+1){grid-column:1/-1!important;aspect-ratio:4/3!important}}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:160;background:rgba(0,0,0,.96);color:var(--white);display:grid;grid-template-rows:auto 1fr auto;visibility:hidden;opacity:0;touch-action:pan-y}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:20px var(--gutter)}
.lb-top .eyebrow{color:var(--muted-d)}
.lb-stage{position:relative;overflow:hidden;display:grid;place-items:center;padding:0 var(--gutter)}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none}
.lb-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-d);background:none;color:var(--white);cursor:pointer;display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s}
.lb-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.lb-btn:hover{background:var(--sand);color:var(--ink);border-color:var(--sand)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.lb-prev{left:var(--gutter)}.lb-next{right:var(--gutter)}
.lb-thumbs{display:flex;gap:8px;justify-content:center;padding:18px var(--gutter) 24px;overflow-x:auto;scrollbar-width:none}
.lb-thumbs button{flex:none;width:64px;height:46px;padding:0;border:0;cursor:pointer;opacity:.4;overflow:hidden;transition:opacity .4s,outline-color .4s;outline:1.5px solid transparent;outline-offset:2px;background:#111}
.lb-thumbs button.on{opacity:1;outline-color:var(--sand)}
@media (max-width:760px){.lb-prev,.lb-next{display:none}.lb-stage{padding:0}}

/* CTA + next */
.pj-cta{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
.pj-cta .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.next{display:block;position:relative;overflow:hidden;height:clamp(420px,70vh,720px);color:var(--white)}
.next-img{position:absolute;inset:0;transform:scale(1.1);transition:transform 1.6s var(--ease)}
.next-img img{filter:brightness(.5)}
.next:hover .next-img{transform:scale(1.03)}
.next-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 var(--gutter);z-index:2}
.next-inner .eyebrow{color:var(--sand);margin-bottom:22px}
.next-inner .h-xl{font-size:clamp(46px,8vw,140px)}
.next-arrow{margin-top:34px;width:64px;height:64px;border-radius:50%;background:var(--sand);color:var(--ink);display:grid;place-items:center;transition:transform .7s var(--ease)}
.next-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.next:hover .next-arrow{transform:rotate(-45deg) scale(1.08)}
@media (max-width:860px){.pj-intro,.pj-cta{grid-template-columns:1fr}}