/* Dedicated portfolio composition; project photography remains unmodified. */
[data-page=projects] main{background:var(--color-ivory);color:var(--color-espresso)}
[data-page=projects] .page-title{padding-top:clamp(48px,5.5vw,80px);padding-bottom:36px}
[data-page=projects] .page-title h1{font-size:clamp(34px,3.62vw,52px);font-weight:400;line-height:1.15;margin-bottom:0;max-width:1100px}
[data-page=projects] .portfolio-projects{padding-top:12px;padding-bottom:clamp(48px,6vw,88px)}
[data-page=projects] .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px}
[data-page=projects] .project-card{margin:0}
[data-page=projects] .project-card:first-child{grid-column:1/-1}
[data-page=projects] .portfolio-projects .project-card img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border:0;transform:none;opacity:1;transition:none}
[data-page=projects] .project-card>a{overflow:visible;text-decoration:none}
[data-page=projects] .project-card .project-meta{display:block;font-size:11px;letter-spacing:.12em;line-height:1.5;color:var(--color-walnut,#765B46);margin:20px 0 10px}
[data-page=projects] .project-card h3{font-size:clamp(24px,2.2vw,32px);line-height:1.25;font-weight:400;margin:0 0 12px;color:var(--color-espresso);transition:color .18s ease}
[data-page=projects] .project-card .project-description{display:block;font-size:15px;line-height:1.7;max-width:56ch;margin:0;color:#40372F}
[data-page=projects] .portfolio-projects .project-card>a:hover img,[data-page=projects] .portfolio-projects .project-card>a:focus-visible img{opacity:1}
[data-page=projects] .project-card>a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--color-brass)}
[data-page=projects] .cta{padding-block:clamp(48px,5.6vw,90px)}
@media(max-width:700px){
 [data-page=projects] .project-grid{grid-template-columns:1fr;gap:40px}
 [data-page=projects] .project-card:first-child{grid-column:auto}
 [data-page=projects] .page-title{padding-bottom:28px}
}
@media(prefers-reduced-motion:reduce){[data-page=projects] .project-card h3{transition:none}}

/* Refined overview introduction and minimal project captions. */
[data-page=projects] .page-title h1{font-size:clamp(34px,4.5vw,68px);max-width:1000px;line-height:1.15}
[data-page=projects] .portfolio-intro{font-size:17px;line-height:1.7;color:#40372F;max-width:68ch;margin:24px 0 0}
[data-page=projects] .page-title{padding-bottom:28px}
[data-page=projects] .project-card h3{margin:18px 0 8px}
[data-page=projects] .project-card .project-meta{margin:0;font-size:12px;letter-spacing:.05em}
[data-page=projects] .project-card:first-child img{aspect-ratio:3/2;object-fit:cover;object-position:center}
[data-page=projects] .project-card:not(:first-child) img{aspect-ratio:4/3;object-fit:cover;object-position:center}
@media(max-width:700px){
 [data-page=projects] .page-title h1{font-size:clamp(32px,7vw,42px)}
 [data-page=projects] .portfolio-intro{font-size:16px}
 [data-page=projects] .project-card:first-child img{aspect-ratio:4/3}
}

/* Final portfolio hierarchy and concise invitation. */
[data-page=projects] .page-title h1{font-size:clamp(30px,3.95vw,59px);line-height:1.15;max-width:950px}
[data-page=projects] .page-title{padding-bottom:22px}
[data-page=projects] .portfolio-intro{margin-top:20px;max-width:62ch}
[data-page=projects] .project-grid{row-gap:48px}
[data-page=projects] .project-card:first-child img{aspect-ratio:3/2;object-position:center 60%}
[data-page=projects] .project-card .project-description{display:block;margin-top:12px;font-size:15px;line-height:1.65}
[data-page=projects] .cta{padding-block:clamp(40px,4.6vw,74px);gap:40px}
[data-page=projects] .cta h2{font-size:clamp(28px,3.3vw,46px);line-height:1.2;max-width:680px}
@media(max-width:700px){
 [data-page=projects] .page-title h1{font-size:clamp(29px,6.2vw,37px)}
 [data-page=projects] .project-grid{row-gap:36px}
 [data-page=projects] .project-card:first-child img{aspect-ratio:4/3}
 [data-page=projects] .cta{gap:24px}
}

/* Balanced pair followed by a restrained landscape feature. */
[data-page=projects] .project-card:first-child{grid-column:auto}
[data-page=projects] .project-card:last-child{grid-column:1/-1}
[data-page=projects] .project-card:first-child img,[data-page=projects] .project-card:nth-child(2) img{aspect-ratio:3/2;object-fit:cover;object-position:center 65%}
[data-page=projects] .project-card:last-child img{aspect-ratio:16/9;max-height:620px;object-fit:cover;object-position:center 63%}
[data-page=projects] .page-title{padding-bottom:16px}
[data-page=projects] .project-card>a:hover .project-description,[data-page=projects] .project-card>a:hover .project-meta{text-decoration:none}
[data-page=projects] .cta{padding-block:clamp(32px,3.5vw,56px);justify-content:flex-start;gap:clamp(32px,6vw,86px)}
[data-page=projects] .cta h2{max-width:720px}
@media(max-width:700px){
 [data-page=projects] .project-card:last-child{grid-column:auto}
 [data-page=projects] .project-card img,[data-page=projects] .project-card:first-child img,[data-page=projects] .project-card:last-child img{aspect-ratio:4/3;max-height:none;object-position:center 60%}
 [data-page=projects] .cta{gap:24px}
}

/* Final overview typography and editorial rhythm. */
[data-page=projects] .portfolio-intro{font-size:16px;max-width:none}
[data-page=projects] .project-grid{row-gap:44px}
[data-page=projects] .project-card h3{ text-decoration:none }
[data-page=projects] .project-card>a:hover h3,[data-page=projects] .project-card>a:focus-visible h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--color-brass)}
[data-page=projects] .cta{align-items:center}
[data-page=projects] .cta h2{font-size:clamp(25px,2.9vw,40px)}
@media(max-width:700px){
 [data-page=projects] .project-grid{row-gap:36px}
 [data-page=projects] .cta{align-items:flex-start}
}

