.portfolio-detail{background:#fff;color:#243d34;font-family:Montserrat,sans-serif}
.portfolio-detail .header{padding:16px 5%;gap:24px;background:#fff}
.portfolio-detail .header .brand{font:500 29px/1.1 'Cormorant Garamond',serif;letter-spacing:-.025em}
.portfolio-detail .header .back-link{gap:12px;border:0;font-size:12px;text-transform:none;letter-spacing:0;max-width:none;white-space:nowrap}
.portfolio-detail .back-link svg{width:24px;height:24px;flex:0 0 24px}
.portfolio-detail .header-contact{font-size:12px;text-transform:none;letter-spacing:0}
.portfolio-intro{padding:60px 5% 54px;max-width:1680px;margin:auto}
.portfolio-intro h1{font:500 clamp(48px,6vw,88px)/1.05 'Cormorant Garamond',serif;letter-spacing:-.035em;margin:0 0 38px}
.portfolio-overview{display:grid;grid-template-columns:1.25fr 1fr;gap:8vw;align-items:start}
.portfolio-overview>p{font-size:15px;line-height:1.95;max-width:57ch;color:#5a6c62}
.project-notes{padding:25px 30px;background:#f0f3ef;border-radius:8px}
.project-notes h2{font:500 25px/1.2 'Cormorant Garamond',serif;letter-spacing:-.015em;margin:0 0 14px}
.project-notes ul{margin:0;padding-left:18px;font-size:12px;line-height:1.85;color:#53655b}
.project-notes li+li{margin-top:7px}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:0 5% 80px;max-width:1680px;margin:auto}
.photo-tile{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;background:#eef0ea;cursor:zoom-in;border-radius:3px}
.photo-tile:first-child{grid-column:1/-1}
.photo-tile img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover;transition:transform .35s ease}
.photo-tile:hover img{transform:scale(1.025)}
.photo-expand{position:absolute;bottom:16px;right:16px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fffef4ed;font-size:24px;box-shadow:0 2px 12px #0001}
.portfolio-detail .project-end{padding:70px 5%;margin:0;background:#f0f3ef;display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;align-items:center}
.portfolio-detail .project-end h2{font:500 clamp(40px,5vw,68px)/1.08 'Cormorant Garamond',serif;letter-spacing:-.035em}
.portfolio-detail .project-end p{font-size:13px;line-height:1.9;margin-bottom:24px}
.portfolio-detail .solid-button{font-size:12px;border-radius:3px}
.portfolio-related{padding:75px 5% 85px}
.related-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.related-heading h2{font:500 clamp(36px,4vw,52px)/1.1 'Cormorant Garamond',serif;letter-spacing:-.025em}
.related-heading a{font-size:12px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.related-project img{aspect-ratio:16/9;width:100%;object-fit:cover;border-radius:3px}
.related-project h3{font:500 28px/1.2 'Cormorant Garamond',serif;margin-top:15px}
.photo-open{overflow:hidden}
.project-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;border:0;padding:0;background:#142019;color:#fff;overflow:hidden}
.project-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.project-lightbox::backdrop{background:#142019}
.photo-dialog-top,.photo-dialog-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left))}
.photo-dialog-top{padding-top:max(16px,env(safe-area-inset-top))}
.photo-dialog-bottom{padding-bottom:max(16px,env(safe-area-inset-bottom))}
.photo-dialog-top>span{font:500 25px/1.1 'Cormorant Garamond',serif}
.project-lightbox button{border:0;background:transparent;color:inherit;min-height:44px;min-width:44px;font-size:14px}
.photo-dialog-top button{display:flex;gap:16px;align-items:center}
.photo-dialog-top button span{font-size:28px}
.photo-viewport{overflow:auto;overscroll-behavior:contain;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px max(4vw,env(safe-area-inset-right)) 8px max(4vw,env(safe-area-inset-left))}
#photo-zoom{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:0;padding:0;width:100%;height:100%;cursor:zoom-in}
#dialog-image{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.photo-viewport.is-zoomed{display:block}
.photo-viewport.is-zoomed #photo-zoom{width:calc(100% * var(--photo-zoom));height:calc(100% * var(--photo-zoom));cursor:zoom-out}
.photo-viewport.is-zoomed #dialog-image{width:100%;height:100%;object-fit:contain}
.photo-dialog-bottom{justify-content:center;gap:28px;font-size:12px}
.photo-dialog-bottom>button{font-size:24px}
.zoom-controls{display:flex;align-items:center;gap:12px;border-left:1px solid #ffffff35;padding-left:20px}
.zoom-controls button{font-size:24px}
.zoom-controls span{min-width:42px;text-align:center}
@media(max-width:650px){
 .portfolio-detail .header{grid-template-columns:1fr 1fr;gap:3px 10px;padding:12px 5%}
 .portfolio-detail .header .brand{grid-row:1;grid-column:1/-1;justify-self:center;font-size:26px}
 .portfolio-detail .header .back-link{grid-row:2;grid-column:1;font-size:11px;gap:6px;white-space:nowrap}
 .portfolio-detail .header-contact{grid-row:2;grid-column:2;font-size:11px;padding:8px 0}
 .portfolio-intro{padding:42px 5% 28px}
 .portfolio-intro h1{font-size:49px;margin-bottom:24px}
 .portfolio-overview{grid-template-columns:1fr;gap:24px}
 .portfolio-overview>p{font-size:13px;line-height:1.9}
 .project-notes{padding:22px 24px}
 .photo-grid{grid-template-columns:1fr;gap:12px;padding-bottom:42px}
 .photo-tile:first-child{grid-column:auto}
 .photo-expand{width:34px;height:34px;bottom:10px;right:10px;font-size:21px}
 .portfolio-detail .project-end{grid-template-columns:1fr;gap:26px;padding:45px 5%}
 .portfolio-related{padding:48px 5%}
 .related-heading{align-items:start;flex-direction:column;gap:8px}
 .related-grid{grid-template-columns:1fr;gap:28px}
 .photo-dialog-top,.photo-dialog-bottom{padding:12px max(15px,env(safe-area-inset-right)) 12px max(15px,env(safe-area-inset-left));gap:12px}
 .photo-dialog-top{padding-top:max(12px,env(safe-area-inset-top))}
 .photo-dialog-bottom{padding-bottom:max(12px,env(safe-area-inset-bottom))}
 .photo-dialog-bottom{flex-wrap:wrap;gap:10px}
 .zoom-controls{padding-left:10px;gap:4px}
 .photo-dialog-top>span{font-size:23px;max-width:65%}
 .photo-viewport{padding:4px env(safe-area-inset-right) 4px env(safe-area-inset-left)}
}
@media(prefers-reduced-motion:reduce){.photo-tile img{transition:none}.photo-tile:hover img{transform:none}}