/* Reading rhythm: the paper folio keeps its expressive headings and a generous,
   legible body size. Labels, dates and captions remain outside the prose style. */
:root{--copy-size:17.5px;--copy-leading:1.95;--section-space:68px}
body{font-size:var(--copy-size)}
main p.body-copy{
 font-size:var(--copy-size)!important;
 line-height:var(--copy-leading)!important;
 text-indent:2em;
 overflow-wrap:break-word;
 text-wrap:pretty;
}
main p.body-copy+p.body-copy{margin-top:14px!important}
main .overview-copy p.lead.body-copy{font-size:25px!important;line-height:1.8!important}
.chapter{padding-top:var(--section-space);padding-bottom:var(--section-space)}
:is(#history,#ritual,#city,#water,#heritage,#scale,#design,#collection){padding-top:var(--section-space);padding-bottom:var(--section-space)}
.chapter-heading{margin-bottom:35px}
:is(#history,#ritual,#city,#water,#heritage,#scale,#design,#collection) .chapter-heading{margin-bottom:38px}
.chapter .chapter-heading>p.body-copy{max-width:860px;margin-top:21px}
.subheading{margin-top:48px;margin-bottom:26px}
.chapter .eyebrow{font-size:12px;letter-spacing:.12em}
:is(#history,#ritual,#city,#water,#heritage,#scale,#design,#collection) .eyebrow{font-size:12px}
.chapter figcaption{font-size:13.5px;line-height:1.85}
:is(#history,#ritual,#city,#water,#heritage,#scale,#design,#collection) figcaption{font-size:13.5px}
.chapter figcaption p{font-size:15px;line-height:1.9}
.chapter :is(.history-date,.event-date){text-indent:0}

/* Supporting type on the opening spread reads at an ordinary viewing distance.
   The main title and the architectural illustration retain their composition. */
.masthead nav{font-size:14px;gap:36px}
.brand small{font-size:9px}
.hero-heading>.eyebrow{font-size:12px;letter-spacing:.14em}
.hero-heading .hero-poem{font-size:17px;line-height:2.05;margin-top:26px}
.enter{font-size:15px;gap:31px;margin-top:29px}
.enter i{width:52px;height:52px;font-size:27px}
.hero-baseline{font-size:13px;line-height:1.75;letter-spacing:.06em}

.hero-baseline>span:last-child{margin-left:auto}
.hero-baseline b{font-size:47px}
.cover{height:auto;min-height:100svh}
.cover .hero-heading{
 position:relative;left:auto;top:auto;
 width:max-content;max-width:100%;
 padding:clamp(112px,18svh,195px) var(--pad) 100px;
}
.hero-category{font:13px/1.8 var(--body);color:var(--muted);letter-spacing:.06em;margin-top:27px}

/* Long columns become readable paragraphs rather than small annotation blocks. */
.overview-layout{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:35px}
.overview-copy{max-width:620px}
.form-reading,.folio-notes,.legacy-notes,.comparison-notes,.contemporary-notes,.symbol-notes,.archaeology-notes{gap:27px 32px;margin-top:32px}
.form-reading>article,.folio-notes>article,.legacy-notes>article,.comparison-notes>article,.contemporary-notes>article,.symbol-notes>article,.archaeology-notes>article{padding-top:21px}
.layer-stories{gap:44px 40px}
.layer-text>p.body-copy{max-width:70ch}
.craft-notes{gap:29px}
.materials-grid{gap:30px}
.pattern-grid,.palette-grid{margin-top:43px}
.function-item{gap:14px}
.functions{gap:25px 29px}
.rites-grid{gap:0 29px}
.rite-step{padding-top:21px;padding-bottom:25px}
.city-node>small{font-size:15px;line-height:1.8;max-width:270px}
.city-node{min-height:137px;padding-top:24px;padding-bottom:23px}
.water-copy dd{font-size:17px;line-height:1.95}
.design-intro{gap:48px}
.design-intro>div>p{max-width:none}
.innovation-grid,.value-grid{gap:31px;margin-top:43px}
.applications{gap:12px 45px;margin-top:43px}
.applications li{font-size:17px;line-height:1.9}
.project-background{column-gap:35px;margin-top:33px}
.scale-figures>div p{font-size:15px}
.chart-key{font-size:12px}
.height-pair h4{font-size:17px}
.dimension-ledger>div{font-size:15px}
.proportion-row{font-size:15px}
.ritual-stats p{font-size:14px}
.finale-copy>p:last-of-type{font-size:17px;line-height:2}
.return-link{font-size:14px}
.finale-signature{font-size:12px}

/* Every historical episode uses the same measured image window. Containment
   preserves the whole building, including the widest restored gate drawing. */
#history .history-ribbon{column-gap:42px;row-gap:0;align-items:start}
#history .history-item{display:block;padding-top:25px;padding-bottom:31px}
#history .history-item>figure{
 display:grid;place-items:center;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);
 width:100%;height:clamp(235px,19vw,320px);
 padding:0 8px;margin:0 0 21px;
}
#history .history-item>figure>img{
 width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;
 object-fit:contain;object-position:center;
}
#history .history-item-copy .history-date{font-size:14px;line-height:1.8;letter-spacing:.035em;margin-bottom:8px}
#history .history-item-copy h3{font-size:27px;margin-bottom:13px}
#history .history-extras:not(:empty){gap:30px;padding-top:30px}
#history .history-event-list p{font-size:17px}
#history .history-features{margin-top:33px;gap:28px}
#history .event-chronicle{gap:25px}
#history .event-chronicle .event-date{font-size:13px}

/* A shared image line, heading line and text measure bind the four city nodes.
   These are independent pictures, with no overlay or forced image cropping. */
#city .city-node-details{grid-template-columns:repeat(4,minmax(0,1fr));gap:29px;margin-top:32px;align-items:start}
#city .city-node-details>article{display:block;border-left:0;border-top:1px solid var(--line);padding:23px 0 0;min-width:0}
#city .city-node-details>article>img{
 display:block;width:100%;height:235px;max-width:100%;max-height:none;
 margin:0 0 20px;object-fit:contain;object-position:center;
}
#city .city-node-details h3{font-size:27px;margin-bottom:14px;line-height:1.5}
#city .city-node-details p{grid-column:auto}

