/* Approved Alef headings / Heebo reading layout, 24 September 2026. */
html .story-detail { --heading-before: 32px; --heading-after: 8px; --heading-rule-inset: 12px; --group-gap: 32px; --component-gap: 48px; --component-inset: 24px; }
html .related-read > span:first-child { font-weight: 700; }
html .story-detail { padding-top: 22px; }
html .breadcrumbs { min-height: 32px; font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
html .story-hero { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.1fr); align-items: center; gap: 6%; padding-block: 8px 0px; }
html .story-title-block .eyebrow { font-size: 15px; line-height: 1.5; font-weight: 700; margin: 0px; }
html .story-title-block h1 { font-size: clamp(44px, 4.2vw, 60px); font-weight: 700; line-height: 1.15; letter-spacing: 0px; margin-block: 8px 16px; }
html .story-deck { max-width: 40ch; font-size: 22px; line-height: 1.45; font-weight: 400; margin: 0px; text-wrap: pretty; }
html .story-title-block .topic-badges { margin-block: 24px; gap: 8px 12px; font-size: 15px; }
html .story-title-block .topic-badges a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 0px; font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none; color: var(--ink); background: transparent; transition: background-color 180ms var(--ease-settle), color 180ms var(--ease-settle); }
html .story-title-block .topic-badges a:is(:hover, :focus-visible) { background: var(--ink); color: var(--paper); }
html .story-title-block .topic-badges a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
html .story-title-block .life-facts { margin-block: 0px; gap: 16px 32px; }
html .story-title-block .life-fact-label { font-size: 15px; line-height: 1.5; margin-bottom: 4px; }
html .life-fact-value { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 400; letter-spacing: 0px; }
html .story-share--top { margin-top: var(--group-gap); }
html .story-share-label { font-size: 15px; margin-bottom: 8px; }
html .story-share .btn { font-size: 15px; }
html .story-cover .portrait-art { height: clamp(350px, 38vw, 520px); }
html .story-detail--chapters .reading-layout { grid-template-columns: 240px minmax(0px, 660px); column-gap: 72px; max-width: 1040px; margin-inline: auto; justify-content: center; padding-top: var(--component-gap); }
html .reading-content { min-width: 0px; }
html .story-article { padding-block: 0px; }
html .story-detail .article-body { width: 100%; max-width: 660px; font-size: var(--story-text-size); font-weight: 400; line-height: 1.65; letter-spacing: 0px; }
html .story-detail .article-body > p { font: inherit; margin-block: 0px 1.15em; text-align: start; }
html .article-body strong, html .article-body b { font-weight: 700; }
html .story-detail--chapters .article-body .article-chapter { font-size: 28px; line-height: 1.3; font-weight: 700; margin-block: var(--heading-before) var(--heading-after); padding-top: var(--heading-rule-inset); }
html .story-detail--chapters .article-body > .article-chapter:first-child { margin-top: 0px; padding-top: 0px; }
html .story-detail--chapters .article-body .article-subheading { font-size: 23px; font-weight: 700; line-height: 1.35; margin-block: 24px var(--heading-after); padding-top: 0px; }
html .article-body > :has(+ :is(.article-chapter, .article-subheading)), html .article-body > :last-child { margin-block-end: 0px; }
html .story-contents summary { font-size: 17px; line-height: 1.4; font-weight: 700; }
html .story-contents summary small { font-size: 14px; }
html .story-contents nav a, html .story-contents nav a span { font-size: 16px; line-height: 1.4; }
html .story-contents nav a { font-weight: 400; padding-block: 10px; }
html .story-contents nav a.is-current { font-weight: 700; }
html .story-reading-tools { margin-bottom: 24px; }
html .reading-size-label { font-size: 15px; }
html .article-inline-figure figcaption { font-size: 15px; line-height: 1.55; }
html .reading-content > .section:not(.story-article) { margin-block: var(--component-gap) 0; padding-block: var(--component-inset) 0; }
html .story-share--end { margin-block: var(--group-gap) 0; padding-block: var(--component-inset) 0; border-bottom: 0px; }
html .reading-content > .section > h2 { font-size: 28px; font-weight: 700; line-height: 1.3; margin-block: 0px 16px; }
html .reading-content > .section > :last-child { margin-bottom: 0px; }
html .era-col h3 { font-size: 21px; font-weight: 700; margin-block: 0px 8px; }
html .era-list { margin-block: 0px; }
html .era-events { gap: 32px; }
html .era-list li { gap: 4px; padding-block: 16px; }
html .era-list li:first-child { padding-top: 12px; }
html .era-list li:last-child { padding-bottom: 0px; }
html .era-year { font-size: 20px; line-height: 1.4; }
html .era-text { line-height: 1.6; }
html .visit-sites { margin-block: 0px 24px; }
html .comments-section > .hint { margin-block: 0px 16px; }
html .contribute-inline > summary { font-weight: 700; }
html .related-stories { margin-top: var(--component-gap); padding-block: var(--component-inset) var(--component-gap); }
html .related-heading { margin-bottom: 24px; }
html .related-heading h2 { font-size: 32px; font-weight: 700; line-height: 1.3; }
html .related-theme { margin-top: 8px; }
html .related-copy h3 { font-weight: 700; margin-bottom: 8px; }
@media (min-width: 961px) and (max-width: 1150px) {
html .story-detail--chapters .reading-layout { grid-template-columns: 220px minmax(0px, 660px); column-gap: 44px; }
html .story-deck { font-size: 21px; }
}
@media (max-width: 960px), (max-width: 1000px) and (max-height: 500px) {
.story-detail--chapters .reading-layout { display: block; }
.reading-content { width: 100%; max-width: 660px; margin-inline: auto; }
.story-contents { position: sticky; top: var(--reading-header-offset); z-index: 25; width: 100%; max-width: 660px; margin: 0px auto 32px; }
.story-contents[data-enhanced] { top: var(--reading-header-offset); }
.story-contents summary { min-height: 52px; padding-block: 10px; }
.story-contents-panel { max-height: min(55dvh, calc(100dvh - var(--reading-header-offset) - 80px)); }
html .story-detail--chapters .reading-layout { padding-top: var(--component-gap); }
html .story-hero { padding-bottom: 0px; }
html .story-article { padding-top: 0px; }
}
@media (min-width: 761px) and (max-width: 960px) {
html .story-hero { grid-template-columns: 1.1fr 1fr; gap: 28px; }
html .story-title-block h1 { font-size: 46px; }
html .story-deck { font-size: 21px; }
html .story-cover .portrait-art { height: 350px; }
}
@media screen and (max-width: 760px) {
/* Keep the name and artwork together before the introduction on narrow screens. */
html .story-hero > .story-title-block { display: contents; }
html .story-hero .story-heading { order: 0; }
html .story-hero > .story-cover { order: 1; }
html .story-hero .story-intro { order: 2; min-width: 0; }
html .story-hero .story-heading h1 { margin-bottom: 0; }
}
@media (max-width: 760px) {
html .story-detail { padding-top: 14px; --heading-before: 24px; --group-gap: 24px; --component-gap: 40px; --component-inset: 20px; }
html .breadcrumbs { font-size: 14px; margin-bottom: 14px; }
html .story-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 0px; }
html .story-title-block .eyebrow { font-size: 14px; }
html .story-title-block h1 { font-size: 40px; line-height: 1.15; margin-block: 8px 12px; }
html .story-deck { font-size: 19px; line-height: 1.5; max-width: none; }
html .story-title-block .topic-badges { margin-block: 20px; }
html .story-title-block .life-facts { gap: 12px 24px; margin-bottom: 0px; }
html .life-fact-value { font-size: 20px; }
html .story-share .btn { font-size: 14px; }
html .story-share .share-row { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 6px; }
html .story-cover .portrait-art { height: clamp(260px, 83vw, 360px); }
html .story-detail .article-body { line-height: 1.7; }
html .story-detail--chapters .article-body .article-chapter { font-size: 24px; line-height: 1.3; }
html .story-detail--chapters .article-body > .article-chapter:first-child { margin-top: 0px; padding-top: 0px; }
html .story-detail--chapters .article-body .article-subheading { font-size: 21px; }
html .story-reading-tools { margin-bottom: 20px; }
html .reading-content > .section > h2, html .related-heading h2 { font-size: 26px; }
}
@media (max-width: 350px) {
html .story-title-block h1 { font-size: 38px; }
html .story-title-block .life-facts { gap: 12px 18px; }
}
@media (forced-colors: active) {
html .story-title-block .topic-badges a { color: linktext; border-color: linktext; }
html .story-title-block .topic-badges a:is(:hover, :focus-visible) { color: highlighttext; background: highlight; }
}
@media print {
html .story-detail .article-body { font-size: 12pt; max-width: none; }
}