/* Shared editorial system for individual projects only. */
[data-page=project-story] main{background:var(--color-ivory);color:var(--color-espresso);--story-space:clamp(40px,5vw,72px)}
[data-page=project-story] .page-title{padding:clamp(48px,5.5vw,80px) var(--page-gutter) 32px}
[data-page=project-story] .page-title h1{font-size:clamp(36px,4.5vw,64px);font-weight:400;line-height:1.12;margin-bottom:22px}
[data-page=project-story] .page-intro{font-size:18px;line-height:1.6;max-width:85ch;margin-bottom:0}
[data-page=project-story] .eyebrow{color:var(--color-espresso)}
.story-hero,.story-support,.story-details{margin:0 var(--page-gutter)}
.story-hero figure,.story-support figure,.story-details figure,.story-comparison figure{margin:0;min-width:0}
.story-hero img,.story-support img,.story-details img,.story-comparison img{display:block;width:100%;height:auto;object-fit:contain}
.story-hero img{max-height:800px;object-fit:contain}
.story-support{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:28px;align-items:center}
.story-support:has(figure:only-child){grid-template-columns:1fr;max-width:760px;margin-left:auto;margin-right:auto;padding-inline:var(--page-gutter)}
.story-narrative{max-width:850px;margin:0 auto;padding:var(--story-space) 32px}
.story-narrative h2{font:400 12px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.14em;margin:0 0 18px;color:var(--color-espresso)}
.story-narrative p{font-size:16px;line-height:1.8;max-width:none;margin:0 0 20px}
.story-narrative>div+div{margin-top:32px}
.story-narrative p:last-child{margin-bottom:0}
.story-details{display:grid;grid-template-columns:.9fr 1.1fr;gap:7%;max-width:1000px;margin:0 auto var(--story-space);padding-inline:32px;align-items:center}
.story-details figure:last-child{padding-top:72px}
.story-transformation{background:var(--color-stone);padding:var(--story-space) var(--page-gutter)}
.story-transformation h2{font-size:clamp(28px,3vw,42px);margin:0 0 32px}
.story-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.story-comparison+.story-comparison{margin-top:36px}
.story-comparison img{aspect-ratio:4/3;object-fit:cover;object-position:center}
.story-comparison figcaption{font-size:12px;letter-spacing:.06em;padding-top:12px;color:var(--color-espresso)}
[data-page=project-story] nav.story-navigation{display:flex;position:static;background:var(--color-ivory);flex-direction:row;justify-content:space-between;align-items:center;gap:24px;margin:0 var(--page-gutter);padding:30px 0;border-top:1px solid var(--color-stone)}
.story-navigation .text-link{font-size:14px;border-color:var(--color-brass)}
@media(max-width:700px){
 [data-page=project-story] .page-title{padding-bottom:26px}
 [data-page=project-story] .page-intro{font-size:16px}
 .story-support,.story-comparison,.story-details{grid-template-columns:1fr;gap:24px}
 .story-support:has(figure:only-child){margin-inline:var(--page-gutter);padding:0}
 .story-narrative{padding:var(--story-space) var(--page-gutter)}
 .story-details{margin-inline:var(--page-gutter);padding:0}
 .story-details figure:last-child{padding:0}
 .story-details figure:first-child{max-width:80%;margin-inline:auto}
 [data-page=project-story] nav.story-navigation{padding-block:26px;gap:16px}
}
.story-hero img{max-height:none;aspect-ratio:3/2;object-fit:cover;object-position:center bottom}
@media(max-width:700px){.story-hero img{aspect-ratio:4/3;object-fit:contain}}

/* Quiet Modern hero: remove ceiling fixture with a lower, restrained crop. */
[data-project=quiet-modern] .story-hero figure{position:relative;aspect-ratio:3/2;overflow:hidden}
[data-project=quiet-modern] .story-hero img{position:absolute;bottom:0;left:-3%;width:106%;height:106%;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:center bottom}

/* Quiet Modern comparisons: crop excess ceiling from the selected views. */
[data-project=quiet-modern] .story-comparison:first-of-type figure,
[data-project=quiet-modern] .story-comparison:nth-of-type(2) figure:first-child{position:relative;overflow:hidden}
[data-project=quiet-modern] .story-comparison:first-of-type figure img,
[data-project=quiet-modern] .story-comparison:nth-of-type(2) figure:first-child img{aspect-ratio:3/2;object-fit:cover;object-position:center bottom}
[data-project=quiet-modern] .comparison-crop{position:relative;aspect-ratio:4/3;overflow:hidden}
[data-project=quiet-modern] .story-comparison .comparison-crop img{position:absolute;bottom:0;left:-8%;width:116%;height:128%;aspect-ratio:auto;object-fit:cover;object-position:center bottom}

/* Slightly more breathing room above the first After photograph. */
[data-project=quiet-modern] .story-comparison:first-of-type figure:nth-child(2) .comparison-crop img{left:-4%;width:108%;height:125%}

/* Final shared project typography and restrained editorial spacing. */
[data-page=project-story] .page-title h1{font-size:clamp(34px,3.62vw,52px)}
[data-page=project-story] .page-title .eyebrow{font-size:12px}
[data-page=project-story] .page-intro{font-size:18px}
.story-transformation h2{font-size:clamp(28px,2.8vw,40px)}
.story-details figure:last-child{padding-top:48px}
.story-narrative{padding-top:clamp(36px,4.4vw,64px);padding-bottom:clamp(36px,4.4vw,64px)}
.story-details{margin-bottom:clamp(36px,4.4vw,64px)}
@media(max-width:700px){.story-details figure:last-child{padding-top:0}}

/* Slightly more prominent project narrative headings. */
.story-narrative h2{font-size:15px}

/* Five percent smaller project narrative headings. */
body[data-page] #main .story-narrative h2{font-size:calc(var(--type-h2) * .623295)!important}

/* Five percent smaller individual project titles. */
body[data-page=project-story] #main .page-title h1{font-size:calc(var(--type-page-h1) * .9025)!important}