/* Article reading layout: text follows the image width with a small inset. */
.article-reading-page { background: #fff; color: #171717; }
.reading-shell { width: min(100% - 48px, 1060px); margin: 46px auto 72px; }
.article-reading-page .article-detail { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.article-reading-page .article-detail-header { margin: 0 28px 30px; padding: 0; border: 0; }
.reading-kicker { font: 700 12px/1.4 Arial, sans-serif; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 14px; }
.article-reading-page .page-title { font: 700 clamp(32px, 3.4vw, 48px)/1.1 Georgia, serif; letter-spacing: -.025em; margin: 0; max-width: none; }
.article-reading-page .article-detail-lede { font: 22px/1.45 Georgia, serif; color: #4c4c4c; margin: 18px 0 0; max-width: none; }
.article-reading-page .reading-figure { margin: 34px 0; width: 100%; }
.article-reading-page .reading-figure img { display: block; width: auto; height: auto; max-width: 100%; max-height: 760px; margin: 0 auto; object-fit: contain; border: 0; border-radius: 0; }
.article-reading-page .reading-figure figcaption { font: 13px/1.5 Arial, sans-serif; color: #666; margin: 9px 0 0; padding: 0; }
.reading-credit { display: inline; margin-left: .65em; font-size: 11px; color: #777; }
.article-reading-page .reading-hero { margin-top: 0; margin-bottom: 26px; }
.reading-byline { margin: 0 28px 28px; padding-bottom: 18px; border-bottom: 1px solid #ddd; }
.reading-author { font: 700 14px/1.5 Arial, sans-serif; margin: 0 0 5px; }
.article-reading-page .article-meta-line { font: 12px/1.5 Arial, sans-serif; margin: 0; color: #666; }
.article-reading-page .article-body { max-width: none; width: auto; margin: 0; font: 20px/1.65 Georgia, serif; overflow-wrap: break-word; }
.article-reading-page .article-body > :not(.reading-figure) { margin-left: 28px; margin-right: 28px; }
.article-reading-page .article-body p { margin-top: 0; margin-bottom: 22px; }
.article-reading-page .article-body h2 { font: 700 28px/1.25 Georgia, serif; margin-top: 38px; margin-bottom: 18px; }
.article-reading-page .article-body h3 { font: 700 23px/1.3 Georgia, serif; }
.reading-endnotes { margin: 40px 28px 0; padding-top: 20px; border-top: 1px solid #aaa; font: 13px/1.6 Arial, sans-serif; }
.article-reading-page .article-detail-links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 18px 0 0; }
.article-reading-page .article-detail-links a { color: #303030; text-underline-offset: 4px; }
@media(max-width: 600px) {
 .reading-shell { width: calc(100% - 28px); margin-top: 28px; }
 .article-reading-page .article-detail-header, .reading-byline, .reading-endnotes { margin-left: 8px; margin-right: 8px; }
 .article-reading-page .article-body > :not(.reading-figure) { margin-left: 8px; margin-right: 8px; }
 .article-reading-page .article-body { font-size: 18px; line-height: 1.6; }
 .article-reading-page .article-detail-lede { font-size: 20px; }
 .article-reading-page .reading-figure { margin-top: 26px; margin-bottom: 26px; }
 .article-reading-page .reading-hero { margin-top: 0; }
}

/* Archive photographs sit within the narrative; clear section headings keep
   each image with its own subject. Phones return to a single reading column. */
.article-reading-page .article-body { display: flow-root; }
.article-reading-page .article-body > h2 { clear: both; }
.article-reading-page .article-body .reading-inset { width: 38%; max-width: 390px; margin-top: 4px; margin-bottom: 22px; clear: both; }
.article-reading-page .article-body .reading-inset-left { float: left; margin-left: 28px; margin-right: 30px; }
.article-reading-page .article-body .reading-inset-right { float: right; margin-right: 28px; margin-left: 30px; }
.article-reading-page .reading-inset img { width: 100%; max-height: none; }
@media(max-width: 700px) {
 .article-reading-page .article-body .reading-inset { float: none; width: auto; max-width: 100%; margin: 24px 8px; }
 .article-reading-page .reading-inset img { width: auto; max-height: 580px; }
}

@media(min-width: 851px) {
 .article-reading-page .article-body .reading-inset-large { width: 48%; max-width: 510px; }
 .article-reading-page .article-body .reading-inset { margin-bottom: 28px; }
}
.article-reading-page .article-body .reading-pullquote { clear: both; margin: 38px 28px; padding: 25px 0 22px; border-top: 1px solid #222; border-bottom: 1px solid #bbb; }
.article-reading-page .reading-pullquote blockquote { border: 0; background: transparent; margin: 0; padding: 0; font: 700 clamp(25px,2.5vw,34px)/1.25 Georgia,serif; letter-spacing: -.02em; }
.article-reading-page .reading-pullquote p { margin: 14px 0 0; font: 12px/1.5 Arial,sans-serif; color: #666; }
@media(max-width: 850px) {
 .article-reading-page .article-body .reading-inset { float: none; width: auto; max-width: 100%; margin: 24px 8px; }
 .article-reading-page .reading-inset img { width: auto; max-height: 580px; }
 .article-reading-page .article-body .reading-pullquote { margin: 28px 8px; }
}

/* Paired event photos clear preceding insets and restore the full reading width. */
.article-reading-page .reading-pair-row { clear: both; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin: 30px 0; }
.article-reading-page .article-body > .reading-pair-row { margin-left: 0; margin-right: 0; }
.article-reading-page .reading-pair-row .reading-pair { width: 100%; margin: 0; }
.article-reading-page .reading-pair img { width: 100%; max-height: none; }
@media(max-width: 700px) { .article-reading-page .reading-pair-row { grid-template-columns: 1fr; gap: 24px; } }