/* ========================================================================== Reading Mode — a calmer, encyclopedia-style view for long articles. Toggled by adding "reading-mode" to on article.html. Site chrome (header, nav, footer) stays put; only the article's own decoration and secondary widgets are stripped back. ========================================================================== */ body.reading-mode { background: #fff; } body.reading-mode .toolbar { background: #fff; } body.reading-mode .article-banner, body.reading-mode .sidebar, body.reading-mode .discussion-card, body.reading-mode .reading-hide { display: none; } body.reading-mode .article-main { flex: 0 0 100%; max-width: 700px; margin: 0 auto; float: none; } body.reading-mode .article-header, body.reading-mode .breadcrumb-bar { max-width: 760px; margin-left: auto; margin-right: auto; } body.reading-mode .article-header h1 { font-family: var(--f-serif); font-weight: 600; } body.reading-mode .article-dek { font-family: var(--f-serif); font-style: italic; } /* Contents box, Wikipedia-style */ body.reading-mode .toc-box { display: block; background: var(--bg-page); border: 1px solid var(--line); border-radius: .6rem; padding: 1rem 1.3rem; margin-bottom: 2rem; } .toc-box .toc-title { font-family: var(--f-body); font-weight: 700; font-size: .92rem; margin-bottom: .6rem; } .toc-box ol { counter-reset: toc; padding-left: 0; margin: 0; } .toc-box li { counter-increment: toc; font-size: .92rem; padding: .25rem 0; list-style: none; } .toc-box li a::before { content: counter(toc) ". "; font-family: var(--f-body); color: var(--text-muted); } .toc-box li a:hover { text-decoration: underline; } /* Serif reading column */ body.reading-mode .article-body { font-family: var(--f-serif); font-size: calc(1.08rem * var(--read-scale, 1)); line-height: 1.75; } body.reading-mode .article-body h2 { font-family: var(--f-serif); font-weight: 600; font-size: calc(1.4rem * var(--read-scale, 1)); border-bottom: 1px solid var(--line); padding-bottom: .5rem; } body.reading-mode .article-body a { color: #2C5DA8; text-decoration: underline; text-underline-offset: 2px; } body.reading-mode .pullquote { font-family: var(--f-serif); font-style: italic; } body.reading-mode .stat-box { font-family: var(--f-body); } body.reading-mode .tag-footer, body.reading-mode .prev-next, body.reading-mode #relatedBottomWrap { max-width: 700px; margin-left: auto; margin-right: auto; } body.reading-mode #relatedBottomWrap { display: block; margin-top: 2.5rem; } body.reading-mode #relatedBottomWrap h6 { text-align: center; } /* Font-size stepper state (data-size = 1..4 on body) */ body.reading-mode[data-size="1"] { --read-scale: 0.92; } body.reading-mode[data-size="2"] { --read-scale: 1; } body.reading-mode[data-size="3"] { --read-scale: 1.14; } body.reading-mode[data-size="4"] { --read-scale: 1.28; } @media (max-width: 767.98px) { body.reading-mode .article-body { font-size: calc(1rem * var(--read-scale, 1)); } }