/* Compact architecture contact sheets; full-size images remain in the viewer. */
.project-reader .project-image-button{background:transparent;border:0}
.project-references{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;padding:32px 0;margin-top:24px;border-top:1px solid var(--line)}
.project-references h2{font-size:18px;font-weight:500;margin:0}
.project-references ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.project-references a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:4px}
.project-references a>span{margin-left:10px}
.project-references small{display:block;margin-top:7px;font-size:11px;color:var(--muted)}
.architecture-reader .project-article{max-width:1240px;margin:0 auto}
.architecture-reader .project-intro{padding:52px 0 40px;gap:64px}
.architecture-reader .project-intro h1{font-size:clamp(38px,4.4vw,64px)}
.architecture-reader .project-english{font-size:clamp(19px,2vw,28px)}
.architecture-reader .project-summary{font-size:18px;line-height:1.75}
.architecture-reader #project-hero{max-width:960px;margin:0 auto}
.architecture-reader .project-hero .project-image-button{height:auto;border:0;background:transparent;display:block}
.architecture-reader .project-hero img{width:auto;height:auto;max-width:100%;max-height:460px;object-fit:contain;border-radius:10px}
.architecture-reader .project-overview{padding:48px 0}
.architecture-reader .project-chapter{padding:40px 0}
.architecture-reader .chapter-heading{gap:48px;margin-bottom:26px;align-items:start}
.architecture-reader .project-overview h2,.architecture-reader .chapter-heading h2{font-size:26px;margin-top:10px}
.architecture-reader .project-overview>p,.architecture-reader .chapter-heading>p{font-size:14px;line-height:1.9}
.architecture-reader .chapter-figures{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;padding:0;border:0}
.architecture-reader .chapter-figures[data-frame-count="1"]{grid-template-columns:minmax(0,1fr);max-width:580px}
.architecture-reader .chapter-figures[data-frame-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.architecture-reader .chapter-figures[data-frame-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.architecture-reader .chapter-figures .project-figure.wide{grid-column:auto}
.architecture-reader .chapter-figures .project-image-button{display:block;aspect-ratio:auto;height:auto;max-height:none;border:0;border-radius:8px;background:transparent}
.architecture-reader .chapter-figures img{position:static;width:auto;height:auto;max-width:100%;max-height:320px;object-fit:contain;border-radius:8px}
.architecture-reader .project-figure figcaption{padding-top:12px;font-size:11px;gap:12px}
.architecture-reader .figure-expand{width:27px;height:27px;right:10px;bottom:10px;font-size:18px;border:1px solid var(--line)}
@media(max-width:1100px){
 .architecture-reader .chapter-figures{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
 .architecture-reader .project-intro{gap:40px}
}
@media(max-width:800px){
 .architecture-reader .chapter-figures,.architecture-reader .chapter-figures[data-frame-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
 .architecture-reader .chapter-heading{gap:24px}
}
@media(max-width:700px){
 .project-references{grid-template-columns:1fr;gap:18px;padding:24px 0}
 .architecture-reader .project-intro{padding:36px 0 28px;gap:28px}
 .architecture-reader .project-intro h1{font-size:40px}
 .architecture-reader .project-summary{font-size:17px}
 .architecture-reader .project-hero .project-image-button{height:auto;aspect-ratio:auto}
 .architecture-reader .project-overview{padding:34px 0}
 .architecture-reader .project-chapter{padding:30px 0}
 .architecture-reader .chapter-heading{gap:16px;margin-bottom:22px}
 .architecture-reader .project-overview h2,.architecture-reader .chapter-heading h2{font-size:24px}
 .architecture-reader .chapter-figures{gap:24px 16px}
}
@media(max-width:520px){
 .architecture-reader .chapter-figures,.architecture-reader .chapter-figures[data-frame-count]{grid-template-columns:minmax(0,1fr);max-width:none}
 .architecture-reader .chapter-figures .project-image-button{height:auto}
 .architecture-reader .chapter-figures img{max-height:320px}
}
.architecture-reader .chapter-figures .project-figure.panorama{grid-column:1/-1}
.architecture-reader .project-hero img{max-height:min(72vh,680px)}
.architecture-reader .chapter-figures[data-frame-count="1"]{display:flex;justify-content:center;max-width:none!important;margin-left:auto;margin-right:auto}
.architecture-reader .chapter-figures[data-frame-count="1"] .project-figure{flex:0 1 1000px;width:100%!important;max-width:1000px!important}
.architecture-reader .chapter-figures[data-frame-count="1"] img{max-height:min(72vh,620px);margin:0 auto}
.architecture-reader .chapter-figures[data-frame-count="3"]:has(.panorama){grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;max-width:none}
.architecture-reader .chapter-figures[data-frame-count="3"]:has(.panorama) .project-figure:not(.panorama) img{max-height:min(62vh,580px);margin:0 auto}

.architecture-reader .chapter-figures+.chapter-figures{margin-top:36px}
.architecture-reader .chapter-figures.chapter-feature{max-width:none}
.architecture-reader .chapter-feature img{max-height:80vh;width:auto;max-width:100%}
.architecture-reader .chapter-inline .project-figure.panorama{grid-column:auto}
.architecture-reader .chapter-feature .project-figure{text-align:center}
.architecture-reader .chapter-feature img{margin:0 auto}
.architecture-reader .project-figure.figure-small{width:192px}
.architecture-reader .project-figure.figure-small img{max-height:160px}
#project-story[data-project="rural-academy"] #chapter-0 .chapter-figures{width:60%;max-width:none;margin:0 auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row}
#project-story[data-project="rural-academy"] #chapter-0 .project-figure[data-frame-index="4"]{grid-column:1/-1}
#project-story[data-project="rural-academy"] #chapter-0 .project-figure:is([data-frame-index="1"],[data-frame-index="2"]) .project-image-button{aspect-ratio:638/459;background:#0a0809;overflow:hidden;border-radius:8px}
#project-story[data-project="rural-academy"] #chapter-0 .project-figure:is([data-frame-index="1"],[data-frame-index="2"]) img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:center bottom;margin:0}
#project-story[data-project="rural-academy"] #chapter-0 .project-figure[data-frame-index="4"] img{width:100%;max-height:none;margin:0}
@media(max-width:900px){#project-story[data-project="rural-academy"] #chapter-0 .chapter-figures{width:100%}}
.architecture-reader .chapter-figures:has(.figure-small){max-width:none;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;column-gap:32px}
.architecture-reader .chapter-figures:has(.figure-small) .project-figure{grid-column:2;grid-row:1}
.architecture-reader .chapter-figures:has(.figure-small) .project-figure.figure-small{grid-column:1;justify-self:end}
.architecture-reader .chapter-figures:has(.figure-small) .project-figure:not(.figure-small) img{max-height:64vh}
.architecture-reader #project-hero:has(img[src*="group-light-atmospheres"]){max-width:none;width:100%}
.architecture-reader #project-hero:has(img[src*="group-light-atmospheres"]) :is(.project-image-button,img){border-radius:0}
.architecture-reader #project-hero img[src*="group-light-atmospheres"]{width:100%;max-height:none}
.architecture-reader .chapter-figures.chapter-inline{align-items:end}
#project-story[data-project="rural-academy"] #chapter-2 .project-figure.panorama img{width:100%;max-height:none;margin:0}
.architecture-reader .chapter-figures.chapter-inline{margin-inline:auto;max-width:1000px}
/* Captions sit centered directly beneath each image */
.architecture-reader .project-figure{display:flex;flex-direction:column;align-items:center}
.architecture-reader .project-figure .project-image-button{width:fit-content;max-width:100%}
.architecture-reader .project-figure figcaption{justify-content:center;gap:12px;text-align:center}
.architecture-reader #project-hero .project-image-button{width:100%}
/* Looping hero strip: shows `visible` tiles of a composite and scrolls continuously */
.architecture-reader .hero-marquee{container-type:inline-size;overflow:hidden;width:100%}
.architecture-reader .hero-marquee-track{display:flex;width:max-content;animation:hero-marquee 48s linear infinite}
.architecture-reader #project-hero .hero-marquee img{flex:none;width:calc(100cqw * var(--strip));max-width:none;max-height:none;height:auto;margin-right:calc(100cqw * var(--strip) * var(--gap));border-radius:0}
.architecture-reader .hero-marquee:hover .hero-marquee-track{animation-play-state:paused}
@keyframes hero-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.architecture-reader .hero-marquee-track{animation:none}}
.architecture-reader .project-hero img{width:100%;max-height:88vh;object-fit:contain;margin:0}
.architecture-reader #project-hero{max-width:none}
.architecture-reader .chapter-figures:not(:has(.project-figure:not(.panorama))){max-width:none;grid-template-columns:minmax(0,1fr)}
.architecture-reader .chapter-figures .project-figure.panorama img{width:100%;max-height:none;margin:0}
.architecture-reader .chapter-figures:has(.figure-small) .project-figure:not(.figure-small) img{height:64vh;width:auto}
.architecture-reader .project-figure.figure-small img{width:192px;height:auto}
.architecture-reader .chapter-inline .project-image-button{width:100%}
.architecture-reader .chapter-inline .project-figure img{margin-inline:auto}
#project-story[data-project="vessels-of-light"] .chapter-inline .project-figure:first-child img{width:70%;height:auto;max-height:none}
#project-story[data-project="green-city-living-room"] .chapter-figures:not(:has(.project-figure:not(.panorama))){width:min(100%,1000px);margin-left:auto;margin-right:auto}
.architecture-reader .chapter-feature .project-figure.panorama .project-image-button{width:100%}
.architecture-reader .chapter-feature .project-figure.panorama img{width:100%;max-height:none;height:auto}
.architecture-reader .chapter-feature .project-figure.panorama{max-width:none;width:100%}
.architecture-reader .chapter-figures.chapter-feature[data-frame-count="1"] .project-figure.panorama{flex-basis:100%;max-width:none!important}
/* Stack: first image on the left spanning two rows, the rest stacked on the right */
.architecture-reader .chapter-figures.chapter-stack{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;max-width:none}
.architecture-reader .chapter-stack .project-figure:first-child{grid-column:1;grid-row:1 / span 2}
.architecture-reader .chapter-stack .project-figure:not(:first-child){grid-column:2!important}
.architecture-reader .chapter-stack .project-figure:not(:first-child) .project-image-button{width:100%}
.architecture-reader .chapter-stack .project-figure:not(:first-child) img{width:100%;height:auto;max-height:none}
.architecture-reader .chapter-stack .project-figure:first-child .project-image-button{width:100%}
.architecture-reader .chapter-stack .project-figure:first-child img{width:100%;height:auto;max-height:none}
#project-story[data-project="urban-viewfinder"] #chapter-0 .chapter-figures{max-width:none;width:min(100%,1000px);margin-left:auto;margin-right:auto;grid-template-columns:minmax(0,1fr)}
#project-story[data-project="urban-viewfinder"] #chapter-0 .project-figure{grid-column:1/-1}
#project-story[data-project="urban-viewfinder"] #chapter-0 img{width:100%;max-height:none;margin:0}
#project-story[data-project="urban-viewfinder"] #chapter-0 .project-figure:not(.panorama) img{width:auto;max-width:100%;max-height:min(82vh,760px);margin:0 auto}
#project-story[data-project="urban-viewfinder"] #chapter-1 .chapter-figures{max-width:none;width:100%;margin-left:auto;margin-right:auto;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
#project-story[data-project="urban-viewfinder"] #chapter-1 img{width:100%;max-height:min(80vh,620px);object-fit:contain;margin:0 auto}
#project-story[data-project="urban-viewfinder"] #chapter-2 .chapter-figures{max-width:none;width:min(100%,1000px);margin-left:auto;margin-right:auto;grid-template-columns:minmax(0,1fr)}
#project-story[data-project="urban-viewfinder"] #chapter-2 .project-figure{grid-column:1/-1}
#project-story[data-project="urban-viewfinder"] #chapter-2 img{width:auto;max-width:100%;max-height:min(85vh,800px);margin:0 auto}
.architecture-reader .chapter-figures.chapter-stack{grid-template-columns:1.07fr 1fr;row-gap:8px}
.architecture-reader .chapter-stack .project-figure:nth-child(2) figcaption{display:none}
.architecture-reader .chapter-figures.chapter-stack[data-frame-count]{grid-template-columns:1.07fr 1fr}
.architecture-reader .chapter-feature .project-figure:not(.panorama) img{height:auto;max-height:80vh;width:auto;max-width:100%;object-fit:contain}
.architecture-reader .chapter-figures.chapter-feature[data-frame-count="1"] .project-figure:not(.panorama){max-width:none!important}
.architecture-reader .chapter-figures.chapter-feature .project-figure:not(.panorama) img{height:auto;max-height:85vh}
/* Fill: one row, column widths follow each image's aspect ratio so all share one height */
.architecture-reader .chapter-figures.chapter-fill{max-width:none;align-items:end;column-gap:16px}
.architecture-reader .chapter-fill .project-figure{grid-column:auto!important;max-width:none!important}
.architecture-reader .chapter-fill .project-image-button{width:100%}
.architecture-reader .chapter-fill .project-figure img{width:100%;height:auto;max-height:none}
.architecture-reader .chapter-figures.chapter-fill{align-items:start}
#project-story[data-project="literary-living-room"] .chapter-figures{margin-left:auto;margin-right:auto}
#project-story[data-project="literary-living-room"] .chapter-figures .project-figure{justify-self:center;text-align:center}
#project-story[data-project="library-bar"] #chapter-1 .chapter-figures{display:flex;justify-content:center;align-items:flex-start;gap:28px;max-width:none}
#project-story[data-project="library-bar"] #chapter-1 .project-figure{flex:0 1 auto;text-align:center}
#project-story[data-project="library-bar"] #chapter-1 .project-image-button{background:transparent}
#project-story[data-project="library-bar"] #chapter-1 img{height:min(40vw,440px);max-height:none;width:auto;max-width:100%}
@media(max-width:900px){#project-story[data-project="library-bar"] #chapter-1 .chapter-figures{flex-direction:column;align-items:center}#project-story[data-project="library-bar"] #chapter-1 img{height:auto}}
#project-story[data-project="rural-academy"] #chapter-2 .chapter-figures.chapter-fill{width:70%;margin-inline:auto}
@media(max-width:900px){#project-story[data-project="rural-academy"] #chapter-2 .chapter-figures.chapter-fill{width:100%}}
.architecture-reader:has(#project-story[data-project="practice-archive"]) #project-hero{max-width:760px;margin-left:auto;margin-right:auto}
.architecture-reader:has(#project-story[data-project="practice-archive"]) .project-hero img{max-height:min(46vh,420px);width:auto;max-width:100%;margin:0 auto}

.chapter-subtitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:10px 0 0;font-size:13px;color:#666}
.chapter-subtitle span:first-child{color:var(--accent,#b32973);font-size:12px;letter-spacing:.06em;margin-right:4px}
.chapter-subtitle i{font-style:normal;color:#bbb}
/* Practice selection collage: two projects per row, shown at full reading width */
#project-story[data-project="practice-archive"] .project-figure:has(img[src*="group-practice-selected"]) .project-image-button{width:100%}
#project-story[data-project="practice-archive"] img[src*="group-practice-selected"]{width:100%;height:auto;max-height:none}
.architecture-reader:has(#project-story[data-project="practice-archive"]) :is(img,.project-image-button,.project-figure){border-radius:0!important}
/* Practice archive: a single image in a mosaic row spans the same width as the paired rows below it */
#project-story[data-project="practice-archive"] .mosaic-row>.project-figure:only-child{flex-basis:100%;max-width:none!important;width:100%!important}
#project-story[data-project="practice-archive"] .mosaic-row>.project-figure:only-child :is(.project-image-button,img){width:100%;height:auto;max-height:none}

.chapter-mosaic{display:flex;align-items:stretch;gap:16px;margin:0 0 16px}
.chapter-mosaic .project-figure{margin:0;min-width:0}
.chapter-mosaic figcaption{display:none}
.chapter-mosaic .project-image-button{display:block;width:100%;height:100%;padding:0}
.chapter-mosaic .project-figure img{width:100%;height:100%;max-height:none;max-width:none;object-fit:cover;margin:0;display:block}
.mosaic-lead-wrap{display:flex;min-width:0}
.mosaic-lead-wrap .project-figure{flex:1;display:flex}
.mosaic-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.mosaic-side-row{display:flex;gap:16px;flex:1;min-height:0}
.mosaic-side-row .project-image-button{aspect-ratio:var(--ar);height:auto}
.chapter-mosaic+.mosaic-row{margin-top:0;margin-bottom:30px}
.project-chapter>.chapter-mosaic:last-child{margin-bottom:30px}
@media(max-width:900px){.chapter-mosaic,.mosaic-side{flex-direction:column}.chapter-mosaic>*{flex:none!important}}
.project-article:has(#project-story[data-project="bridge-photogrammetry"]) #project-hero .project-figure,#project-story[data-project="bridge-photogrammetry"] #chapter-1 .project-figure{width:70%!important;max-width:70%!important;flex-basis:70%!important;margin-inline:auto!important}
@media(max-width:900px){.project-article:has(#project-story[data-project="bridge-photogrammetry"]) #project-hero .project-figure,#project-story[data-project="bridge-photogrammetry"] #chapter-1 .project-figure{width:100%!important;max-width:100%!important;flex-basis:100%!important}}
#project-story img[src*="bridge-workflow"]{max-height:min(46vh,380px)!important;width:auto!important;max-width:100%;margin:0 auto}
#project-story[data-project="vaarlens"] .project-chapter:has(.project-figure[data-frame-index="4"]) .chapter-figures{width:60%;max-width:none;margin-left:auto;margin-right:auto}
#project-story[data-project="vaarlens"] .project-chapter:has(.project-figure[data-frame-index="9"]) .chapter-figures{width:60%;max-width:none;margin-left:auto;margin-right:auto}
#project-story[data-project="vaarlens"] .project-figure[data-frame-index="11"] img{max-height:min(44vh,360px)!important;width:auto!important;max-width:100%;margin:0 auto}
#project-story[data-project="city-color-map"] .project-figure[data-frame-index="1"] img{max-height:min(42vh,320px)!important;width:auto!important;max-width:100%;margin:0 auto}
#project-story[data-project="city-color-map"] .project-chapter:has(.project-figure[data-frame-index="4"]) .chapter-figures{width:75%;max-width:none;margin-left:auto;margin-right:auto}
#project-story[data-project="city-color-map"] .project-figure[data-frame-index="7"] img{max-height:min(48vh,420px)!important;width:auto!important;max-width:100%;margin:0 auto}
#project-story[data-project="city-color-map"] .project-chapter:has(.project-figure[data-frame-index="11"]) .chapter-figures{width:75%;max-width:none;margin-left:auto;margin-right:auto}
.sus-chart{width:min(100%,860px);height:380px;margin:0 auto}
.project-figure:has(.sus-chart){width:100%}.project-image-button:has(.sus-chart){width:100%!important;align-self:stretch;flex:none;background:transparent!important;cursor:default}
.sus-chart{width:min(100%,860px)!important;display:block}
.figure-expand{display:none!important}
#project-story[data-project="practice-archive"] .project-chapter:has(.project-figure[data-frame-index="61"]) .chapter-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px;max-width:1100px;margin-left:auto;margin-right:auto;align-items:start}
#project-story[data-project="practice-archive"] .project-chapter:has(.project-figure[data-frame-index="61"]) .chapter-figures+.chapter-figures{margin-top:40px}
#project-story[data-project="practice-archive"] .project-chapter:has(.project-figure[data-frame-index="61"]) .project-image-button{width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:transparent}
#project-story[data-project="practice-archive"] .project-chapter:has(.project-figure[data-frame-index="61"]) img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover;border-radius:8px}
#project-story[data-project="practice-archive"] .project-chapter:has(.project-figure[data-frame-index="61"]) figcaption{text-align:left;margin-top:12px}
@media(max-width:700px){#project-story[data-project="practice-archive"] .project-chapter:has(.project-figure[data-frame-index="61"]) .chapter-figures{grid-template-columns:1fr}}
/* Phones: image rows sized by aspect ratio collapse to one image per line, so nothing is squeezed to a sliver */
@media(max-width:700px){
 .architecture-reader .chapter-figures:is(.chapter-fill,.mosaic-row,.chapter-inline){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:22px}
 .architecture-reader .chapter-figures:has(.figure-small){display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center}
 .architecture-reader .chapter-figures:has(.figure-small) .project-figure{grid-column:auto!important;grid-row:auto!important;width:100%}
 .architecture-reader .chapter-figures:is(.chapter-fill,.mosaic-row,.chapter-inline) .project-figure{width:100%!important;max-width:none!important;grid-column:auto!important}
 .architecture-reader .chapter-figures:is(.chapter-fill,.mosaic-row,.chapter-inline) .project-figure img{width:100%!important;height:auto!important;max-height:none!important}
 .architecture-reader .project-figure.figure-small img{width:min(192px,60%)!important}
 .architecture-reader .project-figure figcaption{flex-wrap:wrap;gap:4px 12px}
}
/* Tablets: the side-by-side small diagram row does not fit next to its partner image */
@media(max-width:1000px){
 .architecture-reader .chapter-figures:has(.figure-small){display:grid!important;grid-template-columns:minmax(0,1fr)!important;justify-items:center}
 .architecture-reader .chapter-figures:has(.figure-small) .project-figure{grid-column:auto!important;grid-row:auto!important;width:100%}
}
@media(max-width:700px){#catalog-content .gallery-heading{display:none}#catalog-content.catalog-content{grid-template-rows:minmax(0,1fr) 46px!important}}