/* Quiet Modern: lower the crop to remove the ceiling fixture. */
[data-page=projects] .project-card>a[href="/projects/quiet-modern/"] img{object-fit:cover;object-position:center bottom}
@media(max-width:700px){
 [data-page=projects] .quiet-thumbnail{position:relative;aspect-ratio:4/3;overflow:hidden}
 [data-page=projects] .project-card>a[href="/projects/quiet-modern/"] .quiet-thumbnail img{position:absolute;bottom:0;left:-5%;width:110%;height:110%;aspect-ratio:auto;object-fit:cover;object-position:center bottom}
}
@media(min-width:701px){
 [data-page=projects] .quiet-thumbnail{position:relative;aspect-ratio:3/2;overflow:hidden}
 [data-page=projects] .project-card>a[href="/projects/quiet-modern/"] .quiet-thumbnail img{position:absolute;bottom:0;left:-3%;width:106%;height:106%;aspect-ratio:auto;object-fit:cover;object-position:center bottom}
}

/* Ten percent reduction to the Projects overview headline. */
body[data-page=projects] #main .page-title h1{font-size:calc(var(--type-page-h1) * .81)!important}

/* Slightly tighter Projects introduction spacing. */
body[data-page=projects] #main .page-title{padding-top:clamp(43.2px,4.95vw,72px);padding-bottom:14px}

/* Minimal portfolio heading, matching Services and Process typography. */
body[data-page=projects] #main .page-title{padding-block:clamp(30.6px,3.4vw,47.6px)}
body[data-page=projects] #main .page-title h1{font-family:var(--sans);font-size:calc(var(--type-page-h1) * .9025)!important;font-weight:400!important;letter-spacing:.01em;line-height:1.12!important;margin:0}

/* A quiet heading band separates the portfolio introduction from the gallery. */
body[data-page=projects] #main .page-title{background:var(--color-ivory);padding-block:54px}
body[data-page=projects] #main .page-title::after{content:none}
body[data-page=projects] #main .portfolio-projects{padding-top:0}
@media(max-width:850px){
 body[data-page=projects] #main .page-title{padding-block:39.6px}
 body[data-page=projects] #main .portfolio-projects{padding-top:0}
}

/* Understated subtitle matching the Services introduction. */
body[data-page=projects] #main .page-title .page-intro{font-family:var(--sans);font-size:var(--type-body)!important;line-height:1.7;color:var(--color-espresso-brand);max-width:40ch;margin:22px 0 0}

/* Use the same heading-to-subtitle spacing as the Services hero. */
body[data-page=projects] #main .page-title h1{margin-bottom:14px}
body[data-page=projects] #main .page-title .page-intro{margin-top:0}

/* Compact, quiet portfolio heading band. */
body[data-page=projects] #main .page-title{background:#E5DDD3;padding-block:34.884px}
body[data-page=projects] #main .page-title h1{margin:0}
body[data-page=projects] #main .portfolio-projects{padding-top:38px}
@media(max-width:850px){
 body[data-page=projects] #main .page-title{padding-block:24.4188px}
 body[data-page=projects] #main .portfolio-projects{padding-top:30px}
}

/* Match the portfolio heading to the project title typography. */
body[data-page=projects] #main .page-title h1{font-family:var(--sans);font-size:calc(var(--type-h3) * 1.518)!important;font-weight:400!important;letter-spacing:.01em;line-height:1.25!important;color:var(--color-espresso)}