@media(min-width:1600px){
 :root{--copy-size:18px;--section-space:72px}
 .hero-heading .hero-poem{font-size:18px}
 .enter{font-size:16px}
 
 #city .city-node-details>article>img{height:270px}
 .chapter-heading>p.body-copy{max-width:920px}
}
@media(max-width:1200px){
 #city .city-node-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:29px 35px}
 #city .city-node-details>article>img{height:250px}
 .event-chronicle{grid-template-columns:repeat(3,minmax(0,1fr))}
 .city-node>small{font-size:14px}
 .design-intro{gap:35px}
}
@media(max-width:1000px){
 :root{--copy-size:16.5px;--section-space:58px}
 .masthead nav{font-size:13px;gap:28px}
 .hero-heading .hero-poem{font-size:16px}
 .enter{font-size:14px}
 .hero-baseline{font-size:12px}
 
 .overview-layout{grid-template-columns:1fr;gap:23px}
 .overview-copy{max-width:760px}
 main .overview-copy p.lead.body-copy{font-size:24px!important}
 .history-features{grid-template-columns:repeat(2,minmax(0,1fr))}
 #history .history-item-copy h3{font-size:26px}
 .water-copy dd,.applications li{font-size:16.5px}
 .anatomy-heading>p.body-copy{font-size:15px!important;line-height:1.85!important}
}
@media(min-width:601px) and (max-width:1000px){
 .hero-heading{top:130px}
 .hero-art{bottom:3%;width:110%;right:-19%}
}
@media(max-width:820px){
 #history .history-ribbon{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
 #history .history-item>figure{height:220px;padding-inline:0}
 #history .history-item-copy h3{font-size:25px}
 #history .history-item-copy .history-date{font-size:13px}
 #city .city-node-details>article>img{height:235px}
 #city .city-node-details h3{font-size:25px}
 .ritual-stats p{font-size:13px}
 .rites-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 23px}
 .chapter figcaption{font-size:13px}
 .chapter figcaption p{font-size:14px}
}
@media(max-width:600px){
 :root{--copy-size:15.5px;--copy-leading:1.95;--section-space:49px}
 .cover .hero-heading{
  padding-top:max(112px,16svh);padding-bottom:110px;
  display:grid;grid-template-columns:max-content 1fr;column-gap:18px;
 }
 .hero-heading>:is(.eyebrow,h1,.hero-poem){grid-column:1/-1}
 .hero-heading .enter{grid-column:1}
 .hero-heading .hero-category{grid-column:2;align-self:center;margin-top:23px;font-size:10px;letter-spacing:0;white-space:nowrap}
 .chapter .chapter-heading>p.body-copy{margin-top:19px}
 :is(#history,#ritual,#city,#water,#heritage,#scale,#design,#collection) .chapter-heading{margin-bottom:29px}
 .chapter .eyebrow,:is(#history,#ritual,#city,#water,#heritage,#scale,#design,#collection) .eyebrow{font-size:10px;letter-spacing:.08em}
 .masthead nav{font-size:11px;gap:17px}
 .brand small{font-size:6px}
 .hero-heading>.eyebrow{font-size:10px}
 .hero-heading .hero-poem{font-size:14px;line-height:2;margin-top:20px}
 .enter{font-size:13px;gap:22px;margin-top:23px}
 .enter i{width:42px;height:42px;font-size:23px}
 .hero-baseline{font-size:10px;line-height:1.8;right:calc(var(--pad) + 54px);bottom:3.5%}
 
 .hero-baseline>span:last-child{margin-left:auto;white-space:nowrap}
 .hero-baseline b{font-size:31px;margin-right:7px}
 
 .hero-baseline>span:last-child{font-size:9px}
 main .overview-copy p.lead.body-copy{font-size:22px!important}
 .overview-layout{gap:20px}
 .anatomy-heading>p.body-copy{font-size:14px!important;line-height:1.85!important}
 .craft-notes{gap:19px}
 .layer-stories{gap:34px}
 .form-reading,.folio-notes,.legacy-notes,.comparison-notes,.contemporary-notes,.symbol-notes,.archaeology-notes{gap:24px;margin-top:28px}
 .functions{gap:23px 22px}
 .rites-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 23px}
 .function-item h3{font-size:23px}
 .rite-step h3{font-size:22px}
 .water-copy dd,.applications li{font-size:15.5px}
 .city-node>small{font-size:13px}
 .innovation-grid,.value-grid{margin-top:34px}
 .applications{margin-top:34px}
 .chapter figcaption,:is(#history,#ritual,#city,#water,#heritage,#scale,#design,#collection) figcaption{font-size:12.5px}
 .chapter figcaption p{font-size:14px;line-height:1.9}
 .scale-figures>div p,.ritual-stats p{font-size:12px}
 .dimension-ledger>div,.proportion-row{font-size:14px}
 .chart-key{font-size:11px}
 .height-pair h4{font-size:15px}
 .finale-copy>p:last-of-type{font-size:15px}
 .return-link{font-size:13px}
 .finale-signature{font-size:10px;padding-right:45px;padding-left:20px}
 #history .history-ribbon{grid-template-columns:1fr}
 #history .history-item{padding-top:23px;padding-bottom:27px}
 #history .history-item>figure{height:220px;margin-bottom:19px}
 #history .history-item-copy h3{font-size:26px}
 #history .history-item-copy .history-date{font-size:13px}
 #history .history-features{grid-template-columns:1fr;gap:24px}
 #history .event-chronicle{grid-template-columns:1fr;gap:23px}
 #history .history-event-list{grid-template-columns:1fr;gap:23px}
 #history .event-chronicle .event-date{font-size:12px}
 #city .city-node-details{grid-template-columns:1fr;gap:27px;margin-top:27px}
 #city .city-node-details>article{display:block;padding-top:21px}
 #city .city-node-details>article>img{width:100%;height:225px;max-height:none;margin-bottom:18px;object-fit:contain}
 #city .city-node-details h3{font-size:26px;margin-bottom:12px}
}
@media(max-width:360px){
 :root{--copy-size:15px;--pad:20px}
 .masthead nav{gap:12px;font-size:10.5px}
 .hero-heading .hero-poem{font-size:13px}
 .hero-heading>.eyebrow{font-size:9px}
 .hero-baseline{right:calc(var(--pad) + 52px);gap:8px}
 
 .hero-baseline>span:last-child{font-size:7.5px;letter-spacing:0}
 .hero-baseline b{font-size:26px;margin-right:5px}
 #history .history-item>figure{height:190px}
 #city .city-node-details>article>img{height:205px}
 .chapter figcaption p{font-size:13.5px}
 .functions{grid-template-columns:1fr}
 .function-item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px}
 .function-seal{margin-bottom:0}
 .function-item h3{font-size:23px}
}
@media(max-height:700px) and (min-width:801px){
 .hero-heading .hero-poem{font-size:15px;line-height:1.85;margin-top:16px}
 .hero-heading>.eyebrow{font-size:11px}
 .enter{font-size:14px;margin-top:20px}
 .enter i{width:43px;height:43px;font-size:23px}
 .hero-baseline{font-size:11px}
 
 .hero-baseline b{font-size:36px}
}