.portfolio-top{padding-bottom:46px}.portfolio-section{padding-top:25px}
.portfolio-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px}
.portfolio-toolbar .eyebrow{margin:0}.portfolio-toolbar p{font-size:10px;color:var(--muted);letter-spacing:.06em}
.portfolio-section .filter-bar{gap:9px;margin-bottom:40px}.portfolio-section .filter-bar button{font-size:11px;padding-inline:17px}
.project-collection,.project-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 30px}
.project-collection>[hidden]{display:none}.project-collection>.project-link:first-child,.project-collection.is-single>.project-link{grid-column:1/-1}
.project-collection>.project-link:first-child .project-image,.project-collection.is-single>.project-link .project-image{aspect-ratio:2.05}
.project-link .project-image{aspect-ratio:1.5}.project-link .project-caption{align-items:start}
.project-link .project-caption p{max-width:480px;line-height:1.8;letter-spacing:.08em}
.project-photo-count{font-size:23px;color:#b5bea9;line-height:1.4;white-space:nowrap;padding-top:2px}
.project-photo-count>span{font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.project-view{position:absolute;bottom:22px;right:22px;display:flex;align-items:center;gap:12px;border:1px solid #ffffff75;background:#111a15b8;color:#fff;padding:11px 16px;font-size:10px;backdrop-filter:blur(7px)}
.project-view svg{width:16px;height:16px}.project-link:hover img{transform:scale(1.025)}
.project-type-links{display:flex;flex-wrap:wrap;gap:10px 28px;padding-block:0 29px;font-size:12px;color:#bdc5b5}
.project-type-links a{border-bottom:1px solid #5b6552;padding-block:7px}.project-type-links a:hover{color:#fff}
.gallery-feature>.project-link .project-image{aspect-ratio:1.25}
.project-top h1{max-width:1000px}.project-introduction{display:grid;grid-template-columns:1.25fr 1fr;gap:90px;margin-top:34px;align-items:start}
.project-introduction>p{color:#b0baa7;font-size:15px;max-width:600px}.project-introduction ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 25px;color:#a6b39b;font-size:11px}
.project-introduction li{border-top:1px solid var(--line);padding-top:10px}
.project-photographs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:45px 30px;padding-bottom:35px}
.project-photographs>.photo-button:first-child{grid-column:1/-1}.project-photographs>.photo-button:first-child .project-image{aspect-ratio:1.85}
.project-photographs .project-image{aspect-ratio:1.45}.project-photographs .project-caption h3{font-size:23px}
.project-photographs .photo-button:only-child .project-image{aspect-ratio:1.6}
.project-related .project-image{aspect-ratio:1.6}.project-related .project-caption h3{font-size:25px}
.pool-project-section{background:var(--cream)}
.pool-project-collection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 30px}
.pool-project-collection>.project-link:first-child{grid-column:1/-1}
.pool-project-collection>.project-link:first-child .project-image{aspect-ratio:1.85}
@media(max-width:950px){.project-introduction{gap:35px}.project-collection,.project-related{gap:35px 23px}.project-view{bottom:15px;right:15px}}
@media(max-width:680px){
 .portfolio-top{padding-bottom:30px}.portfolio-section{padding-top:10px}.portfolio-toolbar{align-items:flex-start;gap:15px;margin-bottom:18px}.portfolio-toolbar .eyebrow{font-size:8px;max-width:110px}.portfolio-toolbar p{font-size:9px;text-align:right;max-width:155px}
 .portfolio-section .filter-bar{gap:8px;margin-bottom:28px}.portfolio-section .filter-bar button{font-size:10px;padding:10px 12px;min-height:42px}
 .project-collection,.project-related{grid-template-columns:minmax(0,1fr);gap:34px}
 .project-collection>.project-link:first-child .project-image,.project-collection.is-single>.project-link .project-image,.project-link .project-image,.gallery-feature>.project-link .project-image{aspect-ratio:1.25}
 .project-view{bottom:12px;right:12px;font-size:9px;padding:9px 12px}.project-photo-count{font-size:19px}.project-photo-count>span{display:block;font-size:7px;text-align:right;margin-top:2px}
 .project-link .project-caption h3{font-size:25px}.project-link .project-caption p{font-size:8px;letter-spacing:.05em}
 .project-type-links{gap:8px 22px;padding-bottom:24px;font-size:11px}
 .project-top h1{font-size:49px}.project-introduction{grid-template-columns:minmax(0,1fr);gap:23px;margin-top:25px}.project-introduction>p{font-size:13px}.project-introduction ul{font-size:10px;gap:12px 20px}
 .project-photographs{grid-template-columns:minmax(0,1fr);gap:30px;padding-bottom:0}.project-photographs>.photo-button:first-child .project-image,.project-photographs .project-image,.project-photographs .photo-button:only-child .project-image{aspect-ratio:1.3}.project-photographs .project-caption h3{font-size:23px}
 .project-related .project-image{aspect-ratio:1.35}
 .pool-project-collection{grid-template-columns:minmax(0,1fr);gap:34px}
 .pool-project-collection>.project-link:first-child .project-image{aspect-ratio:1.3}
}

/* Keep the complete cantilever roof in the featured project crop. */
.project-image img[src$="/cantilever-patio.svg"]{object-position:center top}

/* Project stories stay readable below photographs and in the enlarged viewer. */
.project-photographs .photo-button{align-self:start}
.project-photographs .project-caption{align-items:flex-start}
.project-photographs .photo-description{
 font-size:16px;line-height:1.7;letter-spacing:normal;text-transform:none;
 color:var(--text-secondary);max-width:70ch;margin-top:12px;
}
.project-photographs .project-caption>svg{flex-shrink:0;margin-top:3px}
.project-photographs .concise-caption .project-caption h3{
 font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.65;
 letter-spacing:normal;color:var(--text-secondary);max-width:70ch;
}
.lightbox-copy{min-width:0}
.lightbox img{max-width:100%}
.lightbox .photo-description{font-size:15px;line-height:1.65;letter-spacing:normal;margin-top:9px;color:var(--text-secondary)}
.lightbox.has-photo-description img{max-height:60svh}
.lightbox.has-photo-description .lightbox-caption{align-items:flex-start}
@media(max-width:680px){
 .lightbox.has-photo-description .lightbox-caption{flex-wrap:wrap}
 .lightbox.has-photo-description .lightbox-copy{flex-basis:100%}
 .lightbox.has-photo-description img{max-height:55svh}
}