/* Shared by both supporting pages. Values are taken from styles.css:
   .section: 6% gutters; >=1600px: max(6%, (100vw - 1450px)/2).
   Text spans the content area; .hero-art: 650px / mobile 480px.
   .characters: equal columns with 7% gap; mobile stack at 700px.
   Homepage assets are deliberately untouched. */
:root{--content-gutter:6%;--art-limit:650px;--paired-gap:7%}
header,main,footer{padding-inline:var(--content-gutter)}
article>p,article>h1,article>h2,article>details{max-width:none}
.opening-art{width:100%;max-width:var(--art-limit)}
.portrait{width:calc((100% - var(--paired-gap))/2);max-width:var(--art-limit)}
.photo-strip{column-gap:var(--paired-gap);row-gap:30px}
figure img{max-width:100%;height:auto}
@media(min-width:1600px){:root{--content-gutter:max(6%,calc((100vw - 1450px)/2))}}
@media(max-width:700px){
 :root{--art-limit:480px}
 .portrait{float:none;width:100%;margin:20px 0}
 .photo-strip{grid-template-columns:minmax(0,1fr)}
 .photo-strip figure{width:100%;max-width:var(--art-limit)}
}
@media print{header,main,footer{padding-inline:32px}.portrait{width:180px}}