*{box-sizing:border-box}
:root{--pf-bg:#090a0b;--pf-ink:#f4f3f0;--pf-mute:#a3a5a6;--pf-red:#d52d32}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pf-bg);color:var(--pf-ink);font-family:Inter,Arial,sans-serif}
.top,footer{padding:27px 6vw;display:flex;justify-content:space-between;gap:20px}
.top a,footer a{color:#ddd;text-decoration:none;font-size:11px;letter-spacing:.12em}
.top a:hover,footer a:hover,.next a:hover{color:var(--pf-red)}
a:focus-visible,button:focus-visible{outline:2px solid var(--pf-red);outline-offset:4px}
.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--pf-mute)}
.hero{max-width:1180px;margin:0 auto;padding:clamp(60px,9vw,110px) 6vw 30px}
.hero h1{font-size:clamp(40px,6.5vw,92px);line-height:.95;letter-spacing:-.06em;margin:26px 0 20px;overflow-wrap:anywhere;opacity:var(--t,1);transform:translateY(calc((1 - var(--t,1))*-20px))}
.hero p{color:var(--pf-mute);font-size:15px;margin:0}
.chapter{max-width:1180px;margin:0 auto;padding:clamp(50px,7vw,90px) 6vw 20px}
.chapter-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:34px}
.chapter h2{font-size:clamp(26px,3.6vw,48px);line-height:1;margin:0;letter-spacing:.14em;font-weight:800}
.chapter.after h2{color:var(--pf-red)}
.chapter-heading span{font-size:11px;color:var(--pf-mute);letter-spacing:.15em}
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px);align-items:start}
.photo-grid figure{margin:0;min-width:0}
.photo-grid figure:nth-child(3n+2){margin-top:clamp(30px,5vw,70px)}
.shot{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:zoom-in;overflow:hidden}
.shot img{display:block;width:100%;height:auto;filter:brightness(.55) saturate(.4) contrast(1.05);transition:filter .6s ease,transform .8s ease}
.shot:hover img,.shot:focus-visible img,.shot.is-lit img{filter:none;transform:scale(1.02)}
.shot-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 14px 12px;text-align:left;font-size:10px;letter-spacing:.16em;color:var(--pf-ink);background:linear-gradient(to top,rgba(9,10,11,.85),rgba(9,10,11,0));opacity:var(--t,1);transform:translateY(calc((1 - var(--t,1))*-20px));transition:opacity .4s ease}
.after .shot-cap b{color:var(--pf-red)}
.shot-cap b{font-weight:700;margin-right:8px}
.shot:hover .shot-cap,.shot:focus-visible .shot-cap,.shot.is-lit .shot-cap{opacity:1;transform:none}
.next{max-width:1180px;margin:0 auto;padding:clamp(70px,9vw,120px) 6vw}
.next a{font-size:clamp(26px,4.5vw,60px);font-weight:700;letter-spacing:-.04em;color:#fff;text-decoration:none}
footer{color:#777;font-size:11px;border-top:1px solid #222}
.loading{padding:20vh 6vw}
.lightbox{border:0;padding:0;background:rgba(9,10,11,.96);color:var(--pf-ink);width:100vw;height:100vh;max-width:none;max-height:none}
.lightbox::backdrop{background:rgba(9,10,11,.96)}
.lightbox[open]{display:grid;grid-template-rows:auto 1fr;grid-template-columns:auto 1fr auto;align-items:center}
.lb-bar{grid-column:1/-1;display:flex;justify-content:space-between;padding:18px 4vw;font-size:11px;letter-spacing:.15em;color:var(--pf-mute)}
.lb-img{grid-column:2;grid-row:2;max-width:100%;max-height:calc(100vh - 90px);width:auto;height:auto;margin:auto;object-fit:contain}
.lb-btn{background:none;border:0;color:var(--pf-ink);font:inherit;font-size:11px;letter-spacing:.15em;cursor:pointer;padding:14px}
.lb-btn:hover{color:var(--pf-red)}
.lb-prev{grid-column:1;grid-row:2}.lb-next{grid-column:3;grid-row:2}
@media(max-width:900px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-grid figure:nth-child(3n+2){margin-top:0}.photo-grid figure:nth-child(even){margin-top:clamp(28px,6vw,50px)}}
@media(max-width:480px){.photo-grid{gap:14px}.shot-cap{font-size:8px;padding:30px 8px 8px}.lb-btn{padding:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shot img,.shot-cap{transition:none}.shot:hover img,.shot:focus-visible img,.shot.is-lit img{transform:none}.shot-cap,.hero h1{opacity:1;transform:none}}

/* Editorial oversized phase typography behind the project photo grids */
.chapter{position:relative;isolation:isolate;max-width:1440px;padding-top:clamp(90px,12vw,190px);padding-bottom:clamp(75px,9vw,130px)}
.chapter::before{content:"BEFORE";position:absolute;z-index:-1;pointer-events:none;top:clamp(18px,4vw,65px);left:1vw;font-size:clamp(110px,19.5vw,330px);font-weight:800;letter-spacing:-.095em;line-height:.75;white-space:nowrap;color:#292a2c;user-select:none}
.chapter.after::before{content:"AFTER";color:#58191d;left:auto;right:3vw}
.chapter-heading{position:relative;z-index:1;margin-bottom:clamp(32px,5vw,70px)}
.chapter-heading h2{font-size:clamp(14px,1.4vw,20px);letter-spacing:.22em}
.chapter .photo-grid{position:relative;z-index:2}
.chapter .shot img{filter:none}
@media(max-width:900px){.chapter{padding-top:clamp(90px,17vw,150px)}.chapter::before{font-size:clamp(105px,21vw,210px);top:30px;left:0}.chapter.after::before{right:2vw}}
@media(max-width:480px){.chapter{padding-top:95px;padding-bottom:65px}.chapter::before{font-size:clamp(92px,22vw,135px);top:35px;left:0}.chapter-heading{margin-bottom:24px}}

/* Strong scroll-linked depth: photos move opposite to oversized typography */
@media(prefers-reduced-motion:no-preference){
.chapter::before{transform:translate3d(0,var(--type-parallax,0px),0)}
.photo-grid figure{transform:translate3d(0,var(--photo-parallax,0px),0);will-change:transform}
.shot img{transition:filter .45s ease,transform .6s ease}
}
@media(prefers-reduced-motion:reduce){.chapter::before,.photo-grid figure{transform:none!important;will-change:auto}}

/* Compact gallery ending, paired navigation, and a lighter charcoal footer. */
.chapter.after{padding-bottom:42px}
.project-pagination{max-width:1440px;margin:0 auto;padding:28px 6vw 48px;display:flex;justify-content:space-between;gap:24px}
.project-pagination .pf-action-button{min-width:240px;justify-content:space-between!important;text-align:left!important}
.project-pagination .project-nav-copy{display:flex;flex-direction:column;gap:5px;color:#f4f3ef!important;font-size:12px!important;line-height:1.4!important}
.project-nav-copy small{font-size:10px;color:#a3a5a6;font-weight:400}
.project-nav-copy strong{font-size:12px;font-weight:500}
body:has(#project-main) .pf-global-footer{background:#151719;padding-top:42px}
body:has(#project-main) .pf-footer-top{padding-bottom:28px}
body:has(#project-main) .pf-footer-top h2{font-size:clamp(38px,4.2vw,62px)}
body:has(#project-main) .pf-footer-grid{padding:26px 0 24px;gap:24px}
body:has(#project-main) .pf-footer-grid p{margin:12px 0}
@media(max-width:560px){
 .project-pagination{padding-top:20px;padding-bottom:32px;flex-direction:column;gap:12px}
 .project-pagination .pf-action-button{width:100%!important;min-width:0}
 body:has(#project-main) .pf-global-footer{padding-top:34px}
 body:has(#project-main) .pf-footer-grid{gap:16px}
}

.after .shot-cap b{color:#ff7379}

/* Keep photo labels below the image, with no dark scroll-linked layer. */
.shot-cap{position:static;display:block;background:none;padding:10px 0 0;opacity:1;transform:none;transition:none}
.shot:hover .shot-cap,.shot:focus-visible .shot-cap,.shot.is-lit .shot-cap{transform:none}
@media(max-width:900px){.photo-grid figure{transform:none!important;will-change:auto}}

/* Readable red for the small AFTER section label. */
.chapter.after .chapter-heading h2{color:#f05b60}